@aceshooting/lyra-ui 18.1.0 → 18.2.0

package/llms/components/lr-map.md

@@ -115,6 +115,18 @@ omittedCount, truncatedLabelCount, truncated }` result for the latest assignment
   roving tabindex: a 100-row interactive legend contributes 100 tab stops, exactly as a 100-series
   `lr-chart` legend does. Each interactive row also grows to the shared `--lr-icon-button-size`
   hit-area floor (WCAG 2.5.8), which the panel's existing `max-block-size` and scrolling contain.
+- `legendControlRole: 'button' | 'checkbox' = 'button'` (attribute `legend-control-role`,
+  reflected) — how each `legendInteractive` row's toggle presents itself to assistive tech; inert
+  while `legendInteractive` is unset, exactly like the toggle itself. `'button'` is byte-identical
+  to every legend rendered before this property existed: `<button aria-pressed>`. `'checkbox'`
+  renders the SAME `<button>` element with its implicit role overridden to `role="checkbox"` and
+  `aria-checked` in place of `aria-pressed` — the swatch, the label, the click handler and the
+  platform's own Enter/Space activation are unchanged, so `hiddenCategories`, the cancelable
+  `lr-map-legend-toggle` veto, `group` sections and `legendCollapsible` all compose with either
+  role. `aria-checked` tracks the same visibility flag `aria-pressed` does, inverted from
+  `hiddenCategories`: a hidden category renders `aria-checked="false"`. Prefer `'checkbox'` when the
+  legend reads as a checklist of independent show/hide toggles; prefer the `'button'` default when
+  it reads as a set of filtering actions. An unsupported value normalizes back to `'button'`.
 - `legendCollapsible: boolean = false` (attribute `legend-collapsible`, reflected) — opt-in: renders
   a `legend-disclosure` `button` inside the panel that collapses the key down to its header, so a
   large legend stops permanently covering part of the map. Unset, the panel renders exactly what it
@@ -509,10 +521,13 @@ container in the tree, so `legend` withholds `aria-controls` rather than leaving
 idref.
 Under `legendInteractive`, a row carrying a `value` wraps its swatch and label in a
 `legend-toggle` `button` with `aria-pressed` rendered as the literal `"true"`/`"false"` — never
-omitted, because a missing attribute reports "not a toggle button" rather than "unpressed". The
-button's accessible name is its own visible label (caller-supplied data, so deliberately not
-localized), scoped by the legend's own localized group name; no `aria-label` restates the state,
-which would make assistive tech announce it twice. A hidden row's button additionally carries the
+omitted, because a missing attribute reports "not a toggle button" rather than "unpressed". Setting
+`legendControlRole="checkbox"` renders the SAME `button` with `role="checkbox"` and `aria-checked`
+(also always the literal `"true"`/`"false"`) in place of `aria-pressed`, and nothing else about the
+row changes. The button's accessible name is its own visible label (caller-supplied data, so
+deliberately not localized), scoped by the legend's own localized group name; no `aria-label`
+restates the state, which would make assistive tech announce it twice. A hidden row's button
+additionally carries the
 `legend-toggle-hidden` token — state lives in the part name, so `::part(legend-toggle-hidden)` is a
 reachable hook — and dims only its `aria-hidden` swatch while re-colouring the label through the
 quiet text token, so the label keeps AA contrast rather than fading with the whole button. In

package/llms/shared.md

@@ -1177,7 +1177,12 @@ code. See each control's own reference page for its exact pair.
   | `--lr-icon-button-size-scope` | one subtree | the wrapper you want affected |
   | `--lr-icon-button-size` | one element | the icon-only control itself |
 
-  `--lr-theme-icon-button-size` wins wherever both ancestor inputs are set. `--lr-icon-button-size`
+  `--lr-icon-button-size-scope` wins wherever both ancestor inputs are set — the narrower scope
+  takes precedence, and it has to: the shipped `design-tokens.css` declares
+  `--lr-theme-icon-button-size` on `:root`, and a `var()` chain only falls through for a property
+  that is unset *everywhere*, not merely shadowed nearer the element. Reading the theme tier first
+  therefore made this knob inert for anyone loading that stylesheet (a real 18.1.0 defect, fixed in
+  18.2.0). `--lr-icon-button-size`
   is **element-scoped on purpose** and is not a wrapper knob: every component re-declares it on its
   own host so the touch-target floor can apply per element, so a value set on a wrapper is replaced
   at the first component in between and never reaches anything nested inside one. That behaviour is

package/llms/tokens.md

@@ -55,8 +55,10 @@ look arbitrary rather than systematic. Reach through a subtree with `--lr-theme-
 `--lr-theme-otp-input-segment-size`, or `--lr-theme-popover-viewport-clamp` instead.
 `--lr-icon-button-size` additionally has a dedicated subtree-scoped input,
 `--lr-icon-button-size-scope`, which an ancestor rule can set without reaching for the
-application-wide `--lr-theme-icon-button-size`; the theme input still wins over it when both
-are set. Every other `--lr-<component>-*` token — including
+application-wide `--lr-theme-icon-button-size`. The subtree input wins where both are set,
+because the shipped `design-tokens.css` declares the theme tier on `:root` and a var() chain
+only falls through for a property that is unset everywhere. Every other `--lr-<component>-*`
+token — including
 the rest of `lr-icon-button`'s own (`-radius`, `-background`, `-color`, `-border`, and their
 `-hover`/`-active` variants) — is not re-declared anywhere in the shared layer and inherits
 normally from an ancestor.
@@ -178,7 +180,7 @@ normally from an ancestor.
 | `--lr-graph-cat-7` | `--lr-theme-graph-cat-7` | `#52d6e8` | dark: `var(--lr-theme-graph-cat-7, #79e2ef)`<br>forcedColors: `Highlight` |
 | `--lr-graph-cat-8` | `--lr-theme-graph-cat-8` | `#c9d1d9` | dark: `var(--lr-theme-graph-cat-8, #e4e7eb)`<br>forcedColors: `LinkText` |
 | `--lr-hover-brightness` | `--lr-theme-hover-brightness` | `1.08` | — |
-| `--lr-icon-button-size` | `--lr-theme-icon-button-size` | `var(--lr-icon-button-size-scope, 2.5rem)` | — |
+| `--lr-icon-button-size` | `--lr-theme-icon-button-size` | `2.5rem` | — |
 | `--lr-layer-base` | `--lr-theme-z-index-base` | `0` | — |
 | `--lr-layer-content` | `--lr-theme-z-index-content` | `1` | — |
 | `--lr-layer-dropdown` | `--lr-theme-z-index-dropdown` | `900` | — |

package/llms-full.txt

@@ -1229,7 +1229,12 @@ code. See each control's own reference page for its exact pair.
   | `--lr-icon-button-size-scope` | one subtree | the wrapper you want affected |
   | `--lr-icon-button-size` | one element | the icon-only control itself |
 
-  `--lr-theme-icon-button-size` wins wherever both ancestor inputs are set. `--lr-icon-button-size`
+  `--lr-icon-button-size-scope` wins wherever both ancestor inputs are set — the narrower scope
+  takes precedence, and it has to: the shipped `design-tokens.css` declares
+  `--lr-theme-icon-button-size` on `:root`, and a `var()` chain only falls through for a property
+  that is unset *everywhere*, not merely shadowed nearer the element. Reading the theme tier first
+  therefore made this knob inert for anyone loading that stylesheet (a real 18.1.0 defect, fixed in
+  18.2.0). `--lr-icon-button-size`
   is **element-scoped on purpose** and is not a wrapper knob: every component re-declares it on its
   own host so the touch-target floor can apply per element, so a value set on a wrapper is replaced
   at the first component in between and never reaches anything nested inside one. That behaviour is
@@ -27360,6 +27365,18 @@ omittedCount, truncatedLabelCount, truncated }` result for the latest assignment
   roving tabindex: a 100-row interactive legend contributes 100 tab stops, exactly as a 100-series
   `lr-chart` legend does. Each interactive row also grows to the shared `--lr-icon-button-size`
   hit-area floor (WCAG 2.5.8), which the panel's existing `max-block-size` and scrolling contain.
+- `legendControlRole: 'button' | 'checkbox' = 'button'` (attribute `legend-control-role`,
+  reflected) — how each `legendInteractive` row's toggle presents itself to assistive tech; inert
+  while `legendInteractive` is unset, exactly like the toggle itself. `'button'` is byte-identical
+  to every legend rendered before this property existed: `<button aria-pressed>`. `'checkbox'`
+  renders the SAME `<button>` element with its implicit role overridden to `role="checkbox"` and
+  `aria-checked` in place of `aria-pressed` — the swatch, the label, the click handler and the
+  platform's own Enter/Space activation are unchanged, so `hiddenCategories`, the cancelable
+  `lr-map-legend-toggle` veto, `group` sections and `legendCollapsible` all compose with either
+  role. `aria-checked` tracks the same visibility flag `aria-pressed` does, inverted from
+  `hiddenCategories`: a hidden category renders `aria-checked="false"`. Prefer `'checkbox'` when the
+  legend reads as a checklist of independent show/hide toggles; prefer the `'button'` default when
+  it reads as a set of filtering actions. An unsupported value normalizes back to `'button'`.
 - `legendCollapsible: boolean = false` (attribute `legend-collapsible`, reflected) — opt-in: renders
   a `legend-disclosure` `button` inside the panel that collapses the key down to its header, so a
   large legend stops permanently covering part of the map. Unset, the panel renders exactly what it
@@ -27754,10 +27771,13 @@ container in the tree, so `legend` withholds `aria-controls` rather than leaving
 idref.
 Under `legendInteractive`, a row carrying a `value` wraps its swatch and label in a
 `legend-toggle` `button` with `aria-pressed` rendered as the literal `"true"`/`"false"` — never
-omitted, because a missing attribute reports "not a toggle button" rather than "unpressed". The
-button's accessible name is its own visible label (caller-supplied data, so deliberately not
-localized), scoped by the legend's own localized group name; no `aria-label` restates the state,
-which would make assistive tech announce it twice. A hidden row's button additionally carries the
+omitted, because a missing attribute reports "not a toggle button" rather than "unpressed". Setting
+`legendControlRole="checkbox"` renders the SAME `button` with `role="checkbox"` and `aria-checked`
+(also always the literal `"true"`/`"false"`) in place of `aria-pressed`, and nothing else about the
+row changes. The button's accessible name is its own visible label (caller-supplied data, so
+deliberately not localized), scoped by the legend's own localized group name; no `aria-label`
+restates the state, which would make assistive tech announce it twice. A hidden row's button
+additionally carries the
 `legend-toggle-hidden` token — state lives in the part name, so `::part(legend-toggle-hidden)` is a
 reachable hook — and dims only its `aria-hidden` swatch while re-colouring the label through the
 quiet text token, so the label keeps AA contrast rather than fading with the whole button. In

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aceshooting/lyra-ui",
-  "version": "18.1.0",
+  "version": "18.2.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",