@aceshooting/lyra-ui 18.1.0 → 18.3.0

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

@@ -57,6 +57,11 @@ extension?: string }`. Descriptor labels/descriptions are consumer-supplied, alr
   copy. `formatId` must be nonempty and unique; malformed options and later duplicates are omitted
   first-wins before menu state, focus reconciliation, or export events. Custom format ids are
   event-only; no custom encoder is bundled
+- `size?: LyraSize` — optional density on the shared `2xs` through `xl` ladder, including the
+  `small`/`medium`/`large` aliases. It changes trigger and menu-row typography and padding while
+  retaining the shared 40px minimum hit-area floor. Unset preserves the established geometry
+- `appearance?: LyraExportButtonAppearance` — `outlined` or `quiet` trigger treatment. Unset
+  preserves the established surface, border, and text colors
 - `disabled: boolean = false` (reflected) — also disables every `[part="menu-item"]` button, not just
   the trigger
 - `loading: boolean = false` (reflected) — controlled busy state for an async or server-generated

package/llms/components/lr-heatmap.md

@@ -348,9 +348,13 @@ color?: string; label?: string; partOfRamp?: boolean }`: a discrete legend key r
   "no data" color next to an N-step ramp) to exclude just that stop from the comparison; defaults to
   `true`. A caption-only stop (no `color`) is already excluded regardless of this flag.
 
-**Getters/methods:** `refreshTheme()` — redraws canvas content after an upstream design-token or
-color-scheme change; called automatically on theme changes, exposed for a consumer that needs to
-force a redraw manually. `matrixGeometry: Readonly<LyraHeatmapMatrixGeometryChangeDetail> | undefined` — the gutter/cell geometry the last matrix-mode draw actually painted with,
+**Getters/methods:** `exportData('png')` returns a PNG data URL for the most recently completed
+canvas paint. It includes the painted axes, cells, focus/selection/annotation overlays, and frozen
+label bands while `stickyLabels` is enabled; the DOM legend, tooltip, and accessible-cell buttons
+are deliberately excluded. It returns `''` before a completed paint, while rendering is deferred or
+zero-sized, after disconnect, or when the browser cannot encode the snapshot. `refreshTheme()` —
+redraws canvas content after an upstream design-token or color-scheme change; called automatically
+on theme changes, exposed for a consumer that needs to force a redraw manually. `matrixGeometry: Readonly<LyraHeatmapMatrixGeometryChangeDetail> | undefined` — the gutter/cell geometry the last matrix-mode draw actually painted with,
 in CSS pixels; `undefined` in calendar mode. Lets a light-DOM consumer line up with the canvas
 without hardcoding the same numbers `row-label-width`/`col-label-height`'s `"auto"` resolution would
 otherwise keep private. For the case that motivated it — a frozen header or gutter on a tall or wide

package/llms/components/lr-lightbox.md

@@ -46,6 +46,13 @@ trap, Escape/backdrop dismissal, scroll lock, and focus return.
 - `minZoom: number = 0.5`, `maxZoom: number = 4`, `zoomStep: number = 0.25` (attributes `min-zoom`/
   `max-zoom`/`zoom-step`) — pure pass-throughs to the embedded `<lr-pan-zoom>`, which does the
   normalizing.
+- `fit: LyraImageFit = 'actual'` (reflected) — opt-in base sizing policy for the current image,
+  reusing `<lr-image-viewer>`'s `contain`/`width`/`actual` vocabulary. The default preserves the
+  existing natural-size behavior. `contain` fits both landscape and tall images inside the stage;
+  `width` fills its inline size. CSS recalculates either policy when the stage is resized or a
+  delayed image source finishes loading, so navigation and opening do not require consumer timers.
+  Fit is the base zoom policy: an explicit user zoom remains until navigation or a reset, and
+  changing the theme does not mutate the lightbox's zoom property.
 - `accessibleLabel: string | null = null` (attribute `aria-label`) — the panel's accessible name,
   overriding the localized `lightboxLabel`.
 
@@ -102,6 +109,10 @@ photo content.
 - zoom/pan reset on navigation is imperative (`resetView()` from `updated()`), not a binding; the
   frame element is reused across navigations rather than recreated, so a keyboard user who tabbed
   into the viewport keeps focus.
+- fit sizing is CSS-driven inside the stable frame. The rendered DOM image is not copied or
+  measured by the lightbox, so stale load events cannot apply a previous image's size. The fit
+  policy covers the painted image only; the lightbox's DOM caption, toolbar, legend-like actions,
+  and tooltip content remain outside that image surface.
 - scope for v1: no per-image slotted content (data-driven via `images` only), no dot indicators, no
   visual open/close animation, no click-image-to-navigate, no touch-swipe. Lifecycle phases are
   still observable through the before/after events and methods above.

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/components/lr-pan-zoom.md

@@ -27,6 +27,10 @@ import to `LyraPanZoom`); `lr-zoomable-frame` now means the mapped iframe compon
   `zoomStep: number = 0.25` — bounded, finite zoom configuration
 - `src: string = ''` and `alt: string = ''` — optional safe image source. A rejected URL is treated
   as absent and the default slot renders; no empty or unsafe `<img>` replaces that fallback.
+- `fit: LyraImageFit = 'actual'` (reflected) — base sizing policy for an image supplied through
+  `src`, using the same `contain`/`width`/`actual` vocabulary as `<lr-image-viewer>`. `actual`
+  preserves the historical natural-size layout; the other modes resolve against the viewport and
+  update with its allocation, including when an image loads after the frame first renders.
 - `accessibleLabel: string | null` (attribute `aria-label`) — a declarative host label remains on
   the host while the focusable viewport receives the localized inspection-surface purpose name.
   A property-only value names the viewport and updates reactively without creating a host attribute. This avoids cloning one author label onto both the outer component and nested `role="group"`. An explicitly empty direct property remains empty; a present host attribute, including an empty one, leaves the viewport's localized purpose name intact.

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
@@ -13697,9 +13702,13 @@ color?: string; label?: string; partOfRamp?: boolean }`: a discrete legend key r
   "no data" color next to an N-step ramp) to exclude just that stop from the comparison; defaults to
   `true`. A caption-only stop (no `color`) is already excluded regardless of this flag.
 
-**Getters/methods:** `refreshTheme()` — redraws canvas content after an upstream design-token or
-color-scheme change; called automatically on theme changes, exposed for a consumer that needs to
-force a redraw manually. `matrixGeometry: Readonly<LyraHeatmapMatrixGeometryChangeDetail> | undefined` — the gutter/cell geometry the last matrix-mode draw actually painted with,
+**Getters/methods:** `exportData('png')` returns a PNG data URL for the most recently completed
+canvas paint. It includes the painted axes, cells, focus/selection/annotation overlays, and frozen
+label bands while `stickyLabels` is enabled; the DOM legend, tooltip, and accessible-cell buttons
+are deliberately excluded. It returns `''` before a completed paint, while rendering is deferred or
+zero-sized, after disconnect, or when the browser cannot encode the snapshot. `refreshTheme()` —
+redraws canvas content after an upstream design-token or color-scheme change; called automatically
+on theme changes, exposed for a consumer that needs to force a redraw manually. `matrixGeometry: Readonly<LyraHeatmapMatrixGeometryChangeDetail> | undefined` — the gutter/cell geometry the last matrix-mode draw actually painted with,
 in CSS pixels; `undefined` in calendar mode. Lets a light-DOM consumer line up with the canvas
 without hardcoding the same numbers `row-label-width`/`col-label-height`'s `"auto"` resolution would
 otherwise keep private. For the case that motivated it — a frozen header or gutter on a tall or wide
@@ -24824,6 +24833,11 @@ extension?: string }`. Descriptor labels/descriptions are consumer-supplied, alr
   copy. `formatId` must be nonempty and unique; malformed options and later duplicates are omitted
   first-wins before menu state, focus reconciliation, or export events. Custom format ids are
   event-only; no custom encoder is bundled
+- `size?: LyraSize` — optional density on the shared `2xs` through `xl` ladder, including the
+  `small`/`medium`/`large` aliases. It changes trigger and menu-row typography and padding while
+  retaining the shared 40px minimum hit-area floor. Unset preserves the established geometry
+- `appearance?: LyraExportButtonAppearance` — `outlined` or `quiet` trigger treatment. Unset
+  preserves the established surface, border, and text colors
 - `disabled: boolean = false` (reflected) — also disables every `[part="menu-item"]` button, not just
   the trigger
 - `loading: boolean = false` (reflected) — controlled busy state for an async or server-generated
@@ -27360,6 +27374,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 +27780,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
@@ -28527,6 +28556,10 @@ import to `LyraPanZoom`); `lr-zoomable-frame` now means the mapped iframe compon
   `zoomStep: number = 0.25` — bounded, finite zoom configuration
 - `src: string = ''` and `alt: string = ''` — optional safe image source. A rejected URL is treated
   as absent and the default slot renders; no empty or unsafe `<img>` replaces that fallback.
+- `fit: LyraImageFit = 'actual'` (reflected) — base sizing policy for an image supplied through
+  `src`, using the same `contain`/`width`/`actual` vocabulary as `<lr-image-viewer>`. `actual`
+  preserves the historical natural-size layout; the other modes resolve against the viewport and
+  update with its allocation, including when an image loads after the frame first renders.
 - `accessibleLabel: string | null` (attribute `aria-label`) — a declarative host label remains on
   the host while the focusable viewport receives the localized inspection-surface purpose name.
   A property-only value names the viewport and updates reactively without creating a host attribute. This avoids cloning one author label onto both the outer component and nested `role="group"`. An explicitly empty direct property remains empty; a present host attribute, including an empty one, leaves the viewport's localized purpose name intact.
@@ -29514,6 +29547,13 @@ trap, Escape/backdrop dismissal, scroll lock, and focus return.
 - `minZoom: number = 0.5`, `maxZoom: number = 4`, `zoomStep: number = 0.25` (attributes `min-zoom`/
   `max-zoom`/`zoom-step`) — pure pass-throughs to the embedded `<lr-pan-zoom>`, which does the
   normalizing.
+- `fit: LyraImageFit = 'actual'` (reflected) — opt-in base sizing policy for the current image,
+  reusing `<lr-image-viewer>`'s `contain`/`width`/`actual` vocabulary. The default preserves the
+  existing natural-size behavior. `contain` fits both landscape and tall images inside the stage;
+  `width` fills its inline size. CSS recalculates either policy when the stage is resized or a
+  delayed image source finishes loading, so navigation and opening do not require consumer timers.
+  Fit is the base zoom policy: an explicit user zoom remains until navigation or a reset, and
+  changing the theme does not mutate the lightbox's zoom property.
 - `accessibleLabel: string | null = null` (attribute `aria-label`) — the panel's accessible name,
   overriding the localized `lightboxLabel`.
 
@@ -29570,6 +29610,10 @@ photo content.
 - zoom/pan reset on navigation is imperative (`resetView()` from `updated()`), not a binding; the
   frame element is reused across navigations rather than recreated, so a keyboard user who tabbed
   into the viewport keeps focus.
+- fit sizing is CSS-driven inside the stable frame. The rendered DOM image is not copied or
+  measured by the lightbox, so stale load events cannot apply a previous image's size. The fit
+  policy covers the painted image only; the lightbox's DOM caption, toolbar, legend-like actions,
+  and tooltip content remain outside that image surface.
 - scope for v1: no per-image slotted content (data-driven via `images` only), no dot indicators, no
   visual open/close animation, no click-image-to-navigate, no touch-swipe. Lifecycle phases are
   still observable through the before/after events and methods above.

package/package.json

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