forty-cdk 0.2.0 → 0.3.0

package/fesm2022/forty-cdk-menu.mjs

@@ -0,0 +1,1439 @@
+import * as i0 from '@angular/core';
+import { inject, ElementRef, Directive, input, booleanAttribute, computed, signal, output, InjectionToken, model, PLATFORM_ID, numberAttribute, DestroyRef } from '@angular/core';
+import { injectMenuContext, registerHandle, injectOverlayShell, emitVetoableEvent, resolveListNavigation, createVetoableEvent, registerA11yName, createDefaults, MenuOverlayHost, MENU_POSITIONING_DEFAULTS, createMenuOverlay, createDebouncedAction, FOR_MENU_CONTEXT, resolveGraceSide, buildSubmenuGracePolygon, attachPointerGrace } from 'forty-cdk/core';
+export { FOR_MENU_CONTEXT } from 'forty-cdk/core';
+import { isPlatformBrowser } from '@angular/common';
+
+/**
+ * The menu surface. Carries `role="menu"`, is portaled to `document.body`,
+ * and is positioned by `@floating-ui/dom` against the registered anchor —
+ * the trigger button for `[forDropdownMenu]`, or a virtual pointer element
+ * for `[forContextMenu]`.
+ *
+ * The directive does not manage DOM presence — wrap with
+ * `@if (open())` so `animate.enter` / `animate.leave` fire on the natural
+ * mount cycle. While mounted, a `DismissableLayer` activates (Escape,
+ * pointer-down outside, focus outside) and initial focus is sent to the
+ * first or last menu item per the trigger's hint.
+ *
+ * The trigger element is exempt from the layer's outside-pointer checks,
+ * so clicking the trigger again routes through its own toggle handler
+ * without spuriously closing.
+ *
+ * The lifecycle (positioner + dismissable layer + initial focus + return
+ * focus) is owned by the shared `injectOverlayShell` helper.
+ *
+ * Navigation is vertical-only (Up / Down between items, per the APG Menu
+ * pattern), so the surface reflects `aria-orientation="vertical"` explicitly.
+ * Horizontal menus are out of scope; a horizontal *bar* of menus is modelled
+ * by `[forMenubar]` instead.
+ */
+class ForMenuContent {
+    ctx = injectMenuContext('ForMenuContent');
+    #host = inject(ElementRef);
+    constructor() {
+        registerHandle(this.#host.nativeElement, (el) => this.ctx.registerContent(el), (el) => this.ctx.unregisterContent(el));
+        injectOverlayShell({
+            positioner: {
+                kind: 'floating',
+                reference: this.ctx.anchor,
+                open: this.ctx.open,
+                side: this.ctx.side,
+                align: this.ctx.align,
+                sideOffset: this.ctx.sideOffset,
+                alignOffset: this.ctx.alignOffset,
+                avoidCollisions: this.ctx.avoidCollisions,
+                collisionPadding: this.ctx.collisionPadding,
+                arrowPadding: this.ctx.arrowPadding,
+                sticky: this.ctx.sticky,
+                hideWhenDetached: this.ctx.hideWhenDetached,
+                clipUntilPositioned: this.ctx.clipUntilPositioned,
+            },
+            dismiss: {
+                dismissible: this.ctx.dismissible,
+                requestClose: (reason) => this.ctx.requestClose(reason),
+                emitEscapeKeyDown: (event) => this.ctx.emitEscapeKeyDown(event),
+                emitPointerDownOutside: (veto) => this.ctx.emitPointerDownOutside(veto),
+                emitFocusOutside: (veto) => this.ctx.emitFocusOutside(veto),
+                emitInteractOutside: (veto) => this.ctx.emitInteractOutside(veto),
+                // DropdownMenu's trigger is exempt (its own click handler toggles —
+                // without exemption pointer-down-outside would race and double-close).
+                // ContextMenu exempts nothing so left-clicks on the region close the
+                // menu like any other outside click.
+                exemptElements: () => this.ctx.dismissableExemptions(),
+            },
+            // Primitive-owned move: focusFirstEnabledItem / focusLastEnabledItem
+            // each return `true` on success. The shell falls back to focusing the
+            // host element on miss, which mirrors the previous hand-rolled code.
+            initialFocus: {
+                move: () => this.ctx.initialFocus() === 'last'
+                    ? this.ctx.focusLastEnabledItem()
+                    : this.ctx.focusFirstEnabledItem(),
+                veto: () => this.ctx.emitAutoFocusOnOpen(),
+            },
+            returnFocus: {
+                enabled: this.ctx.returnFocus,
+                target: () => this.ctx.trigger(),
+                // `(autoFocusOnClose)` lets the consumer veto the return-focus.
+                veto: () => this.ctx.emitAutoFocusOnClose(),
+                // Skip on `'tab'` closes — Tab already moved focus to the trigger
+                // and let the browser advance from there; re-focusing would steal
+                // it back.
+                skip: () => this.ctx.lastCloseReason() === 'tab',
+            },
+        });
+    }
+    /**
+     * Hover-follows-pointer: the pointer left the menu surface, so drop the
+     * highlight from whichever item the pointer was over. Focus is left where it
+     * is (anchored on the item for keyboard navigation); only `data-highlighted`
+     * clears. Gated to mouse — touch / pen never hover.
+     */
+    onPointerLeave(event) {
+        if (event.pointerType !== '' && event.pointerType !== 'mouse') {
+            return;
+        }
+        this.ctx.clearItemHighlights();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForMenuContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: ForMenuContent, isStandalone: true, selector: "[forMenuContent], [forMenuSubContent]", host: { attributes: { "role": "menu", "tabindex": "-1" }, listeners: { "pointerleave": "onPointerLeave($event)" }, properties: { "id": "ctx.contentId()", "attr.aria-labelledby": "ctx.ariaLabel() ? null : ctx.triggerId()", "attr.aria-label": "ctx.ariaLabel() || null", "attr.aria-orientation": "\"vertical\"", "attr.data-state": "ctx.open() ? \"open\" : \"closed\"" } }, exportAs: ["forMenuContent"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForMenuContent, decorators: [{
+            type: Directive,
+            args: [{
+                    // The same directive serves submenu content too — the behavior is identical
+                    // (the injected ctx is the [forMenuSub] in that case). The extra selector is
+                    // an alias for template readability.
+                    selector: '[forMenuContent], [forMenuSubContent]',
+                    exportAs: 'forMenuContent',
+                    host: {
+                        role: 'menu',
+                        '[id]': 'ctx.contentId()',
+                        '[attr.aria-labelledby]': 'ctx.ariaLabel() ? null : ctx.triggerId()',
+                        '[attr.aria-label]': 'ctx.ariaLabel() || null',
+                        '[attr.aria-orientation]': '"vertical"',
+                        '[attr.data-state]': 'ctx.open() ? "open" : "closed"',
+                        tabindex: '-1',
+                        '(pointerleave)': 'onPointerLeave($event)',
+                    },
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Handle ArrowLeft / ArrowRight on a menu item (regular, checkbox, radio,
+ * or submenu trigger when its open-key is the orthogonal arrow). Returns
+ * `true` when the event was consumed (caller should stop further handling).
+ *
+ * Routing precedence:
+ * - Inside a submenu (`ctx.parentMenu != null`): the close-submenu key
+ *   (ArrowLeft in LTR, ArrowRight in RTL) closes the submenu. The other
+ *   horizontal arrow propagates to the menubar (if any) only after the
+ *   submenu chain has been collapsed — so this helper returns `false` for
+ *   it and the caller can let it bubble.
+ * - At the top of a menubar (`ctx.parentMenu == null && ctx.menubar`):
+ *   both arrows switch to the previous / next sibling menu.
+ * - Otherwise: not handled.
+ */
+function handleMenuHorizontalArrow(event, ctx) {
+    if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight') {
+        return false;
+    }
+    const isRtl = ctx.dir() === 'rtl';
+    if (ctx.parentMenu) {
+        const closeKey = isRtl ? 'ArrowRight' : 'ArrowLeft';
+        if (event.key === closeKey) {
+            event.preventDefault();
+            ctx.closeMenu('escape');
+            return true;
+        }
+        return false;
+    }
+    const menubar = ctx.menubar;
+    if (!menubar) {
+        return false;
+    }
+    const isPrev = (event.key === 'ArrowLeft' && !isRtl) || (event.key === 'ArrowRight' && isRtl);
+    event.preventDefault();
+    menubar.switchToSibling(isPrev ? 'prev' : 'next');
+    return true;
+}
+
+/**
+ * Handle Tab from inside a menu (regular item, checkbox / radio item, or a
+ * submenu trigger). Per WAI-ARIA APG, Tab moves focus out of the menu rather
+ * than back to the trigger.
+ *
+ * Focus is moved synchronously to the outermost menu's trigger — the only
+ * element guaranteed to survive in the DOM once the whole open chain unmounts
+ * — so the browser's own Tab default advances from there to the next (or
+ * previous, with Shift) focusable. The event is NOT `preventDefault`-ed for
+ * that reason. `closeMenu('tab')` then collapses the chain; every
+ * `[forMenuContent]` skips its return-focus on `'tab'` (see
+ * `ForMenuContext.lastCloseReason`) so none of them steal focus back from
+ * wherever the browser advanced it.
+ *
+ * Pass the context that should drive the close: the item's own `ctx` for
+ * menu items, or the submenu trigger's `parentMenu` (the menu the trigger
+ * lives in).
+ */
+function handleMenuTabOut(ctx) {
+    let root = ctx;
+    while (root.parentMenu) {
+        root = root.parentMenu;
+    }
+    root.trigger()?.focus();
+    ctx.closeMenu('tab');
+}
+
+/**
+ * A single action inside `[forMenuContent]`. Apply on a `<button>` so
+ * Space / Enter activation come from native button semantics.
+ *
+ * Activation emits `(activate)` and then closes the menu. To keep the menu
+ * open after activation (e.g. the action toggled something the user
+ * wants to refine), call `event.preventDefault()` on the emitted event.
+ *
+ * Disabled items remain in the tab/focus rotation (per APG) so screen
+ * readers can announce them — `aria-disabled="true"` rather than the
+ * native `disabled` attribute.
+ */
+class ForMenuItem {
+    ctx = injectMenuContext('ForMenuItem');
+    #host = inject(ElementRef);
+    /** Per-item disabled, in addition to the menu's `disabled`. */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Override the string used for typeahead matching. Defaults to `''`,
+     * which falls back to the item's `textContent`. Set this when the item
+     * DOM contains icons, kbd hints, or other text that shouldn't bleed
+     * into the match — e.g. `<button forMenuItem textValue="New file">…</button>`
+     * for an item rendered as `New file ⌘N`.
+     */
+    textValue = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "textValue" }] : /* istanbul ignore next */ []));
+    effectiveDisabled = computed(() => this.disabled() || this.ctx.disabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveDisabled" }] : /* istanbul ignore next */ []));
+    #highlighted = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#highlighted" }] : /* istanbul ignore next */ []));
+    /**
+     * True while this item is the active keyboard candidate or hovered by the
+     * pointer. Set on keyboard-driven focus and on `pointermove` (hover follows
+     * the pointer), cleared on `blur` and when the pointer leaves the surface.
+     * The programmatic initial focus of a pointer-driven open lands without a
+     * highlight until the pointer moves onto the item or keyboard navigation
+     * begins. Reflected as `data-highlighted`.
+     */
+    highlighted = this.#highlighted.asReadonly();
+    #suppressNextFocusHighlight = false;
+    /**
+     * Fires on click / Enter / Space activation. Call `preventDefault()`
+     * on the emitted veto to keep the menu open after activation.
+     */
+    activate = output();
+    constructor() {
+        const handle = {
+            host: this.#host.nativeElement,
+            disabled: this.effectiveDisabled,
+            textValue: this.textValue,
+            suppressHighlightOnNextFocus: () => {
+                this.#suppressNextFocusHighlight = true;
+            },
+            clearHighlight: () => {
+                this.#highlighted.set(false);
+            },
+        };
+        registerHandle(handle, (h) => this.ctx.registerItem(h), (h) => this.ctx.unregisterItem(h));
+    }
+    onClick() {
+        if (this.effectiveDisabled()) {
+            return;
+        }
+        if (!emitVetoableEvent(this.activate)) {
+            this.ctx.closeMenu('select');
+        }
+    }
+    onFocus() {
+        if (this.#suppressNextFocusHighlight) {
+            this.#suppressNextFocusHighlight = false;
+            return;
+        }
+        this.#highlighted.set(true);
+    }
+    onBlur() {
+        this.#suppressNextFocusHighlight = false;
+        this.#highlighted.set(false);
+    }
+    onPointerMove(event) {
+        if (event.pointerType !== '' && event.pointerType !== 'mouse') {
+            return;
+        }
+        if (this.effectiveDisabled()) {
+            return;
+        }
+        const host = this.#host.nativeElement;
+        if (host.ownerDocument.activeElement !== host) {
+            host.focus({ preventScroll: true });
+        }
+        this.#highlighted.set(true);
+    }
+    onKeyDown(event) {
+        if (this.effectiveDisabled()) {
+            return;
+        }
+        // ArrowLeft / ArrowRight: inside a submenu, close-submenu key collapses
+        // one level; in the top menu of a menubar, both arrows switch to the
+        // previous / next sibling menu.
+        if (handleMenuHorizontalArrow(event, this.ctx)) {
+            return;
+        }
+        const action = resolveListNavigation(event, { orientation: 'vertical' });
+        if (action) {
+            event.preventDefault();
+            this.ctx.navigate(this.#host.nativeElement, action);
+            return;
+        }
+        if (event.key === 'Tab') {
+            handleMenuTabOut(this.ctx);
+            return;
+        }
+        this.ctx.handleTypeahead(event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForMenuItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: ForMenuItem, isStandalone: true, selector: "[forMenuItem]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, textValue: { classPropertyName: "textValue", publicName: "textValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activate: "activate" }, host: { attributes: { "role": "menuitem", "type": "button", "tabindex": "-1" }, listeners: { "click": "onClick()", "keydown": "onKeyDown($event)", "focus": "onFocus()", "blur": "onBlur()", "pointermove": "onPointerMove($event)" }, properties: { "attr.aria-disabled": "effectiveDisabled() ? \"true\" : null", "attr.data-disabled": "effectiveDisabled() ? \"\" : null", "attr.data-highlighted": "highlighted() ? \"\" : null" } }, exportAs: ["forMenuItem"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForMenuItem, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forMenuItem]',
+                    exportAs: 'forMenuItem',
+                    host: {
+                        role: 'menuitem',
+                        type: 'button',
+                        tabindex: '-1',
+                        '[attr.aria-disabled]': 'effectiveDisabled() ? "true" : null',
+                        '[attr.data-disabled]': 'effectiveDisabled() ? "" : null',
+                        '[attr.data-highlighted]': 'highlighted() ? "" : null',
+                        '(click)': 'onClick()',
+                        '(keydown)': 'onKeyDown($event)',
+                        '(focus)': 'onFocus()',
+                        '(blur)': 'onBlur()',
+                        '(pointermove)': 'onPointerMove($event)',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], textValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "textValue", required: false }] }], activate: [{ type: i0.Output, args: ["activate"] }] } });
+
+/**
+ * Injection key the `[forMenuItemIndicator]` uses to resolve a parent
+ * checkbox item, decoupled from the concrete `ForMenuCheckboxItem` class.
+ * `ForMenuCheckboxItem` provides itself under this token, so a design system
+ * wrapping the item by subclassing re-points it at the subclass with a single
+ * provider (`{ provide: FOR_MENU_CHECKBOX_ITEM, useExisting: MtxMenuCheckboxItem }`)
+ * and the indicator keeps resolving — see `docs/wrapping-form-primitives.md`.
+ */
+const FOR_MENU_CHECKBOX_ITEM = new InjectionToken('FOR_MENU_CHECKBOX_ITEM');
+/**
+ * Tri-state-free checkbox item. Click and Enter toggle `checked`, emit
+ * `(activate)`, and close the menu — `event.preventDefault()` on the emitted
+ * event keeps the menu open. Per APG, **Space** toggles `checked` and
+ * emits `(activate)` without closing the menu, so users can flip several
+ * options in one open without consumer glue.
+ */
+class ForMenuCheckboxItem {
+    ctx = injectMenuContext('ForMenuCheckboxItem');
+    #host = inject(ElementRef);
+    /** Two-way bindable. */
+    checked = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Override the string used for typeahead matching. Defaults to `''`,
+     * which falls back to the item's `textContent`. See `[forMenuItem]`
+     * for the rationale.
+     */
+    textValue = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "textValue" }] : /* istanbul ignore next */ []));
+    effectiveDisabled = computed(() => this.disabled() || this.ctx.disabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveDisabled" }] : /* istanbul ignore next */ []));
+    #highlighted = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#highlighted" }] : /* istanbul ignore next */ []));
+    /**
+     * True while this item is the active keyboard candidate or hovered by the
+     * pointer. Set on keyboard-driven focus and on `pointermove` (hover follows
+     * the pointer), cleared on `blur` and when the pointer leaves the surface.
+     * The programmatic initial focus of a pointer-driven open lands without a
+     * highlight until the pointer moves onto the item or keyboard navigation
+     * begins. Reflected as `data-highlighted`.
+     */
+    highlighted = this.#highlighted.asReadonly();
+    #suppressNextFocusHighlight = false;
+    /**
+     * Fires on click / Enter / Space activation. Call `preventDefault()`
+     * on the emitted veto to keep the menu open after activation.
+     */
+    activate = output();
+    constructor() {
+        const handle = {
+            host: this.#host.nativeElement,
+            disabled: this.effectiveDisabled,
+            textValue: this.textValue,
+            suppressHighlightOnNextFocus: () => {
+                this.#suppressNextFocusHighlight = true;
+            },
+            clearHighlight: () => {
+                this.#highlighted.set(false);
+            },
+        };
+        registerHandle(handle, (h) => this.ctx.registerItem(h), (h) => this.ctx.unregisterItem(h));
+    }
+    onClick() {
+        if (this.effectiveDisabled()) {
+            return;
+        }
+        this.checked.update((v) => !v);
+        if (!emitVetoableEvent(this.activate)) {
+            this.ctx.closeMenu('select');
+        }
+    }
+    onFocus() {
+        if (this.#suppressNextFocusHighlight) {
+            this.#suppressNextFocusHighlight = false;
+            return;
+        }
+        this.#highlighted.set(true);
+    }
+    onBlur() {
+        this.#suppressNextFocusHighlight = false;
+        this.#highlighted.set(false);
+    }
+    onPointerMove(event) {
+        if (event.pointerType !== '' && event.pointerType !== 'mouse') {
+            return;
+        }
+        if (this.effectiveDisabled()) {
+            return;
+        }
+        const host = this.#host.nativeElement;
+        if (host.ownerDocument.activeElement !== host) {
+            host.focus({ preventScroll: true });
+        }
+        this.#highlighted.set(true);
+    }
+    onKeyDown(event) {
+        if (this.effectiveDisabled()) {
+            return;
+        }
+        if (handleMenuHorizontalArrow(event, this.ctx)) {
+            return;
+        }
+        // APG menubar guidance: Space toggles checked without closing the menu
+        // (Enter and click still close via native button activation). preventDefault
+        // here suppresses the browser-synthesized click so the menu stays open.
+        if (event.key === ' ') {
+            event.preventDefault();
+            this.checked.update((v) => !v);
+            this.activate.emit(createVetoableEvent());
+            return;
+        }
+        const action = resolveListNavigation(event, { orientation: 'vertical' });
+        if (action) {
+            event.preventDefault();
+            this.ctx.navigate(this.#host.nativeElement, action);
+            return;
+        }
+        if (event.key === 'Tab') {
+            handleMenuTabOut(this.ctx);
+            return;
+        }
+        this.ctx.handleTypeahead(event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForMenuCheckboxItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: ForMenuCheckboxItem, isStandalone: true, selector: "[forMenuCheckboxItem]", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, textValue: { classPropertyName: "textValue", publicName: "textValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", activate: "activate" }, host: { attributes: { "role": "menuitemcheckbox", "type": "button", "tabindex": "-1" }, listeners: { "click": "onClick()", "keydown": "onKeyDown($event)", "focus": "onFocus()", "blur": "onBlur()", "pointermove": "onPointerMove($event)" }, properties: { "attr.aria-checked": "checked() ? \"true\" : \"false\"", "attr.aria-disabled": "effectiveDisabled() ? \"true\" : null", "attr.data-state": "checked() ? \"checked\" : \"unchecked\"", "attr.data-disabled": "effectiveDisabled() ? \"\" : null", "attr.data-highlighted": "highlighted() ? \"\" : null" } }, providers: [{ provide: FOR_MENU_CHECKBOX_ITEM, useExisting: ForMenuCheckboxItem }], exportAs: ["forMenuCheckboxItem"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForMenuCheckboxItem, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forMenuCheckboxItem]',
+                    exportAs: 'forMenuCheckboxItem',
+                    providers: [{ provide: FOR_MENU_CHECKBOX_ITEM, useExisting: ForMenuCheckboxItem }],
+                    host: {
+                        role: 'menuitemcheckbox',
+                        type: 'button',
+                        tabindex: '-1',
+                        '[attr.aria-checked]': 'checked() ? "true" : "false"',
+                        '[attr.aria-disabled]': 'effectiveDisabled() ? "true" : null',
+                        '[attr.data-state]': 'checked() ? "checked" : "unchecked"',
+                        '[attr.data-disabled]': 'effectiveDisabled() ? "" : null',
+                        '[attr.data-highlighted]': 'highlighted() ? "" : null',
+                        '(click)': 'onClick()',
+                        '(keydown)': 'onKeyDown($event)',
+                        '(focus)': 'onFocus()',
+                        '(blur)': 'onBlur()',
+                        '(pointermove)': 'onPointerMove($event)',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], textValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "textValue", required: false }] }], activate: [{ type: i0.Output, args: ["activate"] }] } });
+
+const FOR_MENU_RADIO_GROUP_CONTEXT = new InjectionToken('FOR_MENU_RADIO_GROUP_CONTEXT');
+function injectMenuRadioGroupContext(piece) {
+    const ctx = inject(FOR_MENU_RADIO_GROUP_CONTEXT, { optional: true });
+    if (!ctx) {
+        throw new Error(`[forty-cdk/menu] ${piece} must be used inside a [forMenuRadioGroup] element.`);
+    }
+    return ctx;
+}
+
+/**
+ * Container for a set of `[forMenuRadioItem]` elements. Acts as a
+ * `role="group"` plus a coordination point for the shared `value`.
+ */
+class ForMenuRadioGroup {
+    /**
+     * Two-way bindable. The selected radio item's `value`. The `model()`
+     * change emitter (`(valueChange)`) fires only on internal selection.
+     */
+    value = model('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    isSelected(v) {
+        return this.value() === v;
+    }
+    select(v) {
+        this.value.set(v);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForMenuRadioGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: ForMenuRadioGroup, isStandalone: true, selector: "[forMenuRadioGroup]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { attributes: { "role": "group" } }, providers: [{ provide: FOR_MENU_RADIO_GROUP_CONTEXT, useExisting: ForMenuRadioGroup }], exportAs: ["forMenuRadioGroup"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForMenuRadioGroup, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forMenuRadioGroup]',
+                    exportAs: 'forMenuRadioGroup',
+                    host: {
+                        role: 'group',
+                    },
+                    providers: [{ provide: FOR_MENU_RADIO_GROUP_CONTEXT, useExisting: ForMenuRadioGroup }],
+                }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
+
+/**
+ * Injection key the `[forMenuItemIndicator]` uses to resolve a parent radio
+ * item, decoupled from the concrete `ForMenuRadioItem` class.
+ * `ForMenuRadioItem` provides itself under this token, so a design system
+ * wrapping the item by subclassing re-points it at the subclass with a single
+ * provider (`{ provide: FOR_MENU_RADIO_ITEM, useExisting: MtxMenuRadioItem }`)
+ * and the indicator keeps resolving — see `docs/wrapping-form-primitives.md`.
+ */
+const FOR_MENU_RADIO_ITEM = new InjectionToken('FOR_MENU_RADIO_ITEM');
+/**
+ * One radio option inside `[forMenuRadioGroup]`. Click and Enter set the
+ * group's `value` to this item's `value`, emit `(activate)`, and close the
+ * menu — call `event.preventDefault()` on the emitted event to keep the
+ * menu open. Per APG, **Space** sets the value and emits `(activate)`
+ * without closing the menu.
+ */
+class ForMenuRadioItem {
+    menu = injectMenuContext('ForMenuRadioItem');
+    group = injectMenuRadioGroupContext('ForMenuRadioItem');
+    #host = inject(ElementRef);
+    /** Identifier added to / read from the radio group's `value`. Required. */
+    value = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Override the string used for typeahead matching. Defaults to `''`,
+     * which falls back to the item's `textContent`. See `[forMenuItem]`
+     * for the rationale.
+     */
+    textValue = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "textValue" }] : /* istanbul ignore next */ []));
+    checked = computed(() => this.group.isSelected(this.value()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
+    effectiveDisabled = computed(() => this.disabled() || this.menu.disabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveDisabled" }] : /* istanbul ignore next */ []));
+    #highlighted = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#highlighted" }] : /* istanbul ignore next */ []));
+    /**
+     * True while this item is the active keyboard candidate or hovered by the
+     * pointer. Set on keyboard-driven focus and on `pointermove` (hover follows
+     * the pointer), cleared on `blur` and when the pointer leaves the surface.
+     * The programmatic initial focus of a pointer-driven open lands without a
+     * highlight until the pointer moves onto the item or keyboard navigation
+     * begins. Reflected as `data-highlighted`.
+     */
+    highlighted = this.#highlighted.asReadonly();
+    #suppressNextFocusHighlight = false;
+    /**
+     * Fires on click / Enter / Space activation. Call `preventDefault()`
+     * on the emitted veto to keep the menu open after activation.
+     */
+    activate = output();
+    constructor() {
+        const handle = {
+            host: this.#host.nativeElement,
+            disabled: this.effectiveDisabled,
+            textValue: this.textValue,
+            suppressHighlightOnNextFocus: () => {
+                this.#suppressNextFocusHighlight = true;
+            },
+            clearHighlight: () => {
+                this.#highlighted.set(false);
+            },
+        };
+        registerHandle(handle, (h) => this.menu.registerItem(h), (h) => this.menu.unregisterItem(h));
+    }
+    onClick() {
+        if (this.effectiveDisabled()) {
+            return;
+        }
+        this.group.select(this.value());
+        if (!emitVetoableEvent(this.activate)) {
+            this.menu.closeMenu('select');
+        }
+    }
+    onFocus() {
+        if (this.#suppressNextFocusHighlight) {
+            this.#suppressNextFocusHighlight = false;
+            return;
+        }
+        this.#highlighted.set(true);
+    }
+    onBlur() {
+        this.#suppressNextFocusHighlight = false;
+        this.#highlighted.set(false);
+    }
+    onPointerMove(event) {
+        if (event.pointerType !== '' && event.pointerType !== 'mouse') {
+            return;
+        }
+        if (this.effectiveDisabled()) {
+            return;
+        }
+        const host = this.#host.nativeElement;
+        if (host.ownerDocument.activeElement !== host) {
+            host.focus({ preventScroll: true });
+        }
+        this.#highlighted.set(true);
+    }
+    onKeyDown(event) {
+        if (this.effectiveDisabled()) {
+            return;
+        }
+        if (handleMenuHorizontalArrow(event, this.menu)) {
+            return;
+        }
+        // APG menubar guidance: Space sets the group value without closing the
+        // menu (Enter and click still close via native button activation).
+        // preventDefault here suppresses the browser-synthesized click.
+        if (event.key === ' ') {
+            event.preventDefault();
+            this.group.select(this.value());
+            this.activate.emit(createVetoableEvent());
+            return;
+        }
+        const action = resolveListNavigation(event, { orientation: 'vertical' });
+        if (action) {
+            event.preventDefault();
+            this.menu.navigate(this.#host.nativeElement, action);
+            return;
+        }
+        if (event.key === 'Tab') {
+            handleMenuTabOut(this.menu);
+            return;
+        }
+        this.menu.handleTypeahead(event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForMenuRadioItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: ForMenuRadioItem, isStandalone: true, selector: "[forMenuRadioItem]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, textValue: { classPropertyName: "textValue", publicName: "textValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activate: "activate" }, host: { attributes: { "role": "menuitemradio", "type": "button", "tabindex": "-1" }, listeners: { "click": "onClick()", "keydown": "onKeyDown($event)", "focus": "onFocus()", "blur": "onBlur()", "pointermove": "onPointerMove($event)" }, properties: { "attr.aria-checked": "checked() ? \"true\" : \"false\"", "attr.aria-disabled": "effectiveDisabled() ? \"true\" : null", "attr.data-state": "checked() ? \"checked\" : \"unchecked\"", "attr.data-disabled": "effectiveDisabled() ? \"\" : null", "attr.data-highlighted": "highlighted() ? \"\" : null" } }, providers: [{ provide: FOR_MENU_RADIO_ITEM, useExisting: ForMenuRadioItem }], exportAs: ["forMenuRadioItem"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForMenuRadioItem, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forMenuRadioItem]',
+                    exportAs: 'forMenuRadioItem',
+                    providers: [{ provide: FOR_MENU_RADIO_ITEM, useExisting: ForMenuRadioItem }],
+                    host: {
+                        role: 'menuitemradio',
+                        type: 'button',
+                        tabindex: '-1',
+                        '[attr.aria-checked]': 'checked() ? "true" : "false"',
+                        '[attr.aria-disabled]': 'effectiveDisabled() ? "true" : null',
+                        '[attr.data-state]': 'checked() ? "checked" : "unchecked"',
+                        '[attr.data-disabled]': 'effectiveDisabled() ? "" : null',
+                        '[attr.data-highlighted]': 'highlighted() ? "" : null',
+                        '(click)': 'onClick()',
+                        '(keydown)': 'onKeyDown($event)',
+                        '(focus)': 'onFocus()',
+                        '(blur)': 'onBlur()',
+                        '(pointermove)': 'onPointerMove($event)',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], textValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "textValue", required: false }] }], activate: [{ type: i0.Output, args: ["activate"] }] } });
+
+/**
+ * Visibility helper inside `[forMenuCheckboxItem]` or `[forMenuRadioItem]`.
+ * The directive flips a `[hidden]` host binding so the consumer can keep
+ * the checkmark / dot inline without extra `@if` glue:
+ *
+ * ```html
+ * <button forMenuCheckboxItem [(checked)]="bold">
+ *   <span forMenuItemIndicator>✓</span>
+ *   Bold
+ * </button>
+ *
+ * <div forMenuRadioGroup [(value)]="alignment">
+ *   <button forMenuRadioItem value="left">
+ *     <span forMenuItemIndicator>•</span>
+ *     Left
+ *   </button>
+ * </div>
+ * ```
+ *
+ * Reflects the parent item's `data-state` (`"checked" | "unchecked"`) so
+ * the consumer can also style it from CSS. Set `[forceMount]` to keep the
+ * indicator in the DOM regardless of state — useful when wrapping
+ * `animate.leave` for an exit animation, or when the consumer styles the
+ * indicator via `data-state` instead of presence.
+ *
+ * Visibility while unchecked is enforced with an inline `display: none`
+ * (which beats any author `display` rule a consumer applies via a class) in
+ * addition to the `hidden` attribute that removes it from the a11y tree.
+ */
+class ForMenuItemIndicator {
+    #checkbox = inject(FOR_MENU_CHECKBOX_ITEM, { optional: true });
+    #radio = inject(FOR_MENU_RADIO_ITEM, { optional: true });
+    checked = computed(() => {
+        if (this.#checkbox) {
+            return this.#checkbox.checked();
+        }
+        if (this.#radio) {
+            return this.#radio.checked();
+        }
+        return false;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
+    /** Keep the indicator mounted even when the parent item is unchecked. */
+    forceMount = input(false, { ...(ngDevMode ? { debugName: "forceMount" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    constructor() {
+        if (!this.#checkbox && !this.#radio) {
+            throw new Error('[forty-cdk/menu] ForMenuItemIndicator must be used inside a [forMenuCheckboxItem] or [forMenuRadioItem] element.');
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForMenuItemIndicator, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: ForMenuItemIndicator, isStandalone: true, selector: "[forMenuItemIndicator]", inputs: { forceMount: { classPropertyName: "forceMount", publicName: "forceMount", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "aria-hidden": "true" }, properties: { "attr.data-state": "checked() ? \"checked\" : \"unchecked\"", "hidden": "!checked() && !forceMount()", "style.display": "!checked() && !forceMount() ? \"none\" : null" } }, exportAs: ["forMenuItemIndicator"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForMenuItemIndicator, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forMenuItemIndicator]',
+                    exportAs: 'forMenuItemIndicator',
+                    host: {
+                        'aria-hidden': 'true',
+                        '[attr.data-state]': 'checked() ? "checked" : "unchecked"',
+                        '[hidden]': '!checked() && !forceMount()',
+                        '[style.display]': '!checked() && !forceMount() ? "none" : null',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { forceMount: [{ type: i0.Input, args: [{ isSignal: true, alias: "forceMount", required: false }] }] } });
+
+/**
+ * Visual + semantic separator between menu items. Decorative — never
+ * focused, never registers with the menu's item collection.
+ */
+class ForMenuSeparator {
+    /**
+     * Axis the separator divides along, reflected to `aria-orientation`.
+     * `horizontal` (default) splits items stacked vertically — the common case
+     * in a vertical menu; `vertical` splits items laid out horizontally.
+     */
+    orientation = input('horizontal', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForMenuSeparator, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: ForMenuSeparator, isStandalone: true, selector: "[forMenuSeparator]", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "separator" }, properties: { "attr.aria-orientation": "orientation()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForMenuSeparator, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forMenuSeparator]',
+                    host: {
+                        role: 'separator',
+                        '[attr.aria-orientation]': 'orientation()',
+                    },
+                }]
+        }], propDecorators: { orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }] } });
+
+const FOR_MENU_GROUP_CONTEXT = new InjectionToken('FOR_MENU_GROUP_CONTEXT');
+function injectMenuGroupContext(piece) {
+    const ctx = inject(FOR_MENU_GROUP_CONTEXT, { optional: true });
+    if (!ctx) {
+        throw new Error(`[forty-cdk/menu] ${piece} must be used inside a [forMenuGroup] element.`);
+    }
+    return ctx;
+}
+
+/**
+ * Logical grouping of menu items, exposed to assistive tech as
+ * `role="group"`. Use with `[forMenuGroupLabel]` for an accessible name
+ * (rendered as a section header in most designs).
+ */
+class ForMenuGroup {
+    #labelIds = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#labelIds" }] : /* istanbul ignore next */ []));
+    labelledBy = computed(() => {
+        const ids = this.#labelIds();
+        return ids.length === 0 ? null : ids.join(' ');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelledBy" }] : /* istanbul ignore next */ []));
+    registerLabel(id) {
+        this.#labelIds.update((arr) => (arr.includes(id) ? arr : [...arr, id]));
+    }
+    unregisterLabel(id) {
+        this.#labelIds.update((arr) => arr.filter((x) => x !== id));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForMenuGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: ForMenuGroup, isStandalone: true, selector: "[forMenuGroup]", host: { attributes: { "role": "group" }, properties: { "attr.aria-labelledby": "labelledBy()" } }, providers: [{ provide: FOR_MENU_GROUP_CONTEXT, useExisting: ForMenuGroup }], exportAs: ["forMenuGroup"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForMenuGroup, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forMenuGroup]',
+                    exportAs: 'forMenuGroup',
+                    host: {
+                        role: 'group',
+                        '[attr.aria-labelledby]': 'labelledBy()',
+                    },
+                    providers: [{ provide: FOR_MENU_GROUP_CONTEXT, useExisting: ForMenuGroup }],
+                }]
+        }] });
+
+/**
+ * Accessible name for `[forMenuGroup]`. Generates an id on the host and
+ * registers it with the parent group so `aria-labelledby` resolves to
+ * this element.
+ */
+class ForMenuGroupLabel {
+    id = registerA11yName(injectMenuGroupContext('ForMenuGroupLabel'), 'for-menu-group-label');
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForMenuGroupLabel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: ForMenuGroupLabel, isStandalone: true, selector: "[forMenuGroupLabel]", host: { properties: { "id": "id()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForMenuGroupLabel, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forMenuGroupLabel]',
+                    host: {
+                        '[id]': 'id()',
+                    },
+                }]
+        }] });
+
+/**
+ * Library fallback for menu defaults, read at the root injector when no
+ * consumer has called `provideForMenuDefaults`. Exported for the shared
+ * defaults contract spec; not re-exported from the primitive's public entry.
+ */
+const FOR_MENU_FALLBACK_DEFAULTS = {
+    subMenuOpenDelay: 100,
+    subMenuCloseDelay: 100,
+    subMenuPointerGraceDuration: 300,
+    sideOffset: 0,
+    collisionPadding: 8,
+};
+const { token, provideDefaults } = createDefaults('FOR_MENU_DEFAULTS', FOR_MENU_FALLBACK_DEFAULTS);
+/** Token holding the resolved menu defaults for the current scope. */
+const FOR_MENU_DEFAULTS = token;
+/**
+ * Configures forty-cdk menu defaults for this injector scope. Partial
+ * overrides inherit unspecified keys from the parent scope (or library
+ * defaults at the root).
+ */
+function provideForMenuDefaults(defaults = {}) {
+    return provideDefaults(defaults);
+}
+
+/**
+ * Root for a nested submenu inside a parent `[forDropdownMenu]` /
+ * `[forContextMenu]` (or another `[forMenuSub]`). Owns its own open
+ * state, ids, and item collection — items inside the submenu register
+ * here, not in the parent.
+ *
+ * The shared item-collection / typeahead / navigate / focus / id /
+ * outside-veto logic is owned by the `_internal/menu-overlay` helper (the
+ * same one `[forDropdownMenu]` / `[forContextMenu]` compose). The submenu
+ * contributes only its genuine differences on top: pointer-driven (hover)
+ * open/close scheduling, the `#suppressFocusMoves` autofocus vetoes that
+ * keep hover from stealing / returning focus, and the reason-dependent
+ * upward `closeMenu` propagation — the latter two wired through the
+ * overlay's `onOpen` / `onClose` lifecycle hooks.
+ *
+ * The parent menu's content is added to this submenu's dismissable
+ * exemptions so a click on a parent menu item doesn't fire the
+ * submenu's outside-handler (the parent item's own click flow closes
+ * everything via propagated `closeMenu`).
+ *
+ * Closing this submenu propagates `closeMenu` upward for every reason
+ * except `'escape'` and `'programmatic'` — Escape inside a submenu
+ * closes only that level, while activating an item or clicking outside
+ * everything tears down the entire chain.
+ *
+ * ```html
+ * <div forDropdownMenu [(open)]="open">
+ *   <button forDropdownMenuTrigger>Options</button>
+ *   @if (open()) {
+ *     <div forMenuContent>
+ *       <button forMenuItem>Cut</button>
+ *       <div forMenuSub [(open)]="moreOpen">
+ *         <button forMenuSubTrigger>More</button>
+ *         @if (moreOpen()) {
+ *           <div forMenuSubContent>
+ *             <button forMenuItem>Advanced</button>
+ *           </div>
+ *         }
+ *       </div>
+ *     </div>
+ *   }
+ * </div>
+ * ```
+ */
+class ForMenuSub extends MenuOverlayHost {
+    #defaults = inject(FOR_MENU_DEFAULTS);
+    #isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+    /** The enclosing menu — required (orphan throws). */
+    parentMenu;
+    open = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    /**
+     * Writing direction. When unset, inherits from the enclosing menu — set
+     * `[dir]` once on the top-level `[forDropdownMenu]` / `[forContextMenu]`
+     * and every nested submenu picks it up. Override per-submenu only when
+     * a specific submenu needs to render against the opposite direction.
+     *
+     * The input is aliased to `dir`; consumers bind `[dir]="..."` and read
+     * the effective value via the public `dir` computed below.
+     */
+    _dirInput = input(undefined, { ...(ngDevMode ? { debugName: "_dirInput" } : /* istanbul ignore next */ {}), alias: 'dir' });
+    dir = computed(() => this._dirInput() ?? this.parentMenu.dir(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dir" }] : /* istanbul ignore next */ []));
+    /**
+     * Side the submenu opens on. When unset, defaults to `'right'` in LTR
+     * and `'left'` in RTL (per `dir`). Set explicitly to pin a side
+     * regardless of writing direction.
+     *
+     * The input is aliased to `side`; consumers bind `[side]="..."` and read
+     * the effective value via the public `side` computed below.
+     */
+    _sideInput = input(undefined, { ...(ngDevMode ? { debugName: "_sideInput" } : /* istanbul ignore next */ {}), alias: 'side' });
+    side = computed(() => this._sideInput() ?? (this.dir() === 'rtl' ? 'left' : 'right'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []));
+    /**
+     * Gap (px) along the main axis. Defaults to `0` from `provideForMenuDefaults`
+     * — a submenu sits flush against its parent item. Now read from the defaults
+     * provider (like `[forDropdownMenu]` / `[forContextMenu]`) rather than
+     * hardcoded, so it can't drift.
+     */
+    sideOffset = input(this.#defaults.sideOffset, { ...(ngDevMode ? { debugName: "sideOffset" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /**
+     * Alignment along the chosen `side`. Defaults to `'start'`.
+     *
+     * Shares the single `MENU_POSITIONING_DEFAULTS` source with the two
+     * top-level roots; `menu-positioning-inputs.spec.ts` guards the three roots
+     * against drift.
+     */
+    align = input(MENU_POSITIONING_DEFAULTS.align, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
+    /** Gap (px) along the cross axis. Default `0`. */
+    alignOffset = input(MENU_POSITIONING_DEFAULTS.alignOffset, { ...(ngDevMode ? { debugName: "alignOffset" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /** When `true` (default), `flip` and `shift` keep the submenu inside the viewport. */
+    avoidCollisions = input(MENU_POSITIONING_DEFAULTS.avoidCollisions, { ...(ngDevMode ? { debugName: "avoidCollisions" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Padding (px) applied uniformly to flip / shift / size. Defaults to `8`
+     * from `provideForMenuDefaults` for the surrounding scope.
+     */
+    collisionPadding = input(this.#defaults.collisionPadding, { ...(ngDevMode ? { debugName: "collisionPadding" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /** Padding (px) for the `arrow` middleware. Default `0`. */
+    arrowPadding = input(MENU_POSITIONING_DEFAULTS.arrowPadding, { ...(ngDevMode ? { debugName: "arrowPadding" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /** Stickiness behaviour for `shift`. Default `'partial'`. */
+    sticky = input(MENU_POSITIONING_DEFAULTS.sticky, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sticky" }] : /* istanbul ignore next */ []));
+    /** When `true`, sets `data-detached=""` while the parent item is scrolled off-screen. */
+    hideWhenDetached = input(MENU_POSITIONING_DEFAULTS.hideWhenDetached, { ...(ngDevMode ? { debugName: "hideWhenDetached" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * When `true` (default), the menu 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.
+     */
+    clipUntilPositioned = input(MENU_POSITIONING_DEFAULTS.clipUntilPositioned, { ...(ngDevMode ? { debugName: "clipUntilPositioned" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * When `true` (default), arrow-key navigation wraps from the last enabled
+     * item back to the first (and vice versa). When `false`, navigation stops
+     * at the ends.
+     */
+    loop = input(true, { ...(ngDevMode ? { debugName: "loop" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * When true, the sub-trigger interaction is ignored and any open submenu
+     * stays open until the consumer flips `open`. Layered on top of the parent
+     * menu's own `disabled`.
+     */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** When true (default), Escape, pointer-down outside, and focus outside close the submenu. */
+    dismissible = input(true, { ...(ngDevMode ? { debugName: "dismissible" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** When true (default), focus returns to the sub-trigger on close. */
+    returnFocus = input(true, { ...(ngDevMode ? { debugName: "returnFocus" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Manual `aria-label` on `[forMenuSubContent]`. Use when the sub-trigger isn't a meaningful name. */
+    ariaLabel = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Fires when Escape is pressed while the submenu is open, just before it
+     * closes. Call `preventDefault()` on the emitted veto to keep the submenu
+     * open and suppress the Escape-driven close.
+     */
+    escapeKeyDown = output();
+    /**
+     * Fires on a pointer-down outside the submenu (and outside its exempt
+     * parent content), just before it closes. Call `preventDefault()` on the
+     * veto to keep the submenu open.
+     */
+    pointerDownOutside = output();
+    /**
+     * Fires when focus moves outside the submenu, just before it closes. Call
+     * `preventDefault()` on the veto to keep the submenu open.
+     */
+    focusOutside = output();
+    /**
+     * Composite outside-interaction channel: fires for either a
+     * pointer-down-outside or a focus-outside, just before the submenu closes.
+     * Call `preventDefault()` on the veto to keep the submenu open regardless of
+     * which interaction triggered it.
+     */
+    interactOutside = output();
+    /**
+     * Fires just before the submenu sends focus to its first / last
+     * enabled item on mount. Call `preventDefault()` on the emitted veto
+     * to skip the imperative focus move.
+     */
+    autoFocusOnOpen = output();
+    /**
+     * Fires just before focus returns to the parent item on unmount. Call
+     * `preventDefault()` on the veto to suppress the return-focus.
+     */
+    autoFocusOnClose = output();
+    _overlay = createMenuOverlay('for-menu-sub', {
+        open: this.open,
+        disabled: this.disabled,
+        dismissible: this.dismissible,
+        loop: this.loop,
+        escapeKeyDown: this.escapeKeyDown,
+        pointerDownOutside: this.pointerDownOutside,
+        focusOutside: this.focusOutside,
+        interactOutside: this.interactOutside,
+        autoFocusOnOpen: this.autoFocusOnOpen,
+        autoFocusOnClose: this.autoFocusOnClose,
+        // A keyboard / click open supersedes any in-flight hover scheduling and
+        // moves focus into the submenu (unlike the pointer path).
+        onOpen: () => {
+            this.#cancelPointerScheduling();
+            this.#suppressFocusMoves = false;
+        },
+        // Propagate up so item activation, Tab, and outside-pointer collapse
+        // the entire menu chain. `'escape'` collapses only this level (per APG);
+        // `'programmatic'` is the consumer's own write — no propagation either.
+        onClose: (reason) => {
+            this.#cancelPointerScheduling();
+            this.#suppressFocusMoves = false;
+            if (reason !== 'escape' && reason !== 'programmatic') {
+                this.parentMenu.closeMenu(reason);
+            }
+        },
+    });
+    anchor = computed(() => this._overlay.trigger(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "anchor" }] : /* istanbul ignore next */ []));
+    // --- Pointer-driven (hover) open/close state. Additive to click/keyboard. ---
+    #openAction = createDebouncedAction(() => this.#openByPointer());
+    #closeAction = createDebouncedAction(() => this.#closeByPointer());
+    #graceTimer = null;
+    #detachGrace = null;
+    #detachContentPointer = null;
+    /**
+     * True while the current open/close transition is pointer-driven, so the
+     * shared content's auto-focus-on-open and return-focus-on-close are vetoed:
+     * hovering must never steal focus into the submenu nor yank it back to the
+     * trigger. Reset to `false` by every keyboard / click / programmatic path.
+     */
+    #suppressFocusMoves = false;
+    /**
+     * Submenus exempt the parent menu's content. Clicks on parent menu items
+     * activate via the item's own click handler (which propagates `closeMenu`
+     * upward through the whole chain) instead of firing the submenu's
+     * outside-close.
+     */
+    dismissableExemptions = computed(() => {
+        const parentContent = this.parentMenu.content();
+        return parentContent ? [parentContent] : [];
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dismissableExemptions" }] : /* istanbul ignore next */ []));
+    constructor() {
+        super();
+        const parent = inject(FOR_MENU_CONTEXT, { skipSelf: true, optional: true });
+        if (!parent) {
+            throw new Error('[forty-cdk/menu] [forMenuSub] must be inside a [forDropdownMenu], [forContextMenu], or another [forMenuSub] element.');
+        }
+        this.parentMenu = parent;
+        inject(DestroyRef).onDestroy(() => this.#teardownPointer());
+    }
+    registerContent(el) {
+        this._overlay.registerContent(el);
+        this.#attachContentPointer(el);
+    }
+    unregisterContent(el) {
+        if (this._overlay.content() === el) {
+            this._overlay.unregisterContent(el);
+            this.#detachContentPointer?.();
+            this.#detachContentPointer = null;
+        }
+    }
+    closeMenu(reason) {
+        this._overlay.closeMenu(reason);
+    }
+    // --- Pointer-driven (hover) open/close. Additive to click / keyboard. ---
+    /**
+     * Schedule a hover-open of the submenu after `subMenuOpenDelay`. Re-entering
+     * the trigger also keeps every ancestor menu alive and aborts a pending
+     * close. No-op when disabled or already open / scheduled.
+     */
+    scheduleOpenByPointer() {
+        if (this.disabled()) {
+            return;
+        }
+        this.#keepChainOpen();
+        this.cancelPendingClose();
+        if (this.open() || this.#openAction.isPending()) {
+            return;
+        }
+        this.#openAction.schedule(this.#defaults.subMenuOpenDelay);
+    }
+    /**
+     * The pointer left the sub-trigger. Cancels a not-yet-fired hover-open; if
+     * the submenu is already open, arms the pointer-grace "safe triangle" toward
+     * the content so travelling into the submenu doesn't close it.
+     */
+    onTriggerPointerLeave(cursor) {
+        this.#clearOpenTimer();
+        if (!this.open()) {
+            return;
+        }
+        this.#armPointerGrace(cursor);
+    }
+    /** Schedule a hover-close of the submenu after `subMenuCloseDelay`. */
+    scheduleCloseByPointer() {
+        this.#clearOpenTimer();
+        if (!this.open() || this.#closeAction.isPending()) {
+            return;
+        }
+        this.#closeAction.schedule(this.#defaults.subMenuCloseDelay);
+    }
+    /** Cancel a pending hover-close and disarm the pointer-grace tracker. */
+    cancelPendingClose() {
+        this.#closeAction.cancel();
+        this.#disarmPointerGrace();
+    }
+    #openByPointer() {
+        if (this.disabled()) {
+            return;
+        }
+        this.cancelPendingClose();
+        // Hover-open never steals focus — it stays on whatever the user was on.
+        this.#suppressFocusMoves = true;
+        this.open.set(true);
+    }
+    #closeByPointer() {
+        this.#disarmPointerGrace();
+        this.#closeAction.cancel();
+        // Hover-close affects only this level (like Escape / programmatic — no
+        // upward propagation) and suppresses the trigger return-focus.
+        this.#suppressFocusMoves = true;
+        this.open.set(false);
+    }
+    #armPointerGrace(cursor) {
+        const content = this._overlay.content();
+        if (!this.#isBrowser || !content) {
+            this.scheduleCloseByPointer();
+            return;
+        }
+        const rect = content.getBoundingClientRect();
+        const trigger = this.trigger();
+        const side = trigger ? resolveGraceSide(trigger.getBoundingClientRect(), rect) : this.side();
+        const polygon = buildSubmenuGracePolygon(cursor, rect, side);
+        this.#disarmPointerGrace();
+        this.#detachGrace = attachPointerGrace(content.ownerDocument, polygon, () => {
+            this.#disarmPointerGrace();
+            this.scheduleCloseByPointer();
+        });
+        this.#graceTimer = setTimeout(() => {
+            this.#graceTimer = null;
+            this.#detachGrace?.();
+            this.#detachGrace = null;
+            this.scheduleCloseByPointer();
+        }, Math.max(0, this.#defaults.subMenuPointerGraceDuration));
+    }
+    #disarmPointerGrace() {
+        if (this.#detachGrace) {
+            this.#detachGrace();
+            this.#detachGrace = null;
+        }
+        if (this.#graceTimer !== null) {
+            clearTimeout(this.#graceTimer);
+            this.#graceTimer = null;
+        }
+    }
+    #onContentPointerEnter() {
+        // Arrived at (or moving within) the content — keep it and every ancestor
+        // submenu open.
+        this.cancelPendingClose();
+        this.#keepChainOpen();
+    }
+    #onContentPointerLeave() {
+        this.scheduleCloseByPointer();
+    }
+    /** Abort pending hover-closes on this submenu and every ancestor menu. */
+    #keepChainOpen() {
+        let parent = this.parentMenu;
+        while (parent) {
+            parent.cancelPendingClose?.();
+            parent = parent.parentMenu;
+        }
+    }
+    #cancelPointerScheduling() {
+        this.#clearOpenTimer();
+        this.cancelPendingClose();
+    }
+    #clearOpenTimer() {
+        this.#openAction.cancel();
+    }
+    #attachContentPointer(el) {
+        this.#detachContentPointer?.();
+        const onEnter = (event) => {
+            if (event.pointerType !== '' && event.pointerType !== 'mouse') {
+                return;
+            }
+            this.#onContentPointerEnter();
+        };
+        const onLeave = (event) => {
+            if (event.pointerType !== '' && event.pointerType !== 'mouse') {
+                return;
+            }
+            this.#onContentPointerLeave();
+        };
+        el.addEventListener('pointerenter', onEnter);
+        el.addEventListener('pointerleave', onLeave);
+        this.#detachContentPointer = () => {
+            el.removeEventListener('pointerenter', onEnter);
+            el.removeEventListener('pointerleave', onLeave);
+        };
+    }
+    #teardownPointer() {
+        this.#clearOpenTimer();
+        this.#closeAction.cancel();
+        this.#disarmPointerGrace();
+        this.#detachContentPointer?.();
+        this.#detachContentPointer = null;
+    }
+    emitAutoFocusOnOpen() {
+        // Hover-open leaves focus where it is — only keyboard / click moves it in.
+        if (this.#suppressFocusMoves) {
+            return true;
+        }
+        return emitVetoableEvent(this.autoFocusOnOpen);
+    }
+    emitAutoFocusOnClose() {
+        // Hover-close must not yank focus back to the trigger.
+        if (this.#suppressFocusMoves) {
+            return true;
+        }
+        return emitVetoableEvent(this.autoFocusOnClose);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForMenuSub, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: ForMenuSub, isStandalone: true, selector: "[forMenuSub]", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, _dirInput: { classPropertyName: "_dirInput", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null }, _sideInput: { classPropertyName: "_sideInput", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, sideOffset: { classPropertyName: "sideOffset", publicName: "sideOffset", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", 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 }, 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 }, returnFocus: { classPropertyName: "returnFocus", publicName: "returnFocus", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", escapeKeyDown: "escapeKeyDown", pointerDownOutside: "pointerDownOutside", focusOutside: "focusOutside", interactOutside: "interactOutside", autoFocusOnOpen: "autoFocusOnOpen", autoFocusOnClose: "autoFocusOnClose" }, host: { properties: { "attr.data-state": "open() ? \"open\" : \"closed\"", "attr.data-disabled": "disabled() ? \"\" : null" } }, providers: [{ provide: FOR_MENU_CONTEXT, useExisting: ForMenuSub }], exportAs: ["forMenuSub"], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForMenuSub, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forMenuSub]',
+                    exportAs: 'forMenuSub',
+                    host: {
+                        '[attr.data-state]': 'open() ? "open" : "closed"',
+                        '[attr.data-disabled]': 'disabled() ? "" : null',
+                    },
+                    providers: [{ provide: FOR_MENU_CONTEXT, useExisting: ForMenuSub }],
+                }]
+        }], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], _dirInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "dir", required: false }] }], _sideInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }], sideOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "sideOffset", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", 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 }] }], 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 }] }], returnFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "returnFocus", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], escapeKeyDown: [{ type: i0.Output, args: ["escapeKeyDown"] }], pointerDownOutside: [{ type: i0.Output, args: ["pointerDownOutside"] }], focusOutside: [{ type: i0.Output, args: ["focusOutside"] }], interactOutside: [{ type: i0.Output, args: ["interactOutside"] }], autoFocusOnOpen: [{ type: i0.Output, args: ["autoFocusOnOpen"] }], autoFocusOnClose: [{ type: i0.Output, args: ["autoFocusOnClose"] }] } });
+
+/**
+ * The `menuitem` inside the parent menu that opens its `[forMenuSub]`.
+ * Apply on a `<button>` so Space / Enter dispatch native click events that
+ * toggle the submenu via `(click)`.
+ *
+ * Wires `aria-haspopup="menu"`, `aria-expanded`, and `aria-controls`
+ * pointing to the submenu's content. Registers itself as a `menuitem` in
+ * the **parent** menu's collection (so parent navigation reaches it),
+ * while reading open state from the **submenu**.
+ *
+ * Keyboard:
+ * - **Click / Enter / Space** — toggle the submenu (focus first item on open).
+ * - **ArrowRight (LTR) / ArrowLeft (RTL)** — open the submenu and focus its first item.
+ * - **ArrowDown / ArrowUp / Home / End** — navigate parent's items.
+ * - **ArrowLeft (LTR) / ArrowRight (RTL)** — when the parent menu is itself
+ *   a submenu, close the parent (return to grandparent's trigger). No-op at
+ *   the top level.
+ * - **Tab** — close the entire menu chain.
+ * - **Typeahead** — printable keys delegate to parent's typeahead.
+ *
+ * Pointer (mouse):
+ * - **pointermove** — drop the parent menu's hover highlight so no sibling item
+ *   stays active while the submenu opens. The sub-trigger reflects no
+ *   `data-highlighted` of its own and does not take focus (hover-open never
+ *   moves focus, per #332).
+ * - **pointerenter** — open the submenu after the configured `subMenuOpenDelay`
+ *   ({@link provideForMenuDefaults}), without moving focus into it.
+ * - **pointerleave** — close after `subMenuCloseDelay`, unless the pointer
+ *   travels toward the open submenu through the pointer-grace "safe triangle".
+ *
+ * Touch / pen never hover, so submenus open by tap (the native click) on those
+ * pointer types — the hover listeners are gated to `pointerType === 'mouse'`.
+ *
+ * Pointer-driven opens (click / tap, detected by the `pointerdown` preceding
+ * the click) move focus to the submenu's first item without highlighting it;
+ * keyboard activation (Enter / Space / the open arrow) highlights it.
+ */
+class ForMenuSubTrigger {
+    submenu = injectMenuContext('ForMenuSubTrigger');
+    #host = inject(ElementRef);
+    #pointerActivation = false;
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    effectiveDisabled = computed(() => this.disabled() || this.submenu.disabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveDisabled" }] : /* istanbul ignore next */ []));
+    constructor() {
+        if (!this.submenu.parentMenu) {
+            throw new Error('[forty-cdk/menu] [forMenuSubTrigger] must be inside a [forMenuSub] inside a parent menu.');
+        }
+        const parent = this.submenu.parentMenu;
+        const handle = {
+            host: this.#host.nativeElement,
+            disabled: this.effectiveDisabled,
+        };
+        registerHandle(handle, (h) => parent.registerItem(h), (h) => parent.unregisterItem(h));
+        registerHandle(this.#host.nativeElement, (el) => this.submenu.registerTrigger(el), (el) => this.submenu.unregisterTrigger(el));
+    }
+    onPointerDown() {
+        this.#pointerActivation = true;
+    }
+    onClick() {
+        const modality = this.#pointerActivation ? 'pointer' : 'keyboard';
+        this.#pointerActivation = false;
+        if (this.effectiveDisabled()) {
+            return;
+        }
+        this.submenu.toggle('first', modality);
+    }
+    onPointerEnter(event) {
+        // Hover is a mouse affordance; touch / pen open the submenu by tap (click).
+        if (event.pointerType !== 'mouse') {
+            return;
+        }
+        if (this.effectiveDisabled()) {
+            return;
+        }
+        this.submenu.scheduleOpenByPointer?.();
+    }
+    onPointerMove(event) {
+        if (event.pointerType !== '' && event.pointerType !== 'mouse') {
+            return;
+        }
+        if (this.effectiveDisabled()) {
+            return;
+        }
+        // The sub-trigger carries no highlight of its own, and hover-open must not
+        // move focus into the submenu (#332). So hovering it just drops the parent
+        // menu's hover highlight, leaving no sibling item active while the submenu
+        // opens — focus stays where it was.
+        this.submenu.parentMenu?.clearItemHighlights();
+    }
+    onPointerLeave(event) {
+        if (event.pointerType !== 'mouse') {
+            return;
+        }
+        this.submenu.onTriggerPointerLeave?.({ x: event.clientX, y: event.clientY });
+    }
+    onKeyDown(event) {
+        this.#pointerActivation = false;
+        if (this.effectiveDisabled()) {
+            return;
+        }
+        const parent = this.submenu.parentMenu;
+        const isRtl = this.submenu.dir() === 'rtl';
+        const openKey = isRtl ? 'ArrowLeft' : 'ArrowRight';
+        const closeParentKey = isRtl ? 'ArrowRight' : 'ArrowLeft';
+        if (event.key === openKey) {
+            event.preventDefault();
+            this.submenu.openMenu('first');
+            return;
+        }
+        // Close-parent key when the *parent* is itself a submenu: collapse the parent.
+        if (event.key === closeParentKey && parent.parentMenu) {
+            event.preventDefault();
+            parent.closeMenu('escape');
+            return;
+        }
+        // Close-parent key when the *parent* is the top menu of a menubar:
+        // switch to the previous / next sibling menu (LTR-ArrowLeft → prev,
+        // RTL-ArrowRight → prev). Open-key on the sub-trigger keeps its own
+        // meaning (open this submenu) — only the close-direction propagates
+        // up to the menubar.
+        if (event.key === closeParentKey && parent.menubar) {
+            event.preventDefault();
+            parent.menubar.switchToSibling('prev');
+            return;
+        }
+        const action = resolveListNavigation(event, { orientation: 'vertical' });
+        if (action) {
+            event.preventDefault();
+            parent.navigate(this.#host.nativeElement, action);
+            return;
+        }
+        if (event.key === 'Tab') {
+            handleMenuTabOut(parent);
+            return;
+        }
+        parent.handleTypeahead(event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForMenuSubTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: ForMenuSubTrigger, isStandalone: true, selector: "[forMenuSubTrigger]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "menuitem", "type": "button", "tabindex": "-1" }, listeners: { "pointerdown": "onPointerDown()", "click": "onClick()", "keydown": "onKeyDown($event)", "pointerenter": "onPointerEnter($event)", "pointerleave": "onPointerLeave($event)", "pointermove": "onPointerMove($event)" }, properties: { "id": "submenu.triggerId()", "attr.aria-haspopup": "\"menu\"", "attr.aria-expanded": "submenu.open() ? \"true\" : \"false\"", "attr.aria-controls": "submenu.open() ? submenu.contentId() : null", "attr.aria-disabled": "effectiveDisabled() ? \"true\" : null", "attr.data-state": "submenu.open() ? \"open\" : \"closed\"", "attr.data-disabled": "effectiveDisabled() ? \"\" : null" } }, exportAs: ["forMenuSubTrigger"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForMenuSubTrigger, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forMenuSubTrigger]',
+                    exportAs: 'forMenuSubTrigger',
+                    host: {
+                        role: 'menuitem',
+                        type: 'button',
+                        tabindex: '-1',
+                        '[id]': 'submenu.triggerId()',
+                        '[attr.aria-haspopup]': '"menu"',
+                        '[attr.aria-expanded]': 'submenu.open() ? "true" : "false"',
+                        '[attr.aria-controls]': 'submenu.open() ? submenu.contentId() : null',
+                        '[attr.aria-disabled]': 'effectiveDisabled() ? "true" : null',
+                        '[attr.data-state]': 'submenu.open() ? "open" : "closed"',
+                        '[attr.data-disabled]': 'effectiveDisabled() ? "" : null',
+                        '(pointerdown)': 'onPointerDown()',
+                        '(click)': 'onClick()',
+                        '(keydown)': 'onKeyDown($event)',
+                        '(pointerenter)': 'onPointerEnter($event)',
+                        '(pointerleave)': 'onPointerLeave($event)',
+                        '(pointermove)': 'onPointerMove($event)',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { FOR_MENU_CHECKBOX_ITEM, FOR_MENU_DEFAULTS, FOR_MENU_GROUP_CONTEXT, FOR_MENU_RADIO_GROUP_CONTEXT, FOR_MENU_RADIO_ITEM, ForMenuCheckboxItem, ForMenuContent, ForMenuGroup, ForMenuGroupLabel, ForMenuItem, ForMenuItemIndicator, ForMenuRadioGroup, ForMenuRadioItem, ForMenuSeparator, ForMenuSub, ForMenuSubTrigger, provideForMenuDefaults };
+//# sourceMappingURL=forty-cdk-menu.mjs.map