forty-cdk 0.2.0 → 0.3.0

package/fesm2022/forty-cdk-menubar.mjs

@@ -0,0 +1,787 @@
+import * as i0 from '@angular/core';
+import { signal, computed, InjectionToken, inject, model, input, booleanAttribute, numberAttribute, DestroyRef, Directive, ElementRef } from '@angular/core';
+import { createMenuItemList, InitialFocusState, CloseReasonState, MENU_POSITIONING_DEFAULTS, createDefaults, injectTextDirection, Collection, firstEnabledHost, RovingTabindex, injectTypeahead, createDebouncedAction, reconcileRovingActive, nextEnabledHandle, FOR_MENU_CONTEXT, IdGenerator, hostId, registerHandle, resolveListNavigation } from 'forty-cdk/core';
+
+/**
+ * Single concrete `ForMenuContext` the `[forMenubar]` root provides to its
+ * descendant `[forMenuContent]` and items. It is the one place the bar's
+ * "which trigger's menu is open" multiplexing lives: open / anchor / side /
+ * ids / placement are all derived from the host's `activeTrigger`, so the same
+ * context shape transparently covers whichever trigger's menu is mounted.
+ *
+ * Item navigation reuses the shared `MenuItemList` (the same item-collection /
+ * typeahead / navigate / focus mechanics that back `MenuOverlay`), and the
+ * initial-focus / highlight-consume protocol and the close-reason record reuse
+ * the shared `InitialFocusState` / `CloseReasonState` micro-helpers (also
+ * composed by `MenuOverlay`), so this only has to cover the parts the
+ * single-owner overlay can't — the `activeTrigger`-derived multiplexing.
+ *
+ * A bar-level menu has no per-trigger dismiss / auto-focus outputs and no
+ * per-context trigger registration (triggers register with the bar directly),
+ * so the corresponding `ForMenuContext` members are deliberately inert here:
+ * the outside-interaction emit forwarders have nowhere to surface (the implicit
+ * close runs through {@link requestClose}), the auto-focus emitters never veto
+ * (bar menus follow APG-prescribed focus movement), and trigger
+ * register/unregister are owned by the bar. They stay as documented members of
+ * this one implementation rather than scattered no-op literals.
+ */
+class MenubarMenuContext {
+    #host;
+    #itemList = createMenuItemList(() => this.#host.loop());
+    #contentEl = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#contentEl" }] : /* istanbul ignore next */ []));
+    #initialFocusState = new InitialFocusState();
+    #closeReasonState = new CloseReasonState();
+    open = computed(() => this.#host.value() !== '', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    disabled;
+    dismissible;
+    returnFocus = signal(true).asReadonly();
+    dir;
+    side = computed(() => this.#host.activeTrigger()?.side(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []));
+    align = computed(() => this.#host.activeTrigger()?.align(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
+    sideOffset = computed(() => this.#host.activeTrigger()?.sideOffset() ?? 4, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sideOffset" }] : /* istanbul ignore next */ []));
+    alignOffset = computed(() => this.#host.activeTrigger()?.alignOffset() ?? MENU_POSITIONING_DEFAULTS.alignOffset, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "alignOffset" }] : /* istanbul ignore next */ []));
+    avoidCollisions = computed(() => this.#host.activeTrigger()?.avoidCollisions() ?? MENU_POSITIONING_DEFAULTS.avoidCollisions, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "avoidCollisions" }] : /* istanbul ignore next */ []));
+    collisionPadding = computed(() => this.#host.activeTrigger()?.collisionPadding() ?? 8, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "collisionPadding" }] : /* istanbul ignore next */ []));
+    arrowPadding = computed(() => this.#host.activeTrigger()?.arrowPadding() ?? MENU_POSITIONING_DEFAULTS.arrowPadding, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "arrowPadding" }] : /* istanbul ignore next */ []));
+    sticky = computed(() => this.#host.activeTrigger()?.sticky() ?? MENU_POSITIONING_DEFAULTS.sticky, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sticky" }] : /* istanbul ignore next */ []));
+    hideWhenDetached = computed(() => this.#host.activeTrigger()?.hideWhenDetached() ?? MENU_POSITIONING_DEFAULTS.hideWhenDetached, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hideWhenDetached" }] : /* istanbul ignore next */ []));
+    clipUntilPositioned = computed(() => this.#host.activeTrigger()?.clipUntilPositioned() ??
+        MENU_POSITIONING_DEFAULTS.clipUntilPositioned, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "clipUntilPositioned" }] : /* istanbul ignore next */ []));
+    loop;
+    initialFocus = this.#initialFocusState.target;
+    lastCloseReason = this.#closeReasonState.reason;
+    triggerId = computed(() => this.#host.activeTrigger()?.triggerId() ?? '', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "triggerId" }] : /* istanbul ignore next */ []));
+    contentId = computed(() => this.#host.activeTrigger()?.contentId() ?? '', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "contentId" }] : /* istanbul ignore next */ []));
+    ariaLabel = computed(() => this.#host.activeTrigger()?.ariaLabel() ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    anchor = computed(() => this.#host.activeTrigger()?.host ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "anchor" }] : /* istanbul ignore next */ []));
+    trigger;
+    content = this.#contentEl.asReadonly();
+    parentMenu = null;
+    menubar;
+    /**
+     * Exempt every menubar trigger element so clicking another trigger doesn't
+     * fire `pointerDownOutside` (the trigger's own click handler routes the
+     * close + open).
+     */
+    dismissableExemptions = computed(() => this.#host.triggers().map((t) => t.host), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dismissableExemptions" }] : /* istanbul ignore next */ []));
+    constructor(host) {
+        this.#host = host;
+        this.disabled = host.disabled;
+        this.dismissible = host.dismissible;
+        this.dir = host.dir;
+        this.loop = host.loop;
+        this.trigger = host.lastTriggerHost;
+        this.menubar = host;
+    }
+    setInitialFocus(target) {
+        this.#initialFocusState.setTarget(target);
+    }
+    /**
+     * Read by the bar's `openTrigger` so the next open seeds the resolved
+     * initial-focus target and clears the prior close reason. A `'pointer'`
+     * `modality` keeps the upcoming programmatic initial focus from reflecting
+     * `data-highlighted` on the focused item.
+     */
+    prepareOpen(initialFocus, modality = 'keyboard') {
+        this.#initialFocusState.prepareOpen(initialFocus, modality === 'keyboard');
+        this.#closeReasonState.reset();
+    }
+    /** Read by the bar's pointer-driven close so the content skips its return-focus. */
+    setLastCloseReason(reason) {
+        this.#closeReasonState.set(reason);
+    }
+    registerTrigger() {
+        // Triggers register with the menubar itself, not with this menu context.
+    }
+    unregisterTrigger() { }
+    registerContent(el) {
+        this.#contentEl.set(el);
+        this.#host.attachContentPointer(el);
+    }
+    unregisterContent(el) {
+        if (this.#contentEl() === el) {
+            this.#contentEl.set(null);
+        }
+        this.#host.detachContentPointer();
+    }
+    registerItem(handle) {
+        this.#itemList.registerItem(handle);
+    }
+    unregisterItem(handle) {
+        this.#itemList.unregisterItem(handle);
+    }
+    navigate(currentItem, action) {
+        this.#itemList.navigate(currentItem, action);
+    }
+    handleTypeahead(event) {
+        this.#itemList.handleTypeahead(event);
+    }
+    clearItemHighlights() {
+        this.#itemList.clearHighlights();
+    }
+    focusFirstEnabledItem() {
+        return this.#itemList.focusFirstEnabledItem(this.#initialFocusState.consumeHighlight());
+    }
+    focusLastEnabledItem() {
+        return this.#itemList.focusLastEnabledItem(this.#initialFocusState.consumeHighlight());
+    }
+    toggle() {
+        // Without a specific trigger value, toggle from the bar context can only
+        // close. Triggers themselves drive the open path via the bar's openTrigger.
+        if (this.#host.value() !== '') {
+            this.#host.closeOpen();
+        }
+    }
+    openMenu() {
+        // Open requires a trigger value — see the bar's openTrigger.
+    }
+    closeMenu(reason) {
+        this.#closeReasonState.set(reason);
+        this.#host.closeOpen();
+    }
+    emitEscapeKeyDown(event) {
+        if (!event.defaultPrevented && this.#host.dismissible()) {
+            event.stopPropagation();
+            this.#closeReasonState.set('escape');
+            this.#host.closeOpen();
+        }
+    }
+    // The menubar has no per-trigger `(pointerDownOutside)` / `(focusOutside)` /
+    // `(interactOutside)` outputs, so these emit forwarders have nowhere to
+    // surface; the implicit close runs through `requestClose` below.
+    emitPointerDownOutside() { }
+    emitFocusOutside() { }
+    emitInteractOutside() { }
+    requestClose(reason) {
+        if (this.#host.value() === '') {
+            return;
+        }
+        this.#closeReasonState.set(reason);
+        this.#host.closeOpen();
+    }
+    // Bar-level menus follow APG-prescribed focus movement and expose no
+    // `(autoFocusOnOpen)` / `(autoFocusOnClose)` outputs, so the vetoes never
+    // fire — the content's focus moves always run.
+    emitAutoFocusOnOpen() {
+        return false;
+    }
+    emitAutoFocusOnClose() {
+        return false;
+    }
+}
+
+const FOR_MENUBAR_CONTEXT = new InjectionToken('FOR_MENUBAR_CONTEXT');
+function injectMenubarContext(piece) {
+    const ctx = inject(FOR_MENUBAR_CONTEXT, { optional: true });
+    if (!ctx) {
+        throw new Error(`[forty-cdk/menubar] ${piece} must be used inside a [forMenubar] element. ` +
+            "If it is declared inside an ng-template, DI resolves at the template's declaration site — " +
+            'not where it is stamped (e.g. via ngTemplateOutlet) — so declare the template inside the ' +
+            '[forMenubar] root.');
+    }
+    return ctx;
+}
+
+/**
+ * Library fallback for menubar defaults, read at the root injector when no
+ * consumer has called `provideForMenubarDefaults`. Exported for the shared
+ * defaults contract spec; not re-exported from the primitive's public entry.
+ */
+const FOR_MENUBAR_FALLBACK_DEFAULTS = {
+    closeDelay: 150,
+};
+const { token, provideDefaults } = createDefaults('FOR_MENUBAR_DEFAULTS', FOR_MENUBAR_FALLBACK_DEFAULTS);
+/** Token holding the resolved menubar defaults for the current scope. */
+const FOR_MENUBAR_DEFAULTS = token;
+/**
+ * Configures forty-cdk menubar defaults for this injector scope. Partial
+ * overrides inherit unspecified keys from the parent scope (or library
+ * defaults at the root).
+ */
+function provideForMenubarDefaults(defaults = {}) {
+    return provideDefaults(defaults);
+}
+
+/**
+ * Headless implementation of the
+ * [WAI-ARIA Menubar pattern](https://www.w3.org/WAI/ARIA/apg/patterns/menubar/).
+ *
+ * A horizontal (or vertical) bar of triggers, each opening a dropdown menu.
+ * The bar owns "which child menu is open" — opening another implicitly
+ * closes the previous. Cross-menu ArrowLeft / ArrowRight navigation,
+ * hover-after-first-open (switch siblings instantly, dismiss on hover-leave
+ * after `closeDelay`), and roving tabindex among triggers are wired
+ * automatically.
+ *
+ * Surface composition:
+ *
+ * ```html
+ * <div forMenubar [(value)]="open">
+ *   <button forMenubarTrigger value="file">File</button>
+ *   @if (open() === 'file') {
+ *     <div forMenuContent>
+ *       <button forMenuItem (activate)="newDoc()">New</button>
+ *     </div>
+ *   }
+ *
+ *   <button forMenubarTrigger value="edit">Edit</button>
+ *   @if (open() === 'edit') {
+ *     <div forMenuContent>…</div>
+ *   }
+ * </div>
+ * ```
+ *
+ * `[forMenuContent]` is the same directive used by `[forDropdownMenu]` /
+ * `[forContextMenu]`. The bar provides a multiplexed `ForMenuContext`
+ * whose anchor / placement / ids are pulled from whichever trigger is
+ * currently active, so the content directive needs no menubar-specific
+ * code path.
+ */
+class ForMenubar {
+    #defaults = inject(FOR_MENUBAR_DEFAULTS);
+    /**
+     * Two-way bindable. The value of the open trigger, or `''` when none.
+     * The `model()` change emitter (`(valueChange)`) fires only on internal
+     * transitions (trigger interaction, item activation, Escape, outside
+     * dismissal, cross-menu nav), never on consumer writes via `[(value)]`.
+     */
+    value = model('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    orientation = input('horizontal', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    /**
+     * Writing direction. When unset (default `null`), the inherited ambient
+     * direction is resolved from the nearest ancestor carrying a `dir` attribute
+     * (or `<html dir>`), defaulting to `'ltr'`. An explicit `[dir]` always wins.
+     * The resolved value is reflected to the host `dir` attribute, swaps
+     * cross-menu ArrowLeft / ArrowRight, and is inherited by descendant menus.
+     */
+    _dirInput = input(null, { ...(ngDevMode ? { debugName: "_dirInput" } : /* istanbul ignore next */ {}), alias: 'dir' });
+    dir = injectTextDirection(this._dirInput);
+    loop = input(true, { ...(ngDevMode ? { debugName: "loop" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Whether the open menu closes on Escape, an outside interaction, or the
+     * pointer leaving the bar. When `false`, the menu stays open until the
+     * consumer flips `value` (or a trigger / item interaction switches it).
+     * Matches the dismiss contract of `[forDropdownMenu]` / `[forContextMenu]`.
+     * Default `true`.
+     */
+    dismissible = input(true, { ...(ngDevMode ? { debugName: "dismissible" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Optional accessible name for the menubar. */
+    ariaLabel = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * ms before the open menu closes after the pointer leaves the bar (and any
+     * open menu). Default `150`. The default is read from
+     * `provideForMenubarDefaults` for the surrounding scope.
+     */
+    closeDelay = input(this.#defaults.closeDelay, { ...(ngDevMode ? { debugName: "closeDelay" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    #triggerCollection = new Collection();
+    triggers = this.#triggerCollection.items;
+    activeTrigger = computed(() => {
+        const v = this.value();
+        if (v === '') {
+            return null;
+        }
+        return this.#triggerCollection.items().find((t) => t.value() === v) ?? null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeTrigger" }] : /* istanbul ignore next */ []));
+    /**
+     * The most-recently-active trigger value. Persists past close so the
+     * `[forMenuContent]` destroy hook can still target the trigger (by then
+     * `value()` is already `''`). Updated synchronously by `openTrigger`
+     * and snapshotted in `closeOpen` before clearing `value` — that covers
+     * every internal close path (Escape, item activation, outside dismiss).
+     */
+    #lastValue = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#lastValue" }] : /* istanbul ignore next */ []));
+    /**
+     * The most-recently-active trigger host. Persists past close so the
+     * multiplexed `[forMenuContent]` destroy hook can still target the trigger
+     * (by then `value()` is already `''`). Consumed by {@link MenubarMenuContext}
+     * as its return-focus `trigger`.
+     */
+    lastTriggerHost = computed(() => {
+        const v = this.value() || this.#lastValue();
+        if (v === '') {
+            return null;
+        }
+        return this.#triggerCollection.items().find((t) => t.value() === v)?.host ?? null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "lastTriggerHost" }] : /* istanbul ignore next */ []));
+    #firstEnabledTriggerHost = computed(() => firstEnabledHost(this.#triggerCollection.items()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#firstEnabledTriggerHost" }] : /* istanbul ignore next */ []));
+    /**
+     * Roving-tabindex tracker shared by every menubar trigger, mirroring
+     * `ForToolbar` / `ForTabs`. Triggers promote themselves to active on
+     * `(focus)` (via {@link setFocusedTrigger}) and read `active()` through
+     * {@link tabindexFor}, so re-entry restores the last focused trigger. Before
+     * any focus — and on every close — `active()` is `null`/stale and the tab
+     * stop falls back to the first enabled trigger. The active pointer is
+     * self-healing (a detached / disabled trigger no longer owns the stop).
+     */
+    roving = new RovingTabindex();
+    #triggerTypeahead = injectTypeahead();
+    #closeAction = createDebouncedAction(() => this.#closeByPointer());
+    #detachContentPointerFn = null;
+    constructor() {
+        reconcileRovingActive(this.roving, this.#triggerCollection.items);
+        inject(DestroyRef).onDestroy(() => {
+            this.#closeAction.cancel();
+            this.detachContentPointer();
+        });
+    }
+    // -- Multiplexed ForMenuContext for the currently-active menu -------------
+    /**
+     * Single `ForMenuContext` provided to descendant `[forMenuContent]` and
+     * items, implemented by the dedicated {@link MenubarMenuContext} class. Its
+     * open / anchor / side / ids fields are derived from `activeTrigger`, so the
+     * same context shape transparently covers whichever trigger's menu is
+     * mounted. The bar's menu-item navigation reuses the shared `MenuItemList`
+     * (the same mechanics that back `MenuOverlay`), so the multiplexing only
+     * covers the parts the single-owner overlay can't.
+     */
+    menuCtx = new MenubarMenuContext(this);
+    // -- ForMenubarContext ----------------------------------------------------
+    registerTrigger(handle) {
+        this.#triggerCollection.register(handle);
+    }
+    unregisterTrigger(handle) {
+        this.#triggerCollection.unregister(handle);
+        this.roving.unregister(handle.host);
+    }
+    triggerFor(value) {
+        if (value === '') {
+            return null;
+        }
+        return this.#triggerCollection.items().find((t) => t.value() === value) ?? null;
+    }
+    tabindexFor(el) {
+        const v = this.value();
+        if (v !== '') {
+            // While a menu is open, only its trigger is tabbable.
+            return this.activeTrigger()?.host === el ? 0 : -1;
+        }
+        // Otherwise the roving tracker (promoted by trigger `(focus)`) holds the
+        // tab stop, falling back to the first enabled trigger when nothing has
+        // been focused yet or the active trigger went stale.
+        if (this.roving.hasActive()) {
+            return this.roving.tabindexFor(el);
+        }
+        return this.#firstEnabledTriggerHost() === el ? 0 : -1;
+    }
+    setFocusedTrigger(el) {
+        this.roving.setActive(el);
+    }
+    navigateTriggers(currentTrigger, action) {
+        if (this.disabled()) {
+            return;
+        }
+        const target = nextEnabledHandle(this.#triggerCollection.items(), currentTrigger, action, {
+            loop: this.loop(),
+        });
+        target?.host.focus();
+    }
+    openTrigger(value, initialFocus, modality = 'keyboard') {
+        if (this.disabled()) {
+            return;
+        }
+        const handle = this.triggerFor(value);
+        if (!handle || handle.disabled()) {
+            return;
+        }
+        this.menuCtx.prepareOpen(initialFocus, modality);
+        this.#lastValue.set(value);
+        if (this.value() !== value) {
+            this.value.set(value);
+        }
+    }
+    closeOpen() {
+        const current = this.value();
+        if (current === '') {
+            return;
+        }
+        // Snapshot so [forMenuContent]'s destroy hook can return focus to the
+        // just-closed trigger via menuCtx.trigger (which falls back to #lastValue
+        // once value() is '').
+        this.#lastValue.set(current);
+        this.value.set('');
+    }
+    switchToSibling(direction) {
+        if (this.disabled()) {
+            return;
+        }
+        const items = this.#triggerCollection.items();
+        if (items.length === 0) {
+            return;
+        }
+        const currentValue = this.value();
+        const currentIndex = items.findIndex((t) => t.value() === currentValue);
+        const target = nextEnabledHandle(items, currentIndex < 0 ? 0 : currentIndex, direction, {
+            loop: this.loop(),
+        });
+        if (target === null) {
+            return;
+        }
+        this.openTrigger(target.value(), 'first');
+    }
+    pointerEnterTrigger(value) {
+        if (this.disabled()) {
+            return;
+        }
+        // Entering any trigger aborts a pending hover-leave close — the pointer
+        // is still travelling across the bar, so keep the open menu alive.
+        this.#closeAction.cancel();
+        // Hover-after-open opens siblings instantly; while no menu is
+        // open, hover does nothing (first open requires keyboard / click).
+        if (this.value() === '' || this.value() === value) {
+            return;
+        }
+        this.openTrigger(value, 'first', 'pointer');
+    }
+    /**
+     * Abort a scheduled hover-leave close, if any. Bound to the bar's
+     * `pointerenter` / `pointermove` so re-entering the bar (or its open menu)
+     * keeps the menu open. Also called by the multiplexed content's
+     * `pointerenter` so travelling from a trigger into its portaled menu does
+     * not trip the close timer.
+     */
+    cancelPendingClose() {
+        this.#closeAction.cancel();
+    }
+    /**
+     * The pointer left the bar. Schedule a close after `closeDelay`; entering
+     * the bar, a trigger, or the open menu again cancels it. No-op while no
+     * menu is open or for non-mouse pointers (touch / pen drive open/close via
+     * tap, not hover).
+     */
+    onBarPointerLeave(event) {
+        if (event.pointerType !== '' && event.pointerType !== 'mouse') {
+            return;
+        }
+        this.#scheduleCloseByPointer();
+    }
+    #scheduleCloseByPointer() {
+        this.#closeAction.cancel();
+        // A non-dismissible menu stays pinned open: hover-leave is held to the
+        // same contract as Escape / outside interaction.
+        if (this.value() === '' || !this.dismissible()) {
+            return;
+        }
+        this.#closeAction.schedule(this.closeDelay());
+    }
+    #closeByPointer() {
+        if (this.value() === '') {
+            return;
+        }
+        this.menuCtx.setLastCloseReason('pointerDownOutside');
+        this.closeOpen();
+    }
+    /**
+     * Attach the bar's hover-keepalive listeners to the mounted multiplexed
+     * content element so travelling from a trigger into its portaled menu keeps
+     * the open chain alive. Called by {@link MenubarMenuContext} on content
+     * registration.
+     */
+    attachContentPointer(el) {
+        this.detachContentPointer();
+        const onEnter = (event) => {
+            if (event.pointerType !== '' && event.pointerType !== 'mouse') {
+                return;
+            }
+            this.#closeAction.cancel();
+        };
+        const onLeave = (event) => {
+            if (event.pointerType !== '' && event.pointerType !== 'mouse') {
+                return;
+            }
+            this.#scheduleCloseByPointer();
+        };
+        el.addEventListener('pointerenter', onEnter);
+        el.addEventListener('pointerleave', onLeave);
+        this.#detachContentPointerFn = () => {
+            el.removeEventListener('pointerenter', onEnter);
+            el.removeEventListener('pointerleave', onLeave);
+        };
+    }
+    /** Detach the bar's hover-keepalive listeners. Called by {@link MenubarMenuContext}. */
+    detachContentPointer() {
+        this.#detachContentPointerFn?.();
+        this.#detachContentPointerFn = null;
+    }
+    handleTriggerTypeahead(event) {
+        if (!this.#triggerTypeahead.handle(event)) {
+            return;
+        }
+        const buffer = this.#triggerTypeahead.buffer().toLowerCase();
+        if (!buffer) {
+            return;
+        }
+        const items = this.#triggerCollection.items();
+        const match = items.find((t) => {
+            if (t.disabled()) {
+                return false;
+            }
+            const text = t.host.textContent ?? '';
+            return text.trim().toLowerCase().startsWith(buffer);
+        });
+        match?.host.focus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForMenubar, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: ForMenubar, isStandalone: true, selector: "[forMenubar]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, _dirInput: { classPropertyName: "_dirInput", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null }, loop: { classPropertyName: "loop", publicName: "loop", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, closeDelay: { classPropertyName: "closeDelay", publicName: "closeDelay", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { attributes: { "role": "menubar" }, listeners: { "pointerenter": "cancelPendingClose()", "pointermove": "cancelPendingClose()", "pointerleave": "onBarPointerLeave($event)" }, properties: { "attr.aria-orientation": "orientation()", "attr.aria-label": "ariaLabel() || null", "attr.aria-disabled": "disabled() ? \"true\" : null", "attr.data-state": "value() === \"\" ? \"closed\" : \"open\"", "attr.data-orientation": "orientation()", "attr.data-disabled": "disabled() ? \"\" : null", "attr.dir": "dir()" } }, providers: [
+            { provide: FOR_MENUBAR_CONTEXT, useExisting: ForMenubar },
+            {
+                provide: FOR_MENU_CONTEXT,
+                useFactory: (m) => m.menuCtx,
+                deps: [ForMenubar],
+            },
+        ], exportAs: ["forMenubar"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForMenubar, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forMenubar]',
+                    exportAs: 'forMenubar',
+                    host: {
+                        role: 'menubar',
+                        '[attr.aria-orientation]': 'orientation()',
+                        '[attr.aria-label]': 'ariaLabel() || null',
+                        '[attr.aria-disabled]': 'disabled() ? "true" : null',
+                        '[attr.data-state]': 'value() === "" ? "closed" : "open"',
+                        '[attr.data-orientation]': 'orientation()',
+                        '[attr.data-disabled]': 'disabled() ? "" : null',
+                        '[attr.dir]': 'dir()',
+                        '(pointerenter)': 'cancelPendingClose()',
+                        '(pointermove)': 'cancelPendingClose()',
+                        '(pointerleave)': 'onBarPointerLeave($event)',
+                    },
+                    providers: [
+                        { provide: FOR_MENUBAR_CONTEXT, useExisting: ForMenubar },
+                        {
+                            provide: FOR_MENU_CONTEXT,
+                            useFactory: (m) => m.menuCtx,
+                            deps: [ForMenubar],
+                        },
+                    ],
+                }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], _dirInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "dir", required: false }] }], loop: [{ type: i0.Input, args: [{ isSignal: true, alias: "loop", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], closeDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeDelay", required: false }] }] } });
+
+/**
+ * One trigger inside `[forMenubar]`. Apply on a `<button>` so Space / Enter
+ * dispatch native click events that route through `(click)`.
+ *
+ * Wires `role="menuitem"`, `aria-haspopup="menu"`, `aria-expanded`, and
+ * `aria-controls`. Participates in the menubar's roving tabindex (only the
+ * active trigger is tabbable; the rest are `tabindex="-1"`).
+ *
+ * Each trigger registers its per-menu floating-ui inputs (side, align,
+ * sideOffset, …) with the menubar so the multiplexed `[forMenuContent]`
+ * reads the right values when this trigger's menu is the one currently
+ * open.
+ *
+ * Keyboard:
+ * - **Click / Enter / Space** — toggle this trigger's menu (focus first item on open).
+ * - **ArrowDown** — open and focus first item.
+ * - **ArrowUp** — open and focus last item.
+ * - **ArrowLeft / ArrowRight** — move focus across sibling triggers (RTL inverts).
+ * - **Home / End** — jump to first / last enabled trigger.
+ * - **Typeahead** — printable keys focus the first sibling trigger whose label
+ *   starts with the buffered string.
+ *
+ * While some other trigger's menu is open, hovering this trigger opens it
+ * immediately (no delay) — "first open is intentional, subsequent
+ * are hover". Keyboard focus alone never opens a menu.
+ *
+ * Pointer-driven opens (click — detected by the `pointerdown` preceding it —
+ * and hover-after-open) move focus to the menu's first item without
+ * highlighting it; keyboard activation (Enter / Space / ArrowDown / ArrowUp)
+ * highlights the focused item.
+ */
+class ForMenubarTrigger {
+    menubar = injectMenubarContext('ForMenubarTrigger');
+    #host = inject(ElementRef);
+    #idGen = inject(IdGenerator);
+    #pointerActivation = false;
+    /** Identifies this trigger in the menubar's `value` model. */
+    value = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Per-trigger disabled, in addition to the menubar's `disabled`. */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    // -- Floating-ui inputs (forwarded to the multiplexed [forMenuContent]) --
+    /** Anchor side. Default `'bottom'`. */
+    side = input('bottom', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []));
+    /** Alignment along `side`. Default `'start'`. */
+    align = input('start', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
+    /** Gap (px) along the main axis. Default `4`. */
+    sideOffset = input(4, { ...(ngDevMode ? { debugName: "sideOffset" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /** Gap (px) along the cross axis. Default `0`. */
+    alignOffset = input(0, { ...(ngDevMode ? { debugName: "alignOffset" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    avoidCollisions = input(true, { ...(ngDevMode ? { debugName: "avoidCollisions" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    collisionPadding = input(8, { ...(ngDevMode ? { debugName: "collisionPadding" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    arrowPadding = input(0, { ...(ngDevMode ? { debugName: "arrowPadding" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    sticky = input('partial', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sticky" }] : /* istanbul ignore next */ []));
+    hideWhenDetached = input(false, { ...(ngDevMode ? { debugName: "hideWhenDetached" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * When `true` (default), the content is clipped until floating-ui resolves
+     * its first position, preventing a flash at the viewport corner. Set to
+     * `false` so a dramatic `animate.enter` plays from its first frame (the
+     * surface may flash briefly at the unresolved position while positioning
+     * computes).
+     */
+    clipUntilPositioned = input(true, { ...(ngDevMode ? { debugName: "clipUntilPositioned" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Manual `aria-label` on `[forMenuContent]` when the trigger isn't a meaningful name. */
+    ariaLabel = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    triggerId = hostId('for-menubar-trigger');
+    contentId = signal(this.#idGen.next('for-menubar-content'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "contentId" }] : /* istanbul ignore next */ []));
+    effectiveDisabled = computed(() => this.disabled() || this.menubar.disabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveDisabled" }] : /* istanbul ignore next */ []));
+    isOpen = computed(() => this.menubar.value() === this.value(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    tabindex = computed(() => {
+        if (this.effectiveDisabled()) {
+            return -1;
+        }
+        return this.menubar.tabindexFor(this.#host.nativeElement);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tabindex" }] : /* istanbul ignore next */ []));
+    constructor() {
+        const handle = {
+            host: this.#host.nativeElement,
+            value: this.value,
+            disabled: this.effectiveDisabled,
+            triggerId: this.triggerId,
+            contentId: this.contentId,
+            side: this.side,
+            align: this.align,
+            sideOffset: this.sideOffset,
+            alignOffset: this.alignOffset,
+            avoidCollisions: this.avoidCollisions,
+            collisionPadding: this.collisionPadding,
+            arrowPadding: this.arrowPadding,
+            sticky: this.sticky,
+            hideWhenDetached: this.hideWhenDetached,
+            clipUntilPositioned: this.clipUntilPositioned,
+            ariaLabel: this.ariaLabel,
+        };
+        registerHandle(handle, (h) => this.menubar.registerTrigger(h), (h) => this.menubar.unregisterTrigger(h));
+    }
+    onPointerDown() {
+        this.#pointerActivation = true;
+    }
+    onClick() {
+        const modality = this.#pointerActivation ? 'pointer' : 'keyboard';
+        this.#pointerActivation = false;
+        if (this.effectiveDisabled()) {
+            return;
+        }
+        if (this.isOpen()) {
+            this.menubar.closeOpen();
+        }
+        else {
+            this.menubar.openTrigger(this.value(), 'first', modality);
+        }
+    }
+    onKeyDown(event) {
+        this.#pointerActivation = false;
+        if (this.effectiveDisabled()) {
+            return;
+        }
+        // Open / focus-on-open first.
+        if (event.key === 'ArrowDown' || event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            this.menubar.openTrigger(this.value(), 'first');
+            return;
+        }
+        if (event.key === 'ArrowUp') {
+            event.preventDefault();
+            this.menubar.openTrigger(this.value(), 'last');
+            return;
+        }
+        // Trigger-row navigation (cross-axis to the open key, per APG).
+        const action = resolveListNavigation(event, {
+            orientation: this.menubar.orientation(),
+            dir: this.menubar.dir(),
+        });
+        if (action) {
+            event.preventDefault();
+            this.menubar.navigateTriggers(this.#host.nativeElement, action);
+            return;
+        }
+        // Typeahead among sibling triggers.
+        this.menubar.handleTriggerTypeahead(event);
+    }
+    onFocus() {
+        if (this.effectiveDisabled()) {
+            return;
+        }
+        // Roving tab stop follows focus — but focus alone never opens a menu.
+        // Keyboard traversal across triggers (ArrowLeft / ArrowRight, typeahead)
+        // only moves focus; opening is reserved for hover (pointerenter),
+        // click, and the open keys. Cross-menu nav while a menu is open is driven
+        // by the items, not by trigger focus.
+        this.menubar.setFocusedTrigger(this.#host.nativeElement);
+    }
+    onPointerEnter() {
+        if (this.effectiveDisabled()) {
+            return;
+        }
+        this.menubar.pointerEnterTrigger(this.value());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForMenubarTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: ForMenubarTrigger, isStandalone: true, selector: "[forMenubarTrigger]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, sideOffset: { classPropertyName: "sideOffset", publicName: "sideOffset", isSignal: true, isRequired: false, transformFunction: null }, alignOffset: { classPropertyName: "alignOffset", publicName: "alignOffset", isSignal: true, isRequired: false, transformFunction: null }, avoidCollisions: { classPropertyName: "avoidCollisions", publicName: "avoidCollisions", isSignal: true, isRequired: false, transformFunction: null }, collisionPadding: { classPropertyName: "collisionPadding", publicName: "collisionPadding", isSignal: true, isRequired: false, transformFunction: null }, arrowPadding: { classPropertyName: "arrowPadding", publicName: "arrowPadding", isSignal: true, isRequired: false, transformFunction: null }, sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null }, hideWhenDetached: { classPropertyName: "hideWhenDetached", publicName: "hideWhenDetached", isSignal: true, isRequired: false, transformFunction: null }, clipUntilPositioned: { classPropertyName: "clipUntilPositioned", publicName: "clipUntilPositioned", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "menuitem", "type": "button" }, listeners: { "pointerdown": "onPointerDown()", "click": "onClick()", "keydown": "onKeyDown($event)", "focus": "onFocus()", "pointerenter": "onPointerEnter()" }, properties: { "id": "triggerId()", "attr.tabindex": "tabindex()", "attr.aria-haspopup": "\"menu\"", "attr.aria-expanded": "isOpen() ? \"true\" : \"false\"", "attr.aria-controls": "isOpen() ? contentId() : null", "attr.aria-disabled": "effectiveDisabled() ? \"true\" : null", "attr.data-state": "isOpen() ? \"open\" : \"closed\"", "attr.data-disabled": "effectiveDisabled() ? \"\" : null", "attr.data-orientation": "menubar.orientation()" } }, exportAs: ["forMenubarTrigger"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForMenubarTrigger, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forMenubarTrigger]',
+                    exportAs: 'forMenubarTrigger',
+                    host: {
+                        role: 'menuitem',
+                        type: 'button',
+                        '[id]': 'triggerId()',
+                        '[attr.tabindex]': 'tabindex()',
+                        '[attr.aria-haspopup]': '"menu"',
+                        '[attr.aria-expanded]': 'isOpen() ? "true" : "false"',
+                        '[attr.aria-controls]': 'isOpen() ? contentId() : null',
+                        '[attr.aria-disabled]': 'effectiveDisabled() ? "true" : null',
+                        '[attr.data-state]': 'isOpen() ? "open" : "closed"',
+                        '[attr.data-disabled]': 'effectiveDisabled() ? "" : null',
+                        '[attr.data-orientation]': 'menubar.orientation()',
+                        '(pointerdown)': 'onPointerDown()',
+                        '(click)': 'onClick()',
+                        '(keydown)': 'onKeyDown($event)',
+                        '(focus)': 'onFocus()',
+                        '(pointerenter)': 'onPointerEnter()',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], sideOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "sideOffset", required: false }] }], alignOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignOffset", required: false }] }], avoidCollisions: [{ type: i0.Input, args: [{ isSignal: true, alias: "avoidCollisions", required: false }] }], collisionPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "collisionPadding", required: false }] }], arrowPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "arrowPadding", required: false }] }], sticky: [{ type: i0.Input, args: [{ isSignal: true, alias: "sticky", required: false }] }], hideWhenDetached: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideWhenDetached", required: false }] }], clipUntilPositioned: [{ type: i0.Input, args: [{ isSignal: true, alias: "clipUntilPositioned", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { FOR_MENUBAR_CONTEXT, FOR_MENUBAR_DEFAULTS, ForMenubar, ForMenubarTrigger, provideForMenubarDefaults };
+//# sourceMappingURL=forty-cdk-menubar.mjs.map