@aceshooting/lyra-ui 5.2.0 → 6.0.0

package/llms/components/lr-emoji-picker.md

@@ -36,7 +36,8 @@ search/grid; unset renders no label chrome. When `label` (or the `label` slot) i
 localized default to `aria-labelledby` pointing at the visible label. `hint: string = ''` —
 supporting text rendered below the search/grid; unset renders no hint chrome. `errorText: string =
 ''` (attribute `error-text`) — validation-error text rendered below the hint (overridden by slotted
-`error` content when provided); unset renders no error chrome.
+`error` content when provided); unset renders no error chrome. `size: '2xs' | 'xs' | 's' | 'm' | 'l' | 'xl' = 'm'` —
+visual size; scales the emoji grid item box and its glyph proportionally, floored at 24px (WCAG 2.5.8).
 
 **Events:** `lr-change` with `detail: { emoji }` (an emoji was picked — click, or Enter/Space on
 the active grid cell; also sets `value`), plus the shared form `input`, `change`, `focus`, and `blur`.
@@ -62,10 +63,13 @@ error message). While windowing is active the rows are wrapped in `virtual-space
 emoji flex line).
 
 **Themeable custom properties:** `--lr-emoji-picker-item-size` (default `--lr-icon-button-size`,
-each emoji button's box), `--lr-emoji-picker-gap` (default `--lr-space-2xs`, the gap between
+each emoji button's box; scaled by the `size` property), `--lr-emoji-picker-glyph-size` (default
+`--lr-font-size-lg`, the font size of the emoji glyph; scaled by the `size` property to keep the glyph
+proportional to the item box), `--lr-emoji-picker-gap` (default `--lr-space-2xs`, the gap between
 emoji within a windowed row), and `--lr-emoji-picker-row-height` (default
-`calc(var(--lr-emoji-picker-item-size) + var(--lr-space-l))`, one windowed row's height). All three
-are also read back in JS to derive columns-per-row and row offsets for the windowed layout,
+`calc(var(--lr-emoji-picker-item-size) + var(--lr-space-l))`, one windowed row's height).
+`--lr-emoji-picker-item-size`, `--lr-emoji-picker-gap`, and `--lr-emoji-picker-row-height` are also
+read back in JS to derive columns-per-row and row offsets for the windowed layout,
 resolved to real pixels by measuring hidden probe boxes the component's own stylesheet sizes from
 those same tokens — so any CSS length unit works, `rem`/`em` and `calc()` included, and the windowed
 geometry matches what is painted without expressing the tokens in `px`. The measurement is cached
@@ -82,8 +86,9 @@ repainting everything else that reads it — as the only way in. Like `lr-time-r
 properties, it is written as an inline `var()` fallback at the point of use rather than declared on
 `:host`, so a value set on **any ancestor** reaches it instead of being shadowed.
 
-Two constraints remain. `--lr-emoji-picker-item-size` is clamped up to `--lr-icon-button-size`, the
-shared minimum tappable box: a smaller value does not shrink the button, and the windowed geometry
+Two constraints remain. `--lr-emoji-picker-item-size` is held at a flat 24px minimum (WCAG 2.5.8
+touch target floor): the smaller `size` tier values can shrink the box below the old 40px
+unconditional floor, but the minimum holds at 24px regardless of tokens, and the windowed geometry
 follows the clamped, painted size. And windowed rows are absolutely positioned at the row-height
 pitch, so `--lr-emoji-picker-row-height` must stay at or above the item size plus the group-label
 band (`--lr-space-l`) — the default's own formula — or consecutive rows overlap. Columns per

package/llms/components/lr-eval-dataset.md

@@ -19,7 +19,7 @@ Filterable and taggable evaluation-example list with add, remove, import, and ex
   expectedOutput?: string; tags?: string[]; metadata?: Record<string, unknown> }` (exported here).
   Deliberately its own small shape rather than reusing anything from `src/ai/types.ts` — none of that
   module's interfaces models "one row of a labeled eval dataset". `input`/`expectedOutput` are plain
-  strings (not structured payloads) to match `lr-data-grid`'s stringifying cell rendering. Fully
+  strings (not structured payloads), rendered as plain text by every column's `cell()`. Fully
   controlled: add/remove/import/export are all *requests*; the host mutates and passes the array back
 - `searchable: boolean = false` (reflected) — built-in free-text search over `input`,
   `expectedOutput`, and `tags` (case-insensitive substring)

package/llms/components/lr-eval-result.md

@@ -14,7 +14,7 @@
 
 Rubric scoring and human-review surface for comparing the runs of one evaluation example.
 
-Composes `lr-data-grid` (the comparison table), `lr-rubric-form` (the review surface), and
+Composes `lr-table` (the comparison table), `lr-rubric-form` (the review surface), and
 `lr-diff-view` (baseline↔selected output diff) rather than re-deriving any of their behavior.
 
 **Properties:**
@@ -22,10 +22,10 @@ Composes `lr-data-grid` (the comparison table), `lr-rubric-form` (the review sur
   model?: string; promptVersion?: string; output: string; scores?: RubricValue; review?: RubricValue }`
   (exported here). One entry per model or prompt version being compared for a single evaluation
   example. `scores`/`review` use the same `RubricValue` shape `lr-rubric-form` itself reads and
-  writes, so a `DataGridColumn`'s `value()` accessor and the rubric form's own `value` binding read a
+  writes, so a `TableColumn`'s `cell()` accessor and the rubric form's own `value` binding read a
   run's fields with no conversion
-- `columns: DataGridColumn<EvalRunResult>[] = []` (attribute: false) — plain pass-through to
-  `lr-data-grid.columns`, not re-derived here
+- `columns: TableColumn<EvalRunResult>[] = []` (attribute: false) — plain pass-through to
+  `lr-table.columns`, not re-derived here
 - `rubricKeys: RubricKey[] = []` (attribute: false) — plain pass-through to `lr-rubric-form.keys`
 - `selectedRunId: string = ''` (attribute `selected-run-id`) — the run open for review and the diff's
   **new** side; falls back to `runs[0]?.id` when empty

package/llms/components/lr-flag.md

@@ -70,11 +70,15 @@ tag itself, and so does a structurally invalid one — `Intl.DisplayNames` throw
 those rather than falling back, and a language picker should degrade to showing the raw tag rather
 than tearing down the render. Pair it with `languageToCountry()` for the flag half of the same row.
 
-**Locale picker recipe.** A locale picker is a composition, not a component: `<lr-popover>` supplies
-the light-dismiss surface, `<lr-flag>` the country mark, `localeNativeName()` the endonym, and
-`aria-current="true"` marks the active choice. Which locales exist is the app's decision, so the app
-owns the list. Set `lang` on each row so assistive tech pronounces the endonym in its own language,
-and use `variant="compact"` at icon scale.
+**Locale picker recipe.** `<lr-locale-picker>` (`components/forms/locale-picker/`) is the built-in
+locale switcher — a closed-list dropdown over the locale registry or an explicit catalog, with
+`lr-flag`/`localeNativeName()` rows and full form association out of the box. The manual
+composition below remains available for an app that wants different chrome (its own dismiss
+surface, a different active-state marker, or a layout `<lr-locale-picker>` doesn't offer):
+`<lr-popover>` supplies the light-dismiss surface, `<lr-flag>` the country mark,
+`localeNativeName()` the endonym, and `aria-current="true"` marks the active choice. Which locales
+exist is the app's decision, so the app owns the list. Set `lang` on each row so assistive tech
+pronounces the endonym in its own language, and use `variant="compact"` at icon scale.
 
 ```html
 <lr-popover placement="bottom-start">

package/llms/components/lr-flow-canvas.md

@@ -87,7 +87,13 @@ that reads it. The same restriction motivates three more state-scoped outline co
 a node that is an invalid connect-gesture drop target; `--lr-flow-canvas-node-connect-target-outline-color`
 (default `var(--lr-color-brand)`) — outline of a node that is a valid connect-gesture drop target; and
 `--lr-flow-canvas-drop-active-outline-color` (default `var(--lr-color-brand)`) — outline of the
-viewport itself while a palette item is dragged over it (`droppable`).
+viewport itself while a palette item is dragged over it (`droppable`). A fifth,
+`--lr-flow-canvas-node-hover-outline-color` (default `var(--lr-color-border-strong)`) — the
+mouse-hover preview of a node's own `:focus-visible` ring — exists for a different reason than the
+four above: it is `:hover`-gated rather than attribute-gated, so `::part(node):hover` *is* valid
+CSS here, but the internal `[part='node']:hover` rule still out-specifies it ((0,2,0) vs. (0,1,1)),
+which this custom property sidesteps the same way. Set it to `transparent` to opt out of the hover
+treatment entirely.
 
 **Optional peer deps:** none.
 

package/llms/components/lr-icon-button.md

@@ -40,11 +40,16 @@ complete element — an `<svg>`, an `<img>`, an `<lr-flag>` — render at its ow
 instead of being forced into a 1:1 box. Setting both `icon` and slotted content renders both, side
 by side; that is a valid composition, not a fallback.
 
-**Migration note:** bare SVG *geometry* (`<path>`, `<circle>`, `<rect>` …) slotted with no `icon`
-set has no SVG parent here and will not paint. Wrap it in an `<lr-icon>`, or in a complete `<svg>`
-of your own.
-
-**CSS parts:** `button`
+**Bare SVG geometry fallback:** slotted bare SVG *geometry* (`path`, `circle`, `rect`, `line`,
+`polygon`, `polyline`, `ellipse`, `g`, `use`) with no `icon` set and no enclosing `<svg>` of its
+own has no real SVG parent as parsed, and is detected and cloned into an internal
+`[part="fallback"]` SVG-namespaced element so it still paints — the same fallback `<lr-icon>`'s own
+custom-content slot uses. This is narrowly scoped to that whitelist: a complete `<svg>`, `<img>`,
+or custom element (e.g. `<lr-flag>`) is never touched by it and keeps rendering as an untouched
+sibling at its own natural aspect ratio.
+
+**CSS parts:** `button`, `fallback` (only present in the DOM while at least one top-level slotted
+element needs the bare-geometry fallback above)
 
 **Themeable custom properties:** `--lr-icon-button-size` (default `2.5rem`) is the **minimum**
 tappable inline and block size of the native button — a floor, not a fixed size. Content larger

package/llms/components/lr-locale-picker.md

@@ -0,0 +1,86 @@
+<!-- GENERATED by scripts/build-llms.mjs from llms/forms.md — do not edit this file. -->
+
+# `lr-locale-picker`
+
+- **Import** `import '@aceshooting/lyra-ui/components/forms/locale-picker/locale-picker.js';` (registers the tag; side-effect import)
+- **Class** `LyraLocalePicker`, also available unregistered from `@aceshooting/lyra-ui/components/forms/locale-picker/locale-picker.class.js`
+- **Family** `components/forms/` — see `llms/index.md` for its siblings
+- **Optional peers** none
+- **Library-wide behavior** (events, form association, `locale`/`strings`, tokens, TS types): `llms/shared.md`
+
+---
+
+## `lr-locale-picker`
+
+A closed-list locale switcher over the library's own locale registry. First-party invention (no
+Web Awesome equivalent). With `locales` unset (the default), the offered rows are exactly
+`getRegisteredLyraLocales()` — every locale with strings registered via `registerLyraLocale()`,
+plus `en` — kept live via `subscribeLyraLocaleRegistry()`. Built directly on `lr-select`'s
+trigger-button/`aria-activedescendant` listbox technique, not composed from it — a plain closed
+list, no filter/free-text mode.
+
+**Properties:**
+- `locales: LyraLocaleCatalog = []` (attribute: false) — `LyraLocaleCatalog = string[] |
+  LyraLocaleEntry[]`, `LyraLocaleEntry { tag: string; label?: string }`. Empty (the default)
+  auto-discovers the registry; a non-empty array (either form) overrides it entirely — a curated
+  subset, custom order, custom labels, or a locale offered before its strings are registered.
+- `showFlags: boolean = true` — each row's leading `<lr-flag language={tag} variant="compact">`;
+  `false` omits the flag element entirely (not just visually).
+- `value: string = ''` — the **committed** selection (form value, drives `lr-change`). While `''`
+  and untouched, the trigger *displays* `effectiveLocale` as a preview label, but
+  `checkValidity()`/`required` are governed by the real `value`, which stays `''` until a real
+  commit — mirrors a native `<select>` showing its first option's text without that being a
+  committed selection.
+- `required: boolean = false`, `disabled: boolean = false`, `name: string = ''` — standard
+  form-associated properties.
+- `label: string = ''`, `hint: string = ''`, `errorText: string = ''` (attribute `error-text`) —
+  same opt-in form-control chrome as `lr-select` (props + matching named slots + parts); unset
+  renders none of it.
+- `open: boolean = false` (reflected).
+- `size: '2xs' | 'xs' | 's' | 'm' | 'l' | 'xl' = 'm'` (reflected — same scale as `lr-select`'s `size`).
+
+**Events:** `lr-change` (`detail: { value, previousValue }`, **cancelable**) — fired on every
+explicit pick; if not `defaultPrevented`, the component applies the pick itself via
+`setLyraLocale(value)`. A listener calling `event.preventDefault()` leaves `value` updated but the
+active locale untouched, so a host can persist the choice first and apply it later. `blur`/`focus`
+re-dispatched from the internal trigger as bubbling, composed events.
+
+**Methods:** `focus(options?)`, `blur()`, and `click()` — all forward to the internal trigger
+button, same convention as `lr-select`'s identical trio.
+
+**Slots:** `label`, `hint`, `error`.
+
+**CSS parts:** `form-control`, `form-control-label`, `trigger`, `listbox`, `option`,
+`option-flag` (present only while `showFlags` is on), `option-label`, `option-tag` (the row's
+secondary line — the raw BCP-47 tag), `expand-icon`, `hint`, `error`.
+
+**Themeable custom properties:** `--lr-locale-picker-trigger-padding`,
+`--lr-locale-picker-trigger-min-height`, `--lr-locale-picker-trigger-height` (unset by default, a
+floor-only escape hatch — set a length to both floor and cap the trigger),
+`--lr-locale-picker-font-size`, `--lr-locale-picker-expand-size` (all scaled by `size`), and
+`--lr-locale-picker-option-active-bg` (default `--lr-color-brand-quiet`, the hovered/keyboard-active
+row background).
+
+**Optional peer deps:** none directly — each row's `<lr-flag>` degrades to an empty render (no
+peer warning duplication; `lr-flag` itself already logs one) when the optional
+`@aceshooting/lyra-flags` package isn't installed and `showFlags` is left on.
+
+```html
+<lr-locale-picker label="Language"></lr-locale-picker>
+<script type="module">
+  import { registerLyraLocale } from '@aceshooting/lyra-ui';
+  registerLyraLocale('fr', { close: 'Fermer' });
+  document
+    .querySelector('lr-locale-picker')
+    .addEventListener('lr-change', (e) => console.log(e.detail.value));
+</script>
+```
+
+**Known gotchas:**
+- selecting a row applies `setLyraLocale()` itself unless the listener calls
+  `event.preventDefault()` on `lr-change` — it does not touch
+  `document.documentElement.lang`/`dir`; apply writing-direction changes to the page yourself.
+- no filter/free-text mode — for a catalog with hundreds+ of rows, roll your own with `lr-select`
+  or `lr-combobox` instead.
+- arrow-key navigation is vertical-only (Home/End/ArrowUp/ArrowDown); there is no
+  ArrowLeft/ArrowRight remap under RTL, since there is no horizontal axis to remap.

package/llms/components/lr-option.md

@@ -21,7 +21,7 @@ shared `FormAssociated` mixin — see gotchas).
 
 **Properties:**
 - `multiple: boolean = false` (reflected)
-- `size: 'xs' | 's' | 'm' | 'l' | 'xl' = 'm'` (reflected — same scale as `lr-select`'s `size`;
+- `size: '2xs' | 'xs' | 's' | 'm' | 'l' | 'xl' = 'm'` (reflected — same scale as `lr-select`'s `size`;
   also scales the "+N" overflow tag and decorative expand icon; `size="s"` shares its outer
   control height with `lr-input`, `lr-select`, and `lr-segmented` without part overrides)
 - `placeholder: string = ''`

package/llms/components/lr-phone-input.md

@@ -71,6 +71,9 @@ interface PhoneNumberAdapter {
   `@aceshooting/lyra-ui/components/media/flag/flag-peer.js` once; without that registration the
   trigger simply omits the image. The open popup list stays text-only — a native `<option>` cannot
   contain elements.
+- `size: '2xs' | 'xs' | 's' | 'm' | 'l' | 'xl' = 'm'` (reflected — same scale as `lr-input`'s
+  `size`; scales input padding, font size, and wrapper min-height; `size="s"` shares its outer
+  control height with `lr-input`, `lr-select`, and `lr-combobox` without part overrides)
 - `country: string` — current uppercase ISO alpha-2 selection; falls back to `defaultCountry`, then
   the first explicit/adapter country. Changing the country reparses the editable number.
 - `label: string = ''`, `hint: string = ''`, `errorText: string = ''` (attribute `error-text`) —
@@ -137,9 +140,13 @@ such as a consumer-owned `<lr-flag>`; no flag package is imported automatically)
 `flags`), `country-code` (selected alpha-2 code, `data-placeholder` when no country exists),
 `expand-icon`, `calling-code`, `input`, `hint`, `error`.
 
-**Themeable custom properties:** shared tokens only. The phone-number input and calling code are
-deliberately `dir="ltr"`/isolated because telephone numbers are algorithmic content; surrounding
-form chrome and the country selector inherit LTR/RTL and use logical spacing/borders.
+**Themeable custom properties:** `--lr-phone-input-padding-block`, `--lr-phone-input-font-size`,
+and `--lr-phone-input-control-min-height` (each scaled by `size`), plus `--lr-phone-input-control-height`
+to pin an exact input-wrapper height (both floors and caps it — use it for pixel-matching an
+`<lr-input>` or `<lr-select>` in the same toolbar row; undeclared by default, leaving the min height
+as a floor only). The phone-number input and calling code are deliberately `dir="ltr"`/isolated
+because telephone numbers are algorithmic content; surrounding form chrome and the country selector
+inherit LTR/RTL and use logical spacing/borders.
 
 **Optional peer deps:** `libphonenumber-js` is declared optional but never imported by Lyra itself.
 For full national parsing/formatting, install it in the consuming app and pass it through the

package/llms/components/lr-reorder-item.md

@@ -0,0 +1,81 @@
+<!-- GENERATED by scripts/build-llms.mjs from llms/layout.md — do not edit this file. -->
+
+# `lr-reorder-item`
+
+- **Import** `import '@aceshooting/lyra-ui/components/layout/reorder-list/reorder-item.js';` (registers the tag; side-effect import)
+- **Class** `LyraReorderItem`, also available unregistered from `@aceshooting/lyra-ui/components/layout/reorder-list/reorder-item.class.js`
+- **Family** `components/layout/` — see `llms/index.md` for its siblings
+- **Optional peers** none
+- **Documented with** `lr-reorder-list` (same section below)
+- **Library-wide behavior** (events, form association, `locale`/`strings`, tokens, TS types): `llms/shared.md`
+
+---
+
+## `lr-reorder-list` / `lr-reorder-item`
+
+A generic flat-list reorder primitive: per-row move-up/move-down buttons (always available), plus
+Ctrl/Cmd+ArrowUp/ArrowDown from focus anywhere inside a row — the same modifier convention
+`<lr-tree>`'s `reorderable` and `<lr-dashboard-grid>`'s `cells-draggable` already establish. Unlike
+`<lr-tree>`'s controlled `reorderable` mode, this list physically moves its own slotted
+`<lr-reorder-item>` light-DOM nodes itself (there is no `data` array prop to reconcile against),
+and emits `lr-reorder` with the full new order so the host can persist it without hand-rolling its
+own splice/resort logic.
+
+### `lr-reorder-list`
+
+**Properties:**
+- `label: string = ''` — accessible name for the internal `role="list"`; when empty, a host
+  `aria-label` is forwarded as a fallback.
+- `disabled: boolean = false` (reflected) — disables every item's move buttons and the Ctrl/Cmd+
+  Arrow shortcut, without mutating any item's own `disabled` attribute.
+
+**Events:** `lr-reorder` (`detail: { order: string[], fromIndex: number, toIndex: number }` — fired
+after every successful move; `order` is every current item's `value` (or its DOM-position-index
+fallback) in the new top-to-bottom order)
+
+**Slots:** default — `<lr-reorder-item>` elements.
+
+**CSS parts:** `base` — the internal `role="list"` wrapper.
+
+**Themeable custom properties:** `--lr-reorder-list-gap` (default `var(--lr-space-2xs)`) — gap
+between rows.
+
+```html
+<lr-reorder-list label="Form fields" @lr-reorder=${(e) => console.log(e.detail.order)}>
+  <lr-reorder-item value="name">Name</lr-reorder-item>
+  <lr-reorder-item value="email">Email</lr-reorder-item>
+  <lr-reorder-item value="phone">Phone</lr-reorder-item>
+</lr-reorder-list>
+```
+
+**Known gotchas:**
+- Boundary-disabled state (`atStart`/`atEnd`) and the `listDisabled` cascade are computed and
+  pushed onto each `<lr-reorder-item>` by this list, on every slot change and every move — an item
+  alone can't know its own position.
+- No pointer drag-and-drop; move-up/move-down buttons and the keyboard shortcut only.
+
+---
+
+### `lr-reorder-item`
+
+**Properties:**
+- `value?: string` — stable identifier included in the parent's `lr-reorder` order array; falls
+  back to this item's live DOM-position index when unset.
+- `disabled: boolean = false` (reflected) — disables this row's own move buttons only; does not
+  hide its slotted content.
+- `atStart: boolean = false`, `atEnd: boolean = false`, `listDisabled: boolean = false`
+  (attribute: false) — pushed down by the parent `<lr-reorder-list>`; normally set internally, not
+  by consumers.
+
+**Events:** `lr-move-request` (`detail: { direction: 'up' | 'down' }` — a move button was activated
+while not disabled; handled by the parent `<lr-reorder-list>`, which performs the actual move)
+
+**Slots:** default — arbitrary row content.
+
+**CSS parts:** `base` (row wrapper), `move-up-button`, `move-down-button`, `content` (default-slot
+wrapper).
+
+**Themeable custom properties:** `--lr-reorder-item-gap` (default `var(--lr-space-xs)`) — gap
+between the move buttons and the row content.
+
+---

package/llms/components/lr-reorder-list.md

@@ -0,0 +1,81 @@
+<!-- GENERATED by scripts/build-llms.mjs from llms/layout.md — do not edit this file. -->
+
+# `lr-reorder-list`
+
+- **Import** `import '@aceshooting/lyra-ui/components/layout/reorder-list/reorder-list.js';` (registers the tag; side-effect import)
+- **Class** `LyraReorderList`, also available unregistered from `@aceshooting/lyra-ui/components/layout/reorder-list/reorder-list.class.js`
+- **Family** `components/layout/` — see `llms/index.md` for its siblings
+- **Optional peers** none
+- **Documented with** `lr-reorder-item` (same section below)
+- **Library-wide behavior** (events, form association, `locale`/`strings`, tokens, TS types): `llms/shared.md`
+
+---
+
+## `lr-reorder-list` / `lr-reorder-item`
+
+A generic flat-list reorder primitive: per-row move-up/move-down buttons (always available), plus
+Ctrl/Cmd+ArrowUp/ArrowDown from focus anywhere inside a row — the same modifier convention
+`<lr-tree>`'s `reorderable` and `<lr-dashboard-grid>`'s `cells-draggable` already establish. Unlike
+`<lr-tree>`'s controlled `reorderable` mode, this list physically moves its own slotted
+`<lr-reorder-item>` light-DOM nodes itself (there is no `data` array prop to reconcile against),
+and emits `lr-reorder` with the full new order so the host can persist it without hand-rolling its
+own splice/resort logic.
+
+### `lr-reorder-list`
+
+**Properties:**
+- `label: string = ''` — accessible name for the internal `role="list"`; when empty, a host
+  `aria-label` is forwarded as a fallback.
+- `disabled: boolean = false` (reflected) — disables every item's move buttons and the Ctrl/Cmd+
+  Arrow shortcut, without mutating any item's own `disabled` attribute.
+
+**Events:** `lr-reorder` (`detail: { order: string[], fromIndex: number, toIndex: number }` — fired
+after every successful move; `order` is every current item's `value` (or its DOM-position-index
+fallback) in the new top-to-bottom order)
+
+**Slots:** default — `<lr-reorder-item>` elements.
+
+**CSS parts:** `base` — the internal `role="list"` wrapper.
+
+**Themeable custom properties:** `--lr-reorder-list-gap` (default `var(--lr-space-2xs)`) — gap
+between rows.
+
+```html
+<lr-reorder-list label="Form fields" @lr-reorder=${(e) => console.log(e.detail.order)}>
+  <lr-reorder-item value="name">Name</lr-reorder-item>
+  <lr-reorder-item value="email">Email</lr-reorder-item>
+  <lr-reorder-item value="phone">Phone</lr-reorder-item>
+</lr-reorder-list>
+```
+
+**Known gotchas:**
+- Boundary-disabled state (`atStart`/`atEnd`) and the `listDisabled` cascade are computed and
+  pushed onto each `<lr-reorder-item>` by this list, on every slot change and every move — an item
+  alone can't know its own position.
+- No pointer drag-and-drop; move-up/move-down buttons and the keyboard shortcut only.
+
+---
+
+### `lr-reorder-item`
+
+**Properties:**
+- `value?: string` — stable identifier included in the parent's `lr-reorder` order array; falls
+  back to this item's live DOM-position index when unset.
+- `disabled: boolean = false` (reflected) — disables this row's own move buttons only; does not
+  hide its slotted content.
+- `atStart: boolean = false`, `atEnd: boolean = false`, `listDisabled: boolean = false`
+  (attribute: false) — pushed down by the parent `<lr-reorder-list>`; normally set internally, not
+  by consumers.
+
+**Events:** `lr-move-request` (`detail: { direction: 'up' | 'down' }` — a move button was activated
+while not disabled; handled by the parent `<lr-reorder-list>`, which performs the actual move)
+
+**Slots:** default — arbitrary row content.
+
+**CSS parts:** `base` (row wrapper), `move-up-button`, `move-down-button`, `content` (default-slot
+wrapper).
+
+**Themeable custom properties:** `--lr-reorder-item-gap` (default `var(--lr-space-xs)`) — gap
+between the move buttons and the row content.
+
+---

package/llms/components/lr-select.md

@@ -45,8 +45,8 @@ exactly like the multi-option case, until the trigger is actually activated.
 - `errorText: string = ''` (attribute `error-text` — static error copy shown below the hint;
   overridden by slotted `error` content when provided)
 - `open: boolean = false` (reflected)
-- `size: 'xs'|'s'|'m'|'l'|'xl' = 'm'` (reflected — same scale as `lr-toast-item`'s `size`, for
-  compact toolbar placements that don't fit the default trigger height)
+- `size: '2xs'|'xs'|'s'|'m'|'l'|'xl' = 'm'` (reflected — same scale as `lr-input`/`lr-combobox`'s
+  `size`, for compact toolbar placements that don't fit the default trigger height)
 - `autoCommitSingleOption: boolean = false` (attribute `auto-commit-single-option`) — opts in to the
   single-option auto-commit behavior described above
 - `value: string` — a getter/setter; always a single string (no `multiple` mode)

package/llms/components/lr-swatch-picker.md

@@ -28,6 +28,9 @@ named colors, the shape apps otherwise hand-roll as a row of round accent-color
   `<lr-segmented>`'s `SegmentedItem.icon`.
 - `value: string | null = null` — the currently selected option's `value` (controlled); `null`
   leaves nothing selected while keeping the first swatch tabbable.
+- `size: '2xs' | 'xs' | 's' | 'm' | 'l' | 'xl' = 'm'` (reflected — scales the swatch hit-area and
+  fill diameter proportionally, hit-area floored at 24px; not pixel-matched to `lr-input`'s
+  row-height scale)
 - `label: string = ''` — accessible name copied to the internal `role="radiogroup"`; when empty, a
   host-level `aria-label` is used as a fallback.
 
@@ -37,11 +40,13 @@ changes via click or keyboard (re-selecting the current swatch is a no-op).
 **Slots:** none.
 
 **CSS parts:** `base` (the `role="radiogroup"` root), `swatch` (a single `role="radio"` color
-swatch's interactive hit target, floored at the shared `--lr-icon-button-size` tap size; the
-selected one is `[part='swatch'][aria-checked='true']`), `swatch-fill` (the compact
-`--lr-size-1-5rem` filled circle inside it, rendered when the option has no `icon`), `swatch-icon`
-(the option's `icon` shape, rendered in its place when it has one). Exactly one of
-`swatch-fill`/`swatch-icon` is mounted per swatch, so the two never coexist.
+swatch's interactive hit target, sized via `--lr-swatch-picker-hit-size` — defaults to
+`--lr-size-2-5rem`, swapped per `size` tier and floored at 24px; the selected one is
+`[part='swatch'][aria-checked='true']`), `swatch-fill` (the filled circle inside it, sized via
+`--lr-swatch-picker-fill-size` — defaults to `--lr-size-1-5rem`, also swapped per `size` tier —
+rendered when the option has no `icon`), `swatch-icon` (the option's `icon` shape, rendered in its
+place when it has one). Exactly one of `swatch-fill`/`swatch-icon` is mounted per swatch, so the
+two never coexist.
 
 **Themeable custom properties:** `--lr-swatch-picker-selected-color` (ring color around the
 selected swatch, defaults to `--lr-color-brand`, themeable independently of the focus ring),
@@ -52,10 +57,11 @@ shape), `--lr-swatch-picker-shine-duration` (default `0s`, a no-op; set a durati
 for a looping brighten-and-settle pulse on the selected swatch. It drives a separate
 `filter: brightness()` keyframe rather than `box-shadow`, so it composes with the blur token and
 works identically for a fill and an icon; disabled outright under `prefers-reduced-motion: reduce`,
-which also drops the hover/selection scale transition); plus
-shared tokens — `--lr-color-border`/`-brand`, `--lr-icon-button-size`, `--lr-space-xs`,
-`--lr-size-1-5rem`, `--lr-border-width-thin`/`-thick`, `--lr-radius`, `--lr-transition-fast`,
-`--lr-focus-ring-*`.
+which also drops the hover/selection scale transition), `--lr-swatch-picker-hit-size` (hit-area
+size, swapped per `size` tier), `--lr-swatch-picker-fill-size` (visible fill/icon diameter, swapped
+per `size` tier); plus shared tokens — `--lr-color-border`/`-brand`, `--lr-space-xs`,
+`--lr-border-width-thin`/`-thick`, `--lr-radius`, `--lr-transition-fast`, `--lr-focus-ring-*`,
+and the per-tier `--lr-size-*` tokens.
 
 **Optional peer deps:** none.
 

package/llms/components/lr-thread-list.md

@@ -66,8 +66,11 @@ appends host-supplied content (re-invoked per row on every render, e.g. a `lr-me
 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`.
 `renderLeading?: (thread: ChatThread) => TemplateResult` (attribute: false) — renders non-interactive
-leading content in each virtualized row. `renderMeta?: (thread: ChatThread) => TemplateResult`
-(attribute: false) — appends structured metadata in the row's meta region.
+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.
 `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
@@ -100,9 +103,10 @@ header row and the pinned copy alike, and the band itself is where a shadow or b
 belongs), `row` (all exported across the internal `lr-virtual-list` shadow
 boundary), `row-wrapper` (the wrapper around `wrapRow` output, only present when `wrapRow` is set;
 row-only — group headers are never passed through `wrapRow`, so they never carry it), and
-`row-leading`/`row-content`/`row-meta`/`row-actions` (the library-owned wrappers around
+`row-leading`/`row-excerpt`/`row-content`/`row-meta`/`row-actions` (the library-owned wrappers around
 their corresponding render-hook output; inherited fonts, layout values, and theme custom properties
-reach callback-rendered descendants through these parts).
+reach callback-rendered descendants through these parts). `row-excerpt` wraps `renderExcerpt`
+output, which is slotted into the row item's own `excerpt` slot.
 
 Data mode additionally forwards each row `<lr-conversation-item>`'s own parts under a `row-item-`
 prefix: `row-item-base`, `row-item-option`, `row-item-leading`, `row-item-content`,
@@ -110,8 +114,9 @@ prefix: `row-item-base`, `row-item-option`, `row-item-leading`, `row-item-conten
 `row-item-meta`, `row-item-timestamp`, `row-item-actions`.
 
 **Keep the two prefixes straight — they are different surfaces.** The `row-*` parts wrap *this*
-component's own render-callback output (`wrapRow`, `renderLeading`, `renderRowContent`,
-`renderMeta`, `renderActions`); the `row-item-*` parts are the row item's *internals*. Row density
+component's own render-callback output (`wrapRow`, `renderLeading`, `renderExcerpt`,
+`renderRowContent`, `renderMeta`, `renderActions`); the `row-item-*` parts are the row item's
+*internals*. Row density
 in particular lives in `row-item-base`'s padding and `row-item-title`'s font size, so
 `::part(row-item-base)` is the supported way to build a dense sidebar.
 

package/llms/components/lr-time-range.md

@@ -24,6 +24,10 @@ consumer-facing `disabled` property/attribute itself.
 - `start: number = 0`
 - `end: number = 100`
 - `step: number = 1`
+- `size: '2xs' | 'xs' | 's' | 'm' | 'l' | 'xl' = 'm'` (reflected) — visual size; proportionally
+  scales the handle, track, and preset buttons via a single `--lr-time-range-size-scale` multiplier
+  (not pixel-matched to `lr-input`'s row-height scale — this component's own dimensions aren't on
+  that ladder); the drag hit-area never shrinks below 24px (WCAG 2.5.8)
 - `disabled: boolean = false` (reflected)
 - `startLabel: string = 'Range start'` (attribute `start-label`) — `aria-label` for the start handle
 - `endLabel: string = 'Range end'` (attribute `end-label`) — `aria-label` for the end handle
@@ -53,6 +57,10 @@ palette: `--lr-time-range-preset-active-bg` (falls back to `--lr-color-brand`),
 `--lr-time-range-preset-active-color` (falls back to `--lr-color-on-brand`). Unset, each resolves
 to exactly the token the rule used before they existed, so the default rendering is unchanged.
 
+One additional component-local property, `--lr-time-range-size-scale` (unitless multiplier,
+default 1, automatically set based on the `size` property), scales the handle, track, and preset
+button dimensions proportionally — unset, it defaults to 1 (size='m', no scaling).
+
 They exist because the active preset is marked with an attribute on a part, and
 `::part(preset-button)[data-active]` is **invalid CSS** — an attribute selector cannot follow
 `::part()`. Without these, recoloring just the active preset meant hijacking the shared

package/llms/components/lr-token-input.md

@@ -17,8 +17,11 @@ the last token. `value` is a `string[]` and repeated values are submitted under
 
 **Properties:** `value`, `label`, `hint`, `errorText` (`error-text`), `placeholder`, `name`,
 `required`, `disabled`, `accessibleLabel` (attribute `aria-label` — forwarded to the internal text
-input), `allowDuplicates` (`allow-duplicates`, default `false`), `editable` (reflected, default
-`false` — see below), and `delimiter: string | null` (default `','` — see below).
+input), `size: '2xs' | 'xs' | 's' | 'm' | 'l' | 'xl' = 'm'` (reflected — same scale as `lr-input`'s
+`size`, scaling the input-wrapper's row height and text size across six tiers; the remove button's
+hit area stays fixed at `40px` across all sizes), `allowDuplicates` (`allow-duplicates`, default
+`false`), `editable` (reflected, default `false` — see below), and `delimiter: string | null` (default
+`','` — see below).
 **Slots:** `label`, `hint`, `error`.
 **Events:** `input`, `change`, `lr-add` (`detail: { value }`), `lr-remove`
 (`detail: { value, index }`), and `lr-token-edit`
@@ -51,8 +54,13 @@ does not work** — that is the four-character string `null`. Use `delimiter="no
 (both of which the attribute converter maps to `null`), or a property binding
 (`.delimiter=${null}`). Removing the attribute restores the `,` default.
 
-**Themeable custom properties:** `--lr-token-input-input-inline-size` (the editable input's
-`flex-basis` inside the wrapped token row; undeclared by default, falling back inline to
-`--lr-size-8rem`), `--lr-token-input-min-input-inline-size` (default `--lr-size-4rem`, the floor
-that input keeps once tokens have consumed the row), and `--lr-token-input-editor-inline-size`
+**Themeable custom properties:** `--lr-token-input-padding` (the input-wrapper padding, scaled by
+`size`), `--lr-token-input-font-size` (the input-wrapper and token font size, scaled by `size`),
+`--lr-token-input-control-min-height` (the input-wrapper's block-size floor, scaled by `size`),
+`--lr-token-input-control-height` (exact input-wrapper height — undeclared by default, leaving the
+`--lr-token-input-control-min-height` floor only; set it to a length to both floor and cap the row,
+e.g. to pixel-match a sibling field in the same toolbar row), `--lr-token-input-input-inline-size`
+(the editable input's `flex-basis` inside the wrapped token row; undeclared by default, falling back
+inline to `--lr-size-8rem`), `--lr-token-input-min-input-inline-size` (default `--lr-size-4rem`, the
+floor that input keeps once tokens have consumed the row), and `--lr-token-input-editor-inline-size`
 (default `--lr-size-6rem`, the inline size of the inline token editor opened by `editable`).