npm - @aceshooting/lyra-ui - Versions diffs - 5.2.0 → 6.1.0 - Mend

@aceshooting/lyra-ui 5.2.0 → 6.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (853) hide show

package/llms-full.txt CHANGED Viewed

@@ -7,7 +7,7 @@ Agent UI. Selected components retain documented Web Awesome-compatible public na
 prefix to make migration easier, but Lyra has its own implementation, design tokens, localization
 runtime, RTL behavior, and release surface. It has no runtime dependency on either project.
-**This file is the whole catalog concatenated — 249 components, several hundred thousand tokens.**
+**This file is the whole catalog concatenated — 251 components, several hundred thousand tokens.**
 Read it end to end only if you genuinely need everything. Otherwise:
 | To… | Read |
@@ -31,9 +31,9 @@ and costs a few hundred tokens instead of the whole catalog. `llms/index.md` map
 family and entry point.
 - **Foundation** — base class, form association, events, i18n, theming, TypeScript, frameworks, SSR, packaging (`llms/shared.md`)
-- **Form controls & inputs** — 25 tags in `components/forms/`
-- **Data display, dashboards & flow canvas** — 25 tags in `components/data/`
-- **Layout, navigation & structure** — 28 tags in `components/layout/`
+- **Form controls & inputs** — 26 tags in `components/forms/`
+- **Data display, dashboards & flow canvas** — 24 tags in `components/data/`
+- **Layout, navigation & structure** — 30 tags in `components/layout/`
 - **Overlays, status & feedback** — 19 tags in `components/overlays/`
 - **Utilities, formatting & observers** — 19 tags in `components/utility/`
 - **Media, files & maps** — 18 tags in `components/media/`
@@ -58,7 +58,7 @@ import '@aceshooting/lyra-ui/components/forms/combobox/combobox.js'; // register
 import '@aceshooting/lyra-ui/components/data/table/table.js';        // registers <lr-table>
 ```
-`llms/index.md` lists the exact path for all 249 tags. A wrong or missing family segment is a hard
+`llms/index.md` lists the exact path for all 251 tags. A wrong or missing family segment is a hard
 module-resolution failure, not a silent no-op — `exports` maps `./components/*` straight onto
 `./dist/components/*`.
@@ -266,12 +266,21 @@ setLyraLocale('fr'); // …or just set <html lang="fr"> and let components inher
 ```
 Exported from the package root: `registerLyraLocale`, `setLyraLocale`, `getLyraLocale`,
-`resolveLyraLocale`, `resolveLyraDirection`, `resolveLyraString`, `LYRA_DEFAULT_STRINGS`, and the
-types `LyraLocaleStrings` / `LyraMessageKey`. **`LYRA_DEFAULT_STRINGS` is the authoritative key list**
-(996 keys, matching the `LyraMessageKey` union) — read it to find the key to override rather than
+`getRegisteredLyraLocales`, `subscribeLyraLocaleRegistry`, `resolveLyraLocale`,
+`resolveLyraDirection`, `resolveLyraString`, `LYRA_DEFAULT_STRINGS`, and the types
+`LyraLocaleStrings` / `LyraMessageKey`. **`LYRA_DEFAULT_STRINGS` is the authoritative key list**
+(1005 keys, matching the `LyraMessageKey` union) — read it to find the key to override rather than
 guessing one. Lookup falls back exact locale → base language → English. Date, number, byte,
 relative-time and calendar output goes through `Intl`.
+`getRegisteredLyraLocales(): string[]` lists every locale with strings registered via
+`registerLyraLocale()`, plus `'en'` (always available through the built-in English fallback),
+sorted and deduped. `subscribeLyraLocaleRegistry(listener: () => void): () => void` fires whenever
+`registerLyraLocale()` registers *any* locale — including one that isn't the currently active
+locale — unlike the page-level locale-change subscription every component already uses
+internally, which only fires for the active locale's own string changes. `<lr-locale-picker>` is
+the built-in consumer of both; see `llms/components/lr-locale-picker.md`.
 Gotcha: `localize()`'s optional second argument is a fallback string. Passing a defined literal there
 silently defeats a registered catalog — omit it, or pass `undefined`.
@@ -504,7 +513,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 = ''`
@@ -615,7 +624,10 @@ indicator from `maxRender`), `error`, `hint`
 **Themeable custom properties:** `--lr-combobox-trigger-padding`,
 `--lr-combobox-trigger-min-height`, `--lr-combobox-font-size`, `--lr-combobox-tag-padding`,
 `--lr-combobox-tag-font-size`, and `--lr-combobox-expand-size` (the decorative icon box; each
-standard size supplies an aligned default), plus shared tokens.
+standard size supplies an aligned default), plus shared tokens. `--lr-combobox-gap` (default
+`--lr-space-xs`, the gap inside `[part='combobox']`) and `--lr-combobox-radius` (default
+`--lr-radius`, its corner radius) are both retunable without a `::part(combobox)` rule but, unlike
+the properties above, do not vary by `size` — the same `--lr-button-gap`/`-radius` pattern.
 `--lr-combobox-option-active-bg` (default `var(--lr-color-brand-quiet)`) recolors the background of
 a hovered or keyboard-active `[part='option']` row — the same per-component indirection
@@ -748,8 +760,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)
@@ -782,7 +794,10 @@ presentational `<div>`, not a `role="group"`; options with an empty `group` get
 **Themeable custom properties:** `--lr-select-trigger-padding`, `--lr-select-trigger-min-height`,
 `--lr-select-font-size`, `--lr-select-expand-size` — all four auto-swapped per `size` (`xs`…`xl`), the same pattern
-`lr-toast-item`'s `--lr-toast-padding`/`--lr-toast-font-size` use.
+`lr-toast-item`'s `--lr-toast-padding`/`--lr-toast-font-size` use. `--lr-select-gap` (default
+`--lr-space-xs`, the gap inside `[part='trigger']`) and `--lr-select-radius` (default `--lr-radius`,
+its corner radius) are both retunable without a `::part(trigger)` rule but, unlike the four above,
+do not vary by `size` — the same `--lr-button-gap`/`-radius` pattern.
 `--lr-select-trigger-min-height` is live at **every** tier, the default `m` included, where it is
 `2.5rem` — byte-identical to `lr-input`'s and `lr-combobox`'s own `m` floor, so the three controls
@@ -868,6 +883,10 @@ Inline month-grid calendar, not form-associated (used standalone or embedded ins
 - `disablePast: boolean = false` (attribute `disable-past`)
 - `disableFuture: boolean = false` (attribute `disable-future`)
 - `withOutsideDays: boolean = false` (attribute `with-outside-days`)
+- `size: '2xs' | 'xs' | 's' | 'm' | 'l' | 'xl' = 'm'` (reflected) — scales calendar cell density
+  proportionally; unlike `lr-input`'s row-height scale (text containers), this scales cell density
+  itself (fewer/more days per visual unit). Month title, weekday labels, and nav buttons stay fixed
+  across tiers.
 - `previousLabel: string = 'Previous month'` (attribute `previous-label` — accessible label for the
   previous-month nav button; override for a non-English `locale`)
 - `nextLabel: string = 'Next month'` (attribute `next-label` — accessible label for the next-month
@@ -889,7 +908,7 @@ mode only)
 `day-range-end`, `day-range-inner`, `day-placeholder`
 **Themeable custom properties:** `--lr-cell-size` (default `2.25rem`, controls day-cell/grid-column
-size).
+size; auto-scaled per `size` tier — `2xs`/`xs`/`s`/`l`/`xl`; `m` keeps the `:host` default).
 **Optional peer deps:** none.
@@ -1219,7 +1238,10 @@ and the per-`size`
 `min-block-size` floors `--lr-button-size-2xs` (`1.25rem`), `--lr-button-size-xs` (`1.5rem`),
 `--lr-button-size-s` (`1.75rem`), `--lr-button-size-m` (`2rem`), `--lr-button-size-l` (`2.5rem`),
 `--lr-button-size-xl` (`3rem`) — each read only by its own `size` tier, and all ignored by
-`appearance="link"`.
+`appearance="link"`. `--lr-button-gap` (default `--lr-space-2xs`, the gap between the icon/label
+and any slotted content) and `--lr-button-radius` (default `--lr-radius`, the corner radius) are
+both retunable without a `::part(base)` rule but — unlike the four size knobs below — do not vary
+by `size` tier; `appearance="link"` ignores `--lr-button-radius` (it renders with zero radius).
 **Retuning one `size` tier's geometry, without a `::part(base)` rule.** Four more properties carry
 the active tier's geometry, and every `:host([size='…'])` rule does nothing but re-assign them — no
@@ -1292,11 +1314,21 @@ 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. The `[part="fallback"]` svg carries the same `fill="none"
+stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"` defaults
+`<lr-icon>`'s own wrapper svg does, so bare stroke-style geometry (the common lucide/feather/tabler
+path-data shape, which carries no fill/stroke of its own) renders outlined instead of as a solid
+shape; an explicit `fill`/`stroke`/etc. already present on the slotted node still wins for that
+node. 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
@@ -1304,7 +1336,10 @@ than it grows the button and keeps its own aspect ratio; a small glyph pads out
 library-wide token (declared on `:root` by the token layer, and the shared minimum tappable size
 that several other components size their icon-only controls against), so overriding
 `--lr-theme-icon-button-size` globally resizes all of them together. Keep the resolved value at or
-above 24px — see `llms/shared.md`.
+above 24px — see `llms/shared.md`. `--lr-icon-button-radius` (default `--lr-radius`) is the
+`[part='button']` corner radius, retunable without a `::part(button)` rule — the same
+`--lr-button-radius` pattern; `lr-icon-button` has no `size` tiers, so there is no per-tier gap
+counterpart to it.
 ## `lr-input`
@@ -1371,7 +1406,10 @@ input and built-in actions).
 `--lr-input-control-height` pins an **exact** outer control-row height (both floors and caps it) —
 for example to pixel-match an `<lr-select>` or `<lr-combobox>` in the same toolbar row. It is
 undeclared by default, leaving `--lr-input-control-min-height` as a floor only and the row free to
-grow.
+grow. `--lr-input-gap` (default `--lr-space-xs`, the gap inside `[part='input-wrapper']`) and
+`--lr-input-radius` (default `--lr-radius`, its corner radius) are both retunable without a
+`::part(input-wrapper)` rule but, unlike the four properties above, do not vary by `size` — the same
+`--lr-button-gap`/`-radius` pattern; `lr-number-input`/`lr-time-input` inherit both unchanged.
 ### Exact-height hatches — the one rule that applies to all of them
@@ -1436,8 +1474,10 @@ alias ever renders.
 **Themeable custom properties:** inherited from `lr-input`, identical in meaning —
 `--lr-input-control-min-height`, `--lr-input-control-height`, `--lr-input-padding-block`,
-`--lr-input-padding-inline` and `--lr-input-font-size` (all but `--lr-input-control-height` swap
-per `size`; that one stays undeclared until you pin an exact row height).
+`--lr-input-padding-inline`, `--lr-input-font-size`, `--lr-input-gap`, and `--lr-input-radius` (all
+but `--lr-input-control-height` swap per `size`; that one stays undeclared until you pin an exact
+row height, and `--lr-input-gap`/`--lr-input-radius` — like `--lr-button-gap`/`-radius` — never
+vary by `size` at all).
 **Known gotchas:**
 - `clearable`/`clear-button`/`lr-clear` are inert: the clear action only renders for
@@ -1480,8 +1520,10 @@ native input's own constraint validation reports `rangeUnderflow`/`rangeOverflow
 **Themeable custom properties:** inherited from `lr-input`, identical in meaning —
 `--lr-input-control-min-height`, `--lr-input-control-height`, `--lr-input-padding-block`,
-`--lr-input-padding-inline` and `--lr-input-font-size` (all but `--lr-input-control-height` swap
-per `size`; that one stays undeclared until you pin an exact row height).
+`--lr-input-padding-inline`, `--lr-input-font-size`, `--lr-input-gap`, and `--lr-input-radius` (all
+but `--lr-input-control-height` swap per `size`; that one stays undeclared until you pin an exact
+row height, and `--lr-input-gap`/`--lr-input-radius` — like `--lr-button-gap`/`-radius` — never
+vary by `size` at all).
 **Known gotchas:** the same two as `lr-number-input` — the inert clear/password surface, and `type`
 only being re-forced on connect. The native `type="time"` UI (spinners, AM/PM, picker) is the
@@ -1550,6 +1592,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`) —
@@ -1616,9 +1661,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
@@ -1688,6 +1737,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
@@ -1717,6 +1770,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
@@ -1788,6 +1845,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.
@@ -1797,11 +1857,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),
@@ -1812,10 +1874,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.
@@ -2173,11 +2236,15 @@ 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`
+(`detail: { value, index }` — cancelable; `preventDefault()` keeps the token in `value`
+unchanged), and `lr-token-edit`
 (`detail: { value, previousValue, index }` — an existing token was edited in place and committed).
 **CSS parts:** `form-control`, `form-control-label`, `input-wrapper`, `token`, `token-label` (the
 token's text, doubling as the roving-focus edit trigger — rendered only while `editable`),
@@ -2207,10 +2274,15 @@ 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`).
 ## `lr-code-editor`
@@ -2278,12 +2350,18 @@ spaces — the Tab key keeps inserting `tabSize` spaces in that case.
 A form-associated native color picker with label, hint, and error chrome. **Properties:** the shared
 form properties `name`, `value`, `disabled`, and `required`, plus `label`, `hint`, `errorText`
-(`error-text`), and `accessibleLabel` (`aria-label`). **Slots:** `label`, `hint`, `error`. **Events:**
+(`error-text`), `accessibleLabel` (`aria-label`), and `size: '2xs' | 'xs' | 's' | 'm' | 'l' | 'xl' = 'm'`
+(reflected — same scale as `lr-input`'s `size`, for compact swatch rendering at every density tier).
+**Slots:** `label`, `hint`, `error`. **Events:**
 composed `input` and `change`, `lr-change` with `{ value }`, and `focus`/`blur` (re-dispatched from
 the internal `<input>`'s own `focus`/`blur`, bubbling and composed unlike the native events). **CSS
 parts:** `form-control`, `form-control-label` (the label; `label` is an alias kept for back-compat),
 `input`, `hint`, `error`.
+**Themeable custom properties:** `--lr-color-picker-swatch-size` — the swatch's inline and block size,
+auto-swapped per `size` tier (default `'m'` reads `2.5rem`, `'2xs'` reads `1.25rem`, etc.), matching
+the size ladder `lr-input` uses.
 ## `lr-emoji-picker`
 A searchable, keyboard-navigable, form-associated emoji picker. `groups` is fully consumer-suppliable
@@ -2310,7 +2388,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`.
@@ -2336,10 +2415,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
@@ -2356,8 +2438,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
@@ -2399,6 +2482,85 @@ dim through `--lr-opacity-disabled`, the same library-wide token every other dis
 reads — so retuning `--lr-theme-opacity-disabled` keeps this form's disabled state consistent with
 the rest of the UI instead of needing a `::part()` rule here.
+## `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; country?: 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. `country` (ISO 3166-1 alpha-2) overrides a row's derived flag — e.g.
+  showing Lebanon's flag for an `'ar'` row instead of the library's default Saudi Arabia mapping;
+  only available on the `{tag,label,country}` object form, not the bare `string[]` form.
+- `showFlags: boolean = true` — each row's leading `<lr-flag language={tag} variant="compact">`
+  (or `<lr-flag country={country} variant="compact">` when the entry sets `country`); `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.
 # Data display, dashboards & flow canvas (`components/data/`)
 ## `lr-sparkline`
@@ -3645,7 +3807,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.
@@ -3966,50 +4134,6 @@ numbers, so the two circular-meter components in the library share one visual sc
 ---
-## `lr-data-grid`
-Keyboard-navigable data grid with typed `columns` and `rows`, sortable headers, roving cell focus,
-loading/empty states, and responsive horizontal overflow.
-**Properties:**
-- `columns: DataGridColumn<T>[] = []` (attribute: false) — `{ key, label, width?, sortable?,
-  value? }`; `width` becomes the header cell's `inline-size`, `value(row)` overrides the default
-  `row[key]` lookup
-- `rows: T[] = []` (attribute: false)
-- `rowKey: (row: T, index: number) => string | number = (_row, index) => index` (attribute: false)
-- `selectedKey: string | number | null = null` (attribute: false) — compared against `rowKey(row, i)`
-  to set `[part='row'][data-selected]` and `aria-selected`
-- `sortKey: string = ''`, `sortDirection: 'ascending' | 'descending' = 'ascending'`
-  (attribute: false) — the grid updates both on header activation and emits `lr-sort`, but never
-  reorders `rows`; sorting stays the consumer's job
-- `loading: boolean = false` (reflected) — replaces the body with a localized "loading" row
-- `emptyText: string = ''` (attribute `empty-text`) — empty-state text; falls back to the localized
-  `noData`
-- `accessibleLabel: string = ''` (attribute `aria-label`) — names the `role="grid"` table; falls back
-  to the localized `dataGridLabel`
-**Keyboard:** exactly one cell is tabbable. Arrows move the roving focus (Left/Right are swapped
-under RTL), Home/End jump to the first/last column of the current row, Enter/Space activate the row.
-The focus position is re-clamped whenever `rows`/`columns` shrink, so the grid can't lose its tab stop.
-**Events:** `lr-row-click` (`detail: { row }`, click or Enter/Space), `lr-selection-change`
-(`detail: { row }`, emitted alongside it after `selectedKey` updates), `lr-cell-focus`
-(`detail: { row, column }`, `column` is the column `key`), `lr-sort` (`detail: { key, direction }`,
-`sortable` columns only; re-activating the active column flips `direction`).
-**Slots:** none.
-**CSS parts:** `viewport` (the scrolling bordered wrapper), `grid` (the `<table role="grid">`),
-`header` (each sticky `<th>`), `row`, `cell`, `empty` (the loading / no-data cell).
-**Themeable custom properties:** `--lr-data-grid-row-selected-bg` (default
-`var(--lr-color-brand-quiet)`) — the background of the selected row's cells. It is an inline `var()`
-fallback at its point of use rather than a `:host` declaration, so it can be set on the element *or
-any ancestor*. It exists because Shadow Parts forbids an attribute selector after `::part()` —
-`::part(row)[aria-selected='true']` is invalid CSS — leaving the library-wide
-`--lr-color-brand-quiet` token as the only prior lever, which repaints every other surface reading
-it. `lr-table` exposes the equivalent knob as `--lr-table-row-selected-bg`.
 ## `lr-calendar`
 Responsive month calendar with event markers and an agenda view.
@@ -4835,14 +4959,18 @@ each falls back to the token its rule used before. Otherwise shared tokens —
 ## `lr-control-group`
-Responsive semantic grouping for mixed controls and actions. It keeps slotted children in a
-wrapping inline-flex row, centers children with different intrinsic heights, and switches to a
-full-width allocation in narrow containers. Use it for dashboard toolbars that combine segmented
-controls, selects, buttons, and other interactive elements.
+Semantic grouping for mixed controls and actions. It keeps slotted children in a wrapping
+inline-flex row and centers children with different intrinsic heights. Use it for dashboard
+toolbars that combine segmented controls, selects, buttons, and other interactive elements.
 **Properties:**
 - `label: string = ''` — accessible name for the internal `role="group"`; when empty, a host
   `aria-label` is forwarded as a fallback.
+- `responsive: boolean = false` (reflected) — opts into a `@container` narrow-allocation breakpoint
+  (switches to a full-width allocation below `20rem`) by making the host a CSS size-query
+  container. Left unset, the host is `container-type: normal`, since `container-type: inline-size`
+  unconditionally would collapse the group to 0 inline size whenever it sits as an ordinary
+  (`flex-basis: auto`) child of a shrink-to-fit flex row — this component's own primary use case.
 **Events:** none.
@@ -4865,6 +4993,90 @@ between grouped controls; shared spacing and layout tokens apply as well.
 - This is a layout and semantics primitive; it does not coordinate child values or emit a group
   change event.
 - Children wrap according to the group's own allocated inline size, not the viewport width.
+- The `@container` narrow-allocation breakpoint only applies when `responsive` is set. Setting
+  `responsive` while this group also sits as a shrink-to-fit flex child re-introduces the 0-width
+  collapse this default is designed to avoid — only opt in when the group's own size comes from
+  somewhere else (a percentage width, a grid track, a block-level parent).
+---
+## `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` is cancelable — a listener calling `preventDefault()` holds
+the move open (mirroring `lr-confirm-bar`'s cancelable approve/deny pattern) until the host calls
+`finalizePendingMove()`/`revertPendingMove()`.
+### `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 }`,
+cancelable — fired before a move is applied; `order` is every item's `value` (or its
+DOM-position-index fallback) in the order the move WOULD produce. Uncanceled, the move applies
+synchronously right after. `preventDefault()` holds the move instead: the affected item reflects
+`pending`, and no other move can start until the host resolves it — see **Methods** below.
+**Methods:** `finalizePendingMove()` — applies a move held via `preventDefault()`.
+`revertPendingMove()` — discards a held move, restoring the prior order. Both no-op when nothing
+is pending.
+**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.
+- `pending: boolean = false` (reflected) — set while this item's move is held via the parent's
+  `lr-reorder` `preventDefault()`. Informational only (doesn't itself disable the item's buttons);
+  style via `lr-reorder-item[pending]`. Pushed down by the parent; normally set internally.
+**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.
 ---
@@ -5087,7 +5299,11 @@ content clickable, and it shows nothing while the viewport is above the first gr
 **Themeable custom properties:** `--lr-virtual-list-height` (default `24rem` — the host's bounded
 scroll extent; component-specific since a virtualized list is meaningless without a sized viewport),
 plus shared `--lr-focus-ring-width/-color/-offset` (inward-offset ring on `[part="base"]`, negative
-so it isn't clipped by the container's own `overflow: auto`).
+so it isn't clipped by the container's own `overflow: auto`). `[part="base"]` also carries a
+mouse-hover outline — a subtler preview of that same `:focus-visible` ring, shown because the part
+always carries `tabindex="0"` and is a real keyboard-navigable target — tinted via
+`--lr-virtual-list-hover-outline-color` (default `var(--lr-color-border-strong)`); set it to
+`transparent` to opt out of the hover treatment entirely.
 **Optional peer deps:** none.
@@ -5255,9 +5471,12 @@ role, matching `<lr-date-input>`'s `accessibleLabel`.
 **Events:** `lr-mode-change` (`detail: AppRailModeChangeDetail` = `{ mode: AppRailMode }`; the
 effective mode changed, whether from a breakpoint crossing or an explicit `mode` assignment — not
 fired for a redundant reassignment to the mode already in effect), `lr-toggle`
-(`detail: AppRailToggleDetail` = `{ open: boolean }`; the mobile overlay opened or closed — via the
-built-in toggle button, Escape, a backdrop click, a nav-item click while open, or a breakpoint/forced
-mode change leaving `'mobile'` while open — not fired when a consumer sets `open` directly),
+(`detail: AppRailToggleDetail` = `{ open: boolean }`; the mobile overlay is opening or closing — via
+the built-in toggle button, Escape, a backdrop click, a nav-item click while open, or a
+breakpoint/forced mode change leaving `'mobile'` while open — not fired when a consumer sets `open`
+directly. Cancelable for every trigger except the forced mode-change close, which always applies —
+vetoing that one would leave `open` stuck `true` in a mode where it's meaningless; call
+`preventDefault()` to keep the overlay as it is for the other triggers),
 `lr-rail-resize` (`detail: AppRailResizeDetail` = `{ widthPx: number }`; the `resizable` rail's
 width changed via drag or keyboard stepping — not fired when a consumer sets `railWidthPx` directly).
@@ -5994,7 +6213,10 @@ false` (reflected — disables every gesture grid-wide), `accessibleLabel: strin
 **Themeable custom properties:** `--lr-dashboard-grid-columns`, `--lr-dashboard-grid-row-height`,
 and `--lr-dashboard-grid-gap` back the CSS Grid's `grid-template-columns`/`grid-auto-rows`/`gap`.
 The `columns`/`rowHeight`/`gap` properties write them inline on `[part='base']` on every render, so
-overriding them from a stylesheet has no effect — set the properties instead.
+overriding them from a stylesheet has no effect — set the properties instead. `--lr-dashboard-grid-cell-hover-outline-color`
+(default `var(--lr-color-border-strong)`) retints the mouse-hover outline on `[part='cell']` — a
+preview of its own `:focus-visible` ring, shown because every cell is a real focusable,
+draggable/resizable target; set it to `transparent` to opt out of the hover treatment entirely.
 ## `lr-drilldown-panel`
@@ -6468,7 +6690,7 @@ already follow.
 ### `lr-chip`
 **Properties:**
-- `size: '2xs' | 'xs' | 's' | 'm' | 'l' | 'xl' = 'm'` (reflected) — standard visual-density
+- `size: '3xs' | '2xs' | 'xs' | 's' | 'm' | 'l' | 'xl' = 'm'` (reflected) — standard visual-density
   scale for typography, padding, gap, and icon size; `m` preserves the original chip dimensions
 - `tone: 'neutral' | 'brand' | 'success' | 'warning' | 'danger' = 'neutral'` (reflected — tints the
   whole pill using a loud-color-on-quiet-tint convention; `neutral` has no dedicated token pair, so
@@ -6518,6 +6740,9 @@ back to `--lr-chip-bg`), the density quintet `--lr-chip-font-size`, `--lr-chip-p
 `:host([size])` rule, so setting one directly on the element overrides that step of the scale; the
 `m` defaults are `--lr-font-size-sm` / `--lr-size-0-25rem` / `--lr-space-s` / `--lr-space-xs` /
 `--lr-font-size-sm`), the height pair `--lr-chip-min-height` / `--lr-chip-height` (below),
+`--lr-chip-radius` (default `--lr-radius-pill`, the corner radius of both `[part='base']` and
+`[part='remove-button']` — retunable without a `::part()` rule, and unlike the density quintet
+above does not vary by `size`; the same `--lr-button-radius` pattern),
 plus shared tokens (`--lr-space-xs`, `--lr-space-s`,
 `--lr-color-brand`/`-brand-quiet`, `--lr-color-success`/`-success-quiet`,
 `--lr-color-warning`/`-warning-quiet`, `--lr-color-danger`/`-danger-quiet`,
@@ -6812,6 +7037,9 @@ color for text and border). Set one directly on the element for a tint outside t
 `var(--lr-space-s)`), and `--lr-badge-min-height` (default `var(--lr-size-1-25rem)`) — the density
 trio each `:host([size])` rule rewrites to that step's font size, inline padding, and minimum block
 size; the `m` defaults above exactly reproduce the pre-`size` fixed badge treatment.
+`--lr-badge-radius` (default `--lr-radius-pill`) is `[part='base']`'s corner radius, retunable
+without a `::part(base)` rule and, unlike the density trio, does not vary by `size` — the same
+`--lr-button-radius` pattern; `lr-tag` inherits it unchanged, the same as `size`.
 ## `lr-callout`
@@ -7933,11 +8161,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">
@@ -12609,8 +12841,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
@@ -12643,9 +12878,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`,
@@ -12653,8 +12889,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.
@@ -13651,17 +13888,26 @@ renders at the start of the action row, before Deny/Edit/Approve.
   `autoCorrect: string = 'off'` (attribute `autocorrect`), `autocomplete: string = 'off'`,
   `wrap: 'hard'|'soft'|'off' = 'soft'`, `inputMode: string = ''` (attribute `inputmode`),
   and `enterKeyHint: string = ''` (attribute `enterkeyhint`) — forwarded to the raw-JSON
-  `<textarea>` while editing; the defaults keep browser editing assistance from changing JSON text
+  `<textarea>` while editing; the defaults keep browser editing assistance from changing JSON text.
+  `pending: 'approve' | 'deny' | null = null` (reflected) — which decision is awaiting host
+  resolution while an `lr-approve`/`lr-deny` listener has called `preventDefault()` on the
+  now-cancelable event; the pending button shows `loading`, the other is `disabled` (Approve is
+  also still `disabled` while an in-progress edit is invalid JSON, independent of `pending`).
+  Escape/backdrop dismissal is suppressed while `pending` is set. Finalize by calling
+  `close('approve'|'deny')`, or clear `.pending` back to `null` to bounce back to the undecided
+  state; `pending` also resets to `null` every time the dialog re-opens.
 **Methods:** `close(reason: ToolApprovalDialogCloseReason = 'api'): void` — closes the dialog, emits
 `lr-close` with `reason`, and returns focus to whatever had it before the dialog opened; a no-op if
 already closed.
 **Events:** `lr-approve` (`detail: { args: unknown }` — the current, already-parsed arguments: the
-original `args` prop, or the user's edited-and-validated version if an edit was in progress; always
-followed by `lr-close` with reason `'approve'`), `lr-deny` (no detail — `this.emit('lr-deny')` is
-called with no second argument, so per the DOM spec's `CustomEventInit` default, `event.detail` is
-`null`, not `undefined`; always followed by `lr-close` with reason `'deny'`), `lr-close`
+original `args` prop, or the user's edited-and-validated version if an edit was in progress.
+Cancelable: a listener calling `preventDefault()` sets `pending` to `'approve'` instead of
+closing; otherwise always followed by `lr-close` with reason `'approve'`), `lr-deny` (no detail —
+`this.emit('lr-deny')` is called with no second argument, so per the DOM spec's `CustomEventInit`
+default, `event.detail` is `null`, not `undefined`. Cancelable, same `pending` mechanism, setting
+`pending` to `'deny'`; otherwise always followed by `lr-close` with reason `'deny'`), `lr-close`
 (`detail: ToolApprovalDialogCloseReason` — fired exactly once per dismissal, via Escape, a backdrop
 click, the Approve/Deny buttons, or a `close()` call)
@@ -13669,7 +13915,12 @@ click, the Approve/Deny buttons, or a `close()` call)
 rendered before the built-in Deny/Edit/Approve buttons.
 **CSS parts:** `backdrop`, `panel`, `header`, `tool-name`, `body`, `args-view`, `args-editor`, `error`,
-`footer`, `deny-button`, `edit-button`, `approve-button`
+`footer`, `deny-button`, `edit-button`, `approve-button`,
+`deny-button-base`, `deny-button-label`, `deny-button-start`, `deny-button-end`,
+`deny-button-spinner`, `approve-button-base`, `approve-button-label`, `approve-button-start`,
+`approve-button-end`, `approve-button-spinner` (`deny-button`/`approve-button` are each an
+`<lr-button>` host; these five per-button parts are re-exported from its own `lr-button` parts via
+`exportparts`; `edit-button` stays a plain `<button>`, unaffected by this).
 **Themeable custom properties:** `--lr-tool-approval-dialog-overlay-color` (default
 `rgb(0 0 0 / 0.5)` — the backdrop scrim color; component-specific since no shared overlay token
@@ -13731,6 +13982,16 @@ shared composed-tree focus traversal used by the other modal families.
   this a mobile browser (notably iOS Safari, which defaults textarea `autocapitalize` to
   `'sentences'`) could auto-capitalize or auto-correct key/value text as the user edits, silently
   corrupting the JSON.
+- `deny-button`/`approve-button` are `<lr-button>` hosts (`variant="neutral"`/`"brand"` — this
+  component has no `tone` property) — `--lr-button-*` theming reaches them directly. A consumer
+  previously styling `::part(deny-button)`/`::part(approve-button)` for
+  padding/border/font/`:hover`/`:focus-visible` must move that CSS onto the re-exported
+  `deny-button-base`/`approve-button-base` sub-parts instead. `edit-button` is unaffected and stays
+  a raw `<button>`.
+- An `lr-approve`/`lr-deny` listener can call `preventDefault()` to keep the decision open while
+  its own async work is in flight — see `pending` above. While `pending` is set, Escape/backdrop
+  dismissal is suppressed, so a consumer that never resolves the pending decision leaves the
+  dialog open until it clears `.pending` or calls `close()` directly itself.
 ---
@@ -14298,6 +14559,10 @@ narrow-allocation `@container` treatment is switched off — a compact bar is *e
 so stretching the buttons to fill would be exactly wrong. Re-chrome it through the
 `--lr-confirm-bar-compact-*` properties below. Everything else is unchanged: the event shapes, the
 focus-to-`[part="status"]`-before-unmount contract, and `role="group"` with its heading label.
+`pending: 'approved' | 'denied' | null = null` (reflected) — which decision is awaiting host
+resolution while an `lr-approve`/`lr-deny` listener has called `preventDefault()` on the
+now-cancelable event; the pending button shows `loading`, the other is `disabled`. Set `.decision`
+to finalize, or clear `.pending` back to `null` to bounce back to the undecided state.
 **Slots:** default — supplementary body content between the heading and the actions (e.g. a
 `lr-diff-view`). `footer` — extra content at the start of the action row.
@@ -14307,8 +14572,12 @@ focus-to-`[part="status"]`-before-unmount contract, and `role="group"` with its
 **CSS parts:** `base` (`role="group"`), `heading`/`tool-name`, `body`, `args` (the
 details/json-viewer wrapper, only rendered when `args` is defined), `footer`, `deny-button`,
-`approve-button` (named identically to the dialog's parts), `status` (the decided-state text, always
-present in the DOM as a focus landing spot).
+`approve-button` (each an `<lr-button>` host, named identically to the dialog's parts),
+`deny-button-base`, `deny-button-label`, `deny-button-start`, `deny-button-end`,
+`deny-button-spinner`, `approve-button-base`, `approve-button-label`, `approve-button-start`,
+`approve-button-end`, `approve-button-spinner` (re-exported from each button's own
+`lr-button` parts via `exportparts`), `status` (the decided-state text, always present in the DOM
+as a focus landing spot).
 **Themeable custom properties:** the `compact` presentation is deliberately chrome-less by default
 and re-chromed entirely through five properties, all scoped to `[part="base"]` while `compact`:
@@ -14325,8 +14594,15 @@ bar in this panel a hairline border" a one-rule change on the panel.
 - `[part="status"]` is always rendered and must never be given `display: none`. Deciding moves focus
   to it synchronously, before the Deny/Approve buttons unmount, so hiding it would drop focus to
   `<body>`. The shipped `:empty` rule on it has never matched, and that is load-bearing.
-- `[part="deny-button"]` and `[part="approve-button"]` are raw `<button>` elements, not composed
-  `lr-button`s, so `--lr-button-*` theming does not reach them. Style them through their parts.
+- `[part="deny-button"]`/`[part="approve-button"]` are `<lr-button>` hosts (`variant="neutral"`/
+  `"brand"`, `"danger"` under `tone="danger"`) — `--lr-button-*` theming reaches them directly. A
+  consumer previously styling `::part(deny-button)`/`::part(approve-button)` for
+  padding/border/font/`:hover`/`:focus-visible` must move that CSS onto the re-exported
+  `deny-button-base`/`approve-button-base` sub-parts instead — the outer part now resolves to the
+  `<lr-button>` host, where those declarations either do nothing or must be re-expressed through
+  `lr-button`'s own parts/custom properties.
+- An `lr-approve`/`lr-deny` listener can call `preventDefault()` to keep the decision open while
+  its own async work is in flight — see `pending` above.
 ```html
 <lr-tool-call-chip status="pending"></lr-tool-call-chip>
@@ -14335,6 +14611,18 @@ bar in this panel a hairline border" a one-rule change on the panel.
 ></lr-confirm-bar>
 ```
+An `lr-approve`/`lr-deny` listener that needs to await its own async work before finalizing calls
+`preventDefault()` and sets `.decision` (or clears `.pending`) once it resolves:
+```ts
+bar.addEventListener('lr-approve', (e) => {
+  e.preventDefault();
+  runApproval(e.detail.args)
+    .then(() => { bar.decision = 'approved'; })
+    .catch(() => { bar.pending = null; }); // bounce back, retry
+});
+```
 ## `lr-browser-frame`
 Presentational "agent computer" viewport: a screenshot/frame stream (or slotted live media), a
@@ -14594,7 +14882,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)
@@ -14625,7 +14913,7 @@ loses focus, since native focus neither bubbles nor crosses the shadow boundary.
 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:**
@@ -14633,10 +14921,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