@aceshooting/lyra-ui 1.1.0 → 2.0.0

package/dist/components/attachment-chip/attachment-chip.styles.js

@@ -0,0 +1,184 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: inline-flex;
+    max-inline-size: 100%;
+    /* Per-status accent -- one custom property swapped by the :host([status])
+       rules below rather than repeating background/border per part per
+       status. Mirrors lyra-tool-call-chip's identical
+       --lyra-tool-call-chip-accent/-bg/-border trio, so a chip's tone
+       vocabulary reads the same everywhere in the library. Defaults to the
+       'pending' tone so an unset/unknown status still reads as neutral
+       instead of unstyled. */
+    --lyra-attachment-chip-accent: var(--lyra-color-text-quiet);
+    --lyra-attachment-chip-bg: var(--lyra-color-surface);
+    --lyra-attachment-chip-border: var(--lyra-color-border);
+  }
+
+  :host([status='uploading']) {
+    --lyra-attachment-chip-accent: var(--lyra-color-brand);
+    --lyra-attachment-chip-bg: var(--lyra-color-brand-quiet);
+    --lyra-attachment-chip-border: transparent;
+  }
+  :host([status='error']) {
+    --lyra-attachment-chip-accent: var(--lyra-color-danger);
+    --lyra-attachment-chip-bg: var(--lyra-color-danger-quiet);
+    --lyra-attachment-chip-border: transparent;
+  }
+  /* Optional neutral-positive tint for a finished upload -- subtler than
+     'uploading'/'error' since there's nothing left for the user to act on. */
+  :host([status='done']) {
+    --lyra-attachment-chip-accent: var(--lyra-color-success);
+    --lyra-attachment-chip-bg: var(--lyra-color-success-quiet);
+    --lyra-attachment-chip-border: transparent;
+  }
+
+  [part='base'] {
+    display: flex;
+    align-items: center;
+    gap: var(--lyra-space-s);
+    max-inline-size: 100%;
+    box-sizing: border-box;
+    padding: var(--lyra-space-xs) var(--lyra-space-s);
+    border: 1px solid var(--lyra-attachment-chip-border);
+    border-radius: var(--lyra-radius);
+    background: var(--lyra-attachment-chip-bg);
+    color: var(--lyra-color-text);
+    font-size: 0.8125rem;
+    line-height: 1.3;
+    transition:
+      background-color var(--lyra-transition-fast),
+      border-color var(--lyra-transition-fast);
+  }
+
+  [part='thumbnail'] {
+    display: inline-flex;
+    flex: 0 0 auto;
+    align-items: center;
+    justify-content: center;
+    /* Reuses the shared icon-button box size as a ready-made "small square
+       glyph/image slot" token rather than inventing a new one-off dimension. */
+    inline-size: var(--lyra-icon-button-size);
+    block-size: var(--lyra-icon-button-size);
+    overflow: hidden;
+    border-radius: calc(var(--lyra-radius) * 0.6);
+    background: var(--lyra-color-surface);
+    color: var(--lyra-attachment-chip-accent);
+  }
+  [part='thumbnail'] img {
+    inline-size: 100%;
+    block-size: 100%;
+    object-fit: cover;
+    display: block;
+  }
+  [part='thumbnail'] svg {
+    display: block;
+  }
+
+  [part='meta'] {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    min-inline-size: 0;
+    gap: 0.125rem;
+  }
+  [part='name'] {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-weight: 600;
+    color: var(--lyra-color-text);
+  }
+  [part='size'] {
+    /* Full-strength text, not --lyra-color-text-quiet -- this sits on top of
+       the per-status *-quiet tint backgrounds above (e.g. danger-quiet), and
+       text-quiet's gray fails WCAG AA contrast against several of those
+       tints even though it comfortably passes against the plain surface
+       background used by the resting state. Same fix, same rationale, as
+       lyra-tool-call-chip's identical [part='duration']/[part='category']. */
+    color: var(--lyra-color-text);
+    font-variant-numeric: tabular-nums;
+  }
+  [part='status-text'] {
+    color: var(--lyra-attachment-chip-accent);
+    font-weight: 600;
+  }
+
+  [part='progress'] {
+    flex: 0 0 auto;
+    inline-size: 3.5rem;
+    block-size: var(--lyra-space-xs);
+    border-radius: 999px;
+    background: var(--lyra-color-border);
+    overflow: hidden;
+  }
+  [part='progress-fill'] {
+    block-size: 100%;
+    border-radius: inherit;
+    background: var(--lyra-attachment-chip-accent);
+    transition: inline-size var(--lyra-transition-base);
+  }
+
+  [part='spinner'] {
+    flex: 0 0 auto;
+    display: inline-block;
+    inline-size: 1rem;
+    block-size: 1rem;
+    border-radius: 50%;
+    border: 2px solid var(--lyra-color-border);
+    border-block-start-color: var(--lyra-attachment-chip-accent);
+    animation: lyra-attachment-chip-spin 0.8s linear infinite;
+  }
+
+  [part='retry-button'],
+  [part='remove-button'] {
+    flex: 0 0 auto;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-inline-size: min(var(--lyra-icon-button-size), 1.75rem);
+    min-block-size: min(var(--lyra-icon-button-size), 1.75rem);
+    padding: 0;
+    border: none;
+    border-radius: calc(var(--lyra-radius) * 0.6);
+    background: transparent;
+    color: var(--lyra-color-text-quiet);
+    font: inherit;
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+    transition: background-color var(--lyra-transition-fast);
+  }
+  [part='retry-button'] {
+    color: var(--lyra-color-danger);
+  }
+  [part='retry-button']:hover,
+  [part='remove-button']:hover {
+    background: color-mix(in srgb, var(--lyra-color-text) 8%, transparent);
+  }
+  [part='retry-button']:focus-visible,
+  [part='remove-button']:focus-visible {
+    outline: var(--lyra-focus-ring-width) solid var(--lyra-focus-ring-color);
+    outline-offset: var(--lyra-focus-ring-offset);
+  }
+  [part='retry-button'] svg,
+  [part='remove-button'] svg {
+    display: block;
+  }
+
+  @keyframes lyra-attachment-chip-spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    [part='base'] {
+      transition: none !important;
+    }
+    [part='progress-fill'] {
+      transition: none !important;
+    }
+    [part='spinner'] {
+      animation: none !important;
+    }
+  }
+`;

package/dist/components/attachment-trigger/attachment-trigger.d.ts

@@ -0,0 +1,83 @@
+import { type TemplateResult } from 'lit';
+import { LyraElement } from '../../internal/lyra-element.js';
+import '../menu/menu.js';
+import '../menu/menu-item.js';
+export type AttachmentCapability = 'files' | 'image' | 'camera';
+/** The two capabilities that resolve to a real file selection (as opposed
+ *  to `camera`, which never touches a file input -- see the class doc). */
+export type FileBackedCapability = Exclude<AttachmentCapability, 'camera'>;
+export interface AttachmentPickDetail {
+    capability: FileBackedCapability;
+    files: FileList;
+}
+/**
+ * `<lyra-attachment-trigger>` — a compact attach affordance designed for a
+ * chat composer's leading slot (see `<lyra-chat-composer>`'s own `leading`
+ * slot, which this drops straight into, though this component has no code
+ * dependency on it). Its shape adapts to how many attachment `capabilities`
+ * are configured:
+ *  - Exactly one capability: a single plain icon button ([part='trigger']).
+ *    Activating it performs that capability's action directly.
+ *  - More than one: a small anchored menu ([part='menu'], composed from
+ *    `<lyra-menu>`/`<lyra-menu-item>`) listing each capability as a row.
+ *
+ * Two of the three capabilities (`files`, `image`) are file-picker-backed:
+ * activating them opens a hidden native `<input type="file">` via a
+ * synthetic `.click()`, and the resulting selection is re-emitted as
+ * `lyra-pick`. `accept` is shared across both — `image` defaults it to
+ * `'image/*'` unless the `accept` prop overrides it, `files` always uses
+ * `accept` as-is (empty means "any file type", matching a bare native
+ * `<input type="file">` with no `accept` attribute).
+ *
+ * **`camera` is scope-limited by design.** This component does not
+ * implement any camera capture UI itself — no `getUserMedia`, no
+ * `<input capture>` — because that's entirely a host/browser concern with
+ * no single right answer (a desktop web app, a mobile PWA, and a native
+ * wrapper all want different things here). Activating the `camera`
+ * capability only fires `lyra-camera-request`; the host owns everything
+ * from that point on (opening its own capture UI, then presumably handing
+ * the resulting `File` back to something like `<lyra-attachment-chip>`).
+ *
+ * @customElement lyra-attachment-trigger
+ * @event lyra-pick - A file-backed capability's hidden file input produced a
+ * real selection. `detail: { capability: 'files' | 'image', files }` — a
+ * real `FileList` (not a plain array), matching the native input's own
+ * `.files` shape, but an independent snapshot rather than that same live
+ * object — see `onInputChange`'s own doc for why a live reference would be
+ * unsafe to hand out here.
+ * @event lyra-camera-request - The `camera` capability was activated. No
+ * detail payload — see the class doc's scope note; the host implements the
+ * actual capture flow.
+ * @csspart trigger - The single-capability icon button. Only rendered when `capabilities.length === 1`.
+ * @csspart menu - The `<lyra-menu>` wrapper. Only rendered when `capabilities.length > 1`.
+ */
+export declare class LyraAttachmentTrigger extends LyraElement {
+    static styles: import("lit").CSSResultGroup[];
+    /** Which attachment capabilities to offer, in display order. A single
+     *  entry renders a plain button; more than one renders a menu. */
+    capabilities: AttachmentCapability[];
+    /** Native-file-input-style accept string (e.g. `'image/*'` or
+     *  `'.pdf,.docx'`), forwarded to the hidden file input for the
+     *  `files`/`image` capabilities — see the class doc for how each uses it. */
+    accept: string;
+    /** Forwarded to the hidden file input's own `multiple` attribute. */
+    multiple: boolean;
+    disabled: boolean;
+    private inputEl?;
+    private pendingCapability;
+    private get hasFileCapability();
+    private effectiveAccept;
+    private activateCapability;
+    private onTriggerClick;
+    private onMenuSelect;
+    private onInputChange;
+    private renderHiddenInput;
+    private renderSingleTrigger;
+    private renderMenu;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-attachment-trigger': LyraAttachmentTrigger;
+    }
+}

package/dist/components/attachment-trigger/attachment-trigger.js

@@ -0,0 +1,258 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, nothing, svg } from 'lit';
+import { property, query } from 'lit/decorators.js';
+import { LyraElement } from '../../internal/lyra-element.js';
+import { defineElement } from '../../internal/prefix.js';
+import { styles } from './attachment-trigger.styles.js';
+import '../menu/menu.js';
+import '../menu/menu-item.js';
+// Mirrors the shared icon set's viewBox/stroke conventions
+// (internal/icons.ts's chevronIcon()/closeIcon()/etc.) without adding these
+// one-off glyphs to that module -- it's off limits here -- so they still
+// read as part of the same visual language as the rest of the library's
+// inline icons. Same approach as lyra-attachment-chip's local fileGlyph()/
+// retryIcon() and lyra-checkbox's local checkmarkGlyph().
+const ICON_VIEW_BOX = '0 0 24 24';
+const ICON_STROKE_WIDTH = '1.75';
+function icon(paths) {
+    return svg `
+    <svg
+      width="1em"
+      height="1em"
+      viewBox=${ICON_VIEW_BOX}
+      fill="none"
+      stroke="currentColor"
+      stroke-width=${ICON_STROKE_WIDTH}
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      aria-hidden="true"
+      focusable="false"
+    >${paths}</svg>
+  `;
+}
+/** A paperclip glyph -- the generic "attach" affordance, used for the
+ *  `files` capability and as the multi-capability menu's own trigger icon
+ *  (the one glyph a user recognizes regardless of which capabilities the
+ *  menu underneath actually offers). */
+function paperclipIcon() {
+    return icon(svg `
+    <path d="M21.44 11.05 12.25 20.24a5.5 5.5 0 0 1-7.78-7.78l9.19-9.19a3.5 3.5 0 0 1 4.95 4.95l-9.2 9.19a1.5 1.5 0 0 1-2.12-2.12l8.49-8.48"></path>
+  `);
+}
+/** A picture-frame glyph for the `image` capability. */
+function imageIcon() {
+    return icon(svg `
+    <rect x="3" y="3" width="18" height="18" rx="2"></rect>
+    <circle cx="8.5" cy="8.5" r="1.5"></circle>
+    <polyline points="21 15 16 10 5 21"></polyline>
+  `);
+}
+/** A camera-body glyph for the `camera` capability. */
+function cameraIcon() {
+    return icon(svg `
+    <path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2Z"></path>
+    <circle cx="12" cy="13" r="4"></circle>
+  `);
+}
+const CAPABILITY_META = {
+    files: { icon: paperclipIcon, triggerLabel: 'Attach files', menuLabel: 'Upload files' },
+    image: { icon: imageIcon, triggerLabel: 'Attach an image', menuLabel: 'Upload a photo' },
+    camera: { icon: cameraIcon, triggerLabel: 'Use camera', menuLabel: 'Take a photo' },
+};
+/**
+ * `<lyra-attachment-trigger>` — a compact attach affordance designed for a
+ * chat composer's leading slot (see `<lyra-chat-composer>`'s own `leading`
+ * slot, which this drops straight into, though this component has no code
+ * dependency on it). Its shape adapts to how many attachment `capabilities`
+ * are configured:
+ *  - Exactly one capability: a single plain icon button ([part='trigger']).
+ *    Activating it performs that capability's action directly.
+ *  - More than one: a small anchored menu ([part='menu'], composed from
+ *    `<lyra-menu>`/`<lyra-menu-item>`) listing each capability as a row.
+ *
+ * Two of the three capabilities (`files`, `image`) are file-picker-backed:
+ * activating them opens a hidden native `<input type="file">` via a
+ * synthetic `.click()`, and the resulting selection is re-emitted as
+ * `lyra-pick`. `accept` is shared across both — `image` defaults it to
+ * `'image/*'` unless the `accept` prop overrides it, `files` always uses
+ * `accept` as-is (empty means "any file type", matching a bare native
+ * `<input type="file">` with no `accept` attribute).
+ *
+ * **`camera` is scope-limited by design.** This component does not
+ * implement any camera capture UI itself — no `getUserMedia`, no
+ * `<input capture>` — because that's entirely a host/browser concern with
+ * no single right answer (a desktop web app, a mobile PWA, and a native
+ * wrapper all want different things here). Activating the `camera`
+ * capability only fires `lyra-camera-request`; the host owns everything
+ * from that point on (opening its own capture UI, then presumably handing
+ * the resulting `File` back to something like `<lyra-attachment-chip>`).
+ *
+ * @customElement lyra-attachment-trigger
+ * @event lyra-pick - A file-backed capability's hidden file input produced a
+ * real selection. `detail: { capability: 'files' | 'image', files }` — a
+ * real `FileList` (not a plain array), matching the native input's own
+ * `.files` shape, but an independent snapshot rather than that same live
+ * object — see `onInputChange`'s own doc for why a live reference would be
+ * unsafe to hand out here.
+ * @event lyra-camera-request - The `camera` capability was activated. No
+ * detail payload — see the class doc's scope note; the host implements the
+ * actual capture flow.
+ * @csspart trigger - The single-capability icon button. Only rendered when `capabilities.length === 1`.
+ * @csspart menu - The `<lyra-menu>` wrapper. Only rendered when `capabilities.length > 1`.
+ */
+export class LyraAttachmentTrigger extends LyraElement {
+    constructor() {
+        super(...arguments);
+        /** Which attachment capabilities to offer, in display order. A single
+         *  entry renders a plain button; more than one renders a menu. */
+        this.capabilities = ['files'];
+        /** Native-file-input-style accept string (e.g. `'image/*'` or
+         *  `'.pdf,.docx'`), forwarded to the hidden file input for the
+         *  `files`/`image` capabilities — see the class doc for how each uses it. */
+        this.accept = '';
+        /** Forwarded to the hidden file input's own `multiple` attribute. */
+        this.multiple = true;
+        this.disabled = false;
+        // Which file-backed capability the hidden input's next 'change' event
+        // belongs to -- set synchronously right before the synthetic .click(), so
+        // one shared <input> can serve both 'files' and 'image' (each wanting a
+        // different `accept`) without needing two separate hidden inputs.
+        this.pendingCapability = 'files';
+        this.onTriggerClick = () => {
+            this.activateCapability(this.capabilities[0]);
+        };
+        this.onMenuSelect = (e) => {
+            this.activateCapability(e.detail.value);
+        };
+        this.onInputChange = (e) => {
+            const input = e.target;
+            const selected = input.files;
+            if (selected && selected.length > 0) {
+                // `input.files` is a *live* view of the input's own current
+                // selection, not a frozen snapshot -- clearing `.value` below (so
+                // re-picking the exact same file still fires another 'change' next
+                // time) mutates this very object back to empty in place. A listener
+                // that reads `detail.files` synchronously (a plain `addEventListener`
+                // callback) would never notice, but anything that reads it even one
+                // microtask later (an `async` handler, a queued upload) would see an
+                // empty list. Rehoming the selected files into a fresh `DataTransfer`
+                // produces an independent `FileList` — still the real `FileList` type
+                // the `lyra-pick` contract promises, just no longer tied to this
+                // input's own live state.
+                const snapshot = new DataTransfer();
+                for (const file of selected)
+                    snapshot.items.add(file);
+                this.emit('lyra-pick', {
+                    capability: this.pendingCapability,
+                    files: snapshot.files,
+                });
+            }
+            // Clearing `.value` (not just leaving the stale selection in place)
+            // means re-picking the exact same file still fires another 'change'
+            // event next time, matching <lyra-file-input>'s identical reset.
+            input.value = '';
+        };
+    }
+    static { this.styles = [LyraElement.styles, styles]; }
+    get hasFileCapability() {
+        return this.capabilities.includes('files') || this.capabilities.includes('image');
+    }
+    effectiveAccept(capability) {
+        return capability === 'image' ? this.accept || 'image/*' : this.accept;
+    }
+    activateCapability(capability) {
+        if (this.disabled)
+            return;
+        if (capability === 'camera') {
+            this.emit('lyra-camera-request');
+            return;
+        }
+        this.pendingCapability = capability;
+        const input = this.inputEl;
+        if (!input)
+            return;
+        input.accept = this.effectiveAccept(capability);
+        input.click();
+    }
+    renderHiddenInput() {
+        return html `
+      <input
+        type="file"
+        tabindex="-1"
+        aria-hidden="true"
+        ?multiple=${this.multiple}
+        ?disabled=${this.disabled}
+        @change=${this.onInputChange}
+      />
+    `;
+    }
+    renderSingleTrigger(capability) {
+        const meta = CAPABILITY_META[capability];
+        return html `
+      <button
+        part="trigger"
+        class="trigger-button"
+        type="button"
+        aria-label=${meta.triggerLabel}
+        ?disabled=${this.disabled}
+        @click=${this.onTriggerClick}
+      >
+        ${meta.icon()}
+      </button>
+    `;
+    }
+    renderMenu() {
+        return html `
+      <lyra-menu part="menu" label="Add attachment" @lyra-menu-select=${this.onMenuSelect}>
+        <button
+          slot="trigger"
+          class="trigger-button"
+          type="button"
+          aria-label="Add attachment"
+          ?disabled=${this.disabled}
+        >
+          ${paperclipIcon()}
+        </button>
+        ${this.capabilities.map((capability) => {
+            const meta = CAPABILITY_META[capability];
+            return html `
+            <lyra-menu-item value=${capability}>
+              <span slot="icon">${meta.icon()}</span>
+              ${meta.menuLabel}
+            </lyra-menu-item>
+          `;
+        })}
+      </lyra-menu>
+    `;
+    }
+    render() {
+        const single = this.capabilities.length === 1;
+        const multi = this.capabilities.length > 1;
+        return html `
+      ${single ? this.renderSingleTrigger(this.capabilities[0]) : nothing}
+      ${multi ? this.renderMenu() : nothing}
+      ${this.hasFileCapability ? this.renderHiddenInput() : nothing}
+    `;
+    }
+}
+__decorate([
+    property({ attribute: false })
+], LyraAttachmentTrigger.prototype, "capabilities", void 0);
+__decorate([
+    property()
+], LyraAttachmentTrigger.prototype, "accept", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LyraAttachmentTrigger.prototype, "multiple", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LyraAttachmentTrigger.prototype, "disabled", void 0);
+__decorate([
+    query('input[type="file"]')
+], LyraAttachmentTrigger.prototype, "inputEl", void 0);
+defineElement('attachment-trigger', LyraAttachmentTrigger);

package/dist/components/attachment-trigger/attachment-trigger.styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/dist/components/attachment-trigger/attachment-trigger.styles.js

@@ -0,0 +1,68 @@
+import { css } from 'lit';
+export const styles = css `
+  /* Fully transparent to layout, matching lyra-menu's own :host — the
+     visible/clickable surface is entirely the rendered button (or, in the
+     multi-capability case, lyra-menu's own display:contents trigger wrapper
+     around that same button), so this host never contributes a stray box a
+     composer's leading slot would otherwise have to fight with margin/
+     inline-block quirks to line up against the textarea. */
+  :host {
+    display: contents;
+  }
+
+  /* Shared visual treatment for both the single-capability button
+     ([part='trigger']) and the multi-capability button slotted into
+     lyra-menu's own trigger slot -- the latter can't itself carry
+     part='trigger' (that name is reserved for the single-capability case,
+     so a consumer's ::part(trigger) selector unambiguously targets exactly
+     one button), so both buttons share this plain class instead of
+     duplicating the same declaration block twice. */
+  .trigger-button {
+    display: inline-flex;
+    flex: 0 0 auto;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    /* Compact per the class doc -- capped well below the library's general
+       --lyra-icon-button-size (meant for a standalone icon-only button) so
+       this sits comfortably inside a composer's leading slot alongside a
+       textarea, matching lyra-combobox's clear-button / lyra-select's
+       toggle sizing convention. */
+    min-inline-size: min(var(--lyra-icon-button-size), 1.75rem);
+    min-block-size: min(var(--lyra-icon-button-size), 1.75rem);
+    padding: 0;
+    border: none;
+    border-radius: calc(var(--lyra-radius) * 0.6);
+    background: transparent;
+    color: var(--lyra-color-text-quiet);
+    font: inherit;
+    font-size: 1.125rem;
+    line-height: 1;
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+    transition:
+      background-color var(--lyra-transition-fast),
+      color var(--lyra-transition-fast);
+  }
+  .trigger-button:hover:not(:disabled) {
+    background: color-mix(in srgb, var(--lyra-color-text) 8%, transparent);
+    color: var(--lyra-color-text);
+  }
+  .trigger-button:focus-visible {
+    outline: var(--lyra-focus-ring-width) solid var(--lyra-focus-ring-color);
+    outline-offset: var(--lyra-focus-ring-offset);
+  }
+  .trigger-button:disabled {
+    cursor: not-allowed;
+    opacity: var(--lyra-opacity-disabled);
+  }
+  .trigger-button svg {
+    display: block;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .trigger-button {
+      transition: none !important;
+    }
+  }
+`;

package/dist/components/chart/box-plot.js

@@ -70,11 +70,21 @@ export class LyraBoxPlot extends LyraElement {
     // case, so this must gate on its resolved value — mirroring the correct,
     // established pattern in `LyraChart.connectedCallback()` — instead of
     // unconditionally re-awaiting the already-cached `loadChartJs()` promise.
+    //
+    // Also guards against a disconnect while either lazy peer import is still
+    // in flight: `this.isConnected` is re-checked after each `await` gap, so a
+    // `<lyra-box-plot>` removed before the load settles never constructs a
+    // `Chart` bound to a (possibly detached) canvas.
     async onBoxPlotPluginLoaded(boxMod) {
+        if (!this.isConnected)
+            return;
         this.loading = false;
         if (!boxMod)
             return;
-        this.chartJsModule = (await loadChartJs()) ?? undefined;
+        const chartMod = await loadChartJs();
+        if (!this.isConnected)
+            return;
+        this.chartJsModule = chartMod ?? undefined;
         this.draw();
     }
     disconnectedCallback() {