@aceshooting/lyra-ui 2.5.0 → 2.6.0

package/README.md

@@ -158,7 +158,7 @@ roving-tabindex list) to match. No per-component RTL flag or opt-in needed.
 
 ## Components
 
-The catalog below lists all 92 tags in the current Custom Elements Manifest, grouped by
+The catalog below lists all 93 tags in the current Custom Elements Manifest, grouped by
 capability. The manifest and live docs are the authoritative sources for the complete generated
 API details.
 
@@ -172,6 +172,7 @@ API details.
 | `<lyra-date-input>` | `wa-date-input` | Date field + calendar popover, form-associated |
 | `<lyra-toast>` + `<lyra-toast-item>` + `toast()` | `wa-toast` / `wa-toast-item` | Stacking notifications |
 | `<lyra-sparkline>` | `wa-sparkline` | Zero-dependency inline SVG |
+| `<lyra-textarea>` | `wa-textarea` | Bare multiline plain-text input, form-associated |
 | `<lyra-flag>` | — (extra) | Country/language flags for i18n pickers — needs the optional peer `@aceshooting/lyra-flags` |
 
 **Dashboard atoms**

package/custom-elements.json

@@ -16830,7 +16830,7 @@
               "name": "actions"
             },
             {
-              "description": "File/image attachment chips, rendered below the message body.",
+              "description": "File/image attachment chips, rendered below the message body by default; see `attachments-position`.",
               "name": "attachments"
             },
             {
@@ -16852,6 +16852,16 @@
               "privacy": "private",
               "default": "'sent'"
             },
+            {
+              "kind": "field",
+              "name": "attachmentsPosition",
+              "type": {
+                "text": "'before' | 'after'"
+              },
+              "default": "'after'",
+              "description": "Where the `attachments` slot renders relative to the message body.\n`'after'` (the default) reproduces today's exact DOM order. `'before'`\nrenders attachments immediately above the body -- both DOM and visual\norder move together (no CSS `order` trick), so reading/focus order\nalways matches what's on screen.",
+              "attribute": "attachments-position"
+            },
             {
               "kind": "field",
               "name": "bodyId",
@@ -17296,6 +17306,15 @@
             }
           ],
           "attributes": [
+            {
+              "name": "attachments-position",
+              "type": {
+                "text": "'before' | 'after'"
+              },
+              "default": "'after'",
+              "description": "Where the `attachments` slot renders relative to the message body.\n`'after'` (the default) reproduces today's exact DOM order. `'before'`\nrenders attachments immediately above the body -- both DOM and visual\norder move together (no CSS `order` trick), so reading/focus order\nalways matches what's on screen.",
+              "fieldName": "attachmentsPosition"
+            },
             {
               "name": "collapsed",
               "type": {
@@ -33614,13 +33633,20 @@
               },
               "privacy": "private"
             },
+            {
+              "kind": "field",
+              "name": "canvasColorCache",
+              "privacy": "private",
+              "default": "new Map<string, string>()",
+              "description": "Cache of resolved colors for the current draw pass, cleared at the top\nof drawCalendar()/drawMatrix() so a theme change is always picked up on\nthe very next full redraw, while repeated identical cellColor() outputs\nwithin the same pass resolve only once."
+            },
             {
               "kind": "field",
               "name": "cellColor",
               "type": {
                 "text": "(pos: MatrixCellPos | CalendarCellPos, value: number) => string | undefined | undefined"
               },
-              "description": "Overrides a cell's computed ramp/no-data color entirely for an exact value -- receives the\ncell position (`MatrixCellPos` in matrix mode, `CalendarCellPos` in calendar mode) and its\nvalue, return a CSS color string to force that cell to it, or `undefined` to fall back to the\nnormal `colorSteps`/ramp math unchanged. Lets a consumer designate a value as categorically\noutside the ramp (e.g. a real zero-count day rendered as a neutral hairline, distinct from\nboth \"no data\" and the ramp's own lightest step) without a prepended synthetic ramp color,\nwhich can't safely reserve an exact value on a skewed dataset (the bucket selectors round by\ncontinuous ratio, with no equality-based reservation). Unset (the default) reproduces today's\nexact ramp/no-data behavior for every cell."
+              "description": "Overrides a cell's computed ramp/no-data color entirely for an exact value -- receives the\ncell position (`MatrixCellPos` in matrix mode, `CalendarCellPos` in calendar mode) and its\nvalue, return a CSS color string to force that cell to it, or `undefined` to fall back to the\nnormal `colorSteps`/ramp math unchanged. Lets a consumer designate a value as categorically\noutside the ramp (e.g. a real zero-count day rendered as a neutral hairline, distinct from\nboth \"no data\" and the ramp's own lightest step) without a prepended synthetic ramp color,\nwhich can't safely reserve an exact value on a skewed dataset (the bucket selectors round by\ncontinuous ratio, with no equality-based reservation). Unset (the default) reproduces today's\nexact ramp/no-data behavior for every cell. A returned value containing a CSS custom property\n(e.g. `var(--x)`) or other browser-resolvable color syntax (e.g. `color-mix(...)`) is\nautomatically resolved before being used as a canvas fill color."
             },
             {
               "kind": "field",
@@ -33655,6 +33681,14 @@
               },
               "default": "[]"
             },
+            {
+              "kind": "field",
+              "name": "colorProbe",
+              "type": {
+                "text": "HTMLSpanElement | undefined"
+              },
+              "privacy": "private"
+            },
             {
               "kind": "field",
               "name": "colorSchemeQuery",
@@ -33938,6 +33972,14 @@
               },
               "default": "[]"
             },
+            {
+              "kind": "field",
+              "name": "weekdayLabelText",
+              "type": {
+                "text": "(jsWeekday: number) => string | undefined | undefined"
+              },
+              "description": "Overrides the weekday-axis label text in calendar mode -- receives the real JS weekday index\n(`0` Sunday .. `6` Saturday) for a row that would otherwise render a label (today, only rows\n1/3/5 relative to `firstDayOfWeek` ever do) and, when it returns a string, uses it instead of\nthe built-in `Intl.DateTimeFormat`-derived short weekday name. Unset (the default) reproduces\ntoday's exact locale-derived output."
+            },
             {
               "kind": "method",
               "name": "addEventListener",
@@ -34647,6 +34689,25 @@
                 "module": "src/internal/lyra-element.ts"
               }
             },
+            {
+              "kind": "method",
+              "name": "resolveCanvasColor",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "string"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "value",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ],
+              "description": "Resolves a cellColor() return value that may contain a CSS custom\nproperty (or any other CSS color syntax the browser understands, e.g.\ncolor-mix()) into a literal color canvas's fillStyle can actually use --\nfillStyle silently no-ops on an unparseable string, per the Canvas 2D\nspec, leaving whatever the previous cell painted. Falls back to\nnoDataFill() for a genuinely invalid color."
+            },
             {
               "kind": "method",
               "name": "resolveCellText",
@@ -52747,6 +52808,378 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/textarea/textarea.class.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "`<lyra-textarea>` — a bare, multiline plain-text input primitive. Form-associated via the\n`FormAssociated` mixin (see `<lyra-chat-composer>`/`<lyra-date-input>` for the same shape), so it\nparticipates in native `<form>` submission/validation/reset like any other text control --\n`name`/`value`/`disabled`/`required`/`checkValidity()`/`reportValidity()` all come from that mixin.\n\nDeliberately no auto-resize and no label/hint/error chrome -- the thin `lyra-*` equivalent of a\nplain `wa-textarea`, not a rebuild of `<lyra-chat-composer>`. A consumer wanting a labeled field\nwraps this element in whatever form-field layout it already uses.",
+          "name": "LyraTextarea",
+          "cssParts": [
+            {
+              "description": "The native `<textarea>` element.",
+              "name": "textarea"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "effectiveDirection",
+              "type": {
+                "text": "'ltr' | 'rtl'"
+              },
+              "privacy": "protected",
+              "description": "The effective text direction, including inherited CSS direction.",
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "LyraElement",
+                "module": "src/internal/lyra-element.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "effectiveLocale",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "protected",
+              "description": "The effective locale used by this component.",
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "LyraElement",
+                "module": "src/internal/lyra-element.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "locale",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Optional locale override. Otherwise the nearest `locale`/`lang` ancestor is used.",
+              "attribute": "locale",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "LyraElement",
+                "module": "src/internal/lyra-element.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "onChange",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "onInput",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "placeholder",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "attribute": "placeholder"
+            },
+            {
+              "kind": "field",
+              "name": "resize",
+              "type": {
+                "text": "TextareaResize"
+              },
+              "default": "'vertical'",
+              "description": "Native CSS `resize` behavior for the textarea.",
+              "attribute": "resize"
+            },
+            {
+              "kind": "field",
+              "name": "rows",
+              "type": {
+                "text": "number"
+              },
+              "default": "3",
+              "description": "Visible text rows.",
+              "attribute": "rows"
+            },
+            {
+              "kind": "field",
+              "name": "stopLocaleSubscription",
+              "type": {
+                "text": "() => void | undefined"
+              },
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "LyraElement",
+                "module": "src/internal/lyra-element.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "strings",
+              "type": {
+                "text": "LyraLocaleStrings"
+              },
+              "default": "{}",
+              "description": "Per-instance message overrides, useful for application-specific wording.",
+              "inheritedFrom": {
+                "name": "LyraElement",
+                "module": "src/internal/lyra-element.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "textareaEl",
+              "type": {
+                "text": "HTMLTextAreaElement | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "addEventListener",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "type",
+                  "type": {
+                    "text": "K"
+                  }
+                },
+                {
+                  "name": "listener",
+                  "type": {
+                    "text": "(this: this, event: Events[K]) => unknown"
+                  }
+                },
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "boolean | AddEventListenerOptions"
+                  }
+                }
+              ],
+              "inheritedFrom": {
+                "name": "LyraElement",
+                "module": "src/internal/lyra-element.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "emit",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "CustomEvent<T>"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "name",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "detail",
+                  "optional": true,
+                  "type": {
+                    "text": "T"
+                  }
+                },
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "LyraEmitOptions"
+                  }
+                }
+              ],
+              "description": "Dispatch a composed, bubbling custom event; notifications are not veto points by default.",
+              "inheritedFrom": {
+                "name": "LyraElement",
+                "module": "src/internal/lyra-element.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "localize",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "string"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "key",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "fallback",
+                  "optional": true,
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "values",
+                  "optional": true,
+                  "type": {
+                    "text": "Record<string, string | number>"
+                  }
+                }
+              ],
+              "description": "Resolve a localized message using this component's overrides and locale.",
+              "inheritedFrom": {
+                "name": "LyraElement",
+                "module": "src/internal/lyra-element.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "removeEventListener",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "type",
+                  "type": {
+                    "text": "K"
+                  }
+                },
+                {
+                  "name": "listener",
+                  "type": {
+                    "text": "(this: this, event: Events[K]) => unknown"
+                  }
+                },
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "boolean | EventListenerOptions"
+                  }
+                }
+              ],
+              "inheritedFrom": {
+                "name": "LyraElement",
+                "module": "src/internal/lyra-element.ts"
+              }
+            }
+          ],
+          "events": [
+            {
+              "description": "Fired on the native `change` timing (control loses focus after a committed edit). `detail: { value }`.",
+              "name": "lyra-change"
+            },
+            {
+              "description": "Fired on every user-driven edit (not a programmatic `.value` assignment). `detail: { value }`.",
+              "name": "lyra-input"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "locale",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Optional locale override. Otherwise the nearest `locale`/`lang` ancestor is used.",
+              "fieldName": "locale",
+              "inheritedFrom": {
+                "name": "LyraElement",
+                "module": "src/internal/lyra-element.ts"
+              }
+            },
+            {
+              "name": "placeholder",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "placeholder"
+            },
+            {
+              "name": "resize",
+              "type": {
+                "text": "TextareaResize"
+              },
+              "default": "'vertical'",
+              "description": "Native CSS `resize` behavior for the textarea.",
+              "fieldName": "resize"
+            },
+            {
+              "name": "rows",
+              "type": {
+                "text": "number"
+              },
+              "default": "3",
+              "description": "Visible text rows.",
+              "fieldName": "rows"
+            }
+          ],
+          "mixins": [
+            {
+              "name": "FormAssociated",
+              "module": "/src/internal/form-associated.js"
+            }
+          ],
+          "superclass": {
+            "name": "LyraTextareaBase",
+            "module": "src/components/textarea/textarea.class.ts"
+          },
+          "tagName": "lyra-textarea",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "LyraTextarea",
+          "declaration": {
+            "name": "LyraTextarea",
+            "module": "src/components/textarea/textarea.class.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/textarea/textarea.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "custom-element-definition",
+          "name": "lyra-textarea",
+          "declaration": {
+            "name": "LyraTextarea",
+            "module": "src/components/textarea/textarea.class.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "module": "src/components/textarea/textarea.class.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/components/thinking-panel/thinking-panel.class.ts",
@@ -61012,6 +61445,16 @@
               "default": "''",
               "description": "The currently active view's `id` -- defaults to the first entry of `views` (or `''` when\n`views` is empty). Settable directly by a consumer wanting to control the active view\nexternally; also updated internally when a view toggle is clicked."
             },
+            {
+              "kind": "field",
+              "name": "backdropInset",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Overrides the fullscreen *backdrop*'s own inset independent of `fullscreen-inset` -- e.g.\n`\"0\"` to dim the full viewport-to-panel-edge region while the panel itself keeps a narrower\n`fullscreen-inset`. Unset (the default) falls back to `fullscreen-inset`, i.e. today's exact\ncoupled behavior.",
+              "attribute": "backdrop-inset"
+            },
             {
               "kind": "field",
               "name": "bodyId",
@@ -61457,6 +61900,15 @@
             }
           ],
           "attributes": [
+            {
+              "name": "backdrop-inset",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Overrides the fullscreen *backdrop*'s own inset independent of `fullscreen-inset` -- e.g.\n`\"0\"` to dim the full viewport-to-panel-edge region while the panel itself keeps a narrower\n`fullscreen-inset`. Unset (the default) falls back to `fullscreen-inset`, i.e. today's exact\ncoupled behavior.",
+              "fieldName": "backdropInset"
+            },
             {
               "name": "collapsed",
               "type": {

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

@@ -50,7 +50,7 @@ export interface LyraChatMessageEventMap {
  * @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.
+ * @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"`).
@@ -93,6 +93,12 @@ export declare class LyraChatMessage extends LyraElement<LyraChatMessageEventMap
      *  built-in toggle button is rendered, mirroring `lyra-widget`'s identical
      *  `collapsible`/`collapsed` pair. */
     collapsed: boolean;
+    /** Where the `attachments` slot renders relative to the message body.
+     *  `'after'` (the default) reproduces today's exact DOM order. `'before'`
+     *  renders attachments immediately above the body -- both DOM and visual
+     *  order move together (no CSS `order` trick), so reading/focus order
+     *  always matches what's on screen. */
+    attachmentsPosition: 'before' | 'after';
     private hasAvatarSlot;
     private hasBadgesSlot;
     private hasAttachmentsSlot;

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;AAI7D,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;AA8C5E,MAAM,WAAW,uBAAuB;IACtC,YAAY,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACrC,sBAAsB,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;CAC9C;AACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2DG;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;IAErD,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,CAwDvB;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;AAI7D,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;AA8C5E,MAAM,WAAW,uBAAuB;IACtC,YAAY,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACrC,sBAAsB,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;CAC9C;AACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2DG;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;IAE1F,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,CA0DvB;CACF;AAGD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,eAAe,CAAC;KACtC;CACF"}

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

@@ -94,7 +94,7 @@ const STATUS_TEXT_KEY = {
  * @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.
+ * @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"`).
@@ -123,6 +123,12 @@ export class LyraChatMessage extends LyraElement {
          *  built-in toggle button is rendered, mirroring `lyra-widget`'s identical
          *  `collapsible`/`collapsed` pair. */
         this.collapsed = false;
+        /** Where the `attachments` slot renders relative to the message body.
+         *  `'after'` (the default) reproduces today's exact DOM order. `'before'`
+         *  renders attachments immediately above the body -- both DOM and visual
+         *  order move together (no CSS `order` trick), so reading/focus order
+         *  always matches what's on screen. */
+        this.attachmentsPosition = 'after';
         this.hasAvatarSlot = false;
         this.hasBadgesSlot = false;
         this.hasAttachmentsSlot = false;
@@ -246,6 +252,9 @@ export class LyraChatMessage extends LyraElement {
         // `statusText` is already truthy whenever `status === 'failed'`, so it
         // alone covers that case here too.
         const showFooter = Boolean(statusText) || Boolean(ts) || this.hasActionsSlot;
+        const attachmentsBlock = html `<div part="attachments" ?hidden=${!this.hasAttachmentsSlot}>
+      <slot name="attachments" @slotchange=${this.onAttachmentsSlotChange}></slot>
+    </div>`;
         return html `
       <div part="bubble" tabindex="-1">
         <div part="header" ?hidden=${!showHeader}>
@@ -268,12 +277,11 @@ export class LyraChatMessage extends LyraElement {
               </button>`
             : nothing}
         </div>
+        ${this.attachmentsPosition === 'before' ? attachmentsBlock : nothing}
         <div part="body" id=${this.bodyId} ?hidden=${this.collapsed}>
           <slot></slot>
         </div>
-        <div part="attachments" ?hidden=${!this.hasAttachmentsSlot}>
-          <slot name="attachments" @slotchange=${this.onAttachmentsSlotChange}></slot>
-        </div>
+        ${this.attachmentsPosition === 'before' ? nothing : attachmentsBlock}
         <div part="footer" ?hidden=${!showFooter}>
           ${statusText
             ? html `<span part="status-indicator" aria-hidden="true"></span><span part="status-text"
@@ -310,6 +318,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], LyraChatMessage.prototype, "collapsed", void 0);
+__decorate([
+    property({ attribute: 'attachments-position' })
+], LyraChatMessage.prototype, "attachmentsPosition", void 0);
 __decorate([
     state()
 ], LyraChatMessage.prototype, "hasAvatarSlot", void 0);