import { CustomElement } from '../../Abstracts/CustomElement'; import type { IMenuItemGroupElementProps } from './IMenuItemGroupElementProps'; import { MenuItemElement } from './MenuItemElement'; import { IItemsAware } from '../../../Components/Interfaces/IItemsAware'; import { TextOverflow } from '../../../Types/TextOverflow'; declare const MenuItemGroupElement_base: (abstract new (...args: Array) => import("../../../Behaviors/Themeable").IThemeableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Orientable").IOrientableProps) & typeof CustomElement & import("../../../Behaviors/Themeable").IThemeableCtor; /** * Menu Item Group - A container for organizing related menu items into labeled sections within a menu. * * @description * The Menu Item Group component provides a way to organize related menu items into logical sections * with an optional header label. It supports both horizontal and vertical orientations, text overflow * handling, and automatic item counting. The group helps create clear visual hierarchies and improves * menu navigation by categorizing related actions or options together. It's commonly used to separate * different types of actions or to create labeled sections within dropdown menus and context menus. * * @name Menu Item Group * @element mosaik-menu-item-group * @category Selectors * * @slot - The default slot for menu items (mosaik-menu-item elements) * @slot header - Custom header content (overrides the default header text) * * @csspart header - The header text element * @csspart items - The menu items container stack * * @cssprop {String} --menu-item-group-font-family - The font family for group text * @cssprop {String} --menu-item-group-font-size - The font size for group text * @cssprop {String} --menu-item-group-font-weight - The font weight for group text * @cssprop {String} --menu-item-group-padding-top - The top padding inside the group * @cssprop {String} --menu-item-group-padding-right - The right padding inside the group * @cssprop {String} --menu-item-group-padding-bottom - The bottom padding inside the group * @cssprop {String} --menu-item-group-padding-left - The left padding inside the group * @cssprop {String} --menu-item-group-gap - The spacing between items * @cssprop {String} --menu-item-group-foreground-color - The text color * @cssprop {String} --menu-item-group-background-color - The background fill color * @cssprop {String} --menu-item-group-border-color - The border color * @cssprop {String} --menu-item-group-border-width - The border thickness * @cssprop {String} --menu-item-group-border-radius - The corner rounding radius * @cssprop {String} --menu-item-group-border-style - The border line style * @cssprop {String} --menu-item-group-shadow - The drop shadow or elevation effect * @cssprop {String} --menu-item-group-header-font-family - The font family for header text * @cssprop {String} --menu-item-group-header-font-size - The font size for header text * @cssprop {String} --menu-item-group-header-font-line-height - The line height for header text * @cssprop {String} --menu-item-group-header-font-weight - The font weight for header text * @cssprop {String} --menu-item-group-header-font-letter-spacing - The letter spacing for header text * @cssprop {String} --menu-item-group-header-font-text-decoration - The text decoration for header * @cssprop {String} --menu-item-group-header-font-text-transform - The text transformation for header * @cssprop {String} --menu-item-group-transition-duration - The duration of transitions * @cssprop {String} --menu-item-group-transition-mode - The timing function for transitions * @cssprop {String} --menu-item-group-transition-property - The CSS properties to transition * * @dependency {TextElement} - Text rendering component for the header * @dependency {MenuItemElement} - Child menu item elements * @dependency {StackElement} - Layout container for organizing items * * @fires connected {ConnectedEvent} - Fired when connected to the DOM * @fires changed {PropertyChangedEvent} - Fired when properties change * * @example * Basic menu item group (header set via JavaScript): * ```html * * New * Open * Save * * * ``` * * @example * Horizontal menu group with text-overflow: * ```html * * Edit * Delete * * ``` * * @example * Group with custom header slot: * ```html * *
* * Settings *
* Preferences * Privacy *
* ``` * * @public */ export declare class MenuItemGroupElement extends MenuItemGroupElement_base implements IMenuItemGroupElementProps, IItemsAware { private _header; private _textOverflow; /** * @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 */ get header(): string; set header(value: string); /** * Gets or sets the `textOverflow` property. * * @public * @attr */ get textOverflow(): TextOverflow; set textOverflow(value: TextOverflow); /** * Returns the `count` property. * * @private * @readonly */ get count(): number; /** * Returns the `items` property. * * @private * @readonly */ get items(): Array; } /** * @public */ export declare namespace MenuItemGroupElement { type Props = IMenuItemGroupElementProps; } /** * @public */ declare global { interface HTMLElementTagNameMap { 'mosaik-menu-item-group': MenuItemElement; } } export {}; //# sourceMappingURL=MenuItemGroupElement.d.ts.map