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) => 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 * * * * * * * * * * * * ``` * * @example * Custom header content via slot: * ```html * *
* Admin Tools (restricted) *
* * *
* ``` * * @public */ export declare class SelectItemGroupElement extends SelectItemGroupElement_base implements ISelectItemGroupElementProps, IItemsAware { 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; } /** * @public */ export declare namespace SelectItemGroupElement { type Props = ISelectItemGroupElementProps; } /** * @public */ declare global { interface HTMLElementTagNameMap { 'mosaik-select-item-group': SelectItemGroupElement; } } export {}; //# sourceMappingURL=SelectItemGroupElement.d.ts.map