@aceshooting/lyra-ui 2.1.0 → 2.2.0

package/dist/components/kbd/kbd.class.js

@@ -0,0 +1,230 @@
+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 } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { LyraElement } from '../../internal/lyra-element.js';
+import { styles } from './kbd.styles.js';
+// A deliberately small map — just the modifier-adjacent/navigation keys
+// common enough in real shortcuts to be worth a friendly glyph. Anything not
+// listed here (e.g. 'f1', 'k', a punctuation key) falls through to the
+// generic "render as typed, upper-case single letters" rule in
+// `shortcutTokenLabel` below, per this component's spec.
+//
+// 'plus'/'minus' exist specifically so a shortcut that includes a literal
+// "+" or "-" key (e.g. the classic zoom-in shortcut) has a way to say so:
+// the '+'-separated `keys` grammar can't itself carry a literal "+" token
+// (it's the delimiter), so callers spell it as the word instead.
+const NAMED_KEY_LABELS = {
+    enter: { visual: '↵', word: 'Enter' },
+    esc: { visual: 'Esc', word: 'Escape' },
+    escape: { visual: 'Esc', word: 'Escape' },
+    tab: { visual: 'Tab', word: 'Tab' },
+    space: { visual: 'Space', word: 'Space' },
+    backspace: { visual: '⌫', word: 'Backspace' },
+    delete: { visual: 'Del', word: 'Delete' },
+    home: { visual: 'Home', word: 'Home' },
+    end: { visual: 'End', word: 'End' },
+    pageup: { visual: 'PgUp', word: 'Page Up' },
+    pagedown: { visual: 'PgDn', word: 'Page Down' },
+    arrowup: { visual: '↑', word: 'Arrow Up' },
+    arrowdown: { visual: '↓', word: 'Arrow Down' },
+    arrowleft: { visual: '←', word: 'Arrow Left' },
+    arrowright: { visual: '→', word: 'Arrow Right' },
+    plus: { visual: '+', word: 'Plus' },
+    minus: { visual: '−', word: 'Minus' },
+};
+/**
+ * Resolves one `+`-separated token of a `keys` string to its rendered glyph
+ * and spelled-out word, given whether the shortcut is being shown on macOS.
+ *
+ * Exported as a pure function (parameterized on `isMac` rather than reading
+ * the module-scope platform constant directly) so both the macOS and
+ * non-macOS branches are directly unit-testable without having to spoof
+ * `navigator` in a browser test environment that only ever runs as one
+ * platform.
+ */
+export function shortcutTokenLabel(rawToken, isMac) {
+    const token = rawToken.trim();
+    const lower = token.toLowerCase();
+    // 'mod' is the platform-neutral primary modifier: Command on macOS,
+    // Control everywhere else. 'ctrl' is deliberately distinct — it always
+    // means the literal Control key, even on macOS, for shortcuts that are
+    // specifically Ctrl-based (e.g. terminal Ctrl+C) rather than
+    // platform-adapted.
+    if (lower === 'mod')
+        return isMac ? { visual: '⌘', word: 'Command' } : { visual: 'Ctrl', word: 'Control' };
+    if (lower === 'ctrl' || lower === 'control')
+        return { visual: 'Ctrl', word: 'Control' };
+    if (lower === 'alt')
+        return isMac ? { visual: '⌥', word: 'Option' } : { visual: 'Alt', word: 'Alt' };
+    if (lower === 'shift')
+        return { visual: '⇧', word: 'Shift' };
+    const named = NAMED_KEY_LABELS[lower];
+    if (named)
+        return named;
+    // Anything else renders as typed (preserving the caller's own casing),
+    // except a bare single letter/digit, which is upper-cased for a
+    // consistent key-cap look ('k' and 'K' both render 'K').
+    if (token.length === 1) {
+        const upper = token.toUpperCase();
+        return { visual: upper, word: upper };
+    }
+    return { visual: token, word: token };
+}
+/** Splits a `keys` string (e.g. `'mod+shift+p'`) into its resolved token
+ *  labels, dropping empty segments from stray/leading/trailing `+`s. */
+export function parseShortcut(keys, isMac) {
+    return keys
+        .split('+')
+        .map((t) => t.trim())
+        .filter((t) => t.length > 0)
+        .map((t) => shortcutTokenLabel(t, isMac));
+}
+/**
+ * Detects macOS to decide whether `mod`/`alt` render their Mac glyphs (⌘/⌥)
+ * or their generic-platform text (Ctrl/Alt). Prefers the modern
+ * `navigator.userAgentData` (Client Hints) API when the browser exposes it,
+ * falling back through `navigator.platform` and finally a `navigator.userAgent`
+ * substring check — all three are deprecated/non-standard to varying
+ * degrees (`userAgentData` is Chromium-only so far; `platform` is
+ * long-deprecated; `userAgent` sniffing is a last resort) but remain, in
+ * combination, the practical cross-browser way to answer "is this macOS"
+ * today with no dependency.
+ */
+function detectIsMac() {
+    if (typeof navigator === 'undefined')
+        return false;
+    const uaData = navigator.userAgentData;
+    if (uaData?.platform)
+        return uaData.platform.toLowerCase().includes('mac');
+    if (navigator.platform)
+        return /mac/i.test(navigator.platform);
+    return /mac/i.test(navigator.userAgent ?? '');
+}
+// Computed once at module scope, not per-instance/per-render — a page's
+// platform never changes mid-session, so there is nothing to gain (and a
+// little cost, however small) from re-detecting it on every <lyra-kbd>
+// instance or every re-render.
+const IS_MAC = detectIsMac();
+// The one "is there real content" predicate shared by both the initial
+// synchronous seed (willUpdate, reading light-DOM childNodes) and the
+// runtime slotchange handler (reading assignedNodes) — using two different
+// predicates for the same question let them disagree: a text-only check
+// would seed correctly for whitespace-only text but (wrongly) treat a
+// content-less icon element as empty, and a node-count-only check would
+// treat *any* assigned node — including a whitespace-only text node — as
+// real content. Counting every element node as real content (regardless of
+// its own text) while requiring non-whitespace text from text nodes gets
+// both cases right in one place.
+const hasRealContent = (nodes) => Array.from(nodes).some((n) => n.nodeType === Node.ELEMENT_NODE || (n.textContent ?? '').trim().length > 0);
+/**
+ * `<lyra-kbd>` — a small chip representing a keyboard shortcut, rendering
+ * the platform-appropriate glyph for cross-platform modifier keys (⌘ on
+ * macOS, "Ctrl" elsewhere) from a single platform-neutral `keys` string.
+ *
+ * `keys` is a `+`-separated sequence of tokens, e.g. `"mod+k"` or
+ * `"mod+shift+p"`. Recognized modifier tokens: `mod` (the platform-neutral
+ * primary modifier — ⌘ on macOS, "Ctrl" elsewhere), `alt` (⌥ / "Alt"),
+ * `shift` (⇧ on every platform), and `ctrl` (always the literal Control
+ * key, distinct from `mod`, for a shortcut that's specifically Ctrl even on
+ * macOS). Any other token renders as typed, except a bare single
+ * letter/digit which is upper-cased, with a small built-in map of friendly
+ * labels for common named keys (`enter` → `↵`, `esc` → "Esc", the four
+ * arrow keys → arrow glyphs, plus `tab`/`space`/`backspace`/`delete`/`home`/
+ * `end`/`pageup`/`pagedown`/`plus`/`minus`). `enter` renders as its `↵`
+ * glyph (not the word "Enter") to match the other single-glyph modifier/
+ * arrow keys visually — its spelled-out word form still appears in the
+ * computed `aria-label`.
+ *
+ * Each token renders as its own key cap (`part="key"`); consecutive caps
+ * are joined by a small "+" separator between them, matching how most
+ * cross-platform shortcut documentation (including on macOS, despite the
+ * OS's own native shortcut hints usually running the glyphs together with
+ * no separator) reads unambiguously regardless of how many/which glyphs are
+ * involved.
+ *
+ * The default slot is not used for the normal glyph rendering above — it's
+ * an escape hatch for fully custom content (e.g. an icon instead of a text
+ * glyph) that, when non-empty, replaces the `keys`-driven rendering
+ * entirely and stops this component from asserting its own `aria-label`,
+ * leaving the slotted content to carry its own accessible name.
+ *
+ * @customElement lyra-kbd
+ * @slot - Optional override for fully custom key-cap content, replacing the
+ * `keys`-driven rendering. Leave empty to use `keys`.
+ * @csspart base - The chip's root element.
+ * @csspart key - Each rendered key cap (one per token in `keys`).
+ */
+export class LyraKbd extends LyraElement {
+    constructor() {
+        super(...arguments);
+        /** A `+`-separated shortcut, e.g. `'mod+k'`. See the class doc for the
+         *  full token grammar. */
+        this.keys = '';
+        // Real (non-whitespace) light-DOM content overrides the keys-driven
+        // rendering below — same "seed synchronously, refine on slotchange"
+        // pattern as lyra-checkbox's hasLabelSlot/lyra-citation-badge's
+        // hasPreviewSlot, so a declaratively-slotted override doesn't flash the
+        // keys rendering for one frame before the first slotchange event.
+        this.hasCustomContent = false;
+        this.onSlotChange = (e) => {
+            this.hasCustomContent = hasRealContent(e.target.assignedNodes({ flatten: true }));
+        };
+    }
+    static { this.styles = [LyraElement.styles, styles]; }
+    willUpdate() {
+        if (!this.hasUpdated) {
+            this.hasCustomContent = hasRealContent(this.childNodes);
+        }
+    }
+    render() {
+        const explicitLabel = this.getAttribute('aria-label');
+        if (this.hasCustomContent) {
+            return html `
+        <span part="base" aria-label=${explicitLabel || nothing}>
+          <slot @slotchange=${this.onSlotChange}></slot>
+        </span>
+      `;
+        }
+        const tokens = parseShortcut(this.keys, IS_MAC);
+        // role="img" treats the chip as one opaque unit (matching
+        // lyra-context-meter's/lyra-chart's canvas usage of the same pattern):
+        // the individual glyphs and "+" separators aren't real words, so
+        // exposing them as separate accessible-tree text would read worse than
+        // the single spelled-out aria-label below. An empty `keys` (and no
+        // explicit override) renders nothing visible, so it's marked
+        // aria-hidden instead of exposed as a nameless image.
+        //
+        // role/aria-hidden are both derived from this same `ariaLabel` value
+        // (rather than each independently re-deriving "is there a label" from
+        // tokens.length/explicitLabel) so role="img" can never be absent while
+        // aria-label is present — that combination is an aria-prohibited-attr
+        // violation (a nameless-but-labeled, role-less element).
+        const ariaLabel = explicitLabel || tokens.map((t) => t.word).join('+');
+        return html `
+      <span
+        part="base"
+        role=${ariaLabel ? 'img' : nothing}
+        aria-hidden=${ariaLabel ? nothing : 'true'}
+        aria-label=${ariaLabel || nothing}
+      >
+        ${tokens.map((t, i) => html `
+            ${i > 0 ? html `<span class="sep" aria-hidden="true">+</span>` : nothing}
+            <span part="key">${t.visual}</span>
+          `)}
+        <slot @slotchange=${this.onSlotChange} hidden></slot>
+      </span>
+    `;
+    }
+}
+__decorate([
+    property()
+], LyraKbd.prototype, "keys", void 0);
+__decorate([
+    state()
+], LyraKbd.prototype, "hasCustomContent", void 0);
+//# sourceMappingURL=kbd.class.js.map

package/dist/components/kbd/kbd.class.js.map

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

package/dist/components/kbd/kbd.d.ts

@@ -1,77 +1,2 @@
-import { type TemplateResult } from 'lit';
-import { LyraElement } from '../../internal/lyra-element.js';
-/** A single rendered key token: the compact glyph shown in the key cap, and
- *  the spelled-out word used in the chip's `aria-label` (glyphs like `⌘`/
- *  `⇧`/`⌥` are not reliably announced across every screen reader/platform
- *  combination, so the accessible name always spells them out in full). */
-export interface KbdKeyLabel {
-    visual: string;
-    word: string;
-}
-/**
- * Resolves one `+`-separated token of a `keys` string to its rendered glyph
- * and spelled-out word, given whether the shortcut is being shown on macOS.
- *
- * Exported as a pure function (parameterized on `isMac` rather than reading
- * the module-scope platform constant directly) so both the macOS and
- * non-macOS branches are directly unit-testable without having to spoof
- * `navigator` in a browser test environment that only ever runs as one
- * platform.
- */
-export declare function shortcutTokenLabel(rawToken: string, isMac: boolean): KbdKeyLabel;
-/** Splits a `keys` string (e.g. `'mod+shift+p'`) into its resolved token
- *  labels, dropping empty segments from stray/leading/trailing `+`s. */
-export declare function parseShortcut(keys: string, isMac: boolean): KbdKeyLabel[];
-/**
- * `<lyra-kbd>` — a small chip representing a keyboard shortcut, rendering
- * the platform-appropriate glyph for cross-platform modifier keys (⌘ on
- * macOS, "Ctrl" elsewhere) from a single platform-neutral `keys` string.
- *
- * `keys` is a `+`-separated sequence of tokens, e.g. `"mod+k"` or
- * `"mod+shift+p"`. Recognized modifier tokens: `mod` (the platform-neutral
- * primary modifier — ⌘ on macOS, "Ctrl" elsewhere), `alt` (⌥ / "Alt"),
- * `shift` (⇧ on every platform), and `ctrl` (always the literal Control
- * key, distinct from `mod`, for a shortcut that's specifically Ctrl even on
- * macOS). Any other token renders as typed, except a bare single
- * letter/digit which is upper-cased, with a small built-in map of friendly
- * labels for common named keys (`enter` → `↵`, `esc` → "Esc", the four
- * arrow keys → arrow glyphs, plus `tab`/`space`/`backspace`/`delete`/`home`/
- * `end`/`pageup`/`pagedown`/`plus`/`minus`). `enter` renders as its `↵`
- * glyph (not the word "Enter") to match the other single-glyph modifier/
- * arrow keys visually — its spelled-out word form still appears in the
- * computed `aria-label`.
- *
- * Each token renders as its own key cap (`part="key"`); consecutive caps
- * are joined by a small "+" separator between them, matching how most
- * cross-platform shortcut documentation (including on macOS, despite the
- * OS's own native shortcut hints usually running the glyphs together with
- * no separator) reads unambiguously regardless of how many/which glyphs are
- * involved.
- *
- * The default slot is not used for the normal glyph rendering above — it's
- * an escape hatch for fully custom content (e.g. an icon instead of a text
- * glyph) that, when non-empty, replaces the `keys`-driven rendering
- * entirely and stops this component from asserting its own `aria-label`,
- * leaving the slotted content to carry its own accessible name.
- *
- * @customElement lyra-kbd
- * @slot - Optional override for fully custom key-cap content, replacing the
- * `keys`-driven rendering. Leave empty to use `keys`.
- * @csspart base - The chip's root element.
- * @csspart key - Each rendered key cap (one per token in `keys`).
- */
-export declare class LyraKbd extends LyraElement {
-    static styles: import("lit").CSSResultGroup[];
-    /** A `+`-separated shortcut, e.g. `'mod+k'`. See the class doc for the
-     *  full token grammar. */
-    keys: string;
-    private hasCustomContent;
-    protected willUpdate(): void;
-    private onSlotChange;
-    render(): TemplateResult;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'lyra-kbd': LyraKbd;
-    }
-}
+export * from './kbd.class.js';
+//# sourceMappingURL=kbd.d.ts.map

package/dist/components/kbd/kbd.d.ts.map

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

package/dist/components/kbd/kbd.js

@@ -1,231 +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, nothing } from 'lit';
-import { property, state } from 'lit/decorators.js';
-import { LyraElement } from '../../internal/lyra-element.js';
+export * from './kbd.class.js';
+import { LyraKbd } from './kbd.class.js';
 import { defineElement } from '../../internal/prefix.js';
-import { styles } from './kbd.styles.js';
-// A deliberately small map — just the modifier-adjacent/navigation keys
-// common enough in real shortcuts to be worth a friendly glyph. Anything not
-// listed here (e.g. 'f1', 'k', a punctuation key) falls through to the
-// generic "render as typed, upper-case single letters" rule in
-// `shortcutTokenLabel` below, per this component's spec.
-//
-// 'plus'/'minus' exist specifically so a shortcut that includes a literal
-// "+" or "-" key (e.g. the classic zoom-in shortcut) has a way to say so:
-// the '+'-separated `keys` grammar can't itself carry a literal "+" token
-// (it's the delimiter), so callers spell it as the word instead.
-const NAMED_KEY_LABELS = {
-    enter: { visual: '↵', word: 'Enter' },
-    esc: { visual: 'Esc', word: 'Escape' },
-    escape: { visual: 'Esc', word: 'Escape' },
-    tab: { visual: 'Tab', word: 'Tab' },
-    space: { visual: 'Space', word: 'Space' },
-    backspace: { visual: '⌫', word: 'Backspace' },
-    delete: { visual: 'Del', word: 'Delete' },
-    home: { visual: 'Home', word: 'Home' },
-    end: { visual: 'End', word: 'End' },
-    pageup: { visual: 'PgUp', word: 'Page Up' },
-    pagedown: { visual: 'PgDn', word: 'Page Down' },
-    arrowup: { visual: '↑', word: 'Arrow Up' },
-    arrowdown: { visual: '↓', word: 'Arrow Down' },
-    arrowleft: { visual: '←', word: 'Arrow Left' },
-    arrowright: { visual: '→', word: 'Arrow Right' },
-    plus: { visual: '+', word: 'Plus' },
-    minus: { visual: '−', word: 'Minus' },
-};
-/**
- * Resolves one `+`-separated token of a `keys` string to its rendered glyph
- * and spelled-out word, given whether the shortcut is being shown on macOS.
- *
- * Exported as a pure function (parameterized on `isMac` rather than reading
- * the module-scope platform constant directly) so both the macOS and
- * non-macOS branches are directly unit-testable without having to spoof
- * `navigator` in a browser test environment that only ever runs as one
- * platform.
- */
-export function shortcutTokenLabel(rawToken, isMac) {
-    const token = rawToken.trim();
-    const lower = token.toLowerCase();
-    // 'mod' is the platform-neutral primary modifier: Command on macOS,
-    // Control everywhere else. 'ctrl' is deliberately distinct — it always
-    // means the literal Control key, even on macOS, for shortcuts that are
-    // specifically Ctrl-based (e.g. terminal Ctrl+C) rather than
-    // platform-adapted.
-    if (lower === 'mod')
-        return isMac ? { visual: '⌘', word: 'Command' } : { visual: 'Ctrl', word: 'Control' };
-    if (lower === 'ctrl' || lower === 'control')
-        return { visual: 'Ctrl', word: 'Control' };
-    if (lower === 'alt')
-        return isMac ? { visual: '⌥', word: 'Option' } : { visual: 'Alt', word: 'Alt' };
-    if (lower === 'shift')
-        return { visual: '⇧', word: 'Shift' };
-    const named = NAMED_KEY_LABELS[lower];
-    if (named)
-        return named;
-    // Anything else renders as typed (preserving the caller's own casing),
-    // except a bare single letter/digit, which is upper-cased for a
-    // consistent key-cap look ('k' and 'K' both render 'K').
-    if (token.length === 1) {
-        const upper = token.toUpperCase();
-        return { visual: upper, word: upper };
-    }
-    return { visual: token, word: token };
-}
-/** Splits a `keys` string (e.g. `'mod+shift+p'`) into its resolved token
- *  labels, dropping empty segments from stray/leading/trailing `+`s. */
-export function parseShortcut(keys, isMac) {
-    return keys
-        .split('+')
-        .map((t) => t.trim())
-        .filter((t) => t.length > 0)
-        .map((t) => shortcutTokenLabel(t, isMac));
-}
-/**
- * Detects macOS to decide whether `mod`/`alt` render their Mac glyphs (⌘/⌥)
- * or their generic-platform text (Ctrl/Alt). Prefers the modern
- * `navigator.userAgentData` (Client Hints) API when the browser exposes it,
- * falling back through `navigator.platform` and finally a `navigator.userAgent`
- * substring check — all three are deprecated/non-standard to varying
- * degrees (`userAgentData` is Chromium-only so far; `platform` is
- * long-deprecated; `userAgent` sniffing is a last resort) but remain, in
- * combination, the practical cross-browser way to answer "is this macOS"
- * today with no dependency.
- */
-function detectIsMac() {
-    if (typeof navigator === 'undefined')
-        return false;
-    const uaData = navigator.userAgentData;
-    if (uaData?.platform)
-        return uaData.platform.toLowerCase().includes('mac');
-    if (navigator.platform)
-        return /mac/i.test(navigator.platform);
-    return /mac/i.test(navigator.userAgent ?? '');
-}
-// Computed once at module scope, not per-instance/per-render — a page's
-// platform never changes mid-session, so there is nothing to gain (and a
-// little cost, however small) from re-detecting it on every <lyra-kbd>
-// instance or every re-render.
-const IS_MAC = detectIsMac();
-// The one "is there real content" predicate shared by both the initial
-// synchronous seed (willUpdate, reading light-DOM childNodes) and the
-// runtime slotchange handler (reading assignedNodes) — using two different
-// predicates for the same question let them disagree: a text-only check
-// would seed correctly for whitespace-only text but (wrongly) treat a
-// content-less icon element as empty, and a node-count-only check would
-// treat *any* assigned node — including a whitespace-only text node — as
-// real content. Counting every element node as real content (regardless of
-// its own text) while requiring non-whitespace text from text nodes gets
-// both cases right in one place.
-const hasRealContent = (nodes) => Array.from(nodes).some((n) => n.nodeType === Node.ELEMENT_NODE || (n.textContent ?? '').trim().length > 0);
-/**
- * `<lyra-kbd>` — a small chip representing a keyboard shortcut, rendering
- * the platform-appropriate glyph for cross-platform modifier keys (⌘ on
- * macOS, "Ctrl" elsewhere) from a single platform-neutral `keys` string.
- *
- * `keys` is a `+`-separated sequence of tokens, e.g. `"mod+k"` or
- * `"mod+shift+p"`. Recognized modifier tokens: `mod` (the platform-neutral
- * primary modifier — ⌘ on macOS, "Ctrl" elsewhere), `alt` (⌥ / "Alt"),
- * `shift` (⇧ on every platform), and `ctrl` (always the literal Control
- * key, distinct from `mod`, for a shortcut that's specifically Ctrl even on
- * macOS). Any other token renders as typed, except a bare single
- * letter/digit which is upper-cased, with a small built-in map of friendly
- * labels for common named keys (`enter` → `↵`, `esc` → "Esc", the four
- * arrow keys → arrow glyphs, plus `tab`/`space`/`backspace`/`delete`/`home`/
- * `end`/`pageup`/`pagedown`/`plus`/`minus`). `enter` renders as its `↵`
- * glyph (not the word "Enter") to match the other single-glyph modifier/
- * arrow keys visually — its spelled-out word form still appears in the
- * computed `aria-label`.
- *
- * Each token renders as its own key cap (`part="key"`); consecutive caps
- * are joined by a small "+" separator between them, matching how most
- * cross-platform shortcut documentation (including on macOS, despite the
- * OS's own native shortcut hints usually running the glyphs together with
- * no separator) reads unambiguously regardless of how many/which glyphs are
- * involved.
- *
- * The default slot is not used for the normal glyph rendering above — it's
- * an escape hatch for fully custom content (e.g. an icon instead of a text
- * glyph) that, when non-empty, replaces the `keys`-driven rendering
- * entirely and stops this component from asserting its own `aria-label`,
- * leaving the slotted content to carry its own accessible name.
- *
- * @customElement lyra-kbd
- * @slot - Optional override for fully custom key-cap content, replacing the
- * `keys`-driven rendering. Leave empty to use `keys`.
- * @csspart base - The chip's root element.
- * @csspart key - Each rendered key cap (one per token in `keys`).
- */
-export class LyraKbd extends LyraElement {
-    constructor() {
-        super(...arguments);
-        /** A `+`-separated shortcut, e.g. `'mod+k'`. See the class doc for the
-         *  full token grammar. */
-        this.keys = '';
-        // Real (non-whitespace) light-DOM content overrides the keys-driven
-        // rendering below — same "seed synchronously, refine on slotchange"
-        // pattern as lyra-checkbox's hasLabelSlot/lyra-citation-badge's
-        // hasPreviewSlot, so a declaratively-slotted override doesn't flash the
-        // keys rendering for one frame before the first slotchange event.
-        this.hasCustomContent = false;
-        this.onSlotChange = (e) => {
-            this.hasCustomContent = hasRealContent(e.target.assignedNodes({ flatten: true }));
-        };
-    }
-    static { this.styles = [LyraElement.styles, styles]; }
-    willUpdate() {
-        if (!this.hasUpdated) {
-            this.hasCustomContent = hasRealContent(this.childNodes);
-        }
-    }
-    render() {
-        const explicitLabel = this.getAttribute('aria-label');
-        if (this.hasCustomContent) {
-            return html `
-        <span part="base" aria-label=${explicitLabel || nothing}>
-          <slot @slotchange=${this.onSlotChange}></slot>
-        </span>
-      `;
-        }
-        const tokens = parseShortcut(this.keys, IS_MAC);
-        // role="img" treats the chip as one opaque unit (matching
-        // lyra-context-meter's/lyra-chart's canvas usage of the same pattern):
-        // the individual glyphs and "+" separators aren't real words, so
-        // exposing them as separate accessible-tree text would read worse than
-        // the single spelled-out aria-label below. An empty `keys` (and no
-        // explicit override) renders nothing visible, so it's marked
-        // aria-hidden instead of exposed as a nameless image.
-        //
-        // role/aria-hidden are both derived from this same `ariaLabel` value
-        // (rather than each independently re-deriving "is there a label" from
-        // tokens.length/explicitLabel) so role="img" can never be absent while
-        // aria-label is present — that combination is an aria-prohibited-attr
-        // violation (a nameless-but-labeled, role-less element).
-        const ariaLabel = explicitLabel || tokens.map((t) => t.word).join('+');
-        return html `
-      <span
-        part="base"
-        role=${ariaLabel ? 'img' : nothing}
-        aria-hidden=${ariaLabel ? nothing : 'true'}
-        aria-label=${ariaLabel || nothing}
-      >
-        ${tokens.map((t, i) => html `
-            ${i > 0 ? html `<span class="sep" aria-hidden="true">+</span>` : nothing}
-            <span part="key">${t.visual}</span>
-          `)}
-        <slot @slotchange=${this.onSlotChange} hidden></slot>
-      </span>
-    `;
-    }
-}
-__decorate([
-    property()
-], LyraKbd.prototype, "keys", void 0);
-__decorate([
-    state()
-], LyraKbd.prototype, "hasCustomContent", void 0);
 defineElement('kbd', LyraKbd);
+//# sourceMappingURL=kbd.js.map

package/dist/components/kbd/kbd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kbd.js","sourceRoot":"","sources":["../../../src/components/kbd/kbd.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AACzC,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,aAAa,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC"}

package/dist/components/kbd/kbd.styles.d.ts

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

package/dist/components/kbd/kbd.styles.d.ts.map

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

package/dist/components/kbd/kbd.styles.js

@@ -16,8 +16,8 @@ export const styles = css `
        — and have more complete glyph coverage — in the UI font than in a
        monospace stack that may not even ship those symbols. */
     font-family: var(--lyra-font);
-    font-size: 0.8125rem;
-    line-height: 1.3;
+    font-size: var(--lyra-font-size-sm);
+    line-height: var(--lyra-line-height-snug);
     color: var(--lyra-color-text-quiet);
   }
 
@@ -26,23 +26,23 @@ export const styles = css `
     align-items: center;
     justify-content: center;
     box-sizing: border-box;
-    min-inline-size: 1.5em;
-    padding: 0.0625rem var(--lyra-space-xs);
-    border: 1px solid var(--lyra-color-border);
+    min-inline-size: var(--lyra-size-1-5em);
+    padding: var(--lyra-size-0-0625rem) var(--lyra-space-xs);
+    border: var(--lyra-border-width-thin) solid var(--lyra-color-border);
     border-radius: calc(var(--lyra-radius) * 0.6);
     background: var(--lyra-color-surface);
     color: var(--lyra-color-text);
-    font-weight: 500;
+    font-weight: var(--lyra-font-weight-medium);
     /* A subtle bottom-weighted inset shadow reads as a slightly-raised
        physical key cap rather than a flat label chip, echoing the
        lyra-chip/lyra-checkbox box's own bordered-box treatment. */
-    box-shadow: inset 0 -1px 0 var(--lyra-color-border);
+    box-shadow: inset 0 var(--lyra-size-neg-1px) 0 var(--lyra-color-border);
   }
 
   .sep {
-    margin-inline: 0.1875rem;
+    margin-inline: var(--lyra-size-0-1875rem);
     color: var(--lyra-color-text-quiet);
-    font-size: 0.75em;
+    font-size: var(--lyra-size-0-75em);
     user-select: none;
   }
 
@@ -50,3 +50,4 @@ export const styles = css `
     vertical-align: middle;
   }
 `;
+//# sourceMappingURL=kbd.styles.js.map

package/dist/components/kbd/kbd.styles.js.map

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