@aceshooting/lyra-ui 5.2.0 → 6.1.0

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

@@ -17,11 +17,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`),
@@ -51,8 +55,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`).

package/llms/components/lr-tool-approval-dialog.md

@@ -47,17 +47,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)
 
@@ -65,7 +74,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
@@ -127,5 +141,15 @@ 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.
 
 ---

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

@@ -144,7 +144,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.
 

package/llms/index.md

@@ -2,7 +2,7 @@
 
 # Component index
 
-249 custom elements, grouped by the source family they live in.
+251 custom elements, grouped by the source family they live in.
 
 **Reading one component.** Its reference file path is derived from the tag — no search needed:
 `llms/components/<tag>.md` (e.g. `llms/components/lr-table.md`). Each is self-contained: import
@@ -18,7 +18,7 @@ get the class without registering the tag.
 `strings`, TypeScript, frameworks, SSR): `llms/shared.md`. Design tokens: `llms/tokens.md`.
 Optional peers: `llms/peers.md`. `wa-*`/`sl-*` renames: `llms/migration.md`.
 
-## Form controls & inputs — `components/forms/` (25)
+## Form controls & inputs — `components/forms/` (26)
 
 - `lr-combobox` · forms/combobox/combobox.js — a filterable single/multi select that combines a text input with a listbox.
 - `lr-option` · forms/combobox/option.js — a selectable option for `<lr-combobox>`.
@@ -45,8 +45,9 @@ Optional peers: `llms/peers.md`. `wa-*`/`sl-*` renames: `llms/migration.md`.
 - `lr-color-picker` · forms/color-picker/color-picker.js — a form-associated native color picker with label, hint and error chrome.
 - `lr-emoji-picker` · forms/emoji-picker/emoji-picker.js — a searchable, keyboard-navigable, form-associated emoji picker.
 - `lr-rubric-form` · forms/rubric-form/rubric-form.js — a configurable annotation rubric (LangSmith annotation-queue style): score, category, and freeform-comment keys with a submit-and-next fl...
+- `lr-locale-picker` · forms/locale-picker/locale-picker.js — a closed-list locale switcher over the library's own locale registry.
 
-## Data display, dashboards & flow canvas — `components/data/` (25)
+## Data display, dashboards & flow canvas — `components/data/` (24)
 
 - `lr-sparkline` · data/sparkline/sparkline.js — a zero-dependency inline SVG trend chart.
 - `lr-stat` · data/stat/stat.js — a KPI/stat card.
@@ -64,7 +65,6 @@ Optional peers: `llms/peers.md`. `wa-*`/`sl-*` renames: `llms/migration.md`.
 - `lr-flow-controls` · data/flow-controls/flow-controls.js — the canvas's button cluster: zoom in/out, fit, and interaction lock, so every flow surface ships the same affordances without hosts rebui...
 - `lr-flow-run-overlay` · data/flow-run-overlay/flow-run-overlay.js — execution-state presentation for a `lr-flow-canvas`: pushes a `FlowRunDecorations` map into the resolved canvas (the canvas itself render...
 - `lr-context-meter` · data/context-meter/context-meter.js — a segmented occupancy meter (bar or ring) for showing how a fixed capacity (a model's context window, a token budget, any consumable quot...
-- `lr-data-grid` · data/data-grid/data-grid.js — keyboard-navigable, responsive data grid with sortable columns.
 - `lr-calendar` · data/calendar/calendar.js — responsive month calendar with event markers and agenda mode.
 - `lr-timeline` · data/timeline/timeline.js — an ordered, connected sequence of past-event rows (an audit trail, an agent action history, a changelog) composed from `<lr-timeline-item...
 - `lr-timeline-item` · data/timeline/timeline-item.js — one marker + title + optional timestamp + optional description row inside `<lr-timeline>`'s default slot.
@@ -74,7 +74,7 @@ Optional peers: `llms/peers.md`. `wa-*`/`sl-*` renames: `llms/migration.md`.
 - `lr-graph-query-builder` · data/graph-query-builder/graph-query-builder.js — an editor for a single typed relationship/path filter (`GraphQuery`) over a knowledge graph: start/end entity anchors, relationship-type...
 - `lr-query-builder` · data/query-builder/query-builder.js — a composable structured-query builder for tabular/dashboard data: a flat list of field/operator/value condition rows combined with one AN...
 
-## Layout, navigation & structure — `components/layout/` (28)
+## Layout, navigation & structure — `components/layout/` (30)
 
 - `lr-split` · layout/split/split.js — resizable panels for dashboard layouts.
 - `lr-widget` · layout/widget/widget.js — a titled panel shell with an optional collapse toggle and an optional fullscreen-expand toggle.
@@ -85,6 +85,8 @@ Optional peers: `llms/peers.md`. `wa-*`/`sl-*` renames: `llms/migration.md`.
 - `lr-tabs` · layout/tabs/tabs.js — a tab strip whose panels are direct light-DOM children, each carrying `slot="<id>"` (the panel's stable id) and `label="<text>"` (the tab...
 - `lr-stepper` · layout/stepper/stepper.js — ordered multi-step wizard/form navigation: label + index per step, current/completed/locked/error state, click-to-jump.
 - `lr-control-group` · layout/control-group/control-group.js — a responsive layout primitive for a row of mixed form controls and action buttons (e.g.
+- `lr-reorder-list` · layout/reorder-list/reorder-list.js — a generic vertical list of `<lr-reorder-item>` rows, reorderable via per-row move-up/move-down buttons (always available) or Ctrl/Cmd+Arr...
+- `lr-reorder-item` · layout/reorder-list/reorder-item.js — one row inside `<lr-reorder-list>`.
 - `lr-segmented` · layout/segmented/segmented.js — a single-select button row with the WAI-ARIA APG `radiogroup` contract built in: `role="radiogroup"`/`role="radio"`, roving tabindex, aut...
 - `lr-virtual-list` · layout/virtual-list/virtual-list.js — a generic windowed/virtualized list host.
 - `lr-app-rail` · layout/app-rail/app-rail.js — a responsive navigation rail that adapts across three presentations as the *viewport* narrows (not this element's own inline size — see t...

package/llms/shared.md

@@ -8,7 +8,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/*`.
 
@@ -216,12 +216,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`.
 

package/llms/tokens.md

@@ -16,7 +16,7 @@ For a ready-made light/dark base, import `@aceshooting/lyra-ui/theme.css` once a
 Per-component `--lr-<component>-*` custom properties (listed in each component's own section)
 override a single element without touching the shared layer.
 
-## Themeable inputs (233)
+## Themeable inputs (234)
 
 | Internal token | `--lr-theme-*` input | Fallback |
 |---|---|---|
@@ -50,6 +50,7 @@ override a single element without touching the shared layer.
 | `--lr-space-l` | `--lr-theme-space-l` | `1rem` |
 | `--lr-space-2xs` | `--lr-theme-space-2xs` | `0.125rem` |
 | `--lr-space-2xl` | `--lr-theme-space-2xl` | `2rem` |
+| `--lr-font-size-3xs` | `--lr-theme-font-size-3xs` | `0.5rem` |
 | `--lr-font-size-2xs` | `--lr-theme-font-size-2xs` | `0.625rem` |
 | `--lr-font-size-xs` | `--lr-theme-font-size-xs` | `0.75rem` |
 | `--lr-font-size-sm` | `--lr-theme-font-size-sm` | `0.8125rem` |
@@ -254,7 +255,7 @@ override a single element without touching the shared layer.
 | `--lr-graph-cat-7` | `--lr-theme-graph-cat-7` | `#79e2ef` |
 | `--lr-graph-cat-8` | `--lr-theme-graph-cat-8` | `#e4e7eb` |
 
-## Derived tokens (278)
+## Derived tokens (279)
 
 Computed from the layer above; not directly themeable.
 
@@ -290,6 +291,7 @@ Computed from the layer above; not directly themeable.
 | `--lr-space-l` | `var(--lr-theme-space-l, 1rem)` |
 | `--lr-space-2xs` | `var(--lr-theme-space-2xs, 0.125rem)` |
 | `--lr-space-2xl` | `var(--lr-theme-space-2xl, 2rem)` |
+| `--lr-font-size-3xs` | `var(--lr-theme-font-size-3xs, 0.5rem)` |
 | `--lr-font-size-2xs` | `var(--lr-theme-font-size-2xs, 0.625rem)` |
 | `--lr-font-size-xs` | `var(--lr-theme-font-size-xs, 0.75rem)` |
 | `--lr-font-size-sm` | `var(--lr-theme-font-size-sm, 0.8125rem)` |