@cocoar/ui 0.1.0-beta.99 → 0.1.1

package/fesm2022/cocoar-ui-menu.mjs

@@ -0,0 +1,1082 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, input, Directive, booleanAttribute, ChangeDetectionStrategy, Component, output, HostListener, TemplateRef, DestroyRef, ChangeDetectorRef, Injector, ViewChild, ContentChild, signal, computed, effect } from '@angular/core';
+import { COAR_OVERLAY_REF, COAR_MENU_PARENT, createOverlayBuilder, coarHoverMenuPreset } from '@cocoar/ui/overlay';
+import { CoarIconComponent } from '@cocoar/ui/components';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+
+function shouldDelaySubmenuSwitch(previous, current, submenuRect, direction, sampleMaxAgeMs = 200) {
+    if (!previous)
+        return false;
+    // If submenu rect is not measurable, don't delay.
+    if (!Number.isFinite(submenuRect.left) || submenuRect.width <= 0 || submenuRect.height <= 0) {
+        return false;
+    }
+    // If the last movement was long ago, don't apply aim heuristics.
+    if (current.t - previous.t > sampleMaxAgeMs)
+        return false;
+    const dx = current.x - previous.x;
+    // Require clear horizontal intent toward the submenu.
+    if (direction === 'right' && dx <= 2)
+        return false;
+    if (direction === 'left' && dx >= -2)
+        return false;
+    // Use the NEAR edge of the submenu panel (closest to the parent menu).
+    // This matches the classic "menu aim" wedge used to detect intent to enter the open submenu.
+    // Right-opening submenu: use left edge; left-opening submenu: use right edge.
+    const edgeX = direction === 'right' ? submenuRect.left : submenuRect.right;
+    // Expand wedge slightly to be forgiving.
+    const padY = 8;
+    const cornerA = { x: edgeX, y: submenuRect.top - padY };
+    const cornerB = { x: edgeX, y: submenuRect.bottom + padY };
+    return pointInTriangle(current, previous, cornerA, cornerB);
+}
+function pointInTriangle(p, a, b, c) {
+    const d1 = sign(p, a, b);
+    const d2 = sign(p, b, c);
+    const d3 = sign(p, c, a);
+    const hasNeg = d1 < 0 || d2 < 0 || d3 < 0;
+    const hasPos = d1 > 0 || d2 > 0 || d3 > 0;
+    return !(hasNeg && hasPos);
+}
+function sign(p1, p2, p3) {
+    return (p1.x - p3.x) * (p2.y - p3.y) - (p2.x - p3.x) * (p1.y - p3.y);
+}
+
+const DEFAULT_COAR_MENU_AIM_CONFIG = {
+    enabled: true,
+    debugEnabled: false,
+    switchDelayMs: 500,
+    sampleMaxAgeMs: 200,
+};
+const COAR_MENU_AIM_CONFIG = new InjectionToken('COAR_MENU_AIM_CONFIG');
+
+/**
+ * CoarMenuCascade: Tracks parent-child and sibling relationships for menu hierarchies.
+ *
+ * Responsibilities:
+ * - Track overlay refs for nested submenu parenting
+ * - Track children to enable sibling closure (for inline menus without a common parent overlay)
+ */
+class CoarMenuCascade {
+    parent;
+    overlayRef = null;
+    children = new Set();
+    aimConfig = inject(COAR_MENU_AIM_CONFIG, {
+        optional: true,
+    });
+    activeChild = null;
+    pointerHistory = [];
+    pointerAbort = null;
+    pendingSwitchTimer = null;
+    pendingChild = null;
+    pendingActivate = null;
+    activePanelCleanup = null;
+    constructor(parent) {
+        this.parent = parent;
+        // Register with parent to enable sibling tracking
+        if (parent) {
+            parent.children.add(this);
+        }
+    }
+    requestOpenFromChild(child, activate, pointer) {
+        const aim = this.aimConfig?.getMenuAimConfig() ?? DEFAULT_COAR_MENU_AIM_CONFIG;
+        if (!aim.enabled) {
+            this.activateNow(child, activate);
+            return;
+        }
+        if (typeof document === 'undefined') {
+            this.activateNow(child, activate);
+            return;
+        }
+        const now = Date.now();
+        const point = { x: pointer.x, y: pointer.y, t: now };
+        this.pushPointerPoint(point);
+        if (!this.activeChild || this.activeChild === child) {
+            this.activateNow(child, activate);
+            return;
+        }
+        const submenuRect = this.getActiveChildSubmenuRect();
+        if (!submenuRect) {
+            this.activateNow(child, activate);
+            return;
+        }
+        const previous = this.pointerHistory.length >= 2 ? this.pointerHistory[this.pointerHistory.length - 2] : null;
+        const direction = this.inferSubmenuDirection(submenuRect, point);
+        const shouldDelay = shouldDelaySubmenuSwitch(previous, point, submenuRect, direction, aim.sampleMaxAgeMs);
+        this.emitAimDebugIfEnabled(aim.debugEnabled, shouldDelay, previous, point, submenuRect, direction);
+        if (!shouldDelay) {
+            this.activateNow(child, activate);
+            return;
+        }
+        this.scheduleSwitch(child, activate, aim.switchDelayMs);
+    }
+    emitAimDebugIfEnabled(debugEnabled, shouldDelay, previous, current, submenuRect, direction) {
+        if (typeof window === 'undefined')
+            return;
+        // Backward-compatible global override for ad-hoc debugging.
+        const w = window;
+        if (!debugEnabled && !w.__COAR_MENU_AIM_DEBUG__)
+            return;
+        try {
+            window.dispatchEvent(new CustomEvent('coar-menu-aim', {
+                detail: {
+                    shouldDelay,
+                    previous,
+                    current,
+                    submenuRect: {
+                        left: submenuRect.left,
+                        top: submenuRect.top,
+                        right: submenuRect.right,
+                        bottom: submenuRect.bottom,
+                    },
+                    direction,
+                },
+            }));
+        }
+        catch {
+            // ignore
+        }
+    }
+    notifyChildOpened(child) {
+        if (this.activeChild === child) {
+            this.attachActivePanelListener();
+        }
+    }
+    notifyChildClosed(child) {
+        if (this.activeChild === child) {
+            this.activeChild = null;
+            this.detachActivePanelListener();
+            this.cancelPendingSwitch();
+            this.stopPointerTracking();
+        }
+    }
+    activateNow(child, activate) {
+        this.cancelPendingSwitch();
+        this.activeChild = child;
+        this.ensurePointerTracking();
+        activate();
+    }
+    scheduleSwitch(child, activate, delayMs) {
+        this.cancelPendingSwitch();
+        this.pendingChild = child;
+        this.pendingActivate = activate;
+        this.pendingSwitchTimer = setTimeout(() => {
+            const pendingChild = this.pendingChild;
+            const pendingActivate = this.pendingActivate;
+            this.pendingChild = null;
+            this.pendingActivate = null;
+            this.pendingSwitchTimer = null;
+            if (!pendingChild || !pendingActivate)
+                return;
+            this.activeChild = pendingChild;
+            this.ensurePointerTracking();
+            pendingActivate();
+        }, delayMs);
+    }
+    cancelPendingSwitch() {
+        if (this.pendingSwitchTimer) {
+            clearTimeout(this.pendingSwitchTimer);
+            this.pendingSwitchTimer = null;
+        }
+        this.pendingChild = null;
+        this.pendingActivate = null;
+    }
+    ensurePointerTracking() {
+        if (this.pointerAbort)
+            return;
+        if (typeof document === 'undefined')
+            return;
+        const abort = new AbortController();
+        this.pointerAbort = abort;
+        const onMove = (e) => {
+            this.pushPointerPoint({ x: e.clientX, y: e.clientY, t: Date.now() });
+        };
+        document.addEventListener('pointermove', onMove, { signal: abort.signal, passive: true });
+    }
+    stopPointerTracking() {
+        if (!this.pointerAbort)
+            return;
+        this.pointerAbort.abort();
+        this.pointerAbort = null;
+        this.pointerHistory = [];
+    }
+    pushPointerPoint(point) {
+        this.pointerHistory.push(point);
+        if (this.pointerHistory.length > 5) {
+            this.pointerHistory = this.pointerHistory.slice(-5);
+        }
+    }
+    getActiveChildSubmenuRect() {
+        const panelEl = this.activeChild?.overlayRef?.getPanelElement?.();
+        if (!panelEl)
+            return null;
+        return panelEl.getBoundingClientRect();
+    }
+    inferSubmenuDirection(rect, point) {
+        // If the submenu's left edge is to the right of the pointer, it's a right-opening flyout.
+        // Otherwise, assume left.
+        return rect.left >= point.x ? 'right' : 'left';
+    }
+    attachActivePanelListener() {
+        this.detachActivePanelListener();
+        const panelEl = this.activeChild?.overlayRef?.getPanelElement?.();
+        if (!panelEl)
+            return;
+        const onEnter = () => {
+            // Once the user reaches the currently open submenu panel, don't allow a delayed switch
+            // to steal focus/open another sibling submenu.
+            this.cancelPendingSwitch();
+        };
+        panelEl.addEventListener('pointerenter', onEnter);
+        this.activePanelCleanup = () => panelEl.removeEventListener('pointerenter', onEnter);
+    }
+    detachActivePanelListener() {
+        this.activePanelCleanup?.();
+        this.activePanelCleanup = null;
+    }
+    /**
+     * Close all sibling submenus at the cascade level.
+     * Used for inline menus where siblings don't have a common parent overlay.
+     */
+    closeSiblings() {
+        if (this.parent) {
+            for (const sibling of this.parent.children) {
+                if (sibling !== this && sibling.overlayRef) {
+                    sibling.overlayRef.close();
+                }
+            }
+        }
+    }
+    destroy() {
+        this.detachActivePanelListener();
+        this.cancelPendingSwitch();
+        this.stopPointerTracking();
+        if (this.parent) {
+            this.parent.children.delete(this);
+        }
+    }
+}
+const COAR_MENU_CASCADE = new InjectionToken('COAR_MENU_CASCADE');
+
+class CoarMenuAimConfigDirective {
+    parent = inject(COAR_MENU_AIM_CONFIG, { optional: true, skipSelf: true });
+    /** Enable/disable menu-aim for this menu tree. */
+    aimEnabled = input(undefined, ...(ngDevMode ? [{ debugName: "aimEnabled" }] : []));
+    /** Emit debug events for menu-aim visualization (showcase only). */
+    aimDebugEnabled = input(undefined, ...(ngDevMode ? [{ debugName: "aimDebugEnabled" }] : []));
+    /** Delay before switching to a newly hovered sibling submenu when aim is detected. */
+    aimSwitchDelayMs = input(undefined, ...(ngDevMode ? [{ debugName: "aimSwitchDelayMs" }] : []));
+    /** Maximum age of the last pointer sample used for intent detection. */
+    aimSampleMaxAgeMs = input(undefined, ...(ngDevMode ? [{ debugName: "aimSampleMaxAgeMs" }] : []));
+    getMenuAimConfig() {
+        const base = this.parent?.getMenuAimConfig() ?? DEFAULT_COAR_MENU_AIM_CONFIG;
+        return {
+            enabled: this.aimEnabled() ?? base.enabled,
+            debugEnabled: this.aimDebugEnabled() ?? base.debugEnabled,
+            switchDelayMs: this.aimSwitchDelayMs() ?? base.switchDelayMs,
+            sampleMaxAgeMs: this.aimSampleMaxAgeMs() ?? base.sampleMaxAgeMs,
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CoarMenuAimConfigDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.6", type: CoarMenuAimConfigDirective, isStandalone: true, selector: "[coarMenuAimConfig]", inputs: { aimEnabled: { classPropertyName: "aimEnabled", publicName: "aimEnabled", isSignal: true, isRequired: false, transformFunction: null }, aimDebugEnabled: { classPropertyName: "aimDebugEnabled", publicName: "aimDebugEnabled", isSignal: true, isRequired: false, transformFunction: null }, aimSwitchDelayMs: { classPropertyName: "aimSwitchDelayMs", publicName: "aimSwitchDelayMs", isSignal: true, isRequired: false, transformFunction: null }, aimSampleMaxAgeMs: { classPropertyName: "aimSampleMaxAgeMs", publicName: "aimSampleMaxAgeMs", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: COAR_MENU_AIM_CONFIG, useExisting: CoarMenuAimConfigDirective }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CoarMenuAimConfigDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[coarMenuAimConfig]',
+                    standalone: true,
+                    providers: [{ provide: COAR_MENU_AIM_CONFIG, useExisting: CoarMenuAimConfigDirective }],
+                }]
+        }], propDecorators: { aimEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "aimEnabled", required: false }] }], aimDebugEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "aimDebugEnabled", required: false }] }], aimSwitchDelayMs: [{ type: i0.Input, args: [{ isSignal: true, alias: "aimSwitchDelayMs", required: false }] }], aimSampleMaxAgeMs: [{ type: i0.Input, args: [{ isSignal: true, alias: "aimSampleMaxAgeMs", required: false }] }] } });
+
+/**
+ * CoarMenu: Shell component providing menu styling container.
+ *
+ * Responsibilities:
+ * - Apply consistent menu styling via CSS variables
+ * - Provide semantic menu container (<menu> or <div role="menu">)
+ * - Provide root cascade for sibling submenu tracking
+ * - No logic - just a styled wrapper
+ *
+ * Use standalone for inline menus, or as overlay content (via `createOverlayBuilder`) for context menus/flyouts.
+ *
+ * @example
+ * ```html
+ * <coar-menu>
+ *   <coar-menu-item>Action 1</coar-menu-item>
+ *   <coar-menu-item>Action 2</coar-menu-item>
+ *   <coar-menu-divider></coar-menu-divider>
+ *   <coar-menu-item>Action 3</coar-menu-item>
+ * </coar-menu>
+ * ```
+ */
+class CoarMenuComponent {
+    overlayRef = inject(COAR_OVERLAY_REF, { optional: true });
+    /**
+     * Controls whether the menu reserves and renders an icon column.
+     *
+     * Default is enabled to avoid layout shift for stateful icons (e.g. checkmarks).
+     * Set to false for text-only menus (icons will not render).
+     */
+    showIconColumn = input(true, ...(ngDevMode ? [{ debugName: "showIconColumn" }] : []));
+    /**
+     * Removes border, background, border-radius, and shadow for seamless embedding in containers.
+     *
+     * Use when embedding menu in sidebars, panels, or custom containers that provide their own styling.
+     * Use as boolean attribute: `<coar-menu borderless>` or `[borderless]="true"`
+     */
+    borderless = input(false, { ...(ngDevMode ? { debugName: "borderless" } : {}), transform: booleanAttribute });
+    /**
+     * Check if this menu is rendered inside an overlay (flyout).
+     * Used to enable border visibility for menu items.
+     */
+    isInOverlay() {
+        return this.overlayRef !== null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CoarMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", type: CoarMenuComponent, isStandalone: true, selector: "coar-menu", inputs: { showIconColumn: { classPropertyName: "showIconColumn", publicName: "showIconColumn", isSignal: true, isRequired: false, transformFunction: null }, borderless: { classPropertyName: "borderless", publicName: "borderless", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "menu" }, properties: { "class.coar-menu--in-overlay": "isInOverlay()", "class.coar-menu--borderless": "borderless()", "style.--coar-menu-icon-slot-display": "showIconColumn() ? null : \"none\"", "style.--coar-menu-item-icon-slot-size": "showIconColumn() ? null : \"0px\"" }, classAttribute: "coar-menu" }, providers: [
+            {
+                provide: COAR_MENU_CASCADE,
+                useFactory: () => {
+                    // Check if we're inside an overlay
+                    const inOverlay = inject(COAR_OVERLAY_REF, { optional: true });
+                    const parentCascade = inject(COAR_MENU_CASCADE, { optional: true, skipSelf: true });
+                    if (inOverlay && parentCascade) {
+                        // We're a menu inside a submenu overlay
+                        // Create a new cascade as a child of the parent, so sibling submenu-items
+                        // at this level can track each other
+                        return new CoarMenuCascade(parentCascade);
+                    }
+                    // For root menus (inline or context menu), create a new root cascade
+                    return new CoarMenuCascade(parentCascade);
+                },
+            },
+        ], hostDirectives: [{ directive: CoarMenuAimConfigDirective, inputs: ["aimEnabled", "aimEnabled", "aimDebugEnabled", "aimDebugEnabled", "aimSwitchDelayMs", "aimSwitchDelayMs", "aimSampleMaxAgeMs", "aimSampleMaxAgeMs"] }], ngImport: i0, template: "<ng-content />\n", styles: [":host{display:flex;flex-direction:column;min-width:var(--coar-menu-min-width, 12rem);max-width:var(--coar-menu-max-width, 20rem);gap:0;background:var(--coar-menu-background, #f8f9fa);border:var(--coar-menu-border, 1px solid var(--coar-border-neutral-tertiary, #d0d0d0));border-radius:var(--coar-menu-border-radius, var(--coar-radius-s, 4px));overflow:hidden;box-shadow:var(--coar-menu-shadow, var(--coar-shadow-s, none))}:host(.coar-menu--borderless){background:transparent;border:none;border-radius:0;box-shadow:none;min-width:unset;max-width:unset}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CoarMenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'coar-menu', standalone: true, imports: [], hostDirectives: [
+                        {
+                            directive: CoarMenuAimConfigDirective,
+                            inputs: ['aimEnabled', 'aimDebugEnabled', 'aimSwitchDelayMs', 'aimSampleMaxAgeMs'],
+                        },
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        role: 'menu',
+                        class: 'coar-menu',
+                        '[class.coar-menu--in-overlay]': 'isInOverlay()',
+                        '[class.coar-menu--borderless]': 'borderless()',
+                        '[style.--coar-menu-icon-slot-display]': 'showIconColumn() ? null : "none"',
+                        '[style.--coar-menu-item-icon-slot-size]': 'showIconColumn() ? null : "0px"',
+                    }, providers: [
+                        {
+                            provide: COAR_MENU_CASCADE,
+                            useFactory: () => {
+                                // Check if we're inside an overlay
+                                const inOverlay = inject(COAR_OVERLAY_REF, { optional: true });
+                                const parentCascade = inject(COAR_MENU_CASCADE, { optional: true, skipSelf: true });
+                                if (inOverlay && parentCascade) {
+                                    // We're a menu inside a submenu overlay
+                                    // Create a new cascade as a child of the parent, so sibling submenu-items
+                                    // at this level can track each other
+                                    return new CoarMenuCascade(parentCascade);
+                                }
+                                // For root menus (inline or context menu), create a new root cascade
+                                return new CoarMenuCascade(parentCascade);
+                            },
+                        },
+                    ], template: "<ng-content />\n", styles: [":host{display:flex;flex-direction:column;min-width:var(--coar-menu-min-width, 12rem);max-width:var(--coar-menu-max-width, 20rem);gap:0;background:var(--coar-menu-background, #f8f9fa);border:var(--coar-menu-border, 1px solid var(--coar-border-neutral-tertiary, #d0d0d0));border-radius:var(--coar-menu-border-radius, var(--coar-radius-s, 4px));overflow:hidden;box-shadow:var(--coar-menu-shadow, var(--coar-shadow-s, none))}:host(.coar-menu--borderless){background:transparent;border:none;border-radius:0;box-shadow:none;min-width:unset;max-width:unset}\n"] }]
+        }], propDecorators: { showIconColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIconColumn", required: false }] }], borderless: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderless", required: false }] }] } });
+
+/**
+ * CoarMenuItem: Individual menu item with optional icon and submenu support.
+ *
+ * Responsibilities:
+ * - Render item text and optional icon
+ * - Handle click events
+ * - Support disabled state
+ * - Visual states: hover, active, focus
+ * - Trigger submenu (accordion or flyout via parent menu logic)
+ *
+ * Does NOT manage overlay directly - parent menu handles flyout logic.
+ *
+ * @example
+ * ```html
+ * <coar-menu-item (clicked)="onSave()">Save</coar-menu-item>
+ * <coar-menu-item icon="copy">Copy</coar-menu-item>
+ * <coar-menu-item [disabled]="true">Unavailable</coar-menu-item>
+ *
+ * <!-- Prevent menu from closing on click: -->
+ * <coar-menu-item (clicked)="toggle($event)">Toggle Setting</coar-menu-item>
+ *
+ * toggle(event: CoarMenuItemClickEvent) {
+ *   event.keepMenuOpen(); // Keep menu open
+ *   this.setting = !this.setting;
+ * }
+ * ```
+ */
+class CoarMenuItemComponent {
+    parentOverlay = inject(COAR_MENU_PARENT, { optional: true });
+    /** Item text content */
+    label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
+    /** Optional icon identifier (rendered via CoarIconComponent) */
+    icon = input(undefined, ...(ngDevMode ? [{ debugName: "icon" }] : []));
+    /** Disabled state prevents interaction */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    /** Emitted when user clicks/selects the item. Menu closes by default unless preventDefault() is called. */
+    clicked = output();
+    /** Emitted when user hovers over item (for flyout trigger) */
+    hovered = output();
+    onClick(event) {
+        if (this.disabled()) {
+            event.preventDefault();
+            event.stopPropagation();
+            return;
+        }
+        // Always stop propagation to prevent overlay's outside-click handler
+        event.stopPropagation();
+        let shouldClose = true;
+        const clickEvent = {
+            event,
+            keepMenuOpen: () => {
+                shouldClose = false;
+            },
+        };
+        this.clicked.emit(clickEvent);
+        if (shouldClose) {
+            this.closeMenuTree();
+        }
+    }
+    onMouseEnter(event) {
+        if (!this.disabled()) {
+            this.hovered.emit(event);
+        }
+    }
+    onKeyboardActivate() {
+        if (this.disabled()) {
+            return;
+        }
+        let shouldClose = true;
+        const clickEvent = {
+            event: new MouseEvent('click'), // Synthetic event for keyboard
+            keepMenuOpen: () => {
+                shouldClose = false;
+            },
+        };
+        this.clicked.emit(clickEvent);
+        if (shouldClose) {
+            this.closeMenuTree();
+        }
+    }
+    closeMenuTree() {
+        const parentOverlay = this.parentOverlay;
+        if (parentOverlay) {
+            queueMicrotask(() => {
+                parentOverlay.getRoot().close();
+            });
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CoarMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: CoarMenuItemComponent, isStandalone: true, selector: "coar-menu-item", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked", hovered: "hovered" }, host: { attributes: { "role": "menuitem" }, listeners: { "click": "onClick($event)", "mouseenter": "onMouseEnter($event)", "keydown.enter": "onKeyboardActivate()", "keydown.space": "onKeyboardActivate()" }, properties: { "class.coar-menu-item--disabled": "disabled()", "attr.aria-disabled": "disabled()", "attr.tabindex": "disabled() ? -1 : 0" }, classAttribute: "coar-menu-item" }, ngImport: i0, template: "<span class=\"coar-menu-item__icon\" aria-hidden=\"true\">\n  <coar-icon [name]=\"icon() || 'square-rounded-dashed'\" size=\"s\" aria-hidden=\"true\" />\n</span>\n<span class=\"coar-menu-item__label\">\n  @if (label()) {\n    {{ label() }}\n  } @else {\n    <ng-content />\n  }\n</span>\n", styles: [":host{display:flex;align-items:center;gap:var(--coar-menu-item-gap, .75rem);width:100%;box-sizing:border-box;padding:var(--coar-menu-item-padding, .5rem .75rem);font-family:var(--coar-menu-item-font-family, var(--coar-font-family-body, Poppins));font-size:var( --coar-menu-item-font-size, var(--coar-component-m-font-size, var(--coar-font-size-xs, 14px)) );font-weight:var(--coar-menu-item-font-weight, var(--coar-font-weight-regular, 400));line-height:var(--coar-menu-item-line-height, 1.5);color:var(--coar-menu-item-color, var(--coar-text-neutral-primary, #545454));background:var(--coar-menu-item-background, transparent);border-radius:var(--coar-menu-item-border-radius, 0);margin:var(--coar-menu-item-margin, 0);position:relative;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background var(--coar-duration-fast, .1s) var(--coar-ease-out, ease);outline:none}:host(:hover:not(.coar-menu-item--disabled)){background:var(--coar-menu-item-background-hover, #f5f5f5);color:var(--coar-menu-item-color-hover, var(--coar-text-neutral-primary, #545454))}:host(:active:not(.coar-menu-item--disabled)){background:var(--coar-menu-item-background-hover, #f5f5f5)}:host(.active){background:var(--coar-menu-item-background-hover, #f5f5f5)}:host-context(.coar-sub-expand__panel-inner){opacity:1}:host(:focus-visible){background:var(--coar-menu-item-background-focus, #f5f5f5);outline:2px solid var(--coar-menu-item-outline-focus, var(--coar-border-accent-primary, #156db7));outline-offset:-2px}:host(.coar-menu-item--disabled){color:var(--coar-menu-item-color-disabled, var(--coar-text-neutral-disabled, #999999));cursor:not-allowed;opacity:var(--coar-menu-item-opacity-disabled, .5)}.coar-menu-item__icon{display:var(--coar-menu-icon-slot-display, inline-flex);align-items:center;justify-content:center;flex-shrink:0;width:var(--coar-menu-item-icon-slot-size, 16px);height:var(--coar-menu-item-icon-slot-size, 16px);opacity:1}.coar-menu-item__icon:has(coar-icon[icon-name=square-rounded-dashed]){opacity:.3}.coar-menu-item__label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "component", type: CoarIconComponent, selector: "coar-icon", inputs: ["name", "source", "size", "rotate", "rotateTransition", "spin", "color", "label"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CoarMenuItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'coar-menu-item', standalone: true, imports: [CoarIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        role: 'menuitem',
+                        class: 'coar-menu-item',
+                        '[class.coar-menu-item--disabled]': 'disabled()',
+                        '[attr.aria-disabled]': 'disabled()',
+                        '[attr.tabindex]': 'disabled() ? -1 : 0',
+                    }, template: "<span class=\"coar-menu-item__icon\" aria-hidden=\"true\">\n  <coar-icon [name]=\"icon() || 'square-rounded-dashed'\" size=\"s\" aria-hidden=\"true\" />\n</span>\n<span class=\"coar-menu-item__label\">\n  @if (label()) {\n    {{ label() }}\n  } @else {\n    <ng-content />\n  }\n</span>\n", styles: [":host{display:flex;align-items:center;gap:var(--coar-menu-item-gap, .75rem);width:100%;box-sizing:border-box;padding:var(--coar-menu-item-padding, .5rem .75rem);font-family:var(--coar-menu-item-font-family, var(--coar-font-family-body, Poppins));font-size:var( --coar-menu-item-font-size, var(--coar-component-m-font-size, var(--coar-font-size-xs, 14px)) );font-weight:var(--coar-menu-item-font-weight, var(--coar-font-weight-regular, 400));line-height:var(--coar-menu-item-line-height, 1.5);color:var(--coar-menu-item-color, var(--coar-text-neutral-primary, #545454));background:var(--coar-menu-item-background, transparent);border-radius:var(--coar-menu-item-border-radius, 0);margin:var(--coar-menu-item-margin, 0);position:relative;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background var(--coar-duration-fast, .1s) var(--coar-ease-out, ease);outline:none}:host(:hover:not(.coar-menu-item--disabled)){background:var(--coar-menu-item-background-hover, #f5f5f5);color:var(--coar-menu-item-color-hover, var(--coar-text-neutral-primary, #545454))}:host(:active:not(.coar-menu-item--disabled)){background:var(--coar-menu-item-background-hover, #f5f5f5)}:host(.active){background:var(--coar-menu-item-background-hover, #f5f5f5)}:host-context(.coar-sub-expand__panel-inner){opacity:1}:host(:focus-visible){background:var(--coar-menu-item-background-focus, #f5f5f5);outline:2px solid var(--coar-menu-item-outline-focus, var(--coar-border-accent-primary, #156db7));outline-offset:-2px}:host(.coar-menu-item--disabled){color:var(--coar-menu-item-color-disabled, var(--coar-text-neutral-disabled, #999999));cursor:not-allowed;opacity:var(--coar-menu-item-opacity-disabled, .5)}.coar-menu-item__icon{display:var(--coar-menu-icon-slot-display, inline-flex);align-items:center;justify-content:center;flex-shrink:0;width:var(--coar-menu-item-icon-slot-size, 16px);height:var(--coar-menu-item-icon-slot-size, 16px);opacity:1}.coar-menu-item__icon:has(coar-icon[icon-name=square-rounded-dashed]){opacity:.3}.coar-menu-item__label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }], hovered: [{ type: i0.Output, args: ["hovered"] }], onClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }], onMouseEnter: [{
+                type: HostListener,
+                args: ['mouseenter', ['$event']]
+            }], onKeyboardActivate: [{
+                type: HostListener,
+                args: ['keydown.enter']
+            }, {
+                type: HostListener,
+                args: ['keydown.space']
+            }] } });
+
+/**
+ * CoarMenuDivider: Visual separator between menu items.
+ *
+ * Simple horizontal line for grouping menu items.
+ *
+ * @example
+ * ```html
+ * <coar-menu>
+ *   <coar-menu-item>Cut</coar-menu-item>
+ *   <coar-menu-item>Copy</coar-menu-item>
+ *   <coar-menu-divider></coar-menu-divider>
+ *   <coar-menu-item>Paste</coar-menu-item>
+ * </coar-menu>
+ * ```
+ */
+class CoarMenuDividerComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CoarMenuDividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: CoarMenuDividerComponent, isStandalone: true, selector: "coar-menu-divider", host: { attributes: { "role": "separator" }, classAttribute: "coar-menu-divider" }, ngImport: i0, template: '', isInline: true, styles: [":host{display:block;height:1px;margin:var(--coar-menu-divider-margin, .25rem .75rem);background:var(--coar-menu-divider-color, var(--coar-border-neutral-tertiary, #e0e0e0))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CoarMenuDividerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'coar-menu-divider', standalone: true, imports: [], template: '', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        role: 'separator',
+                        class: 'coar-menu-divider',
+                    }, styles: [":host{display:block;height:1px;margin:var(--coar-menu-divider-margin, .25rem .75rem);background:var(--coar-menu-divider-color, var(--coar-border-neutral-tertiary, #e0e0e0))}\n"] }]
+        }] });
+
+/**
+ * CoarMenuHeading: Non-interactive section label for menu groups.
+ *
+ * Responsibilities:
+ * - Display section/group heading text
+ * - Provide visual separation between menu sections
+ * - Non-interactive (no hover, no click, not focusable)
+ *
+ * @example
+ * ```html
+ * <coar-menu>
+ *   <coar-menu-heading>Foundations</coar-menu-heading>
+ *   <coar-menu-item routerLink="/typography">Typography</coar-menu-item>
+ *   <coar-menu-item routerLink="/colors">Colors</coar-menu-item>
+ *
+ *   <coar-menu-heading>Form Controls</coar-menu-heading>
+ *   <coar-menu-item routerLink="/text-input">Text Input</coar-menu-item>
+ * </coar-menu>
+ * ```
+ */
+class CoarMenuHeadingComponent {
+    /** Optional explicit label text (alternative to content projection) */
+    label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CoarMenuHeadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: CoarMenuHeadingComponent, isStandalone: true, selector: "coar-menu-heading", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "coar-menu-heading-host" }, ngImport: i0, template: `
+    <div class="coar-menu-heading">
+      @if (label()) {
+        {{ label() }}
+      } @else {
+        <ng-content />
+      }
+    </div>
+  `, isInline: true, styles: [":host{display:block;width:100%;box-sizing:border-box;padding:var(--coar-menu-heading-padding, .75rem .75rem .25rem .75rem);font-family:var(--coar-menu-heading-font-family, var(--coar-font-family-body, Poppins));font-size:var(--coar-menu-heading-font-size, var(--coar-component-xs-font-size, 11px));font-weight:var(--coar-menu-heading-font-weight, var(--coar-font-weight-semi-bold, 600));line-height:var(--coar-menu-heading-line-height, 1.4);text-transform:var(--coar-menu-heading-text-transform, uppercase);letter-spacing:var(--coar-menu-heading-letter-spacing, .05em);color:var(--coar-menu-heading-color, var(--coar-text-neutral-secondary, #6b7280));cursor:default;-webkit-user-select:none;user-select:none}:host(:not(:first-child)){margin-top:var(--coar-menu-heading-spacing-top, .2rem)}.coar-menu-heading{display:flex;align-items:center}:host-context(.coar-menu--sidebar){font-size:16px;letter-spacing:.08em;padding:.5rem .75rem .375rem}:host-context(.coar-menu--sidebar):not(:first-child){margin-top:1.25rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CoarMenuHeadingComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'coar-menu-heading', standalone: true, imports: [], template: `
+    <div class="coar-menu-heading">
+      @if (label()) {
+        {{ label() }}
+      } @else {
+        <ng-content />
+      }
+    </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'coar-menu-heading-host',
+                    }, styles: [":host{display:block;width:100%;box-sizing:border-box;padding:var(--coar-menu-heading-padding, .75rem .75rem .25rem .75rem);font-family:var(--coar-menu-heading-font-family, var(--coar-font-family-body, Poppins));font-size:var(--coar-menu-heading-font-size, var(--coar-component-xs-font-size, 11px));font-weight:var(--coar-menu-heading-font-weight, var(--coar-font-weight-semi-bold, 600));line-height:var(--coar-menu-heading-line-height, 1.4);text-transform:var(--coar-menu-heading-text-transform, uppercase);letter-spacing:var(--coar-menu-heading-letter-spacing, .05em);color:var(--coar-menu-heading-color, var(--coar-text-neutral-secondary, #6b7280));cursor:default;-webkit-user-select:none;user-select:none}:host(:not(:first-child)){margin-top:var(--coar-menu-heading-spacing-top, .2rem)}.coar-menu-heading{display:flex;align-items:center}:host-context(.coar-menu--sidebar){font-size:16px;letter-spacing:.08em;padding:.5rem .75rem .375rem}:host-context(.coar-menu--sidebar):not(:first-child){margin-top:1.25rem}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
+
+/**
+ * Marks an inline submenu template for a `coar-submenu-item`.
+ *
+ * This is optional: if a submenu item contains exactly one direct child `<ng-template>`,
+ * that template will be used even without this directive.
+ */
+class CoarSubmenuTemplateDirective {
+    templateRef = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CoarSubmenuTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: CoarSubmenuTemplateDirective, isStandalone: true, selector: "ng-template[coarSubmenu]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CoarSubmenuTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[coarSubmenu]',
+                    standalone: true,
+                }]
+        }] });
+
+/**
+ * CoarSubmenuItem: Menu item that opens a submenu on hover.
+ *
+ * Responsibilities:
+ * - Render parent item with icon and label
+ * - Manage submenu overlay lifecycle
+ * - Support nested submenus (can contain other submenu-items)
+ *
+ * @example
+ * ```html
+ * <coar-submenu-item label="Share" icon="🔗">
+ *   <ng-template>
+ *     <coar-menu-item icon="✉️" (clicked)="sendEmail()">Email</coar-menu-item>
+ *     <coar-menu-item icon="🔗" (clicked)="copyLink()">Copy Link</coar-menu-item>
+ *   </ng-template>
+ * </coar-submenu-item>
+ *
+ * <!-- Optional: explicitly mark the template -->
+ * <coar-submenu-item label="Share" icon="🔗">
+ *   <ng-template coarSubmenu>
+ *     ...
+ *   </ng-template>
+ * </coar-submenu-item>
+ *
+ * <!-- Also supported (legacy / external template): -->
+ * <coar-submenu-item label="Share" icon="🔗" [submenuTemplate]="shareMenu" />
+ * ```
+ */
+class CoarSubmenuItemComponent {
+    destroyRef = inject(DestroyRef);
+    cdr = inject(ChangeDetectorRef);
+    cascade = inject(COAR_MENU_CASCADE);
+    parentOverlay = inject(COAR_MENU_PARENT, { optional: true });
+    injector = inject(Injector);
+    overlayBuilder = createOverlayBuilder();
+    // Ensures the submenu TemplateRef is instantiated with a parent injector that contains
+    // the correct cascade instance for this submenu item. Without this, TemplateRefs declared
+    // outside of this component can end up resolving menu context from the declaration site.
+    submenuTemplateInjector = Injector.create({
+        providers: [{ provide: COAR_MENU_CASCADE, useValue: this.cascade }],
+        parent: this.injector,
+    });
+    constructor() {
+        // Cleanup cascade when component is destroyed
+        this.destroyRef.onDestroy(() => {
+            this.cascade.destroy();
+            // Ensure state is cleared on destroy
+            if (this.isOpen) {
+                this.isOpen = false;
+                this.submenuRef = null;
+            }
+        });
+    }
+    /** Label text for the menu item */
+    label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
+    /** Optional icon identifier */
+    icon = input(undefined, ...(ngDevMode ? [{ debugName: "icon" }] : []));
+    /** Disabled state prevents interaction */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    /**
+     * Optional external submenu template.
+     *
+     * Prefer an inline `<ng-template>` child when possible.
+     */
+    submenuTemplate = input(null, ...(ngDevMode ? [{ debugName: "submenuTemplate" }] : []));
+    /**
+     * Optional data to pass to the submenu template.
+     *
+     * If provided, this data will be passed as the context to the submenu template,
+     * instead of inheriting the parent overlay's context.
+     *
+     * Use this to create clean boundaries between parent and submenu:
+     * - Simple case: `[submenuData]="context"` (pass full context)
+     * - Complex case: `[submenuData]="transformData(context)"` (pass only what submenu needs)
+     *
+     * @example
+     * ```html
+     * <!-- Pass specific data contract to submenu -->
+     * <coar-submenu-item
+     *   label="Status"
+     *   [submenuTemplate]="statusMenu"
+     *   [submenuData]="{ selectedIds: context.selected.map(s => s.Id) }">
+     * </coar-submenu-item>
+     * ```
+     */
+    submenuData = input(undefined, ...(ngDevMode ? [{ debugName: "submenuData" }] : []));
+    markedInlineTemplate;
+    inlineTemplate;
+    overlaySubmenuTemplate;
+    submenuRef = null;
+    isOpen = false;
+    submenuTemplateToRender() {
+        const template = this.markedInlineTemplate?.templateRef ?? this.inlineTemplate ?? this.submenuTemplate();
+        if (!template) {
+            throw new Error('CoarSubmenuItemComponent: missing submenu content. Provide either an inline <ng-template> child or set [submenuTemplate].');
+        }
+        return template;
+    }
+    onMouseEnter(event) {
+        if (this.disabled()) {
+            return;
+        }
+        // Defensive: sync state with actual overlay status
+        if (this.submenuRef) {
+            if (this.submenuRef.isClosed) {
+                // Overlay is closed, clear everything
+                this.submenuRef = null;
+                this.isOpen = false;
+                this.cdr.markForCheck();
+            }
+            else if (!this.isOpen) {
+                // Overlay is open but state is wrong - fix it
+                this.isOpen = true;
+                this.cdr.markForCheck();
+            }
+        }
+        // Open submenu if not already open
+        if (!this.submenuRef) {
+            const anchor = event.currentTarget;
+            // Menu-aim: when a different sibling submenu is already open, delay switching
+            // if the pointer trajectory suggests the user is heading into the open submenu panel.
+            const parent = this.cascade.parent;
+            if (parent) {
+                parent.requestOpenFromChild(this.cascade, () => this.openSubmenu(anchor), {
+                    x: event.clientX,
+                    y: event.clientY,
+                });
+            }
+            else {
+                this.openSubmenu(anchor);
+            }
+        }
+    }
+    onClick(event) {
+        if (this.disabled()) {
+            event.preventDefault();
+            event.stopPropagation();
+            return;
+        }
+        if (this.submenuRef?.isClosed) {
+            this.submenuRef = null;
+            this.isOpen = false;
+            this.cdr.markForCheck();
+        }
+        // For accessibility: toggle on click/Enter/Space
+        if (this.submenuRef) {
+            this.closeSubmenu();
+        }
+        else {
+            this.openSubmenu(event.currentTarget);
+        }
+    }
+    onKeyboardActivate(event) {
+        if (this.disabled()) {
+            event.preventDefault();
+            event.stopPropagation();
+            return;
+        }
+        if (this.submenuRef?.isClosed) {
+            this.submenuRef = null;
+            this.isOpen = false;
+            this.cdr.markForCheck();
+        }
+        const target = event.currentTarget;
+        if (this.submenuRef) {
+            this.closeSubmenu();
+        }
+        else {
+            this.openSubmenu(target);
+        }
+    }
+    openSubmenu(anchorElement) {
+        // Validate early so the error points at the submenu item usage.
+        this.submenuTemplateToRender();
+        // Determine what data to pass to the submenu template
+        const submenuContextData = this.submenuData();
+        const opener = this.overlayBuilder
+            .withPreset(coarHoverMenuPreset)
+            .anchor({ kind: 'element', element: anchorElement })
+            .position({ placement: ['right-start', 'left-start'], offset: -4, flip: true, shift: true })
+            .fromTemplate(this.overlaySubmenuTemplate);
+        // Prefer the cascade parent's overlayRef when available.
+        // With Angular content projection, submenu content can be instantiated in the *root* overlay
+        // injector even when it's rendered inside a child overlay. The cascade chain preserves the
+        // correct containing overlay via overlayRef.
+        const containingOverlay = this.cascade.parent?.overlayRef ?? this.parentOverlay;
+        if (containingOverlay) {
+            // Inside an overlay: close siblings (direct children of parent) then open as child
+            // First, create the child overlay
+            // Pass submenuData if provided, otherwise undefined (inherits parent context via $implicit)
+            this.submenuRef = opener.openAsChild(containingOverlay, submenuContextData);
+            // Then close siblings, excluding the newly opened one
+            containingOverlay.closeChildren(this.submenuRef);
+        }
+        else {
+            // Inline menu: use cascade-level sibling closure
+            this.cascade.closeSiblings();
+            this.submenuRef = opener.open(submenuContextData);
+        }
+        // Expose the overlay ref to descendants so they can parent their own flyouts correctly.
+        this.cascade.overlayRef = this.submenuRef;
+        this.cascade.parent?.notifyChildOpened(this.cascade);
+        this.isOpen = true;
+        this.cdr.markForCheck();
+        const openedRef = this.submenuRef;
+        // Clear the active styling as soon as a close is initiated (e.g. hoverTree timer,
+        // outside click, or sibling submenu switch). Otherwise the item can look "stuck"
+        // while the overlay finishes its close transition.
+        const originalClose = openedRef.close.bind(openedRef);
+        openedRef.close = (result) => {
+            if (this.submenuRef === openedRef && this.isOpen) {
+                this.isOpen = false;
+                this.cdr.markForCheck();
+            }
+            originalClose(result);
+        };
+        openedRef.afterClosed$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
+            // Only clear state if this is still the current overlay
+            // (prevents race condition when rapidly opening new overlays)
+            if (this.submenuRef === openedRef) {
+                this.submenuRef = null;
+                this.isOpen = false;
+                this.cdr.markForCheck();
+            }
+            if (this.cascade.overlayRef === openedRef) {
+                this.cascade.overlayRef = null;
+            }
+            this.cascade.parent?.notifyChildClosed(this.cascade);
+        });
+    }
+    // Parent overlay is resolved via COAR_OVERLAY_REF when rendered inside an overlay.
+    closeSubmenu() {
+        this.submenuRef?.close();
+        this.submenuRef = null;
+        this.isOpen = false;
+        this.cdr.markForCheck();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CoarSubmenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", type: CoarSubmenuItemComponent, isStandalone: true, selector: "coar-submenu-item, coar-sub-flyout", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, submenuTemplate: { classPropertyName: "submenuTemplate", publicName: "submenuTemplate", isSignal: true, isRequired: false, transformFunction: null }, submenuData: { classPropertyName: "submenuData", publicName: "submenuData", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+            {
+                provide: COAR_MENU_CASCADE,
+                useFactory: () => new CoarMenuCascade(inject(COAR_MENU_CASCADE, { optional: true, skipSelf: true })),
+            },
+        ], queries: [{ propertyName: "markedInlineTemplate", first: true, predicate: CoarSubmenuTemplateDirective }, { propertyName: "inlineTemplate", first: true, predicate: TemplateRef }], viewQueries: [{ propertyName: "overlaySubmenuTemplate", first: true, predicate: ["overlaySubmenuTemplate"], descendants: true }], ngImport: i0, template: `
+    <div
+      class="coar-submenu-item"
+      [class.coar-submenu-item--disabled]="disabled()"
+      [class.coar-submenu-item--open]="isOpen"
+      [attr.role]="'menuitem'"
+      [attr.aria-haspopup]="'menu'"
+      [attr.aria-expanded]="isOpen"
+      [attr.aria-disabled]="disabled()"
+      [attr.tabindex]="disabled() ? -1 : 0"
+      (mouseenter)="onMouseEnter($event)"
+      (click)="onClick($event)"
+      (keydown.enter)="onKeyboardActivate($event)"
+      (keydown.space)="onKeyboardActivate($event)"
+    >
+      <span class="coar-submenu-item__icon" aria-hidden="true">
+        <coar-icon [name]="icon() || 'square-rounded-dashed'" size="s" aria-hidden="true" />
+      </span>
+      <span class="coar-submenu-item__label">{{ label() }}</span>
+      <coar-icon
+        name="chevron-right"
+        size="xs"
+        class="coar-submenu-item__arrow"
+        aria-hidden="true"
+      />
+    </div>
+
+    <ng-template #overlaySubmenuTemplate>
+      <ng-container
+        *ngTemplateOutlet="submenuTemplateToRender(); injector: submenuTemplateInjector"
+      />
+    </ng-template>
+  `, isInline: true, styles: [":host{display:block}.coar-submenu-item{display:flex;align-items:center;gap:var(--coar-menu-item-gap, .75rem);width:100%;box-sizing:border-box;padding:var(--coar-menu-item-padding, .5rem .75rem);font-family:var(--coar-menu-item-font-family, var(--coar-font-family-body, Poppins));font-size:var( --coar-menu-item-font-size, var(--coar-component-m-font-size, var(--coar-font-size-xs, 14px)) );font-weight:var(--coar-menu-item-font-weight, var(--coar-font-weight-regular, 400));line-height:var(--coar-menu-item-line-height, 1.5);color:var(--coar-menu-item-color, var(--coar-text-neutral-primary, #545454));background:var(--coar-menu-item-background, transparent);border-radius:0;position:relative;cursor:pointer;-webkit-user-select:none;user-select:none;transition:var(--coar-transition-fast, all .1s ease);outline:none}.coar-submenu-item:hover:not(.coar-submenu-item--disabled){background:var(--coar-menu-item-background-hover, #f5f5f5);font-weight:500}.coar-submenu-item--open{background:var(--coar-menu-item-background-hover, #f5f5f5);font-weight:500}.coar-submenu-item:focus-visible{background:var(--coar-menu-item-background-focus, #f5f5f5);outline:2px solid var(--coar-menu-item-outline-focus, var(--coar-border-accent-primary, #156db7));outline-offset:-2px}.coar-submenu-item--disabled{color:var(--coar-menu-item-color-disabled, var(--coar-text-neutral-disabled, #999999));cursor:not-allowed;opacity:.6}.coar-submenu-item__icon{flex-shrink:0;display:var(--coar-menu-icon-slot-display, inline-flex);align-items:center;justify-content:center;width:var(--coar-menu-item-icon-slot-size, 16px);height:var(--coar-menu-item-icon-slot-size, 16px);opacity:1}.coar-submenu-item__icon:has(coar-icon[icon-name=square-rounded-dashed]){opacity:.15}.coar-submenu-item__label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.coar-submenu-item__arrow{flex-shrink:0;margin-left:auto;opacity:.6;transition:var(--coar-transition-fast, all .1s ease)}.coar-submenu-item:hover:not(.coar-submenu-item--disabled) .coar-submenu-item__arrow{opacity:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CoarIconComponent, selector: "coar-icon", inputs: ["name", "source", "size", "rotate", "rotateTransition", "spin", "color", "label"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CoarSubmenuItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'coar-submenu-item, coar-sub-flyout', standalone: true, imports: [CommonModule, CoarIconComponent], template: `
+    <div
+      class="coar-submenu-item"
+      [class.coar-submenu-item--disabled]="disabled()"
+      [class.coar-submenu-item--open]="isOpen"
+      [attr.role]="'menuitem'"
+      [attr.aria-haspopup]="'menu'"
+      [attr.aria-expanded]="isOpen"
+      [attr.aria-disabled]="disabled()"
+      [attr.tabindex]="disabled() ? -1 : 0"
+      (mouseenter)="onMouseEnter($event)"
+      (click)="onClick($event)"
+      (keydown.enter)="onKeyboardActivate($event)"
+      (keydown.space)="onKeyboardActivate($event)"
+    >
+      <span class="coar-submenu-item__icon" aria-hidden="true">
+        <coar-icon [name]="icon() || 'square-rounded-dashed'" size="s" aria-hidden="true" />
+      </span>
+      <span class="coar-submenu-item__label">{{ label() }}</span>
+      <coar-icon
+        name="chevron-right"
+        size="xs"
+        class="coar-submenu-item__arrow"
+        aria-hidden="true"
+      />
+    </div>
+
+    <ng-template #overlaySubmenuTemplate>
+      <ng-container
+        *ngTemplateOutlet="submenuTemplateToRender(); injector: submenuTemplateInjector"
+      />
+    </ng-template>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: COAR_MENU_CASCADE,
+                            useFactory: () => new CoarMenuCascade(inject(COAR_MENU_CASCADE, { optional: true, skipSelf: true })),
+                        },
+                    ], styles: [":host{display:block}.coar-submenu-item{display:flex;align-items:center;gap:var(--coar-menu-item-gap, .75rem);width:100%;box-sizing:border-box;padding:var(--coar-menu-item-padding, .5rem .75rem);font-family:var(--coar-menu-item-font-family, var(--coar-font-family-body, Poppins));font-size:var( --coar-menu-item-font-size, var(--coar-component-m-font-size, var(--coar-font-size-xs, 14px)) );font-weight:var(--coar-menu-item-font-weight, var(--coar-font-weight-regular, 400));line-height:var(--coar-menu-item-line-height, 1.5);color:var(--coar-menu-item-color, var(--coar-text-neutral-primary, #545454));background:var(--coar-menu-item-background, transparent);border-radius:0;position:relative;cursor:pointer;-webkit-user-select:none;user-select:none;transition:var(--coar-transition-fast, all .1s ease);outline:none}.coar-submenu-item:hover:not(.coar-submenu-item--disabled){background:var(--coar-menu-item-background-hover, #f5f5f5);font-weight:500}.coar-submenu-item--open{background:var(--coar-menu-item-background-hover, #f5f5f5);font-weight:500}.coar-submenu-item:focus-visible{background:var(--coar-menu-item-background-focus, #f5f5f5);outline:2px solid var(--coar-menu-item-outline-focus, var(--coar-border-accent-primary, #156db7));outline-offset:-2px}.coar-submenu-item--disabled{color:var(--coar-menu-item-color-disabled, var(--coar-text-neutral-disabled, #999999));cursor:not-allowed;opacity:.6}.coar-submenu-item__icon{flex-shrink:0;display:var(--coar-menu-icon-slot-display, inline-flex);align-items:center;justify-content:center;width:var(--coar-menu-item-icon-slot-size, 16px);height:var(--coar-menu-item-icon-slot-size, 16px);opacity:1}.coar-submenu-item__icon:has(coar-icon[icon-name=square-rounded-dashed]){opacity:.15}.coar-submenu-item__label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.coar-submenu-item__arrow{flex-shrink:0;margin-left:auto;opacity:.6;transition:var(--coar-transition-fast, all .1s ease)}.coar-submenu-item:hover:not(.coar-submenu-item--disabled) .coar-submenu-item__arrow{opacity:1}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], submenuTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "submenuTemplate", required: false }] }], submenuData: [{ type: i0.Input, args: [{ isSignal: true, alias: "submenuData", required: false }] }], markedInlineTemplate: [{
+                type: ContentChild,
+                args: [CoarSubmenuTemplateDirective, { descendants: false }]
+            }], inlineTemplate: [{
+                type: ContentChild,
+                args: [TemplateRef, { descendants: false }]
+            }], overlaySubmenuTemplate: [{
+                type: ViewChild,
+                args: ['overlaySubmenuTemplate']
+            }] } });
+
+/**
+ * CoarSubExpand: Menu item that expands/collapses a submenu inline.
+ *
+ * Use this variant when you want nested options to stay visible (e.g. sidebar panels)
+ * while still reusing the same menu item types inside the submenu.
+ *
+ * @example
+ * ```html
+ * <coar-menu>
+ *   <coar-sub-expand label="Filters" icon="settings" [(open)]="filtersOpen">
+ *     <ng-template>
+ *       <coar-menu>
+ *         <coar-menu-item icon="plus">Add Filter</coar-menu-item>
+ *         <coar-menu-item icon="trash">Clear</coar-menu-item>
+ *       </coar-menu>
+ *     </ng-template>
+   </coar-sub-expand>
+ * </coar-menu>
+ * ```
+ */
+class CoarSubExpandComponent {
+    /** Label text for the menu item */
+    label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
+    /** Optional icon identifier */
+    icon = input(undefined, ...(ngDevMode ? [{ debugName: "icon" }] : []));
+    /** Disabled state prevents interaction */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    /** Expanded state (two-way bindable with [(open)]) */
+    open = input(undefined, { ...(ngDevMode ? { debugName: "open" } : {}), transform: booleanAttribute });
+    /** Emits when expanded state changes (for [(open)]) */
+    openChange = output();
+    openInternal = signal(false, ...(ngDevMode ? [{ debugName: "openInternal" }] : []));
+    isOpen = computed(() => this.open() ?? this.openInternal(), ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+    /** Optional external submenu template. Prefer an inline `<ng-template>` child when possible. */
+    submenuTemplate = input(null, ...(ngDevMode ? [{ debugName: "submenuTemplate" }] : []));
+    markedInlineTemplate;
+    inlineTemplate;
+    submenuTemplateToRender() {
+        const template = this.markedInlineTemplate?.templateRef ?? this.inlineTemplate ?? this.submenuTemplate();
+        if (!template) {
+            throw new Error('CoarSubExpandComponent: missing submenu content. Provide either an inline <ng-template> child or set [submenuTemplate].');
+        }
+        return template;
+    }
+    constructor() {
+        effect(() => {
+            const value = this.open();
+            if (value === undefined)
+                return;
+            this.openInternal.set(value);
+        });
+    }
+    toggle(event) {
+        if (this.disabled()) {
+            event.preventDefault();
+            event.stopPropagation();
+            return;
+        }
+        const next = !this.isOpen();
+        this.openInternal.set(next);
+        this.openChange.emit(next);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CoarSubExpandComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", type: CoarSubExpandComponent, isStandalone: true, selector: "coar-sub-expand", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, submenuTemplate: { classPropertyName: "submenuTemplate", publicName: "submenuTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openChange: "openChange" }, queries: [{ propertyName: "markedInlineTemplate", first: true, predicate: CoarSubmenuTemplateDirective }, { propertyName: "inlineTemplate", first: true, predicate: TemplateRef }], ngImport: i0, template: `
+    <div
+      class="coar-sub-expand"
+      [class.coar-sub-expand--disabled]="disabled()"
+      [class.coar-sub-expand--open]="isOpen()"
+      [attr.role]="'menuitem'"
+      [attr.aria-haspopup]="'menu'"
+      [attr.aria-expanded]="isOpen()"
+      [attr.aria-disabled]="disabled()"
+      [attr.tabindex]="disabled() ? -1 : 0"
+      (click)="toggle($event)"
+      (keydown.enter)="toggle($event)"
+      (keydown.space)="toggle($event)"
+    >
+      <span class="coar-sub-expand__icon" aria-hidden="true">
+        <coar-icon [name]="icon() || 'square-rounded-dashed'" size="s" aria-hidden="true" />
+      </span>
+      <span class="coar-sub-expand__label">{{ label() }}</span>
+      <coar-icon
+        [name]="isOpen() ? 'minus' : 'plus'"
+        size="xs"
+        class="coar-sub-expand__arrow"
+        aria-hidden="true"
+      />
+    </div>
+
+    <div
+      class="coar-sub-expand__panel"
+      [class.coar-sub-expand__panel--open]="isOpen()"
+      [attr.aria-hidden]="isOpen() ? null : 'true'"
+      role="group"
+    >
+      <div class="coar-sub-expand__panel-inner">
+        <ng-container *ngTemplateOutlet="submenuTemplateToRender()" />
+      </div>
+    </div>
+  `, isInline: true, styles: [":host{display:block}.coar-sub-expand{display:flex;align-items:center;gap:var(--coar-menu-item-gap, .75rem);width:100%;box-sizing:border-box;padding:var(--coar-menu-item-padding, .5rem .75rem);font-family:var(--coar-menu-item-font-family, var(--coar-font-family-body, Poppins));font-size:var( --coar-menu-item-font-size, var(--coar-component-m-font-size, var(--coar-font-size-xs, 14px)) );font-weight:var(--coar-menu-item-font-weight, var(--coar-font-weight-regular, 400));line-height:var(--coar-menu-item-line-height, 1.5);color:var(--coar-menu-item-color, var(--coar-text-neutral-primary, #545454));background:var(--coar-menu-item-background, transparent);border-radius:0;position:relative;cursor:pointer;-webkit-user-select:none;user-select:none;transition:var(--coar-transition-fast, all .1s ease);outline:none}.coar-sub-expand:hover:not(.coar-sub-expand--disabled){background:var(--coar-menu-item-background-hover, #f5f5f5);color:var(--coar-menu-item-color-hover, var(--coar-text-neutral-primary, #545454))}.coar-sub-expand:focus-visible{background:var(--coar-menu-item-background-focus, #f5f5f5);outline:2px solid var(--coar-menu-item-outline-focus, var(--coar-border-accent-primary, #156db7));outline-offset:-2px}.coar-sub-expand--disabled{color:var(--coar-menu-item-color-disabled, var(--coar-text-neutral-disabled, #999999));cursor:not-allowed;opacity:.6}.coar-sub-expand__icon{flex-shrink:0;display:var(--coar-menu-icon-slot-display, inline-flex);align-items:center;justify-content:center;width:var(--coar-menu-item-icon-slot-size, 16px);height:var(--coar-menu-item-icon-slot-size, 16px);opacity:1}.coar-sub-expand__icon:has(coar-icon[icon-name=square-rounded-dashed]){opacity:.15}.coar-sub-expand__label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.coar-sub-expand__arrow{flex-shrink:0;margin-left:auto;opacity:.6;transition:var(--coar-transition-fast, all .1s ease)}.coar-sub-expand:hover:not(.coar-sub-expand--disabled) .coar-sub-expand__arrow{opacity:1}.coar-sub-expand__panel{box-sizing:border-box;margin-left:var(--coar-sub-expand-indent-offset, 16px);position:relative;display:grid;grid-template-rows:0fr;overflow:hidden;transition:grid-template-rows var(--coar-duration-normal, .2s) var(--coar-ease-out, ease)}.coar-sub-expand__panel:before{content:\"\";position:absolute;top:0;bottom:0;left:0;width:1px;background:var(--coar-sub-expand-line-color, var(--coar-border-neutral-tertiary, #e5e5e5));pointer-events:none;opacity:0;transition:opacity var(--coar-duration-fast, .1s) var(--coar-ease-out, ease);z-index:1}.coar-sub-expand__panel--open{grid-template-rows:1fr}.coar-sub-expand__panel--open:before{opacity:1}.coar-sub-expand__panel-inner{overflow:hidden;min-height:0;padding-top:0;padding-bottom:0;opacity:0;transform:translateY(-2px);transition:opacity var(--coar-duration-fast, .1s) var(--coar-ease-out, ease),transform var(--coar-duration-fast, .1s) var(--coar-ease-out, ease)}.coar-sub-expand__panel--open>.coar-sub-expand__panel-inner{padding-top:var(--coar-sub-expand-panel-padding-y, var(--coar-spacing-1, .25rem));padding-bottom:var(--coar-sub-expand-panel-padding-y, var(--coar-spacing-1, .25rem));opacity:1;transform:translateY(0)}:host-context(coar-sidebar){margin-top:var(--coar-sub-expand-sidebar-spacing-top, var(--coar-spacing-m, 12px))}:host-context(coar-sidebar):first-child{margin-top:0}:host-context(coar-sidebar) .coar-sub-expand{font-size:var(--coar-menu-heading-font-size, var(--coar-font-size-xs, 12px));font-weight:var(--coar-font-weight-semi-bold, 600);text-transform:uppercase;letter-spacing:.05em;color:var(--coar-menu-heading-color, var(--coar-text-neutral-secondary));padding:.5rem .75rem .25rem;background:transparent}:host-context(coar-sidebar) .coar-sub-expand:hover:not(.coar-sub-expand--disabled){background:transparent;color:var(--coar-text-neutral-primary)}:host-context(coar-sidebar) .coar-sub-expand__icon{display:none}:host-context(coar-sidebar) .coar-sub-expand__arrow{opacity:.4}:host-context(coar-sidebar) .coar-sub-expand:hover:not(.coar-sub-expand--disabled) .coar-sub-expand__arrow{opacity:.8}:host-context(coar-sidebar) .coar-sub-expand__panel{margin-left:0}:host-context(coar-sidebar) .coar-sub-expand__panel:before{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CoarIconComponent, selector: "coar-icon", inputs: ["name", "source", "size", "rotate", "rotateTransition", "spin", "color", "label"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CoarSubExpandComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'coar-sub-expand', standalone: true, imports: [CommonModule, CoarIconComponent], template: `
+    <div
+      class="coar-sub-expand"
+      [class.coar-sub-expand--disabled]="disabled()"
+      [class.coar-sub-expand--open]="isOpen()"
+      [attr.role]="'menuitem'"
+      [attr.aria-haspopup]="'menu'"
+      [attr.aria-expanded]="isOpen()"
+      [attr.aria-disabled]="disabled()"
+      [attr.tabindex]="disabled() ? -1 : 0"
+      (click)="toggle($event)"
+      (keydown.enter)="toggle($event)"
+      (keydown.space)="toggle($event)"
+    >
+      <span class="coar-sub-expand__icon" aria-hidden="true">
+        <coar-icon [name]="icon() || 'square-rounded-dashed'" size="s" aria-hidden="true" />
+      </span>
+      <span class="coar-sub-expand__label">{{ label() }}</span>
+      <coar-icon
+        [name]="isOpen() ? 'minus' : 'plus'"
+        size="xs"
+        class="coar-sub-expand__arrow"
+        aria-hidden="true"
+      />
+    </div>
+
+    <div
+      class="coar-sub-expand__panel"
+      [class.coar-sub-expand__panel--open]="isOpen()"
+      [attr.aria-hidden]="isOpen() ? null : 'true'"
+      role="group"
+    >
+      <div class="coar-sub-expand__panel-inner">
+        <ng-container *ngTemplateOutlet="submenuTemplateToRender()" />
+      </div>
+    </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block}.coar-sub-expand{display:flex;align-items:center;gap:var(--coar-menu-item-gap, .75rem);width:100%;box-sizing:border-box;padding:var(--coar-menu-item-padding, .5rem .75rem);font-family:var(--coar-menu-item-font-family, var(--coar-font-family-body, Poppins));font-size:var( --coar-menu-item-font-size, var(--coar-component-m-font-size, var(--coar-font-size-xs, 14px)) );font-weight:var(--coar-menu-item-font-weight, var(--coar-font-weight-regular, 400));line-height:var(--coar-menu-item-line-height, 1.5);color:var(--coar-menu-item-color, var(--coar-text-neutral-primary, #545454));background:var(--coar-menu-item-background, transparent);border-radius:0;position:relative;cursor:pointer;-webkit-user-select:none;user-select:none;transition:var(--coar-transition-fast, all .1s ease);outline:none}.coar-sub-expand:hover:not(.coar-sub-expand--disabled){background:var(--coar-menu-item-background-hover, #f5f5f5);color:var(--coar-menu-item-color-hover, var(--coar-text-neutral-primary, #545454))}.coar-sub-expand:focus-visible{background:var(--coar-menu-item-background-focus, #f5f5f5);outline:2px solid var(--coar-menu-item-outline-focus, var(--coar-border-accent-primary, #156db7));outline-offset:-2px}.coar-sub-expand--disabled{color:var(--coar-menu-item-color-disabled, var(--coar-text-neutral-disabled, #999999));cursor:not-allowed;opacity:.6}.coar-sub-expand__icon{flex-shrink:0;display:var(--coar-menu-icon-slot-display, inline-flex);align-items:center;justify-content:center;width:var(--coar-menu-item-icon-slot-size, 16px);height:var(--coar-menu-item-icon-slot-size, 16px);opacity:1}.coar-sub-expand__icon:has(coar-icon[icon-name=square-rounded-dashed]){opacity:.15}.coar-sub-expand__label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.coar-sub-expand__arrow{flex-shrink:0;margin-left:auto;opacity:.6;transition:var(--coar-transition-fast, all .1s ease)}.coar-sub-expand:hover:not(.coar-sub-expand--disabled) .coar-sub-expand__arrow{opacity:1}.coar-sub-expand__panel{box-sizing:border-box;margin-left:var(--coar-sub-expand-indent-offset, 16px);position:relative;display:grid;grid-template-rows:0fr;overflow:hidden;transition:grid-template-rows var(--coar-duration-normal, .2s) var(--coar-ease-out, ease)}.coar-sub-expand__panel:before{content:\"\";position:absolute;top:0;bottom:0;left:0;width:1px;background:var(--coar-sub-expand-line-color, var(--coar-border-neutral-tertiary, #e5e5e5));pointer-events:none;opacity:0;transition:opacity var(--coar-duration-fast, .1s) var(--coar-ease-out, ease);z-index:1}.coar-sub-expand__panel--open{grid-template-rows:1fr}.coar-sub-expand__panel--open:before{opacity:1}.coar-sub-expand__panel-inner{overflow:hidden;min-height:0;padding-top:0;padding-bottom:0;opacity:0;transform:translateY(-2px);transition:opacity var(--coar-duration-fast, .1s) var(--coar-ease-out, ease),transform var(--coar-duration-fast, .1s) var(--coar-ease-out, ease)}.coar-sub-expand__panel--open>.coar-sub-expand__panel-inner{padding-top:var(--coar-sub-expand-panel-padding-y, var(--coar-spacing-1, .25rem));padding-bottom:var(--coar-sub-expand-panel-padding-y, var(--coar-spacing-1, .25rem));opacity:1;transform:translateY(0)}:host-context(coar-sidebar){margin-top:var(--coar-sub-expand-sidebar-spacing-top, var(--coar-spacing-m, 12px))}:host-context(coar-sidebar):first-child{margin-top:0}:host-context(coar-sidebar) .coar-sub-expand{font-size:var(--coar-menu-heading-font-size, var(--coar-font-size-xs, 12px));font-weight:var(--coar-font-weight-semi-bold, 600);text-transform:uppercase;letter-spacing:.05em;color:var(--coar-menu-heading-color, var(--coar-text-neutral-secondary));padding:.5rem .75rem .25rem;background:transparent}:host-context(coar-sidebar) .coar-sub-expand:hover:not(.coar-sub-expand--disabled){background:transparent;color:var(--coar-text-neutral-primary)}:host-context(coar-sidebar) .coar-sub-expand__icon{display:none}:host-context(coar-sidebar) .coar-sub-expand__arrow{opacity:.4}:host-context(coar-sidebar) .coar-sub-expand:hover:not(.coar-sub-expand--disabled) .coar-sub-expand__arrow{opacity:.8}:host-context(coar-sidebar) .coar-sub-expand__panel{margin-left:0}:host-context(coar-sidebar) .coar-sub-expand__panel:before{display:none}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], openChange: [{ type: i0.Output, args: ["openChange"] }], submenuTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "submenuTemplate", required: false }] }], markedInlineTemplate: [{
+                type: ContentChild,
+                args: [CoarSubmenuTemplateDirective, { descendants: false }]
+            }], inlineTemplate: [{
+                type: ContentChild,
+                args: [TemplateRef, { descendants: false }]
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { COAR_MENU_AIM_CONFIG, CoarMenuAimConfigDirective, CoarMenuComponent, CoarMenuDividerComponent, CoarMenuHeadingComponent, CoarMenuItemComponent, CoarSubExpandComponent, CoarSubmenuItemComponent, CoarSubmenuTemplateDirective, DEFAULT_COAR_MENU_AIM_CONFIG };
+//# sourceMappingURL=cocoar-ui-menu.mjs.map