import { CustomElement } from '../../Abstracts/CustomElement';
import { IItemsAware } from '../../Interfaces/IItemsAware';
import type { ISelectItemGroupElementProps } from './ISelectItemGroupElementProps';
import { SelectItemElement } from './SelectItemElement';
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-border-color - The border color
 * @cssprop {String} --select-item-group-border-radius - The corner rounding radius
 * @cssprop {String} --select-item-group-border-style - The border line style
 * @cssprop {String} --select-item-group-border-width - The border thickness
 * @cssprop {String} --select-item-group-font-family - The font family for group header
 * @cssprop {String} --select-item-group-font-letter-spacing - The item group font letter spacing CSS custom property.
 * @cssprop {String} --select-item-group-font-line-height - The item group font line height CSS custom property.
 * @cssprop {String} --select-item-group-font-size - The font size for group header
 * @cssprop {String} --select-item-group-font-text-decoration - The item group font text decoration CSS custom property.
 * @cssprop {String} --select-item-group-font-text-transform - The item group font text transform CSS custom property.
 * @cssprop {String} --select-item-group-font-weight - The font weight for group header
 * @cssprop {String} --select-item-group-foreground-color - The header text color
 * @cssprop {String} --select-item-group-gap - The spacing between header and items
 * @cssprop {String} --select-item-group-header-font-family - The font family for header text
 * @cssprop {String} --select-item-group-header-font-letter-spacing - The letter spacing for header text
 * @cssprop {String} --select-item-group-header-font-line-height - The line height for header text
 * @cssprop {String} --select-item-group-header-font-size - The font size for header text
 * @cssprop {String} --select-item-group-header-font-text-decoration - The text decoration for header
 * @cssprop {String} --select-item-group-header-font-text-transform - The text transformation for header
 * @cssprop {String} --select-item-group-header-font-weight - The font weight for header text
 * @cssprop {String} --select-item-group-header-padding-bottom - The header bottom padding
 * @cssprop {String} --select-item-group-header-padding-left - The header left padding
 * @cssprop {String} --select-item-group-header-padding-right - The header right padding
 * @cssprop {String} --select-item-group-header-padding-top - The header top padding
 * @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-padding-right - The right padding inside the group
 * @cssprop {String} --select-item-group-padding-top - The top padding inside the group
 * @cssprop {String} --select-item-group-shadow - The drop shadow or elevation effect
 * @cssprop {String} --select-item-group-shadow-blur - The item group shadow blur CSS custom property.
 * @cssprop {String} --select-item-group-shadow-color - The item group shadow color CSS custom property.
 * @cssprop {String} --select-item-group-shadow-offset-x - The item group shadow offset x CSS custom property.
 * @cssprop {String} --select-item-group-shadow-offset-y - The item group shadow offset y CSS custom property.
 * @cssprop {String} --select-item-group-shadow-spread - The item group shadow spread CSS custom property.
 * @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
 * @cssprop {String} --select-item-group-translate - The item group translate CSS custom property.
 *
 * @dependency mosaik-text - The Text element.
 *
 * @example
 * Basic grouped select items:
 * ```html
 * <mosaik-select>
 *   <mosaik-select-item-group header="Recent">
 *     <mosaik-select-item value="home"></mosaik-select-item>
 *     <mosaik-select-item value="dashboard"></mosaik-select-item>
 *   </mosaik-select-item-group>
 *
 *   <mosaik-select-item-group header="Settings">
 *     <mosaik-select-item value="profile"></mosaik-select-item>
 *     <mosaik-select-item 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 value="users"></mosaik-select-item>
 *   <mosaik-select-item value="admin-settings"></mosaik-select-item>
 * </mosaik-select-item-group>
 * ```
 *
 * @public
 */
export declare class SelectItemGroupElement extends SelectItemGroupElement_base implements ISelectItemGroupElementProps, IItemsAware<SelectItemElement> {
    private _header;
    /**
     * @public
     */
    constructor();
    /**
     * Returns the `is` property.
     * The `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