@raintonic/formaui 0.4.0 → 0.9.2

package/fesm2022/raintonic-formaui-components-dropdown-menu.mjs

@@ -0,0 +1,888 @@
+import * as i0 from '@angular/core';
+import { input, booleanAttribute, output, signal, computed, inject, ElementRef, Renderer2, HostListener, Component, DestroyRef, contentChildren, effect, ViewChild, Directive } from '@angular/core';
+import { FuiOverlayService } from '@raintonic/formaui/cdk/overlay';
+import * as i1 from '@raintonic/formaui/cdk/form-field';
+import { FuiPopupOverlayDirective } from '@raintonic/formaui/cdk/form-field';
+
+const DROPDOWN_MENU_ITEM_VARIANTS = ['default', 'danger'];
+/**
+ * # FuiDropdownMenuItem Component
+ *
+ * A menu item component designed to be used within fui-dropdown-menu.
+ * Provides consistent styling and behavior for menu options.
+ *
+ * ## Features
+ * - Default and danger variants
+ * - Full accessibility support (ARIA attributes, keyboard navigation)
+ * - Icon support with proper spacing
+ * - Disabled state support
+ * - Hover and focus states
+ * - Keyboard activation (Enter and Space)
+ *
+ * ## Usage
+ *
+ * ### Basic Menu Item
+ * ```html
+ * <fui-dropdown-menu-item>Profile</fui-dropdown-menu-item>
+ * ```
+ *
+ * ### Menu Item with Icon
+ * ```html
+ * <fui-dropdown-menu-item>
+ *   <fui-icon name="user" fuiPrefix></fui-icon>
+ *   Profile
+ * </fui-dropdown-menu-item>
+ * ```
+ *
+ * ### Danger Menu Item
+ * ```html
+ * <fui-dropdown-menu-item variant="danger">
+ *   <fui-icon name="trash" fuiPrefix></fui-icon>
+ *   Delete Account
+ * </fui-dropdown-menu-item>
+ * ```
+ *
+ * ### Disabled Menu Item
+ * ```html
+ * <fui-dropdown-menu-item [disabled]="true">
+ *   Unavailable Option
+ * </fui-dropdown-menu-item>
+ * ```
+ *
+ * @example
+ * ```typescript
+ * import { FuiDropdownMenuItemComponent } from '@raintonic/formaui/components/dropdown-menu';
+ *
+ * @Component({
+ *   standalone: true,
+ *   imports: [FuiDropdownMenuItemComponent],
+ *   templateUrl: './my-component.component.html',
+ *   styleUrl: './my-component.component.scss'
+ * })
+ * export class MyComponent {
+ *   onItemClick(event: Event) {
+ *     console.log('Menu item clicked:', event);
+ *   }
+ * }
+ * ```
+ */
+class FuiDropdownMenuItemComponent {
+    /**
+     * Menu item variant that determines the visual style
+     * @default 'default'
+     */
+    variant = input('default', { ...(ngDevMode ? { debugName: "variant" } : /* istanbul ignore next */ {}), transform: (v) => DROPDOWN_MENU_ITEM_VARIANTS.includes(v) ? v : 'default' });
+    /**
+     * Whether the menu item is disabled
+     * @default false
+     */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Emitted when the menu item is clicked or activated
+     */
+    selected = output();
+    /**
+     * Internal tabindex for roving tabindex pattern.
+     * Managed by the parent FuiDropdownMenuComponent.
+     * @internal
+     */
+    tabIndex = signal('-1', ...(ngDevMode ? [{ debugName: "tabIndex" }] : /* istanbul ignore next */ []));
+    // Computed properties
+    computedClasses = computed(() => {
+        const classes = ['fui-dropdown-menu-item', `fui-dropdown-menu-item--${this.variant()}`];
+        if (this.disabled()) {
+            classes.push('fui-dropdown-menu-item--disabled');
+        }
+        return classes.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "computedClasses" }] : /* istanbul ignore next */ []));
+    /** @internal */ _elementRef = inject(ElementRef);
+    _renderer = inject(Renderer2);
+    onClick(event) {
+        if (this.disabled()) {
+            event.preventDefault();
+            event.stopPropagation();
+            return;
+        }
+        this.selected.emit(event);
+    }
+    onKeydown(event) {
+        if (this.disabled()) {
+            return;
+        }
+        switch (event.key) {
+            case 'Enter':
+            case ' ':
+                event.preventDefault();
+                // Dispatch a synthetic click so the parent menu's click handler
+                // can detect the activation and close the menu.
+                this._elementRef.nativeElement.click();
+                break;
+        }
+    }
+    /**
+     * Focuses the menu item
+     */
+    focus() {
+        this._elementRef.nativeElement.focus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiDropdownMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.6", type: FuiDropdownMenuItemComponent, isStandalone: true, selector: "fui-dropdown-menu-item", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selected" }, host: { listeners: { "click": "onClick($event)", "keydown": "onKeydown($event)" }, properties: { "class": "computedClasses()", "attr.role": "\"menuitem\"", "attr.tabindex": "disabled() ? \"-1\" : tabIndex()", "attr.aria-disabled": "disabled() ? \"true\" : null" } }, ngImport: i0, template: "<ng-content></ng-content>\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-out);transition-delay:0ms}.fui-motion-fade-out{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in);transition-delay:0ms}.fui-motion-slide-in-bottom{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition-property:transform,opacity;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-base) var(--fui-ease-out)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}:host.fui-dropdown-menu-item{transition-property:background-color;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms;display:flex;align-items:center;gap:var(--fui-spacing-4);width:100%;padding:var(--fui-spacing-4) var(--fui-spacing-6);margin:0;background-color:transparent;border:none;border-radius:var(--fui-radius-sm);font-family:var(--fui-font-sans);letter-spacing:.56px;font-size:var(--fui-text-base);font-weight:var(--fui-weight-regular);line-height:var(--fui-leading-normal);text-align:left;text-decoration:none;color:var(--fui-text-secondary);cursor:pointer;-webkit-user-select:none;user-select:none;outline:none}:host.fui-dropdown-menu-item:focus-visible{background-color:var(--fui-bg-subtle);outline:var(--fui-state-focus-ring-width) solid var(--fui-border-primary);outline-offset:-2px}:host.fui-dropdown-menu-item:hover:not(.fui-dropdown-menu-item--disabled){background-color:var(--fui-bg-subtle)}:host.fui-dropdown-menu-item:active:not(.fui-dropdown-menu-item--disabled){background-color:var(--fui-bg-muted)}:host.fui-dropdown-menu-item--danger{color:var(--fui-error-100)}:host.fui-dropdown-menu-item--danger:hover:not(.fui-dropdown-menu-item--disabled){background-color:var(--fui-error-10);color:var(--fui-error-70)}:host.fui-dropdown-menu-item--danger:active:not(.fui-dropdown-menu-item--disabled){background-color:var(--fui-error-20);color:var(--fui-error-80)}:host.fui-dropdown-menu-item--danger:focus-visible{background-color:var(--fui-error-10);outline-color:var(--fui-error-60)}:host.fui-dropdown-menu-item--disabled{color:var(--fui-text-secondary);cursor:not-allowed;opacity:var(--fui-state-disabled-opacity)}:host.fui-dropdown-menu-item--disabled:hover,:host.fui-dropdown-menu-item--disabled:active,:host.fui-dropdown-menu-item--disabled:focus{background-color:transparent}:host.fui-dropdown-menu-item .fui-icon{flex-shrink:0;width:var(--fui-icon-xs);height:var(--fui-icon-xs);font-size:var(--fui-icon-md)}:host.fui-dropdown-menu-item .fui-icon[fuiPrefix]{margin-right:var(--fui-spacing-2)}:host.fui-dropdown-menu-item .fui-icon[fuiSuffix]{margin-left:auto;margin-right:0}:host.fui-dropdown-menu-item .fui-dropdown-menu-item__shortcut{margin-left:auto;font-size:var(--fui-text-sm);color:var(--fui-text-secondary);font-family:var(--fui-font-mono)}@media(prefers-contrast:more){:host.fui-dropdown-menu-item:focus-visible{outline-width:3px}:host.fui-dropdown-menu-item--danger:focus-visible{outline-width:3px}}@media(prefers-reduced-motion:reduce){:host.fui-dropdown-menu-item{transition:none}}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiDropdownMenuItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fui-dropdown-menu-item', standalone: true, imports: [], host: {
+                        '[class]': 'computedClasses()',
+                        '[attr.role]': '"menuitem"',
+                        '[attr.tabindex]': 'disabled() ? "-1" : tabIndex()',
+                        '[attr.aria-disabled]': 'disabled() ? "true" : null',
+                    }, template: "<ng-content></ng-content>\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-out);transition-delay:0ms}.fui-motion-fade-out{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in);transition-delay:0ms}.fui-motion-slide-in-bottom{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition-property:transform,opacity;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-base) var(--fui-ease-out)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}:host.fui-dropdown-menu-item{transition-property:background-color;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms;display:flex;align-items:center;gap:var(--fui-spacing-4);width:100%;padding:var(--fui-spacing-4) var(--fui-spacing-6);margin:0;background-color:transparent;border:none;border-radius:var(--fui-radius-sm);font-family:var(--fui-font-sans);letter-spacing:.56px;font-size:var(--fui-text-base);font-weight:var(--fui-weight-regular);line-height:var(--fui-leading-normal);text-align:left;text-decoration:none;color:var(--fui-text-secondary);cursor:pointer;-webkit-user-select:none;user-select:none;outline:none}:host.fui-dropdown-menu-item:focus-visible{background-color:var(--fui-bg-subtle);outline:var(--fui-state-focus-ring-width) solid var(--fui-border-primary);outline-offset:-2px}:host.fui-dropdown-menu-item:hover:not(.fui-dropdown-menu-item--disabled){background-color:var(--fui-bg-subtle)}:host.fui-dropdown-menu-item:active:not(.fui-dropdown-menu-item--disabled){background-color:var(--fui-bg-muted)}:host.fui-dropdown-menu-item--danger{color:var(--fui-error-100)}:host.fui-dropdown-menu-item--danger:hover:not(.fui-dropdown-menu-item--disabled){background-color:var(--fui-error-10);color:var(--fui-error-70)}:host.fui-dropdown-menu-item--danger:active:not(.fui-dropdown-menu-item--disabled){background-color:var(--fui-error-20);color:var(--fui-error-80)}:host.fui-dropdown-menu-item--danger:focus-visible{background-color:var(--fui-error-10);outline-color:var(--fui-error-60)}:host.fui-dropdown-menu-item--disabled{color:var(--fui-text-secondary);cursor:not-allowed;opacity:var(--fui-state-disabled-opacity)}:host.fui-dropdown-menu-item--disabled:hover,:host.fui-dropdown-menu-item--disabled:active,:host.fui-dropdown-menu-item--disabled:focus{background-color:transparent}:host.fui-dropdown-menu-item .fui-icon{flex-shrink:0;width:var(--fui-icon-xs);height:var(--fui-icon-xs);font-size:var(--fui-icon-md)}:host.fui-dropdown-menu-item .fui-icon[fuiPrefix]{margin-right:var(--fui-spacing-2)}:host.fui-dropdown-menu-item .fui-icon[fuiSuffix]{margin-left:auto;margin-right:0}:host.fui-dropdown-menu-item .fui-dropdown-menu-item__shortcut{margin-left:auto;font-size:var(--fui-text-sm);color:var(--fui-text-secondary);font-family:var(--fui-font-mono)}@media(prefers-contrast:more){:host.fui-dropdown-menu-item:focus-visible{outline-width:3px}:host.fui-dropdown-menu-item--danger:focus-visible{outline-width:3px}}@media(prefers-reduced-motion:reduce){:host.fui-dropdown-menu-item{transition:none}}\n"] }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], selected: [{ type: i0.Output, args: ["selected"] }], onClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }], onKeydown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }] } });
+
+const FUI_DROPDOWN_MENU_POSITIONS = [
+    'top-start',
+    'top',
+    'top-end',
+    'bottom-start',
+    'bottom',
+    'bottom-end',
+    'left-start',
+    'left',
+    'left-end',
+    'right-start',
+    'right',
+    'right-end',
+];
+const FUI_DROPDOWN_MENU_SIZES = ['sm', 'md', 'lg'];
+/**
+ * # FuiDropdownMenu Component
+ *
+ * A dropdown menu component that provides a list of options or actions.
+ * Designed to work with external triggers using the fuiDropdownMenuTrigger directive.
+ *
+ * ## Features
+ * - Multiple positioning options relative to trigger
+ * - Keyboard navigation (Arrow keys, Enter, Escape)
+ * - Click outside to close
+ * - Full accessibility support (ARIA attributes, focus management)
+ * - Customizable size variants
+ * - Auto-positioning with collision detection
+ * - Portal attachment to document body to avoid clipping issues
+ *
+ * ## Usage
+ *
+ * ### Basic DropdownMenu with External Trigger
+ * ```html
+ * <button fuiButton fuiDropdownMenuTrigger [fuiDropdownMenuTriggerFor]="menu">
+ *   Open Menu
+ * </button>
+ * <fui-dropdown-menu #menu>
+ *   <fui-dropdown-menu-item>Option 1</fui-dropdown-menu-item>
+ *   <fui-dropdown-menu-item>Option 2</fui-dropdown-menu-item>
+ * </fui-dropdown-menu>
+ * ```
+ *
+ * ### DropdownMenu with Custom Position
+ * ```html
+ * <button fuiButton fuiDropdownMenuTrigger [fuiDropdownMenuTriggerFor]="menu">
+ *   Open Menu
+ * </button>
+ * <fui-dropdown-menu #menu position="top-start" size="lg">
+ *   <fui-dropdown-menu-item>Profile</fui-dropdown-menu-item>
+ *   <fui-dropdown-menu-item variant="danger">Logout</fui-dropdown-menu-item>
+ * </fui-dropdown-menu>
+ * ```
+ *
+ * ### DropdownMenu without Portal (for special cases)
+ * ```html
+ * <button fuiButton fuiDropdownMenuTrigger [fuiDropdownMenuTriggerFor]="menu">
+ *   Open Menu
+ * </button>
+ * <fui-dropdown-menu #menu [attachToBody]="false">
+ *   <fui-dropdown-menu-item>Option 1</fui-dropdown-menu-item>
+ *   <fui-dropdown-menu-item>Option 2</fui-dropdown-menu-item>
+ * </fui-dropdown-menu>
+ * ```
+ *
+ * ### DropdownMenu with Data Passed from Trigger
+ * ```html
+ * <button fuiButton fuiDropdownMenuTrigger
+ *         [fuiDropdownMenuTriggerFor]="dynamicMenu"
+ *         [menuTriggerData]="{ user: currentUser, items: menuItems }">
+ *   Open Menu
+ * </button>
+ * <fui-dropdown-menu #dynamicMenu>
+ *   <!-- Access data in component using menu.menuData() -->
+ * </fui-dropdown-menu>
+ * ```
+ *
+ * ```typescript
+ * @Component({
+ *   template: `
+ *     <fui-dropdown-menu #menu>
+ *       <fui-dropdown-menu-item *ngFor="let item of menu.menuData()?.items">
+ *         {{ item.label }}
+ *       </fui-dropdown-menu-item>
+ *     </fui-dropdown-menu>
+ *   `
+ * })
+ * export class MyComponent { }
+ * ```
+ */
+class FuiDropdownMenuComponent {
+    /**
+     * Menu position relative to the trigger element
+     * @default 'bottom-start'
+     */
+    position = input('bottom-start', ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
+    /**
+     * Menu size variant
+     * @default 'md'
+     */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether the menu should close when clicking outside
+     * @default true
+     */
+    closeOnClickOutside = input(true, { ...(ngDevMode ? { debugName: "closeOnClickOutside" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Whether the menu is disabled
+     * @default false
+     */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Whether to attach the menu panel to the document body to avoid clipping issues
+     * @default true
+     */
+    attachToBody = input(true, { ...(ngDevMode ? { debugName: "attachToBody" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Emitted when the menu open state changes
+     */
+    openChange = output();
+    /**
+     * Emitted when a menu item is selected
+     */
+    itemSelected = output();
+    // Internal state
+    _isOpen = signal(false, ...(ngDevMode ? [{ debugName: "_isOpen" }] : /* istanbul ignore next */ []));
+    _animationState = signal('void', ...(ngDevMode ? [{ debugName: "_animationState" }] : /* istanbul ignore next */ []));
+    _triggerElement = signal(null, ...(ngDevMode ? [{ debugName: "_triggerElement" }] : /* istanbul ignore next */ []));
+    _menuData = signal(null, ...(ngDevMode ? [{ debugName: "_menuData" }] : /* istanbul ignore next */ []));
+    _previousFocusedElement = null;
+    _closeAnimationTimeout = null;
+    // Computed properties
+    computedClasses = computed(() => {
+        const classes = [
+            'fui-dropdown-menu',
+            `fui-dropdown-menu--${this.position()}`,
+            `fui-dropdown-menu--${this.size()}`,
+        ];
+        if (this.disabled()) {
+            classes.push('fui-dropdown-menu--disabled');
+        }
+        return classes.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "computedClasses" }] : /* istanbul ignore next */ []));
+    // Injected dependencies
+    _destroyRef = inject(DestroyRef);
+    _elementRef = inject(ElementRef);
+    // Kept for _isTopmostOverlay() — getActiveOverlays() is not exposed on the directive
+    _overlayService = inject(FuiOverlayService);
+    _popup = inject(FuiPopupOverlayDirective);
+    // View references
+    menuPanel;
+    // Content children for roving tabindex management
+    _menuItems = contentChildren(FuiDropdownMenuItemComponent, { ...(ngDevMode ? { debugName: "_menuItems" } : /* istanbul ignore next */ {}), descendants: true });
+    constructor() {
+        // Disable the directive's own ESC handler — we handle ESC via document:keydown
+        // with _isTopmostOverlay() to support nested menus correctly.
+        this._popup.closeOnEscape.set(false);
+        // Drive the open/close animation lifecycle via an effect, so the close-animation
+        // setTimeout is scheduled in reaction to the open-state signal changing.
+        effect(() => {
+            if (this._isOpen()) {
+                // Panel just became open: initiate overlay creation.
+                // _animationState is set to 'enter' INSIDE _openMenu(), deferred until AFTER
+                // the overlay portal and position have been applied. This prevents the panel
+                // from flashing at the in-place (wrong) position: the panel renders initially
+                // with the default 'void' CSS state (opacity:0; translateY(-14px)), then the
+                // enter transition fires from the correctly-positioned overlay location.
+                this._openMenu();
+            }
+            else {
+                // Panel just became closed: start the leave animation + cleanup timer.
+                this._startCloseAnimation();
+            }
+        });
+        // Emit open change events — cleaned up on destroy
+        const openChangeEffect = effect(() => {
+            this.openChange.emit(this._isOpen());
+        }, ...(ngDevMode ? [{ debugName: "openChangeEffect" }] : /* istanbul ignore next */ []));
+        this._destroyRef.onDestroy(() => {
+            openChangeEffect.destroy();
+        });
+    }
+    /**
+     * Whether the menu is currently open
+     */
+    isOpen() {
+        return this._isOpen();
+    }
+    /**
+     * Opens the menu
+     */
+    open() {
+        if (this.disabled())
+            return;
+        this._isOpen.set(true);
+    }
+    /**
+     * Closes the menu
+     */
+    close() {
+        this._isOpen.set(false);
+    }
+    /**
+     * Toggles the menu open/closed state
+     */
+    toggle() {
+        if (this._isOpen()) {
+            this.close();
+        }
+        else {
+            this.open();
+        }
+    }
+    /**
+     * Sets the trigger element for positioning (called by trigger directive)
+     */
+    setTriggerElement(element) {
+        this._triggerElement.set(element);
+    }
+    /**
+     * Gets the menu data passed from the trigger
+     * Returns a signal containing the data
+     */
+    menuData() {
+        return this._menuData();
+    }
+    /**
+     * Sets the menu data (called by trigger directive)
+     * @param data The data to pass to the menu
+     */
+    setMenuData(data) {
+        this._menuData.set(data);
+    }
+    onDocumentKeydown(event) {
+        if (!this._isOpen() || !this._isTopmostOverlay()) {
+            return;
+        }
+        switch (event.key) {
+            case 'Escape': {
+                // The directive's closeOnEscape is set false; we own the ESC handling here
+                // via the document-level listener with _isTopmostOverlay() for nested menu support.
+                event.preventDefault();
+                event.stopPropagation();
+                this.close();
+                break;
+            }
+            case 'ArrowDown':
+                event.preventDefault();
+                this._focusNextItem();
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                this._focusPreviousItem();
+                break;
+            case 'Home':
+                event.preventDefault();
+                this._focusFirstItem();
+                break;
+            case 'End':
+                event.preventDefault();
+                this._focusLastItem();
+                break;
+        }
+    }
+    onMenuClick(event) {
+        // Check if the click was on a menu item
+        const target = event.target;
+        const menuItem = target.closest('fui-dropdown-menu-item');
+        if (menuItem && this._isOpen()) {
+            // Emit the itemSelected event and close the menu
+            this.itemSelected.emit(event);
+            this.close();
+        }
+    }
+    ngOnDestroy() {
+        this._clearCloseTimeout();
+        this._restoreFocus();
+        // Dispose overlay if still open (directive's ngOnDestroy would handle this,
+        // but we call it explicitly to ensure cleanup order is predictable)
+        if (this._popup.panelOpen()) {
+            this._popup.close();
+        }
+    }
+    _openMenu() {
+        // Panel is @if-rendered: it becomes part of the DOM only after _isOpen() = true
+        // and a change-detection cycle. We use a double requestAnimationFrame to ensure
+        // the panel element is rendered before wiring to the directive.
+        requestAnimationFrame(() => {
+            if (this._destroyRef.destroyed)
+                return;
+            requestAnimationFrame(() => {
+                if (this._destroyRef.destroyed)
+                    return;
+                const triggerEl = this._triggerElement();
+                if (!triggerEl || !this.menuPanel)
+                    return;
+                // Wire trigger and panel into the popup directive
+                this._popup.setTrigger({ nativeElement: triggerEl });
+                this._popup.setPanel(this.menuPanel);
+                // Configure directive options for this open session
+                this._popup.panelClass.set(['fui-dropdown-menu-panel', `fui-dropdown-menu-panel--${this.size()}`]);
+                this._popup.backdropClass.set('fui-dropdown-menu-backdrop');
+                // Disable directive's internal backdrop-close: we handle it via backdropClick output
+                // so our leave-animation close() runs instead of the directive's synchronous close().
+                this._popup.closeOnBackdrop.set(false);
+                // ESC is handled by the document-level handler with _isTopmostOverlay()
+                this._popup.closeOnEscape.set(false);
+                this._popup.positions.set(this._getPositionsForMenuPosition(this.position()));
+                // Open the overlay
+                this._popup.open();
+                // Defer the enter animation until AFTER the overlay's internal position RAF
+                // has run. The overlay-ref schedules a RAF inside attach() to apply position;
+                // this RAF is queued AFTER that one (FIFO), so by the time it fires the panel
+                // is at the correct trigger position. The panel rendered with 'void' state
+                // (opacity:0) and the transition now fires from the correctly-placed location.
+                requestAnimationFrame(() => {
+                    if (this._destroyRef.destroyed)
+                        return;
+                    this._animationState.set('enter');
+                });
+                // Subscribe to backdrop clicks so our animated close() runs (leave animation)
+                const backdropSub = this._popup.backdropClick.subscribe(() => {
+                    backdropSub.unsubscribe();
+                    if (this.closeOnClickOutside()) {
+                        this.close();
+                    }
+                });
+                // aria and focus
+                triggerEl.setAttribute('aria-expanded', 'true');
+                this._previousFocusedElement = document.activeElement;
+                setTimeout(() => {
+                    if (this._destroyRef.destroyed)
+                        return;
+                    this._focusFirstItem();
+                }, 0);
+            });
+        });
+    }
+    _closeMenu() {
+        const triggerElement = this._triggerElement();
+        if (triggerElement) {
+            triggerElement.setAttribute('aria-expanded', 'false');
+        }
+        // Reset roving tabindex on all items
+        this._resetRovingTabindex();
+        this._popup.close();
+        this._restoreFocus();
+    }
+    _getPositionsForMenuPosition(position) {
+        const offset = 4;
+        switch (position) {
+            case 'bottom-start':
+                return [
+                    { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: offset },
+                    { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -offset },
+                ];
+            case 'bottom':
+                return [
+                    { originX: 'center', originY: 'bottom', overlayX: 'center', overlayY: 'top', offsetY: offset },
+                    { originX: 'center', originY: 'top', overlayX: 'center', overlayY: 'bottom', offsetY: -offset },
+                ];
+            case 'bottom-end':
+                return [
+                    { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top', offsetY: offset },
+                    { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom', offsetY: -offset },
+                ];
+            case 'top-start':
+                return [
+                    { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -offset },
+                    { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: offset },
+                ];
+            case 'top':
+                return [
+                    { originX: 'center', originY: 'top', overlayX: 'center', overlayY: 'bottom', offsetY: -offset },
+                    { originX: 'center', originY: 'bottom', overlayX: 'center', overlayY: 'top', offsetY: offset },
+                ];
+            case 'top-end':
+                return [
+                    { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom', offsetY: -offset },
+                    { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top', offsetY: offset },
+                ];
+            case 'right-start':
+                return [
+                    { originX: 'end', originY: 'top', overlayX: 'start', overlayY: 'top', offsetX: offset },
+                    { originX: 'start', originY: 'top', overlayX: 'end', overlayY: 'top', offsetX: -offset },
+                ];
+            case 'right':
+                return [
+                    { originX: 'end', originY: 'center', overlayX: 'start', overlayY: 'center', offsetX: offset },
+                    { originX: 'start', originY: 'center', overlayX: 'end', overlayY: 'center', offsetX: -offset },
+                ];
+            case 'right-end':
+                return [
+                    { originX: 'end', originY: 'bottom', overlayX: 'start', overlayY: 'bottom', offsetX: offset },
+                    { originX: 'start', originY: 'bottom', overlayX: 'end', overlayY: 'bottom', offsetX: offset },
+                ];
+            case 'left-start':
+                return [
+                    { originX: 'start', originY: 'top', overlayX: 'end', overlayY: 'top', offsetX: -offset },
+                    { originX: 'end', originY: 'top', overlayX: 'start', overlayY: 'top', offsetX: offset },
+                ];
+            case 'left':
+                return [
+                    { originX: 'start', originY: 'center', overlayX: 'end', overlayY: 'center', offsetX: -offset },
+                    { originX: 'end', originY: 'center', overlayX: 'start', overlayY: 'center', offsetX: offset },
+                ];
+            case 'left-end':
+                return [
+                    { originX: 'start', originY: 'bottom', overlayX: 'end', overlayY: 'bottom', offsetX: -offset },
+                    { originX: 'end', originY: 'bottom', overlayX: 'start', overlayY: 'bottom', offsetX: offset },
+                ];
+            default:
+                return [{ originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: offset }];
+        }
+    }
+    _restoreFocus() {
+        // Prefer the trigger element for focus restoration
+        const triggerElement = this._triggerElement();
+        if (triggerElement) {
+            triggerElement.focus();
+        }
+        else if (this._previousFocusedElement) {
+            this._previousFocusedElement.focus();
+        }
+        this._previousFocusedElement = null;
+    }
+    _getMenuItems() {
+        const menuElement = this.menuPanel?.nativeElement;
+        if (!menuElement)
+            return [];
+        return Array.from(menuElement.querySelectorAll('fui-dropdown-menu-item:not([aria-disabled="true"])'));
+    }
+    /** @internal Called by FuiDropdownMenuTriggerDirective */
+    _focusFirstItem() {
+        const items = this._getMenuItems();
+        if (items.length > 0) {
+            this._focusItem(items[0]);
+        }
+    }
+    /** @internal Called by FuiDropdownMenuTriggerDirective */
+    _focusLastItem() {
+        const items = this._getMenuItems();
+        if (items.length > 0) {
+            this._focusItem(items[items.length - 1]);
+        }
+    }
+    _focusNextItem() {
+        const items = this._getMenuItems();
+        if (items.length === 0) {
+            return;
+        }
+        const currentIndex = items.findIndex((item) => item === document.activeElement);
+        const nextIndex = currentIndex < items.length - 1 ? currentIndex + 1 : 0;
+        this._focusItem(items[nextIndex]);
+    }
+    _focusPreviousItem() {
+        const items = this._getMenuItems();
+        if (items.length === 0) {
+            return;
+        }
+        const currentIndex = items.findIndex((item) => item === document.activeElement);
+        const prevIndex = currentIndex > 0 ? currentIndex - 1 : items.length - 1;
+        this._focusItem(items[prevIndex]);
+    }
+    /**
+     * Focuses a menu item and updates roving tabindex across all items.
+     */
+    _focusItem(element) {
+        this._updateRovingTabindex(element);
+        element.focus();
+    }
+    /**
+     * Resets all items to tabindex="-1" when the menu closes.
+     */
+    _resetRovingTabindex() {
+        const items = this._menuItems();
+        for (const item of items) {
+            item.tabIndex.set('-1');
+        }
+    }
+    /**
+     * Updates roving tabindex: sets tabindex="0" on the target item
+     * and tabindex="-1" on all other items.
+     */
+    _updateRovingTabindex(targetElement) {
+        const items = this._menuItems();
+        for (const item of items) {
+            if (item._elementRef.nativeElement === targetElement) {
+                item.tabIndex.set('0');
+            }
+            else {
+                item.tabIndex.set('-1');
+            }
+        }
+    }
+    _startCloseAnimation() {
+        // Clear any existing timeout
+        this._clearCloseTimeout();
+        // Trigger leave animation
+        this._animationState.set('leave');
+        // Wait for animation to complete before closing (matches CSS transition duration).
+        this._closeAnimationTimeout = setTimeout(() => {
+            this._closeMenu();
+            this._animationState.set('void');
+        }, 150);
+    }
+    _clearCloseTimeout() {
+        if (this._closeAnimationTimeout !== null) {
+            clearTimeout(this._closeAnimationTimeout);
+            this._closeAnimationTimeout = null;
+        }
+    }
+    /**
+     * Checks if this menu's overlay is the topmost (most recently opened) overlay.
+     * This ensures that only the topmost menu responds to keyboard events when
+     * multiple menus are open (e.g., nested menus).
+     */
+    _isTopmostOverlay() {
+        const ref = this._popup.overlayRef();
+        if (!ref) {
+            return false;
+        }
+        const activeOverlays = this._overlayService.getActiveOverlays();
+        // The last overlay in the array is the most recently created (topmost)
+        const topmostOverlay = activeOverlays[activeOverlays.length - 1];
+        return topmostOverlay === ref;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiDropdownMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuiDropdownMenuComponent, isStandalone: true, selector: "fui-dropdown-menu", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, closeOnClickOutside: { classPropertyName: "closeOnClickOutside", publicName: "closeOnClickOutside", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, attachToBody: { classPropertyName: "attachToBody", publicName: "attachToBody", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openChange: "openChange", itemSelected: "itemSelected" }, host: { listeners: { "document:keydown": "onDocumentKeydown($event)", "click": "onMenuClick($event)" }, properties: { "class": "computedClasses()", "attr.data-open": "isOpen() ? \"true\" : null" } }, queries: [{ propertyName: "_menuItems", predicate: FuiDropdownMenuItemComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "menuPanel", first: true, predicate: ["menuPanel"], descendants: true }], hostDirectives: [{ directive: i1.FuiPopupOverlayDirective, inputs: ["positions", "positions", "panelClass", "panelClass", "backdropClass", "backdropClass", "scrollStrategy", "scrollStrategy", "minWidthFromTrigger", "minWidthFromTrigger", "closeOnEscape", "closeOnEscape", "closeOnBackdrop", "closeOnBackdrop", "viewportMargin", "viewportMargin"], outputs: ["openedChange", "openedChange", "escapeKey", "escapeKey", "backdropClick", "backdropClick"] }], ngImport: i0, template: "@if (_isOpen() || _animationState() === 'leave') {\r\n  <div class=\"fui-dropdown-menu__panel\" #menuPanel role=\"menu\" [attr.data-animation-state]=\"_animationState()\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n}\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-out);transition-delay:0ms}.fui-motion-fade-out{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in);transition-delay:0ms}.fui-motion-slide-in-bottom{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition-property:transform,opacity;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-base) var(--fui-ease-out)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}::ng-deep .fui-dropdown-menu{position:absolute}::ng-deep .fui-dropdown-menu--disabled{opacity:var(--fui-state-disabled-opacity);pointer-events:none}::ng-deep .fui-dropdown-menu .fui-dropdown-menu__panel{position:fixed;top:0;left:0;opacity:0;pointer-events:none}::ng-deep .fui-dropdown-menu__panel{--fui-dropdown-menu-min-width: 150px;--fui-dropdown-menu-max-width: 500px;--fui-dropdown-menu-border-radius: var(--fui-radius-sm);--fui-dropdown-menu-padding: var(--fui-spacing-2);--fui-dropdown-menu-bg: var(--fui-bg-default);--fui-dropdown-menu-shadow: var(--fui-shadow-lg);min-width:var(--fui-dropdown-menu-min-width);max-width:var(--fui-dropdown-menu-max-width);background-color:var(--fui-dropdown-menu-bg);border-radius:var(--fui-dropdown-menu-border-radius);padding:var(--fui-dropdown-menu-padding);box-shadow:var(--fui-dropdown-menu-shadow);overflow:hidden;transform-origin:top center;will-change:transform,opacity;opacity:0;transform:translateY(-14px);transition:opacity var(--fui-duration-moderate) var(--fui-ease-in),transform var(--fui-duration-moderate) var(--fui-ease-in)}::ng-deep .fui-dropdown-menu__panel:focus{outline:none}::ng-deep .fui-dropdown-menu__panel[data-animation-state=enter]{opacity:1;transform:translateY(0);transition:opacity var(--fui-duration-base) var(--fui-ease-out),transform var(--fui-duration-base) var(--fui-ease-out)}::ng-deep .fui-dropdown-menu__panel[data-animation-state=leave]{opacity:0;transform:translateY(-14px)}::ng-deep .fui-dropdown-menu-panel--sm .fui-dropdown-menu__panel{min-width:8rem;font-size:var(--fui-text-sm)}::ng-deep .fui-dropdown-menu-panel--md .fui-dropdown-menu__panel{min-width:12rem;font-size:var(--fui-text-base)}::ng-deep .fui-dropdown-menu-panel--lg .fui-dropdown-menu__panel{min-width:16rem;font-size:var(--fui-text-md)}@media(prefers-contrast:more){::ng-deep .fui-dropdown-menu__panel{border-width:2px;box-shadow:var(--fui-shadow-lg)}}@media(prefers-reduced-motion:reduce){::ng-deep .fui-dropdown-menu__panel{transition:none}}@media print{::ng-deep .fui-dropdown-menu__panel{display:none!important}}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiDropdownMenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fui-dropdown-menu', standalone: true, imports: [], host: {
+                        '[class]': 'computedClasses()',
+                        '[attr.data-open]': 'isOpen() ? "true" : null',
+                    }, hostDirectives: [
+                        {
+                            directive: FuiPopupOverlayDirective,
+                            inputs: [
+                                'positions',
+                                'panelClass',
+                                'backdropClass',
+                                'scrollStrategy',
+                                'minWidthFromTrigger',
+                                'closeOnEscape',
+                                'closeOnBackdrop',
+                                'viewportMargin',
+                            ],
+                            outputs: ['openedChange', 'escapeKey', 'backdropClick'],
+                        },
+                    ], template: "@if (_isOpen() || _animationState() === 'leave') {\r\n  <div class=\"fui-dropdown-menu__panel\" #menuPanel role=\"menu\" [attr.data-animation-state]=\"_animationState()\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n}\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-out);transition-delay:0ms}.fui-motion-fade-out{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in);transition-delay:0ms}.fui-motion-slide-in-bottom{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition-property:transform,opacity;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-base) var(--fui-ease-out)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}::ng-deep .fui-dropdown-menu{position:absolute}::ng-deep .fui-dropdown-menu--disabled{opacity:var(--fui-state-disabled-opacity);pointer-events:none}::ng-deep .fui-dropdown-menu .fui-dropdown-menu__panel{position:fixed;top:0;left:0;opacity:0;pointer-events:none}::ng-deep .fui-dropdown-menu__panel{--fui-dropdown-menu-min-width: 150px;--fui-dropdown-menu-max-width: 500px;--fui-dropdown-menu-border-radius: var(--fui-radius-sm);--fui-dropdown-menu-padding: var(--fui-spacing-2);--fui-dropdown-menu-bg: var(--fui-bg-default);--fui-dropdown-menu-shadow: var(--fui-shadow-lg);min-width:var(--fui-dropdown-menu-min-width);max-width:var(--fui-dropdown-menu-max-width);background-color:var(--fui-dropdown-menu-bg);border-radius:var(--fui-dropdown-menu-border-radius);padding:var(--fui-dropdown-menu-padding);box-shadow:var(--fui-dropdown-menu-shadow);overflow:hidden;transform-origin:top center;will-change:transform,opacity;opacity:0;transform:translateY(-14px);transition:opacity var(--fui-duration-moderate) var(--fui-ease-in),transform var(--fui-duration-moderate) var(--fui-ease-in)}::ng-deep .fui-dropdown-menu__panel:focus{outline:none}::ng-deep .fui-dropdown-menu__panel[data-animation-state=enter]{opacity:1;transform:translateY(0);transition:opacity var(--fui-duration-base) var(--fui-ease-out),transform var(--fui-duration-base) var(--fui-ease-out)}::ng-deep .fui-dropdown-menu__panel[data-animation-state=leave]{opacity:0;transform:translateY(-14px)}::ng-deep .fui-dropdown-menu-panel--sm .fui-dropdown-menu__panel{min-width:8rem;font-size:var(--fui-text-sm)}::ng-deep .fui-dropdown-menu-panel--md .fui-dropdown-menu__panel{min-width:12rem;font-size:var(--fui-text-base)}::ng-deep .fui-dropdown-menu-panel--lg .fui-dropdown-menu__panel{min-width:16rem;font-size:var(--fui-text-md)}@media(prefers-contrast:more){::ng-deep .fui-dropdown-menu__panel{border-width:2px;box-shadow:var(--fui-shadow-lg)}}@media(prefers-reduced-motion:reduce){::ng-deep .fui-dropdown-menu__panel{transition:none}}@media print{::ng-deep .fui-dropdown-menu__panel{display:none!important}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], closeOnClickOutside: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnClickOutside", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], attachToBody: [{ type: i0.Input, args: [{ isSignal: true, alias: "attachToBody", required: false }] }], openChange: [{ type: i0.Output, args: ["openChange"] }], itemSelected: [{ type: i0.Output, args: ["itemSelected"] }], menuPanel: [{
+                type: ViewChild,
+                args: ['menuPanel', { static: false }]
+            }], _menuItems: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => FuiDropdownMenuItemComponent), { ...{ descendants: true }, isSignal: true }] }], onDocumentKeydown: [{
+                type: HostListener,
+                args: ['document:keydown', ['$event']]
+            }], onMenuClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }] } });
+
+/**
+ * # fuiDropdownMenuTrigger Directive
+ *
+ * A directive that marks an element as a dropdown menu trigger, similar to Angular Material's matMenuTriggerFor.
+ * This directive should be used in conjunction with FuiDropdownMenuComponent.
+ *
+ * ## Usage
+ *
+ * ### Basic Usage
+ * ```html
+ * <button fuiDropdownMenuTrigger [fuiDropdownMenuTriggerFor]="menu">Open Menu</button>
+ * <fui-dropdown-menu #menu>
+ *   <fui-dropdown-menu-item>Option 1</fui-dropdown-menu-item>
+ *   <fui-dropdown-menu-item>Option 2</fui-dropdown-menu-item>
+ * </fui-dropdown-menu>
+ * ```
+ *
+ * ### With Menu Reference
+ * ```html
+ * <button fuiDropdownMenuTrigger [fuiDropdownMenuTriggerFor]="userMenu">
+ *   <fui-icon name="user"></fui-icon>
+ *   User Menu
+ * </button>
+ *
+ * <fui-dropdown-menu #userMenu position="bottom-end">
+ *   <fui-dropdown-menu-item>Profile</fui-dropdown-menu-item>
+ *   <fui-dropdown-menu-item>Settings</fui-dropdown-menu-item>
+ *   <fui-dropdown-menu-item variant="danger">Logout</fui-dropdown-menu-item>
+ * </fui-dropdown-menu>
+ * ```
+ *
+ * ### Passing Data to Menu
+ * ```html
+ * <button fuiDropdownMenuTrigger
+ *         [fuiDropdownMenuTriggerFor]="dynamicMenu"
+ *         [menuTriggerData]="{ user: currentUser, role: 'admin' }">
+ *   Open Menu
+ * </button>
+ *
+ * <fui-dropdown-menu #dynamicMenu>
+ *   <!-- Access menu data in your component via menu.menuData() -->
+ * </fui-dropdown-menu>
+ * ```
+ *
+ * @example
+ * ```typescript
+ * import { FuiDropdownMenuTriggerDirective, FuiDropdownMenuComponent, FuiDropdownMenuItemComponent } from '@raintonic/formaui/components/dropdown-menu';
+ *
+ * @Component({
+ *   standalone: true,
+ *   imports: [FuiDropdownMenuTriggerDirective, FuiDropdownMenuComponent, FuiDropdownMenuItemComponent],
+ *   template: `
+ *     <button fuiDropdownMenuTrigger [fuiDropdownMenuTriggerFor]="menu">Open Menu</button>
+ *     <fui-dropdown-menu #menu>
+ *       <fui-dropdown-menu-item>Option 1</fui-dropdown-menu-item>
+ *       <fui-dropdown-menu-item>Option 2</fui-dropdown-menu-item>
+ *     </fui-dropdown-menu>
+ *   `
+ * })
+ * export class MyComponent { }
+ * ```
+ */
+class FuiDropdownMenuTriggerDirective {
+    _elementRef = inject((ElementRef));
+    /** The menu instance that this trigger should open */
+    fuiDropdownMenuTriggerFor = input(...(ngDevMode ? [undefined, { debugName: "fuiDropdownMenuTriggerFor" }] : /* istanbul ignore next */ []));
+    /**
+     * Data to be passed to the menu.
+     * Can be accessed in the menu component or menu items.
+     * Similar to Angular Material's matMenuTriggerData.
+     */
+    menuTriggerData = input(...(ngDevMode ? [undefined, { debugName: "menuTriggerData" }] : /* istanbul ignore next */ []));
+    /** The menu instance that this trigger is associated with */
+    menu = null;
+    constructor() {
+        // Set up the menu reference when fuiDropdownMenuTriggerFor changes
+        effect(() => {
+            const menuRef = this.fuiDropdownMenuTriggerFor();
+            if (menuRef) {
+                this.menu = menuRef;
+                // Set the trigger element on the menu for positioning
+                menuRef.setTriggerElement(this._elementRef.nativeElement);
+            }
+        });
+    }
+    ngAfterViewInit() {
+        // Ensure the menu reference is set after view initialization
+        const menuRef = this.fuiDropdownMenuTriggerFor();
+        if (menuRef) {
+            this.menu = menuRef;
+            menuRef.setTriggerElement(this._elementRef.nativeElement);
+        }
+    }
+    onClick(event) {
+        if (this.menu) {
+            event.preventDefault();
+            // Update trigger element to ensure correct positioning when multiple triggers exist
+            this.menu.setTriggerElement(this._elementRef.nativeElement);
+            // Pass data to menu before opening/toggling
+            const data = this.menuTriggerData();
+            if (data !== undefined && this.menu.setMenuData) {
+                this.menu.setMenuData(data);
+            }
+            this.menu.toggle();
+        }
+    }
+    onKeydown(event) {
+        const menu = this.menu;
+        if (!menu)
+            return;
+        // Update trigger element and pass data to menu before opening
+        const prepareMenu = () => {
+            // Update trigger element to ensure correct positioning when multiple triggers exist
+            menu.setTriggerElement(this._elementRef.nativeElement);
+            // Pass data to menu
+            const data = this.menuTriggerData();
+            if (data !== undefined) {
+                menu.setMenuData(data);
+            }
+        };
+        switch (event.key) {
+            case 'Enter':
+            case ' ':
+                event.preventDefault();
+                prepareMenu();
+                menu.toggle();
+                break;
+            case 'ArrowDown':
+                event.preventDefault();
+                prepareMenu();
+                menu.open();
+                // Focus first item after menu opens
+                setTimeout(() => {
+                    menu._focusFirstItem();
+                }, 0);
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                prepareMenu();
+                menu.open();
+                // Focus last item after menu opens
+                setTimeout(() => {
+                    menu._focusLastItem();
+                }, 0);
+                break;
+        }
+    }
+    /** Gets the trigger element */
+    getElement() {
+        return this._elementRef.nativeElement;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiDropdownMenuTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.6", type: FuiDropdownMenuTriggerDirective, isStandalone: true, selector: "[fuiDropdownMenuTrigger]", inputs: { fuiDropdownMenuTriggerFor: { classPropertyName: "fuiDropdownMenuTriggerFor", publicName: "fuiDropdownMenuTriggerFor", isSignal: true, isRequired: false, transformFunction: null }, menuTriggerData: { classPropertyName: "menuTriggerData", publicName: "menuTriggerData", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick($event)", "keydown": "onKeydown($event)" }, properties: { "attr.aria-haspopup": "\"true\"", "attr.aria-expanded": "menu?.isOpen() ? \"true\" : \"false\"" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiDropdownMenuTriggerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[fuiDropdownMenuTrigger]',
+                    standalone: true,
+                    host: {
+                        '[attr.aria-haspopup]': '"true"',
+                        '[attr.aria-expanded]': 'menu?.isOpen() ? "true" : "false"',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { fuiDropdownMenuTriggerFor: [{ type: i0.Input, args: [{ isSignal: true, alias: "fuiDropdownMenuTriggerFor", required: false }] }], menuTriggerData: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuTriggerData", required: false }] }], onClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }], onKeydown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }] } });
+
+// Public API for dropdown-menu components
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DROPDOWN_MENU_ITEM_VARIANTS, FUI_DROPDOWN_MENU_POSITIONS, FUI_DROPDOWN_MENU_SIZES, FuiDropdownMenuComponent, FuiDropdownMenuItemComponent, FuiDropdownMenuTriggerDirective };
+//# sourceMappingURL=raintonic-formaui-components-dropdown-menu.mjs.map