@aceshooting/lyra-ui 2.1.0 → 2.3.0

package/dist/components/json-viewer/json-viewer.js

@@ -1,361 +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 { repeat } from 'lit/directives/repeat.js';
-import { LyraElement } from '../../internal/lyra-element.js';
+export * from './json-viewer.class.js';
+import { LyraJsonViewer } from './json-viewer.class.js';
 import { defineElement } from '../../internal/prefix.js';
-import { chevronIcon } from '../../internal/icons.js';
-import { styles } from './json-viewer.styles.js';
-const EMPTY_SEARCH = {
-    keyMatches: new Set(),
-    valueMatches: new Set(),
-    forceExpand: new Set(),
-    paths: new Set(),
-};
-function isPlainContainer(value) {
-    return typeof value === 'object' && value !== null && !Array.isArray(value);
-}
-/** `[key, value]` pairs for an object's own enumerable properties or an array's indices; `[]` for anything else. */
-function entriesOf(value) {
-    if (Array.isArray(value))
-        return value.map((v, i) => [i, v]);
-    if (isPlainContainer(value))
-        return Object.entries(value);
-    return [];
-}
-function valueType(value) {
-    if (value === null)
-        return 'null';
-    if (value === undefined)
-        return 'undefined';
-    if (Array.isArray(value))
-        return 'array';
-    const t = typeof value;
-    if (t === 'string' || t === 'number' || t === 'boolean')
-        return t;
-    if (t === 'object')
-        return 'object';
-    // function/symbol/bigint -- not valid JSON, but rendering *something*
-    // sensible beats throwing on a value a caller handed us by mistake.
-    return 'string';
-}
-function formatPrimitive(value, type) {
-    switch (type) {
-        case 'string':
-            // `type` here also covers valueType()'s function/symbol/bigint
-            // fallback (see the comment there) -- JSON.stringify() throws a
-            // TypeError for a BigInt, so only an actual string gets the
-            // quoted/escaped treatment; everything else falls back to a plain
-            // String() coercion, which renders "sensibly" without throwing.
-            return typeof value === 'string' ? JSON.stringify(value) : String(value);
-        case 'null':
-            return 'null';
-        case 'undefined':
-            return 'undefined';
-        default:
-            return String(value);
-    }
-}
-function previewText(value, type, count) {
-    if (type === 'array')
-        return `${count} ${count === 1 ? 'item' : 'items'}`;
-    return `${count} ${count === 1 ? 'key' : 'keys'}`;
-}
-/**
- * `<lyra-json-viewer>` — a collapsible, copyable tree view for an arbitrary
- * JSON-serializable value (object/array/string/number/boolean/null/
- * undefined). Serves as the fallback renderer wherever a raw payload (tool
- * call arguments, a tool result, an API response) needs inspecting without a
- * bespoke view.
- *
- * Expand/collapse state is keyed by structural path (not by object identity),
- * so it survives a `data` reassignment that keeps the same shape -- e.g. a
- * streaming tool result being patched in place.
- *
- * @customElement lyra-json-viewer
- * @event lyra-copy - `detail: { text }` -- fired by the top-level copy button or a per-node one. Fires even when `navigator.clipboard` silently failed or is unavailable (insecure context, older browser, stubbed-out test environment), so a consumer can still observe copy *intent*.
- * @csspart base - The root scroll container; respects `max-height`.
- * @csspart toolbar - The wrapper around the top-level copy button (only rendered when `copyable`).
- * @csspart tree - The wrapper around the rendered node tree.
- * @csspart key - An object property key or array index label.
- * @csspart value - A primitive value's text -- carries `data-type` (`string`/`number`/`boolean`/`null`/`undefined`, or `circular` for a self-reference marker in place of a re-visited container's subtree) for per-type coloring, and `data-match` while it matches `search`.
- * @csspart bracket - A `{`, `}`, `[`, or `]` delimiter.
- * @csspart toggle - A container node's expand/collapse button (hidden, but present for row alignment, on leaf/empty nodes).
- * @csspart copy-button - A copy-to-clipboard button -- the top-level one (in `toolbar`, labelled "Copy JSON to clipboard") or a per-node one (only rendered when `copyable`; labelled with its own key/type, e.g. "Copy age", so assistive tech can tell rows apart).
- */
-export class LyraJsonViewer extends LyraElement {
-    constructor() {
-        super(...arguments);
-        /** A CSS length (e.g. `"20rem"`); once set, the viewer scrolls internally past this height instead of growing the page. */
-        this.maxHeight = '';
-        /** Shows copy-to-clipboard affordances: one for the whole value, plus one per node. */
-        this.copyable = false;
-        /** Case-insensitive substring match against keys/values; matches are highlighted and their ancestors auto-expanded. */
-        this.search = '';
-        /**
-         * Per-path (`JSON.stringify(path)`) explicit expand/collapse, overriding
-         * the `collapsedDepth`/search defaults once a node's toggle has been used.
-         * Pruned in `willUpdate()` (to the paths still reachable in the tree)
-         * whenever `data` changes, so a long-lived instance bound to reshaping
-         * data -- this component's own stated streaming use case -- doesn't
-         * accumulate one entry per path ever toggled for the life of the instance.
-         */
-        this.expandedOverrides = new Map();
-        /** Memoized result of the last `computeSearch()` walk -- see `willUpdate()`. */
-        this.searchState = EMPTY_SEARCH;
-    }
-    static { this.styles = [LyraElement.styles, styles]; }
-    isExpanded(pathKey, depth, forceExpand) {
-        const override = this.expandedOverrides.get(pathKey);
-        if (override !== undefined)
-            return override;
-        if (forceExpand.has(pathKey))
-            return true;
-        if (this.collapsedDepth !== undefined && depth >= this.collapsedDepth)
-            return false;
-        return true;
-    }
-    toggleNode(pathKey, currentlyExpanded) {
-        const next = new Map(this.expandedOverrides);
-        next.set(pathKey, !currentlyExpanded);
-        this.expandedOverrides = next;
-    }
-    writeClipboard(text) {
-        try {
-            // navigator.clipboard is absent in insecure contexts / older browsers,
-            // and some engines throw synchronously rather than rejecting -- either
-            // way this is best-effort; copy() below always emits lyra-copy
-            // regardless of whether the OS clipboard was actually reached.
-            void navigator.clipboard?.writeText(text)?.catch(() => { });
-        }
-        catch {
-            // see above
-        }
-    }
-    copy(value) {
-        const text = value === undefined
-            ? 'undefined'
-            : // A BigInt anywhere inside `value` (not just at the root) throws a
-                // TypeError from the default JSON.stringify() serializer the same
-                // way formatPrimitive()'s unguarded call used to -- the replacer
-                // downgrades it to its decimal string form instead.
-                JSON.stringify(value, (_key, v) => (typeof v === 'bigint' ? v.toString() : v), 2);
-        this.writeClipboard(text);
-        this.emit('lyra-copy', { text });
-    }
-    /**
-     * Builds the key/value-match sets, the ancestor-paths-of-a-match set that
-     * `search` drives, and the full set of path keys reachable in the tree
-     * (`paths`, used to prune `expandedOverrides` -- see `willUpdate()`).
-     * Guards against a self-referencing `data` the same way `renderNode()`
-     * does: a container value already on the current recursion path is
-     * treated as a leaf instead of being walked again.
-     */
-    computeSearch() {
-        const query = this.search.trim().toLowerCase();
-        const keyMatches = new Set();
-        const valueMatches = new Set();
-        const forceExpand = new Set();
-        const paths = new Set();
-        const ancestors = new WeakSet();
-        const markAncestors = (path) => {
-            for (let i = path.length - 1; i >= 0; i--)
-                forceExpand.add(JSON.stringify(path.slice(0, i)));
-        };
-        const walk = (value, path, keyLabel) => {
-            const pathKey = JSON.stringify(path);
-            paths.add(pathKey);
-            const type = valueType(value);
-            if (query) {
-                let hit = false;
-                if (keyLabel !== undefined && keyLabel.toLowerCase().includes(query)) {
-                    keyMatches.add(pathKey);
-                    hit = true;
-                }
-                if (type !== 'object' && type !== 'array' && formatPrimitive(value, type).toLowerCase().includes(query)) {
-                    valueMatches.add(pathKey);
-                    hit = true;
-                }
-                if (hit)
-                    markAncestors(path);
-            }
-            if ((type === 'object' || type === 'array') && !ancestors.has(value)) {
-                ancestors.add(value);
-                for (const [k, v] of entriesOf(value))
-                    walk(v, [...path, k], String(k));
-                ancestors.delete(value);
-            }
-        };
-        walk(this.data, []);
-        return { keyMatches, valueMatches, forceExpand, paths };
-    }
-    renderCopyButton(value, label) {
-        if (!this.copyable)
-            return nothing;
-        return html `
-      <button
-        part="copy-button"
-        type="button"
-        aria-label="Copy ${label ?? 'value'}"
-        @click=${(e) => {
-            e.stopPropagation();
-            this.copy(value);
-        }}
-      >
-        Copy
-      </button>
-    `;
-    }
-    renderNode(value, path, keyLabel, depth, search, ancestors) {
-        const pathKey = JSON.stringify(path);
-        const type = valueType(value);
-        // A container value already on the current recursion path (i.e. `data`
-        // self-references, directly or through a longer cycle) gets rendered as
-        // a leaf marker instead of recursing again -- recursing would blow the
-        // stack instead of degrading gracefully.
-        const isCircular = (type === 'object' || type === 'array') && ancestors.has(value);
-        const isContainer = (type === 'object' || type === 'array') && !isCircular;
-        const entries = isContainer ? entriesOf(value) : [];
-        const hasEntries = entries.length > 0;
-        const expanded = hasEntries && this.isExpanded(pathKey, depth, search.forceExpand);
-        const indentStyle = `padding-inline-start:calc(${depth} * var(--lyra-space-l))`;
-        const toggleLabel = keyLabel ?? (type === 'array' ? 'array' : type === 'object' ? 'object' : 'value');
-        const openBracket = type === 'array' ? '[' : '{';
-        const closeBracket = type === 'array' ? ']' : '}';
-        // Computed eagerly -- in this same synchronous call, rather than left for
-        // lit-html's `repeat` directive to invoke lazily during commit -- so the
-        // `ancestors.add()`/`.delete()` pair below brackets exactly the values on
-        // the real recursive descent through *this* subtree, regardless of
-        // whenever lit-html itself gets around to resolving the directive.
-        let childRows = [];
-        if (isContainer && expanded) {
-            ancestors.add(value);
-            childRows = entries.map(([k, v]) => this.renderNode(v, [...path, k], String(k), depth + 1, search, ancestors));
-            ancestors.delete(value);
-        }
-        const headRow = html `
-      <div class="row" style=${indentStyle}>
-        <button
-          part="toggle"
-          type="button"
-          ?hidden=${!hasEntries}
-          tabindex=${hasEntries ? nothing : -1}
-          aria-hidden=${hasEntries ? nothing : 'true'}
-          aria-expanded=${hasEntries ? (expanded ? 'true' : 'false') : nothing}
-          aria-label=${hasEntries ? `${expanded ? 'Collapse' : 'Expand'} ${toggleLabel}` : nothing}
-          @click=${() => hasEntries && this.toggleNode(pathKey, expanded)}
-        >
-          <span class="chevron" style=${`transform:rotate(${expanded ? '90deg' : '0deg'})`}>${chevronIcon()}</span>
-        </button>
-        ${keyLabel !== undefined
-            ? html `<span part="key" ?data-match=${search.keyMatches.has(pathKey)}>${keyLabel}</span
-              ><span class="colon">:</span>`
-            : nothing}
-        ${isCircular
-            ? html `
-              <span part="bracket">${openBracket}</span>
-              <span part="value" data-type="circular">Circular reference</span>
-              <span part="bracket">${closeBracket}</span>
-            `
-            : isContainer
-                ? html `
-                <span part="bracket">${openBracket}</span>
-                ${hasEntries && !expanded
-                    ? html `<span class="preview">${previewText(value, type, entries.length)}</span>`
-                    : nothing}
-                ${!expanded ? html `<span part="bracket">${closeBracket}</span>` : nothing}
-              `
-                : html `<span part="value" data-type=${type} ?data-match=${search.valueMatches.has(pathKey)}
-                >${formatPrimitive(value, type)}</span
-              >`}
-        ${this.renderCopyButton(value, toggleLabel)}
-      </div>
-    `;
-        // Always returned from this one call site, with a single conditional
-        // hole for the children block -- switching between *returning headRow
-        // bare* and *wrapping it in a bigger template* (two different template
-        // shapes at the same tree position) would make lit-html tear down and
-        // recreate the whole subtree on every expand/collapse instead of
-        // patching in place, destroying the toggle button's DOM identity (and
-        // with it, real DOM focus) on every click.
-        return html `
-      ${headRow}
-      ${isContainer && expanded
-            ? html `
-            <div class="children">
-              ${repeat(entries, ([k]) => JSON.stringify([...path, k]), (_entry, i) => childRows[i])}
-            </div>
-            <div class="row" style=${indentStyle}>
-              <span class="toggle-space" aria-hidden="true"></span>
-              <span part="bracket">${closeBracket}</span>
-            </div>
-          `
-            : nothing}
-    `;
-    }
-    willUpdate(changed) {
-        if (!this.hasUpdated || changed.has('data') || changed.has('search')) {
-            const next = this.computeSearch();
-            if (!this.hasUpdated || changed.has('data')) {
-                // A path with no entry in `next.paths` no longer exists anywhere in
-                // the new tree, so its override has nothing left to apply to --
-                // dropping it here (rather than never, as before) is what keeps a
-                // long-lived instance bound to reshaping data from accumulating one
-                // Map entry per distinct path ever toggled over its whole lifetime.
-                let pruned = null;
-                for (const key of this.expandedOverrides.keys()) {
-                    if (!next.paths.has(key)) {
-                        pruned ??= new Map(this.expandedOverrides);
-                        pruned.delete(key);
-                    }
-                }
-                if (pruned)
-                    this.expandedOverrides = pruned;
-            }
-            this.searchState = next;
-        }
-    }
-    render() {
-        return html `
-      <div part="base" style=${this.maxHeight ? `--lyra-json-viewer-max-height:${this.maxHeight}` : nothing}>
-        ${this.copyable
-            ? html `<div part="toolbar">
-              <button
-                part="copy-button"
-                type="button"
-                aria-label="Copy JSON to clipboard"
-                @click=${() => this.copy(this.data)}
-              >
-                Copy
-              </button>
-            </div>`
-            : nothing}
-        <div part="tree">${this.renderNode(this.data, [], undefined, 0, this.searchState, new WeakSet())}</div>
-      </div>
-    `;
-    }
-}
-__decorate([
-    property({ attribute: false })
-], LyraJsonViewer.prototype, "data", void 0);
-__decorate([
-    property({ type: Number, attribute: 'collapsed-depth' })
-], LyraJsonViewer.prototype, "collapsedDepth", void 0);
-__decorate([
-    property({ attribute: 'max-height' })
-], LyraJsonViewer.prototype, "maxHeight", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], LyraJsonViewer.prototype, "copyable", void 0);
-__decorate([
-    property()
-], LyraJsonViewer.prototype, "search", void 0);
-__decorate([
-    state()
-], LyraJsonViewer.prototype, "expandedOverrides", void 0);
 defineElement('json-viewer', LyraJsonViewer);
+//# sourceMappingURL=json-viewer.js.map

package/dist/components/json-viewer/json-viewer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"json-viewer.js","sourceRoot":"","sources":["../../../src/components/json-viewer/json-viewer.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC;AACvC,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,aAAa,CAAC,aAAa,EAAE,cAAc,CAAC,CAAC"}

package/dist/components/json-viewer/json-viewer.styles.d.ts

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

package/dist/components/json-viewer/json-viewer.styles.d.ts.map

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

package/dist/components/json-viewer/json-viewer.styles.js

@@ -11,27 +11,27 @@ export const styles = css `
        host page can retheme it, same rationale as --lyra-widget-overlay-color
        in widget.styles.ts -- no shared --wa-*/--lyra-* monospace token exists
        to resolve through. */
-    --lyra-json-viewer-font: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+    --lyra-json-viewer-font: var(--lyra-font-mono);
     font-family: var(--lyra-json-viewer-font);
-    font-size: 0.8125rem;
-    line-height: 1.6;
+    font-size: var(--lyra-font-size-sm);
+    line-height: var(--lyra-line-height-loose);
   }
   [part='base'] {
     display: block;
     max-block-size: var(--lyra-json-viewer-max-height);
     overflow: auto;
-    border: 1px solid var(--lyra-color-border);
+    border: var(--lyra-border-width-thin) solid var(--lyra-color-border);
     border-radius: var(--lyra-radius);
     background: var(--lyra-color-surface);
   }
   [part='toolbar'] {
     position: sticky;
     inset-block-start: 0;
-    z-index: 1;
+    z-index: var(--lyra-layer-content);
     display: flex;
     justify-content: flex-end;
     padding: var(--lyra-space-xs) var(--lyra-space-s);
-    border-block-end: 1px solid var(--lyra-color-border);
+    border-block-end: var(--lyra-border-width-thin) solid var(--lyra-color-border);
     background: var(--lyra-color-surface);
   }
   [part='tree'] {
@@ -52,13 +52,13 @@ export const styles = css `
     opacity: 1;
   }
   [part='toggle'] {
-    /* Deliberately smaller than the shared --lyra-icon-button-size (2.5rem,
-       meant for a standalone icon-only button) -- this sits inline in a
-       dense, arbitrarily-deep tree row, same reasoning as lyra-tree-node's
-       own toggle. */
-    inline-size: 1.25rem;
-    block-size: 1.25rem;
-    margin-block-start: 0.1875rem;
+    /* Keep the glyph compact while giving the interactive box the shared
+       minimum target size, even for deeply nested rows. */
+    inline-size: var(--lyra-size-1-25rem);
+    block-size: var(--lyra-size-1-25rem);
+    min-inline-size: var(--lyra-icon-button-size);
+    min-block-size: var(--lyra-icon-button-size);
+    margin-block-start: var(--lyra-size-0-1875rem);
     flex: 0 0 auto;
     display: inline-flex;
     align-items: center;
@@ -93,12 +93,12 @@ export const styles = css `
     outline-offset: var(--lyra-focus-ring-offset);
   }
   .toggle-space {
-    inline-size: 1.25rem;
+    inline-size: var(--lyra-size-1-25rem);
     flex: 0 0 auto;
   }
   [part='key'] {
     flex: 0 0 auto;
-    font-weight: 600;
+    font-weight: var(--lyra-font-weight-semibold);
     color: var(--lyra-color-text);
   }
   .colon {
@@ -113,8 +113,8 @@ export const styles = css `
   [part='key'][data-match],
   [part='value'][data-match] {
     background: var(--lyra-color-warning-quiet);
-    border-radius: 0.1875rem;
-    box-shadow: 0 0 0 0.125rem var(--lyra-color-warning-quiet);
+    border-radius: var(--lyra-size-0-1875rem);
+    box-shadow: 0 0 0 var(--lyra-size-0-125rem) var(--lyra-color-warning-quiet);
   }
   [part='value'] {
     min-inline-size: 0;
@@ -150,9 +150,11 @@ export const styles = css `
     background: none;
     color: var(--lyra-color-text-quiet);
     font: inherit;
-    font-size: 0.75rem;
-    line-height: 1;
-    padding: 0.125rem var(--lyra-space-xs);
+    font-size: var(--lyra-font-size-xs);
+    line-height: var(--lyra-line-height-none);
+    min-inline-size: var(--lyra-icon-button-size);
+    min-block-size: var(--lyra-icon-button-size);
+    padding: var(--lyra-size-0-125rem) var(--lyra-space-xs);
     border-radius: var(--lyra-radius);
     cursor: pointer;
   }
@@ -175,3 +177,4 @@ export const styles = css `
     }
   }
 `;
+//# sourceMappingURL=json-viewer.styles.js.map

package/dist/components/json-viewer/json-viewer.styles.js.map

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

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

@@ -0,0 +1,78 @@
+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;
+    }
+}
+//# sourceMappingURL=kbd.class.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"kbd.class.d.ts","sourceRoot":"","sources":["../../../src/components/kbd/kbd.class.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAEzD,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAG7D;;;2EAG2E;AAC3E,MAAM,WAAW,WAAW;IAC1B,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;CACd;AAgCD;;;;;;;;;GASG;AACH,wBAAgB,kBAAkB,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,GAAG,WAAW,CAyBhF;AAED;wEACwE;AACxE,wBAAgB,aAAa,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,GAAG,WAAW,EAAE,CAMzE;AAwCD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,qBAAa,OAAQ,SAAQ,WAAW;IACtC,MAAM,CAAC,MAAM,iCAAgC;IAE7C;8BAC0B;IACd,IAAI,SAAM;IAOb,OAAO,CAAC,gBAAgB,CAAS;IAE1C,SAAS,CAAC,UAAU,IAAI,IAAI,CAI3B;IAED,OAAO,CAAC,YAAY,CAElB;IAEF,MAAM,IAAI,cAAc,CA2CvB;CACF;AAGD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}