@slotted/angular 0.0.0-stage → 0.1.0-beta.1

package/fesm2022/slotted-angular-menu.mjs

@@ -0,0 +1,1211 @@
+import { createDismissableLayer } from '@slotted/core/dismissable-layer';
+import { createArrowNavigation, tabbables } from '@slotted/core/focus';
+import { createPortalRoot } from '@slotted/core/portal';
+import { submenuOffsets, createPositioner } from '@slotted/core/positioner';
+import { createPresence } from '@slotted/core/presence';
+import { createControllable } from '@slotted/core/state';
+import { createTypeahead, isPrintable } from '@slotted/core/typeahead';
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, input, signal, computed, model, output, numberAttribute, booleanAttribute, ViewContainerRef, viewChild, DestroyRef, effect, untracked, afterNextRender, ViewEncapsulation, ChangeDetectionStrategy, Component, ElementRef, HostAttributeToken, Directive } from '@angular/core';
+import { createPointerIntent } from '@slotted/core/pointer-intent';
+import { keysMessages } from '@slotted/core/i18n';
+import { parseShortcut, canonicalKey, resolveShortcut, resolvePlatform } from '@slotted/core/keys';
+import { injectMessages } from '@slotted/angular/i18n';
+import { SlGlyph, SlIcon } from '@slotted/angular/icon';
+
+/**
+ * The numbers, and why they are these numbers: `side` and `align` hang the
+ * surface under the start edge of its own control, where the control's text and
+ * the items' labels share one edge; `submenuOpenDelay` is short enough that a
+ * deliberate hover is answered and long enough that a pointer crossing three
+ * items opens none of them; `hideWhenDetached` is `true` where `popover`'s is
+ * `false`, because a menu whose control has scrolled away commands nothing.
+ */
+const FALLBACK = {
+    align: 'start',
+    alignOffset: 0,
+    closeOnEscape: true,
+    closeOnOutsidePress: true,
+    closeOnSelect: true,
+    collisionPadding: 8,
+    disabled: false,
+    flip: true,
+    hideWhenDetached: true,
+    loop: true,
+    mount: 'active',
+    openOnHover: true,
+    portal: true,
+    shift: true,
+    side: 'bottom',
+    sideOffset: 0,
+    size: 'md',
+    strategy: 'absolute',
+    submenuCloseDelay: 300,
+    submenuOpenDelay: 150,
+    typeahead: true,
+    typeaheadTimeout: 500,
+};
+const MENU_DEFAULTS = new InjectionToken('slotted menu defaults', {
+    providedIn: 'root',
+    factory: () => FALLBACK,
+});
+/**
+ * An application decides once how its menus open, where they hang and how long
+ * a submenu waits. A menu that states any of them itself still wins.
+ */
+function provideMenuDefaults(defaults) {
+    return {
+        provide: MENU_DEFAULTS,
+        useFactory: () => ({ ...FALLBACK, ...defaults }),
+    };
+}
+/** What a menu renders as here, before it states anything of its own. */
+function injectMenuDefaults() {
+    return inject(MENU_DEFAULTS);
+}
+
+const MENUBAR_SURFACE = new InjectionToken('slotted menubar surface');
+
+/** Every item of a surface, in the order the document holds them. */
+const MENU_ITEM_SELECTOR = "[data-part='item']";
+const textOf = (item) => item.dataset['textValue'] ??
+    item.querySelector("[data-part='label']")?.textContent?.trim() ??
+    item.textContent?.trim() ??
+    '';
+const enabled = (item) => item.dataset['disabled'] === undefined;
+/**
+ * Focus without the browser's own scroll, which reveals an item by scrolling
+ * the page as well as the surface and centres it in the window, carrying the
+ * layer off its trigger. The surface scrolls inside the room the positioner
+ * gives it, so the item is brought into the surface and nothing further.
+ */
+const reveal = (item) => {
+    item.focus({ preventScroll: true });
+    const surface = item.closest("[data-part='content']");
+    if (surface === null)
+        return;
+    const box = surface.getBoundingClientRect();
+    const own = item.getBoundingClientRect();
+    if (own.top < box.top)
+        surface.scrollTop -= box.top - own.top;
+    else if (own.bottom > box.bottom)
+        surface.scrollTop += own.bottom - box.bottom;
+};
+/**
+ * A list of commands on a layer.
+ *
+ * The component renders **nothing where it is written**: its content lives in a
+ * template, and the layer is built into the portal when the menu opens. Angular
+ * Material's menu is built the same way and for the same reason — a surface
+ * that has to escape its parent's clipping cannot be rendered where it was
+ * declared.
+ *
+ * Where it sits decides what it is. On its own it hangs from the control that
+ * carries `slMenuTrigger`. Inside another menu it is a submenu, and its trigger
+ * becomes an item of the surface above. Inside `sl-menubar` it is one of the
+ * bar's menus, and the bar holds which one is open — a bar has at most one, and
+ * a boolean on each could represent two.
+ */
+class SlMenu {
+    /** The name this menu answers to on a bar. */
+    value = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** The accessible name, for a menu opened from a control with no words. */
+    ariaLabel = input(undefined, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
+    /** The ids of what describes the menu, written on the element that carries `role="menu"`. */
+    ariaDescribedBy = input(undefined, { ...(ngDevMode ? { debugName: "ariaDescribedBy" } : /* istanbul ignore next */ {}), alias: 'aria-describedby' });
+    /** Written by `slMenuHeader`: the block the surface is described by. */
+    headerId = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "headerId" }] : /* istanbul ignore next */ []));
+    /** The consumer's description and the header's, joined. */
+    describedBy = computed(() => [this.ariaDescribedBy(), this.headerId()].filter(Boolean).join(' ') || null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
+    open = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    /** One output for one transition, carrying the reason and the event. */
+    openChangeRequest = output();
+    align = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
+    side = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []));
+    size = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    mount = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mount" }] : /* istanbul ignore next */ []));
+    strategy = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "strategy" }] : /* istanbul ignore next */ []));
+    sideOffset = input(undefined, { ...(ngDevMode ? { debugName: "sideOffset" } : /* istanbul ignore next */ {}), transform: (given) => (given === undefined ? undefined : numberAttribute(given)) });
+    alignOffset = input(undefined, { ...(ngDevMode ? { debugName: "alignOffset" } : /* istanbul ignore next */ {}), transform: (given) => (given === undefined ? undefined : numberAttribute(given)) });
+    collisionPadding = input(undefined, { ...(ngDevMode ? { debugName: "collisionPadding" } : /* istanbul ignore next */ {}), transform: (given) => (given === undefined ? undefined : numberAttribute(given)) });
+    submenuOpenDelay = input(undefined, { ...(ngDevMode ? { debugName: "submenuOpenDelay" } : /* istanbul ignore next */ {}), transform: (given) => (given === undefined ? undefined : numberAttribute(given)) });
+    submenuCloseDelay = input(undefined, { ...(ngDevMode ? { debugName: "submenuCloseDelay" } : /* istanbul ignore next */ {}), transform: (given) => (given === undefined ? undefined : numberAttribute(given)) });
+    typeaheadTimeout = input(undefined, { ...(ngDevMode ? { debugName: "typeaheadTimeout" } : /* istanbul ignore next */ {}), transform: (given) => (given === undefined ? undefined : numberAttribute(given)) });
+    static flag = (given) => given === undefined ? undefined : booleanAttribute(given);
+    disabled = input(undefined, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: SlMenu.flag });
+    loop = input(undefined, { ...(ngDevMode ? { debugName: "loop" } : /* istanbul ignore next */ {}), transform: SlMenu.flag });
+    typeahead = input(undefined, { ...(ngDevMode ? { debugName: "typeahead" } : /* istanbul ignore next */ {}), transform: SlMenu.flag });
+    openOnHover = input(undefined, { ...(ngDevMode ? { debugName: "openOnHover" } : /* istanbul ignore next */ {}), transform: SlMenu.flag });
+    closeOnSelect = input(undefined, { ...(ngDevMode ? { debugName: "closeOnSelect" } : /* istanbul ignore next */ {}), transform: SlMenu.flag });
+    closeOnEscape = input(undefined, { ...(ngDevMode ? { debugName: "closeOnEscape" } : /* istanbul ignore next */ {}), transform: SlMenu.flag });
+    closeOnOutsidePress = input(undefined, { ...(ngDevMode ? { debugName: "closeOnOutsidePress" } : /* istanbul ignore next */ {}), transform: SlMenu.flag });
+    flip = input(undefined, { ...(ngDevMode ? { debugName: "flip" } : /* istanbul ignore next */ {}), transform: SlMenu.flag });
+    shift = input(undefined, { ...(ngDevMode ? { debugName: "shift" } : /* istanbul ignore next */ {}), transform: SlMenu.flag });
+    hideWhenDetached = input(undefined, { ...(ngDevMode ? { debugName: "hideWhenDetached" } : /* istanbul ignore next */ {}), transform: SlMenu.flag });
+    portal = input(undefined, { ...(ngDevMode ? { debugName: "portal" } : /* istanbul ignore next */ {}), transform: SlMenu.flag });
+    /**
+     * The surface is waiting for its items. It keeps its measure, says so with
+     * `aria-busy`, and shows whatever the consumer put in `slMenuEmpty`.
+     */
+    loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    defaults = injectMenuDefaults();
+    viewContainer = inject(ViewContainerRef);
+    template = viewChild.required('layer', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "template" }] : /* istanbul ignore next */ []));
+    /** The surface above this one, when this menu is a submenu of it. */
+    parent = inject(SlMenu, { optional: true, skipSelf: true });
+    /** The bar in scope. A submenu of a bar's menu still sees it. */
+    bar = inject(MENUBAR_SURFACE, { optional: true });
+    /** Whether this menu is one of the bar's own rather than nested in one. */
+    onBar = this.parent === null && this.bar !== null;
+    identifier = Math.random().toString(36).slice(2, 8);
+    contentId = `sl-menu-${this.identifier}`;
+    triggerId = `sl-menu-trigger-${this.identifier}`;
+    /** The control that opens this menu, given by `slMenuTrigger`. */
+    trigger = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "trigger" }] : /* istanbul ignore next */ []));
+    /**
+     * What the layer is positioned against when it is not the trigger: a row the
+     * menu hangs from, or the point a context menu was opened at, which
+     * `slContextMenuTriggerFor` writes here. Positioning only — the trigger stays
+     * the portal origin, the branch of the layer and the element focus returns
+     * to. Written by a directive, as `trigger` is, rather than bound in a
+     * template.
+     */
+    anchor = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "anchor" }] : /* istanbul ignore next */ []));
+    /**
+     * Where focus lands when the surface closes, for a trigger that is gone by
+     * then or one that never held focus — a context menu's target. `null` means
+     * the trigger.
+     */
+    finalFocus = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "finalFocus" }] : /* istanbul ignore next */ []));
+    /** Where focus lands when the surface opens. */
+    entry = { current: 'first' };
+    view = null;
+    layerNode = null;
+    surfaceNode = null;
+    portalRoot = null;
+    positioner = null;
+    layer = null;
+    navigation = null;
+    presence = null;
+    typeaheadHandle = null;
+    name = computed(() => this.value() ?? this.contentId, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    resolvedAlign = computed(() => this.align() ?? (this.parent === null ? this.defaults.align : 'start'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedAlign" }] : /* istanbul ignore next */ []));
+    resolvedSide = computed(() => {
+        if (this.side() !== undefined)
+            return this.side();
+        if (this.parent !== null)
+            return 'inline-end';
+        if (this.onBar && this.bar?.orientation() === 'vertical')
+            return 'inline-end';
+        return this.defaults.side;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedSide" }] : /* istanbul ignore next */ []));
+    resolvedSize = computed(() => this.size() ?? (this.onBar ? this.bar?.size() : undefined) ?? this.defaults.size, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedSize" }] : /* istanbul ignore next */ []));
+    resolvedDisabled = computed(() => (this.disabled() ?? this.defaults.disabled) ||
+        (this.onBar && (this.bar?.disabled() ?? false)), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedDisabled" }] : /* istanbul ignore next */ []));
+    resolvedLoop = computed(() => this.loop() ?? this.defaults.loop, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedLoop" }] : /* istanbul ignore next */ []));
+    resolvedTypeahead = computed(() => this.typeahead() ?? this.defaults.typeahead, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedTypeahead" }] : /* istanbul ignore next */ []));
+    resolvedOpenOnHover = computed(() => this.openOnHover() ?? this.defaults.openOnHover, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedOpenOnHover" }] : /* istanbul ignore next */ []));
+    resolvedCloseOnSelect = computed(() => this.closeOnSelect() ?? this.defaults.closeOnSelect, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedCloseOnSelect" }] : /* istanbul ignore next */ []));
+    resolvedSubmenuOpenDelay = computed(() => this.submenuOpenDelay() ?? this.defaults.submenuOpenDelay, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedSubmenuOpenDelay" }] : /* istanbul ignore next */ []));
+    resolvedSubmenuCloseDelay = computed(() => this.submenuCloseDelay() ?? this.defaults.submenuCloseDelay, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedSubmenuCloseDelay" }] : /* istanbul ignore next */ []));
+    /**
+     * A menu on a bar reads its own state from the bar, so the two models compose
+     * rather than compete: the bar holds the identity of the open menu, and this
+     * menu is open when that identity is its own.
+     */
+    isOpen = computed(() => {
+        const held = this.onBar ? this.bar?.value() === this.name() : this.open();
+        return held && !this.resolvedDisabled();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    constructor() {
+        const destroyRef = inject(DestroyRef);
+        effect(() => {
+            const open = this.isOpen();
+            untracked(() => (open ? this.show() : this.hide()));
+        });
+        /* A context menu opened again at a new point moves rather than closing and
+           reopening: the anchor changed while the surface is open, so it is
+           measured again. */
+        effect(() => {
+            this.anchor();
+            untracked(() => {
+                if (this.isOpen())
+                    this.position();
+            });
+        });
+        afterNextRender(() => {
+            if (this.resolvedMount() === 'eager' && !this.isOpen())
+                this.build();
+        });
+        destroyRef.onDestroy(() => this.teardown());
+    }
+    /** The painted surface, once it exists. The grace area is measured off it. */
+    surface() {
+        return this.surfaceNode;
+    }
+    /** Asks to open or close, and reports the reason before anything moves. */
+    toggle(next, reason, source) {
+        if (next === this.isOpen())
+            return;
+        let cancelled = false;
+        const state = createControllable({
+            initial: this.isOpen(),
+            onRequest: (request) => {
+                this.openChangeRequest.emit(request);
+                cancelled = request.cancelled;
+            },
+        });
+        const moved = state.request(next, reason, source);
+        if (cancelled)
+            return;
+        if (this.onBar && this.bar !== null) {
+            if (next)
+                this.bar.open(this.name(), reason, source);
+            else
+                this.bar.close(reason, source);
+        }
+        else if (moved) {
+            this.open.set(next);
+        }
+        /* Focus goes back to whatever opened the surface, unless the reader pressed
+           somewhere else — taking it back then would fight them. */
+        if (!next && reason !== 'outsidePress' && reason !== 'programmatic') {
+            (this.finalFocus() ?? this.trigger())?.focus({ preventScroll: true });
+        }
+    }
+    /** Closes this surface and every surface above it. */
+    closeAll(reason, source) {
+        this.toggle(false, reason, source);
+        this.parent?.closeAll(reason, source);
+        if (!this.onBar)
+            this.bar?.close(reason, source);
+    }
+    /** Moves focus onto an item of this surface. */
+    focusItem(index) {
+        const list = this.items();
+        const item = list[index < 0 ? list.length + index : index];
+        if (item !== undefined)
+            reveal(item);
+    }
+    items() {
+        return [...(this.surfaceNode?.querySelectorAll(MENU_ITEM_SELECTOR) ?? [])];
+    }
+    resolvedMount = computed(() => this.mount() ?? this.defaults.mount, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedMount" }] : /* istanbul ignore next */ []));
+    show() {
+        this.build();
+        this.position();
+        this.bind();
+        this.enter();
+    }
+    /**
+     * The layer, built once. `active` drops it again when the menu closes,
+     * `lazy` keeps it from the first open and `eager` builds it up front — the
+     * same axis `tooltip`, `popover` and `collapsible` declare. A layer kept
+     * while closed carries `inert`, so its items are in neither the tab order
+     * nor the accessibility tree.
+     */
+    build() {
+        if (this.view !== null) {
+            this.presence?.sync(this.isOpen());
+            return;
+        }
+        this.portalRoot = createPortalRoot({
+            origin: this.trigger(),
+            disabled: this.portal() === false,
+        });
+        this.view = this.viewContainer.createEmbeddedView(this.template());
+        this.view.detectChanges();
+        this.layerNode = this.view.rootNodes.find((node) => node instanceof HTMLElement);
+        this.surfaceNode = this.layerNode?.querySelector("[data-part='content']") ?? null;
+        if (this.layerNode === null || this.surfaceNode === null)
+            return;
+        this.portalRoot.container?.append(this.layerNode);
+        this.presence = createPresence({ present: this.isOpen() });
+        this.presence.setNode(this.layerNode);
+    }
+    position() {
+        if (this.layerNode === null)
+            return;
+        const trigger = this.trigger();
+        const anchor = this.anchor() ?? trigger;
+        if (anchor === null)
+            return;
+        /* A submenu is anchored to its item and placed from the parent's edge: the
+           parent surface's inset is added along the side, and the submenu's own
+           inset above its first item is taken off along the alignment, so the
+           first item lines up with the item that opened it (M2). */
+        const submenu = this.parent !== null && this.surfaceNode !== null && trigger !== null
+            ? submenuOffsets({
+                parentSurface: this.parent.surface(),
+                item: trigger,
+                surface: this.surfaceNode,
+            })
+            : { sideOffset: 0, alignOffset: 0 };
+        this.positioner?.destroy();
+        this.positioner = createPositioner(anchor, this.layerNode, {
+            align: this.resolvedAlign(),
+            alignOffset: (this.alignOffset() ?? this.defaults.alignOffset) + submenu.alignOffset,
+            boundaryPadding: this.collisionPadding() ?? this.defaults.collisionPadding,
+            flip: this.flip() ?? this.defaults.flip,
+            hideWhenDetached: this.hideWhenDetached() ?? this.defaults.hideWhenDetached,
+            shift: this.shift() ?? this.defaults.shift,
+            side: this.resolvedSide(),
+            sideOffset: (this.sideOffset() ?? this.defaults.sideOffset) + submenu.sideOffset,
+            strategy: this.strategy() ?? this.defaults.strategy,
+        });
+        void this.positioner.update();
+    }
+    bind() {
+        if (this.layerNode === null || this.surfaceNode === null)
+            return;
+        const branches = [this.trigger(), this.parent?.surface() ?? null].filter((branch) => branch !== null);
+        this.layer = createDismissableLayer(this.layerNode, {
+            branches,
+            escape: this.closeOnEscape() ?? this.defaults.closeOnEscape,
+            focusOutside: false,
+            modal: false,
+            outsidePress: this.closeOnOutsidePress() ?? this.defaults.closeOnOutsidePress,
+            scrollLock: false,
+            onDismiss: (request) => {
+                const reason = request.reason === 'escape' ? 'escape' : 'outsidePress';
+                this.toggle(false, reason, request.source);
+                if (reason === 'outsidePress')
+                    this.parent?.closeAll(reason, request.source);
+            },
+        });
+        this.navigation = createArrowNavigation(this.surfaceNode, {
+            focus: reveal,
+            includeAriaDisabled: true,
+            itemSelector: MENU_ITEM_SELECTOR,
+            loop: () => this.resolvedLoop(),
+            orientation: () => 'vertical',
+        });
+        if (this.resolvedTypeahead()) {
+            this.typeaheadHandle = createTypeahead({
+                timeout: this.typeaheadTimeout() ?? this.defaults.typeaheadTimeout,
+            });
+        }
+    }
+    /** Focus enters the surface as it opens, and the pattern says which item. */
+    enter() {
+        const bar = this.onBar ? this.bar : null;
+        const entry = bar === null ? this.entry.current : bar.entry.current;
+        this.entry.current = 'first';
+        if (bar !== null)
+            bar.entry.current = 'first';
+        if (entry === 'trigger')
+            return;
+        const list = this.items();
+        const ordered = entry === 'first' ? list : [...list].reverse();
+        const item = ordered.find(enabled) ?? ordered[0];
+        if (item !== undefined)
+            reveal(item);
+    }
+    hide() {
+        this.unbind();
+        if (this.resolvedMount() === 'active')
+            this.teardown();
+    }
+    /** The listeners a closed surface has no use for. */
+    unbind() {
+        this.navigation?.destroy();
+        this.layer?.destroy();
+        this.positioner?.destroy();
+        this.typeaheadHandle?.destroy();
+        this.navigation = null;
+        this.layer = null;
+        this.positioner = null;
+        this.typeaheadHandle = null;
+    }
+    teardown() {
+        this.navigation?.destroy();
+        this.layer?.destroy();
+        this.positioner?.destroy();
+        this.presence?.destroy();
+        this.typeaheadHandle?.destroy();
+        this.portalRoot?.release();
+        this.layerNode?.remove();
+        this.view?.destroy();
+        this.navigation = null;
+        this.layer = null;
+        this.positioner = null;
+        this.presence = null;
+        this.typeaheadHandle = null;
+        this.portalRoot = null;
+        this.layerNode = null;
+        this.surfaceNode = null;
+        this.view = null;
+    }
+    onKeyDown(event) {
+        const direction = this.surfaceNode !== null && getComputedStyle(this.surfaceNode).direction === 'rtl'
+            ? 'rtl'
+            : 'ltr';
+        const inlineStart = direction === 'rtl' ? 'ArrowRight' : 'ArrowLeft';
+        const inlineEnd = direction === 'rtl' ? 'ArrowLeft' : 'ArrowRight';
+        if (event.key === 'Tab') {
+            event.preventDefault();
+            const root = this.rootTrigger();
+            this.closeAll('dismiss', event);
+            this.moveOut(root, event.shiftKey ? -1 : 1);
+            return;
+        }
+        if (event.key === inlineStart) {
+            if (this.parent !== null) {
+                event.preventDefault();
+                this.toggle(false, 'keyboard', event);
+                return;
+            }
+            if (this.bar !== null) {
+                event.preventDefault();
+                this.bar.step(-1, { open: true });
+                return;
+            }
+        }
+        /* An item that opens a submenu answers the inline end itself and stops the
+           key there, so reaching this point means the item has none. */
+        if (event.key === inlineEnd && this.bar !== null) {
+            event.preventDefault();
+            this.closeAll('keyboard', event);
+            this.bar.step(1, { open: true });
+            return;
+        }
+        const handle = this.typeaheadHandle;
+        if (handle === null)
+            return;
+        if (event.ctrlKey || event.metaKey || event.altKey)
+            return;
+        if (!isPrintable(event.key, handle.query.length > 0))
+            return;
+        event.preventDefault();
+        const list = this.items();
+        const from = list.findIndex((item) => item === event.target);
+        const index = handle.match(event.key, list.map(textOf), from);
+        if (index !== -1)
+            this.focusItem(index);
+    }
+    /** The control that opened the outermost surface of this stack. */
+    rootTrigger() {
+        return this.parent === null ? this.trigger() : this.parent.rootTriggerOf();
+    }
+    rootTriggerOf() {
+        return this.rootTrigger();
+    }
+    /**
+     * Where `Tab` goes once every menu has closed: on down the page from the
+     * control that opened the outermost surface. The pattern binds the key and
+     * says no more, and a layer portalled to the end of the document has no next
+     * element a reader would recognise.
+     */
+    moveOut(trigger, step) {
+        if (trigger === null)
+            return;
+        const order = tabbables(trigger.ownerDocument.body);
+        const index = order.indexOf(trigger);
+        if (index === -1) {
+            trigger.focus({ preventScroll: true });
+            return;
+        }
+        (order[index + step] ?? trigger).focus({ preventScroll: true });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlMenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.7", type: SlMenu, isStandalone: true, selector: "sl-menu", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, mount: { classPropertyName: "mount", publicName: "mount", isSignal: true, isRequired: false, transformFunction: null }, strategy: { classPropertyName: "strategy", publicName: "strategy", 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 }, collisionPadding: { classPropertyName: "collisionPadding", publicName: "collisionPadding", isSignal: true, isRequired: false, transformFunction: null }, submenuOpenDelay: { classPropertyName: "submenuOpenDelay", publicName: "submenuOpenDelay", isSignal: true, isRequired: false, transformFunction: null }, submenuCloseDelay: { classPropertyName: "submenuCloseDelay", publicName: "submenuCloseDelay", isSignal: true, isRequired: false, transformFunction: null }, typeaheadTimeout: { classPropertyName: "typeaheadTimeout", publicName: "typeaheadTimeout", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loop: { classPropertyName: "loop", publicName: "loop", isSignal: true, isRequired: false, transformFunction: null }, typeahead: { classPropertyName: "typeahead", publicName: "typeahead", isSignal: true, isRequired: false, transformFunction: null }, openOnHover: { classPropertyName: "openOnHover", publicName: "openOnHover", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, closeOnOutsidePress: { classPropertyName: "closeOnOutsidePress", publicName: "closeOnOutsidePress", isSignal: true, isRequired: false, transformFunction: null }, flip: { classPropertyName: "flip", publicName: "flip", isSignal: true, isRequired: false, transformFunction: null }, shift: { classPropertyName: "shift", publicName: "shift", isSignal: true, isRequired: false, transformFunction: null }, hideWhenDetached: { classPropertyName: "hideWhenDetached", publicName: "hideWhenDetached", isSignal: true, isRequired: false, transformFunction: null }, portal: { classPropertyName: "portal", publicName: "portal", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", openChangeRequest: "openChangeRequest" }, host: { styleAttribute: "display: none" }, viewQueries: [{ propertyName: "template", first: true, predicate: ["layer"], descendants: true, isSignal: true }], exportAs: ["slMenu"], ngImport: i0, template: `
+    <ng-template #layer>
+      <div
+        data-ui="menu"
+        data-part="root"
+        [attr.data-align]="resolvedAlign()"
+        [attr.data-size]="resolvedSize()"
+        [attr.data-open]="isOpen() ? '' : null"
+        [attr.inert]="isOpen() ? null : ''"
+      >
+        <div
+          #surface
+          data-part="content"
+          role="menu"
+          tabindex="-1"
+          [id]="contentId"
+          [attr.aria-labelledby]="ariaLabel() === undefined ? triggerId : null"
+          [attr.aria-label]="ariaLabel() ?? null"
+          [attr.aria-describedby]="describedBy()"
+          [attr.aria-busy]="loading() ? true : null"
+          [attr.data-loading]="loading() ? '' : null"
+          (keydown)="onKeyDown($event)"
+        >
+          <ng-content />
+        </div>
+      </div>
+    </ng-template>
+  `, isInline: true, styles: ["@layer slotted.components{[data-ui=menu]{--_gap: var(--slotted-menu-gap, var(--slotted-space-2, .25rem));--_surface: var(--slotted-menu-surface, var(--slotted-surface-raised, #ffffff));--_text: var(--slotted-menu-text, var(--slotted-text, #0f172a));--_muted: var(--slotted-menu-text-muted, var(--slotted-text-muted, #5b6b7f));--_border-color: var(--slotted-menu-border-color, var(--slotted-border-subtle, #e2e8f0));--_border-width: var(--slotted-border-width-thin, 1px);--_radius: var(--slotted-menu-radius, var(--slotted-radius-lg, 8px));--_shadow: var(--slotted-menu-shadow, var(--slotted-shadow-md));--_highlight: var(--slotted-menu-highlight, var(--slotted-tone-secondary-subtle-hover));--_highlight-active: var( --slotted-menu-highlight-active, var(--slotted-tone-secondary-subtle-active) );--_accent: var(--_text);--_inset-block: var(--slotted-menu-padding-block, var(--slotted-space-2, .25rem));--_inset-inline: var(--slotted-menu-padding-inline, var(--slotted-space-2, .25rem));--_item-padding: var(--slotted-control-padding-inline-md, .8125rem);--_item-inset: calc(var(--_item-padding) - var(--_inset-inline));--_item-height: var(--slotted-control-height-md, 34px);--_item-radius: var(--slotted-menu-item-radius, var(--slotted-control-radius));--_font-size: var(--slotted-control-font-size-md, 13px);--_secondary-font-size: var(--slotted-control-font-size-sm, 12px);--_icon-size: var(--slotted-control-icon-size-md, 16px);--_column-gap: var(--slotted-control-gap-md, .5rem);--_leading: round(up, calc(var(--_font-size) * var(--slotted-line-height-md, 1.5)), 1px);--_secondary-leading: round( up, calc(var(--_secondary-font-size) * var(--slotted-line-height-sm, 1.45)), 1px );--_measure: var(--slotted-menu-measure, 16rem);--_min-measure: min( var(--slotted-menu-min-measure, 12rem), var(--slotted-positioner-available-width, 100vw) );position:absolute;inset-block-start:0;z-index:calc(var(--slotted-z-index-popover, 1100) + var(--slotted-layer-depth, 0));isolation:isolate;box-sizing:border-box;inline-size:max-content;max-inline-size:min(var(--_measure),var(--slotted-positioner-available-width, 100vw));min-inline-size:var(--_min-measure);padding-block:var(--_gap);padding-inline:0;pointer-events:none;opacity:0;--_enter-distance: var(--slotted-space-2, .25rem);translate:0 calc(-1 * var(--_enter-distance));transition:opacity var(--slotted-duration-short) var(--slotted-easing-exit),translate var(--slotted-duration-short) var(--slotted-easing-exit)}[data-ui=menu][data-side=top]{translate:0 var(--_enter-distance)}[data-ui=menu][data-side=right]{translate:calc(-1 * var(--_enter-distance)) 0}[data-ui=menu][data-side=left]{translate:var(--_enter-distance) 0}[data-ui=menu]:is([data-side=left],[data-side=right]){padding-block:0;padding-inline:var(--_gap)}[data-ui=menu][data-open]{opacity:1;translate:0 0;transition:none}[data-ui=menu][data-open][data-positioned]{animation:slotted-menu-enter-down var(--slotted-duration-medium) var(--slotted-easing-enter)}[data-ui=menu][data-open][data-positioned][data-side=top]{animation-name:slotted-menu-enter-up}[data-ui=menu][data-open][data-positioned][data-side=right]{animation-name:slotted-menu-enter-from-start}[data-ui=menu][data-open][data-positioned][data-side=left]{animation-name:slotted-menu-enter-from-end}@keyframes slotted-menu-enter-down{0%{opacity:0;translate:0 calc(-1 * var(--_enter-distance))}}@keyframes slotted-menu-enter-up{0%{opacity:0;translate:0 var(--_enter-distance)}}@keyframes slotted-menu-enter-from-start{0%{opacity:0;translate:calc(-1 * var(--_enter-distance)) 0}}@keyframes slotted-menu-enter-from-end{0%{opacity:0;translate:var(--_enter-distance) 0}}@keyframes slotted-menu-fade{0%{opacity:0}}@media(prefers-reduced-motion:reduce){[data-ui=menu],[data-ui=menu][data-side=top],[data-ui=menu][data-side=left],[data-ui=menu][data-side=right]{translate:0 0;transition:opacity var(--slotted-duration-short) var(--slotted-easing-exit)}[data-ui=menu][data-open][data-positioned],[data-ui=menu][data-open][data-positioned][data-side=top],[data-ui=menu][data-open][data-positioned][data-side=left],[data-ui=menu][data-open][data-positioned][data-side=right]{animation-name:slotted-menu-fade}}[data-ui=menu][data-detached]{visibility:hidden}[data-ui=menu][data-size=sm]{--_item-padding: var(--slotted-control-padding-inline-sm, .625rem);--_item-height: var(--slotted-control-height-sm, 30px);--_font-size: var(--slotted-control-font-size-sm, 12px);--_secondary-font-size: var(--slotted-font-size-xs, .75rem);--_icon-size: var(--slotted-control-icon-size-sm, 14px);--_column-gap: var(--slotted-control-gap-sm, .375rem);--_measure: var(--slotted-menu-measure-sm, 14rem)}[data-ui=menu][data-size=lg]{--_item-padding: var(--slotted-control-padding-inline-lg, 1rem);--_item-height: var(--slotted-control-height-lg, 38px);--_font-size: var(--slotted-control-font-size-lg, 14px);--_secondary-font-size: var(--slotted-control-font-size-sm, 12px);--_icon-size: var(--slotted-control-icon-size-lg, 18px);--_column-gap: var(--slotted-control-gap-lg, .5rem);--_measure: var(--slotted-menu-measure-lg, 20rem)}[data-ui=menu]>[data-part=content]{background:var(--_surface);border:var(--_border-width) solid var(--_border-color);border-radius:var(--_radius);box-shadow:var(--_shadow);box-sizing:border-box;color:var(--_text);display:grid;font-family:var(--slotted-font-family-sans);font-size:var(--_font-size);grid-template-columns:auto minmax(0,1fr) auto auto;max-block-size:calc(var(--slotted-positioner-available-height, 100vh) - 2 * var(--_gap));outline:none;overflow-y:auto;overscroll-behavior:contain;padding-block:var(--_inset-block);padding-inline:var(--_inset-inline);pointer-events:auto}[data-ui=menu]>[data-part=content]:focus-visible{outline:none}[data-ui=menu] [data-part=group]{display:grid;grid-column:1 / -1;grid-template-columns:subgrid}[data-ui=menu] [data-part=group-label]{color:var(--_muted);font-size:var(--_secondary-font-size);font-weight:var(--slotted-font-weight-semibold, 600);grid-column:1 / -1;line-height:var(--_secondary-leading);padding-block:var(--slotted-space-2, .25rem);padding-inline:var(--_item-inset)}[data-ui=menu] [data-part=header]{align-items:center;column-gap:var(--slotted-space-5, .75rem);display:grid;grid-column:1 / -1;grid-template-columns:auto minmax(0,1fr);line-height:var(--_leading);padding-block:var(--slotted-space-2, .25rem);padding-inline:var(--_item-inset)}[data-ui=menu] [data-part=header]>:not([data-part=label],[data-part=description]){grid-column:1;grid-row:1 / span 2}[data-ui=menu] [data-part=header]>[data-part=label]{font-weight:var(--slotted-font-weight-semibold, 600)}[data-ui=menu] [data-part=item]{appearance:none;background:transparent;border:0;border-radius:var(--_item-radius);box-sizing:border-box;color:inherit;cursor:pointer;display:grid;font:inherit;grid-column:1 / -1;grid-template-columns:subgrid;align-content:center;line-height:var(--_leading);min-block-size:var(--_item-height);padding-block:var(--slotted-space-2, .25rem);padding-inline:var(--_item-inset);row-gap:var(--slotted-space-1, .125rem);text-align:start;text-decoration:none;transition:background-color var(--slotted-control-transition-duration, var(--slotted-duration-short)) var(--slotted-control-transition-easing, var(--slotted-easing-standard)),color var(--slotted-control-transition-duration, var(--slotted-duration-short)) var(--slotted-control-transition-easing, var(--slotted-easing-standard))}[data-ui=menu] [data-part=item]:focus{background-color:var(--_highlight);color:var(--_accent)}[data-ui=menu] [data-part=item]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, currentColor);outline-offset:calc(-1 * var(--slotted-focus-ring-width, 2px))}[data-ui=menu] [data-part=item]:not([data-disabled]):active{background-color:var(--_highlight-active)}[data-ui=menu] [data-part=item][data-open]{background-color:var(--_highlight)}[data-ui=menu] [data-part=item][data-disabled]{color:var(--slotted-disabled-foreground, #64748b);cursor:not-allowed}[data-ui=menu] [data-part=item][data-disabled]:focus{background-color:var(--_highlight);color:var(--slotted-disabled-foreground, #64748b)}[data-ui=menu] :is([data-part=indicator],[data-part=icon]),[data-ui=menu] [data-part=item][aria-haspopup=menu]>[data-ui=icon]{block-size:1lh}[data-ui=menu] [data-part=indicator]{--slotted-icon-size: var(--_icon-size);align-items:center;display:flex;grid-column:1;grid-row:1;inline-size:var(--_icon-size);justify-content:center;justify-self:center;margin-inline-end:var(--_column-gap);opacity:0;scale:.8;transition:opacity var(--slotted-duration-short) var(--slotted-easing-exit),scale var(--slotted-duration-short) var(--slotted-easing-exit)}[data-ui=menu] [data-part=item][data-checked]>[data-part=indicator]{opacity:1;scale:1;transition:opacity var(--slotted-duration-short) var(--slotted-easing-enter),scale var(--slotted-duration-short) var(--slotted-easing-enter)}[data-ui=menu] [data-part=item][role=menuitemradio]>[data-part=indicator]{--slotted-icon-size: calc(var(--_icon-size) * .7)}[data-ui=menu] [data-part=icon]{--slotted-icon-size: var(--_icon-size);align-items:center;display:flex;grid-column:1;grid-row:1;inline-size:var(--_icon-size);justify-content:center;justify-self:center;margin-inline-end:var(--_column-gap)}[data-ui=menu] [data-part=icon]>*{font-size:var(--_icon-size)}[data-ui=menu] [data-part=label]{grid-column:2;grid-row:1;min-inline-size:0;overflow-wrap:anywhere}[data-ui=menu] [data-part=description]{color:var(--_muted);font-size:var(--_secondary-font-size);grid-column:2;grid-row:2;line-height:var(--_secondary-leading);min-inline-size:0;overflow-wrap:anywhere}[data-ui=menu] [data-part=item][data-disabled]>[data-part=description]{color:inherit}[data-ui=menu] [data-part=meta]{align-items:center;color:var(--_muted);column-gap:var(--slotted-space-2, .25rem);display:flex;font-variant-numeric:tabular-nums;grid-column:3;grid-row:1;justify-self:end;margin-inline-start:var(--slotted-space-6, 1rem);white-space:nowrap}[data-ui=menu] [data-part=shortcut]{color:var(--_muted);grid-column:4;grid-row:1;justify-self:end;margin-inline-start:var(--slotted-space-6, 1rem);white-space:nowrap}[data-ui=menu] [data-part=item][data-disabled]>:is([data-part=shortcut],[data-part=meta]),[data-ui=menu] [data-part=item][data-disabled][aria-haspopup=menu]>[data-ui=icon]{color:inherit}[data-ui=menu] [data-part=item][aria-haspopup=menu]>[data-ui=icon]{--slotted-icon-size: var(--_icon-size);grid-column:4;grid-row:1;justify-self:end;line-height:inherit;margin-inline-start:var(--_column-gap);color:var(--_muted)}[data-ui=menu] [data-part=separator]{background-color:var(--slotted-menu-separator-color, var(--_border-color));block-size:var(--_border-width);border:0;grid-column:1 / -1;margin-block:var(--slotted-space-2, .25rem);margin-inline:0}[data-ui=menu] [data-part=empty]{color:var(--_muted);grid-column:1 / -1;padding-block:var(--slotted-space-5, .75rem);padding-inline:var(--_item-inset);text-align:center}[data-ui=menu]>[data-part=content][data-loading]{cursor:progress}[data-ui=menu] [data-part=item][data-tone=accent]{--_accent: var(--slotted-tone-accent-text);--_highlight: var(--slotted-tone-accent-surface);--_highlight-active: var(--slotted-tone-accent-subtle-active);color:var(--slotted-tone-accent-text)}[data-ui=menu] [data-part=item][data-tone=secondary]{--_accent: var(--slotted-tone-secondary-text);--_highlight: var(--slotted-tone-secondary-surface);--_highlight-active: var(--slotted-tone-secondary-subtle-active);color:var(--slotted-tone-secondary-text)}[data-ui=menu] [data-part=item][data-tone=success]{--_accent: var(--slotted-tone-success-text);--_highlight: var(--slotted-tone-success-surface);--_highlight-active: var(--slotted-tone-success-subtle-active);color:var(--slotted-tone-success-text)}[data-ui=menu] [data-part=item][data-tone=warning]{--_accent: var(--slotted-tone-warning-text);--_highlight: var(--slotted-tone-warning-surface);--_highlight-active: var(--slotted-tone-warning-subtle-active);color:var(--slotted-tone-warning-text)}[data-ui=menu] [data-part=item][data-tone=danger]{--_accent: var(--slotted-tone-danger-text);--_highlight: var(--slotted-tone-danger-surface);--_highlight-active: var(--slotted-tone-danger-subtle-active);color:var(--slotted-tone-danger-text)}[data-ui=menu] [data-part=item][data-tone][data-disabled]{--_accent: var(--slotted-disabled-foreground, #64748b);--_highlight: var(--slotted-menu-highlight, var(--slotted-tone-secondary-subtle-hover));color:var(--slotted-disabled-foreground, #64748b)}@media(forced-colors:active){[data-ui=menu] [data-part=item]:focus{background-color:Highlight;color:HighlightText;forced-color-adjust:none}[data-ui=menu] [data-part=item][data-disabled]:focus{background-color:Highlight;color:GrayText}}}\n", "@layer slotted.components{[data-ui=highlight] [data-part=match]{background-color:var( --slotted-highlight-background, color-mix( in oklab, var(--slotted-tone-accent-text) calc(var(--slotted-highlight-tint-opacity, .075) * 100%), transparent ) );-webkit-box-decoration-break:clone;box-decoration-break:clone;border-radius:var(--slotted-radius-none, 0px);color:var(--slotted-highlight-color, var(--slotted-tone-accent-text));font-weight:inherit;letter-spacing:inherit;padding:0;text-decoration-color:var(--slotted-highlight-rule-color, var(--slotted-tone-accent-border));text-decoration-line:underline;text-decoration-thickness:var(--slotted-border-width-thin, 1px);text-underline-offset:var(--slotted-space-1, .125rem)}[data-ui=highlight] [data-part=match][data-current]{background-color:var(--slotted-highlight-current-background, var(--slotted-tone-accent-solid));color:var(--slotted-highlight-current-color, var(--slotted-tone-accent-on-solid));text-decoration-line:none}[data-ui=highlight]:is([data-disabled],[data-disabled] *) [data-part=match]{background-color:var(--slotted-highlight-disabled-background, transparent);color:inherit;text-decoration-line:underline}@media(forced-colors:active){[data-ui=highlight] [data-part=match],[data-ui=highlight]:is([data-disabled],[data-disabled] *) [data-part=match]{background-color:Mark;color:MarkText;forced-color-adjust:none}[data-ui=highlight] [data-part=match][data-current]{background-color:Highlight;color:HighlightText}}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlMenu, decorators: [{
+            type: Component,
+            args: [{ selector: 'sl-menu', standalone: true, exportAs: 'slMenu', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { style: 'display: none' }, template: `
+    <ng-template #layer>
+      <div
+        data-ui="menu"
+        data-part="root"
+        [attr.data-align]="resolvedAlign()"
+        [attr.data-size]="resolvedSize()"
+        [attr.data-open]="isOpen() ? '' : null"
+        [attr.inert]="isOpen() ? null : ''"
+      >
+        <div
+          #surface
+          data-part="content"
+          role="menu"
+          tabindex="-1"
+          [id]="contentId"
+          [attr.aria-labelledby]="ariaLabel() === undefined ? triggerId : null"
+          [attr.aria-label]="ariaLabel() ?? null"
+          [attr.aria-describedby]="describedBy()"
+          [attr.aria-busy]="loading() ? true : null"
+          [attr.data-loading]="loading() ? '' : null"
+          (keydown)="onKeyDown($event)"
+        >
+          <ng-content />
+        </div>
+      </div>
+    </ng-template>
+  `, styles: ["@layer slotted.components{[data-ui=menu]{--_gap: var(--slotted-menu-gap, var(--slotted-space-2, .25rem));--_surface: var(--slotted-menu-surface, var(--slotted-surface-raised, #ffffff));--_text: var(--slotted-menu-text, var(--slotted-text, #0f172a));--_muted: var(--slotted-menu-text-muted, var(--slotted-text-muted, #5b6b7f));--_border-color: var(--slotted-menu-border-color, var(--slotted-border-subtle, #e2e8f0));--_border-width: var(--slotted-border-width-thin, 1px);--_radius: var(--slotted-menu-radius, var(--slotted-radius-lg, 8px));--_shadow: var(--slotted-menu-shadow, var(--slotted-shadow-md));--_highlight: var(--slotted-menu-highlight, var(--slotted-tone-secondary-subtle-hover));--_highlight-active: var( --slotted-menu-highlight-active, var(--slotted-tone-secondary-subtle-active) );--_accent: var(--_text);--_inset-block: var(--slotted-menu-padding-block, var(--slotted-space-2, .25rem));--_inset-inline: var(--slotted-menu-padding-inline, var(--slotted-space-2, .25rem));--_item-padding: var(--slotted-control-padding-inline-md, .8125rem);--_item-inset: calc(var(--_item-padding) - var(--_inset-inline));--_item-height: var(--slotted-control-height-md, 34px);--_item-radius: var(--slotted-menu-item-radius, var(--slotted-control-radius));--_font-size: var(--slotted-control-font-size-md, 13px);--_secondary-font-size: var(--slotted-control-font-size-sm, 12px);--_icon-size: var(--slotted-control-icon-size-md, 16px);--_column-gap: var(--slotted-control-gap-md, .5rem);--_leading: round(up, calc(var(--_font-size) * var(--slotted-line-height-md, 1.5)), 1px);--_secondary-leading: round( up, calc(var(--_secondary-font-size) * var(--slotted-line-height-sm, 1.45)), 1px );--_measure: var(--slotted-menu-measure, 16rem);--_min-measure: min( var(--slotted-menu-min-measure, 12rem), var(--slotted-positioner-available-width, 100vw) );position:absolute;inset-block-start:0;z-index:calc(var(--slotted-z-index-popover, 1100) + var(--slotted-layer-depth, 0));isolation:isolate;box-sizing:border-box;inline-size:max-content;max-inline-size:min(var(--_measure),var(--slotted-positioner-available-width, 100vw));min-inline-size:var(--_min-measure);padding-block:var(--_gap);padding-inline:0;pointer-events:none;opacity:0;--_enter-distance: var(--slotted-space-2, .25rem);translate:0 calc(-1 * var(--_enter-distance));transition:opacity var(--slotted-duration-short) var(--slotted-easing-exit),translate var(--slotted-duration-short) var(--slotted-easing-exit)}[data-ui=menu][data-side=top]{translate:0 var(--_enter-distance)}[data-ui=menu][data-side=right]{translate:calc(-1 * var(--_enter-distance)) 0}[data-ui=menu][data-side=left]{translate:var(--_enter-distance) 0}[data-ui=menu]:is([data-side=left],[data-side=right]){padding-block:0;padding-inline:var(--_gap)}[data-ui=menu][data-open]{opacity:1;translate:0 0;transition:none}[data-ui=menu][data-open][data-positioned]{animation:slotted-menu-enter-down var(--slotted-duration-medium) var(--slotted-easing-enter)}[data-ui=menu][data-open][data-positioned][data-side=top]{animation-name:slotted-menu-enter-up}[data-ui=menu][data-open][data-positioned][data-side=right]{animation-name:slotted-menu-enter-from-start}[data-ui=menu][data-open][data-positioned][data-side=left]{animation-name:slotted-menu-enter-from-end}@keyframes slotted-menu-enter-down{0%{opacity:0;translate:0 calc(-1 * var(--_enter-distance))}}@keyframes slotted-menu-enter-up{0%{opacity:0;translate:0 var(--_enter-distance)}}@keyframes slotted-menu-enter-from-start{0%{opacity:0;translate:calc(-1 * var(--_enter-distance)) 0}}@keyframes slotted-menu-enter-from-end{0%{opacity:0;translate:var(--_enter-distance) 0}}@keyframes slotted-menu-fade{0%{opacity:0}}@media(prefers-reduced-motion:reduce){[data-ui=menu],[data-ui=menu][data-side=top],[data-ui=menu][data-side=left],[data-ui=menu][data-side=right]{translate:0 0;transition:opacity var(--slotted-duration-short) var(--slotted-easing-exit)}[data-ui=menu][data-open][data-positioned],[data-ui=menu][data-open][data-positioned][data-side=top],[data-ui=menu][data-open][data-positioned][data-side=left],[data-ui=menu][data-open][data-positioned][data-side=right]{animation-name:slotted-menu-fade}}[data-ui=menu][data-detached]{visibility:hidden}[data-ui=menu][data-size=sm]{--_item-padding: var(--slotted-control-padding-inline-sm, .625rem);--_item-height: var(--slotted-control-height-sm, 30px);--_font-size: var(--slotted-control-font-size-sm, 12px);--_secondary-font-size: var(--slotted-font-size-xs, .75rem);--_icon-size: var(--slotted-control-icon-size-sm, 14px);--_column-gap: var(--slotted-control-gap-sm, .375rem);--_measure: var(--slotted-menu-measure-sm, 14rem)}[data-ui=menu][data-size=lg]{--_item-padding: var(--slotted-control-padding-inline-lg, 1rem);--_item-height: var(--slotted-control-height-lg, 38px);--_font-size: var(--slotted-control-font-size-lg, 14px);--_secondary-font-size: var(--slotted-control-font-size-sm, 12px);--_icon-size: var(--slotted-control-icon-size-lg, 18px);--_column-gap: var(--slotted-control-gap-lg, .5rem);--_measure: var(--slotted-menu-measure-lg, 20rem)}[data-ui=menu]>[data-part=content]{background:var(--_surface);border:var(--_border-width) solid var(--_border-color);border-radius:var(--_radius);box-shadow:var(--_shadow);box-sizing:border-box;color:var(--_text);display:grid;font-family:var(--slotted-font-family-sans);font-size:var(--_font-size);grid-template-columns:auto minmax(0,1fr) auto auto;max-block-size:calc(var(--slotted-positioner-available-height, 100vh) - 2 * var(--_gap));outline:none;overflow-y:auto;overscroll-behavior:contain;padding-block:var(--_inset-block);padding-inline:var(--_inset-inline);pointer-events:auto}[data-ui=menu]>[data-part=content]:focus-visible{outline:none}[data-ui=menu] [data-part=group]{display:grid;grid-column:1 / -1;grid-template-columns:subgrid}[data-ui=menu] [data-part=group-label]{color:var(--_muted);font-size:var(--_secondary-font-size);font-weight:var(--slotted-font-weight-semibold, 600);grid-column:1 / -1;line-height:var(--_secondary-leading);padding-block:var(--slotted-space-2, .25rem);padding-inline:var(--_item-inset)}[data-ui=menu] [data-part=header]{align-items:center;column-gap:var(--slotted-space-5, .75rem);display:grid;grid-column:1 / -1;grid-template-columns:auto minmax(0,1fr);line-height:var(--_leading);padding-block:var(--slotted-space-2, .25rem);padding-inline:var(--_item-inset)}[data-ui=menu] [data-part=header]>:not([data-part=label],[data-part=description]){grid-column:1;grid-row:1 / span 2}[data-ui=menu] [data-part=header]>[data-part=label]{font-weight:var(--slotted-font-weight-semibold, 600)}[data-ui=menu] [data-part=item]{appearance:none;background:transparent;border:0;border-radius:var(--_item-radius);box-sizing:border-box;color:inherit;cursor:pointer;display:grid;font:inherit;grid-column:1 / -1;grid-template-columns:subgrid;align-content:center;line-height:var(--_leading);min-block-size:var(--_item-height);padding-block:var(--slotted-space-2, .25rem);padding-inline:var(--_item-inset);row-gap:var(--slotted-space-1, .125rem);text-align:start;text-decoration:none;transition:background-color var(--slotted-control-transition-duration, var(--slotted-duration-short)) var(--slotted-control-transition-easing, var(--slotted-easing-standard)),color var(--slotted-control-transition-duration, var(--slotted-duration-short)) var(--slotted-control-transition-easing, var(--slotted-easing-standard))}[data-ui=menu] [data-part=item]:focus{background-color:var(--_highlight);color:var(--_accent)}[data-ui=menu] [data-part=item]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, currentColor);outline-offset:calc(-1 * var(--slotted-focus-ring-width, 2px))}[data-ui=menu] [data-part=item]:not([data-disabled]):active{background-color:var(--_highlight-active)}[data-ui=menu] [data-part=item][data-open]{background-color:var(--_highlight)}[data-ui=menu] [data-part=item][data-disabled]{color:var(--slotted-disabled-foreground, #64748b);cursor:not-allowed}[data-ui=menu] [data-part=item][data-disabled]:focus{background-color:var(--_highlight);color:var(--slotted-disabled-foreground, #64748b)}[data-ui=menu] :is([data-part=indicator],[data-part=icon]),[data-ui=menu] [data-part=item][aria-haspopup=menu]>[data-ui=icon]{block-size:1lh}[data-ui=menu] [data-part=indicator]{--slotted-icon-size: var(--_icon-size);align-items:center;display:flex;grid-column:1;grid-row:1;inline-size:var(--_icon-size);justify-content:center;justify-self:center;margin-inline-end:var(--_column-gap);opacity:0;scale:.8;transition:opacity var(--slotted-duration-short) var(--slotted-easing-exit),scale var(--slotted-duration-short) var(--slotted-easing-exit)}[data-ui=menu] [data-part=item][data-checked]>[data-part=indicator]{opacity:1;scale:1;transition:opacity var(--slotted-duration-short) var(--slotted-easing-enter),scale var(--slotted-duration-short) var(--slotted-easing-enter)}[data-ui=menu] [data-part=item][role=menuitemradio]>[data-part=indicator]{--slotted-icon-size: calc(var(--_icon-size) * .7)}[data-ui=menu] [data-part=icon]{--slotted-icon-size: var(--_icon-size);align-items:center;display:flex;grid-column:1;grid-row:1;inline-size:var(--_icon-size);justify-content:center;justify-self:center;margin-inline-end:var(--_column-gap)}[data-ui=menu] [data-part=icon]>*{font-size:var(--_icon-size)}[data-ui=menu] [data-part=label]{grid-column:2;grid-row:1;min-inline-size:0;overflow-wrap:anywhere}[data-ui=menu] [data-part=description]{color:var(--_muted);font-size:var(--_secondary-font-size);grid-column:2;grid-row:2;line-height:var(--_secondary-leading);min-inline-size:0;overflow-wrap:anywhere}[data-ui=menu] [data-part=item][data-disabled]>[data-part=description]{color:inherit}[data-ui=menu] [data-part=meta]{align-items:center;color:var(--_muted);column-gap:var(--slotted-space-2, .25rem);display:flex;font-variant-numeric:tabular-nums;grid-column:3;grid-row:1;justify-self:end;margin-inline-start:var(--slotted-space-6, 1rem);white-space:nowrap}[data-ui=menu] [data-part=shortcut]{color:var(--_muted);grid-column:4;grid-row:1;justify-self:end;margin-inline-start:var(--slotted-space-6, 1rem);white-space:nowrap}[data-ui=menu] [data-part=item][data-disabled]>:is([data-part=shortcut],[data-part=meta]),[data-ui=menu] [data-part=item][data-disabled][aria-haspopup=menu]>[data-ui=icon]{color:inherit}[data-ui=menu] [data-part=item][aria-haspopup=menu]>[data-ui=icon]{--slotted-icon-size: var(--_icon-size);grid-column:4;grid-row:1;justify-self:end;line-height:inherit;margin-inline-start:var(--_column-gap);color:var(--_muted)}[data-ui=menu] [data-part=separator]{background-color:var(--slotted-menu-separator-color, var(--_border-color));block-size:var(--_border-width);border:0;grid-column:1 / -1;margin-block:var(--slotted-space-2, .25rem);margin-inline:0}[data-ui=menu] [data-part=empty]{color:var(--_muted);grid-column:1 / -1;padding-block:var(--slotted-space-5, .75rem);padding-inline:var(--_item-inset);text-align:center}[data-ui=menu]>[data-part=content][data-loading]{cursor:progress}[data-ui=menu] [data-part=item][data-tone=accent]{--_accent: var(--slotted-tone-accent-text);--_highlight: var(--slotted-tone-accent-surface);--_highlight-active: var(--slotted-tone-accent-subtle-active);color:var(--slotted-tone-accent-text)}[data-ui=menu] [data-part=item][data-tone=secondary]{--_accent: var(--slotted-tone-secondary-text);--_highlight: var(--slotted-tone-secondary-surface);--_highlight-active: var(--slotted-tone-secondary-subtle-active);color:var(--slotted-tone-secondary-text)}[data-ui=menu] [data-part=item][data-tone=success]{--_accent: var(--slotted-tone-success-text);--_highlight: var(--slotted-tone-success-surface);--_highlight-active: var(--slotted-tone-success-subtle-active);color:var(--slotted-tone-success-text)}[data-ui=menu] [data-part=item][data-tone=warning]{--_accent: var(--slotted-tone-warning-text);--_highlight: var(--slotted-tone-warning-surface);--_highlight-active: var(--slotted-tone-warning-subtle-active);color:var(--slotted-tone-warning-text)}[data-ui=menu] [data-part=item][data-tone=danger]{--_accent: var(--slotted-tone-danger-text);--_highlight: var(--slotted-tone-danger-surface);--_highlight-active: var(--slotted-tone-danger-subtle-active);color:var(--slotted-tone-danger-text)}[data-ui=menu] [data-part=item][data-tone][data-disabled]{--_accent: var(--slotted-disabled-foreground, #64748b);--_highlight: var(--slotted-menu-highlight, var(--slotted-tone-secondary-subtle-hover));color:var(--slotted-disabled-foreground, #64748b)}@media(forced-colors:active){[data-ui=menu] [data-part=item]:focus{background-color:Highlight;color:HighlightText;forced-color-adjust:none}[data-ui=menu] [data-part=item][data-disabled]:focus{background-color:Highlight;color:GrayText}}}\n", "@layer slotted.components{[data-ui=highlight] [data-part=match]{background-color:var( --slotted-highlight-background, color-mix( in oklab, var(--slotted-tone-accent-text) calc(var(--slotted-highlight-tint-opacity, .075) * 100%), transparent ) );-webkit-box-decoration-break:clone;box-decoration-break:clone;border-radius:var(--slotted-radius-none, 0px);color:var(--slotted-highlight-color, var(--slotted-tone-accent-text));font-weight:inherit;letter-spacing:inherit;padding:0;text-decoration-color:var(--slotted-highlight-rule-color, var(--slotted-tone-accent-border));text-decoration-line:underline;text-decoration-thickness:var(--slotted-border-width-thin, 1px);text-underline-offset:var(--slotted-space-1, .125rem)}[data-ui=highlight] [data-part=match][data-current]{background-color:var(--slotted-highlight-current-background, var(--slotted-tone-accent-solid));color:var(--slotted-highlight-current-color, var(--slotted-tone-accent-on-solid));text-decoration-line:none}[data-ui=highlight]:is([data-disabled],[data-disabled] *) [data-part=match]{background-color:var(--slotted-highlight-disabled-background, transparent);color:inherit;text-decoration-line:underline}@media(forced-colors:active){[data-ui=highlight] [data-part=match],[data-ui=highlight]:is([data-disabled],[data-disabled] *) [data-part=match]{background-color:Mark;color:MarkText;forced-color-adjust:none}[data-ui=highlight] [data-part=match][data-current]{background-color:Highlight;color:HighlightText}}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-describedby", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], openChangeRequest: [{ type: i0.Output, args: ["openChangeRequest"] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], mount: [{ type: i0.Input, args: [{ isSignal: true, alias: "mount", required: false }] }], strategy: [{ type: i0.Input, args: [{ isSignal: true, alias: "strategy", required: false }] }], sideOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "sideOffset", required: false }] }], alignOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignOffset", required: false }] }], collisionPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "collisionPadding", required: false }] }], submenuOpenDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "submenuOpenDelay", required: false }] }], submenuCloseDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "submenuCloseDelay", required: false }] }], typeaheadTimeout: [{ type: i0.Input, args: [{ isSignal: true, alias: "typeaheadTimeout", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loop: [{ type: i0.Input, args: [{ isSignal: true, alias: "loop", required: false }] }], typeahead: [{ type: i0.Input, args: [{ isSignal: true, alias: "typeahead", required: false }] }], openOnHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "openOnHover", required: false }] }], closeOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnSelect", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], closeOnOutsidePress: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnOutsidePress", required: false }] }], flip: [{ type: i0.Input, args: [{ isSignal: true, alias: "flip", required: false }] }], shift: [{ type: i0.Input, args: [{ isSignal: true, alias: "shift", required: false }] }], hideWhenDetached: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideWhenDetached", required: false }] }], portal: [{ type: i0.Input, args: [{ isSignal: true, alias: "portal", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], template: [{ type: i0.ViewChild, args: ['layer', { isSignal: true }] }] } });
+
+/** What ARIA calls each modifier, which is not what a reader sees. */
+const ARIA_MODIFIERS = {
+    alt: 'Alt',
+    ctrl: 'Control',
+    meta: 'Meta',
+    shift: 'Shift',
+};
+/**
+ * The shortcut as `aria-keyshortcuts` states it, or nothing.
+ *
+ * A sequence has no syntax in the attribute, whose separator means *or* rather
+ * than *then*, so a sequence is printed and left unannounced instead of being
+ * announced as something it is not.
+ */
+function announceShortcut(keys, platform) {
+    const steps = parseShortcut(keys);
+    if (steps.length !== 1)
+        return undefined;
+    return steps[0]
+        ?.map((token) => {
+        const canonical = canonicalKey(token);
+        if (canonical === 'mod')
+            return platform === 'mac' ? 'Meta' : 'Control';
+        if (canonical !== undefined && canonical in ARIA_MODIFIERS) {
+            return ARIA_MODIFIERS[canonical];
+        }
+        const word = canonical ?? token;
+        return word.length === 1 ? word.toUpperCase() : `${word[0]?.toUpperCase()}${word.slice(1)}`;
+    })
+        .join('+');
+}
+/** The legends a reader sees, in the order the platform writes them, in the language of `t`. */
+function shortcutLegends(keys, platform, t) {
+    const shortcut = resolveShortcut(keys, { platform, t });
+    return shortcut.steps
+        .map((step) => step.map((key) => key.legend).join(shortcut.separator))
+        .join(` ${shortcut.thenLabel} `);
+}
+/**
+ * One command, one option, or one choice among others.
+ *
+ * A native `button` carrying `role="menuitem"`: the platform gives the press,
+ * the `Enter` and `Space` handling and the pointer semantics, and the role
+ * replaces `button` so a reader hears an item. Which of the three roles it
+ * takes is decided by the attribute the consumer wrote, read once through
+ * `HostAttributeToken`, because one element cannot carry two components.
+ *
+ * A disabled item keeps its place in the ring and takes `aria-disabled`: the
+ * pattern asks that disabled items stay focusable, and the native attribute
+ * would remove them.
+ */
+class SlMenuItem {
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** What typeahead matches on, when the visible label is not the word. */
+    textValue = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "textValue" }] : /* istanbul ignore next */ []));
+    tone = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []));
+    /**
+     * A shortcut in this library's own notation — `Mod+K`. It is printed with the
+     * platform's legends and announced with `aria-keyshortcuts`; the family does
+     * not listen for it, because a menu that bound keys would fire commands while
+     * it was closed.
+     */
+    shortcut = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "shortcut" }] : /* istanbul ignore next */ []));
+    closeOnSelect = input(undefined, { ...(ngDevMode ? { debugName: "closeOnSelect" } : /* istanbul ignore next */ {}), transform: (given) => given === undefined ? undefined : booleanAttribute(given) });
+    /** The value this item stands for inside a radio group. */
+    value = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    checked = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
+    checkedChangeRequest = output();
+    select = output();
+    /** The line under the label, which describes the item rather than naming it. */
+    describedBy = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
+    menu = inject(SlMenu);
+    group = inject(SlMenuRadioGroup, { optional: true });
+    element = inject(ElementRef).nativeElement;
+    platform = resolvePlatform('auto');
+    /** The words a shortcut's keys are written in, from the `keys` catalog of the language in force. */
+    keysT = injectMessages(keysMessages);
+    isCheckbox = inject(new HostAttributeToken('slMenuCheckboxItem'), {
+        optional: true,
+    }) !== null;
+    isRadio = inject(new HostAttributeToken('slMenuRadioItem'), { optional: true }) !== null;
+    isLink = this.element.tagName === 'A';
+    /**
+     * Set by `slMenuTriggerFor` on the same element: an item that opens a
+     * submenu ends in a chevron that points along the reading direction.
+     */
+    opensSubmenu = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "opensSubmenu" }] : /* istanbul ignore next */ []));
+    role = this.isCheckbox
+        ? 'menuitemcheckbox'
+        : this.isRadio
+            ? 'menuitemradio'
+            : 'menuitem';
+    isChecked = computed(() => this.isRadio ? this.group?.value() === this.value() : this.checked(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isChecked" }] : /* istanbul ignore next */ []));
+    legend = computed(() => {
+        const keys = this.shortcut();
+        return keys === undefined ? undefined : shortcutLegends(keys, this.platform, this.keysT);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "legend" }] : /* istanbul ignore next */ []));
+    announced = computed(() => {
+        const keys = this.shortcut();
+        return keys === undefined ? null : (announceShortcut(keys, this.platform) ?? null);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "announced" }] : /* istanbul ignore next */ []));
+    /**
+     * The host is a `button` or an `a`, so the template compiler types the event
+     * as the one thing both have in common and the narrowing happens here.
+     */
+    onClick(event) {
+        /* A click a keyboard produced carries no pointer coordinates, which is how
+           `Enter` on a button is told from a press without listening for both. */
+        const detail = event.detail;
+        this.run(detail === 0 ? 'keyboard' : 'pointer', event);
+    }
+    onKeyDown(source) {
+        const event = source;
+        /* The pattern's optional rule, taken: `Space` on a checkbox or radio item
+           changes the state without closing the menu. */
+        if (event.key !== ' ' || this.role === 'menuitem')
+            return;
+        event.preventDefault();
+        if (this.disabled())
+            return;
+        this.commit('keyboard', event);
+    }
+    /**
+     * The pointer moving over an item focuses it, which keeps exactly one item
+     * highlighted whichever device is driving — and is what lets the stylesheet
+     * paint the highlight on `:focus` rather than splitting it in two.
+     */
+    onPointerMove() {
+        if (this.element.ownerDocument.activeElement === this.element)
+            return;
+        this.element.focus({ preventScroll: true });
+    }
+    commit(reason, source) {
+        if (this.isRadio) {
+            const value = this.value();
+            if (value !== undefined)
+                this.group?.choose(value, reason, source);
+            return;
+        }
+        if (!this.isCheckbox)
+            return;
+        const next = !this.checked();
+        const state = createControllable({
+            initial: this.checked(),
+            onRequest: (request) => this.checkedChangeRequest.emit(request),
+        });
+        if (state.request(next, reason, source))
+            this.checked.set(next);
+    }
+    run(reason, source) {
+        if (this.disabled())
+            return;
+        this.commit(reason, source);
+        let prevented = false;
+        this.select.emit({
+            reason,
+            source,
+            get defaultPrevented() {
+                return prevented;
+            },
+            preventDefault: () => {
+                prevented = true;
+            },
+        });
+        if (prevented)
+            return;
+        /* A checkbox or a radio item keeps the menu open by default: a reader
+           turning three things on would otherwise open it three times. */
+        const closes = this.closeOnSelect() ?? (this.role === 'menuitem' && this.menu.resolvedCloseOnSelect());
+        if (closes)
+            this.menu.closeAll('select', source);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlMenuItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlMenuItem, isStandalone: true, selector: "button[slMenuItem], a[slMenuItem], button[slMenuCheckboxItem], button[slMenuRadioItem]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, textValue: { classPropertyName: "textValue", publicName: "textValue", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, shortcut: { classPropertyName: "shortcut", publicName: "shortcut", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", checkedChangeRequest: "checkedChangeRequest", select: "select" }, host: { attributes: { "data-part": "item", "tabindex": "-1" }, listeners: { "click": "onClick($event)", "keydown": "onKeyDown($event)", "pointermove": "onPointerMove()" }, properties: { "attr.role": "role", "attr.type": "isLink ? null : \"button\"", "attr.aria-checked": "role === \"menuitem\" ? null : isChecked()", "attr.aria-disabled": "disabled() ? true : null", "attr.aria-describedby": "describedBy() ?? null", "attr.aria-keyshortcuts": "announced()", "attr.data-disabled": "disabled() ? \"\" : null", "attr.data-checked": "isChecked() ? \"\" : null", "attr.data-text-value": "textValue() ?? null", "attr.data-tone": "tone() ?? null" } }, exportAs: ["slMenuItem"], ngImport: i0, template: `
+    @if (role !== 'menuitem') {
+      <span data-part="indicator"
+        ><span slIcon><svg slGlyph [name]="role === 'menuitemradio' ? 'dot' : 'check'"></svg></span
+      ></span>
+    }
+    <ng-content select="[slMenuItemIcon]" />
+    <span data-part="label"><ng-content /></span>
+    <ng-content select="[slMenuItemDescription]" />
+    <ng-content select="[slMenuItemMeta]" />
+    @if (legend(); as printed) {
+      <span data-part="shortcut" aria-hidden="true">{{ printed }}</span>
+    }
+    @if (opensSubmenu()) {
+      <span slIcon directional><svg slGlyph name="chevron-right"></svg></span>
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: SlGlyph, selector: "svg[slGlyph]", inputs: ["name", "solid"] }, { kind: "component", type: SlIcon, selector: "[slIcon]", inputs: ["directional", "label", "size", "tone"], exportAs: ["slIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlMenuItem, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'button[slMenuItem], a[slMenuItem], button[slMenuCheckboxItem], button[slMenuRadioItem]',
+                    standalone: true,
+                    exportAs: 'slMenuItem',
+                    imports: [SlGlyph, SlIcon],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: {
+                        'data-part': 'item',
+                        tabindex: '-1',
+                        '[attr.role]': 'role',
+                        '[attr.type]': 'isLink ? null : "button"',
+                        '[attr.aria-checked]': 'role === "menuitem" ? null : isChecked()',
+                        '[attr.aria-disabled]': 'disabled() ? true : null',
+                        '[attr.aria-describedby]': 'describedBy() ?? null',
+                        '[attr.aria-keyshortcuts]': 'announced()',
+                        '[attr.data-disabled]': 'disabled() ? "" : null',
+                        '[attr.data-checked]': 'isChecked() ? "" : null',
+                        '[attr.data-text-value]': 'textValue() ?? null',
+                        '[attr.data-tone]': 'tone() ?? null',
+                        '(click)': 'onClick($event)',
+                        '(keydown)': 'onKeyDown($event)',
+                        '(pointermove)': 'onPointerMove()',
+                    },
+                    template: `
+    @if (role !== 'menuitem') {
+      <span data-part="indicator"
+        ><span slIcon><svg slGlyph [name]="role === 'menuitemradio' ? 'dot' : 'check'"></svg></span
+      ></span>
+    }
+    <ng-content select="[slMenuItemIcon]" />
+    <span data-part="label"><ng-content /></span>
+    <ng-content select="[slMenuItemDescription]" />
+    <ng-content select="[slMenuItemMeta]" />
+    @if (legend(); as printed) {
+      <span data-part="shortcut" aria-hidden="true">{{ printed }}</span>
+    }
+    @if (opensSubmenu()) {
+      <span slIcon directional><svg slGlyph name="chevron-right"></svg></span>
+    }
+  `,
+                }]
+        }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], textValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "textValue", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], shortcut: [{ type: i0.Input, args: [{ isSignal: true, alias: "shortcut", required: false }] }], closeOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnSelect", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], checkedChangeRequest: [{ type: i0.Output, args: ["checkedChangeRequest"] }], select: [{ type: i0.Output, args: ["select"] }] } });
+/** The mark in the item's first column: the consumer's own element. */
+class SlMenuItemIcon {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlMenuItemIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlMenuItemIcon, isStandalone: true, selector: "[slMenuItemIcon]", host: { attributes: { "data-part": "icon" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlMenuItemIcon, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slMenuItemIcon]',
+                    standalone: true,
+                    host: { 'data-part': 'icon' },
+                }]
+        }] });
+/**
+ * The second line, under the label.
+ *
+ * It describes the item rather than naming it: the item points at it with
+ * `aria-describedby`, so a reader hears "Delete document" and then the warning,
+ * instead of one name with a sentence stuck to it.
+ */
+class SlMenuItemDescription {
+    id = `sl-menu-description-${Math.random().toString(36).slice(2, 8)}`;
+    item = inject(SlMenuItem, { optional: true });
+    constructor() {
+        this.item?.describedBy.set(this.id);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlMenuItemDescription, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlMenuItemDescription, isStandalone: true, selector: "[slMenuItemDescription]", host: { attributes: { "data-part": "description" }, properties: { "attr.id": "id" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlMenuItemDescription, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slMenuItemDescription]',
+                    standalone: true,
+                    host: { 'data-part': 'description', '[attr.id]': 'id' },
+                }]
+        }], ctorParameters: () => [] });
+/**
+ * What the item holds or counts — a number, a status, the value a submenu is
+ * set to — in a column of its own before the shortcut or the chevron. It reads
+ * as part of the item's name; typeahead matches the label alone.
+ */
+class SlMenuItemMeta {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlMenuItemMeta, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlMenuItemMeta, isStandalone: true, selector: "[slMenuItemMeta]", host: { attributes: { "data-part": "meta" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlMenuItemMeta, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slMenuItemMeta]',
+                    standalone: true,
+                    host: { 'data-part': 'meta' },
+                }]
+        }] });
+/**
+ * Who the menu belongs to: an avatar, a name, a line under it, above the
+ * commands. Not an item — the arrows and typeahead never reach it, because a
+ * `menu` owns only items, groups and separators — so the surface names it as
+ * its description and a reader hears it once, as the menu opens. The name is a
+ * `data-part="label"` element and the line under it `slMenuItemDescription`;
+ * any other child is the media, set beside both.
+ */
+class SlMenuHeader {
+    id = `sl-menu-header-${Math.random().toString(36).slice(2, 8)}`;
+    menu = inject(SlMenu);
+    constructor() {
+        this.menu.headerId.set(this.id);
+        inject(DestroyRef).onDestroy(() => {
+            if (this.menu.headerId() === this.id)
+                this.menu.headerId.set(null);
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlMenuHeader, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlMenuHeader, isStandalone: true, selector: "[slMenuHeader]", host: { attributes: { "data-part": "header" }, properties: { "attr.id": "id" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlMenuHeader, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slMenuHeader]',
+                    standalone: true,
+                    host: { 'data-part': 'header', '[attr.id]': 'id' },
+                }]
+        }], ctorParameters: () => [] });
+/**
+ * A set of items with a name. The label is inside the group and named by it,
+ * because a heading outside one belongs to nothing a reader can hear.
+ */
+class SlMenuGroup {
+    label = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    labelId = `sl-menu-group-${Math.random().toString(36).slice(2, 8)}`;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlMenuGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlMenuGroup, isStandalone: true, selector: "sl-menu-group", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-part": "group", "role": "group" }, properties: { "attr.aria-labelledby": "label() === undefined ? null : labelId" } }, exportAs: ["slMenuGroup"], ngImport: i0, template: `
+    @if (label(); as words) {
+      <div data-part="group-label" [id]="labelId">{{ words }}</div>
+    }
+    <ng-content />
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlMenuGroup, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sl-menu-group',
+                    standalone: true,
+                    exportAs: 'slMenuGroup',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: {
+                        'data-part': 'group',
+                        role: 'group',
+                        '[attr.aria-labelledby]': 'label() === undefined ? null : labelId',
+                    },
+                    template: `
+    @if (label(); as words) {
+      <div data-part="group-label" [id]="labelId">{{ words }}</div>
+    }
+    <ng-content />
+  `,
+                }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
+/** One value, chosen among the items inside it. */
+class SlMenuRadioGroup {
+    value = model(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    valueChangeRequest = output();
+    choose(next, reason, source) {
+        if (next === this.value())
+            return;
+        const state = createControllable({
+            initial: this.value() ?? '',
+            onRequest: (request) => this.valueChangeRequest.emit(request),
+        });
+        if (state.request(next, reason, source))
+            this.value.set(next);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlMenuRadioGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: SlMenuRadioGroup, isStandalone: true, selector: "sl-menu-radio-group", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", valueChangeRequest: "valueChangeRequest" }, host: { attributes: { "data-part": "group", "role": "group" } }, exportAs: ["slMenuRadioGroup"], ngImport: i0, template: '<ng-content />', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlMenuRadioGroup, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sl-menu-radio-group',
+                    standalone: true,
+                    exportAs: 'slMenuRadioGroup',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: { 'data-part': 'group', role: 'group' },
+                    template: '<ng-content />',
+                }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], valueChangeRequest: [{ type: i0.Output, args: ["valueChangeRequest"] }] } });
+/** Not focusable and not interactive, which is what the pattern asks of it. */
+class SlMenuSeparator {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlMenuSeparator, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlMenuSeparator, isStandalone: true, selector: "hr[slMenuSeparator]", host: { attributes: { "data-part": "separator", "role": "separator", "aria-orientation": "horizontal" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlMenuSeparator, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'hr[slMenuSeparator]',
+                    standalone: true,
+                    host: { 'data-part': 'separator', role: 'separator', 'aria-orientation': 'horizontal' },
+                }]
+        }] });
+/** What a menu whose items were all filtered away says instead of nothing. */
+class SlMenuEmpty {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlMenuEmpty, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlMenuEmpty, isStandalone: true, selector: "[slMenuEmpty]", host: { attributes: { "data-part": "empty" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlMenuEmpty, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slMenuEmpty]',
+                    standalone: true,
+                    host: { 'data-part': 'empty' },
+                }]
+        }] });
+
+/**
+ * The control that opens a menu.
+ *
+ * It is put on the consumer's own control — `@slotted/angular` composes with a
+ * directive where React composes with a `render` prop, because that is what
+ * each ecosystem writes. The three places it can sit decide what it becomes: a
+ * plain control on its own, one of a bar's `menuitem`s inside `sl-menubar`, and
+ * an item of the surface above when the control also carries `slMenuItem`.
+ */
+class SlMenuTrigger {
+    /** The menu this control opens. */
+    menu = input.required({ ...(ngDevMode ? { debugName: "menu" } : /* istanbul ignore next */ {}), alias: 'slMenuTriggerFor' });
+    element = inject(ElementRef).nativeElement;
+    bar = inject(MENUBAR_SURFACE, { optional: true });
+    /** The surface above, when this control is an item of one. */
+    item = inject(SlMenuItem, { optional: true, self: true });
+    parent = inject(SlMenu, { optional: true });
+    isButton = this.element.tagName === 'BUTTON';
+    onBar = this.parent === null && this.bar !== null;
+    timer;
+    intent = null;
+    isSubmenu = computed(() => this.parent !== null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isSubmenu" }] : /* istanbul ignore next */ []));
+    constructor() {
+        const destroyRef = inject(DestroyRef);
+        this.item?.opensSubmenu.set(true);
+        /* The trigger binds no `data-part` and no `role`. Two directives binding one
+           attribute on one element race, and the order they run in is the
+           compiler's: a `null` erased the part `slMenuItem` writes on a submenu's
+           trigger, and the attribute's first value overwrote the `menu-trigger` part
+           the split button binds. On a plain control both stay the control's own, so
+           `slButton` stays the root of its family; on a submenu's item they are
+           `slMenuItem`'s; only a bar's trigger takes them from here, written once
+           because a bar's trigger is the bar's own element. */
+        if (this.onBar) {
+            this.element.setAttribute('data-part', 'trigger');
+            this.element.setAttribute('role', 'menuitem');
+        }
+        /* The menu is told which control anchors it, and a bar is told which
+           trigger answers to which menu, both as soon as the input resolves. */
+        effect(() => {
+            const menu = this.menu();
+            menu.trigger.set(this.element);
+            if (!this.onBar || this.bar === null)
+                return;
+            this.bar.register(menu.name(), this.element);
+        });
+        destroyRef.onDestroy(() => {
+            this.cancelPending();
+            if (this.onBar && this.bar !== null)
+                this.bar.register(this.menu().name(), null);
+        });
+    }
+    cancelPending() {
+        if (this.timer !== undefined)
+            clearTimeout(this.timer);
+        this.timer = undefined;
+        this.intent?.destroy();
+        this.intent = null;
+    }
+    openWith(entry, reason, source) {
+        const menu = this.menu();
+        menu.entry.current = entry;
+        menu.toggle(true, reason, source);
+    }
+    onClick(event) {
+        const menu = this.menu();
+        if (menu.resolvedDisabled())
+            return;
+        /* A submenu already open stays open under a press: the press is how a
+           reader on a touch screen reaches it, not how they close it. */
+        if (menu.isOpen() && this.isSubmenu())
+            return;
+        menu.entry.current = 'first';
+        menu.toggle(!menu.isOpen(), 'pointer', event);
+    }
+    onKeyDown(source) {
+        const event = source;
+        const menu = this.menu();
+        if (menu.resolvedDisabled())
+            return;
+        const direction = getComputedStyle(this.element).direction === 'rtl' ? 'rtl' : 'ltr';
+        const inlineEnd = direction === 'rtl' ? 'ArrowLeft' : 'ArrowRight';
+        const vertical = this.bar?.orientation() === 'vertical';
+        /* On a bar the block axis opens the menu and the inline axis moves along
+           the bar; on a vertical bar the two exchange places, which is the swap the
+           pattern's fifth note describes. A submenu's item opens on the inline end
+           in both, because that is where the submenu is. */
+        const opensDown = !this.isSubmenu() && (!this.onBar || !vertical) && event.key === 'ArrowDown';
+        const opensUp = !this.isSubmenu() && (!this.onBar || !vertical) && event.key === 'ArrowUp';
+        const opensInline = event.key === inlineEnd && (this.isSubmenu() || (this.onBar && vertical));
+        if (opensDown || opensInline) {
+            event.preventDefault();
+            event.stopPropagation();
+            this.openWith('first', 'keyboard', event);
+            return;
+        }
+        if (opensUp) {
+            event.preventDefault();
+            this.openWith('last', 'keyboard', event);
+            return;
+        }
+        if (this.isSubmenu() && (event.key === 'Enter' || event.key === ' ')) {
+            event.preventDefault();
+            event.stopPropagation();
+            this.openWith('first', 'keyboard', event);
+        }
+    }
+    /**
+     * Hover opens a submenu, and opens a bar's menu only once the bar already has
+     * one open: moving the pointer along a closed bar opens nothing, and along an
+     * open one switches menus.
+     */
+    onPointerEnter(event) {
+        const menu = this.menu();
+        if (menu.resolvedDisabled())
+            return;
+        this.cancelPending();
+        if (this.isSubmenu()) {
+            if (!menu.resolvedOpenOnHover() || menu.isOpen())
+                return;
+            this.timer = setTimeout(() => this.openWith('first', 'pointer', event), menu.resolvedSubmenuOpenDelay());
+            return;
+        }
+        if (this.onBar && this.bar !== null && this.bar.value() !== undefined) {
+            if (this.bar.value() === menu.name())
+                return;
+            this.element.focus({ preventScroll: true });
+            this.openWith('first', 'pointer', event);
+        }
+    }
+    /**
+     * The grace area: the submenu stays open while the pointer's own path still
+     * points into it, so the diagonal from this item to the surface may cross
+     * three items it has no interest in.
+     */
+    onPointerLeave(event) {
+        if (this.timer !== undefined) {
+            clearTimeout(this.timer);
+            this.timer = undefined;
+        }
+        const menu = this.menu();
+        if (!this.isSubmenu() || !menu.isOpen())
+            return;
+        const surface = menu.surface();
+        if (surface === null)
+            return;
+        this.intent?.destroy();
+        this.intent = createPointerIntent({
+            target: () => surface.getBoundingClientRect(),
+            origin: () => this.element.getBoundingClientRect(),
+            timeout: menu.resolvedSubmenuCloseDelay(),
+            onSettled: () => {
+                if (this.element.matches(':hover') || surface.matches(':hover'))
+                    return;
+                menu.toggle(false, 'pointer', event);
+            },
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlMenuTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.7", type: SlMenuTrigger, isStandalone: true, selector: "[slMenuTriggerFor]", inputs: { menu: { classPropertyName: "menu", publicName: "slMenuTriggerFor", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "click": "onClick($event)", "keydown": "onKeyDown($event)", "pointerenter": "onPointerEnter($event)", "pointerleave": "onPointerLeave($event)" }, properties: { "attr.aria-haspopup": "\"menu\"", "attr.aria-expanded": "menu().isOpen()", "attr.aria-controls": "menu().isOpen() ? menu().contentId : null", "attr.id": "menu().triggerId", "attr.type": "isButton ? \"button\" : null", "attr.data-open": "menu().isOpen() ? \"\" : null", "attr.data-disabled": "menu().resolvedDisabled() ? \"\" : null", "attr.aria-disabled": "menu().resolvedDisabled() ? true : null" } }, exportAs: ["slMenuTrigger"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlMenuTrigger, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slMenuTriggerFor]',
+                    standalone: true,
+                    exportAs: 'slMenuTrigger',
+                    host: {
+                        '[attr.aria-haspopup]': '"menu"',
+                        '[attr.aria-expanded]': 'menu().isOpen()',
+                        '[attr.aria-controls]': 'menu().isOpen() ? menu().contentId : null',
+                        '[attr.id]': 'menu().triggerId',
+                        '[attr.type]': 'isButton ? "button" : null',
+                        '[attr.data-open]': 'menu().isOpen() ? "" : null',
+                        '[attr.data-disabled]': 'menu().resolvedDisabled() ? "" : null',
+                        '[attr.aria-disabled]': 'menu().resolvedDisabled() ? true : null',
+                        '(click)': 'onClick($event)',
+                        '(keydown)': 'onKeyDown($event)',
+                        '(pointerenter)': 'onPointerEnter($event)',
+                        '(pointerleave)': 'onPointerLeave($event)',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { menu: [{ type: i0.Input, args: [{ isSignal: true, alias: "slMenuTriggerFor", required: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { MENUBAR_SURFACE, MENU_DEFAULTS, MENU_ITEM_SELECTOR, SlMenu, SlMenuEmpty, SlMenuGroup, SlMenuHeader, SlMenuItem, SlMenuItemDescription, SlMenuItemIcon, SlMenuItemMeta, SlMenuRadioGroup, SlMenuSeparator, SlMenuTrigger, announceShortcut, injectMenuDefaults, provideMenuDefaults, shortcutLegends };
+//# sourceMappingURL=slotted-angular-menu.mjs.map