@aceshooting/lyra-ui 2.0.0 → 2.2.0

package/dist/components/menu/menu-item.class.js

@@ -0,0 +1,150 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, nothing, svg } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { LyraElement } from '../../internal/lyra-element.js';
+import { styles } from './menu-item.styles.js';
+// Mirrors the shared icon set's viewBox/stroke conventions
+// (internal/icons.ts's chevronIcon()/closeIcon()/etc.) without adding a
+// checkmark glyph to that module -- it's off limits here -- so this one-off
+// icon still reads as part of the same visual language as the rest of the
+// library's inline icons. Same approach lyra-checkbox's own local
+// checkmark/indeterminate glyphs (and lyra-chat-message's local retryIcon())
+// take for the identical reason.
+const GLYPH_VIEW_BOX = '0 0 24 24';
+const GLYPH_STROKE_WIDTH = '1.75';
+function checkmarkGlyph() {
+    return svg `
+    <svg
+      part="checkmark"
+      width="1em"
+      height="1em"
+      viewBox=${GLYPH_VIEW_BOX}
+      fill="none"
+      stroke="currentColor"
+      stroke-width=${GLYPH_STROKE_WIDTH}
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      aria-hidden="true"
+      focusable="false"
+    ><polyline points="5 12.5 10 17.5 19 6.5"></polyline></svg>
+  `;
+}
+export class LyraMenuItem extends LyraElement {
+    constructor() {
+        super(...arguments);
+        /** An id/value the parent `<lyra-menu>`'s `lyra-menu-select` detail keys off of. */
+        this.value = '';
+        /** Disables selection and excludes this item from `<lyra-menu>`'s roving-tabindex nav entirely. */
+        this.disabled = false;
+        /** Visual treatment for a dangerous action (e.g. "Delete") — tints the row with `--lyra-color-danger`. */
+        this.destructive = false;
+        /** `'checkbox'` renders `role="menuitemcheckbox"` with a toggleable `checked` state and a
+         *  checkmark glyph, mirroring `wa-dropdown-item`'s identical `type` option — see the class doc. */
+        this.type = 'normal';
+        /** Whether a `type="checkbox"` item is checked. Meaningless (ignored) for `type="normal"`. */
+        this.checked = false;
+        // [part='icon'] never matches a bare :empty selector -- see menu-item.styles.ts's
+        // own comment on that part. Same fix as lyra-tool-call-chip's hasDetailSlot.
+        this.hasIconSlot = false;
+        this.onIconSlotChange = (e) => {
+            this.hasIconSlot = e.target.assignedElements({ flatten: true }).length > 0;
+        };
+    }
+    static { this.styles = [LyraElement.styles, styles]; }
+    connectedCallback() {
+        super.connectedCallback();
+        // A safe, focusable-but-out-of-tab-order baseline before <lyra-menu> ever
+        // gets a chance to assign roving-tabindex state (e.g. a standalone
+        // fixture in a test, or the brief window before the parent's own
+        // slotchange handler runs). <lyra-menu> is the sole subsequent owner of
+        // this property -- see the class doc.
+        if (this.tabIndex !== 0)
+            this.tabIndex = -1;
+    }
+    willUpdate(changed) {
+        // role/aria-disabled/aria-checked live on the host (see the class doc),
+        // so they're plain imperative attribute writes here rather than part of
+        // render()'s shadow-DOM template -- mirrors lyra-tree-node's identical
+        // willUpdate.
+        const isCheckbox = this.type === 'checkbox';
+        this.setAttribute('role', isCheckbox ? 'menuitemcheckbox' : 'menuitem');
+        if (isCheckbox) {
+            this.setAttribute('aria-checked', this.checked ? 'true' : 'false');
+        }
+        else {
+            // Kept absent entirely for type="normal" -- see the class doc's "no
+            // role, rendering, or event differences" guarantee for that default.
+            this.removeAttribute('aria-checked');
+        }
+        if (this.disabled) {
+            this.setAttribute('aria-disabled', 'true');
+            // Defense-in-depth mirroring connectedCallback's baseline above:
+            // <lyra-menu>'s roving-tabindex bookkeeping (activeIndex) only gets a
+            // chance to resync once real focus actually moves (via its own
+            // focusin listener), so a `disabled` flip must proactively strip this
+            // item out of the roving target and drop any focus it's currently
+            // holding right here -- regardless of what the parent's activeIndex
+            // still thinks -- so a disabled item can never remain the roving
+            // target or retain focus.
+            if (changed.has('disabled')) {
+                this.tabIndex = -1;
+                if (document.activeElement === this)
+                    this.blur();
+            }
+        }
+        else {
+            this.removeAttribute('aria-disabled');
+        }
+        if (changed.has('disabled')) {
+            this.emit('lyra-menu-item-state-change', { disabled: this.disabled, hidden: this.hidden });
+        }
+    }
+    /** Fires `lyra-menu-item-select` (no-op while `disabled`). Called by this element's own
+     *  click handler, and by `<lyra-menu>`'s Enter/Space keydown handling of the active item.
+     *  For `type="checkbox"`, also toggles `checked` and fires `lyra-menu-item-change` first --
+     *  see the class doc. */
+    select() {
+        if (this.disabled)
+            return;
+        if (this.type === 'checkbox') {
+            this.checked = !this.checked;
+            this.emit('lyra-menu-item-change', { value: this.value, checked: this.checked });
+        }
+        this.emit('lyra-menu-item-select');
+    }
+    render() {
+        return html `
+      <span part="base" @click=${() => this.select()}>
+        <span part="icon" aria-hidden="true" ?hidden=${!this.hasIconSlot}>
+          <slot name="icon" @slotchange=${this.onIconSlotChange}></slot>
+        </span>
+        <span part="label"><slot></slot></span>
+        ${this.type === 'checkbox' && this.checked ? checkmarkGlyph() : nothing}
+      </span>
+    `;
+    }
+}
+__decorate([
+    property()
+], LyraMenuItem.prototype, "value", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LyraMenuItem.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LyraMenuItem.prototype, "destructive", void 0);
+__decorate([
+    property()
+], LyraMenuItem.prototype, "type", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LyraMenuItem.prototype, "checked", void 0);
+__decorate([
+    state()
+], LyraMenuItem.prototype, "hasIconSlot", void 0);
+//# sourceMappingURL=menu-item.class.js.map

package/dist/components/menu/menu-item.class.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-item.class.js","sourceRoot":"","sources":["../../../src/components/menu/menu-item.class.ts"],"names":[],"mappings":"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"}

package/dist/components/menu/menu-item.d.ts

@@ -1,62 +1,2 @@
-import { type TemplateResult } from 'lit';
-import { LyraElement } from '../../internal/lyra-element.js';
-/**
- * `<lyra-menu-item>` — a single action row inside `<lyra-menu>`'s default
- * slot. Not meaningful on its own (there is no standalone "click a menu item"
- * use case) — it exists purely as `<lyra-menu>`'s light-DOM child, the same
- * relationship `<lyra-option>` has to `<lyra-combobox>`/`<lyra-select>`.
- *
- * `role="menuitem"` and the roving `tabindex` both live on *this host
- * element*, not an internal shadow-DOM button — mirroring `<lyra-tree-node>`'s
- * identical choice (see that class's doc). `<lyra-menu>` is the sole owner of
- * this element's `tabIndex`: it flips exactly one navigable item's `tabIndex`
- * to `0` (the rest sit at `-1`) as its roving-tabindex highlight moves, and
- * calls `.focus()` directly on this host to move real DOM focus there.
- * `[part="base"]` is purely a visual box with no interactive semantics of its
- * own — see the class doc on `<lyra-menu>` for why real DOM focus (rather
- * than `aria-activedescendant`) was chosen for this pair.
- *
- * Enter/Space activation is handled by `<lyra-menu>`'s own delegated
- * `keydown` listener calling `select()` on whichever item is currently
- * roving-focused (mirrors `<lyra-tree>` calling `current.select()` from its
- * own keydown handler) — this element only wires a plain `click` listener
- * itself, so `select()` fires identically whether the item was reached by
- * mouse or keyboard.
- *
- * @customElement lyra-menu-item
- * @slot - The item's label content.
- * @slot icon - Optional leading icon.
- * @event lyra-menu-item-select - This item was activated (click, or the
- * parent `<lyra-menu>`'s own Enter/Space handling of the roving-focused
- * item). No detail payload — a listener already has `event.target` (this
- * element) to read `value` off of, and `<lyra-menu>` itself consumes this
- * event to close and re-fire it as its own consolidated `lyra-menu-select`
- * (`detail: { value }`) rather than requiring a consumer to listen on every
- * individual item — listen there instead unless you specifically need a
- * per-item handler.
- * @csspart base - The row (`role` lives on the host — see the class doc).
- * @csspart icon - Wrapper around the `icon` slot. Not rendered at all when the slot is empty.
- * @csspart label - Wrapper around the default slot.
- */
-export declare class LyraMenuItem extends LyraElement {
-    static styles: import("lit").CSSResultGroup[];
-    /** An id/value the parent `<lyra-menu>`'s `lyra-menu-select` detail keys off of. */
-    value: string;
-    /** Disables selection and excludes this item from `<lyra-menu>`'s roving-tabindex nav entirely. */
-    disabled: boolean;
-    /** Visual treatment for a dangerous action (e.g. "Delete") — tints the row with `--lyra-color-danger`. */
-    destructive: boolean;
-    private hasIconSlot;
-    connectedCallback(): void;
-    protected willUpdate(): void;
-    /** Fires `lyra-menu-item-select` (no-op while `disabled`). Called by this element's own
-     *  click handler, and by `<lyra-menu>`'s Enter/Space keydown handling of the active item. */
-    select(): void;
-    private onIconSlotChange;
-    render(): TemplateResult;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'lyra-menu-item': LyraMenuItem;
-    }
-}
+export * from './menu-item.class.js';
+//# sourceMappingURL=menu-item.d.ts.map

package/dist/components/menu/menu-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-item.d.ts","sourceRoot":"","sources":["../../../src/components/menu/menu-item.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC"}

package/dist/components/menu/menu-item.js

@@ -1,119 +1,5 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { html } from 'lit';
-import { property, state } from 'lit/decorators.js';
-import { LyraElement } from '../../internal/lyra-element.js';
+export * from './menu-item.class.js';
+import { LyraMenuItem } from './menu-item.class.js';
 import { defineElement } from '../../internal/prefix.js';
-import { styles } from './menu-item.styles.js';
-/**
- * `<lyra-menu-item>` — a single action row inside `<lyra-menu>`'s default
- * slot. Not meaningful on its own (there is no standalone "click a menu item"
- * use case) — it exists purely as `<lyra-menu>`'s light-DOM child, the same
- * relationship `<lyra-option>` has to `<lyra-combobox>`/`<lyra-select>`.
- *
- * `role="menuitem"` and the roving `tabindex` both live on *this host
- * element*, not an internal shadow-DOM button — mirroring `<lyra-tree-node>`'s
- * identical choice (see that class's doc). `<lyra-menu>` is the sole owner of
- * this element's `tabIndex`: it flips exactly one navigable item's `tabIndex`
- * to `0` (the rest sit at `-1`) as its roving-tabindex highlight moves, and
- * calls `.focus()` directly on this host to move real DOM focus there.
- * `[part="base"]` is purely a visual box with no interactive semantics of its
- * own — see the class doc on `<lyra-menu>` for why real DOM focus (rather
- * than `aria-activedescendant`) was chosen for this pair.
- *
- * Enter/Space activation is handled by `<lyra-menu>`'s own delegated
- * `keydown` listener calling `select()` on whichever item is currently
- * roving-focused (mirrors `<lyra-tree>` calling `current.select()` from its
- * own keydown handler) — this element only wires a plain `click` listener
- * itself, so `select()` fires identically whether the item was reached by
- * mouse or keyboard.
- *
- * @customElement lyra-menu-item
- * @slot - The item's label content.
- * @slot icon - Optional leading icon.
- * @event lyra-menu-item-select - This item was activated (click, or the
- * parent `<lyra-menu>`'s own Enter/Space handling of the roving-focused
- * item). No detail payload — a listener already has `event.target` (this
- * element) to read `value` off of, and `<lyra-menu>` itself consumes this
- * event to close and re-fire it as its own consolidated `lyra-menu-select`
- * (`detail: { value }`) rather than requiring a consumer to listen on every
- * individual item — listen there instead unless you specifically need a
- * per-item handler.
- * @csspart base - The row (`role` lives on the host — see the class doc).
- * @csspart icon - Wrapper around the `icon` slot. Not rendered at all when the slot is empty.
- * @csspart label - Wrapper around the default slot.
- */
-export class LyraMenuItem extends LyraElement {
-    constructor() {
-        super(...arguments);
-        /** An id/value the parent `<lyra-menu>`'s `lyra-menu-select` detail keys off of. */
-        this.value = '';
-        /** Disables selection and excludes this item from `<lyra-menu>`'s roving-tabindex nav entirely. */
-        this.disabled = false;
-        /** Visual treatment for a dangerous action (e.g. "Delete") — tints the row with `--lyra-color-danger`. */
-        this.destructive = false;
-        // [part='icon'] never matches a bare :empty selector -- see menu-item.styles.ts's
-        // own comment on that part. Same fix as lyra-tool-call-chip's hasDetailSlot.
-        this.hasIconSlot = false;
-        this.onIconSlotChange = (e) => {
-            this.hasIconSlot = e.target.assignedElements({ flatten: true }).length > 0;
-        };
-    }
-    static { this.styles = [LyraElement.styles, styles]; }
-    connectedCallback() {
-        super.connectedCallback();
-        // A safe, focusable-but-out-of-tab-order baseline before <lyra-menu> ever
-        // gets a chance to assign roving-tabindex state (e.g. a standalone
-        // fixture in a test, or the brief window before the parent's own
-        // slotchange handler runs). <lyra-menu> is the sole subsequent owner of
-        // this property -- see the class doc.
-        if (this.tabIndex !== 0)
-            this.tabIndex = -1;
-    }
-    willUpdate() {
-        // role/aria-disabled live on the host (see the class doc), so they're
-        // plain imperative attribute writes here rather than part of render()'s
-        // shadow-DOM template -- mirrors lyra-tree-node's identical willUpdate.
-        this.setAttribute('role', 'menuitem');
-        if (this.disabled) {
-            this.setAttribute('aria-disabled', 'true');
-        }
-        else {
-            this.removeAttribute('aria-disabled');
-        }
-    }
-    /** Fires `lyra-menu-item-select` (no-op while `disabled`). Called by this element's own
-     *  click handler, and by `<lyra-menu>`'s Enter/Space keydown handling of the active item. */
-    select() {
-        if (this.disabled)
-            return;
-        this.emit('lyra-menu-item-select');
-    }
-    render() {
-        return html `
-      <span part="base" @click=${() => this.select()}>
-        <span part="icon" aria-hidden="true" ?hidden=${!this.hasIconSlot}>
-          <slot name="icon" @slotchange=${this.onIconSlotChange}></slot>
-        </span>
-        <span part="label"><slot></slot></span>
-      </span>
-    `;
-    }
-}
-__decorate([
-    property()
-], LyraMenuItem.prototype, "value", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], LyraMenuItem.prototype, "disabled", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], LyraMenuItem.prototype, "destructive", void 0);
-__decorate([
-    state()
-], LyraMenuItem.prototype, "hasIconSlot", void 0);
 defineElement('menu-item', LyraMenuItem);
+//# sourceMappingURL=menu-item.js.map

package/dist/components/menu/menu-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-item.js","sourceRoot":"","sources":["../../../src/components/menu/menu-item.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,aAAa,CAAC,WAAW,EAAE,YAAY,CAAC,CAAC"}

package/dist/components/menu/menu-item.styles.d.ts

@@ -1 +1,2 @@
 export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=menu-item.styles.d.ts.map

package/dist/components/menu/menu-item.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-item.styles.d.ts","sourceRoot":"","sources":["../../../src/components/menu/menu-item.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAyElB,CAAC"}

package/dist/components/menu/menu-item.styles.js

@@ -23,7 +23,7 @@ export const styles = css `
     cursor: pointer;
     font: inherit;
     color: inherit;
-    line-height: 1.3;
+    line-height: var(--lyra-line-height-snug);
   }
   [part='base']:hover {
     background: var(--lyra-color-brand-quiet);
@@ -47,7 +47,7 @@ export const styles = css `
     flex: 0 0 auto;
     align-items: center;
     justify-content: center;
-    line-height: 1;
+    line-height: var(--lyra-line-height-none);
   }
   /* [part='icon'][hidden] rather than a bare :empty selector -- the part
      always contains a literal <slot> child element regardless of assigned
@@ -64,4 +64,13 @@ export const styles = css `
     text-overflow: ellipsis;
     white-space: nowrap;
   }
+  /* Only ever present in the DOM at all for a checked type="checkbox" item
+     (see menu-item.ts's render()) -- no [hidden]-toggling needed, unlike
+     [part='icon'] above, since there's no always-present <slot> child here
+     to keep visually empty in between. */
+  [part='checkmark'] {
+    flex: 0 0 auto;
+    color: var(--lyra-color-brand);
+  }
 `;
+//# sourceMappingURL=menu-item.styles.js.map

package/dist/components/menu/menu-item.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-item.styles.js","sourceRoot":"","sources":["../../../src/components/menu/menu-item.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyExB,CAAC"}

package/dist/components/menu/menu.class.d.ts

@@ -0,0 +1,173 @@
+import { type TemplateResult, type PropertyValues } from 'lit';
+import type { Placement } from '@floating-ui/dom';
+import { LyraElement } from '../../internal/lyra-element.js';
+import './menu-item.class.js';
+export interface MenuSelectDetail {
+    value: string;
+}
+/**
+ * `<lyra-menu>` — an anchored dropdown of `<lyra-menu-item>` actions, opened
+ * from a consumer-supplied trigger (typically an icon button). A close, drop-
+ * in-shaped replacement for reaching outside this library for a third-party
+ * dropdown to build a gear menu, an avatar menu, or a history row's overflow
+ * menu: click the trigger, a positioned menu appears, clicking an item both
+ * performs the action *and* closes the menu.
+ *
+ * **ARIA pattern — `role="menu"`/`role="menuitem"` with real roving DOM
+ * focus, not a listbox.** Two coherent, mutually-exclusive shapes were
+ * available here: (a) `role="listbox"`/`role="option"` with
+ * `aria-activedescendant`, the pattern `<lyra-select>`'s trigger-button +
+ * popup listbox uses, where DOM focus never leaves the trigger; or (b)
+ * `role="menu"`/`role="menuitem"` with real focus moving between actual
+ * focusable rows, the WAI-ARIA "menu button" pattern. This picks (b):
+ * `<lyra-menu-item>` rows are real, independently-focusable elements (see
+ * that class's own doc), which is the more natural fit for a menu
+ * specifically — unlike a listbox's rows, a menu's rows are conventionally
+ * button-/link-shaped, and every well-known native/OS menu (and this
+ * family's own `<lyra-tree>`/`<lyra-tree-node>` pair, which this component's
+ * roving-tabindex plumbing directly mirrors) already moves real focus rather
+ * than merely a virtual `aria-activedescendant` pointer. `role`/`tabIndex`
+ * are consistently the menu-button shape throughout — never mixed with
+ * listbox/option.
+ *
+ * Interaction contract (mirrors the WAI-ARIA APG "menu button" pattern):
+ * - Click the trigger (or Enter/Space on it, via the trigger's own native
+ *   `click` activation) toggles the menu, moving focus to the first
+ *   non-disabled item on open.
+ * - ArrowDown/ArrowUp on the trigger while closed also open it, focusing the
+ *   first/last non-disabled item respectively.
+ * - Once open, ArrowDown/ArrowUp move the roving focus among non-disabled
+ *   items (wrapping past either end — the recommended, and more common,
+ *   menu-widget behavior, unlike `<lyra-select>`'s clamped listbox nav).
+ *   Home/End jump to the first/last non-disabled item. Enter/Space activate
+ *   the focused item. Escape closes and returns focus to the trigger. Tab
+ *   closes the menu without trapping focus (the browser's own default Tab
+ *   behavior proceeds untouched). A printable keypress runs type-ahead:
+ *   roving focus jumps to the next non-disabled item whose text starts with
+ *   the accumulated buffer, cycling from just after the active item (mirrors
+ *   `<lyra-select>`'s identical listbox type-ahead).
+ * - A click outside both the trigger and the open popup closes it (mirrors
+ *   `<lyra-select>`'s `onDocPointer` exactly) — this does *not* refocus the
+ *   trigger, since the outside click itself already moved focus somewhere
+ *   the user chose; Escape and a committed selection *do* refocus the
+ *   trigger, since those are dismissals with nowhere else for focus to go.
+ *
+ * The trigger element itself is read from the `trigger` slot's assigned
+ * element (first one, if several are assigned) and enhanced imperatively
+ * with `aria-haspopup="menu"`/`aria-expanded`/`aria-controls` — the same
+ * "reach into a consumer-owned light-DOM element to complete its a11y
+ * wiring" approach `<lyra-dialog>` documents for its own heading detection,
+ * necessary here because those attributes belong on the actual interactive
+ * trigger, which lives outside this component's own shadow root.
+ *
+ * The popup is always rendered (never `display:none`) so `.focus()` calls on
+ * its content work synchronously the instant it opens — visually hidden via
+ * `visibility`/`opacity` instead (identical to `<lyra-select>`'s own
+ * `[part="listbox"]`). `visibility` is an inherited CSS property that
+ * pierces the `<slot>` projection boundary, so every closed-state
+ * `<lyra-menu-item>` is automatically excluded from sequential (Tab-key)
+ * navigation with no separate JS bookkeeping.
+ *
+ * @customElement lyra-menu
+ * @slot trigger - The consumer's own trigger element (typically an icon
+ * button). Clicking it toggles the menu; it's positioned against via
+ * `internal/positioner.js`'s `place()`.
+ * @slot - `<lyra-menu-item>` elements, plus optionally plain `<hr>` dividers
+ * between groups (native `<hr>` already carries an implicit `separator`
+ * role, matching what `role="menu"` expects between item groups).
+ * @event lyra-show - The menu opened. Not fired for markup that renders
+ * `open` true from the start (mirrors `<lyra-select>`'s identical guard).
+ * @event lyra-hide - The menu closed. Same first-render guard as `lyra-show`.
+ * @event lyra-menu-select - A `<lyra-menu-item>` was activated. `detail: {
+ * value }` — the consolidated re-fire of that item's own
+ * `lyra-menu-item-select` (see `<lyra-menu-item>`'s doc for why listening
+ * here, rather than on every item, is the recommended approach). Always
+ * followed by the menu closing and focus returning to the trigger.
+ * @csspart trigger - The wrapper around the `trigger` slot (the positioning anchor).
+ * @csspart popup - The positioned floating panel.
+ * @csspart list - The `role="menu"` container wrapping the default slot.
+ */
+export interface LyraMenuEventMap {
+    'lyra-show': CustomEvent<undefined>;
+    'lyra-hide': CustomEvent<undefined>;
+    'lyra-menu-select': CustomEvent<MenuSelectDetail>;
+}
+export declare class LyraMenu extends LyraElement<LyraMenuEventMap> {
+    static styles: import("lit").CSSResultGroup[];
+    /** Whether the menu is open. */
+    open: boolean;
+    /**
+     * Optional placement override forwarded to `place()`. Defaults to whatever `place()` itself
+     * defaults to. A `left`/`right` side is resolved through `rtlAwareSide` semantics (see
+     * `internal/rtl.ts`) so e.g. `placement="left-start"` still anchors to the menu's trailing edge
+     * under RTL rather than pinning to the physical left.
+     */
+    placement?: Placement;
+    /** Accessible name for the `role="menu"` popup — override with something
+     *  specific (e.g. "Row actions") when a page has more than one menu. */
+    label: string;
+    private items;
+    private activeIndex;
+    private triggerEl?;
+    private cleanup?;
+    private itemStateObserver?;
+    private _isFirstUpdate;
+    private pendingFocus;
+    private readonly listId;
+    private typeAheadBuffer;
+    private typeAheadTimer?;
+    protected willUpdate(): void;
+    protected updated(changed: PropertyValues): void;
+    private reposition;
+    disconnectedCallback(): void;
+    private show;
+    /** `refocusTrigger` is only ever `true` for a dismissal with nowhere else
+     *  for focus to land (Escape, a committed selection) -- see the class
+     *  doc's interaction contract for why an outside click deliberately omits it. */
+    private hide;
+    private onDocPointer;
+    private onTriggerClick;
+    private onTriggerKeyDown;
+    private onTriggerSlotChange;
+    /** `aria-haspopup`/`aria-expanded`/`aria-controls` belong on the actual
+     *  interactive trigger, which is consumer-owned light-DOM content outside
+     *  this component's own shadow root -- see the class doc. */
+    private syncTriggerA11y;
+    private onItemsSlotChange;
+    private isNavigable;
+    /** Rehomes roving focus immediately when an active item becomes disabled or hidden. */
+    private onItemStateChange;
+    private onItemSelect;
+    /** Flips exactly one non-disabled item's `tabIndex` to `0` (the roving
+     *  target) and every other item's to `-1` -- see `<lyra-menu-item>`'s doc
+     *  for why this is the sole authority over that property. */
+    private applyRovingTabIndex;
+    /** Moves the roving focus (and real DOM focus) to the first/last
+     *  non-disabled item. A no-op when there are none -- focus then simply
+     *  stays on the trigger (see onTriggerKeyDown's Escape safety net). */
+    private focusRoving;
+    private setActiveItem;
+    /** Resyncs `activeIndex` (and the roving `tabindex`) to wherever real DOM
+     *  focus actually lands, for any path that doesn't go through
+     *  `setActiveItem()` -- e.g. a real mousedown on an item, which focuses it
+     *  even while `disabled` (`tabIndex="-1"` remains mouse-focusable per
+     *  spec). Without this, `activeIndex` goes stale the moment focus moves any
+     *  other way, and subsequent Arrow-key navigation computes its next item
+     *  from that stale position instead of from where focus actually is. A
+     *  no-op for `setActiveItem()`'s own `.focus()` call, since `activeIndex`
+     *  there is already set to match before focus moves. */
+    private onListFocusIn;
+    private onListKeyDown;
+    /** Standard WAI-ARIA APG menu-button type-ahead: moves the roving focus to
+     *  the next non-disabled item whose text content starts with the
+     *  accumulated buffer, cycling from just after the currently active item
+     *  -- mirrors `<lyra-select>`'s identical listbox type-ahead. */
+    private typeAhead;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-menu': LyraMenu;
+    }
+}
+//# sourceMappingURL=menu.class.d.ts.map

package/dist/components/menu/menu.class.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu.class.d.ts","sourceRoot":"","sources":["../../../src/components/menu/menu.class.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAErE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAM7D,OAAO,sBAAsB,CAAC;AAE9B,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiFG;AACH,MAAM,WAAW,gBAAgB;IAC/B,WAAW,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACpC,WAAW,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACpC,kBAAkB,EAAE,WAAW,CAAC,gBAAgB,CAAC,CAAC;CACnD;AACD,qBAAa,QAAS,SAAQ,WAAW,CAAC,gBAAgB,CAAC;IACzD,MAAM,CAAC,MAAM,iCAAgC;IAE7C,gCAAgC;IACY,IAAI,UAAS;IAEzD;;;;;OAKG;IAC0B,SAAS,CAAC,EAAE,SAAS,CAAC;IAEnD;4EACwE;IAC5D,KAAK,SAAU;IAQ3B,OAAO,CAAC,KAAK,CAAsB;IACnC,OAAO,CAAC,WAAW,CAAM;IAEzB,OAAO,CAAC,SAAS,CAAC,CAAc;IAChC,OAAO,CAAC,OAAO,CAAC,CAAa;IAC7B,OAAO,CAAC,iBAAiB,CAAC,CAAmB;IAC7C,OAAO,CAAC,cAAc,CAAQ;IAC9B,OAAO,CAAC,YAAY,CAA6B;IACjD,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAuB;IAK9C,OAAO,CAAC,eAAe,CAAM;IAC7B,OAAO,CAAC,cAAc,CAAC,CAAgC;IAEvD,SAAS,CAAC,UAAU,IAAI,IAAI,CAE3B;IAED,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI,CA4B/C;IAED,OAAO,CAAC,UAAU;IAUlB,oBAAoB,IAAI,IAAI,CAc3B;IAED,OAAO,CAAC,IAAI;IAMZ;;qFAEiF;IACjF,OAAO,CAAC,IAAI;IAQZ,OAAO,CAAC,YAAY,CAElB;IAEF,OAAO,CAAC,cAAc,CAEpB;IAEF,OAAO,CAAC,gBAAgB,CAsBtB;IAEF,OAAO,CAAC,mBAAmB,CAczB;IAEF;;iEAE6D;IAC7D,OAAO,CAAC,eAAe;IAOvB,OAAO,CAAC,iBAAiB,CAsBvB;IAEF,OAAO,CAAC,WAAW;IAInB,uFAAuF;IACvF,OAAO,CAAC,iBAAiB,CAgBvB;IAEF,OAAO,CAAC,YAAY,CAKlB;IAEF;;iEAE6D;IAC7D,OAAO,CAAC,mBAAmB;IAM3B;;2EAEuE;IACvE,OAAO,CAAC,WAAW;IAOnB,OAAO,CAAC,aAAa;IAMrB;;;;;;;;4DAQwD;IACxD,OAAO,CAAC,aAAa,CAOnB;IAEF,OAAO,CAAC,aAAa,CAiDnB;IAEF;;;qEAGiE;IACjE,OAAO,CAAC,SAAS;IAqBjB,MAAM,IAAI,cAAc,CAoBvB;CACF;AAGD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}