@aceshooting/lyra-ui 3.9.0 → 4.1.0

package/dist/components/chat-composer/chat-composer.styles.js

@@ -6,16 +6,16 @@ export const styles = css `
   [part='base'] {
     display: flex;
     flex-direction: column;
-    gap: var(--lyra-space-xs);
+    gap: var(--lr-space-xs);
     box-sizing: border-box;
-    border: var(--lyra-border-width-thin) solid var(--lyra-color-border);
-    border-radius: var(--lyra-radius);
-    background: var(--lyra-color-surface);
-    padding: var(--lyra-space-s);
-    transition: border-color var(--lyra-transition-fast);
+    border: var(--lr-border-width-thin) solid var(--lr-color-border);
+    border-radius: var(--lr-radius);
+    background: var(--lr-color-surface);
+    padding: var(--lr-space-s);
+    transition: border-color var(--lr-transition-fast);
   }
   [part='base']:focus-within {
-    border-color: var(--lyra-color-brand);
+    border-color: var(--lr-color-brand);
   }
   /* :host(:disabled), not :host([disabled]) -- this is a form-associated
      custom element (FormAssociated mixin -> static formAssociated = true),
@@ -28,21 +28,21 @@ export const styles = css `
      the card around them still rendered at full opacity with a normal
      cursor. */
   :host(:disabled) [part='base'] {
-    opacity: var(--lyra-opacity-disabled);
+    opacity: var(--lr-opacity-disabled);
     cursor: not-allowed;
   }
 
   /* :empty never matches [part='chips'] -- it always contains a literal
      <slot> child regardless of assigned content -- so real emptiness is
      tracked in JS (hasChipsSlot) and reflected via [hidden] instead (same
-     fix as lyra-date-input's hint/error parts). Author-level display rules
+     fix as lr-date-input's hint/error parts). Author-level display rules
      always beat the UA stylesheet's [hidden] rule regardless of source
      order/specificity (different cascade origins), so the override below is
      required, not redundant. */
   [part='chips'] {
     display: flex;
     flex-wrap: wrap;
-    gap: var(--lyra-space-xs);
+    gap: var(--lr-space-xs);
   }
   [part='chips'][hidden] {
     display: none;
@@ -51,7 +51,7 @@ export const styles = css `
   [part='row'] {
     display: flex;
     align-items: flex-end;
-    gap: var(--lyra-space-s);
+    gap: var(--lr-space-s);
   }
 
   [part='leading'] {
@@ -61,7 +61,7 @@ export const styles = css `
     /* Matches the textarea's own first-line box so a leading icon button
        sits level with placeholder/typed text at min-rows, not glued to the
        row's cross-axis edge. */
-    padding-block-end: var(--lyra-space-xs);
+    padding-block-end: var(--lr-space-xs);
   }
   [part='leading'][hidden] {
     display: none;
@@ -81,12 +81,12 @@ export const styles = css `
        (chat-composer.ts's resizeTextarea()) can read a real pixel value
        back out of getComputedStyle() -- the UA default of "normal" has no
        single resolved px figure to measure rows against. */
-    line-height: var(--lyra-line-height-normal);
-    padding-block: var(--lyra-space-xs);
+    line-height: var(--lr-line-height-normal);
+    padding-block: var(--lr-space-xs);
     overflow-y: hidden;
   }
   [part='textarea']::placeholder {
-    color: var(--lyra-color-text-quiet);
+    color: var(--lr-color-text-quiet);
   }
   [part='textarea']:disabled {
     cursor: not-allowed;
@@ -96,7 +96,7 @@ export const styles = css `
     display: flex;
     flex: 0 0 auto;
     align-items: center;
-    gap: var(--lyra-space-xs);
+    gap: var(--lr-space-xs);
   }
 
   [part='action-button'] {
@@ -105,35 +105,35 @@ export const styles = css `
     justify-content: center;
     flex: 0 0 auto;
     box-sizing: border-box;
-    min-inline-size: var(--lyra-icon-button-size);
-    min-block-size: var(--lyra-icon-button-size);
+    min-inline-size: var(--lr-icon-button-size);
+    min-block-size: var(--lr-icon-button-size);
     border: none;
-    border-radius: var(--lyra-radius);
-    background: var(--lyra-color-brand);
-    color: var(--lyra-color-on-brand);
-    font-size: var(--lyra-font-size-lg);
-    line-height: var(--lyra-line-height-none);
+    border-radius: var(--lr-radius);
+    background: var(--lr-color-brand);
+    color: var(--lr-color-on-brand);
+    font-size: var(--lr-font-size-lg);
+    line-height: var(--lr-line-height-none);
     cursor: pointer;
-    transition: background-color var(--lyra-transition-fast);
+    transition: background-color var(--lr-transition-fast);
   }
   [part='action-button']:hover {
-    background: var(--lyra-color-brand);
+    background: var(--lr-color-brand);
     filter: brightness(1.1);
   }
   [part='action-button']:focus-visible {
-    outline: var(--lyra-focus-ring-width) solid var(--lyra-focus-ring-color);
-    outline-offset: var(--lyra-focus-ring-offset);
+    outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);
+    outline-offset: var(--lr-focus-ring-offset);
   }
   [part='action-button']:disabled {
     cursor: not-allowed;
-    opacity: var(--lyra-opacity-disabled);
+    opacity: var(--lr-opacity-disabled);
   }
   /* Stop affordance while generating -- a neutral/quiet treatment rather
      than the resting brand fill, so it doesn't read as "send is still
      available" while a response is in flight. */
   :host([status='sending']) [part='action-button'],
   :host([status='streaming']) [part='action-button'] {
-    background: var(--lyra-color-text-quiet);
+    background: var(--lr-color-text-quiet);
   }
 
   @media (prefers-reduced-motion: reduce) {

package/dist/components/chat-message/chat-message.class.d.ts

@@ -4,14 +4,14 @@ import '../live-region/live-region.class.js';
 export type ChatMessageRole = 'user' | 'assistant' | 'system';
 export type ChatMessageStatus = 'sending' | 'sent' | 'failed' | 'streaming';
 export interface LyraChatMessageEventMap {
-    'lyra-retry': CustomEvent<undefined>;
-    'lyra-collapse-toggle': CustomEvent<boolean>;
+    'lr-retry': CustomEvent<undefined>;
+    'lr-collapse-toggle': CustomEvent<boolean>;
 }
 /**
- * `<lyra-chat-message>` — a role-based message bubble *shell* for a chat/
+ * `<lr-chat-message>` — a role-based message bubble *shell* for a chat/
  * agent conversation surface. It renders none of the message content itself:
  * the default slot carries whatever a consumer wants to display (plain
- * text, a `<lyra-markdown>`, a custom template, anything at all) and this
+ * text, a `<lr-markdown>`, a custom template, anything at all) and this
  * component only supplies the surrounding chrome — alignment/coloring by
  * `role`, an avatar/badges header row, an optional collapse toggle, an
  * attachments strip, and a status-aware footer (a live-updating status dot +
@@ -22,22 +22,26 @@ export interface LyraChatMessageEventMap {
  * an arbitrary slotted message even means (plain text? the rendered
  * markdown source? something else?) is exactly the kind of content
  * interpretation this shell deliberately stays out of — slot a copy control
- * into `actions` instead. Firing `lyra-copy` (`detail: { text }`) from that
- * control keeps the event name consistent with `<lyra-json-viewer>`'s own
+ * into `actions` instead. Firing `lr-copy` (`detail: { text }`) from that
+ * control keeps the event name consistent with `<lr-json-viewer>`'s own
  * copy affordance, for anything listening at the conversation-surface level.
  *
  * Accessibility of `status`: the current status is always available as
  * plain visible text (`[part="status-text"]`), never color alone. A
  * transition *to* `"failed"`, or *from* `"streaming"` to `"sent"` (a stream
  * finishing), is additionally announced through an internal
- * `<lyra-live-region>` (see that component's header for the throttled-
+ * `<lr-live-region>` (see that component's header for the throttled-
  * announcement wiring this composes) so a screen-reader user who isn't
- * currently focused on this message still learns about it. This differs
- * from `<lyra-typing-indicator>`'s deliberately simpler `role="status"`
+ * currently focused on this message still learns about it — *unless* the
+ * `failure` slot has content, in which case this internal announcement is
+ * skipped: the host's own `role="alert"` failure content is expected to
+ * announce itself, and firing both would double-announce the same failure
+ * with two different (and differently specific) messages. This differs
+ * from `<lr-typing-indicator>`'s deliberately simpler `role="status"`
  * approach — that component only ever has one thing to announce (its own
  * mount); this one has a `status` that can flip between several values
  * across a single element's lifetime, which is exactly the coalescing job
- * `<lyra-live-region>` exists for.
+ * `<lr-live-region>` exists for.
  *
  * `role` is a message-author role (`user`/`assistant`/`system`, matching
  * the vocabulary of every chat/completion API), *not* a WAI-ARIA role, so
@@ -50,29 +54,47 @@ export interface LyraChatMessageEventMap {
  * useful for consumers whose action row (e.g., a hover-reveal copy button)
  * must sit visually outside the bubble's chrome.
  *
- * @customElement lyra-chat-message
+ * @customElement lr-chat-message
  * @slot - The message body.
  * @slot avatar - An avatar/icon for the message author.
  * @slot badges - Small status/metric chips (e.g. token count, latency, model name) — entirely app-supplied; this component computes none of that itself.
  * @slot actions - Action controls (e.g. copy, retry), rendered at the end of the footer.
  * @slot attachments - File/image attachment chips, rendered below the message body by default; see `attachments-position`.
- * @event lyra-retry - Fired by the built-in retry button, only rendered when `status="failed"`.
- * @event lyra-collapse-toggle - `detail: boolean` (the new `collapsed` state) — fired when the user activates the built-in collapse button.
- * @csspart bubble - The message bubble root. Programmatically focusable (`tabindex="-1"`) so focus has a stable place to land when the built-in retry button is removed (e.g. a `lyra-retry` listener flipping `status` away from `"failed"`).
+ * @slot failure - Only ever rendered while `status="failed"`. Empty (the default), the footer keeps
+ *   its built-in `[part="status-text"]`/`[part="retry-button"]` exactly as before. The moment this
+ *   slot has assigned content, that built-in status text and retry button are suppressed — the host
+ *   is now fully responsible for presenting its own failure UI, and the built-in `chatFailedAnnounce`
+ *   live-region announcement is suppressed too (see `@event lr-retry` below for the effect on that
+ *   event, and the "Accessibility of `status`" paragraph above for the built-in announcement this
+ *   replaces). Content assigned here should carry `role="alert"` itself when it represents an
+ *   actionable send failure — this component does not add that role on the host's behalf, since it
+ *   has no way to know what markup the host puts in this slot. This mirrors `lr-flow-node`'s `header`
+ *   slot, which replaces that component's own built-in heading row the same way.
+ * @event lr-retry - Fired by the built-in retry button, only rendered when `status="failed"` and the
+ *   `failure` slot is empty. A host using the `failure` slot owns its own retry control and is not
+ *   required to use this event at all — but nothing stops that control from dispatching its own
+ *   `new CustomEvent('lr-retry', { bubbles: true, composed: true })` to stay consistent with the
+ *   same event contract a listener further up a conversation surface already relies on for every
+ *   other message.
+ * @event lr-collapse-toggle - `detail: boolean` (the new `collapsed` state) — fired when the user activates the built-in collapse button.
+ * @csspart bubble - The message bubble root. Programmatically focusable (`tabindex="-1"`) so focus has a stable place to land when the built-in retry button is removed (e.g. a `lr-retry` listener flipping `status` away from `"failed"`).
  * @csspart header - The row above the message body — avatar, badges, and the collapse toggle. Hidden entirely when none of those have anything to show.
  * @csspart avatar - The wrapper around the `avatar` slot.
  * @csspart badges - The wrapper around the `badges` slot.
  * @csspart collapse-button - The built-in collapse/expand toggle (only rendered when `collapsible`).
  * @csspart body - The wrapper around the default slot (the message content). Hidden while `collapsed`.
  * @csspart attachments - The wrapper around the `attachments` slot.
+ * @csspart failure - The `failure` slot itself (`display: contents` — it contributes no box of its
+ *   own, so the host's own content lays out exactly as if it were a direct child of `bubble`, with no
+ *   `::part(failure)` override needed to get there). Only present in the DOM while `status="failed"`.
  * @csspart footer - The row below the message body — status, timestamp, retry, and actions. Hidden entirely when none of those have anything to show.
  * @csspart status-indicator - A small decorative (`aria-hidden`) dot reflecting `status`; absent while `status="sent"`.
  * @csspart status-text - The visible text twin of `status-indicator` — carries the state in text, not just color.
  * @csspart timestamp - The formatted `timestamp`, rendered in a `<time>` element.
  * @csspart retry-button - The built-in retry button (only rendered when `status="failed"`).
  * @csspart actions - The wrapper around the `actions` slot. Rendered inside the footer by default; a sibling immediately after `bubble` when `actionsOutsideBubble` is set.
- * @cssprop [--lyra-chat-message-max-width=80%] - Maximum inline size of the message bubble.
- * @cssprop [--lyra-transition-ambient=1.8s ease-in-out] - Streaming-indicator animation duration
+ * @cssprop [--lr-chat-message-max-width=80%] - Maximum inline size of the message bubble.
+ * @cssprop [--lr-transition-ambient=1.8s ease-in-out] - Streaming-indicator animation duration
  *   and timing function.
  */
 export declare class LyraChatMessage extends LyraElement<LyraChatMessageEventMap> {
@@ -92,13 +114,13 @@ export declare class LyraChatMessage extends LyraElement<LyraChatMessageEventMap
     /** Overrides the default `hour:minute` rendering of `timestamp` — this
      *  library has no i18n system of its own, so an overridable formatter is
      *  the established way to hand locale-sensitive display back to the
-     *  consumer (mirrors `lyra-heatmap`'s `cellText`). */
+     *  consumer (mirrors `lr-heatmap`'s `cellText`). */
     formatTimestamp?: (date: Date) => string;
     /** Shows the built-in collapse/expand toggle in the header. */
     collapsible: boolean;
     /** Whether the message body is currently hidden. Effective whenever set,
      *  independent of `collapsible` — `collapsible` only controls whether the
-     *  built-in toggle button is rendered, mirroring `lyra-widget`'s identical
+     *  built-in toggle button is rendered, mirroring `lr-widget`'s identical
      *  `collapsible`/`collapsed` pair. */
     collapsed: boolean;
     /** Where the `attachments` slot renders relative to the message body.
@@ -116,6 +138,11 @@ export declare class LyraChatMessage extends LyraElement<LyraChatMessageEventMap
     private hasBadgesSlot;
     private hasAttachmentsSlot;
     private hasActionsSlot;
+    /** Whether the `failure` slot currently has assigned content. Only meaningful while
+     *  `status === "failed"` -- that's the only time the slot itself is even in the render (see
+     *  `render()`), mirroring `lr-flow-node`'s identical `hasHeaderSlot` flag for its own
+     *  entirely-replaces-the-built-in-UI `header` slot. */
+    private hasFailureSlot;
     private liveRegion?;
     private bubbleEl?;
     private readonly bodyId;
@@ -143,9 +170,15 @@ export declare class LyraChatMessage extends LyraElement<LyraChatMessageEventMap
      *  accessor (see `previousStatus`). */
     get status(): ChatMessageStatus;
     set status(value: ChatMessageStatus);
-    protected willUpdate(): void;
+    protected willUpdate(changed: PropertyValues): void;
     protected updated(changed: PropertyValues): void;
     private hasSlotted;
+    /** Whether `document.activeElement` is (or is inside) one of this host's `slot="failure"`
+     *  children. Slotting doesn't move an element out of the light DOM -- `document.activeElement`
+     *  reports the actual focused node regardless of where Shadow DOM projects it for rendering --
+     *  so this walks the host's real children, same as `hasSlotted` above, rather than anything
+     *  shadow-root-relative. */
+    private isFocusWithinFailureSlot;
     private get normalizedTimestamp();
     private get statusText();
     private announceStatusChange;
@@ -153,13 +186,14 @@ export declare class LyraChatMessage extends LyraElement<LyraChatMessageEventMap
     private onBadgesSlotChange;
     private onAttachmentsSlotChange;
     private onActionsSlotChange;
+    private onFailureSlotChange;
     private toggleCollapsed;
     private onRetryClick;
     render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'lyra-chat-message': LyraChatMessage;
+        'lr-chat-message': LyraChatMessage;
     }
 }
 //# sourceMappingURL=chat-message.class.d.ts.map

package/dist/components/chat-message/chat-message.class.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chat-message.class.d.ts","sourceRoot":"","sources":["../../../src/components/chat-message/chat-message.class.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsB,KAAK,cAAc,EAA0B,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAE3G,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAK7D,OAAO,qCAAqC,CAAC;AAG7C,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,WAAW,GAAG,QAAQ,CAAC;AAC9D,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG,MAAM,GAAG,QAAQ,GAAG,WAAW,CAAC;AAkD5E,MAAM,WAAW,uBAAuB;IACtC,YAAY,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACrC,sBAAsB,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;CAC9C;AACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmEG;AACH,qBAAa,eAAgB,SAAQ,WAAW,CAAC,uBAAuB,CAAC;IACvE,MAAM,CAAC,MAAM,iCAAgC;IAO7C,MAAM,CAAC,UAAU;QACf,MAAM;YAAI,OAAO;YAAQ,UAAU;;MACnC;IAEF,6EAA6E;IACxB,IAAI,EAAE,eAAe,CAAe;IAEzF;;6DAEyD;IACzB,SAAS,CAAC,EAAE,IAAI,GAAG,MAAM,CAAC;IAE1D;;;0DAGsD;IACtB,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,MAAM,CAAC;IAEzE,+DAA+D;IACnB,WAAW,UAAS;IAEhE;;;0CAGsC;IACM,SAAS,UAAS;IAE9D;;;;2CAIuC;IACU,mBAAmB,EAAE,QAAQ,GAAG,OAAO,CAAW;IAEnG;;;iGAG6F;IACZ,oBAAoB,UAAS;IAErG,OAAO,CAAC,aAAa,CAAS;IAC9B,OAAO,CAAC,aAAa,CAAS;IAC9B,OAAO,CAAC,kBAAkB,CAAS;IACnC,OAAO,CAAC,cAAc,CAAS;IAEb,OAAO,CAAC,UAAU,CAAC,CAAiB;IACrC,OAAO,CAAC,QAAQ,CAAC,CAAc;IAEzD,OAAO,CAAC,QAAQ,CAAC,MAAM,CAA+B;IAEtD,OAAO,CAAC,OAAO,CAA6B;IAE5C;;;;;;;sDAOkD;IAClD,OAAO,CAAC,cAAc,CAA6B;IAEnD;;;;;;iBAMa;IACb,OAAO,CAAC,UAAU,CAAQ;IAE1B;;;2CAGuC;IACvC,IAAI,MAAM,IAAI,iBAAiB,CAE9B;IACD,IAAI,MAAM,CAAC,KAAK,EAAE,iBAAiB,EAMlC;IAED,SAAS,CAAC,UAAU,IAAI,IAAI,CAO3B;IAED,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI,CAM/C;IAED,OAAO,CAAC,UAAU;IAIlB,OAAO,KAAK,mBAAmB,GAI9B;IAED,OAAO,KAAK,UAAU,GAErB;IAED,OAAO,CAAC,oBAAoB;IAa5B,OAAO,CAAC,kBAAkB,CAExB;IAEF,OAAO,CAAC,kBAAkB,CAExB;IAEF,OAAO,CAAC,uBAAuB,CAE7B;IAEF,OAAO,CAAC,mBAAmB,CAEzB;IAEF,OAAO,CAAC,eAAe,CAGrB;IAEF,OAAO,CAAC,YAAY,CAQlB;IAEF,MAAM,IAAI,cAAc,CA4DvB;CACF;AAGD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,eAAe,CAAC;KACtC;CACF"}
+{"version":3,"file":"chat-message.class.d.ts","sourceRoot":"","sources":["../../../src/components/chat-message/chat-message.class.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsB,KAAK,cAAc,EAA0B,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAE3G,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAK7D,OAAO,qCAAqC,CAAC;AAG7C,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,WAAW,GAAG,QAAQ,CAAC;AAC9D,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG,MAAM,GAAG,QAAQ,GAAG,WAAW,CAAC;AAkD5E,MAAM,WAAW,uBAAuB;IACtC,UAAU,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACnC,oBAAoB,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;CAC5C;AACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyFG;AACH,qBAAa,eAAgB,SAAQ,WAAW,CAAC,uBAAuB,CAAC;IACvE,MAAM,CAAC,MAAM,iCAAgC;IAO7C,MAAM,CAAC,UAAU;QACf,MAAM;YAAI,OAAO;YAAQ,UAAU;;MACnC;IAEF,6EAA6E;IACxB,IAAI,EAAE,eAAe,CAAe;IAEzF;;6DAEyD;IACzB,SAAS,CAAC,EAAE,IAAI,GAAG,MAAM,CAAC;IAE1D;;;wDAGoD;IACpB,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,MAAM,CAAC;IAEzE,+DAA+D;IACnB,WAAW,UAAS;IAEhE;;;0CAGsC;IACM,SAAS,UAAS;IAE9D;;;;2CAIuC;IACU,mBAAmB,EAAE,QAAQ,GAAG,OAAO,CAAW;IAEnG;;;iGAG6F;IACZ,oBAAoB,UAAS;IAErG,OAAO,CAAC,aAAa,CAAS;IAC9B,OAAO,CAAC,aAAa,CAAS;IAC9B,OAAO,CAAC,kBAAkB,CAAS;IACnC,OAAO,CAAC,cAAc,CAAS;IACxC;;;2DAGuD;IAC9C,OAAO,CAAC,cAAc,CAAS;IAEf,OAAO,CAAC,UAAU,CAAC,CAAiB;IACnC,OAAO,CAAC,QAAQ,CAAC,CAAc;IAEzD,OAAO,CAAC,QAAQ,CAAC,MAAM,CAA+B;IAEtD,OAAO,CAAC,OAAO,CAA6B;IAE5C;;;;;;;sDAOkD;IAClD,OAAO,CAAC,cAAc,CAA6B;IAEnD;;;;;;iBAMa;IACb,OAAO,CAAC,UAAU,CAAQ;IAE1B;;;2CAGuC;IACvC,IAAI,MAAM,IAAI,iBAAiB,CAE9B;IACD,IAAI,MAAM,CAAC,KAAK,EAAE,iBAAiB,EAMlC;IAED,SAAS,CAAC,UAAU,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI,CA+BlD;IAED,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI,CAM/C;IAED,OAAO,CAAC,UAAU;IAIlB;;;;gCAI4B;IAC5B,OAAO,CAAC,wBAAwB;IAMhC,OAAO,KAAK,mBAAmB,GAI9B;IAED,OAAO,KAAK,UAAU,GAErB;IAED,OAAO,CAAC,oBAAoB;IAiB5B,OAAO,CAAC,kBAAkB,CAExB;IAEF,OAAO,CAAC,kBAAkB,CAExB;IAEF,OAAO,CAAC,uBAAuB,CAE7B;IAEF,OAAO,CAAC,mBAAmB,CAEzB;IAEF,OAAO,CAAC,mBAAmB,CAEzB;IAEF,OAAO,CAAC,eAAe,CAGrB;IAEF,OAAO,CAAC,YAAY,CAQlB;IAEF,MAAM,IAAI,cAAc,CAmEvB;CACF;AAGD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,eAAe,CAAC;KACpC;CACF"}

package/dist/components/chat-message/chat-message.class.js

@@ -16,7 +16,7 @@ import { styles } from './chat-message.styles.js';
 // (internal/icons.ts's chevronIcon()/closeIcon()/etc.) without adding a
 // retry 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
+// library's inline icons. Same approach lr-checkbox's own local
 // checkmark/indeterminate glyphs take for the identical reason.
 const ICON_VIEW_BOX = '0 0 24 24';
 const ICON_STROKE_WIDTH = '1.75';
@@ -57,10 +57,10 @@ const STATUS_TEXT_KEY = {
     failed: 'chatFailedToSend',
 };
 /**
- * `<lyra-chat-message>` — a role-based message bubble *shell* for a chat/
+ * `<lr-chat-message>` — a role-based message bubble *shell* for a chat/
  * agent conversation surface. It renders none of the message content itself:
  * the default slot carries whatever a consumer wants to display (plain
- * text, a `<lyra-markdown>`, a custom template, anything at all) and this
+ * text, a `<lr-markdown>`, a custom template, anything at all) and this
  * component only supplies the surrounding chrome — alignment/coloring by
  * `role`, an avatar/badges header row, an optional collapse toggle, an
  * attachments strip, and a status-aware footer (a live-updating status dot +
@@ -71,22 +71,26 @@ const STATUS_TEXT_KEY = {
  * an arbitrary slotted message even means (plain text? the rendered
  * markdown source? something else?) is exactly the kind of content
  * interpretation this shell deliberately stays out of — slot a copy control
- * into `actions` instead. Firing `lyra-copy` (`detail: { text }`) from that
- * control keeps the event name consistent with `<lyra-json-viewer>`'s own
+ * into `actions` instead. Firing `lr-copy` (`detail: { text }`) from that
+ * control keeps the event name consistent with `<lr-json-viewer>`'s own
  * copy affordance, for anything listening at the conversation-surface level.
  *
  * Accessibility of `status`: the current status is always available as
  * plain visible text (`[part="status-text"]`), never color alone. A
  * transition *to* `"failed"`, or *from* `"streaming"` to `"sent"` (a stream
  * finishing), is additionally announced through an internal
- * `<lyra-live-region>` (see that component's header for the throttled-
+ * `<lr-live-region>` (see that component's header for the throttled-
  * announcement wiring this composes) so a screen-reader user who isn't
- * currently focused on this message still learns about it. This differs
- * from `<lyra-typing-indicator>`'s deliberately simpler `role="status"`
+ * currently focused on this message still learns about it — *unless* the
+ * `failure` slot has content, in which case this internal announcement is
+ * skipped: the host's own `role="alert"` failure content is expected to
+ * announce itself, and firing both would double-announce the same failure
+ * with two different (and differently specific) messages. This differs
+ * from `<lr-typing-indicator>`'s deliberately simpler `role="status"`
  * approach — that component only ever has one thing to announce (its own
  * mount); this one has a `status` that can flip between several values
  * across a single element's lifetime, which is exactly the coalescing job
- * `<lyra-live-region>` exists for.
+ * `<lr-live-region>` exists for.
  *
  * `role` is a message-author role (`user`/`assistant`/`system`, matching
  * the vocabulary of every chat/completion API), *not* a WAI-ARIA role, so
@@ -99,29 +103,47 @@ const STATUS_TEXT_KEY = {
  * useful for consumers whose action row (e.g., a hover-reveal copy button)
  * must sit visually outside the bubble's chrome.
  *
- * @customElement lyra-chat-message
+ * @customElement lr-chat-message
  * @slot - The message body.
  * @slot avatar - An avatar/icon for the message author.
  * @slot badges - Small status/metric chips (e.g. token count, latency, model name) — entirely app-supplied; this component computes none of that itself.
  * @slot actions - Action controls (e.g. copy, retry), rendered at the end of the footer.
  * @slot attachments - File/image attachment chips, rendered below the message body by default; see `attachments-position`.
- * @event lyra-retry - Fired by the built-in retry button, only rendered when `status="failed"`.
- * @event lyra-collapse-toggle - `detail: boolean` (the new `collapsed` state) — fired when the user activates the built-in collapse button.
- * @csspart bubble - The message bubble root. Programmatically focusable (`tabindex="-1"`) so focus has a stable place to land when the built-in retry button is removed (e.g. a `lyra-retry` listener flipping `status` away from `"failed"`).
+ * @slot failure - Only ever rendered while `status="failed"`. Empty (the default), the footer keeps
+ *   its built-in `[part="status-text"]`/`[part="retry-button"]` exactly as before. The moment this
+ *   slot has assigned content, that built-in status text and retry button are suppressed — the host
+ *   is now fully responsible for presenting its own failure UI, and the built-in `chatFailedAnnounce`
+ *   live-region announcement is suppressed too (see `@event lr-retry` below for the effect on that
+ *   event, and the "Accessibility of `status`" paragraph above for the built-in announcement this
+ *   replaces). Content assigned here should carry `role="alert"` itself when it represents an
+ *   actionable send failure — this component does not add that role on the host's behalf, since it
+ *   has no way to know what markup the host puts in this slot. This mirrors `lr-flow-node`'s `header`
+ *   slot, which replaces that component's own built-in heading row the same way.
+ * @event lr-retry - Fired by the built-in retry button, only rendered when `status="failed"` and the
+ *   `failure` slot is empty. A host using the `failure` slot owns its own retry control and is not
+ *   required to use this event at all — but nothing stops that control from dispatching its own
+ *   `new CustomEvent('lr-retry', { bubbles: true, composed: true })` to stay consistent with the
+ *   same event contract a listener further up a conversation surface already relies on for every
+ *   other message.
+ * @event lr-collapse-toggle - `detail: boolean` (the new `collapsed` state) — fired when the user activates the built-in collapse button.
+ * @csspart bubble - The message bubble root. Programmatically focusable (`tabindex="-1"`) so focus has a stable place to land when the built-in retry button is removed (e.g. a `lr-retry` listener flipping `status` away from `"failed"`).
  * @csspart header - The row above the message body — avatar, badges, and the collapse toggle. Hidden entirely when none of those have anything to show.
  * @csspart avatar - The wrapper around the `avatar` slot.
  * @csspart badges - The wrapper around the `badges` slot.
  * @csspart collapse-button - The built-in collapse/expand toggle (only rendered when `collapsible`).
  * @csspart body - The wrapper around the default slot (the message content). Hidden while `collapsed`.
  * @csspart attachments - The wrapper around the `attachments` slot.
+ * @csspart failure - The `failure` slot itself (`display: contents` — it contributes no box of its
+ *   own, so the host's own content lays out exactly as if it were a direct child of `bubble`, with no
+ *   `::part(failure)` override needed to get there). Only present in the DOM while `status="failed"`.
  * @csspart footer - The row below the message body — status, timestamp, retry, and actions. Hidden entirely when none of those have anything to show.
  * @csspart status-indicator - A small decorative (`aria-hidden`) dot reflecting `status`; absent while `status="sent"`.
  * @csspart status-text - The visible text twin of `status-indicator` — carries the state in text, not just color.
  * @csspart timestamp - The formatted `timestamp`, rendered in a `<time>` element.
  * @csspart retry-button - The built-in retry button (only rendered when `status="failed"`).
  * @csspart actions - The wrapper around the `actions` slot. Rendered inside the footer by default; a sibling immediately after `bubble` when `actionsOutsideBubble` is set.
- * @cssprop [--lyra-chat-message-max-width=80%] - Maximum inline size of the message bubble.
- * @cssprop [--lyra-transition-ambient=1.8s ease-in-out] - Streaming-indicator animation duration
+ * @cssprop [--lr-chat-message-max-width=80%] - Maximum inline size of the message bubble.
+ * @cssprop [--lr-transition-ambient=1.8s ease-in-out] - Streaming-indicator animation duration
  *   and timing function.
  */
 export class LyraChatMessage extends LyraElement {
@@ -133,7 +155,7 @@ export class LyraChatMessage extends LyraElement {
         this.collapsible = false;
         /** Whether the message body is currently hidden. Effective whenever set,
          *  independent of `collapsible` — `collapsible` only controls whether the
-         *  built-in toggle button is rendered, mirroring `lyra-widget`'s identical
+         *  built-in toggle button is rendered, mirroring `lr-widget`'s identical
          *  `collapsible`/`collapsed` pair. */
         this.collapsed = false;
         /** Where the `attachments` slot renders relative to the message body.
@@ -151,6 +173,11 @@ export class LyraChatMessage extends LyraElement {
         this.hasBadgesSlot = false;
         this.hasAttachmentsSlot = false;
         this.hasActionsSlot = false;
+        /** Whether the `failure` slot currently has assigned content. Only meaningful while
+         *  `status === "failed"` -- that's the only time the slot itself is even in the render (see
+         *  `render()`), mirroring `lr-flow-node`'s identical `hasHeaderSlot` flag for its own
+         *  entirely-replaces-the-built-in-UI `header` slot. */
+        this.hasFailureSlot = false;
         this.bodyId = nextId('chat-message-body');
         this._status = 'sent';
         /** The value `status` held immediately before its current one, recorded
@@ -182,24 +209,27 @@ export class LyraChatMessage extends LyraElement {
         this.onActionsSlotChange = (e) => {
             this.hasActionsSlot = e.target.assignedElements({ flatten: true }).length > 0;
         };
+        this.onFailureSlotChange = (e) => {
+            this.hasFailureSlot = e.target.assignedElements({ flatten: true }).length > 0;
+        };
         this.toggleCollapsed = () => {
             this.collapsed = !this.collapsed;
-            this.emit('lyra-collapse-toggle', this.collapsed);
+            this.emit('lr-collapse-toggle', this.collapsed);
         };
         this.onRetryClick = () => {
-            // A `lyra-retry` listener is documented to respond by flipping `status`
+            // A `lr-retry` listener is documented to respond by flipping `status`
             // away from `"failed"`, which removes this very button on the next
             // render. Move focus to the always-rendered bubble first, synchronously,
             // so it lands somewhere stable inside the message instead of silently
             // reverting to `<body>` once the button it was on disappears.
             this.bubbleEl?.focus();
-            this.emit('lyra-retry');
+            this.emit('lr-retry');
         };
     }
     static { this.styles = [LyraElement.styles, styles]; }
     // `status` needs a hand-written accessor (see `previousStatus` below) so
     // it's declared via `static properties` + `noAccessor` rather than
-    // `@property()` directly -- the same pattern `lyra-playback`'s `playing`
+    // `@property()` directly -- the same pattern `lr-playback`'s `playing`
     // uses for the identical reason (a property whose setter must run real
     // logic on every assignment, not just on the next completed render).
     static { this.properties = {
@@ -220,12 +250,38 @@ export class LyraChatMessage extends LyraElement {
         this._status = value;
         this.requestUpdate('status', old);
     }
-    willUpdate() {
+    willUpdate(changed) {
         if (!this.hasUpdated) {
             this.hasAvatarSlot = this.hasSlotted('avatar');
             this.hasBadgesSlot = this.hasSlotted('badges');
             this.hasAttachmentsSlot = this.hasSlotted('attachments');
             this.hasActionsSlot = this.hasSlotted('actions');
+            // Mounting directly into status="failed" with failure-slot content already present in the
+            // initial markup -- the <slot name="failure"> element is about to exist for the very first
+            // time this render, so there's no prior slotchange to have fired yet. Same "detected on first
+            // paint, not just via slotchange" need the avatar/badges flags above already have.
+            if (this.status === 'failed') {
+                this.hasFailureSlot = this.hasSlotted('failure');
+            }
+        }
+        else if (changed.has('status')) {
+            if (this.status === 'failed') {
+                // Entering "failed" *after* mount -- the <slot name="failure"> element didn't exist in the
+                // previous render (see render()), so any slot="failure" content the host already had sitting
+                // in its light DOM has never had a slotchange fire for it either. Recheck directly, same
+                // reasoning as the mount-time check above.
+                this.hasFailureSlot = this.hasSlotted('failure');
+            }
+            else if (this.previousStatus === 'failed' && this.hasFailureSlot && this.isFocusWithinFailureSlot()) {
+                // Leaving "failed" while the host's own failure content held focus (e.g. the host's own
+                // retry button, whose click listener is documented to flip status away from "failed") --
+                // the <slot name="failure"> this content was rendering through is about to disappear from
+                // this render entirely. An assigned node with no <slot> left to render into is forcibly
+                // blurred by the browser, which silently drops focus to <body> if nothing intervenes. Move
+                // focus to the always-rendered bubble first, synchronously, mirroring onRetryClick's
+                // identical rescue for the built-in retry button.
+                this.bubbleEl?.focus();
+            }
         }
     }
     updated(changed) {
@@ -238,6 +294,17 @@ export class LyraChatMessage extends LyraElement {
     hasSlotted(name) {
         return Array.from(this.children).some((el) => el.getAttribute('slot') === name);
     }
+    /** Whether `document.activeElement` is (or is inside) one of this host's `slot="failure"`
+     *  children. Slotting doesn't move an element out of the light DOM -- `document.activeElement`
+     *  reports the actual focused node regardless of where Shadow DOM projects it for rendering --
+     *  so this walks the host's real children, same as `hasSlotted` above, rather than anything
+     *  shadow-root-relative. */
+    isFocusWithinFailureSlot() {
+        const active = document.activeElement;
+        if (!active)
+            return false;
+        return Array.from(this.children).some((el) => el.getAttribute('slot') === 'failure' && el.contains(active));
+    }
     get normalizedTimestamp() {
         if (this.timestamp === undefined)
             return undefined;
@@ -254,6 +321,11 @@ export class LyraChatMessage extends LyraElement {
         if (!region)
             return;
         if (this.status === 'failed') {
+            // The `failure` slot's own content is expected to carry `role="alert"` and announce itself --
+            // see the class doc's "Accessibility of `status`" paragraph. Firing this generic announcement
+            // on top of that would double-announce the same failure.
+            if (this.hasFailureSlot)
+                return;
             region.mode = 'assertive';
             region.announce(this.localize('chatFailedAnnounce'), { force: true });
         }
@@ -265,10 +337,14 @@ export class LyraChatMessage extends LyraElement {
     render() {
         const ts = this.normalizedTimestamp;
         const formatter = this.formatTimestamp ?? ((date) => defaultFormatTimestamp(date, this.effectiveLocale));
-        const statusText = this.statusText;
+        // Once the `failure` slot is populated it takes over full responsibility for presenting the
+        // failed state -- suppress the built-in status text and retry button so a consumer is never
+        // shown both at once (see the class doc's `failure` slot entry).
+        const suppressBuiltInFailedUi = this.status === 'failed' && this.hasFailureSlot;
+        const statusText = suppressBuiltInFailedUi ? undefined : this.statusText;
         const showHeader = this.hasAvatarSlot || this.hasBadgesSlot || this.collapsible;
-        // `statusText` is already truthy whenever `status === 'failed'`, so it
-        // alone covers that case here too.
+        // `statusText` is already truthy whenever `status === 'failed'` and the built-in UI isn't
+        // suppressed, so it alone covers that case here too.
         const showFooter = Boolean(statusText) || Boolean(ts) || (!this.actionsOutsideBubble && this.hasActionsSlot);
         const actionsBlock = html `<span part="actions" ?hidden=${!this.hasActionsSlot}
       ><slot name="actions" @slotchange=${this.onActionsSlotChange}></slot
@@ -303,6 +379,9 @@ export class LyraChatMessage extends LyraElement {
           <slot></slot>
         </div>
         ${this.attachmentsPosition === 'before' ? nothing : attachmentsBlock}
+        ${this.status === 'failed'
+            ? html `<slot part="failure" name="failure" @slotchange=${this.onFailureSlotChange}></slot>`
+            : nothing}
         <div part="footer" ?hidden=${!showFooter}>
           ${statusText
             ? html `<span part="status-indicator" aria-hidden="true"></span><span part="status-text"
@@ -310,14 +389,14 @@ export class LyraChatMessage extends LyraElement {
                 >`
             : nothing}
           ${ts ? html `<time part="timestamp" datetime=${ts.toISOString()}>${formatter(ts)}</time>` : nothing}
-          ${this.status === 'failed'
+          ${this.status === 'failed' && !suppressBuiltInFailedUi
             ? html `<button part="retry-button" type="button" @click=${this.onRetryClick}>
                 ${retryIcon()}<span>${this.localize('retry')}</span>
               </button>`
             : nothing}
           ${this.actionsOutsideBubble ? nothing : actionsBlock}
         </div>
-        <lyra-live-region></lyra-live-region>
+        <lr-live-region></lr-live-region>
       </div>
       ${this.actionsOutsideBubble ? actionsBlock : nothing}
     `;
@@ -357,7 +436,10 @@ __decorate([
     state()
 ], LyraChatMessage.prototype, "hasActionsSlot", void 0);
 __decorate([
-    query('lyra-live-region')
+    state()
+], LyraChatMessage.prototype, "hasFailureSlot", void 0);
+__decorate([
+    query('lr-live-region')
 ], LyraChatMessage.prototype, "liveRegion", void 0);
 __decorate([
     query('[part="bubble"]')