import { LitElement, TemplateResult, CSSResult } from 'lit'; import { PopoverPlacement } from '../core/popover/popover.js'; import { DropdownChangeEventDetail, DropdownMenuSelectionMode } from './selection-manager.js'; /** * Custom events for the dropdown menu component */ export interface DropdownMenuEvents { 'forge-ai-dropdown-menu-change': CustomEvent; 'forge-ai-dropdown-menu-open': CustomEvent<{ timestamp: number; }>; 'forge-ai-dropdown-menu-close': CustomEvent<{ timestamp: number; }>; } declare global { interface HTMLElementTagNameMap { 'forge-ai-dropdown-menu': ForgeAiDropdownMenuComponent; } interface HTMLElementEventMap extends DropdownMenuEvents { } } export type DropdownMenuVariant = 'button' | 'icon-button' | 'icon-button-squared'; export type DropdownMenuDensity = 'small' | 'medium' | 'large'; /** * @summary An AI dropdown menu component with advanced selection modes and submenu support. * * @description * A comprehensive dropdown menu component that provides flexible selection modes, * keyboard navigation, accessibility features, and nested submenu support. * * ## Features * - **Multiple Selection Modes**: 'none' (actions), 'single' (radio), 'multi' (checkbox) * - **Keyboard Navigation**: Full keyboard support with arrow keys, Enter, Space, Escape * - **Submenu Support**: Nested dropdowns with configurable trigger behavior * - **Accessibility**: Complete ARIA implementation with screen reader support * - **Type Safety**: Strongly typed events with mode-specific event details * - **Customizable**: CSS custom properties for theming and configuration * * ## Selection Modes * - **'none'**: Items act as actions only (menuitem role) - no persistent state * - **'single'**: Single selection with radio button behavior (menuitemradio role) * - **'multi'**: Multiple selection with checkbox behavior (menuitemcheckbox role) * * ## Events * - **forge-ai-dropdown-menu-change**: Fired when selection changes with type-safe details * - **forge-ai-dropdown-menu-open**: Fired when dropdown opens * - **forge-ai-dropdown-menu-close**: Fired when dropdown closes * * @cssproperty --forge-ai-dropdown-menu-min-width - Minimum width of the dropdown menu. * @cssproperty --forge-ai-dropdown-menu-max-width - Maximum width of the dropdown menu. * @cssproperty --forge-ai-dropdown-menu-max-height - Maximum height of the dropdown menu. * @cssproperty --forge-ai-dropdown-menu-padding - Padding inside the dropdown menu. * * @slot - The default slot for dropdown menu items, item groups, and separators. * @slot header - The header content displayed at the top of the dropdown menu. * @slot trigger-content - The content of the trigger button (text or icon) when no selection is made. * @slot selected-text - Custom content for the trigger button when selections are made (overrides default selection text). * @slot start - The start icon slot for additional trigger button content. * @slot end - The end icon slot for additional trigger button content. * * @example * ```html * * * Option 1 * Option 2 * * * * * * Parent Item * * Child 1 * Child 2 * * * * ``` */ export declare class ForgeAiDropdownMenuComponent extends LitElement { #private; static styles: CSSResult; /** * The variant of the dropdown menu trigger button. */ variant: DropdownMenuVariant; /** * The density of the dropdown menu trigger button. */ density: DropdownMenuDensity; /** * Whether the dropdown is open. */ open: boolean; /** * Whether the dropdown menu is disabled. */ disabled: boolean; /** * The selection mode for the dropdown menu. * - 'none': No selection state, items act as actions only * - 'single': Single selection with radio button behavior * - 'multi': Multiple selection with checkbox behavior */ selectionMode: DropdownMenuSelectionMode; /** * The currently selected value(s). * For single selection: string or null * For multi selection: string array * For none mode: null */ value: string | string[] | null; /** * The placement of the popover relative to the trigger button. * Only applies to root-level menus; submenus always use 'right-start'. */ popoverPlacement: PopoverPlacement; private _isSubmenu; private _navigationController; private _selectionManager; private _triggerButton; private _popover; private _slottedItems; connectedCallback(): void; private _detectSubmenuMode; private _initializeControllers; firstUpdated(): void; disconnectedCallback(): void; updated(changedProperties: Map): void; private _updateItemSelectionState; private _handleTriggerClick; private _onKeyDown; focusFirstItem(): void; private _getMenuItems; private _selectItem; private _dispatchSelectionEvent; private _dispatchOpenCloseEvent; private _onPopoverToggle; private _onItemClick; private _onFocusOut; private _onDefaultSlotChange; private get _dropdownRole(); private get _ariaHasPopup(); private get _ariaMultiSelectable(); private get _popoverPlacement(); private get _popoverAnchor(); private get _selectedText(); private get _shouldShowSelectedText(); render(): TemplateResult; }