@aceshooting/lyra-ui 3.6.0 → 3.8.0

package/dist/components/svg-viewer/svg-viewer.class.js

@@ -11,18 +11,29 @@ import { LyraElement } from '../../internal/lyra-element.js';
 import { safeFetchUrl } from '../../internal/safe-url.js';
 import { isAbortError, isResourceLimitError, LyraUserFacingError, readResponseText } from '../../internal/resource-loader.js';
 import { srOnly } from '../../internal/a11y.js';
+import { prefersReducedMotion } from '../../internal/motion.js';
 import { loadSvgSanitizer } from './dompurify-loader.js';
 import { styles } from './svg-viewer.styles.js';
+import '../zoomable-frame/zoomable-frame.js';
 /**
  * Fetches and safely renders an inline SVG document.
  *
  * @customElement lyra-svg-viewer
  * @event lyra-render-error - Fired when fetching or sanitizing the document fails.
+ * @event lyra-highlight-activate - A region highlight was activated. `detail: { id }`.
  * @csspart base - The root container.
  * @csspart body - The wrapper around the fetched-state content.
  * @csspart svg - The sanitized SVG document, once loaded.
  * @csspart spinner - The loading region.
  * @csspart error - The error region.
+ * @csspart frame-viewport - Forwarded from the internal `<lyra-zoomable-frame>` when `zoomable`.
+ * @csspart frame-content - Forwarded from the internal `<lyra-zoomable-frame>` when `zoomable`.
+ * @csspart frame-controls - Forwarded from the internal `<lyra-zoomable-frame>` when `zoomable`.
+ * @csspart frame-zoom-in - Forwarded from the internal `<lyra-zoomable-frame>` when `zoomable`.
+ * @csspart frame-zoom-out - Forwarded from the internal `<lyra-zoomable-frame>` when `zoomable`.
+ * @csspart frame-reset - Forwarded from the internal `<lyra-zoomable-frame>` when `zoomable`.
+ * @csspart highlight-layer - The wrapper around every rendered region highlight.
+ * @csspart region-highlight - One region highlight (`data-tone`, `data-active`).
  * @cssprop [--lyra-svg-viewer-max-height=none] - Maximum block size of the scrollable body before it scrolls internally. Also settable via the `max-height` property.
  */
 export class LyraSvgViewer extends LyraElement {
@@ -34,6 +45,14 @@ export class LyraSvgViewer extends LyraElement {
         this.name = '';
         /** CSS length that caps the scrollable body. */
         this.maxHeight = '';
+        /** Wraps the rendered content in an internal `<lyra-zoomable-frame>`. `false` (the default)
+         *  preserves today's exact DOM -- an inline thumbnail (e.g. in a chat stream) must not
+         *  unexpectedly grow a focusable zoom-chrome viewport; an inspection surface opts in. */
+        this.zoomable = false;
+        /** Display-only region highlights (see the class doc's Boundaries note -- no creation UI here). */
+        this.highlights = [];
+        this.activeHighlightId = null;
+        this.anchorKinds = ['region'];
         this.fetchState = { kind: 'idle' };
         this.generation = 0;
     }
@@ -79,7 +98,7 @@ export class LyraSvgViewer extends LyraElement {
     renderBody() {
         switch (this.fetchState.kind) {
             case 'loaded':
-                return html `<div part="svg" role="img" aria-label=${this.name || this.localize('svgViewerLabel')}>${unsafeSVG(this.fetchState.markup)}</div>`;
+                return this.renderZoomableWrapper(html `<div part="svg" role="img" aria-label=${this.name || this.localize('svgViewerLabel')}>${unsafeSVG(this.fetchState.markup)}</div>`);
             case 'loading':
                 return html `<div part="spinner" role="status"><span class="sr-only">${this.localize('loadingDocument')}</span></div>`;
             case 'error':
@@ -89,6 +108,65 @@ export class LyraSvgViewer extends LyraElement {
                 return html `<p class="empty-note">${this.localize('documentPreviewEmpty', undefined, { type: this.localize('documentPreviewTypeImage') })}</p>`;
         }
     }
+    /** Wraps `content` in the internal `<lyra-zoomable-frame>` when `zoomable`; otherwise renders it
+     *  (plus the highlight layer, which needs the same relatively-positioned sibling context either
+     *  way) unwrapped, preserving pre-`zoomable` DOM exactly. */
+    renderZoomableWrapper(content) {
+        const inner = html `<div class="zoom-content">${content}${this.renderHighlightLayer()}</div>`;
+        if (!this.zoomable)
+            return inner;
+        return html `<lyra-zoomable-frame
+      exportparts="viewport:frame-viewport, content:frame-content, controls:frame-controls, zoom-in:frame-zoom-in, zoom-out:frame-zoom-out, reset:frame-reset"
+    >${inner}</lyra-zoomable-frame>`;
+    }
+    renderHighlightLayer() {
+        const regionHighlights = this.highlights.filter((h) => h.anchor.kind === 'region');
+        if (!regionHighlights.length)
+            return nothing;
+        // Region rects are physical percent-of-render coordinates and the rendered SVG never
+        // mirrors, so position with physical left/top -- logical inset-inline-start would flip the
+        // overlay under RTL while the render underneath stays put.
+        return html `<div part="highlight-layer">
+      ${regionHighlights.map((h) => html `<div
+          part="region-highlight"
+          data-id=${h.id}
+          data-tone=${h.tone ?? 'accent'}
+          ?data-active=${h.id === this.activeHighlightId}
+          style="left:${h.anchor.rect.x}%;top:${h.anchor.rect.y}%;width:${h.anchor.rect.width}%;height:${h.anchor.rect.height}%"
+          tabindex="0"
+          role="button"
+          aria-label=${h.label || this.localize('viewerHighlightLabel')}
+          @click=${() => this.emit('lyra-highlight-activate', { id: h.id })}
+          @keydown=${(e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                this.emit('lyra-highlight-activate', { id: h.id });
+            }
+        }}
+        ></div>`)}
+    </div>`;
+    }
+    /** Scrolls a `region` highlight into view (by id, or a `LyraAnchor` directly -- matched back to
+     *  its owning `LyraHighlight` by reference so `scrollToAnchor(highlight.anchor)` also resolves to
+     *  the right box). Returns whether a matching, currently-rendered region was found -- there's no
+     *  retry loop here (unlike the full `DocumentAnchorTarget` mixin) because this viewer's content
+     *  is either already loaded or isn't; a caller invoking this before `src` has resolved simply
+     *  gets `false`. */
+    async scrollToAnchor(target) {
+        const highlight = typeof target === 'string'
+            ? this.highlights.find((h) => h.id === target)
+            : this.highlights.find((h) => h.anchor === target);
+        const anchor = highlight ? highlight.anchor : typeof target === 'string' ? undefined : target;
+        if (!anchor || anchor.kind !== 'region' || this.fetchState.kind !== 'loaded')
+            return false;
+        await this.updateComplete;
+        const region = highlight
+            ? this.renderRoot.querySelector(`[part="region-highlight"][data-id="${CSS.escape(highlight.id)}"]`)
+            : this.renderRoot.querySelector('[part="region-highlight"]');
+        const behavior = prefersReducedMotion() ? 'auto' : 'smooth';
+        region?.scrollIntoView({ behavior, block: 'center', inline: 'center' });
+        return true;
+    }
     render() {
         return html `<div part="base" style=${this.maxHeight ? `--lyra-svg-viewer-max-height:${this.maxHeight}` : nothing}>
       <div part="body">${this.renderBody()}</div>
@@ -104,6 +182,15 @@ __decorate([
 __decorate([
     property({ attribute: 'max-height' })
 ], LyraSvgViewer.prototype, "maxHeight", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LyraSvgViewer.prototype, "zoomable", void 0);
+__decorate([
+    property({ attribute: false })
+], LyraSvgViewer.prototype, "highlights", void 0);
+__decorate([
+    property({ attribute: 'active-highlight-id' })
+], LyraSvgViewer.prototype, "activeHighlightId", void 0);
 __decorate([
     state()
 ], LyraSvgViewer.prototype, "fetchState", void 0);

package/dist/components/svg-viewer/svg-viewer.class.js.map

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

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

@@ -11,5 +11,6 @@ registerDocumentRenderer('image/svg+xml', {
         element.name = file.name;
         return element;
     },
+    capabilities: { anchors: ['region'], search: false, textSelect: false },
 });
 //# sourceMappingURL=svg-viewer.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"svg-viewer.js","sourceRoot":"","sources":["../../../src/components/svg-viewer/svg-viewer.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,wBAAwB,EAAqB,MAAM,gCAAgC,CAAC;AAE7F,aAAa,CAAC,YAAY,EAAE,aAAa,CAAC,CAAC;AAE3C,wBAAwB,CAAC,eAAe,EAAE;IACxC,OAAO,EAAE,CAAC,IAAkB,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC;IACzE,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE;QACf,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;QAC1D,OAAO,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC;QACvB,OAAO,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;QACzB,OAAO,OAAO,CAAC;IACjB,CAAC;CACF,CAAC,CAAC"}
+{"version":3,"file":"svg-viewer.js","sourceRoot":"","sources":["../../../src/components/svg-viewer/svg-viewer.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,wBAAwB,EAAqB,MAAM,gCAAgC,CAAC;AAE7F,aAAa,CAAC,YAAY,EAAE,aAAa,CAAC,CAAC;AAE3C,wBAAwB,CAAC,eAAe,EAAE;IACxC,OAAO,EAAE,CAAC,IAAkB,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC;IACzE,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE;QACf,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;QAC1D,OAAO,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC;QACvB,OAAO,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;QACzB,OAAO,OAAO,CAAC;IACjB,CAAC;IACD,YAAY,EAAE,EAAE,OAAO,EAAE,CAAC,QAAQ,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE;CACxE,CAAC,CAAC"}

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

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

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

@@ -52,5 +52,23 @@ export const styles = css `
     display: flex;
     justify-content: center;
   }
+  .zoom-content {
+    position: relative;
+  }
+  [part='highlight-layer'] {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+  }
+  [part='region-highlight'] {
+    position: absolute;
+    pointer-events: auto;
+    border: var(--lyra-border-width-thick) solid var(--lyra-color-brand);
+    border-radius: var(--lyra-radius-xs);
+    cursor: pointer;
+  }
+  [part='region-highlight'][data-active] {
+    border-color: var(--lyra-color-warning, var(--lyra-color-brand));
+  }
 `;
 //# sourceMappingURL=svg-viewer.styles.js.map

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

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

package/dist/components/swatch-picker/swatch-picker.class.d.ts

@@ -0,0 +1,71 @@
+import { type TemplateResult } from 'lit';
+import { LyraElement } from '../../internal/lyra-element.js';
+export interface SwatchOption {
+    /** The option's value -- reported in `lyra-change` and matched against `value`. */
+    value: string;
+    /** The swatch's fill color -- any CSS color string the consumer supplies. */
+    color: string;
+    /** The swatch's accessible name; also used as its native `title` tooltip. */
+    label: string;
+    /** Optional custom shape rendered in place of the plain filled circle -- e.g. a gem or other
+     *  brand-specific glyph. A `currentColor`-based SVG (fill or stroke) picks up `color` automatically
+     *  via the swatch's `color` CSS property, matching `<lyra-segmented>`'s `SegmentedItem.icon` field. */
+    icon?: unknown;
+}
+export interface LyraSwatchPickerEventMap {
+    'lyra-change': CustomEvent<{
+        value: string;
+    }>;
+}
+/**
+ * `<lyra-swatch-picker>` -- a single-select picker over a small, fixed set of color swatches with
+ * the WAI-ARIA APG `radiogroup` contract built in: `role="radiogroup"`/`role="radio"`, roving
+ * tabindex, automatic activation (click or arrow-key move both select immediately, like a native
+ * radio group), cyclic Arrow/Home/End navigation. Distinct from `<lyra-color-picker>`'s freeform
+ * native color input -- this picks exactly one of N designer-chosen named colors, the shape apps
+ * otherwise hand-roll as a row of round accent-color buttons.
+ *
+ * @customElement lyra-swatch-picker
+ * @event lyra-change - Fired when the selected value changes via click or keyboard.
+ *   `detail: { value }`.
+ * @csspart base - The `role="radiogroup"` root.
+ * @csspart swatch - A single `role="radio"` color swatch's interactive hit target; sized to the
+ *   shared minimum tappable size (`--lyra-icon-button-size`), independent of the smaller visible
+ *   fill/icon rendered inside it. The selected one is `[part='swatch'][aria-checked='true']`.
+ * @csspart swatch-fill - The compact filled circle rendered when the option has no custom `icon`.
+ * @csspart swatch-icon - Optional custom shape supplied by the option's `icon` field; when present it
+ *   replaces `swatch-fill` and the swatch renders unfilled/unbordered behind it.
+ * @cssprop [--lyra-swatch-picker-selected-color=var(--lyra-color-brand)] - Ring color drawn around
+ *   the selected swatch, themeable independently of the focus ring and every other ring color.
+ * @cssprop [--lyra-swatch-picker-selected-blur=0px] - Blur radius of that same ring. 0 by default
+ *   (a crisp ring); set a real length (e.g. 0.4rem) for a soft glow instead.
+ * @cssprop [--lyra-swatch-picker-shine-duration=0s] - Duration of a rhythmic brighten-and-settle
+ *   "shine" on the selected swatch. `0s` (the default) is a no-op -- today's static look for every
+ *   existing consumer. Set a real duration (e.g. 1.6s) for a pulsing shine; disabled outright under
+ *   `prefers-reduced-motion: reduce`. Independent of `--lyra-swatch-picker-selected-blur` (a separate
+ *   `filter: brightness()` animation, not `box-shadow`), so the two compose freely, and works
+ *   identically for a plain color circle and an icon swatch alike.
+ */
+export declare class LyraSwatchPicker extends LyraElement<LyraSwatchPickerEventMap> {
+    static styles: import("lit").CSSResultGroup[];
+    /** The selectable color swatches, in display order. */
+    options: SwatchOption[];
+    /** The currently selected option's `value`, or `null` when nothing is selected. */
+    value: string | null;
+    /** Accessible name for the radiogroup, used when no visible label context
+     *  exists around it (e.g. no wrapping `<label>` or adjacent heading). Set
+     *  as `aria-label` on the `role="radiogroup"` element. A plain `aria-label`
+     *  attribute on the host itself is honored as a fallback when this is left
+     *  unset, matching `<lyra-segmented>`. */
+    label: string;
+    private select;
+    private focusSwatch;
+    private onKeyDown;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-swatch-picker': LyraSwatchPicker;
+    }
+}
+//# sourceMappingURL=swatch-picker.class.d.ts.map

package/dist/components/swatch-picker/swatch-picker.class.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"swatch-picker.class.d.ts","sourceRoot":"","sources":["../../../src/components/swatch-picker/swatch-picker.class.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAIzD,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAI7D,MAAM,WAAW,YAAY;IAC3B,mFAAmF;IACnF,KAAK,EAAE,MAAM,CAAC;IACd,6EAA6E;IAC7E,KAAK,EAAE,MAAM,CAAC;IACd,6EAA6E;IAC7E,KAAK,EAAE,MAAM,CAAC;IACd;;2GAEuG;IACvG,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,MAAM,WAAW,wBAAwB;IACvC,aAAa,EAAE,WAAW,CAAC;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CAC/C;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,qBAAa,gBAAiB,SAAQ,WAAW,CAAC,wBAAwB,CAAC;IACzE,MAAM,CAAC,MAAM,iCAAgC;IAE7C,uDAAuD;IACvB,OAAO,EAAE,YAAY,EAAE,CAAM;IAE7D,mFAAmF;IACvE,KAAK,EAAE,MAAM,GAAG,IAAI,CAAQ;IAExC;;;;8CAI0C;IAC9B,KAAK,SAAM;IAEvB,OAAO,CAAC,MAAM;IAMd,OAAO,CAAC,WAAW;IAOnB,OAAO,CAAC,SAAS,CA6Bf;IAEF,MAAM,IAAI,cAAc,CA+BvB;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,gBAAgB,CAAC;KACxC;CACF"}

package/dist/components/swatch-picker/swatch-picker.class.js

@@ -0,0 +1,134 @@
+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 } from 'lit/decorators.js';
+import { repeat } from 'lit/directives/repeat.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { LyraElement } from '../../internal/lyra-element.js';
+import { isRtl } from '../../internal/rtl.js';
+import { styles } from './swatch-picker.styles.js';
+/**
+ * `<lyra-swatch-picker>` -- a single-select picker over a small, fixed set of color swatches with
+ * the WAI-ARIA APG `radiogroup` contract built in: `role="radiogroup"`/`role="radio"`, roving
+ * tabindex, automatic activation (click or arrow-key move both select immediately, like a native
+ * radio group), cyclic Arrow/Home/End navigation. Distinct from `<lyra-color-picker>`'s freeform
+ * native color input -- this picks exactly one of N designer-chosen named colors, the shape apps
+ * otherwise hand-roll as a row of round accent-color buttons.
+ *
+ * @customElement lyra-swatch-picker
+ * @event lyra-change - Fired when the selected value changes via click or keyboard.
+ *   `detail: { value }`.
+ * @csspart base - The `role="radiogroup"` root.
+ * @csspart swatch - A single `role="radio"` color swatch's interactive hit target; sized to the
+ *   shared minimum tappable size (`--lyra-icon-button-size`), independent of the smaller visible
+ *   fill/icon rendered inside it. The selected one is `[part='swatch'][aria-checked='true']`.
+ * @csspart swatch-fill - The compact filled circle rendered when the option has no custom `icon`.
+ * @csspart swatch-icon - Optional custom shape supplied by the option's `icon` field; when present it
+ *   replaces `swatch-fill` and the swatch renders unfilled/unbordered behind it.
+ * @cssprop [--lyra-swatch-picker-selected-color=var(--lyra-color-brand)] - Ring color drawn around
+ *   the selected swatch, themeable independently of the focus ring and every other ring color.
+ * @cssprop [--lyra-swatch-picker-selected-blur=0px] - Blur radius of that same ring. 0 by default
+ *   (a crisp ring); set a real length (e.g. 0.4rem) for a soft glow instead.
+ * @cssprop [--lyra-swatch-picker-shine-duration=0s] - Duration of a rhythmic brighten-and-settle
+ *   "shine" on the selected swatch. `0s` (the default) is a no-op -- today's static look for every
+ *   existing consumer. Set a real duration (e.g. 1.6s) for a pulsing shine; disabled outright under
+ *   `prefers-reduced-motion: reduce`. Independent of `--lyra-swatch-picker-selected-blur` (a separate
+ *   `filter: brightness()` animation, not `box-shadow`), so the two compose freely, and works
+ *   identically for a plain color circle and an icon swatch alike.
+ */
+export class LyraSwatchPicker extends LyraElement {
+    constructor() {
+        super(...arguments);
+        /** The selectable color swatches, in display order. */
+        this.options = [];
+        /** The currently selected option's `value`, or `null` when nothing is selected. */
+        this.value = null;
+        /** Accessible name for the radiogroup, used when no visible label context
+         *  exists around it (e.g. no wrapping `<label>` or adjacent heading). Set
+         *  as `aria-label` on the `role="radiogroup"` element. A plain `aria-label`
+         *  attribute on the host itself is honored as a fallback when this is left
+         *  unset, matching `<lyra-segmented>`. */
+        this.label = '';
+        this.onKeyDown = (e) => {
+            const navigable = this.options;
+            if (navigable.length === 0)
+                return;
+            const currentIndex = navigable.findIndex((o) => o.value === this.value);
+            const rtl = isRtl(this);
+            const forwardKey = rtl ? 'ArrowLeft' : 'ArrowRight';
+            const backwardKey = rtl ? 'ArrowRight' : 'ArrowLeft';
+            let targetIndex;
+            switch (e.key) {
+                case forwardKey:
+                    targetIndex = currentIndex < 0 ? 0 : (currentIndex + 1) % navigable.length;
+                    break;
+                case backwardKey:
+                    targetIndex = currentIndex < 0 ? navigable.length - 1 : (currentIndex - 1 + navigable.length) % navigable.length;
+                    break;
+                case 'Home':
+                    targetIndex = 0;
+                    break;
+                case 'End':
+                    targetIndex = navigable.length - 1;
+                    break;
+                default:
+                    return;
+            }
+            e.preventDefault();
+            const target = navigable[targetIndex];
+            this.select(target);
+            this.focusSwatch(target.value);
+        };
+    }
+    static { this.styles = [LyraElement.styles, styles]; }
+    select(option) {
+        if (option.value === this.value)
+            return;
+        this.value = option.value;
+        this.emit('lyra-change', { value: option.value });
+    }
+    focusSwatch(value) {
+        const button = this.renderRoot.querySelector(`[part="swatch"][data-value="${CSS.escape(value)}"]`);
+        button?.focus();
+    }
+    render() {
+        const ariaLabel = this.label || this.getAttribute('aria-label') || nothing;
+        // WAI-ARIA APG radiogroup: exactly one radio is ever tabbable. That's normally the checked
+        // swatch, but a fresh/cleared picker (value === null) has no checked swatch -- fall back to
+        // the first swatch so the radiogroup stays keyboard-reachable.
+        const selectedIndex = this.options.findIndex((option) => option.value === this.value);
+        const tabbableIndex = selectedIndex !== -1 ? selectedIndex : 0;
+        return html `
+      <div part="base" role="radiogroup" aria-label=${ariaLabel} @keydown=${this.onKeyDown}>
+        ${repeat(this.options, (option) => option.value, (option, index) => html `<button
+            type="button"
+            part="swatch"
+            data-value=${option.value}
+            role="radio"
+            aria-checked=${option.value === this.value ? 'true' : 'false'}
+            aria-label=${option.label}
+            title=${option.label}
+            tabindex=${index === tabbableIndex ? '0' : '-1'}
+            style=${styleMap({ '--lyra-swatch-color': option.color })}
+            @click=${() => this.select(option)}
+          >${option.icon
+            ? html `<span part="swatch-icon" aria-hidden="true">${option.icon}</span>`
+            : html `<span part="swatch-fill" aria-hidden="true"></span>`}</button>`)}
+      </div>
+    `;
+    }
+}
+__decorate([
+    property({ attribute: false })
+], LyraSwatchPicker.prototype, "options", void 0);
+__decorate([
+    property()
+], LyraSwatchPicker.prototype, "value", void 0);
+__decorate([
+    property()
+], LyraSwatchPicker.prototype, "label", void 0);
+//# sourceMappingURL=swatch-picker.class.js.map

package/dist/components/swatch-picker/swatch-picker.class.js.map

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

package/dist/components/swatch-picker/swatch-picker.d.ts

@@ -0,0 +1,2 @@
+export * from './swatch-picker.class.js';
+//# sourceMappingURL=swatch-picker.d.ts.map

package/dist/components/swatch-picker/swatch-picker.d.ts.map

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

package/dist/components/swatch-picker/swatch-picker.js

@@ -0,0 +1,5 @@
+export * from './swatch-picker.class.js';
+import { LyraSwatchPicker } from './swatch-picker.class.js';
+import { defineElement } from '../../internal/prefix.js';
+defineElement('swatch-picker', LyraSwatchPicker);
+//# sourceMappingURL=swatch-picker.js.map

package/dist/components/swatch-picker/swatch-picker.js.map

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

package/dist/components/swatch-picker/swatch-picker.styles.d.ts

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

package/dist/components/swatch-picker/swatch-picker.styles.d.ts.map

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

package/dist/components/swatch-picker/swatch-picker.styles.js

@@ -0,0 +1,131 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: inline-flex;
+    /* Lets the host shrink below its row's max-content width when it's a flex/grid
+       item in a consumer's own narrow layout -- the default min-width:auto for flex
+       items would otherwise force the row wide regardless of [part='base']'s
+       flex-wrap below. */
+    min-inline-size: 0;
+    /* Ring drawn around the selected swatch. A dedicated token (rather than reusing
+       --lyra-focus-ring-color from tokens.styles.ts) so a host can retheme the
+       selection indicator independently of the :focus-visible outline and every
+       other ring color in the library, while defaulting to the brand color. */
+    --lyra-swatch-picker-selected-color: var(--lyra-color-brand);
+    /* Blur radius of that same ring -- 0 by default (a crisp ring, today's look for every
+       existing consumer). A host that wants a soft glow instead sets this to a real length
+       (e.g. 0.4rem) rather than reaching for ::part(swatch)[aria-checked] from outside, which
+       isn't reliably selectable: the CSS Shadow Parts spec only allows a fixed set of
+       pseudo-classes after ::part(), not arbitrary attribute selectors, so that combinator can
+       silently fail to match depending on the engine. */
+    --lyra-swatch-picker-selected-blur: 0;
+    /* Pulsing "shine" duration for the selected swatch -- 0s (the default) is a no-op (today's
+       static look for every existing consumer, and unaffected by this token at all: a 0-duration
+       animation resolves to its end state instantly and imperceptibly). A host sets a real
+       duration (e.g. 1.6s) to make the selected swatch rhythmically brighten and settle back. A
+       separate filter: brightness() animation (not box-shadow, which
+       --lyra-swatch-picker-selected-blur above already owns) so the two compose freely without
+       fighting over the same CSS property, and so this reads identically for a plain color circle
+       and an icon swatch alike -- filter applies to the whole element including a slotted icon,
+       with no icon-specific branching needed (unlike the box-shadow/drop-shadow split below, which
+       needs one precisely because box-shadow doesn't reach into a transparent box's own content). */
+    --lyra-swatch-picker-shine-duration: 0s;
+  }
+  [part='base'] {
+    display: inline-flex;
+    flex-wrap: wrap;
+    min-inline-size: 0;
+    gap: var(--lyra-space-xs);
+  }
+  [part='swatch'] {
+    box-sizing: border-box;
+    /* The interactive hit target meets the shared minimum tappable size (same
+       --lyra-icon-button-size floor as lyra-code-block's/lyra-json-viewer's [part='toggle']), while
+       the *visible* fill stays a compact --lyra-size-1-5rem circle -- rendered on the separate
+       [part='swatch-fill']/[part='swatch-icon'] child below and centered via flex, not by resizing
+       this button itself. A swatch's own fill/icon is what previously doubled as the clickable box;
+       splitting them keeps the dense picker grid's visual density unchanged while still growing the
+       real click/tap area. */
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-inline-size: var(--lyra-icon-button-size);
+    min-block-size: var(--lyra-icon-button-size);
+    padding: 0;
+    border: none;
+    border-radius: 50%;
+    background: none;
+    /* Exposes the option's color to a slotted icon (part='swatch-icon') via currentColor -- inert
+       when no icon is present, since [part='swatch-fill'] paints its own background-color instead. */
+    color: var(--lyra-swatch-color);
+    cursor: pointer;
+  }
+  [part='swatch-fill'] {
+    box-sizing: border-box;
+    display: block;
+    inline-size: var(--lyra-size-1-5rem);
+    block-size: var(--lyra-size-1-5rem);
+    border: var(--lyra-border-width-thin) solid var(--lyra-color-border);
+    border-radius: 50%;
+    /* Per-swatch fill from the option's color, set inline by swatch-picker.class.ts.
+       Read through a var() (rather than an inline background-color declaration) so a
+       consumer's ::part(swatch-fill) background rule can still win when overriding it. */
+    background-color: var(--lyra-swatch-color);
+    transition: transform var(--lyra-transition-fast);
+  }
+  [part='swatch-icon'] {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    inline-size: var(--lyra-size-1-5rem);
+    block-size: var(--lyra-size-1-5rem);
+    transition: transform var(--lyra-transition-fast);
+  }
+  [part='swatch']:hover [part='swatch-fill'],
+  [part='swatch']:hover [part='swatch-icon'] {
+    transform: scale(1.2);
+  }
+  [part='swatch']:focus-visible {
+    outline: var(--lyra-focus-ring-width) solid var(--lyra-focus-ring-color);
+    outline-offset: var(--lyra-focus-ring-offset);
+  }
+  [part='swatch'][aria-checked='true'] [part='swatch-fill'] {
+    transform: scale(1.2);
+    box-shadow: 0 0 var(--lyra-swatch-picker-selected-blur) var(--lyra-border-width-thick) var(--lyra-swatch-picker-selected-color);
+    animation: lyra-swatch-picker-shine var(--lyra-swatch-picker-shine-duration) ease-in-out infinite;
+  }
+  @keyframes lyra-swatch-picker-shine {
+    0%,
+    100% {
+      filter: brightness(1);
+    }
+    50% {
+      filter: brightness(1.4);
+    }
+  }
+  /* An icon option renders its own shape instead of the plain filled circle, so the box-shadow ring
+     above (drawn around [part='swatch-fill']'s true shape) doesn't apply to it at all -- render()
+     only ever mounts one of [part='swatch-fill']/[part='swatch-icon'] per swatch (see
+     swatch-picker.class.ts), so this selector and the one above never both match the same swatch.
+     Swap to a drop-shadow on the icon itself, which follows its real rendered shape. */
+  [part='swatch'][aria-checked='true'] [part='swatch-icon'] {
+    transform: scale(1.2);
+    filter: drop-shadow(0 0 var(--lyra-swatch-picker-selected-blur) var(--lyra-swatch-picker-selected-color));
+  }
+  /* The scale is redundant selection feedback (the ring already conveys it), so keep the
+     transform but drop its easing under reduced-motion -- the swatch snaps rather than glides.
+     The shine animation stops outright (a steady brightness, not a pulsing one) rather than
+     merely losing its own easing, matching prefers-reduced-motion's intent for anything that
+     loops -- a host that opted into --lyra-swatch-picker-shine-duration still gets a selected
+     swatch, just without the rhythmic brightening. */
+  @media (prefers-reduced-motion: reduce) {
+    [part='swatch-fill'],
+    [part='swatch-icon'] {
+      transition: none;
+    }
+    [part='swatch'][aria-checked='true'] [part='swatch-fill'] {
+      animation: none;
+    }
+  }
+`;
+//# sourceMappingURL=swatch-picker.styles.js.map

package/dist/components/swatch-picker/swatch-picker.styles.js.map

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