@aceshooting/lyra-ui 2.1.0 → 2.3.0

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

@@ -1,331 +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, svg } from 'lit';
-import { property, state, query } from 'lit/decorators.js';
-import { LyraElement } from '../../internal/lyra-element.js';
+export * from './conversation-item.class.js';
+import { LyraConversationItem } from './conversation-item.class.js';
 import { defineElement } from '../../internal/prefix.js';
-import { styles } from './conversation-item.styles.js';
-// Mirrors the shared icon set's viewBox/stroke conventions
-// (internal/icons.ts's chevronIcon()/closeIcon()/etc.) without adding a
-// pencil/edit glyph to that module -- it's off limits here -- so this
-// one-off icon still reads as part of the same visual language as the rest
-// of the library's inline icons. Same approach lyra-checkbox's own local
-// checkmark/indeterminate glyphs and lyra-chat-message's local retryIcon()
-// take for the identical reason.
-const ICON_VIEW_BOX = '0 0 24 24';
-const ICON_STROKE_WIDTH = '1.75';
-function pencilIcon() {
-    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"
-    ><path d="M12 20h9"></path><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4Z"></path></svg>
-  `;
-}
-/** `Intl.DateTimeFormat`-based absolute formatter -- clock time ("3:45 PM")
- *  for a timestamp that falls on the same calendar day as `now`, otherwise a
- *  calendar date ("Jul 10", or "Jul 10, 2024" once it's not the current
- *  year). Deliberately not a fuzzy "2 hours ago" relative string -- bucketed
- *  relative time (grouping a whole history list into "Today"/"Yesterday"/
- *  "Last 7 days" sections) is a separate, later-phase concern at the list
- *  level, not this single row's job. `formatTimestamp` overrides this
- *  entirely, mirroring `<lyra-chat-message>`'s identical override hook. */
-function defaultFormatTimestamp(date, now = new Date()) {
-    const sameDay = date.toDateString() === now.toDateString();
-    if (sameDay) {
-        return new Intl.DateTimeFormat(undefined, { hour: 'numeric', minute: '2-digit' }).format(date);
-    }
-    const sameYear = date.getFullYear() === now.getFullYear();
-    return new Intl.DateTimeFormat(undefined, sameYear ? { month: 'short', day: 'numeric' } : { month: 'short', day: 'numeric', year: 'numeric' }).format(date);
-}
-/**
- * `<lyra-conversation-item>` — a selectable row representing one chat
- * session in a history sidebar list. Usable standalone or as the
- * `renderItem()` payload of a sibling virtualized-list component; this
- * module has no dependency on that (or any) other component.
- *
- * Takes `title`/`excerpt`/`timestamp` as individual primitive props rather
- * than one opaque bound object, deliberately consistent with how
- * `<lyra-chat-message>` takes individual props instead of a single
- * `.message` blob -- every other component in this family follows that
- * shape, so this one does too even though a single bound `.session` object
- * would also have been a reasonable design.
- *
- * Identifying *which* session a `lyra-select` click/keypress was about: this
- * reuses the platform's own `id` attribute (every element already has one)
- * rather than inventing a second, differently-named id-carrying prop --
- * consumers already have the event's `target`/`currentTarget` (and thus
- * `.id`), the same reasoning `<lyra-attachment-chip>` documents for its own
- * identically-shaped choice. `lyra-select` therefore carries no detail
- * payload at all.
- *
- * `role="button"` on `[part="option"]` so the item has valid semantics both
- * standalone and when placed in a larger history-list layout. A conversation
- * row activates one current session; it is not itself a listbox option and
- * therefore does not require a particular owner role.
- *
- * `role="button"` forbids focusable
- * descendants -- verified against axe-core's `nested-interactive` rule,
- * which flags it. That's why the rename button and the `actions` slot are
- * rendered as DOM *siblings* of `[part="option"]` (both inside
- * `[part="base"]`) rather than nested inside it: `[part="option"]` only ever
- * contains plain text/`<time>` content. The in-place rename `<input>` is the
- * same problem one level deeper -- it replaces the title *inside*
- * `[part="option"]` while renaming -- so `[part="option"]` sheds its
- * `role`/`tabindex`/`aria-current`/`aria-label` entirely for the duration
- * of an edit. A row mid-edit is a text field, so suspending the button
- * semantics is also the more accurate
- * description of what's on screen.
- *
- * Inline rename is a dedicated pencil/edit icon button (not a double-click
- * on the title) -- double-click has no keyboard/screen-reader equivalent
- * and would silently swallow the row's own single-click `lyra-select`,
- * whereas a button is independently focusable, has its own accessible name,
- * and composes cleanly with click-to-select.
- *
- * @customElement lyra-conversation-item
- * @slot actions - Overflow/icon-button controls (e.g. a future pin/delete
- * button) rendered at the trailing edge of the row. `lyra-menu` doesn't
- * exist yet in this phase, so this is a plain slot for whatever a consumer
- * wants to put there today.
- * @event lyra-select - The row was activated: a click on `[part="option"]`
- * (i.e. outside the rename button and the `actions` slot), or Enter/Space
- * while it's focused -- in both cases only while not currently renaming. No
- * detail payload -- see the class doc's "Identifying which session" note.
- * @event lyra-rename - An in-place rename was committed (Enter, or blur
- * while editing). `detail: { title }`. Does not mutate `title` itself --
- * this is a controlled component, the same convention
- * `<lyra-chat-message>` follows by not clearing its own state on retry; the
- * consumer applies the new title once it's actually persisted. Not fired
- * when the trimmed draft is empty or unchanged from the original `title`
- * (that's treated as an implicit cancel).
- * @csspart base - The outer row wrapper (plain, no ARIA role) laying out `[part="option"]`, the rename button, and `actions`.
- * @csspart option - The selectable region (`role="button"`, removed while renaming -- see the class doc). Wraps `content` and `timestamp`.
- * @csspart content - Wrapper around the title and excerpt.
- * @csspart title - The title text, shown while not renaming.
- * @csspart title-input - The in-place rename `<input>`, shown only while renaming.
- * @csspart rename-button - The pencil/edit affordance that starts a rename (only rendered while `editable` and not already renaming).
- * @csspart excerpt - The last-message preview snippet. Only rendered when `excerpt` is non-empty.
- * @csspart timestamp - The formatted `timestamp`, rendered in a `<time>` element. Only rendered when `timestamp` is set and valid.
- * @csspart actions - The wrapper around the `actions` slot.
- */
-export class LyraConversationItem extends LyraElement {
-    constructor() {
-        super(...arguments);
-        /** The session's display title. */
-        this.title = '';
-        /** A short preview snippet of the last message. Omit for no excerpt line. */
-        this.excerpt = '';
-        /** Whether this is the currently-selected/open session. Drives the
-         *  brand-quiet background treatment. */
-        this.active = false;
-        /** Whether inline-rename is available at all. When `false`, the rename
-         *  button never renders and the row can never enter its editing state. If
-         *  flipped to `false` while a rename is already open, the in-progress edit
-         *  is cancelled (discarded, like Escape) rather than left committable. */
-        this.editable = true;
-        this.renaming = false;
-        this.draftTitle = '';
-        this.hasActionsSlot = false;
-        this.onOptionClick = () => {
-            // While renaming, `[part="option"]` has no role/selection semantics
-            // (see the class doc) -- a click inside it (e.g. to place the caret in
-            // the input) must not also select the row.
-            if (this.renaming)
-                return;
-            this.select();
-        };
-        this.onOptionKeyDown = (e) => {
-            if (this.renaming)
-                return;
-            if (e.key === 'Enter' || e.key === ' ' || e.key === 'Spacebar') {
-                // Space would otherwise scroll the page, same as lyra-checkbox/lyra-switch.
-                e.preventDefault();
-                this.select();
-            }
-        };
-        this.onRenameButtonClick = () => {
-            // No stopPropagation() needed here: the rename button is a DOM sibling
-            // of `[part="option"]` (see the class doc), not a descendant of it, so
-            // this click was never going to reach onOptionClick's listener anyway.
-            this.startRename();
-        };
-        this.onTitleInputChange = (e) => {
-            this.draftTitle = e.target.value;
-        };
-        this.onTitleInputKeyDown = (e) => {
-            // The input is a descendant of `[part="option"]` (unlike the rename
-            // button/actions slot, which are siblings of it) -- its keydown would
-            // otherwise bubble into onOptionKeyDown above. Stopping it here avoids a
-            // race where commitRename() (called below) has already flipped
-            // `renaming` back to `false` by the time that bubbled event reaches
-            // onOptionKeyDown's own `if (this.renaming) return;` guard, which would
-            // otherwise wrongly let the same Enter keystroke also fire lyra-select.
-            e.stopPropagation();
-            if (e.key === 'Enter') {
-                e.preventDefault();
-                this.commitRename();
-            }
-            else if (e.key === 'Escape') {
-                e.preventDefault();
-                this.cancelRename();
-            }
-        };
-        this.onTitleInputBlur = () => {
-            // If Escape already ended the edit synchronously (cancelRename() runs
-            // before this fires), `renaming` is already false by the time the
-            // now-removed input's blur event reaches here -- skip so Escape can't
-            // also commit.
-            if (!this.renaming)
-                return;
-            this.commitRename();
-        };
-        this.onActionsSlotChange = (e) => {
-            this.hasActionsSlot = e.target.assignedElements({ flatten: true }).length > 0;
-        };
-    }
-    static { this.styles = [LyraElement.styles, styles]; }
-    willUpdate(changed) {
-        if (!this.hasUpdated) {
-            this.hasActionsSlot = Array.from(this.children).some((el) => el.getAttribute('slot') === 'actions');
-        }
-        // `editable` documents that flipping it false can never leave a rename
-        // committable -- without this, toggling it mid-edit would strand the
-        // input mounted (and still submittable via Enter/blur) since nothing
-        // else observes `editable` while `renaming` is already true.
-        if (changed.has('editable') && !this.editable && this.renaming) {
-            this.cancelRename();
-        }
-    }
-    updated(changed) {
-        if (changed.has('renaming') && this.renaming) {
-            // Runs after render, so the input already exists in the DOM.
-            this.titleInput?.focus();
-            this.titleInput?.select();
-        }
-    }
-    get normalizedTimestamp() {
-        if (this.timestamp === undefined)
-            return undefined;
-        const date = this.timestamp instanceof Date ? this.timestamp : new Date(this.timestamp);
-        return Number.isNaN(date.getTime()) ? undefined : date;
-    }
-    select() {
-        this.emit('lyra-select');
-    }
-    startRename() {
-        if (!this.editable || this.renaming)
-            return;
-        this.draftTitle = this.title;
-        this.renaming = true;
-    }
-    commitRename() {
-        this.renaming = false;
-        const next = this.draftTitle.trim();
-        // An empty or unchanged draft has nothing meaningful to commit -- treat
-        // it the same as Escape rather than firing a no-op (or blanking) rename
-        // for the consumer to deal with.
-        if (!next || next === this.title)
-            return;
-        this.emit('lyra-rename', { title: next });
-    }
-    cancelRename() {
-        this.renaming = false;
-    }
-    render() {
-        const ts = this.normalizedTimestamp;
-        const formatter = this.formatTimestamp ?? defaultFormatTimestamp;
-        const displayTitle = this.title || 'Untitled conversation';
-        const showRenameButton = this.editable && !this.renaming;
-        // Shared between the rename button and the input it opens: the input is
-        // where focus actually lands, so it needs the same row-specific
-        // accessible name (not a generic one) to disambiguate which row a
-        // screen-reader user is editing.
-        const renameLabel = `Rename ${displayTitle}`;
-        return html `
-      <div part="base">
-        <div
-          part="option"
-          role=${this.renaming ? nothing : 'button'}
-          tabindex=${this.renaming ? nothing : '0'}
-          aria-current=${this.renaming || !this.active ? nothing : 'true'}
-          aria-label=${this.renaming ? nothing : this.getAttribute('aria-label') || displayTitle}
-          @click=${this.onOptionClick}
-          @keydown=${this.onOptionKeyDown}
-        >
-          <div part="content">
-            ${this.renaming
-            ? html `<input
-                  part="title-input"
-                  type="text"
-                  .value=${this.draftTitle}
-                  aria-label=${renameLabel}
-                  @input=${this.onTitleInputChange}
-                  @keydown=${this.onTitleInputKeyDown}
-                  @blur=${this.onTitleInputBlur}
-                />`
-            : html `<span part="title" title=${displayTitle}>${displayTitle}</span>`}
-            ${this.excerpt ? html `<span part="excerpt">${this.excerpt}</span>` : nothing}
-          </div>
-          ${ts ? html `<time part="timestamp" datetime=${ts.toISOString()}>${formatter(ts)}</time>` : nothing}
-        </div>
-        ${showRenameButton
-            ? html `<button
-              part="rename-button"
-              type="button"
-              aria-label=${renameLabel}
-              @click=${this.onRenameButtonClick}
-            >
-              ${pencilIcon()}
-            </button>`
-            : nothing}
-        <span part="actions" ?hidden=${!this.hasActionsSlot}>
-          <slot name="actions" @slotchange=${this.onActionsSlotChange}></slot>
-        </span>
-      </div>
-    `;
-    }
-}
-__decorate([
-    property()
-], LyraConversationItem.prototype, "title", void 0);
-__decorate([
-    property()
-], LyraConversationItem.prototype, "excerpt", void 0);
-__decorate([
-    property({ attribute: false })
-], LyraConversationItem.prototype, "timestamp", void 0);
-__decorate([
-    property({ attribute: false })
-], LyraConversationItem.prototype, "formatTimestamp", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], LyraConversationItem.prototype, "active", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], LyraConversationItem.prototype, "editable", void 0);
-__decorate([
-    state()
-], LyraConversationItem.prototype, "renaming", void 0);
-__decorate([
-    state()
-], LyraConversationItem.prototype, "draftTitle", void 0);
-__decorate([
-    state()
-], LyraConversationItem.prototype, "hasActionsSlot", void 0);
-__decorate([
-    query('[part="title-input"]')
-], LyraConversationItem.prototype, "titleInput", void 0);
 defineElement('conversation-item', LyraConversationItem);
+//# sourceMappingURL=conversation-item.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"conversation-item.js","sourceRoot":"","sources":["../../../src/components/conversation-item/conversation-item.ts"],"names":[],"mappings":"AAAA,cAAc,8BAA8B,CAAC;AAC7C,OAAO,EAAE,oBAAoB,EAAE,MAAM,8BAA8B,CAAC;AACpE,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,aAAa,CAAC,mBAAmB,EAAE,oBAAoB,CAAC,CAAC"}

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

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

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

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

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

@@ -2,8 +2,8 @@ import { css } from 'lit';
 export const styles = css `
   :host {
     display: block;
-    font-size: 0.875rem;
-    line-height: 1.4;
+    font-size: var(--lyra-font-size-md-sm);
+    line-height: var(--lyra-line-height-1-4);
   }
 
   /* [part='base'] is a plain layout wrapper (no ARIA role of its own) --
@@ -61,7 +61,7 @@ export const styles = css `
     min-inline-size: 0;
     display: flex;
     flex-direction: column;
-    gap: 0.125rem;
+    gap: var(--lyra-size-0-125rem);
   }
 
   [part='title'] {
@@ -69,7 +69,7 @@ export const styles = css `
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    font-weight: 600;
+    font-weight: var(--lyra-font-weight-semibold);
     color: var(--lyra-color-text);
   }
 
@@ -77,13 +77,13 @@ export const styles = css `
     display: block;
     inline-size: 100%;
     box-sizing: border-box;
-    padding: 0.125rem var(--lyra-space-xs);
-    border: 1px solid var(--lyra-color-brand);
+    padding: var(--lyra-size-0-125rem) var(--lyra-space-xs);
+    border: var(--lyra-border-width-thin) solid var(--lyra-color-brand);
     border-radius: calc(var(--lyra-radius) * 0.6);
     background: var(--lyra-color-surface);
     color: var(--lyra-color-text);
     font: inherit;
-    font-weight: 600;
+    font-weight: var(--lyra-font-weight-semibold);
   }
   [part='title-input']:focus-visible {
     outline: var(--lyra-focus-ring-width) solid var(--lyra-focus-ring-color);
@@ -96,7 +96,7 @@ export const styles = css `
     text-overflow: ellipsis;
     white-space: nowrap;
     color: var(--lyra-color-text-quiet);
-    font-size: 0.8125rem;
+    font-size: var(--lyra-font-size-sm);
   }
 
   [part='timestamp'] {
@@ -104,7 +104,7 @@ export const styles = css `
     align-self: flex-start;
     white-space: nowrap;
     color: var(--lyra-color-text-quiet);
-    font-size: 0.75rem;
+    font-size: var(--lyra-font-size-xs);
     font-variant-numeric: tabular-nums;
   }
 
@@ -113,8 +113,8 @@ export const styles = css `
     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);
+    min-inline-size: min(var(--lyra-icon-button-size), var(--lyra-size-1-75rem));
+    min-block-size: min(var(--lyra-icon-button-size), var(--lyra-size-1-75rem));
     padding: 0;
     border: none;
     border-radius: calc(var(--lyra-radius) * 0.6);
@@ -153,3 +153,4 @@ export const styles = css `
     }
   }
 `;
+//# sourceMappingURL=conversation-item.styles.js.map

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

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

package/dist/components/copy-button/copy-button.class.d.ts

@@ -0,0 +1,37 @@
+import { type TemplateResult } from 'lit';
+import { LyraElement } from '../../internal/lyra-element.js';
+export interface LyraCopyButtonEventMap {
+    'lyra-copy': CustomEvent<{
+        text: string;
+    }>;
+}
+/**
+ * `<lyra-copy-button>` — a standalone icon-only copy-to-clipboard affordance for a plain
+ * single/multi-line text value in a layout the consumer controls (e.g. absolutely positioned in
+ * the corner of a `wa-textarea` or a read-only output field). Unlike `lyra-code-block`'s or
+ * `lyra-json-viewer`'s own built-in copy buttons, this takes no positioning opinion of its own and
+ * has no code/JSON content model to adopt just to reuse the copy affordance.
+ *
+ * @customElement lyra-copy-button
+ * @event lyra-copy - Fired on activation. `detail: { text }` is always `value`, and always fires
+ *   regardless of whether the actual OS clipboard write succeeded — same convention as
+ *   `lyra-code-block`'s/`lyra-json-viewer`'s own copy buttons.
+ * @csspart base - The button itself.
+ */
+export declare class LyraCopyButton extends LyraElement<LyraCopyButtonEventMap> {
+    static styles: import("lit").CSSResultGroup[];
+    /** The plain text to copy. */
+    value: string;
+    private justCopied;
+    private copyTimeoutId?;
+    disconnectedCallback(): void;
+    private writeClipboard;
+    private onClick;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-copy-button': LyraCopyButton;
+    }
+}
+//# sourceMappingURL=copy-button.class.d.ts.map

package/dist/components/copy-button/copy-button.class.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"copy-button.class.d.ts","sourceRoot":"","sources":["../../../src/components/copy-button/copy-button.class.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,KAAK,cAAc,EAA0B,MAAM,KAAK,CAAC;AAE7E,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AA+C7D,MAAM,WAAW,sBAAsB;IACrC,WAAW,EAAE,WAAW,CAAC;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CAC5C;AACD;;;;;;;;;;;;GAYG;AACH,qBAAa,cAAe,SAAQ,WAAW,CAAC,sBAAsB,CAAC;IACrE,MAAM,CAAC,MAAM,iCAAgC;IAE7C,8BAA8B;IAClB,KAAK,SAAM;IAEd,OAAO,CAAC,UAAU,CAAS;IAEpC,OAAO,CAAC,aAAa,CAAC,CAAgC;IAEtD,oBAAoB,IAAI,IAAI,CAG3B;IAED,OAAO,CAAC,cAAc;IAYtB,OAAO,CAAC,OAAO,CAQb;IAEF,MAAM,IAAI,cAAc,CAWvB;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,cAAc,CAAC;KACpC;CACF"}

package/dist/components/copy-button/copy-button.class.js

@@ -0,0 +1,116 @@
+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, svg } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { LyraElement } from '../../internal/lyra-element.js';
+import { styles } from './copy-button.styles.js';
+/** How long the checkmark confirmation state lasts before reverting -- matches
+ *  `lyra-code-block`'s own `COPY_CONFIRM_MS`. */
+const COPY_CONFIRM_MS = 1500;
+const ICON_VIEW_BOX = '0 0 24 24';
+const ICON_STROKE_WIDTH = '1.75';
+/** A generic two-rectangle "copy" glyph. */
+function copyIcon() {
+    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"
+    ><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>
+  `;
+}
+/** Matches `<lyra-checkbox>`'s own checkmark glyph exactly, for visual consistency across the
+ *  library's "confirmation" affordances. */
+function checkIcon() {
+    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"
+    ><polyline points="5 12.5 10 17.5 19 6.5"></polyline></svg>
+  `;
+}
+/**
+ * `<lyra-copy-button>` — a standalone icon-only copy-to-clipboard affordance for a plain
+ * single/multi-line text value in a layout the consumer controls (e.g. absolutely positioned in
+ * the corner of a `wa-textarea` or a read-only output field). Unlike `lyra-code-block`'s or
+ * `lyra-json-viewer`'s own built-in copy buttons, this takes no positioning opinion of its own and
+ * has no code/JSON content model to adopt just to reuse the copy affordance.
+ *
+ * @customElement lyra-copy-button
+ * @event lyra-copy - Fired on activation. `detail: { text }` is always `value`, and always fires
+ *   regardless of whether the actual OS clipboard write succeeded — same convention as
+ *   `lyra-code-block`'s/`lyra-json-viewer`'s own copy buttons.
+ * @csspart base - The button itself.
+ */
+export class LyraCopyButton extends LyraElement {
+    constructor() {
+        super(...arguments);
+        /** The plain text to copy. */
+        this.value = '';
+        this.justCopied = false;
+        this.onClick = () => {
+            this.writeClipboard(this.value);
+            this.emit('lyra-copy', { text: this.value });
+            this.justCopied = true;
+            clearTimeout(this.copyTimeoutId);
+            this.copyTimeoutId = setTimeout(() => {
+                this.justCopied = false;
+            }, COPY_CONFIRM_MS);
+        };
+    }
+    static { this.styles = [LyraElement.styles, styles]; }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        clearTimeout(this.copyTimeoutId);
+    }
+    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; the click
+            // handler below always emits lyra-copy regardless of whether the OS clipboard was actually
+            // reached. Same precedent as <lyra-code-block>'s/<lyra-json-viewer>'s own copy buttons.
+            void navigator.clipboard?.writeText(text)?.catch(() => { });
+        }
+        catch {
+            // see above
+        }
+    }
+    render() {
+        return html `
+      <button
+        part="base"
+        type="button"
+        aria-label=${this.justCopied ? this.localize('copied') : this.localize('copy')}
+        @click=${this.onClick}
+      >
+        ${this.justCopied ? checkIcon() : copyIcon()}
+      </button>
+    `;
+    }
+}
+__decorate([
+    property()
+], LyraCopyButton.prototype, "value", void 0);
+__decorate([
+    state()
+], LyraCopyButton.prototype, "justCopied", void 0);
+//# sourceMappingURL=copy-button.class.js.map

package/dist/components/copy-button/copy-button.class.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"copy-button.class.js","sourceRoot":"","sources":["../../../src/components/copy-button/copy-button.class.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAA+C,MAAM,KAAK,CAAC;AAC7E,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAC7D,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAEjD;iDACiD;AACjD,MAAM,eAAe,GAAG,IAAI,CAAC;AAE7B,MAAM,aAAa,GAAG,WAAW,CAAC;AAClC,MAAM,iBAAiB,GAAG,MAAM,CAAC;AAEjC,4CAA4C;AAC5C,SAAS,QAAQ;IACf,OAAO,GAAG,CAAA;;;;gBAII,aAAa;;;qBAGR,iBAAiB;;;;;;GAMnC,CAAC;AACJ,CAAC;AAED;4CAC4C;AAC5C,SAAS,SAAS;IAChB,OAAO,GAAG,CAAA;;;;gBAII,aAAa;;;qBAGR,iBAAiB;;;;;;GAMnC,CAAC;AACJ,CAAC;AAKD;;;;;;;;;;;;GAYG;AACH,MAAM,OAAO,cAAe,SAAQ,WAAmC;IAAvE;;QAGE,8BAA8B;QAClB,UAAK,GAAG,EAAE,CAAC;QAEN,eAAU,GAAG,KAAK,CAAC;QAqB5B,YAAO,GAAG,GAAS,EAAE;YAC3B,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YAChC,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;YAC7C,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;YACvB,YAAY,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;YACjC,IAAI,CAAC,aAAa,GAAG,UAAU,CAAC,GAAG,EAAE;gBACnC,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;YAC1B,CAAC,EAAE,eAAe,CAAC,CAAC;QACtB,CAAC,CAAC;IAcJ,CAAC;aAhDQ,WAAM,GAAG,CAAC,WAAW,CAAC,MAAM,EAAE,MAAM,CAAC,AAA/B,CAAgC;IAS7C,oBAAoB;QAClB,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,YAAY,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;IACnC,CAAC;IAEO,cAAc,CAAC,IAAY;QACjC,IAAI,CAAC;YACH,wFAAwF;YACxF,yFAAyF;YACzF,2FAA2F;YAC3F,wFAAwF;YACxF,KAAK,SAAS,CAAC,SAAS,EAAE,SAAS,CAAC,IAAI,CAAC,EAAE,KAAK,CAAC,GAAG,EAAE,GAAE,CAAC,CAAC,CAAC;QAC7D,CAAC;QAAC,MAAM,CAAC;YACP,YAAY;QACd,CAAC;IACH,CAAC;IAYD,MAAM;QACJ,OAAO,IAAI,CAAA;;;;qBAIM,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC;iBACrE,IAAI,CAAC,OAAO;;UAEnB,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC,QAAQ,EAAE;;KAE/C,CAAC;IACJ,CAAC;CACF;AA7Ca;IAAX,QAAQ,EAAE;6CAAY;AAEN;IAAhB,KAAK,EAAE;kDAA4B"}

package/dist/components/copy-button/copy-button.d.ts

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

package/dist/components/copy-button/copy-button.d.ts.map

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

package/dist/components/copy-button/copy-button.js

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

package/dist/components/copy-button/copy-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"copy-button.js","sourceRoot":"","sources":["../../../src/components/copy-button/copy-button.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/copy-button/copy-button.styles.d.ts

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

package/dist/components/copy-button/copy-button.styles.d.ts.map

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

package/dist/components/copy-button/copy-button.styles.js

@@ -0,0 +1,40 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: inline-flex;
+  }
+  [part='base'] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    min-inline-size: var(--lyra-icon-button-size);
+    min-block-size: var(--lyra-icon-button-size);
+    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),
+      color var(--lyra-transition-fast);
+  }
+  /* :where() keeps this rule's specificity low ((0,1,0)) so a consumer's own
+     ::part(base):hover override ((0,1,1)) wins without needing !important --
+     see lyra-attachment-trigger's identical fix for the same reasoning. */
+  :where([part='base']):hover {
+    background: color-mix(in srgb, var(--lyra-color-text) 8%, transparent);
+    color: var(--lyra-color-text);
+  }
+  [part='base']:focus-visible {
+    outline: var(--lyra-focus-ring-width) solid var(--lyra-focus-ring-color);
+    outline-offset: var(--lyra-focus-ring-offset);
+  }
+  [part='base'] svg {
+    display: block;
+  }
+`;
+//# sourceMappingURL=copy-button.styles.js.map

package/dist/components/copy-button/copy-button.styles.js.map

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