import { CustomElement } from '../../Abstracts/CustomElement';
import type { ISelectItemGroupElementProps } from './ISelectItemGroupElementProps';
import { SelectItemElement } from './SelectItemElement';
import { IItemsAware } from '../../Interfaces/IItemsAware';
declare const SelectItemGroupElement_base: (abstract new (...args: Array<any>) => import("../../../Behaviors/Themeable").IThemeableProps) & typeof CustomElement & import("../../../Behaviors/Themeable").IThemeableCtor;
/**
 * Select Item Group - A labeled collection of related select options within dropdown menus.
 *
 * @description
 * The Select Item Group component provides semantic grouping for related select options,
 * creating organized sections within dropdown menus. It includes a header label to
 * identify the group and automatically manages child Select Item elements through its
 * default slot. This component improves menu navigation and comprehension by visually
 * separating options into logical categories. It implements the IItemsAware interface
 * to provide access to grouped items and their count, enabling dynamic menu structures
 * and programmatic interaction with grouped options.
 *
 * @name Select Item Group
 * @element mosaik-select-item-group
 * @category Selectors
 *
 * @slot - The default slot for Select Item elements within the group
 * @slot header - The header slot for custom group label content
 *
 * @csspart header - The group header text element displaying the group label
 *
 * @cssprop {String} --select-item-group-background-color - The background color of the group
 * @cssprop {String} --select-item-group-foreground-color - The header text color
 * @cssprop {String} --select-item-group-border-color - The border color
 * @cssprop {String} --select-item-group-border-width - The border thickness
 * @cssprop {String} --select-item-group-border-style - The border line style
 * @cssprop {String} --select-item-group-border-radius - The corner rounding radius
 * @cssprop {String} --select-item-group-font-family - The font family for group header
 * @cssprop {String} --select-item-group-font-size - The font size for group header
 * @cssprop {String} --select-item-group-font-weight - The font weight for group header
 * @cssprop {String} --select-item-group-padding-top - The top padding inside the group
 * @cssprop {String} --select-item-group-padding-right - The right padding inside the group
 * @cssprop {String} --select-item-group-padding-bottom - The bottom padding inside the group
 * @cssprop {String} --select-item-group-padding-left - The left padding inside the group
 * @cssprop {String} --select-item-group-gap - The spacing between header and items
 * @cssprop {String} --select-item-group-shadow - The drop shadow or elevation effect
 * @cssprop {String} --select-item-group-transition-duration - The duration of state transitions
 * @cssprop {String} --select-item-group-transition-mode - The timing function for transitions
 * @cssprop {String} --select-item-group-transition-property - The CSS properties to transition
 *
 * @dependency {TextElement} - Text rendering component for group header labels
 *
 * @example
 * Basic grouped select items:
 * ```html
 * <mosaik-select>
 *   <mosaik-select-item-group header="Recent">
 *     <mosaik-select-item label="Home" value="home"></mosaik-select-item>
 *     <mosaik-select-item label="Dashboard" value="dashboard"></mosaik-select-item>
 *   </mosaik-select-item-group>
 *
 *   <mosaik-select-item-group header="Settings">
 *     <mosaik-select-item label="Profile" value="profile"></mosaik-select-item>
 *     <mosaik-select-item label="Preferences" value="preferences"></mosaik-select-item>
 *   </mosaik-select-item-group>
 * </mosaik-select>
 * ```
 *
 * @example
 * Custom header content via slot:
 * ```html
 * <mosaik-select-item-group>
 *   <div slot="header">
 *     <strong>Admin Tools</strong> <em>(restricted)</em>
 *   </div>
 *   <mosaik-select-item label="Users" value="users"></mosaik-select-item>
 *   <mosaik-select-item label="Settings" value="admin-settings"></mosaik-select-item>
 * </mosaik-select-item-group>
 * ```
 *
 * @example
 * Programmatic access to grouped items:
 * ```typescript
 * const group = document.querySelector('mosaik-select-item-group');
 * console.log(`Group contains ${group.count} items`);
 * group.items.forEach(item => {
 *   console.log(item.label, item.value);
 * });
 * ```
 *
 * @example
 * Categorized menu structure:
 * ```html
 * <mosaik-select>
 *   <mosaik-select-item-group header="Documents">
 *     <mosaik-select-item label="Invoices" value="invoices"></mosaik-select-item>
 *     <mosaik-select-item label="Reports" value="reports"></mosaik-select-item>
 *   </mosaik-select-item-group>
 *
 *   <mosaik-select-item-group header="Media">
 *     <mosaik-select-item label="Images" value="images"></mosaik-select-item>
 *     <mosaik-select-item label="Videos" value="videos"></mosaik-select-item>
 *   </mosaik-select-item-group>
 * </mosaik-select>
 * ```
 *
 * @public
 */
export declare class SelectItemGroupElement extends SelectItemGroupElement_base implements ISelectItemGroupElementProps, IItemsAware<SelectItemElement> {
    private _header;
    /**
     * @public
     */
    constructor();
    /**
     * Returns the `{@link is}` property.
     * The `{@link is}` property represents natural name of this element.
     *
     * @public
     * @static
     * @readonly
     */
    static get is(): string;
    /**
     * Gets or sets the `header` property.
     *
     * @public
     * @attr
     */
    get header(): string;
    set header(value: string);
    /**
     * Returns the `count` property.
     *
     * @private
     * @readonly
     */
    get count(): number;
    /**
     * Returns the `items` property.
     *
     * @public
     * @readonly
     */
    get items(): Array<SelectItemElement>;
}
/**
 * @public
 */
export declare namespace SelectItemGroupElement {
    type Props = ISelectItemGroupElementProps;
}
/**
 * @public
 */
declare global {
    interface HTMLElementTagNameMap {
        'mosaik-select-item-group': SelectItemGroupElement;
    }
}
export {};
//# sourceMappingURL=SelectItemGroupElement.d.ts.map