@aceshooting/lyra-ui 7.4.0 → 7.6.0

package/llms-full.txt

@@ -1321,6 +1321,7 @@ submission/validation/reset via `name`/`value`/`disabled`/`required`/`checkValid
 | `rows` | `rows` | `number` | `3` | Visible text rows. |
 | `resize` | `resize` | `'none' \| 'vertical' \| 'both' \| 'auto'` | `'vertical'` | Native CSS `resize` behavior, plus `'auto'` (`ResizeObserver`-driven grow-to-content, no manual handle). |
 | `placeholder` | `placeholder` | `string` | `''` | Placeholder text. |
+| `readonly` | `readonly` | `boolean` | `false` | Native read-only behavior: prevents user edits while preserving focus, selection/copy, form submission, and silent programmatic editing methods. Reflected. |
 | `label` | `label` | `string` | `''` | Visible label text. Unset: no label chrome renders. |
 | `hint` | `hint` | `string` | `''` | Hint text below the field. |
 | `errorText` | `error-text` | `string` | `''` | Error text below the field (overridden by slotted `error` content). |
@@ -1344,6 +1345,10 @@ submission/validation/reset via `name`/`value`/`disabled`/`required`/`checkValid
 (from `maxlength`) — the complete set a native `<textarea>` can produce. Leaving `minlength` and
 `maxlength` unset constrains nothing, exactly as before they existed.
 
+While `readonly`, all three constraint flags are suspended and `checkValidity()` succeeds, matching
+native textarea behavior. The value remains a successful form value and is restored by form reset;
+unsetting `readonly` restores the applicable required and length constraints.
+
 Two behaviors are worth knowing, both inherited from the platform and both shared with `lr-input`:
 
 - **An empty value is never `tooShort`.** Native `minlength` only applies to a non-empty value, so
@@ -6094,19 +6099,20 @@ history sidebar); it is not the right approach for a hundred-thousand-row list w
 - A sticky band only appears when `renderStickyGroup` *and* at least one valid `groups` entry are
   both present; `groups` alone renders positioned markers with nothing pinned, and
   `renderStickyGroup` alone renders no overlay element at all.
-- **A row that renders a popup needs the focused-row lift, and this is why `[part='row']` has one.**
+- **A row that renders a popup needs the active-row lift, and this is why `[part='row']` has one.**
   Each row carries `will-change: transform` (a compositor hint for the per-frame translate), which
   makes every row its own stacking context. Rows otherwise carry no `z-index`, so they paint in DOM
   order and each one paints over the previous. Anything a row renders that overflows its own box —
   an `<lr-menu>` popup in a row-action menu, a tooltip, an outward focus ring — is therefore painted
   *underneath* every following row, no matter how high its own `z-index` is: that `z-index` only
   orders siblings inside the row's own context. The last row always looks correct, which is exactly
-  why a short fixture never catches it. `[part='row']:focus-within` lifts the row to
-  `--lr-layer-content` for precisely as long as something inside it holds focus — the lifetime of an
-  open popup — and costs nothing otherwise. The value deliberately *matches* `[part='group']`'s
-  rather than exceeding it, so the two land on the same layer and DOM order decides: groups render
-  before the rows, so a focused row wins while (and only while) it holds focus, which is right — a
-  group header is a non-interactive `pointer-events: none` label.
+  why a short fixture never catches it. A row lifts to `--lr-layer-content` while something inside
+  it holds focus or while it contains an open `lr-menu`. The explicit menu-open branch covers
+  imperative opening and virtual measurement/render cycles, where focus can temporarily return to
+  the document while the popup remains visible. The value deliberately *matches*
+  `[part='group']`'s rather than exceeding it, so the two land on the same layer and DOM order
+  decides: groups render before the rows, so an active row wins while (and only while) it needs to,
+  which is right — a group header is a non-interactive `pointer-events: none` label.
 
 ---
 
@@ -7050,6 +7056,51 @@ value means no debounce at all: every keystroke commits immediately. A pending d
 keystroke can never overwrite a reset or fire after teardown. `debounce` is ignored for every other
 `type`, whose commits are discrete choices with nothing to debounce.
 
+### Custom controls
+
+Use `type: 'custom'` when an existing Lyra control does not fit the built-in filter types. Provide a
+`custom` object with a `render(context)` function and an `adapter`. The renderer owns the control's
+markup and should bind the context's `value`, `disabled`, `required`, and `errorText` as appropriate;
+`context.onValueChange` (or its `onInput`/`onChange` aliases) reads the event through
+`adapter.valueFromEvent` and commits it to the filter bar. `context.setValue(value)` is available for
+controls that expose a value without an event payload, and `context.onFocusout` marks the filter
+touched for required validation.
+
+The adapter's optional `emptyValue` is used when the active chip is removed, and its optional
+`formatValue` controls the chip's display text. Custom values may be strings, string arrays,
+booleans, or `undefined`, so controls such as `lr-time-range`, `lr-checkbox`, and an async-backed
+`lr-combobox` can participate in the same controlled `value`, active-chip, reset, disabled, and
+validation contract:
+
+```ts
+const filters: FilterBarFilterDefinition[] = [
+  {
+    id: 'archived',
+    label: 'Include archived',
+    type: 'custom',
+    custom: {
+      adapter: {
+        valueFromEvent: (event) =>
+          (event as CustomEvent<{ checked: boolean }>).detail.checked,
+        emptyValue: false,
+        formatValue: (value) => value === true ? 'Enabled' : 'Disabled',
+      },
+      render: (context) => html`
+        <lr-checkbox
+          ?checked=${context.value === true}
+          ?disabled=${context.disabled}
+          @lr-change=${context.onValueChange}
+          @focusout=${context.onFocusout}
+        >${context.label}</lr-checkbox>
+      `,
+    },
+  },
+];
+```
+
+The custom renderer returns a Lit `TemplateResult`; the filter bar places it in its
+`filter-control` part and re-renders it whenever the controlled value or validation state changes.
+
 # Overlays, status & feedback (`components/overlays/`)
 
 ## `lr-toast` / `lr-toast-item` / `toast()`
@@ -14117,13 +14168,17 @@ icon — the item has no default slot to receive one); unset renders the built-i
 `renderActions?: (thread: ChatThread) => TemplateResult` (attribute: false) — data mode only:
 appends host-supplied content (re-invoked per row on every render, e.g. a `lr-menu` with custom
 actions) after the built-in `rowActions` output in each row's `actions` slot; events it fires reach
-the host normally and never trigger `lr-select`. Unset renders only the built-in `rowActions`.
+the host normally and never trigger `lr-select`. An open nested `lr-menu` keeps its virtual row
+above later rows even if focus temporarily leaves the menu. Unset renders only the built-in
+`rowActions`.
 `renderLeading?: (thread: ChatThread) => TemplateResult` (attribute: false) — renders non-interactive
 leading content in each virtualized row. `renderExcerpt?: (thread: ChatThread) => TemplateResult`
 (attribute: false) — renders rich content into the row item's own `excerpt` slot, winning over the
 plain-string `excerpt` property (e.g. a server-highlighted search-match snippet), while leaving the
-built-in title layout and inline-rename affordance untouched. `renderMeta?: (thread: ChatThread) =>
-TemplateResult` (attribute: false) — appends structured metadata in the row's meta region.
+built-in title layout and inline-rename affordance untouched. `<mark>` descendants returned by this
+hook receive the default, component-themeable highlight treatment documented below.
+`renderMeta?: (thread: ChatThread) => TemplateResult` (attribute: false) — appends structured
+metadata in the row's meta region.
 `renderRowContent?: (thread: ChatThread) => TemplateResult` (attribute: false) — replaces the
 conversation item's title/excerpt/meta content area with custom non-interactive row content.
 `formatGroupLabel?: (key: ThreadBucketKey, date?: Date) => string` (attribute: false) — overrides
@@ -14166,6 +14221,14 @@ prefix: `row-item-base`, `row-item-active-indicator`, `row-item-option`, `row-it
 `row-item-title`, `row-item-title-input`, `row-item-rename-button`, `row-item-excerpt`,
 `row-item-meta`, `row-item-timestamp`, `row-item-actions`.
 
+**Themeable excerpt highlights:** `<mark>` descendants returned by `renderExcerpt` use
+`--lr-thread-list-excerpt-highlight-background` (default `var(--lr-color-warning-quiet)`),
+`--lr-thread-list-excerpt-highlight-foreground` (default `inherit`),
+`--lr-thread-list-excerpt-highlight-radius` (default `var(--lr-radius-xs)`), and
+`--lr-thread-list-excerpt-highlight-padding` (default `0`). These properties inherit through the
+internal virtual-list shadow tree, so set them on `lr-thread-list` or any ancestor. They do not style
+marks returned by `renderRowContent` or any other hook.
+
 **Keep the two prefixes straight — they are different surfaces.** The `row-*` parts wrap *this*
 component's own render-callback output (`wrapRow`, `renderLeading`, `renderExcerpt`,
 `renderRowContent`, `renderMeta`, `renderActions`); the `row-item-*` parts are the row item's

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aceshooting/lyra-ui",
-  "version": "7.4.0",
+  "version": "7.6.0",
   "description": "Free, independent Lit web components: an open-source alternative to Shoelace and Web Awesome with accessible forms, dashboards, charts, and agent UI.",
   "keywords": [
     "web-components",

package/vscode-css-data.json

@@ -4460,6 +4460,34 @@
         "value": "**`<lr-thinking-panel>`** (default: `var(--lr-size-16rem)`) — Cap on how tall the expanded reasoning transcript grows before `[part=\"body\"]` scrolls internally."
       }
     },
+    {
+      "name": "--lr-thread-list-excerpt-highlight-background",
+      "description": {
+        "kind": "markdown",
+        "value": "**`<lr-thread-list>`** (default: `var(--lr-color-warning-quiet)`) — Background of `<mark>` descendants returned by `renderExcerpt`."
+      }
+    },
+    {
+      "name": "--lr-thread-list-excerpt-highlight-foreground",
+      "description": {
+        "kind": "markdown",
+        "value": "**`<lr-thread-list>`** (default: `inherit`) — Foreground of `<mark>` descendants returned by `renderExcerpt`."
+      }
+    },
+    {
+      "name": "--lr-thread-list-excerpt-highlight-padding",
+      "description": {
+        "kind": "markdown",
+        "value": "**`<lr-thread-list>`** (default: `0`) — Padding of `<mark>` descendants returned by `renderExcerpt`."
+      }
+    },
+    {
+      "name": "--lr-thread-list-excerpt-highlight-radius",
+      "description": {
+        "kind": "markdown",
+        "value": "**`<lr-thread-list>`** (default: `var(--lr-radius-xs)`) — Corner radius of `<mark>` descendants returned by `renderExcerpt`."
+      }
+    },
     {
       "name": "--lr-time-range-base-size",
       "description": {

package/vscode-html-data.json

@@ -6346,7 +6346,7 @@
       "name": "lr-filter-bar",
       "description": {
         "kind": "markdown",
-        "value": "`<lr-filter-bar>` — a row of dashboard filters, each declared by the host (`filters`) rather\nthan invented by this component: every filter composes an existing Lyra input --\n`<lr-select>`/`<lr-combobox>` for closed choice sets, `<lr-date-input>` (single or `mode=\"range\"`)\nfor dates, `<lr-input>` for a free-text query -- plus a `<lr-chip-group>` of removable\n`<lr-chip>`s summarizing the currently-active filters, an `<lr-button>` that resets every\nfilter, and (while `loading`) an `<lr-spinner>` status indicator.\n\nA `'text'` filter is the one control that is *not* a fully controlled `.value=` binding: a text\nfield re-rendered from `value` mid-typing would push a stale value back into the field and drop\nthe caret to the end, so the field owns its own value while the user types and an external\n`value` write is synced back in only once no edit is in flight (see `syncTextControls()`). Its\noptional per-filter `debounce` (ms) is the only behaviour this component adds on top of the\ncomposed control itself -- flushed by that field's own `change`/blur, cancelled by `reset()`, a\nchip removal, and `disconnectedCallback`, so a stale keystroke can never overwrite a reset or\nfire after teardown.\n\nControlled, like every other Lyra data component: `value` is a plain, JSON-serializable object\n(`FilterBarValue`) the host reads/writes directly -- this component never touches\n`location`/`history`/storage itself, so turning `value` into (and back out of) a URL\nquerystring or an app state store is entirely the host's own concern. Every edit -- picking an\noption, committing a date, removing an active-filter chip, or clicking reset -- goes through\nthe same `setFilterValue()` path and emits a single `lr-input` carrying the *full* resulting\n`value`, not just the changed filter's own value, mirroring `<lr-tool-param-form>`'s identical\n\"always the whole object\" event contract.\n\nValidation is scoped to each filter definition's own `required` flag: `invalidFilterIds`/\n`checkValidity()` are always live (plain getters over `filters`/`value`, not cached), and\n`reportValidity()` additionally reveals every currently-invalid filter's inline error (rendered\nby that filter's own composed control, via its `errorText`/`required` props -- this component\nnever renders a second, duplicate label/hint/error chrome of its own around an already-chromed\ncontrol) the same way a blur naturally would. `lr-validity-change` fires whenever the computed\n`{ valid, invalidFilterIds }` actually changes.\n\nDeliberately not form-associated: a dashboard filter bar's state is not a submitted form field,\nand every value it holds already round-trips through `value` directly -- see `disabled` below,\na plain property with no `<fieldset disabled>` cascade, for the same reason.\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `active-filters` | The `role=\"group\"` wrapper around the active-filter chip row, only rendered while any filter is set. |\n| `base` | The root `role=\"group\"` wrapper. |\n| `chip` | One active-filter `<lr-chip>`. |\n| `chips` | The `<lr-chip-group>` inside `active-filters`. |\n| `controls` | The row holding every filter control, the reset button, and the loading status. |\n| `filter-control` | One filter's composed `<lr-select>`/`<lr-combobox>`/`<lr-date-input>`/`<lr-input>`. |\n| `reset-button` | The reset `<lr-button>`. |\n| `status` | The loading `<lr-spinner>`, only rendered while `loading`. |"
+        "value": "`<lr-filter-bar>` — a row of dashboard filters, each declared by the host (`filters`) rather\nthan invented by this component: every filter composes an existing Lyra input --\n`<lr-select>`/`<lr-combobox>` for closed choice sets, `<lr-date-input>` (single or `mode=\"range\"`)\nfor dates, `<lr-input>` for a free-text query -- plus a `<lr-chip-group>` of removable\n`<lr-chip>`s summarizing the currently-active filters, an `<lr-button>` that resets every\nfilter, and (while `loading`) an `<lr-spinner>` status indicator.\n\nA `'text'` filter is the one control that is *not* a fully controlled `.value=` binding: a text\nfield re-rendered from `value` mid-typing would push a stale value back into the field and drop\nthe caret to the end, so the field owns its own value while the user types and an external\n`value` write is synced back in only once no edit is in flight (see `syncTextControls()`). Its\noptional per-filter `debounce` (ms) is the only behaviour this component adds on top of the\ncomposed control itself -- flushed by that field's own `change`/blur, cancelled by `reset()`, a\nchip removal, and `disconnectedCallback`, so a stale keystroke can never overwrite a reset or\nfire after teardown.\n\nControlled, like every other Lyra data component: `value` is a plain, JSON-serializable object\n(`FilterBarValue`) the host reads/writes directly -- this component never touches\n`location`/`history`/storage itself, so turning `value` into (and back out of) a URL\nquerystring or an app state store is entirely the host's own concern. Every edit -- picking an\noption, committing a date, removing an active-filter chip, or clicking reset -- goes through\nthe same `setFilterValue()` path and emits a single `lr-input` carrying the *full* resulting\n`value`, not just the changed filter's own value, mirroring `<lr-tool-param-form>`'s identical\n\"always the whole object\" event contract.\n\nValidation is scoped to each filter definition's own `required` flag: `invalidFilterIds`/\n`checkValidity()` are always live (plain getters over `filters`/`value`, not cached), and\n`reportValidity()` additionally reveals every currently-invalid filter's inline error (rendered\nby that filter's own composed control, via its `errorText`/`required` props -- this component\nnever renders a second, duplicate label/hint/error chrome of its own around an already-chromed\ncontrol) the same way a blur naturally would. `lr-validity-change` fires whenever the computed\n`{ valid, invalidFilterIds }` actually changes.\n\nDeliberately not form-associated: a dashboard filter bar's state is not a submitted form field,\nand every value it holds already round-trips through `value` directly -- see `disabled` below,\na plain property with no `<fieldset disabled>` cascade, for the same reason.\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `active-filters` | The `role=\"group\"` wrapper around the active-filter chip row, only rendered while any filter is set. |\n| `base` | The root `role=\"group\"` wrapper. |\n| `chip` | One active-filter `<lr-chip>`. |\n| `chips` | The `<lr-chip-group>` inside `active-filters`. |\n| `controls` | The row holding every filter control, the reset button, and the loading status. |\n| `filter-control` | One filter's composed built-in control, or the wrapper around a custom renderer's control. |\n| `reset-button` | The reset `<lr-button>`. |\n| `status` | The loading `<lr-spinner>`, only rendered while `loading`. |"
       },
       "attributes": [
         {
@@ -14773,7 +14773,7 @@
       "name": "lr-textarea",
       "description": {
         "kind": "markdown",
-        "value": "`<lr-textarea>` — a multiline plain-text input primitive, form-associated via the\n`FormAssociated` mixin (see `<lr-chat-composer>`/`<lr-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\nShips an opt-in `label`/`hint`/`errorText` form-control chrome (props + matching named slots +\n`form-control-label`/`hint`/`error` parts), mirroring `<lr-select>`'s exact pattern -- left\nunset, the chrome remains hidden. A consumer preferring their own form-field layout can still\nignore these and wrap the element. A host `aria-label` is forwarded to the internal textbox;\nexternal `aria-labelledby`/`aria-describedby` idrefs are not copied across the shadow boundary.\n\n`minlength`/`maxlength` are forwarded to the internal native `<textarea>` and bridged into this\nelement's own `ElementInternals` as `tooShort`/`tooLong` by `updateValidity()`.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| `error` | Custom error content. |\n| `hint` | Custom hint content. |\n| `label` | Custom label content. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `error` | The error message. |\n| `form-control` | The outer wrapper around label, textarea, error and hint. |\n| `form-control-label` | The `<label>` element. |\n| `hint` | The hint message. |\n| `textarea` | The native `<textarea>` element. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-textarea-max-block-size` (default: `none`) — Maximum auto-grown block size before the textarea scrolls."
+        "value": "`<lr-textarea>` — a multiline plain-text input primitive, form-associated via the\n`FormAssociated` mixin (see `<lr-chat-composer>`/`<lr-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\nShips an opt-in `label`/`hint`/`errorText` form-control chrome (props + matching named slots +\n`form-control-label`/`hint`/`error` parts), mirroring `<lr-select>`'s exact pattern -- left\nunset, the chrome remains hidden. A consumer preferring their own form-field layout can still\nignore these and wrap the element. A host `aria-label` is forwarded to the internal textbox;\nexternal `aria-labelledby`/`aria-describedby` idrefs are not copied across the shadow boundary.\n\n`minlength`/`maxlength` are forwarded to the internal native `<textarea>` and bridged into this\nelement's own `ElementInternals` as `tooShort`/`tooLong` by `updateValidity()`.\n`readonly` keeps the value focusable, selectable, copyable, and form-submittable while barring\nuser edits and constraint validation, matching the native textarea contract.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| `error` | Custom error content. |\n| `hint` | Custom hint content. |\n| `label` | Custom label content. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `error` | The error message. |\n| `form-control` | The outer wrapper around label, textarea, error and hint. |\n| `form-control-label` | The `<label>` element. |\n| `hint` | The hint message. |\n| `textarea` | The native `<textarea>` element. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-textarea-max-block-size` (default: `none`) — Maximum auto-grown block size before the textarea scrolls."
       },
       "attributes": [
         {
@@ -14881,6 +14881,13 @@
             "value": "Type: `string`  \nDefault: `''`"
           }
         },
+        {
+          "name": "readonly",
+          "description": {
+            "kind": "markdown",
+            "value": "Forwards native read-only behavior to the internal textarea. The value remains focusable,\nselectable, copyable, and form-submittable; constraint validation is suspended until the\nproperty is unset.\n\nType: `boolean`  \nDefault: `false`"
+          }
+        },
         {
           "name": "required",
           "description": {
@@ -14966,7 +14973,7 @@
       "name": "lr-thread-list",
       "description": {
         "kind": "markdown",
-        "value": "`<lr-thread-list>` — the conversation sidebar: a grouped, searchable list of chat sessions with\npin/archive/delete/rename affordances. *Data mode* (non-empty `threads`, or empty `threads` with\nnothing slotted) renders every row as a `<lr-conversation-item>` inside an internal\n`<lr-virtual-list>` — virtualized by construction, scroll position and per-row state survive a\n`threads` replacement; zero rows renders the built-in empty state. *Slotted mode* (empty `threads`\n*and* real slotted content) renders host-supplied `<lr-conversation-item>`s from the default slot\nas-is: no grouping, virtualization, or row actions in that mode — those are data-mode-only by design\n(shadow DOM cannot inject group headers between slotted children).\n\nNo thread CRUD or persistence: every mutation (`lr-thread-pin`/`-archive`/`-delete`/`-rename`) is\na controlled event carrying the *requested* new state — the host mutates `threads`.\n\nData mode: a host needing content with no home in `lr-conversation-item`'s own\n`title`/`excerpt`/`meta`/`actions` surface sets `wrapRow` to wrap the already-built row. For\ncommon row composition, `renderLeading`, `renderExcerpt`, `renderMeta`, and `renderRowContent`\nprovide focused virtualized render hooks -- `renderExcerpt` renders into the row item's own\n`excerpt` slot (winning over the plain-string `excerpt` property) for rich per-row content such\nas a highlighted search snippet. A host needing a fully custom\n`actions` surface itself — beyond `rowActions`'s closed `pin | archive | delete` set, e.g. a\n`<lr-menu>` with Rename/Delete — sets `renderActions` instead; its content is appended after any\nbuilt-in `rowActions` output in the same slot, and `wrapRow` continues to compose around the result.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| (default) | Slotted mode only: host-supplied `lr-conversation-item`s, rendered in order. Each top-level assigned element that doesn't already carry an explicit `role` is given `role=\"listitem\"`, since `[part=\"list\"]` is `role=\"list\"` in this mode and `lr-conversation-item` deliberately doesn't self-apply that role (see its own class doc). |\n| `empty` | Replaces the built-in empty state. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The root. |\n| `empty` | The empty/no-matches state. |\n| `group-header` | A date/custom group header in data mode. |\n| `group-icon` | The decorative expand/collapse glyph. |\n| `group-label` | The group label inside `group-toggle`. |\n| `group-sticky` | `sticky-groups` only: the pinned copy of the current group's header, exported from the internal `lr-virtual-list`'s sticky layer. It wraps a full copy of the `group-header`/`group-toggle`/`group-label`/`group-icon` markup (which therefore styles both the real header row and the pinned copy), and carries `aria-hidden` — style it for the pinned band itself, e.g. a shadow or a border under the band. |\n| `group-toggle` | The controlled group expand/collapse button. |\n| `list` | The list region. |\n| `pin-glyph` | The small pin indicator shown in a pinned row's `meta` slot (data mode). |\n| `row` | Exported from the internal `lr-virtual-list`'s `row` part (data mode). |\n| `row-action` | A built-in pin/archive/delete icon button (data mode, when `rowActions` includes it). |\n| `row-actions` | The wrapper around built-in and `renderActions` output. |\n| `row-content` | The wrapper around `renderRowContent` output. |\n| `row-excerpt` | The wrapper around `renderExcerpt` output, slotted into the row item's own `excerpt` slot. |\n| `row-item-actions` | Data mode: the row item's `actions` wrapper. |\n| `row-item-active-indicator` | Data mode: the row item's decorative active indicator, exported from `lr-conversation-item`. |\n| `row-item-base` | Data mode: the row `<lr-conversation-item>`'s own `base` part — the box whose padding sets row height. `row-item-*` parts are the item's *internals*; the `row-*` parts above wrap this component's own callback output and are a different surface. Styling row density here replaces the older `::part(row) { --lr-theme-*: … }` workaround, which retheme'd the whole row subtree (`renderActions` popups included). |\n| `row-item-content` | Data mode: the row item's title/excerpt content column. |\n| `row-item-excerpt` | Data mode: the row item's excerpt line. |\n| `row-item-leading` | Data mode: the row item's `leading` wrapper. |\n| `row-item-meta` | Data mode: the row item's `meta` wrapper. |\n| `row-item-option` | Data mode: the row item's selectable `option` region. |\n| `row-item-rename-button` | Data mode: the row item's pencil/rename affordance. |\n| `row-item-timestamp` | Data mode: the row item's `<time>` element. |\n| `row-item-title` | Data mode: the row item's title text. |\n| `row-item-title-input` | Data mode: the row item's in-place rename `<input>`. |\n| `row-leading` | The wrapper around `renderLeading` output. |\n| `row-meta` | A wrapper around built-in or `renderMeta` metadata. |\n| `row-wrapper` | The wrapper around `wrapRow` output (data mode, only when `wrapRow` is set). Row-only: group headers are never passed through `wrapRow`, so they never carry it. |\n| `search` | The search field wrapper. |\n| `search-input` | The `<input type=\"search\">`. |\n| `viewport` | The real scroll container, exported from the internal `lr-virtual-list`. It fills this component's height with no consumer CSS (and falls back to `lr-virtual-list`'s own 24rem `--lr-virtual-list-height` default when the container has no resolvable height). |"
+        "value": "`<lr-thread-list>` — the conversation sidebar: a grouped, searchable list of chat sessions with\npin/archive/delete/rename affordances. *Data mode* (non-empty `threads`, or empty `threads` with\nnothing slotted) renders every row as a `<lr-conversation-item>` inside an internal\n`<lr-virtual-list>` — virtualized by construction, scroll position and per-row state survive a\n`threads` replacement; zero rows renders the built-in empty state. *Slotted mode* (empty `threads`\n*and* real slotted content) renders host-supplied `<lr-conversation-item>`s from the default slot\nas-is: no grouping, virtualization, or row actions in that mode — those are data-mode-only by design\n(shadow DOM cannot inject group headers between slotted children).\n\nNo thread CRUD or persistence: every mutation (`lr-thread-pin`/`-archive`/`-delete`/`-rename`) is\na controlled event carrying the *requested* new state — the host mutates `threads`.\n\nData mode: a host needing content with no home in `lr-conversation-item`'s own\n`title`/`excerpt`/`meta`/`actions` surface sets `wrapRow` to wrap the already-built row. For\ncommon row composition, `renderLeading`, `renderExcerpt`, `renderMeta`, and `renderRowContent`\nprovide focused virtualized render hooks -- `renderExcerpt` renders into the row item's own\n`excerpt` slot (winning over the plain-string `excerpt` property) for rich per-row content such\nas a highlighted search snippet. A host needing a fully custom\n`actions` surface itself — beyond `rowActions`'s closed `pin | archive | delete` set, e.g. a\n`<lr-menu>` with Rename/Delete — sets `renderActions` instead; its content is appended after any\nbuilt-in `rowActions` output in the same slot, and `wrapRow` continues to compose around the result.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| (default) | Slotted mode only: host-supplied `lr-conversation-item`s, rendered in order. Each top-level assigned element that doesn't already carry an explicit `role` is given `role=\"listitem\"`, since `[part=\"list\"]` is `role=\"list\"` in this mode and `lr-conversation-item` deliberately doesn't self-apply that role (see its own class doc). |\n| `empty` | Replaces the built-in empty state. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The root. |\n| `empty` | The empty/no-matches state. |\n| `group-header` | A date/custom group header in data mode. |\n| `group-icon` | The decorative expand/collapse glyph. |\n| `group-label` | The group label inside `group-toggle`. |\n| `group-sticky` | `sticky-groups` only: the pinned copy of the current group's header, exported from the internal `lr-virtual-list`'s sticky layer. It wraps a full copy of the `group-header`/`group-toggle`/`group-label`/`group-icon` markup (which therefore styles both the real header row and the pinned copy), and carries `aria-hidden` — style it for the pinned band itself, e.g. a shadow or a border under the band. |\n| `group-toggle` | The controlled group expand/collapse button. |\n| `list` | The list region. |\n| `pin-glyph` | The small pin indicator shown in a pinned row's `meta` slot (data mode). |\n| `row` | Exported from the internal `lr-virtual-list`'s `row` part (data mode). |\n| `row-action` | A built-in pin/archive/delete icon button (data mode, when `rowActions` includes it). |\n| `row-actions` | The wrapper around built-in and `renderActions` output. |\n| `row-content` | The wrapper around `renderRowContent` output. |\n| `row-excerpt` | The wrapper around `renderExcerpt` output, slotted into the row item's own `excerpt` slot. |\n| `row-item-actions` | Data mode: the row item's `actions` wrapper. |\n| `row-item-active-indicator` | Data mode: the row item's decorative active indicator, exported from `lr-conversation-item`. |\n| `row-item-base` | Data mode: the row `<lr-conversation-item>`'s own `base` part — the box whose padding sets row height. `row-item-*` parts are the item's *internals*; the `row-*` parts above wrap this component's own callback output and are a different surface. Styling row density here replaces the older `::part(row) { --lr-theme-*: … }` workaround, which retheme'd the whole row subtree (`renderActions` popups included). |\n| `row-item-content` | Data mode: the row item's title/excerpt content column. |\n| `row-item-excerpt` | Data mode: the row item's excerpt line. |\n| `row-item-leading` | Data mode: the row item's `leading` wrapper. |\n| `row-item-meta` | Data mode: the row item's `meta` wrapper. |\n| `row-item-option` | Data mode: the row item's selectable `option` region. |\n| `row-item-rename-button` | Data mode: the row item's pencil/rename affordance. |\n| `row-item-timestamp` | Data mode: the row item's `<time>` element. |\n| `row-item-title` | Data mode: the row item's title text. |\n| `row-item-title-input` | Data mode: the row item's in-place rename `<input>`. |\n| `row-leading` | The wrapper around `renderLeading` output. |\n| `row-meta` | A wrapper around built-in or `renderMeta` metadata. |\n| `row-wrapper` | The wrapper around `wrapRow` output (data mode, only when `wrapRow` is set). Row-only: group headers are never passed through `wrapRow`, so they never carry it. |\n| `search` | The search field wrapper. |\n| `search-input` | The `<input type=\"search\">`. |\n| `viewport` | The real scroll container, exported from the internal `lr-virtual-list`. It fills this component's height with no consumer CSS (and falls back to `lr-virtual-list`'s own 24rem `--lr-virtual-list-height` default when the container has no resolvable height). |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-thread-list-excerpt-highlight-background` (default: `var(--lr-color-warning-quiet)`) — Background of `<mark>` descendants returned by `renderExcerpt`.\n- `--lr-thread-list-excerpt-highlight-foreground` (default: `inherit`) — Foreground of `<mark>` descendants returned by `renderExcerpt`.\n- `--lr-thread-list-excerpt-highlight-radius` (default: `var(--lr-radius-xs)`) — Corner radius of `<mark>` descendants returned by `renderExcerpt`.\n- `--lr-thread-list-excerpt-highlight-padding` (default: `0`) — Padding of `<mark>` descendants returned by `renderExcerpt`."
       },
       "attributes": [
         {

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@aceshooting/lyra-ui",
-  "version": "7.4.0",
+  "version": "7.6.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -7190,7 +7190,7 @@
         },
         {
           "name": "lr-filter-bar",
-          "description": "`<lr-filter-bar>` — a row of dashboard filters, each declared by the host (`filters`) rather\nthan invented by this component: every filter composes an existing Lyra input --\n`<lr-select>`/`<lr-combobox>` for closed choice sets, `<lr-date-input>` (single or `mode=\"range\"`)\nfor dates, `<lr-input>` for a free-text query -- plus a `<lr-chip-group>` of removable\n`<lr-chip>`s summarizing the currently-active filters, an `<lr-button>` that resets every\nfilter, and (while `loading`) an `<lr-spinner>` status indicator.\n\nA `'text'` filter is the one control that is *not* a fully controlled `.value=` binding: a text\nfield re-rendered from `value` mid-typing would push a stale value back into the field and drop\nthe caret to the end, so the field owns its own value while the user types and an external\n`value` write is synced back in only once no edit is in flight (see `syncTextControls()`). Its\noptional per-filter `debounce` (ms) is the only behaviour this component adds on top of the\ncomposed control itself -- flushed by that field's own `change`/blur, cancelled by `reset()`, a\nchip removal, and `disconnectedCallback`, so a stale keystroke can never overwrite a reset or\nfire after teardown.\n\nControlled, like every other Lyra data component: `value` is a plain, JSON-serializable object\n(`FilterBarValue`) the host reads/writes directly -- this component never touches\n`location`/`history`/storage itself, so turning `value` into (and back out of) a URL\nquerystring or an app state store is entirely the host's own concern. Every edit -- picking an\noption, committing a date, removing an active-filter chip, or clicking reset -- goes through\nthe same `setFilterValue()` path and emits a single `lr-input` carrying the *full* resulting\n`value`, not just the changed filter's own value, mirroring `<lr-tool-param-form>`'s identical\n\"always the whole object\" event contract.\n\nValidation is scoped to each filter definition's own `required` flag: `invalidFilterIds`/\n`checkValidity()` are always live (plain getters over `filters`/`value`, not cached), and\n`reportValidity()` additionally reveals every currently-invalid filter's inline error (rendered\nby that filter's own composed control, via its `errorText`/`required` props -- this component\nnever renders a second, duplicate label/hint/error chrome of its own around an already-chromed\ncontrol) the same way a blur naturally would. `lr-validity-change` fires whenever the computed\n`{ valid, invalidFilterIds }` actually changes.\n\nDeliberately not form-associated: a dashboard filter bar's state is not a submitted form field,\nand every value it holds already round-trips through `value` directly -- see `disabled` below,\na plain property with no `<fieldset disabled>` cascade, for the same reason.\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `active-filters` | The `role=\"group\"` wrapper around the active-filter chip row, only rendered while any filter is set. |\n| `base` | The root `role=\"group\"` wrapper. |\n| `chip` | One active-filter `<lr-chip>`. |\n| `chips` | The `<lr-chip-group>` inside `active-filters`. |\n| `controls` | The row holding every filter control, the reset button, and the loading status. |\n| `filter-control` | One filter's composed `<lr-select>`/`<lr-combobox>`/`<lr-date-input>`/`<lr-input>`. |\n| `reset-button` | The reset `<lr-button>`. |\n| `status` | The loading `<lr-spinner>`, only rendered while `loading`. |",
+          "description": "`<lr-filter-bar>` — a row of dashboard filters, each declared by the host (`filters`) rather\nthan invented by this component: every filter composes an existing Lyra input --\n`<lr-select>`/`<lr-combobox>` for closed choice sets, `<lr-date-input>` (single or `mode=\"range\"`)\nfor dates, `<lr-input>` for a free-text query -- plus a `<lr-chip-group>` of removable\n`<lr-chip>`s summarizing the currently-active filters, an `<lr-button>` that resets every\nfilter, and (while `loading`) an `<lr-spinner>` status indicator.\n\nA `'text'` filter is the one control that is *not* a fully controlled `.value=` binding: a text\nfield re-rendered from `value` mid-typing would push a stale value back into the field and drop\nthe caret to the end, so the field owns its own value while the user types and an external\n`value` write is synced back in only once no edit is in flight (see `syncTextControls()`). Its\noptional per-filter `debounce` (ms) is the only behaviour this component adds on top of the\ncomposed control itself -- flushed by that field's own `change`/blur, cancelled by `reset()`, a\nchip removal, and `disconnectedCallback`, so a stale keystroke can never overwrite a reset or\nfire after teardown.\n\nControlled, like every other Lyra data component: `value` is a plain, JSON-serializable object\n(`FilterBarValue`) the host reads/writes directly -- this component never touches\n`location`/`history`/storage itself, so turning `value` into (and back out of) a URL\nquerystring or an app state store is entirely the host's own concern. Every edit -- picking an\noption, committing a date, removing an active-filter chip, or clicking reset -- goes through\nthe same `setFilterValue()` path and emits a single `lr-input` carrying the *full* resulting\n`value`, not just the changed filter's own value, mirroring `<lr-tool-param-form>`'s identical\n\"always the whole object\" event contract.\n\nValidation is scoped to each filter definition's own `required` flag: `invalidFilterIds`/\n`checkValidity()` are always live (plain getters over `filters`/`value`, not cached), and\n`reportValidity()` additionally reveals every currently-invalid filter's inline error (rendered\nby that filter's own composed control, via its `errorText`/`required` props -- this component\nnever renders a second, duplicate label/hint/error chrome of its own around an already-chromed\ncontrol) the same way a blur naturally would. `lr-validity-change` fires whenever the computed\n`{ valid, invalidFilterIds }` actually changes.\n\nDeliberately not form-associated: a dashboard filter bar's state is not a submitted form field,\nand every value it holds already round-trips through `value` directly -- see `disabled` below,\na plain property with no `<fieldset disabled>` cascade, for the same reason.\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `active-filters` | The `role=\"group\"` wrapper around the active-filter chip row, only rendered while any filter is set. |\n| `base` | The root `role=\"group\"` wrapper. |\n| `chip` | One active-filter `<lr-chip>`. |\n| `chips` | The `<lr-chip-group>` inside `active-filters`. |\n| `controls` | The row holding every filter control, the reset button, and the loading status. |\n| `filter-control` | One filter's composed built-in control, or the wrapper around a custom renderer's control. |\n| `reset-button` | The reset `<lr-button>`. |\n| `status` | The loading `<lr-spinner>`, only rendered while `loading`. |",
           "attributes": [
             {
               "name": "disabled",
@@ -16422,7 +16422,7 @@
         },
         {
           "name": "lr-textarea",
-          "description": "`<lr-textarea>` — a multiline plain-text input primitive, form-associated via the\n`FormAssociated` mixin (see `<lr-chat-composer>`/`<lr-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\nShips an opt-in `label`/`hint`/`errorText` form-control chrome (props + matching named slots +\n`form-control-label`/`hint`/`error` parts), mirroring `<lr-select>`'s exact pattern -- left\nunset, the chrome remains hidden. A consumer preferring their own form-field layout can still\nignore these and wrap the element. A host `aria-label` is forwarded to the internal textbox;\nexternal `aria-labelledby`/`aria-describedby` idrefs are not copied across the shadow boundary.\n\n`minlength`/`maxlength` are forwarded to the internal native `<textarea>` and bridged into this\nelement's own `ElementInternals` as `tooShort`/`tooLong` by `updateValidity()`.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| `error` | Custom error content. |\n| `hint` | Custom hint content. |\n| `label` | Custom label content. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `error` | The error message. |\n| `form-control` | The outer wrapper around label, textarea, error and hint. |\n| `form-control-label` | The `<label>` element. |\n| `hint` | The hint message. |\n| `textarea` | The native `<textarea>` element. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-textarea-max-block-size` (default: `none`) — Maximum auto-grown block size before the textarea scrolls.",
+          "description": "`<lr-textarea>` — a multiline plain-text input primitive, form-associated via the\n`FormAssociated` mixin (see `<lr-chat-composer>`/`<lr-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\nShips an opt-in `label`/`hint`/`errorText` form-control chrome (props + matching named slots +\n`form-control-label`/`hint`/`error` parts), mirroring `<lr-select>`'s exact pattern -- left\nunset, the chrome remains hidden. A consumer preferring their own form-field layout can still\nignore these and wrap the element. A host `aria-label` is forwarded to the internal textbox;\nexternal `aria-labelledby`/`aria-describedby` idrefs are not copied across the shadow boundary.\n\n`minlength`/`maxlength` are forwarded to the internal native `<textarea>` and bridged into this\nelement's own `ElementInternals` as `tooShort`/`tooLong` by `updateValidity()`.\n`readonly` keeps the value focusable, selectable, copyable, and form-submittable while barring\nuser edits and constraint validation, matching the native textarea contract.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| `error` | Custom error content. |\n| `hint` | Custom hint content. |\n| `label` | Custom label content. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `error` | The error message. |\n| `form-control` | The outer wrapper around label, textarea, error and hint. |\n| `form-control-label` | The `<label>` element. |\n| `hint` | The hint message. |\n| `textarea` | The native `<textarea>` element. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-textarea-max-block-size` (default: `none`) — Maximum auto-grown block size before the textarea scrolls.",
           "attributes": [
             {
               "name": "aria-label",
@@ -16544,6 +16544,15 @@
                 ]
               }
             },
+            {
+              "name": "readonly",
+              "description": "Forwards native read-only behavior to the internal textarea. The value remains focusable,\nselectable, copyable, and form-submittable; constraint validation is suspended until the\nproperty is unset.\n\nType: `boolean`  \nDefault: `false`",
+              "value": {
+                "type": [
+                  "boolean"
+                ]
+              }
+            },
             {
               "name": "required",
               "description": "Type: `boolean`",
@@ -16639,7 +16648,7 @@
         },
         {
           "name": "lr-thread-list",
-          "description": "`<lr-thread-list>` — the conversation sidebar: a grouped, searchable list of chat sessions with\npin/archive/delete/rename affordances. *Data mode* (non-empty `threads`, or empty `threads` with\nnothing slotted) renders every row as a `<lr-conversation-item>` inside an internal\n`<lr-virtual-list>` — virtualized by construction, scroll position and per-row state survive a\n`threads` replacement; zero rows renders the built-in empty state. *Slotted mode* (empty `threads`\n*and* real slotted content) renders host-supplied `<lr-conversation-item>`s from the default slot\nas-is: no grouping, virtualization, or row actions in that mode — those are data-mode-only by design\n(shadow DOM cannot inject group headers between slotted children).\n\nNo thread CRUD or persistence: every mutation (`lr-thread-pin`/`-archive`/`-delete`/`-rename`) is\na controlled event carrying the *requested* new state — the host mutates `threads`.\n\nData mode: a host needing content with no home in `lr-conversation-item`'s own\n`title`/`excerpt`/`meta`/`actions` surface sets `wrapRow` to wrap the already-built row. For\ncommon row composition, `renderLeading`, `renderExcerpt`, `renderMeta`, and `renderRowContent`\nprovide focused virtualized render hooks -- `renderExcerpt` renders into the row item's own\n`excerpt` slot (winning over the plain-string `excerpt` property) for rich per-row content such\nas a highlighted search snippet. A host needing a fully custom\n`actions` surface itself — beyond `rowActions`'s closed `pin | archive | delete` set, e.g. a\n`<lr-menu>` with Rename/Delete — sets `renderActions` instead; its content is appended after any\nbuilt-in `rowActions` output in the same slot, and `wrapRow` continues to compose around the result.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| (default) | Slotted mode only: host-supplied `lr-conversation-item`s, rendered in order. Each top-level assigned element that doesn't already carry an explicit `role` is given `role=\"listitem\"`, since `[part=\"list\"]` is `role=\"list\"` in this mode and `lr-conversation-item` deliberately doesn't self-apply that role (see its own class doc). |\n| `empty` | Replaces the built-in empty state. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The root. |\n| `empty` | The empty/no-matches state. |\n| `group-header` | A date/custom group header in data mode. |\n| `group-icon` | The decorative expand/collapse glyph. |\n| `group-label` | The group label inside `group-toggle`. |\n| `group-sticky` | `sticky-groups` only: the pinned copy of the current group's header, exported from the internal `lr-virtual-list`'s sticky layer. It wraps a full copy of the `group-header`/`group-toggle`/`group-label`/`group-icon` markup (which therefore styles both the real header row and the pinned copy), and carries `aria-hidden` — style it for the pinned band itself, e.g. a shadow or a border under the band. |\n| `group-toggle` | The controlled group expand/collapse button. |\n| `list` | The list region. |\n| `pin-glyph` | The small pin indicator shown in a pinned row's `meta` slot (data mode). |\n| `row` | Exported from the internal `lr-virtual-list`'s `row` part (data mode). |\n| `row-action` | A built-in pin/archive/delete icon button (data mode, when `rowActions` includes it). |\n| `row-actions` | The wrapper around built-in and `renderActions` output. |\n| `row-content` | The wrapper around `renderRowContent` output. |\n| `row-excerpt` | The wrapper around `renderExcerpt` output, slotted into the row item's own `excerpt` slot. |\n| `row-item-actions` | Data mode: the row item's `actions` wrapper. |\n| `row-item-active-indicator` | Data mode: the row item's decorative active indicator, exported from `lr-conversation-item`. |\n| `row-item-base` | Data mode: the row `<lr-conversation-item>`'s own `base` part — the box whose padding sets row height. `row-item-*` parts are the item's *internals*; the `row-*` parts above wrap this component's own callback output and are a different surface. Styling row density here replaces the older `::part(row) { --lr-theme-*: … }` workaround, which retheme'd the whole row subtree (`renderActions` popups included). |\n| `row-item-content` | Data mode: the row item's title/excerpt content column. |\n| `row-item-excerpt` | Data mode: the row item's excerpt line. |\n| `row-item-leading` | Data mode: the row item's `leading` wrapper. |\n| `row-item-meta` | Data mode: the row item's `meta` wrapper. |\n| `row-item-option` | Data mode: the row item's selectable `option` region. |\n| `row-item-rename-button` | Data mode: the row item's pencil/rename affordance. |\n| `row-item-timestamp` | Data mode: the row item's `<time>` element. |\n| `row-item-title` | Data mode: the row item's title text. |\n| `row-item-title-input` | Data mode: the row item's in-place rename `<input>`. |\n| `row-leading` | The wrapper around `renderLeading` output. |\n| `row-meta` | A wrapper around built-in or `renderMeta` metadata. |\n| `row-wrapper` | The wrapper around `wrapRow` output (data mode, only when `wrapRow` is set). Row-only: group headers are never passed through `wrapRow`, so they never carry it. |\n| `search` | The search field wrapper. |\n| `search-input` | The `<input type=\"search\">`. |\n| `viewport` | The real scroll container, exported from the internal `lr-virtual-list`. It fills this component's height with no consumer CSS (and falls back to `lr-virtual-list`'s own 24rem `--lr-virtual-list-height` default when the container has no resolvable height). |",
+          "description": "`<lr-thread-list>` — the conversation sidebar: a grouped, searchable list of chat sessions with\npin/archive/delete/rename affordances. *Data mode* (non-empty `threads`, or empty `threads` with\nnothing slotted) renders every row as a `<lr-conversation-item>` inside an internal\n`<lr-virtual-list>` — virtualized by construction, scroll position and per-row state survive a\n`threads` replacement; zero rows renders the built-in empty state. *Slotted mode* (empty `threads`\n*and* real slotted content) renders host-supplied `<lr-conversation-item>`s from the default slot\nas-is: no grouping, virtualization, or row actions in that mode — those are data-mode-only by design\n(shadow DOM cannot inject group headers between slotted children).\n\nNo thread CRUD or persistence: every mutation (`lr-thread-pin`/`-archive`/`-delete`/`-rename`) is\na controlled event carrying the *requested* new state — the host mutates `threads`.\n\nData mode: a host needing content with no home in `lr-conversation-item`'s own\n`title`/`excerpt`/`meta`/`actions` surface sets `wrapRow` to wrap the already-built row. For\ncommon row composition, `renderLeading`, `renderExcerpt`, `renderMeta`, and `renderRowContent`\nprovide focused virtualized render hooks -- `renderExcerpt` renders into the row item's own\n`excerpt` slot (winning over the plain-string `excerpt` property) for rich per-row content such\nas a highlighted search snippet. A host needing a fully custom\n`actions` surface itself — beyond `rowActions`'s closed `pin | archive | delete` set, e.g. a\n`<lr-menu>` with Rename/Delete — sets `renderActions` instead; its content is appended after any\nbuilt-in `rowActions` output in the same slot, and `wrapRow` continues to compose around the result.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| (default) | Slotted mode only: host-supplied `lr-conversation-item`s, rendered in order. Each top-level assigned element that doesn't already carry an explicit `role` is given `role=\"listitem\"`, since `[part=\"list\"]` is `role=\"list\"` in this mode and `lr-conversation-item` deliberately doesn't self-apply that role (see its own class doc). |\n| `empty` | Replaces the built-in empty state. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The root. |\n| `empty` | The empty/no-matches state. |\n| `group-header` | A date/custom group header in data mode. |\n| `group-icon` | The decorative expand/collapse glyph. |\n| `group-label` | The group label inside `group-toggle`. |\n| `group-sticky` | `sticky-groups` only: the pinned copy of the current group's header, exported from the internal `lr-virtual-list`'s sticky layer. It wraps a full copy of the `group-header`/`group-toggle`/`group-label`/`group-icon` markup (which therefore styles both the real header row and the pinned copy), and carries `aria-hidden` — style it for the pinned band itself, e.g. a shadow or a border under the band. |\n| `group-toggle` | The controlled group expand/collapse button. |\n| `list` | The list region. |\n| `pin-glyph` | The small pin indicator shown in a pinned row's `meta` slot (data mode). |\n| `row` | Exported from the internal `lr-virtual-list`'s `row` part (data mode). |\n| `row-action` | A built-in pin/archive/delete icon button (data mode, when `rowActions` includes it). |\n| `row-actions` | The wrapper around built-in and `renderActions` output. |\n| `row-content` | The wrapper around `renderRowContent` output. |\n| `row-excerpt` | The wrapper around `renderExcerpt` output, slotted into the row item's own `excerpt` slot. |\n| `row-item-actions` | Data mode: the row item's `actions` wrapper. |\n| `row-item-active-indicator` | Data mode: the row item's decorative active indicator, exported from `lr-conversation-item`. |\n| `row-item-base` | Data mode: the row `<lr-conversation-item>`'s own `base` part — the box whose padding sets row height. `row-item-*` parts are the item's *internals*; the `row-*` parts above wrap this component's own callback output and are a different surface. Styling row density here replaces the older `::part(row) { --lr-theme-*: … }` workaround, which retheme'd the whole row subtree (`renderActions` popups included). |\n| `row-item-content` | Data mode: the row item's title/excerpt content column. |\n| `row-item-excerpt` | Data mode: the row item's excerpt line. |\n| `row-item-leading` | Data mode: the row item's `leading` wrapper. |\n| `row-item-meta` | Data mode: the row item's `meta` wrapper. |\n| `row-item-option` | Data mode: the row item's selectable `option` region. |\n| `row-item-rename-button` | Data mode: the row item's pencil/rename affordance. |\n| `row-item-timestamp` | Data mode: the row item's `<time>` element. |\n| `row-item-title` | Data mode: the row item's title text. |\n| `row-item-title-input` | Data mode: the row item's in-place rename `<input>`. |\n| `row-leading` | The wrapper around `renderLeading` output. |\n| `row-meta` | A wrapper around built-in or `renderMeta` metadata. |\n| `row-wrapper` | The wrapper around `wrapRow` output (data mode, only when `wrapRow` is set). Row-only: group headers are never passed through `wrapRow`, so they never carry it. |\n| `search` | The search field wrapper. |\n| `search-input` | The `<input type=\"search\">`. |\n| `viewport` | The real scroll container, exported from the internal `lr-virtual-list`. It fills this component's height with no consumer CSS (and falls back to `lr-virtual-list`'s own 24rem `--lr-virtual-list-height` default when the container has no resolvable height). |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-thread-list-excerpt-highlight-background` (default: `var(--lr-color-warning-quiet)`) — Background of `<mark>` descendants returned by `renderExcerpt`.\n- `--lr-thread-list-excerpt-highlight-foreground` (default: `inherit`) — Foreground of `<mark>` descendants returned by `renderExcerpt`.\n- `--lr-thread-list-excerpt-highlight-radius` (default: `var(--lr-radius-xs)`) — Corner radius of `<mark>` descendants returned by `renderExcerpt`.\n- `--lr-thread-list-excerpt-highlight-padding` (default: `0`) — Padding of `<mark>` descendants returned by `renderExcerpt`.",
           "attributes": [
             {
               "name": "active-id",
@@ -21230,6 +21239,22 @@
           "name": "--lr-thinking-panel-max-block-size",
           "description": "**`<lr-thinking-panel>`** (default: `var(--lr-size-16rem)`) — Cap on how tall the expanded reasoning transcript grows before `[part=\"body\"]` scrolls internally."
         },
+        {
+          "name": "--lr-thread-list-excerpt-highlight-background",
+          "description": "**`<lr-thread-list>`** (default: `var(--lr-color-warning-quiet)`) — Background of `<mark>` descendants returned by `renderExcerpt`."
+        },
+        {
+          "name": "--lr-thread-list-excerpt-highlight-foreground",
+          "description": "**`<lr-thread-list>`** (default: `inherit`) — Foreground of `<mark>` descendants returned by `renderExcerpt`."
+        },
+        {
+          "name": "--lr-thread-list-excerpt-highlight-padding",
+          "description": "**`<lr-thread-list>`** (default: `0`) — Padding of `<mark>` descendants returned by `renderExcerpt`."
+        },
+        {
+          "name": "--lr-thread-list-excerpt-highlight-radius",
+          "description": "**`<lr-thread-list>`** (default: `var(--lr-radius-xs)`) — Corner radius of `<mark>` descendants returned by `renderExcerpt`."
+        },
         {
           "name": "--lr-time-range-base-size",
           "description": "**`<lr-time-range>`** (default: `1.5rem*scale`) — Brush baseline block size."