@aceshooting/lyra-ui 6.0.0 → 6.1.0

package/llms/components/lr-combobox.md

@@ -132,7 +132,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

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

@@ -44,9 +44,14 @@ by side; that is a valid composition, not a fallback.
 `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.
+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)
@@ -57,4 +62,7 @@ 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.

package/llms/components/lr-input.md

@@ -75,7 +75,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
 

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

@@ -21,11 +21,15 @@ 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).
+  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

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

@@ -34,8 +34,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

package/llms/components/lr-option.md

@@ -132,7 +132,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

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

@@ -19,7 +19,9 @@ Ctrl/Cmd+ArrowUp/ArrowDown from focus anywhere inside a row — the same modifie
 `<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.
+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`
 
@@ -29,9 +31,15 @@ own splice/resort logic.
 - `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)
+**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.
 
@@ -66,6 +74,9 @@ between rows.
 - `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)

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

@@ -19,7 +19,9 @@ Ctrl/Cmd+ArrowUp/ArrowDown from focus anywhere inside a row — the same modifie
 `<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.
+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`
 
@@ -29,9 +31,15 @@ own splice/resort logic.
 - `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)
+**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.
 
@@ -66,6 +74,9 @@ between rows.
 - `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)

package/llms/components/lr-select.md

@@ -79,7 +79,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

package/llms/components/lr-tag.md

@@ -30,3 +30,6 @@ 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`.

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

@@ -44,8 +44,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

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

@@ -24,7 +24,8 @@ hit area stays fixed at `40px` across all sizes), `allowDuplicates` (`allow-dupl
 `','` — 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`),

package/llms-full.txt

@@ -624,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
@@ -791,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
@@ -1312,9 +1318,14 @@ by side; that is a valid composition, not a fallback.
 `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.
+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)
@@ -1325,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`
 
@@ -1392,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
 
@@ -1457,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
@@ -1501,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
@@ -2222,7 +2243,8 @@ hit area stays fixed at `40px` across all sizes), `allowDuplicates` (`allow-dupl
 `','` — 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`),
@@ -2471,11 +2493,15 @@ 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).
+  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
@@ -4982,7 +5008,9 @@ Ctrl/Cmd+ArrowUp/ArrowDown from focus anywhere inside a row — the same modifie
 `<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.
+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`
 
@@ -4992,9 +5020,15 @@ own splice/resort logic.
 - `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)
+**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.
 
@@ -5029,6 +5063,9 @@ between rows.
 - `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)
@@ -5434,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).
 
@@ -6700,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`,
@@ -6994,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`
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aceshooting/lyra-ui",
-  "version": "6.0.0",
+  "version": "6.1.0",
   "description": "Free, independent Lit web components: an open-source alternative to Shoelace and Web Awesome with accessible forms, dashboards, charts, and agent UI.",
   "keywords": [
     "web-components",
@@ -750,6 +750,7 @@
     "check:script-paths": "node scripts/check-script-paths.mjs",
     "check:form-associated": "node scripts/check-form-associated.mjs",
     "check:event-barrel": "node scripts/check-event-barrel.mjs",
+    "check:cycles": "node scripts/check-import-cycles.mjs",
     "check:hit-area": "node scripts/check-hit-area.mjs",
     "check:numeric-guards": "node scripts/check-numeric-guards.mjs",
     "test:types": "tsc --noEmit -p tsconfig.type-tests.json",
@@ -770,7 +771,7 @@
     "llms-freshness": "node scripts/check-llms-freshness.mjs",
     "migrate-wa": "node scripts/migrate-wa.mjs",
     "test:migrate-wa": "node scripts/migrate-wa.test.mjs",
-    "contract-policy": "pnpm run check:script-paths && pnpm run style-policy && pnpm run check:source-policy && pnpm run check:part-reachability && pnpm run test:part-reachability && pnpm run provenance-policy && pnpm run contract-checklist && node scripts/check-component-coverage.mjs && pnpm run manifest:check && pnpm run manifest:coverage && pnpm run llms-freshness && pnpm run llms:check && pnpm run test:architecture && pnpm run check-side-effects && pnpm run check:form-associated && pnpm run check:event-barrel",
+    "contract-policy": "pnpm run check:script-paths && pnpm run style-policy && pnpm run check:source-policy && pnpm run check:part-reachability && pnpm run test:part-reachability && pnpm run provenance-policy && pnpm run contract-checklist && node scripts/check-component-coverage.mjs && pnpm run manifest:check && pnpm run manifest:coverage && pnpm run llms-freshness && pnpm run llms:check && pnpm run test:architecture && pnpm run check-side-effects && pnpm run check:form-associated && pnpm run check:event-barrel && pnpm run check:cycles",
     "lint": "pnpm run contract-policy && tsc --noEmit -p tsconfig.json && pnpm run test:types"
   }
 }

package/vscode-css-data.json

@@ -393,6 +393,13 @@
         "value": "**`<lr-badge>`, `<lr-tag>`** (default: `var(--lr-space-s)`) — The badge's inline padding. Each `size` sets it to that step's inline padding."
       }
     },
+    {
+      "name": "--lr-badge-radius",
+      "description": {
+        "kind": "markdown",
+        "value": "**`<lr-badge>`, `<lr-tag>`** (default: `var(--lr-radius-pill)`) — Corner radius of the badge surface. Does not vary by `size` tier."
+      }
+    },
     {
       "name": "--lr-breadcrumb-current-color",
       "description": {
@@ -883,6 +890,13 @@
         "value": "**`<lr-chip>`** (default: `var(--lr-chip-accent)`) — Border color while a toggleable chip is selected, independently themeable from the label/icon color."
       }
     },
+    {
+      "name": "--lr-chip-radius",
+      "description": {
+        "kind": "markdown",
+        "value": "**`<lr-chip>`** (default: `var(--lr-radius-pill)`) — Corner radius of the pill and of the remove button, kept in sync so retuning one retunes both. Does not vary by `size` tier."
+      }
+    },
     {
       "name": "--lr-chunk-inspector-current-bg",
       "description": {
@@ -988,6 +1002,13 @@
         "value": "**`<lr-combobox>`** — Input text size."
       }
     },
+    {
+      "name": "--lr-combobox-gap",
+      "description": {
+        "kind": "markdown",
+        "value": "**`<lr-combobox>`** (default: `var(--lr-space-xs)`) — Gap between the start/end adornments, tags, and filter input inside the trigger row. Unlike the size knobs above it does not vary by `size` tier. Override it to retune without a `::part(combobox)` rule."
+      }
+    },
     {
       "name": "--lr-combobox-option-active-bg",
       "description": {
@@ -995,6 +1016,13 @@
         "value": "**`<lr-combobox>`** (default: `var(--lr-color-brand-quiet)`) — Background of a hovered or keyboard-active option row."
       }
     },
+    {
+      "name": "--lr-combobox-radius",
+      "description": {
+        "kind": "markdown",
+        "value": "**`<lr-combobox>`** (default: `var(--lr-radius)`) — Corner radius of the trigger row (`[part='combobox']`). Does not vary by `size` tier."
+      }
+    },
     {
       "name": "--lr-combobox-tag-font-size",
       "description": {
@@ -1814,6 +1842,13 @@
         "value": "**`<lr-html-viewer>`** (default: `none`) — Maximum block size of `[part=\"body\"]` before it scrolls internally. The `maxHeight` property sets this token inline on `[part=\"base\"]`."
       }
     },
+    {
+      "name": "--lr-icon-button-radius",
+      "description": {
+        "kind": "markdown",
+        "value": "**`<lr-icon-button>`** (default: `var(--lr-radius)`) — Corner radius of the native button."
+      }
+    },
     {
       "name": "--lr-icon-button-size",
       "description": {
@@ -1877,6 +1912,13 @@
         "value": "**`<lr-input>`, `<lr-number-input>`, `<lr-time-input>`** — Font size of the native input, scaled by `size`."
       }
     },
+    {
+      "name": "--lr-input-gap",
+      "description": {
+        "kind": "markdown",
+        "value": "**`<lr-input>`, `<lr-number-input>`, `<lr-time-input>`** (default: `var(--lr-space-xs)`) — Gap between the start/end adornments and the native input in the control row. Unlike the size knobs above it does not vary by `size` tier. Override it to retune without a `::part(input-wrapper)` rule."
+      }
+    },
     {
       "name": "--lr-input-padding-block",
       "description": {
@@ -1891,6 +1933,13 @@
         "value": "**`<lr-input>`, `<lr-number-input>`, `<lr-time-input>`** — Inline padding of the control row, scaled by `size`."
       }
     },
+    {
+      "name": "--lr-input-radius",
+      "description": {
+        "kind": "markdown",
+        "value": "**`<lr-input>`, `<lr-number-input>`, `<lr-time-input>`** (default: `var(--lr-radius)`) — Corner radius of the control row. Does not vary by `size` tier."
+      }
+    },
     {
       "name": "--lr-json-viewer-font",
       "description": {
@@ -2563,6 +2612,13 @@
         "value": "**`<lr-select>`** — Trigger font size, scaled by `size`."
       }
     },
+    {
+      "name": "--lr-select-gap",
+      "description": {
+        "kind": "markdown",
+        "value": "**`<lr-select>`** — Gap between the trigger's start adornment, label, end adornment, and expand icon. Doesn't vary by `size`."
+      }
+    },
     {
       "name": "--lr-select-option-active-bg",
       "description": {
@@ -2570,6 +2626,13 @@
         "value": "**`<lr-select>`** (default: `var(--lr-color-brand-quiet)`) — Background of the hovered/keyboard-active option row. Not declared on `:host`, so a value set on any ancestor is never shadowed -- retheme just this row state without hijacking the shared `--lr-color-brand-quiet` token used by every other component's own hover/active state."
       }
     },
+    {
+      "name": "--lr-select-radius",
+      "description": {
+        "kind": "markdown",
+        "value": "**`<lr-select>`** — Trigger corner radius. Doesn't vary by `size`."
+      }
+    },
     {
       "name": "--lr-select-trigger-height",
       "description": {