@aceshooting/lyra-ui 5.0.0 → 5.2.0

package/dist/components/layout/stepper/stepper.class.d.ts

@@ -1,5 +1,6 @@
 import { type PropertyValues, type TemplateResult } from 'lit';
 import { LyraElement } from '../../../internal/lyra-element.js';
+import { type OrientationBreakpointBasis } from '../../../internal/orientation-breakpoint.js';
 export type StepState = 'pending' | 'current' | 'completed' | 'disabled' | 'error';
 export type StepperOrientation = 'horizontal' | 'vertical';
 export interface StepperOrientationChangeDetail {
@@ -12,6 +13,12 @@ export interface StepItem {
     /** Optional native `title` tooltip for this step's button -- e.g. explaining why a
      *  `disabled` step is locked. Omit for no `title` attribute at all (not an empty string). */
     title?: string;
+    /** Optional leading topic glyph for this step (e.g. a payment icon on a "Payment" step) --
+     *  same `PaletteItem`/`MentionItem`/`SegmentedItem` precedent: intentionally general content
+     *  (a `TemplateResult`, an emoji string, etc.), not a square-icon-only field. Rendered
+     *  additionally to, never instead of, the state-driven index chip/checkmark -- the icon
+     *  identifies the step's topic, the chip/checkmark identifies its state. */
+    icon?: unknown;
 }
 export interface LyraStepperEventMap {
     'lr-step-select': CustomEvent<{
@@ -29,27 +36,45 @@ export interface LyraStepperEventMap {
  * `lr-dialog-close`'s cancelable-event convention).
  *
  * An opt-in `orientationBreakpoint` (unset by default -- no behavior change) makes the effective
- * layout/navigation axis respond to the stepper's own measured inline size instead of only the
- * authored `orientation`: below that width (px, measured on `[part="base"]` via `ResizeObserver`),
- * `narrowOrientation` becomes effective; at/above it, `orientation` does. This mirrors `<lr-split>`'s
- * identically-named `orientationBreakpoint`/`narrowOrientation` contract -- the observation boundary
- * is the component's own allocation, not the viewport, so a stepper placed in a narrow split pane or
- * dialog still responds correctly even in a wide window. The effective axis is exposed via the
+ * layout/navigation axis respond to a measured inline size instead of only the authored
+ * `orientation`: below that width (a pixel number or a `px`/`rem`/`em` CSS length), `narrowOrientation`
+ * becomes effective; at/above it, `orientation` does. This mirrors `<lr-split>`'s identically-named
+ * `orientationBreakpoint`/`narrowOrientation`/`orientationBreakpointBasis` contract. Under the default
+ * `orientationBreakpointBasis="container"` the breakpoint is measured on this stepper's own
+ * `[part="base"]` inline size via `ResizeObserver`, so a stepper placed in a narrow split pane or
+ * dialog still responds correctly even in a wide window; `orientationBreakpointBasis="viewport"`
+ * instead evaluates `matchMedia('(max-width: <breakpoint>)')`, needed when the stepper has a fixed
+ * width in a row that stacks at a shared breakpoint. The effective axis is exposed via the
  * `effectiveOrientation` getter, a `data-effective-orientation` host attribute (only present while
- * `orientationBreakpoint` is set), and `lr-stepper-orientation-change`.
+ * the breakpoint feature is active), and `lr-stepper-orientation-change`.
  *
  * @customElement lr-stepper
  * @event lr-step-select - Fired on click, or Enter/Space while focused, on a non-`disabled`
- *   step. `detail: { index, id }`. Cancelable, though this component takes no default action of
- *   its own to prevent (it never mutates `steps`) -- `preventDefault()` is available for a host
- *   that wants a single place to short-circuit its own listener's follow-up work.
+ *   step. `detail: { index, id }`. Not cancelable: this component is fully controlled (mirrors
+ *   `lr-table`'s `columns`/`rows` contract) and takes no default action of its own on selection
+ *   (it never mutates `steps`), so there is no real veto point for `preventDefault()` to gate.
  * @event lr-stepper-orientation-change - `detail: { orientation }`, fired when an enabled
  *   `orientationBreakpoint` changes the effective layout/navigation axis.
  * @csspart base - The root wrapper.
  * @csspart step - A single step button.
+ * @csspart step-icon - Optional leading topic glyph supplied by the item's `icon` field; content
+ *   may have a natural aspect ratio and is not restricted to a square icon. Rendered additionally
+ *   to, never instead of, `step-index`/`step-check`.
  * @csspart step-index - The numbered index chip, shown for `pending`/`current`/`error` steps.
  * @csspart step-check - The completed-checkmark glyph, shown for `completed` steps instead of `step-index`.
  * @csspart step-label - The step's label text.
+ * @cssprop [--lr-stepper-current-color=var(--lr-color-text)] - Text color of the `current` step.
+ *   Declared as an inline `var()` fallback (never on `:host`), so setting it on the element or an
+ *   ancestor recolors only the current step without hijacking the library-wide `--lr-color-text` token.
+ * @cssprop [--lr-stepper-current-font-weight=var(--lr-font-weight-semibold)] - Font weight of the
+ *   `current` step's label. `::part(step)[data-state='current']` is invalid CSS (an attribute
+ *   selector cannot follow `::part`), so this is the only way to change just the current step's
+ *   boldness without hijacking the library-wide `--lr-font-weight-semibold` token.
+ * @cssprop [--lr-stepper-error-color=var(--lr-color-danger)] - Text color of an `error` step.
+ * @cssprop [--lr-stepper-current-index-bg=var(--lr-color-brand)] - Background of the `current` step's
+ *   numbered index chip (`step-index`).
+ * @cssprop [--lr-stepper-current-index-color=var(--lr-color-surface)] - Text color of the `current`
+ *   step's numbered index chip.
  */
 export declare class LyraStepper extends LyraElement<LyraStepperEventMap> {
     static styles: import("lit").CSSResultGroup[];
@@ -63,10 +88,35 @@ export declare class LyraStepper extends LyraElement<LyraStepperEventMap> {
      *  used at/above `orientationBreakpoint` (or always, when that's unset) -- see
      *  `effectiveOrientation` for the live axis actually in effect. */
     orientation: StepperOrientation;
-    /** Opt-in inline-size breakpoint (px, measured on `[part="base"]`). Below it, `narrowOrientation`
+    /** Opt-in inline-size breakpoint, measured on `[part="base"]`. Below it, `narrowOrientation`
      *  becomes effective instead of `orientation`. Unset (the default): no behavior change, the
-     *  authored `orientation` always applies. */
-    orientationBreakpoint?: number;
+     *  authored `orientation` always applies.
+     *
+     *  Accepts a bare pixel number (`500`, `'500'`), an explicit `px` length (`'500px'`), a `rem`
+     *  length (`'31.25rem'`) or an `em` length (`'3em'`). Under the default
+     *  `orientationBreakpointBasis="container"`, `rem` resolves against the **document root**'s
+     *  computed font size -- the rule a `@container` query follows, and *not* a `@media` query's --
+     *  while `em` resolves against this element's own computed font size. The length is re-resolved
+     *  on every measurement, never cached, so browser zoom, a user font-size preference or an app
+     *  base-size token change are picked up with no invalidation step. To stay in step with a
+     *  sibling `@media (max-width: …rem)` rule, use `orientationBreakpointBasis="viewport"`, which
+     *  hands the length to the browser instead; see that property for why the two differ.
+     *
+     *  Any other value -- `%`, `vw`, `calc()`, `'auto'`, an unparseable string -- behaves exactly as
+     *  unset (no responsive observation at all), rather than as an armed breakpoint that can never
+     *  be crossed. Set `orientationBreakpointBasis="viewport"` for a viewport-relative breakpoint
+     *  instead. */
+    orientationBreakpoint?: number | string;
+    /** Which box `orientationBreakpoint` measures. `'container'` (the default) observes this
+     *  stepper's own `[part="base"]` inline size via `ResizeObserver`, comparing strictly `<`.
+     *  `'viewport'` instead evaluates `matchMedia('(max-width: <breakpoint>)')`, which is inclusive
+     *  (`<=`) -- native `max-width` semantics, deliberately, so the crossing point matches a CSS
+     *  `@media` rule authored with the same length exactly.
+     *
+     *  A stepper given a fixed width in a row layout cannot react to that row stacking by measuring
+     *  itself -- its own width never changes. That case requires `'viewport'`, which also lets the
+     *  browser resolve a `rem` breakpoint with real `@media` semantics. */
+    orientationBreakpointBasis: OrientationBreakpointBasis;
     /** Layout/navigation axis used below `orientationBreakpoint`. */
     narrowOrientation: StepperOrientation;
     /** Accessible name for the `role="tablist"` step strip. Attribute-reflects from a host-level
@@ -77,9 +127,25 @@ export declare class LyraStepper extends LyraElement<LyraStepperEventMap> {
     private _effectiveOrientation;
     private resizeObserver?;
     private baseEl?;
+    /** Best-known inline size before `baseEl` exists (or as a fallback while it's momentarily
+     *  unmeasured) -- seeded from a real reading of the host's own box in `connectedCallback()`
+     *  (see its comment) so the very first render already classifies correctly under the default
+     *  `'container'` basis, instead of falling back to the always-'wide' `Number.POSITIVE_INFINITY`
+     *  sentinel until the `ResizeObserver`'s own necessarily async first callback lands. */
+    private measuredInlineSize;
+    /** Owns breakpoint resolution, basis selection, and the viewport `MediaQueryList` lifecycle
+     *  (including teardown on disconnect) -- see `OrientationBreakpointController`. */
+    private orientationBreakpoints;
     /** The live layout/navigation axis after applying `orientationBreakpoint` -- identical to
      *  `orientation` whenever that's unset. See the class doc. */
     get effectiveOrientation(): StepperOrientation;
+    /** `orientationBreakpoint` in pixels, or `undefined` when unset *or* unparseable -- meaningful
+     *  only under `orientationBreakpointBasis="container"`, where this controller owns the crossing
+     *  comparison. Deliberately re-resolved per call (never cached): a `rem` breakpoint has to track
+     *  the live root font size. Never use this to decide whether the feature is on -- under
+     *  `"viewport"` basis it's not the number actually in effect; use `orientationBreakpoints.active`
+     *  for that (see `OrientationBreakpointController`'s class doc). */
+    private get resolvedOrientationBreakpoint();
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected firstUpdated(): void;
@@ -88,7 +154,9 @@ export declare class LyraStepper extends LyraElement<LyraStepperEventMap> {
     /** Classifies a measured inline size into the effective layout/navigation axis and, only on an
      *  actual transition, applies it -- mirrors `<lr-split>`'s identically-shaped
      *  `updateEffectiveOrientation()`. `emitOnChange` is false for the property-driven re-derivation
-     *  in `willUpdate()` and true for the `ResizeObserver` callback's fresh measurement. */
+     *  in `willUpdate()` (except a genuine viewport-basis transition after the first update -- see
+     *  `willUpdate()`'s own doc comment) and true for the `ResizeObserver`/`matchMedia` callbacks'
+     *  own fresh measurements. */
     private updateEffectiveOrientation;
     /** Creates (idempotently) and (re-)observes `[part="base"]` -- a no-op until `baseEl` exists (see
      *  `firstUpdated()`/`connectedCallback()`). */

package/dist/components/layout/stepper/stepper.class.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"stepper.class.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/stepper/stepper.class.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAG9E,OAAO,EAAE,WAAW,EAAE,MAAM,mCAAmC,CAAC;AAIhE,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,OAAO,CAAC;AAEnF,MAAM,MAAM,kBAAkB,GAAG,YAAY,GAAG,UAAU,CAAC;AAE3D,MAAM,WAAW,8BAA8B;IAC7C,WAAW,EAAE,kBAAkB,CAAC;CACjC;AAED,MAAM,WAAW,QAAQ;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,SAAS,CAAC;IACjB;iGAC6F;IAC7F,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,mBAAmB;IAClC,gBAAgB,EAAE,WAAW,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAC7D,+BAA+B,EAAE,WAAW,CAAC,8BAA8B,CAAC,CAAC;CAC9E;AAqBD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,qBAAa,WAAY,SAAQ,WAAW,CAAC,mBAAmB,CAAC;IAC/D,MAAM,CAAC,MAAM,iCAAgC;IAE7C;;;qCAGiC;IACD,KAAK,EAAE,QAAQ,EAAE,CAAM;IAEvD;;;uEAGmE;IACtC,WAAW,EAAE,kBAAkB,CAAgB;IAE5E;;iDAE6C;IACoB,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAEhG,iEAAiE;IACH,iBAAiB,EAAE,kBAAkB,CAAc;IAEjH;;;yBAGqB;IACkB,eAAe,EAAE,MAAM,GAAG,IAAI,CAAQ;IAE7E,OAAO,CAAC,qBAAqB,CAAoC;IACjE,OAAO,CAAC,cAAc,CAAC,CAAiB;IAChB,OAAO,CAAC,MAAM,CAAC,CAAc;IAErD;kEAC8D;IAC9D,IAAI,oBAAoB,IAAI,kBAAkB,CAE7C;IAED,iBAAiB,IAAI,IAAI,CAGxB;IAED,oBAAoB,IAAI,IAAI,CAG3B;IAED,SAAS,CAAC,YAAY,IAAI,IAAI,CAE7B;IAED,SAAS,CAAC,UAAU,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI,CAIlD;IAED,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI,CAK/C;IAED;;;4FAGwF;IACxF,OAAO,CAAC,0BAA0B;IAgBlC;mDAC+C;IAC/C,OAAO,CAAC,iBAAiB;IAWzB,OAAO,CAAC,UAAU;IAKlB,OAAO,CAAC,SAAS;IAOjB,OAAO,CAAC,SAAS,CAuCf;IAEF,MAAM,IAAI,cAAc,CAgCvB;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,WAAW,CAAC;KAC3B;CACF"}
+{"version":3,"file":"stepper.class.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/stepper/stepper.class.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAG9E,OAAO,EAAE,WAAW,EAAE,MAAM,mCAAmC,CAAC;AAChE,OAAO,EAAmC,KAAK,0BAA0B,EAAE,MAAM,6CAA6C,CAAC;AAI/H,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,OAAO,CAAC;AAEnF,MAAM,MAAM,kBAAkB,GAAG,YAAY,GAAG,UAAU,CAAC;AAE3D,MAAM,WAAW,8BAA8B;IAC7C,WAAW,EAAE,kBAAkB,CAAC;CACjC;AAED,MAAM,WAAW,QAAQ;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,SAAS,CAAC;IACjB;iGAC6F;IAC7F,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;gFAI4E;IAC5E,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,MAAM,WAAW,mBAAmB;IAClC,gBAAgB,EAAE,WAAW,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAC7D,+BAA+B,EAAE,WAAW,CAAC,8BAA8B,CAAC,CAAC;CAC9E;AAqBD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgDG;AACH,qBAAa,WAAY,SAAQ,WAAW,CAAC,mBAAmB,CAAC;IAC/D,MAAM,CAAC,MAAM,iCAAgC;IAE7C;;;qCAGiC;IACD,KAAK,EAAE,QAAQ,EAAE,CAAM;IAEvD;;;uEAGmE;IACtC,WAAW,EAAE,kBAAkB,CAAgB;IAE5E;;;;;;;;;;;;;;;;;mBAiBe;IACoC,qBAAqB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAE3F;;;;;;;;2EAQuE;IAEvE,0BAA0B,EAAE,0BAA0B,CAAe;IAErE,iEAAiE;IACH,iBAAiB,EAAE,kBAAkB,CAAc;IAEjH;;;yBAGqB;IACkB,eAAe,EAAE,MAAM,GAAG,IAAI,CAAQ;IAE7E,OAAO,CAAC,qBAAqB,CAAoC;IACjE,OAAO,CAAC,cAAc,CAAC,CAAiB;IAChB,OAAO,CAAC,MAAM,CAAC,CAAc;IACrD;;;;4FAIwF;IACxF,OAAO,CAAC,kBAAkB,CAA4B;IACtD;uFACmF;IACnF,OAAO,CAAC,sBAAsB,CAE5B;IAEF;kEAC8D;IAC9D,IAAI,oBAAoB,IAAI,kBAAkB,CAE7C;IAED;;;;;wEAKoE;IACpE,OAAO,KAAK,6BAA6B,GAExC;IAED,iBAAiB,IAAI,IAAI,CAUxB;IAED,oBAAoB,IAAI,IAAI,CAG3B;IAED,SAAS,CAAC,YAAY,IAAI,IAAI,CAE7B;IAED,SAAS,CAAC,UAAU,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI,CA2BlD;IAED,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI,CAK/C;IAED;;;;;kCAK8B;IAC9B,OAAO,CAAC,0BAA0B;IAoBlC;mDAC+C;IAC/C,OAAO,CAAC,iBAAiB;IAYzB,OAAO,CAAC,UAAU;IAQlB,OAAO,CAAC,SAAS;IAOjB,OAAO,CAAC,SAAS,CAuCf;IAEF,MAAM,IAAI,cAAc,CAiCvB;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,WAAW,CAAC;KAC3B;CACF"}

package/dist/components/layout/stepper/stepper.class.js

@@ -8,6 +8,7 @@ import { html, nothing } from 'lit';
 import { property, query } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { LyraElement } from '../../../internal/lyra-element.js';
+import { OrientationBreakpointController } from '../../../internal/orientation-breakpoint.js';
 import { isRtl } from '../../../internal/rtl.js';
 import { styles } from './stepper.styles.js';
 const GLYPH_VIEW_BOX = '0 0 24 24';
@@ -36,27 +37,45 @@ function checkmarkGlyph() {
  * `lr-dialog-close`'s cancelable-event convention).
  *
  * An opt-in `orientationBreakpoint` (unset by default -- no behavior change) makes the effective
- * layout/navigation axis respond to the stepper's own measured inline size instead of only the
- * authored `orientation`: below that width (px, measured on `[part="base"]` via `ResizeObserver`),
- * `narrowOrientation` becomes effective; at/above it, `orientation` does. This mirrors `<lr-split>`'s
- * identically-named `orientationBreakpoint`/`narrowOrientation` contract -- the observation boundary
- * is the component's own allocation, not the viewport, so a stepper placed in a narrow split pane or
- * dialog still responds correctly even in a wide window. The effective axis is exposed via the
+ * layout/navigation axis respond to a measured inline size instead of only the authored
+ * `orientation`: below that width (a pixel number or a `px`/`rem`/`em` CSS length), `narrowOrientation`
+ * becomes effective; at/above it, `orientation` does. This mirrors `<lr-split>`'s identically-named
+ * `orientationBreakpoint`/`narrowOrientation`/`orientationBreakpointBasis` contract. Under the default
+ * `orientationBreakpointBasis="container"` the breakpoint is measured on this stepper's own
+ * `[part="base"]` inline size via `ResizeObserver`, so a stepper placed in a narrow split pane or
+ * dialog still responds correctly even in a wide window; `orientationBreakpointBasis="viewport"`
+ * instead evaluates `matchMedia('(max-width: <breakpoint>)')`, needed when the stepper has a fixed
+ * width in a row that stacks at a shared breakpoint. The effective axis is exposed via the
  * `effectiveOrientation` getter, a `data-effective-orientation` host attribute (only present while
- * `orientationBreakpoint` is set), and `lr-stepper-orientation-change`.
+ * the breakpoint feature is active), and `lr-stepper-orientation-change`.
  *
  * @customElement lr-stepper
  * @event lr-step-select - Fired on click, or Enter/Space while focused, on a non-`disabled`
- *   step. `detail: { index, id }`. Cancelable, though this component takes no default action of
- *   its own to prevent (it never mutates `steps`) -- `preventDefault()` is available for a host
- *   that wants a single place to short-circuit its own listener's follow-up work.
+ *   step. `detail: { index, id }`. Not cancelable: this component is fully controlled (mirrors
+ *   `lr-table`'s `columns`/`rows` contract) and takes no default action of its own on selection
+ *   (it never mutates `steps`), so there is no real veto point for `preventDefault()` to gate.
  * @event lr-stepper-orientation-change - `detail: { orientation }`, fired when an enabled
  *   `orientationBreakpoint` changes the effective layout/navigation axis.
  * @csspart base - The root wrapper.
  * @csspart step - A single step button.
+ * @csspart step-icon - Optional leading topic glyph supplied by the item's `icon` field; content
+ *   may have a natural aspect ratio and is not restricted to a square icon. Rendered additionally
+ *   to, never instead of, `step-index`/`step-check`.
  * @csspart step-index - The numbered index chip, shown for `pending`/`current`/`error` steps.
  * @csspart step-check - The completed-checkmark glyph, shown for `completed` steps instead of `step-index`.
  * @csspart step-label - The step's label text.
+ * @cssprop [--lr-stepper-current-color=var(--lr-color-text)] - Text color of the `current` step.
+ *   Declared as an inline `var()` fallback (never on `:host`), so setting it on the element or an
+ *   ancestor recolors only the current step without hijacking the library-wide `--lr-color-text` token.
+ * @cssprop [--lr-stepper-current-font-weight=var(--lr-font-weight-semibold)] - Font weight of the
+ *   `current` step's label. `::part(step)[data-state='current']` is invalid CSS (an attribute
+ *   selector cannot follow `::part`), so this is the only way to change just the current step's
+ *   boldness without hijacking the library-wide `--lr-font-weight-semibold` token.
+ * @cssprop [--lr-stepper-error-color=var(--lr-color-danger)] - Text color of an `error` step.
+ * @cssprop [--lr-stepper-current-index-bg=var(--lr-color-brand)] - Background of the `current` step's
+ *   numbered index chip (`step-index`).
+ * @cssprop [--lr-stepper-current-index-color=var(--lr-color-surface)] - Text color of the `current`
+ *   step's numbered index chip.
  */
 export class LyraStepper extends LyraElement {
     constructor() {
@@ -71,6 +90,16 @@ export class LyraStepper extends LyraElement {
          *  used at/above `orientationBreakpoint` (or always, when that's unset) -- see
          *  `effectiveOrientation` for the live axis actually in effect. */
         this.orientation = 'horizontal';
+        /** Which box `orientationBreakpoint` measures. `'container'` (the default) observes this
+         *  stepper's own `[part="base"]` inline size via `ResizeObserver`, comparing strictly `<`.
+         *  `'viewport'` instead evaluates `matchMedia('(max-width: <breakpoint>)')`, which is inclusive
+         *  (`<=`) -- native `max-width` semantics, deliberately, so the crossing point matches a CSS
+         *  `@media` rule authored with the same length exactly.
+         *
+         *  A stepper given a fixed width in a row layout cannot react to that row stacking by measuring
+         *  itself -- its own width never changes. That case requires `'viewport'`, which also lets the
+         *  browser resolve a `rem` breakpoint with real `@media` semantics. */
+        this.orientationBreakpointBasis = 'container';
         /** Layout/navigation axis used below `orientationBreakpoint`. */
         this.narrowOrientation = 'vertical';
         /** Accessible name for the `role="tablist"` step strip. Attribute-reflects from a host-level
@@ -79,6 +108,15 @@ export class LyraStepper extends LyraElement {
          *  default name). */
         this.accessibleLabel = null;
         this._effectiveOrientation = 'horizontal';
+        /** Best-known inline size before `baseEl` exists (or as a fallback while it's momentarily
+         *  unmeasured) -- seeded from a real reading of the host's own box in `connectedCallback()`
+         *  (see its comment) so the very first render already classifies correctly under the default
+         *  `'container'` basis, instead of falling back to the always-'wide' `Number.POSITIVE_INFINITY`
+         *  sentinel until the `ResizeObserver`'s own necessarily async first callback lands. */
+        this.measuredInlineSize = Number.POSITIVE_INFINITY;
+        /** Owns breakpoint resolution, basis selection, and the viewport `MediaQueryList` lifecycle
+         *  (including teardown on disconnect) -- see `OrientationBreakpointController`. */
+        this.orientationBreakpoints = new OrientationBreakpointController(this, () => this.updateEffectiveOrientation(this.baseEl?.clientWidth ?? this.measuredInlineSize, true));
         this.onKeyDown = (e) => {
             const navigable = this.steps.filter((s) => s.state !== 'disabled');
             if (navigable.length === 0)
@@ -126,9 +164,26 @@ export class LyraStepper extends LyraElement {
     get effectiveOrientation() {
         return this._effectiveOrientation;
     }
+    /** `orientationBreakpoint` in pixels, or `undefined` when unset *or* unparseable -- meaningful
+     *  only under `orientationBreakpointBasis="container"`, where this controller owns the crossing
+     *  comparison. Deliberately re-resolved per call (never cached): a `rem` breakpoint has to track
+     *  the live root font size. Never use this to decide whether the feature is on -- under
+     *  `"viewport"` basis it's not the number actually in effect; use `orientationBreakpoints.active`
+     *  for that (see `OrientationBreakpointController`'s class doc). */
+    get resolvedOrientationBreakpoint() {
+        return this.orientationBreakpoints.resolved;
+    }
     connectedCallback() {
         super.connectedCallback();
-        if (this.orientationBreakpoint != null)
+        // Seeds `measuredInlineSize` with a real reading of the host's own box, taken before the
+        // very first render (and again on every reconnect) -- [part="base"] is a block-level flex
+        // container with no width of its own (see stepper.styles.ts), so it fills the host's
+        // content-box width, making the host's own box a safe stand-in for it before that part even
+        // exists. See the field's own comment for why this matters.
+        const hostWidth = this.getBoundingClientRect().width;
+        if (hostWidth > 0)
+            this.measuredInlineSize = hostWidth;
+        if (this.orientationBreakpoints.containerObservationEnabled)
             this.armResizeObserver();
     }
     disconnectedCallback() {
@@ -136,17 +191,35 @@ export class LyraStepper extends LyraElement {
         this.resizeObserver?.disconnect();
     }
     firstUpdated() {
-        if (this.orientationBreakpoint != null)
+        if (this.orientationBreakpoints.containerObservationEnabled)
             this.armResizeObserver();
     }
     willUpdate(changed) {
-        if (changed.has('orientation') || changed.has('narrowOrientation') || changed.has('orientationBreakpoint')) {
-            this.updateEffectiveOrientation(this.baseEl?.clientWidth ?? Number.POSITIVE_INFINITY, false);
+        if (changed.has('orientationBreakpoint') || changed.has('orientationBreakpointBasis')) {
+            this.orientationBreakpoints.configure(this.orientationBreakpoint, this.orientationBreakpointBasis);
+        }
+        if (changed.has('orientation') ||
+            changed.has('narrowOrientation') ||
+            changed.has('orientationBreakpoint') ||
+            changed.has('orientationBreakpointBasis')) {
+            // Under 'viewport' basis, `configure()` just above (re-)armed `matchMedia` synchronously, so
+            // `isBelow()` below already reflects a live, authoritative read -- the same "fresh
+            // measurement" condition that earns an emit elsewhere (see this method's own doc comment).
+            // That's only a genuine transition to emit for on a *later* update, though: on this
+            // component's very first update `this.hasUpdated` is still false here (Lit only flips it
+            // after this update completes), and `_effectiveOrientation` has no committed prior value to
+            // transition away from yet, so the very first read must never emit -- matching this event's
+            // documented "changes the effective axis" contract. Under 'container' basis there's no fresh
+            // read here at all -- only `measuredInlineSize`, which `connectedCallback()` already seeded
+            // with a real reading of the host's own box before this first render (see its comment), so
+            // the first paint is already correct here too; the `ResizeObserver` callback's own fresh
+            // measurement still owns every subsequent transition.
+            this.updateEffectiveOrientation(this.baseEl?.clientWidth ?? this.measuredInlineSize, this.hasUpdated && this.orientationBreakpointBasis === 'viewport');
         }
     }
     updated(changed) {
-        if (changed.has('orientationBreakpoint')) {
-            if (this.orientationBreakpoint != null)
+        if (changed.has('orientationBreakpoint') || changed.has('orientationBreakpointBasis')) {
+            if (this.orientationBreakpoints.containerObservationEnabled)
                 this.armResizeObserver();
             else
                 this.resizeObserver?.disconnect();
@@ -155,10 +228,17 @@ export class LyraStepper extends LyraElement {
     /** Classifies a measured inline size into the effective layout/navigation axis and, only on an
      *  actual transition, applies it -- mirrors `<lr-split>`'s identically-shaped
      *  `updateEffectiveOrientation()`. `emitOnChange` is false for the property-driven re-derivation
-     *  in `willUpdate()` and true for the `ResizeObserver` callback's fresh measurement. */
+     *  in `willUpdate()` (except a genuine viewport-basis transition after the first update -- see
+     *  `willUpdate()`'s own doc comment) and true for the `ResizeObserver`/`matchMedia` callbacks'
+     *  own fresh measurements. */
     updateEffectiveOrientation(width, emitOnChange) {
-        const next = this.orientationBreakpoint != null && width < this.orientationBreakpoint ? this.narrowOrientation : this.orientation;
-        if (this.orientationBreakpoint != null) {
+        const next = this.orientationBreakpoints.isBelow(width)
+            ? this.narrowOrientation
+            : this.orientation;
+        // Gated on `active` (not `resolvedOrientationBreakpoint`) so a viewport-basis breakpoint still
+        // publishes this marker even though `resolved` is meaningless there -- see
+        // OrientationBreakpointController's class doc.
+        if (this.orientationBreakpoints.active) {
             this.setAttribute('data-effective-orientation', next);
         }
         else {
@@ -179,6 +259,7 @@ export class LyraStepper extends LyraElement {
             this.resizeObserver = new ResizeObserver((entries) => {
                 const box = entries[0]?.contentBoxSize?.[0];
                 const width = box ? box.inlineSize : (this.baseEl?.getBoundingClientRect().width ?? 0);
+                this.measuredInlineSize = width;
                 this.updateEffectiveOrientation(width, true);
             });
         }
@@ -188,7 +269,10 @@ export class LyraStepper extends LyraElement {
     selectStep(step, index) {
         if (step.state === 'disabled')
             return;
-        this.emit('lr-step-select', { index, id: step.id }, { cancelable: true });
+        // Not cancelable -- see the class doc's `lr-step-select` entry for why this component (a
+        // fully controlled, data-driven component like `lr-table`) has no default action of its own
+        // to gate behind `.defaultPrevented`.
+        this.emit('lr-step-select', { index, id: step.id });
     }
     focusStep(id) {
         const button = this.renderRoot.querySelector(`[part="step"][data-id="${CSS.escape(id)}"]`);
@@ -215,6 +299,7 @@ export class LyraStepper extends LyraElement {
             title=${step.title ?? nothing}
             @click=${() => this.selectStep(step, index)}
           >
+            ${step.icon ? html `<span part="step-icon" aria-hidden="true">${step.icon}</span>` : nothing}
             ${step.state === 'completed'
             ? checkmarkGlyph()
             : html `<span part="step-index">${index + 1}</span>`}
@@ -231,8 +316,11 @@ __decorate([
     property({ reflect: true })
 ], LyraStepper.prototype, "orientation", void 0);
 __decorate([
-    property({ type: Number, attribute: 'orientation-breakpoint' })
+    property({ attribute: 'orientation-breakpoint' })
 ], LyraStepper.prototype, "orientationBreakpoint", void 0);
+__decorate([
+    property({ reflect: true, attribute: 'orientation-breakpoint-basis' })
+], LyraStepper.prototype, "orientationBreakpointBasis", void 0);
 __decorate([
     property({ reflect: true, attribute: 'narrow-orientation' })
 ], LyraStepper.prototype, "narrowOrientation", void 0);

package/dist/components/layout/stepper/stepper.class.js.map

@@ -1 +1 @@
-{"version":3,"file":"stepper.class.js","sourceRoot":"","sources":["../../../../src/components/layout/stepper/stepper.class.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"stepper.class.js","sourceRoot":"","sources":["../../../../src/components/layout/stepper/stepper.class.ts"],"names":[],"mappings":"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"}

package/dist/components/layout/stepper/stepper.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"stepper.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/stepper/stepper.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBA+ElB,CAAC"}
+{"version":3,"file":"stepper.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/stepper/stepper.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAgJlB,CAAC"}

package/dist/components/layout/stepper/stepper.styles.js

@@ -6,11 +6,38 @@ export const styles = css `
   [part='base'] {
     display: flex;
     gap: var(--lr-space-m);
+    /* overflow-y is paired explicitly (never left implicit) alongside every overflow-x here and
+       below: per the CSS overflow spec, pinning one axis to a non-'visible' value forces the
+       other axis's *used* value to 'auto' too if left unset -- which can paint a thin, empty
+       phantom scrollbar on a classic (non-overlay) scrollbar platform even when the steps
+       actually fit (the exact bug already found and fixed once on lr-tabs). The mask-image edge
+       fade mirrors lr-tabs'/lr-segmented's identical horizontally-scrolling-row treatment; it is
+       reset to 'none' in the vertical-axis rules below so it can never bleed through a
+       higher-specificity match that doesn't also redeclare it (CSS cascades per-property, not
+       per-rule). This is intentionally static: a low-cost affordance, no scroll-position JS. */
     overflow-x: auto;
+    overflow-y: hidden;
+    -webkit-mask-image: linear-gradient(
+      to right,
+      transparent,
+      var(--lr-color-shadow) var(--lr-scroll-fade-size),
+      var(--lr-color-shadow) calc(100% - var(--lr-scroll-fade-size)),
+      transparent
+    );
+    mask-image: linear-gradient(
+      to right,
+      transparent,
+      var(--lr-color-shadow) var(--lr-scroll-fade-size),
+      var(--lr-color-shadow) calc(100% - var(--lr-scroll-fade-size)),
+      transparent
+    );
   }
   :host([orientation='vertical']) [part='base'] {
     flex-direction: column;
     overflow-x: visible;
+    overflow-y: visible;
+    -webkit-mask-image: none;
+    mask-image: none;
   }
   /* orientationBreakpoint's live axis -- only present while that feature is opted into (see
      stepper.ts's updateEffectiveOrientation()), so it can override the authored orientation rules
@@ -18,10 +45,28 @@ export const styles = css `
   :host([data-effective-orientation='vertical']) [part='base'] {
     flex-direction: column;
     overflow-x: visible;
+    overflow-y: visible;
+    -webkit-mask-image: none;
+    mask-image: none;
   }
   :host([data-effective-orientation='horizontal']) [part='base'] {
     flex-direction: row;
     overflow-x: auto;
+    overflow-y: hidden;
+    -webkit-mask-image: linear-gradient(
+      to right,
+      transparent,
+      var(--lr-color-shadow) var(--lr-scroll-fade-size),
+      var(--lr-color-shadow) calc(100% - var(--lr-scroll-fade-size)),
+      transparent
+    );
+    mask-image: linear-gradient(
+      to right,
+      transparent,
+      var(--lr-color-shadow) var(--lr-scroll-fade-size),
+      var(--lr-color-shadow) calc(100% - var(--lr-scroll-fade-size)),
+      transparent
+    );
   }
   [part='step'] {
     display: flex;
@@ -40,7 +85,10 @@ export const styles = css `
     opacity: var(--lr-opacity-disabled);
     cursor: not-allowed;
   }
-  [part='step']:hover:not([aria-disabled='true']) {
+  /* :where() zeroes the wrapped selectors' specificity contribution, leaving only :hover itself
+     -- (0,1,0) total, so a consumer's own ::part(step):hover override ((0,1,1)) always wins
+     without needing !important (mirrors lr-attachment-trigger's identical fix). */
+  :where([part='step']):hover:where(:not([aria-disabled='true'])) {
     background: var(--lr-color-brand-quiet);
     color: var(--lr-color-text);
   }
@@ -48,12 +96,29 @@ export const styles = css `
     outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);
     outline-offset: var(--lr-focus-ring-offset);
   }
+  /* Inline var() fallbacks rather than :host-declared properties, so a consumer can set them on any
+     ancestor without a :host declaration shadowing that. ::part(step)[data-state='current'] is
+     invalid CSS (an attribute selector cannot follow ::part), so recoloring the current/error state
+     used to require hijacking the shared --lr-color-text/--lr-color-danger/--lr-color-brand tokens,
+     which repainted everything else that reads them. Unset, each falls back to the token the rule
+     used before, so the rendering is unchanged. */
   [part='step'][data-state='current'] {
-    color: var(--lr-color-text);
-    font-weight: var(--lr-font-weight-semibold);
+    color: var(--lr-stepper-current-color, var(--lr-color-text));
+    font-weight: var(--lr-stepper-current-font-weight, var(--lr-font-weight-semibold));
   }
   [part='step'][data-state='error'] {
-    color: var(--lr-color-danger);
+    color: var(--lr-stepper-error-color, var(--lr-color-danger));
+  }
+  /* Rendered additionally to, never instead of, step-index/step-check below -- [part="step"]'s
+     own gap already spaces it from whichever of those follows, so no margin of its own is
+     needed (mirrors lr-segmented's segment-icon, minus its margin-inline-end, which compensates
+     for lr-segmented's [part="segment"] having no gap of its own). */
+  [part='step-icon'] {
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+    block-size: var(--lr-size-1em);
+    max-inline-size: var(--lr-size-2-5rem);
   }
   [part='step-index'] {
     display: inline-flex;
@@ -68,8 +133,8 @@ export const styles = css `
     flex: 0 0 auto;
   }
   [part='step'][data-state='current'] [part='step-index'] {
-    background: var(--lr-color-brand);
-    color: var(--lr-color-surface);
+    background: var(--lr-stepper-current-index-bg, var(--lr-color-brand));
+    color: var(--lr-stepper-current-index-color, var(--lr-color-surface));
   }
   [part='step-check'] {
     color: var(--lr-color-success);

package/dist/components/layout/stepper/stepper.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"stepper.styles.js","sourceRoot":"","sources":["../../../../src/components/layout/stepper/stepper.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+ExB,CAAC"}
+{"version":3,"file":"stepper.styles.js","sourceRoot":"","sources":["../../../../src/components/layout/stepper/stepper.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgJxB,CAAC"}

package/dist/components/layout/tabs/tabs.class.d.ts

@@ -43,6 +43,13 @@ export interface LyraTabsEventMap {
  * @csspart tab-icon - The optional leading-icon wrapper inside a tab button; only rendered when that tab has a matching `<id>-icon` sibling.
  * @csspart panel - A single `role="tabpanel"` wrapper (one per tab, hidden unless active).
  * @cssprop [--lr-scroll-fade-size=2rem] - Width of the static fade at each horizontal scroll edge.
+ * @cssprop [--lr-tabs-selected-color=var(--lr-color-brand)] - Text color of the selected tab.
+ *   Scoped to `[aria-selected='true']` only, so it never repaints a hovered unselected tab (which
+ *   is what hijacking `--lr-color-brand` library-wide used to do).
+ * @cssprop [--lr-tabs-indicator-color=var(--lr-color-brand)] - Color of the selected tab's
+ *   underline, themeable independently of its text color.
+ * @cssprop [--lr-tabs-hover-color=var(--lr-color-text)] - Text color of a hovered, non-disabled tab.
+ *   Independent of the selected-state props above.
  */
 export declare class LyraTabs extends LyraElement<LyraTabsEventMap> {
     static styles: import("lit").CSSResultGroup[];

package/dist/components/layout/tabs/tabs.class.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.class.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/tabs/tabs.class.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAG9E,OAAO,EAAE,WAAW,EAAE,MAAM,mCAAmC,CAAC;AAiBhE,MAAM,WAAW,gBAAgB;IAC/B,gBAAgB,EAAE,WAAW,CAAC;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CAClD;AACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,qBAAa,QAAS,SAAQ,WAAW,CAAC,gBAAgB,CAAC;IACzD,MAAM,CAAC,MAAM,iCAAgC;IAE7C,yHAAyH;IAC5F,MAAM,SAAM;IAEzC;;;yBAGqB;IACkB,eAAe,EAAE,MAAM,GAAG,IAAI,CAAQ;IAEpE,OAAO,CAAC,IAAI,CAAgB;IAErC,OAAO,CAAC,MAAM,CAAkB;IAChC,OAAO,CAAC,YAAY,CAAK;IACzB,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAqD;IAC/E,OAAO,CAAC,gBAAgB,CAAC,CAAmB;IAE5C,iBAAiB,IAAI,IAAI,CA6BxB;IAED,oBAAoB,IAAI,IAAI,CAI3B;IAED,sNAAsN;IACtN,OAAO,CAAC,QAAQ,CAkBd;IAEF,8TAA8T;IAC9T,SAAS,CAAC,UAAU,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI,CAKlD;IAED,0GAA0G;IAC1G,OAAO,CAAC,SAAS;IAMjB,0PAA0P;IAC1P,OAAO,CAAC,QAAQ;IAUhB,OAAO,CAAC,gBAAgB,CA+BtB;IAEF,OAAO,CAAC,KAAK;IAGb,OAAO,CAAC,OAAO;IAGf,OAAO,CAAC,MAAM;IAQd,sGAAsG;IACtG,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,SAAS;IAkBjB,OAAO,CAAC,WAAW;IAcnB,MAAM,IAAI,cAAc,CAiBvB;CACF;AAGD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,QAAQ,CAAC;KACrB;CACF"}
+{"version":3,"file":"tabs.class.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/tabs/tabs.class.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAG9E,OAAO,EAAE,WAAW,EAAE,MAAM,mCAAmC,CAAC;AAiBhE,MAAM,WAAW,gBAAgB;IAC/B,gBAAgB,EAAE,WAAW,CAAC;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CAClD;AACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AACH,qBAAa,QAAS,SAAQ,WAAW,CAAC,gBAAgB,CAAC;IACzD,MAAM,CAAC,MAAM,iCAAgC;IAE7C,yHAAyH;IAC5F,MAAM,SAAM;IAEzC;;;yBAGqB;IACkB,eAAe,EAAE,MAAM,GAAG,IAAI,CAAQ;IAEpE,OAAO,CAAC,IAAI,CAAgB;IAErC,OAAO,CAAC,MAAM,CAAkB;IAChC,OAAO,CAAC,YAAY,CAAK;IACzB,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAqD;IAC/E,OAAO,CAAC,gBAAgB,CAAC,CAAmB;IAE5C,iBAAiB,IAAI,IAAI,CA6BxB;IAED,oBAAoB,IAAI,IAAI,CAI3B;IAED,sNAAsN;IACtN,OAAO,CAAC,QAAQ,CAkBd;IAEF,8TAA8T;IAC9T,SAAS,CAAC,UAAU,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI,CAKlD;IAED,0GAA0G;IAC1G,OAAO,CAAC,SAAS;IAMjB,0PAA0P;IAC1P,OAAO,CAAC,QAAQ;IAUhB,OAAO,CAAC,gBAAgB,CA+BtB;IAEF,OAAO,CAAC,KAAK;IAGb,OAAO,CAAC,OAAO;IAGf,OAAO,CAAC,MAAM;IAQd,sGAAsG;IACtG,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,SAAS;IAkBjB,OAAO,CAAC,WAAW;IAcnB,MAAM,IAAI,cAAc,CAiBvB;CACF;AAGD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,QAAQ,CAAC;KACrB;CACF"}

package/dist/components/layout/tabs/tabs.class.js

@@ -49,6 +49,13 @@ import { styles } from './tabs.styles.js';
  * @csspart tab-icon - The optional leading-icon wrapper inside a tab button; only rendered when that tab has a matching `<id>-icon` sibling.
  * @csspart panel - A single `role="tabpanel"` wrapper (one per tab, hidden unless active).
  * @cssprop [--lr-scroll-fade-size=2rem] - Width of the static fade at each horizontal scroll edge.
+ * @cssprop [--lr-tabs-selected-color=var(--lr-color-brand)] - Text color of the selected tab.
+ *   Scoped to `[aria-selected='true']` only, so it never repaints a hovered unselected tab (which
+ *   is what hijacking `--lr-color-brand` library-wide used to do).
+ * @cssprop [--lr-tabs-indicator-color=var(--lr-color-brand)] - Color of the selected tab's
+ *   underline, themeable independently of its text color.
+ * @cssprop [--lr-tabs-hover-color=var(--lr-color-text)] - Text color of a hovered, non-disabled tab.
+ *   Independent of the selected-state props above.
  */
 export class LyraTabs extends LyraElement {
     constructor() {