import { IEventDetail, IEventEmitter } from '@breadstone/mosaik-elements'; import { type ISlottable } from '../../../Behaviors/Slottable'; import { SubMenuMode } from '../../../Types/SubMenuMode'; import { TextOverflow } from '../../../Types/TextOverflow'; import { CustomElement } from '../../Abstracts/CustomElement'; import { IExpandable } from '../../Interfaces/IExpandable'; import type { IMenuItemElementProps } from './IMenuItemElementProps'; declare const MenuItemElement_base: (abstract new (...args: Array) => import("../../../Behaviors/Themeable").IThemeableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Rippleable").IRippleableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Disableable").IDisableableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Valueable").IValueableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Variantable").IVariantableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Appearanceable").IAppearanceableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Focusable").IFocusableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Slottable").ISlottableProps & ISlottable) & (abstract new (...args: Array) => import("../../../Behaviors/Labelable").ILabelableProps) & typeof CustomElement & import("../../../Behaviors/Themeable").IThemeableCtor; /** * Menu Item - An interactive menu option supporting hierarchical submenus and multiple display modes. * * @description * The Menu Item component represents an actionable option within a menu or submenu structure. * It supports nested hierarchical menus with both inline and popover submenu modes, icons, labels, * sublabels, checkmarks for selection states, and comprehensive keyboard navigation. The component * can expand to reveal child menu items, display active/checked states, and includes interactive * features like ripple effects and focus indicators. It supports both mouse hover and touch * interactions for submenu expansion. * * @name Menu Item * @element mosaik-menu-item * @category Selectors * * @slot - The default slot for child menu items (creates a submenu) * @slot submenu - Alternative slot for child menu items * @slot start - Content displayed at the start (before icon) * @slot icon - The icon displayed for this menu item * @slot label - The primary label text * @slot subLabel - Secondary descriptive text below the label * @slot end - Content displayed at the end (after label) * * @csspart root - The root menu item container * @csspart focusRing - The focus indicator ring for keyboard navigation * @csspart checkmark - The selection checkmark indicator when isChecked is true * @csspart text - The label and sublabel text container * @csspart caret - The expand/collapse indicator icon for items with children * @csspart submenu-container - Hidden container for submenu content (used in popover mode) * @csspart portal - The portal element for popover projection * @csspart popover - The floating popover container for submenu * @csspart submenu - The submenu content wrapper * @csspart projection - The projection target for popover mode * @csspart expandable - The expandable container for inline mode * * @cssprop {String} --menu-item-font-family - The font family for menu item text * @cssprop {String} --menu-item-font-size - The font size for menu item text * @cssprop {String} --menu-item-font-line-height - The line height for menu item text * @cssprop {String} --menu-item-font-weight - The font weight for menu item text * @cssprop {String} --menu-item-font-letter-spacing - The letter spacing for menu item text * @cssprop {String} --menu-item-font-text-decoration - The text decoration style * @cssprop {String} --menu-item-font-text-transform - The text transformation style * @cssprop {String} --menu-item-padding-top - The top padding inside the menu item * @cssprop {String} --menu-item-padding-right - The right padding inside the menu item * @cssprop {String} --menu-item-padding-bottom - The bottom padding inside the menu item * @cssprop {String} --menu-item-padding-left - The left padding inside the menu item * @cssprop {String} --menu-item-gap - The spacing between icon and label elements * @cssprop {String} --menu-item-foreground-color - The text and icon color * @cssprop {String} --menu-item-background-color - The background fill color * @cssprop {String} --menu-item-border-color - The border color * @cssprop {String} --menu-item-border-width - The border thickness * @cssprop {String} --menu-item-border-radius - The corner rounding radius * @cssprop {String} --menu-item-border-style - The border line style * @cssprop {String} --menu-item-shadow - The drop shadow or elevation effect * @cssprop {String} --menu-item-height - The minimum height of the menu item * @cssprop {String} --menu-item-indent-size - The width of the indent indicator * @cssprop {String} --menu-item-indent-offset - The offset for the indent indicator * @cssprop {String} --menu-item-indent-color - The color of the indent indicator * @cssprop {String} --menu-item-transition-duration - The duration of hover/focus transitions * @cssprop {String} --menu-item-transition-mode - The timing function for transitions * @cssprop {String} --menu-item-transition-property - The CSS properties to transition * @cssprop {String} --focus-ring-color - The focus ring color * @cssprop {String} --focus-ring-outward-offset - The focus ring distance from edge * @cssprop {String} --focus-ring-inward-offset - The focus ring inward offset * @cssprop {String} --focus-ring-active-width - The focus ring width when focused * @cssprop {String} --ripple-color - The ripple effect color * * @dependency {IconElement} - Icon display component * @dependency {ButtonElement} - Expand/collapse button component * @dependency {TextElement} - Text rendering component for labels * @dependency {RippleElement} - Touch feedback effect component * @dependency {FocusRingElement} - Keyboard focus indicator component * @dependency {StackElement} - Layout container for organizing content * @dependency {CheckmarkElement} - Selection checkmark indicator * @dependency {ExpandableElement} - Expandable container for inline submenus * @dependency {FloatingElement} - Floating popover container * @dependency {PortalElement} - Portal for rendering popovers outside DOM hierarchy * * @fires activated {ActivatedEvent} - Fired when the menu item is clicked or activated * @fires connected {ConnectedEvent} - Fired when connected to the DOM * @fires changed {PropertyChangedEvent} - Fired when properties change * * @example * Basic menu item (label and icon set via JavaScript): * ```html * Save * ``` * * @example * Menu item with submenu (inline mode): * ```html * * File * New * Open * Save * * ``` * * @example * Menu item with popover submenu: * ```html * * Edit * Cut * Copy * Paste * * ``` * * @example * Checkable menu item: * ```html * Show Toolbar * ``` * * @public */ export declare class MenuItemElement extends MenuItemElement_base implements IMenuItemElementProps, ISlottable, IExpandable { /** * Delay in ms before a submenu opens on hover (Windows default is ~400ms). * * @private * @static * @readonly */ private static readonly HOVER_OPEN_DELAY_MS; /** * Delay in ms before a submenu closes after hover-out. * * @private * @static * @readonly */ private static readonly HOVER_CLOSE_DELAY_MS; private readonly _inheritance; private readonly _keyboardController; private _projectionController; private _submenuProjectionController; private readonly _activated; private _subLabel; private _icon; private _isActive; private _isChecked; private _hasChildren; private _isExpanded; private _textOverflow; private _menuMode; private _hoverCloseDelayId; private _hoverOpenDelayId; /** * @public */ constructor(); /** * Returns the `is` property. * The `is` property represents natural name of this element. * * @public * @static * @readonly */ static get is(): string; /** * @inheritdoc * When used inside a Menu, inherits the menu's disabled state unless explicitly set. * * @public * @override */ get disabled(): boolean; set disabled(value: boolean); /** * Gets or sets the `subLabel` property. * * @public * @attr */ get subLabel(): string; set subLabel(value: string); /** * Gets or sets the `icon` property. * * @public */ get icon(): string; set icon(value: string); /** * Gets or sets the `isActive` property. * * @public * @attr */ get isActive(): boolean; set isActive(value: boolean); /** * Gets or sets the `isChecked` property. * * @public * @attr */ get isChecked(): boolean; set isChecked(value: boolean); /** * Gets or sets the `isExpanded` property. * * @public * @attr */ get isExpanded(): boolean; set isExpanded(value: boolean); /** * The `hasChildren` property represents whether the element has children or not. * * @public * @readonly * @attr */ get hasChildren(): boolean; private set hasChildren(value); /** * Gets or sets the `textOverflow` property. * * @public * @attr */ get textOverflow(): TextOverflow; set textOverflow(value: TextOverflow); /** * Determines how child menus are displayed. * * @public * @attr */ get menuMode(): SubMenuMode; set menuMode(value: SubMenuMode); /** * Called when the element is activated. * Provides reference to `IEventDetail` as event detail. * * @public * @readonly * @eventProperty */ get activated(): IEventEmitter; /** * Expands the menu item. * * @public */ expand(): void; /** * Collapses the menu item. * * @public */ collapse(): void; /** * Toggles the expanded state of the menu item. * * @public */ toggle(): void; /** * @public * @override */ connectedCallback(): void; /** * @public * @override */ disconnectedCallback(): void; /** * @public * @overload */ onSlotChanges(slotName?: string): void; /** * Handles pointer leave from the floating submenu element. * This is called when the pointer leaves the Portal-projected floating element. * Only collapses on mouse leave (not touch). * * @private * @template */ handleFloatingPointerLeave(event: PointerEvent): void; /** * Emits the `activated` event. * * @protected */ protected onActivated(args: IEventDetail): void; /** * Clears the hover close delay timer. * * @private */ private clearHoverCloseDelay; /** * Clears the hover open delay timer. * * @private */ private clearHoverOpenDelay; /** * Cancels all pending hover timers (open and close). * Used by siblings to clean up when a different item is hovered. * * @private */ cancelPendingTimers(): void; /** * Collapses sibling menu items that have open popover submenus. * Ensures only one submenu is visible at a time, matching native Windows menu behavior. * * @private */ private collapseSiblings; /** * Handles pointer enter for hover-based expansion. * Opens submenus on hover after a delay, matching Windows native menu behavior. * Also collapses any sibling submenus to ensure only one is visible at a time. * Only expands on mouse hover (not touch), as touch devices use tap to toggle. * * @private */ private handlePointerEnter; /** * Handles pointer leave for hover-based collapse. * Uses relatedTarget to determine if the pointer moved into a child element (floating submenu). * Cancels any pending hover-open timer and uses a forgiving close delay. * Only collapses on mouse leave (not touch), as touch devices use tap to toggle. * * @private */ private handlePointerLeave; /** * Handles pointer down for touch-based toggling. * On touch devices, toggle the expanded state on tap. * * @private */ private handlePointerDown; /** * Handles mouse click on the menu item. * Only intercepts clicks that originate from this item directly (not from child menu items * bubbling up). For popover parent items: prevents propagation so the surrounding popup/dropdown * does not close, matching native Windows menu behavior. For leaf items: emits activated. * * @private */ private handleClick; /** * Handles focus transitions to close the popover when focus leaves the item. * * @private */ private handleFocusOut; /** * Checks whether the given target is contained within this element or its shadow DOM children. * This includes the floating submenu element projected via Portal to document.body. * Also checks nested submenus (3+ levels deep) by traversing child menu items. * * @private */ private containsRelatedTarget; } /** * @public */ export declare namespace MenuItemElement { type Props = IMenuItemElementProps; } /** * @public */ declare global { interface HTMLElementTagNameMap { 'mosaik-menu-item': MenuItemElement; } } export {}; //# sourceMappingURL=MenuItemElement.d.ts.map