@aceshooting/lyra-ui 9.1.1 → 11.0.0

package/dist/components/forms/select/select.styles.js

@@ -1,34 +1,16 @@
 import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/form-control.styles.js";const styles=css`
   :host {
     display: block;
-    /* Geometry from the shared form-control ladder (internal/sizes.styles.ts, pulled in ahead of
-       this sheet by select.class.ts): one scale for lr-button/lr-input/lr-select/lr-combobox/
-       lr-date-input instead of five hand-maintained copies. The ladder matches both spellings of
-       every tier in one selector list, so size="small" is size="s" here for free. */
     --_lr-select-trigger-padding: var(--lr-form-control-padding-block)
       var(--lr-form-control-padding-inline);
     --_lr-select-trigger-min-height: var(--lr-form-control-height);
     --_lr-select-font-size: var(--lr-form-control-font-size);
     --_lr-select-expand-size: var(--lr-size-1-75rem);
-    /* The trigger's own adornment gap is deliberately NOT taken from the ladder: it does not vary
-       by tier there either, and the ladder's value is tuned for a button's icon-beside-label
-       spacing, which is tighter than a field wants between an adornment and its label. */
     --_lr-select-gap: var(--lr-space-xs);
     --_lr-select-radius: var(--lr-form-control-radius);
     --_lr-select-tag-padding: var(--lr-space-2xs) var(--lr-space-xs);
     --_lr-select-tag-font-size: var(--lr-font-size-sm);
-    /* --lr-select-trigger-height is intentionally NOT declared here. It is a consumer-facing
-       escape hatch consumed only through the two var() fallbacks on [part='trigger'] below;
-       declaring any value for it (even 'auto') makes those fallback arms unreachable, which is
-       what previously left --lr-select-trigger-min-height as dead code. Leaving it genuinely
-       undeclared keeps both arms live, so the per-tier floor falls out of the fallback with no
-       extra specificity rules, and setting the property from anywhere (inline style, an ancestor,
-       an outer-tree rule) pins an exact height. */
-  }
-  /* Only the decorative expand glyph still needs per-tier rules: it sizes an icon box, not the
-     control row, so the shared ladder has nothing to say about it. Both spellings of the aliased
-     tier are matched here exactly as the ladder does, so size="small" can never take the s tier's
-     padding with the default tier's chevron. */
+  }
   :host([size="2xs"]),
   :host([size="xs"]) {
     --_lr-select-expand-size: var(--lr-size-1rem);
@@ -43,21 +25,11 @@ import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/for
     font-size: var(--lr-font-size-md-sm);
     font-weight: var(--lr-font-weight-semibold);
   }
-  /* :empty never matches here -- the part always contains a literal slot
-     child element regardless of assigned/text content -- so real emptiness
-     is tracked in JS (hasLabelSlot) and reflected via the hidden attribute
-     instead (same fix as [part~='hint']/[part='error'] below, and as
-     lr-combobox). Without this, the required-asterisk ::after below
-     (which attaches to this box) renders a stray ' *' with nothing before
-     it whenever label is unset. */
   [part="form-control-label"][hidden] {
     display: none;
   }
   ${formControlRequiredMarker}
 
-  /* Pill only retunes the shared radius property, so the single consumption point on
-     [part='trigger'] stays the only place a corner radius is read -- and a consumer's own
-     --lr-select-radius override (an inline style or an outer-tree rule) still wins over it. */
   :host([pill]) {
     --_lr-select-radius: var(--lr-radius-pill);
   }
@@ -66,11 +38,6 @@ import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/for
     border-color: transparent;
   }
 
-  /* Positioning context for [part='clear-button'], which is a *sibling* of the trigger rather
-     than a child: the trigger is a real <button>, and a nested button would be invalid
-     interactive-content nesting that no keyboard or AT user could ever reach. The wrapper is
-     display: block so the trigger's own box (and therefore every existing size/height contract)
-     is unchanged. */
   .control {
     position: relative;
     display: grid;
@@ -111,16 +78,9 @@ import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/for
     outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);
     outline-offset: var(--lr-focus-ring-offset);
   }
-  /* :where() zeroes the wrapped selectors' specificity contribution, keeping this at (0,1,0) --
-     matches lr-model-select's/lr-attachment-trigger's fixed convention, so a consumer's own
-     ::part(trigger):hover override ((0,1,1)) still wins without needing !important. */
   :where([part="trigger"]):hover:where(:not(:disabled)) {
     background: var(--lr-select-trigger-hover-bg, var(--lr-color-brand-quiet));
   }
-  /* Pressed: the same quiet brand tint the hover lands on, carried further toward
-     --lr-color-mix-partner (which follows the text colour), so the press is visibly deeper than
-     the hover instead of a repeat of it. Same :where() zeroing as the hover above, so a consumer's
-     ::part(trigger):active still wins. */
   :where([part="trigger"]):active:where(:not(:disabled)) {
     background: var(
       --lr-select-trigger-active-bg,
@@ -131,9 +91,6 @@ import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/for
       )
     );
   }
-  /* Appearance treatments. outlined is the base rule above, so only the other four restate
-     what they change. Each keeps the same box, border width and radius -- only the fill, the
-     border color and (for accent) the text color move. */
   :host([appearance="filled"]) [part="trigger"] {
     background: var(--lr-color-surface-raised);
     border-color: transparent;
@@ -150,8 +107,6 @@ import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/for
     border-color: transparent;
     color: var(--lr-color-on-brand);
   }
-  /* On the loud brand fill the quiet-text tokens below would sit at far too low a contrast --
-     the placeholder, the expand icon and the chips all ride the on-brand text color instead. */
   :host([appearance="accent"])
     [part="trigger"]
     .trigger-label[data-placeholder],
@@ -163,13 +118,11 @@ import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/for
   :host([appearance="accent"]) [part~="tag"] {
     background: color-mix(in srgb, currentColor 20%, transparent);
   }
-  /* Each appearance restates the hover feedback: the treatments above out-specify the shared
-     hover rule further up, so without these the pointer affordance would silently disappear for
-     every appearance except the default outlined. */
   :host([appearance="filled"])
     :where([part="trigger"]):hover:where(:not(:disabled)),
   :host([appearance="filled-outlined"])
     :where([part="trigger"]):hover:where(:not(:disabled)),
+  :host([filled]) :where([part="trigger"]):hover:where(:not(:disabled)),
   :host([appearance="plain"])
     :where([part="trigger"]):hover:where(:not(:disabled)) {
     background: var(--lr-select-trigger-hover-bg, var(--lr-color-brand-quiet));
@@ -178,6 +131,7 @@ import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/for
     :where([part="trigger"]):active:where(:not(:disabled)),
   :host([appearance="filled-outlined"])
     :where([part="trigger"]):active:where(:not(:disabled)),
+  :host([filled]) :where([part="trigger"]):active:where(:not(:disabled)),
   :host([appearance="plain"])
     :where([part="trigger"]):active:where(:not(:disabled)) {
     background: var(
@@ -189,10 +143,6 @@ import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/for
       )
     );
   }
-  /* The loud fill has no quieter tint to move to, so it shifts toward --lr-color-mix-partner --
-     which follows the text colour, i.e. darkens in the light theme and lightens in the dark one,
-     both times away from the fill. Same two shares every other pressed/hovered surface in the
-     library uses, rather than the hand-written 12% this pair carried before 8.0.0. */
   :host([appearance="accent"])
     :where([part="trigger"]):hover:where(:not(:disabled)) {
     background: var(
@@ -219,13 +169,10 @@ import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/for
     border-color: var(--lr-select-open-border-color, var(--lr-color-brand));
   }
   :host(:disabled) [part="trigger"] {
-    /* Shared library-wide disabled-state token -- see lr-combobox. */
     opacity: var(--lr-opacity-disabled);
     cursor: not-allowed;
   }
 
-  /* Same start/end adornment wrapper convention as lr-combobox/lr-date-input --
-     hidden (both the attribute and display:none) while nothing is slotted. */
   [part="start"],
   [part="end"] {
     flex: 0 0 auto;
@@ -246,17 +193,10 @@ import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/for
     text-overflow: ellipsis;
     white-space: nowrap;
   }
-  /* Placeholder text (no value selected yet) renders quieter, matching a
-     native <select>'s empty-option / combobox's placeholder styling. */
   .trigger-label[data-placeholder] {
     color: var(--lr-color-text-quiet);
   }
-  /* In multiple mode the real, independently-focusable tags are a sibling layered over the
-     trigger. The shared sr-only rule keeps this complete joined value available to assistive
-     technology without painting a duplicate underneath the chips. */
 
-  /* Multi-select chip row. Wraps rather than scrolls, so a long selection grows the trigger's
-     block size instead of hiding chips behind an invisible scroll axis. */
   [part="tags"] {
     display: flex;
     flex: 1 1 auto;
@@ -276,9 +216,6 @@ import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/for
     padding-block: var(--lr-form-control-padding-block);
     pointer-events: none;
   }
-  /* [part~=] because the overflow chip carries two part names ('tag tag-overflow'), and an exact
-     [part='tag'] match would skip it -- state lives in the part name because a state selector
-     after ::part() never matches. */
   [part~="tag"] {
     display: inline-flex;
     align-items: center;
@@ -338,10 +275,6 @@ import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/for
     cursor: not-allowed;
   }
 
-  /* Sits in the trigger's reserved inline-end band (see .control[data-clearable] below), outboard
-     of the expand icon: the trigger is a <button>, so the clear action cannot live inside it and
-     has to be overlaid from the wrapper instead. Reserving the band with padding rather than
-     overlapping keeps the trigger's own content clear of it in both directions. */
   [part="clear-button"] {
     position: absolute;
     z-index: var(--lr-layer-content);
@@ -352,8 +285,6 @@ import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/for
     align-items: center;
     justify-content: center;
     box-sizing: border-box;
-    /* A real, independently-focusable control, so it takes the full shared icon-button hit-area
-       floor rather than the capped decorative box [part='expand-icon'] uses. */
     min-inline-size: var(--lr-icon-button-size);
     min-block-size: var(--lr-icon-button-size);
     padding: var(--lr-space-2xs);
@@ -367,15 +298,9 @@ import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/for
   .control[data-clearable] [part="trigger"] {
     padding-inline-end: var(--lr-icon-button-size);
   }
-  /* Mirrors <lr-combobox>'s own [part='clear-button']:hover -- the same quiet-to-full text token
-     step, so mouse users get the feedback keyboard users get from the focus ring below. */
   [part="clear-button"]:hover {
     color: var(--lr-color-text);
   }
-  /* Pressed: the hover's quiet-to-full text step plus a fill, mixing the page surface toward
-     --lr-color-mix-partner at the stronger active share -- mirrors <lr-input>'s own
-     clear-button/password-toggle pressed rule, so the two controls feel identical under the thumb.
-     The button already carries --lr-select-radius, so the fill lands as a rounded chip. */
   [part="clear-button"]:active {
     color: var(--lr-color-text);
     background: color-mix(
@@ -399,7 +324,6 @@ import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/for
     align-items: center;
     justify-content: center;
     color: var(--lr-color-text-quiet);
-    /* Same real-touch-target reasoning as lr-combobox's expand-icon. */
     min-inline-size: min(
       var(--lr-icon-button-size),
       var(--lr-select-expand-size, var(--_lr-select-expand-size))
@@ -419,11 +343,6 @@ import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/for
     z-index: var(--lr-overlay-stack-index, var(--lr-layer-dropdown));
     box-sizing: border-box;
     max-block-size: var(--lr-size-18rem);
-    /* Per the CSS overflow spec, pinning one axis to a non-'visible' value forces the other
-       axis's used value to 'auto' too (never staying 'visible') -- an implicit overflow-x: auto
-       here risks a phantom horizontal scrollbar from sub-pixel rounding even though this listbox
-       only ever scrolls vertically. Pin overflow-x explicitly instead. Same fix as lr-tab-group'
-       tablist (overflow-x: auto; overflow-y: hidden;), just on the opposite axis. */
     overflow-y: auto;
     overflow-x: hidden;
     inline-size: max-content;
@@ -436,11 +355,7 @@ import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/for
     background: var(--lr-color-surface);
     border: var(--lr-border-width-thin) solid var(--lr-color-border);
     border-radius: var(--lr-radius);
-    /* Anchored overlay: a positioner-placed listbox floating over page content, not a modal layer. */
     box-shadow: var(--lr-shadow-m);
-    /* Closed state: invisible + slightly raised. visibility (not
-       display:none) so opacity/transform can actually transition; hit-testing
-       and a11y exposure stay off since this part is already position:fixed. */
     visibility: hidden;
     opacity: 0;
     transform: translateY(var(--lr-size-neg-0-25rem));
@@ -459,8 +374,6 @@ import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/for
       transform var(--show-duration, var(--lr-transition-fast)),
       visibility var(--show-duration, var(--lr-transition-fast));
   }
-  /* A disabled form control cannot retain even the outgoing visibility frame of an ordinary
-     close transition: fieldset-cascaded disablement uses :disabled too, unlike [disabled]. */
   :host(:disabled) [part="listbox"] {
     visibility: hidden;
     opacity: 0;
@@ -488,30 +401,7 @@ import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/for
     text-align: start;
     cursor: pointer;
   }
-  [part="option"]:hover,
-  [part="option"][data-active] {
-    /* Per-component indirection (with an inline var() fallback to the shared brand-quiet token)
-       -- same fix as lr-command-palette's/lr-notebook-viewer's identical active-row pattern -- so
-       a consumer can retheme just this row state without hijacking --lr-color-brand-quiet
-       library-wide. */
-    background: var(--lr-select-option-active-bg, var(--lr-color-brand-quiet));
-  }
-  /* Pressed row. A pointer-down on an option commits a selection and closes the listbox, so this
-     is the last frame the user sees before the panel goes away -- it has to read as deeper than
-     the hover it replaces, not the same. Mixes the same row tint (consumer override included)
-     toward --lr-color-mix-partner. */
-  [part="option"]:active {
-    background: color-mix(
-      in oklab,
-      var(--lr-select-option-active-bg, var(--lr-color-brand-quiet)),
-      var(--lr-color-mix-partner) var(--lr-color-mix-active)
-    );
-  }
   [part="option"][aria-selected="true"] {
-    /* Per-component indirection (inline var() fallbacks to the shared brand tokens, so unset
-       rendering is byte-for-byte unchanged) -- mirrors the active-bg indirection above and
-       lr-segmented's/lr-tab-group' selected-state tokens -- so a consumer can retheme just the
-       selected row without hijacking --lr-color-brand library-wide. */
     background: var(--lr-select-option-selected-bg, transparent);
     border-color: var(
       --lr-select-option-selected-border,
@@ -523,6 +413,17 @@ import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/for
       var(--lr-font-weight-semibold)
     );
   }
+  [part="option"]:hover,
+  [part="option"][data-active] {
+    background: var(--lr-select-option-active-bg, var(--lr-color-brand-quiet));
+  }
+  [part="option"]:active {
+    background: color-mix(
+      in oklab,
+      var(--lr-select-option-active-bg, var(--lr-color-brand-quiet)),
+      var(--lr-color-mix-partner) var(--lr-color-mix-active)
+    );
+  }
   [part="option"][aria-disabled="true"] {
     opacity: var(--lr-opacity-disabled);
     cursor: not-allowed;
@@ -581,7 +482,6 @@ import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/for
     font-size: var(--lr-font-size-sm);
     color: var(--lr-color-text-quiet);
   }
-  /* :empty never matches here either -- same fix as lr-combobox's hint/error. */
   [part~="hint"][hidden] {
     display: none;
   }

package/dist/components/forms/slider/slider.styles.js

@@ -1,9 +1,5 @@
 import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/form-control.styles.js";const styles=css`
   :host {
-    /* Every dimension below rides the shared size ladder (internal/sizes.styles.ts) so a slider
-       lines up with an lr-input/lr-select/lr-button of the same size. At the default "m" tier the
-       three knobs resolve to exactly the 1rem thumb, 0.25rem track and 1.5rem row the control
-       shipped with before it had a size at all. */
     --_lr-slider-thumb-size: calc(var(--lr-form-control-height) * 0.4);
     --_lr-slider-track-thickness: calc(
       var(--lr-slider-thumb-size, var(--_lr-slider-thumb-size)) * 0.25
@@ -11,9 +7,6 @@ import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/for
     --_lr-slider-row-size: calc(var(--lr-form-control-height) * 0.6);
     display: flex;
     align-items: center;
-    /* The hint is a full-basis flex item, so it wraps onto its own line
-       underneath the track row instead of squeezing it. Without wrapping
-       allowed the whole control would collapse into one over-long row. */
     flex-wrap: wrap;
     gap: var(--lr-slider-gap, var(--lr-space-s));
     inline-size: 100%;
@@ -72,8 +65,6 @@ import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/for
     background: var(--track-color-active, var(--lr-color-brand));
     translate: var(--track-active-offset, 0) 0;
   }
-  /* Tick marks for with-markers. Painted in the surface color so they stay
-     visible over both the unfilled track and the brand-colored indicator. */
   [part="markers"] {
     position: absolute;
     inset: 0;
@@ -121,37 +112,20 @@ import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/for
     background: var(--lr-slider-thumb-bg, var(--lr-color-brand));
     border: var(--lr-border-width-medium) solid
       var(--lr-slider-thumb-border-color, var(--lr-color-surface));
-    /* Resting chrome, not an overlay: a knob riding on its own track, so it sits one step above
-       the track rather than at the anchored-panel tier. */
     box-shadow: var(--lr-shadow-s);
     transform: translate(-50%, -50%);
     cursor: grab;
     touch-action: none;
   }
-  /* [part~='thumb'] is positioned with a logical inset-inline-start:<pct>% (set inline in
-     render()), which the browser anchors to the box's own *start* edge -- the physical right
-     edge under :dir(rtl). The fixed horizontal -50% above assumes an LTR left-edge anchor, so
-     it has to flip sign under RTL or the visible dot ends up a full thumb-width off from its
-     true track position. Mirrors lr-time-range's identical handle rule. */
   :host(:dir(rtl)) [part~="thumb"],
   :host(:dir(rtl)) [part="marker"] {
     transform: translate(50%, -50%);
   }
-  /* The visible dot is 16px at the default tier and smaller below it, under the ~24px
-     touch-target minimum. Widen the hit/drag area with a transparent ::before instead of growing
-     the thumb itself — onPointerMove never reads the thumb's own
-     getBoundingClientRect() (only [part="track"]'s rect and the pointer
-     coordinate), and a pointerdown inside the ::before still reports
-     e.target as the thumb element (pseudo-elements have no separate DOM
-     node/event target), so this is purely additive and cannot change the
-     drag math. Mirrors lr-time-range's identical handle::before. */
   [part~="thumb"]::before {
     content: "";
     position: absolute;
     inset-block-start: 50%;
     inset-inline-start: 50%;
-    /* A floor, not a fixed size: the drag area never drops below 28px however small the tier
-       makes the visible dot, and grows past it at the larger tiers. */
     inline-size: max(
       var(--lr-size-28px),
       calc(var(--lr-slider-thumb-size, var(--_lr-slider-thumb-size)) * 1.75)
@@ -163,11 +137,6 @@ import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/for
     transform: translate(-50%, -50%);
     border-radius: 50%;
   }
-  /* Same logical-inset-vs-physical-transform mismatch as the thumb itself: this enlarged
-     hit-area is centered on inset-inline-start: 50%, so its horizontal translate must flip
-     sign under RTL too or the actual drag hit zone detaches from the visible thumb. Mirrors
-     lr-time-range's identical handle::before rule. The pseudo-element is centered inside its
-     own thumb in both orientations, so this one does NOT vary with orientation. */
   :host(:dir(rtl)) [part~="thumb"]::before {
     transform: translate(50%, -50%);
   }
@@ -175,15 +144,7 @@ import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/for
     outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);
     outline-offset: var(--lr-focus-ring-offset);
   }
-  /* Mouse-hover feedback to match the focus-visible outline a keyboard user already sees --
-     a soft ring rather than a background/border change, since the thumb's background is already
-     the same brand color as the indicator (a hover recolor would read as no change at all).
-     Gated on :host(:not(:disabled):not([readonly])), the same disabled-state gating convention as
-     lr-radio's identical [part='circle'] hover rule, so neither a disabled nor a read-only thumb
-     shows interactive feedback for a gesture that cannot change anything. */
   :host(:not(:disabled):not([readonly])) [part~="thumb"]:hover {
-    /* Same elevation tier as the resting thumb -- hover adds the ring, it must not also change
-       how high the thumb reads. */
     box-shadow: var(--lr-shadow-s),
       0 0 0 var(--lr-slider-track-thickness, var(--_lr-slider-track-thickness))
         var(--lr-slider-thumb-hover-ring-color, var(--lr-color-brand-quiet));
@@ -197,9 +158,6 @@ import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/for
         );
     cursor: grabbing;
   }
-  /* Live value bubble for with-tooltip. It is anchored at the handle point and then moved to the
-     requested physical side. The numeric property becomes a length through the 1px design token;
-     Shoelace's length-valued --tooltip-offset remains a direct override. */
   [part~="tooltip"] {
     position: absolute;
     inset-block-start: 50%;
@@ -366,24 +324,17 @@ import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/for
   [part="references"][hidden] {
     display: none;
   }
-  /* This control accepts a required attribute and renders a visible label like every other field
-     in the library, so it marks it the same way -- the [hidden] rule above is what keeps the
-     marker from orphaning a stray glyph when no label is set. */
   ${formControlRequiredMarker}
   [part='value'] {
     flex: 0 0 auto;
     font-size: var(--lr-font-size-sm);
     color: var(--lr-color-text-quiet);
-    /* Numeric readout ticks as the thumb moves; tabular-nums keeps its own
-       inline-size stable instead of jittering the layout next to it. */
     font-variant-numeric: tabular-nums;
     min-inline-size: var(--lr-size-2-5ch);
     text-align: end;
   }
   [part="error"],
   [part~="hint"] {
-    /* Full basis so supporting text always occupies its own wrapped line under the
-       track row, however wide the track and readout are. */
     flex: 1 0 100%;
     min-inline-size: 0;
     max-inline-size: 100%;
@@ -398,10 +349,6 @@ import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/for
   [part~="hint"][hidden] {
     display: none;
   }
-  /* Vertical orientation. Declared after every horizontal rule so the shared
-     :host(:dir(rtl)) transforms above never win by source order. The value
-     axis moves to the block axis, with the domain minimum at the block end
-     (visually the bottom in a horizontal writing mode). */
   :host([orientation="vertical"]) {
     display: inline-flex;
     flex-direction: column;
@@ -485,8 +432,6 @@ import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/for
   :host(:disabled) [part~="thumb"] {
     cursor: not-allowed;
   }
-  /* A read-only slider stays fully legible and focusable (unlike a disabled
-     one), so only the "you can drag this" affordance is withdrawn. */
   :host([readonly]) [part~="thumb"] {
     cursor: default;
   }

package/dist/components/forms/swatch-picker/swatch-picker.class.d.ts

@@ -18,8 +18,6 @@ export interface SwatchPickerItem {
      * wins, so a consumer can customize one option without leaving gemstone mode. */
     readonly gemstone?: GemstoneKey;
 }
-/** @deprecated Use {@link SwatchPickerItem}. */
-export type SwatchOption = SwatchPickerItem;
 export type LyraSwatchPickerMode = 'swatch' | 'gemstone';
 export interface LyraSwatchPickerEventMap {
     'lr-change': CustomEvent<{
@@ -90,19 +88,12 @@ export declare class LyraSwatchPicker extends LyraElement<LyraSwatchPickerEventM
             attribute: boolean;
             noAccessor: boolean;
         };
-        options: {
-            attribute: boolean;
-            noAccessor: boolean;
-        };
     };
     private _items;
     private readonly itemSnapshots;
     /** The selectable color swatches, in display order. */
     get items(): readonly SwatchPickerItem[];
     set items(next: readonly SwatchPickerItem[]);
-    /** @deprecated Compatibility alias for `items`. */
-    get options(): readonly SwatchPickerItem[];
-    set options(next: readonly SwatchPickerItem[]);
     /** The currently selected option's `value`, or `null` when nothing is selected. */
     value: string | null;
     /** Visual size — scales the swatch hit-area and fill diameter proportionally, hit-area
@@ -119,8 +110,6 @@ export declare class LyraSwatchPicker extends LyraElement<LyraSwatchPickerEventM
      *  visible label context exists around it (e.g. no wrapping `<label>` or adjacent heading).
      *  The resolved name is set on the `role="radiogroup"` element. */
     accessibleLabel: string;
-    /** @deprecated Use `accessibleLabel` or the host `aria-label` attribute. */
-    label: string;
     /** Locks the whole picker: every rendered swatch becomes a genuinely `disabled` `<button>` (so
      *  it leaves the tab sequence and stops emitting activation), arrow/Home/End navigation and
      *  `click()` become no-ops, and the swatches dim to `--lr-opacity-disabled` with a `not-allowed`

package/dist/components/forms/swatch-picker/swatch-picker.class.js

@@ -1,4 +1,4 @@
-var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html,nothing}from"lit";import{property}from"lit/decorators.js";import{repeat}from"lit/directives/repeat.js";import{styleMap}from"lit/directives/style-map.js";import{LyraElement}from"../../../internal/lyra-element.js";import{renderInertPresentation}from"../../../internal/inert-presentation.js";import{isRtl}from"../../../internal/rtl.js";import{gemstoneGlyph}from"../../../theme/gemstones.js";import{styles}from"./swatch-picker.styles.js";import{sanitizeCssColor}from"../../../internal/safe-css.js";import{literalSetConverter}from"../../../internal/converters.js";const SWATCH_PICKER_MODE=literalSetConverter(["swatch","gemstone"],"swatch");class LyraSwatchPicker extends LyraElement{constructor(){super(...arguments),this._items=Object.freeze([]),this.itemSnapshots=new WeakMap,this.value=null,this.size="m",this._mode="swatch",this.accessibleLabel="",this.label="",this.disabled=!1,this.selectedIndex=-1,this.fallbackTabbableIndex=0,this.onKeyDown=e=>{if(this.disabled)return;const navigable=this.items;if(navigable.length===0)return;const currentIndex=this.keyboardOriginIndex(e),rtl=isRtl(this),forwardKey=rtl?"ArrowLeft":"ArrowRight",backwardKey=rtl?"ArrowRight":"ArrowLeft";let targetIndex;switch(e.key){case forwardKey:targetIndex=currentIndex<0?0:(currentIndex+1)%navigable.length;break;case backwardKey:targetIndex=currentIndex<0?navigable.length-1:(currentIndex-1+navigable.length)%navigable.length;break;case"Home":targetIndex=0;break;case"End":targetIndex=navigable.length-1;break;default:return}e.preventDefault();const target=navigable[targetIndex];this.select(target,targetIndex),this.focusSwatch(targetIndex)}}static{this.styles=[LyraElement.styles,styles]}static{this.properties={items:{attribute:!1,noAccessor:!0},options:{attribute:!1,noAccessor:!0}}}get items(){return this._items}set items(next){const old=this._items,snapshots=[];if(Array.isArray(next))for(let index=0;index<Math.min(next.length,512);index+=1)try{const raw=next[index];if(raw===null||typeof raw!="object")continue;const cached=this.itemSnapshots.get(raw);if(cached){snapshots.push(cached);continue}const value=raw.value,color=raw.color,label=raw.label;if(typeof value!="string"||typeof color!="string"||typeof label!="string")continue;const snapshot=Object.freeze({value,color,label,...raw.icon===void 0?{}:{icon:raw.icon},...raw.gemstone===void 0?{}:{gemstone:raw.gemstone}});this.itemSnapshots.set(raw,snapshot),snapshots.push(snapshot)}catch{}this._items=Object.freeze(snapshots),this.requestUpdate("items",old)}get options(){return this.items}set options(next){this.items=next}get mode(){return this._mode}set mode(next){const normalized=SWATCH_PICKER_MODE.normalizeReflected(this,"mode",next),old=this._mode;old!==normalized&&(this._mode=normalized,this.requestUpdate("mode",old))}resolveSelectedIndex(){if(this.value===null)return this.selectedOption=void 0,this.selectedIndex=-1,-1;if(this.selectedIndex>=0&&this.items[this.selectedIndex]===this.selectedOption&&this.selectedOption?.value===this.value)return this.selectedIndex;const identityIndex=this.selectedOption?this.items.indexOf(this.selectedOption):-1;return this.selectedIndex=identityIndex>=0&&this.items[identityIndex]?.value===this.value?identityIndex:this.items.findIndex(option=>option.value===this.value),this.selectedOption=this.selectedIndex>=0?this.items[this.selectedIndex]:void 0,this.selectedIndex}select(option,index){const previousIndex=this.resolveSelectedIndex();if(index===previousIndex&&option.value===this.value)return;const previousValue=this.value;this.selectedOption=option,this.selectedIndex=index,this.value=option.value,previousValue===option.value&&this.requestUpdate(),this.emit("lr-change",{value:option.value})}focusSwatch(index){this.renderRoot.querySelector(`[part="swatch"][data-index="${index}"]`)?.focus()}willUpdate(changed){if(super.willUpdate(changed),!changed.has("items"))return;const active=this.shadowRoot?.activeElement;if(active?.getAttribute("part")!=="swatch")return;const previousOptions=changed.get("items"),previousIndex=Number(active.dataset.index);if(!Number.isInteger(previousIndex)||previousIndex<0)return;const focusedOption=previousOptions?.[previousIndex],identityIndex=focusedOption===void 0?-1:this.items.indexOf(focusedOption),nextIndex=identityIndex>=0?identityIndex:Math.min(previousIndex,this.items.length-1);if(nextIndex<0){this.pendingFocusIndex=void 0,this.fallbackTabbableIndex=0;return}this.pendingFocusIndex=nextIndex,this.fallbackTabbableIndex=nextIndex}updated(changed){super.updated(changed),!(!changed.has("items")||this.pendingFocusIndex===void 0)&&this.scheduleAfterUpdate(()=>{const pendingIndex=this.pendingFocusIndex;this.pendingFocusIndex=void 0,!(pendingIndex===void 0||this.items.length===0)&&this.focusSwatch(Math.min(pendingIndex,this.items.length-1))},"restore-swatch-picker-focus")}tabbableSwatch(){const selectedIndex=this.resolveSelectedIndex(),tabbableIndex=selectedIndex!==-1?selectedIndex:Math.min(this.fallbackTabbableIndex,Math.max(0,this.items.length-1));return this.renderRoot?.querySelector(`[part="swatch"][data-index="${tabbableIndex}"]`)??null}click(){this.tabbableSwatch()?.click()}focus(options){this.tabbableSwatch()?.focus(options)}blur(){this.tabbableSwatch()?.blur()}keyboardOriginIndex(event){const fromEvent=event.composedPath().find(candidate2=>candidate2.nodeType===1&&candidate2.getAttribute?.("part")==="swatch"&&candidate2.getRootNode()===this.renderRoot),focused=this.shadowRoot?.activeElement,candidate=fromEvent??(focused?.getAttribute("part")==="swatch"?focused:void 0),index=Number(candidate?.dataset.index);return Number.isInteger(index)&&index>=0&&index<this.items.length?index:this.resolveSelectedIndex()}render(){const hostLabel=this.getAttribute("aria-label"),ariaLabel=hostLabel!==null?hostLabel:this.accessibleLabel||this.label||nothing,selectedIndex=this.resolveSelectedIndex(),tabbableIndex=selectedIndex!==-1?selectedIndex:Math.min(this.fallbackTabbableIndex,Math.max(0,this.items.length-1));return html`
+var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html,nothing}from"lit";import{property}from"lit/decorators.js";import{repeat}from"lit/directives/repeat.js";import{styleMap}from"lit/directives/style-map.js";import{LyraElement}from"../../../internal/lyra-element.js";import{renderInertPresentation}from"../../../internal/inert-presentation.js";import{isRtl}from"../../../internal/rtl.js";import{gemstoneGlyph}from"../../../theme/gemstones.js";import{styles}from"./swatch-picker.styles.js";import{sanitizeCssColor}from"../../../internal/safe-css.js";import{literalSetConverter}from"../../../internal/converters.js";const SWATCH_PICKER_MODE=literalSetConverter(["swatch","gemstone"],"swatch");class LyraSwatchPicker extends LyraElement{constructor(){super(...arguments),this._items=Object.freeze([]),this.itemSnapshots=new WeakMap,this.value=null,this.size="m",this._mode="swatch",this.accessibleLabel="",this.disabled=!1,this.selectedIndex=-1,this.fallbackTabbableIndex=0,this.onKeyDown=e=>{if(this.disabled)return;const navigable=this.items;if(navigable.length===0)return;const currentIndex=this.keyboardOriginIndex(e),rtl=isRtl(this),forwardKey=rtl?"ArrowLeft":"ArrowRight",backwardKey=rtl?"ArrowRight":"ArrowLeft";let targetIndex;switch(e.key){case forwardKey:targetIndex=currentIndex<0?0:(currentIndex+1)%navigable.length;break;case backwardKey:targetIndex=currentIndex<0?navigable.length-1:(currentIndex-1+navigable.length)%navigable.length;break;case"Home":targetIndex=0;break;case"End":targetIndex=navigable.length-1;break;default:return}e.preventDefault();const target=navigable[targetIndex];this.select(target,targetIndex),this.focusSwatch(targetIndex)}}static{this.styles=[LyraElement.styles,styles]}static{this.properties={items:{attribute:!1,noAccessor:!0}}}get items(){return this._items}set items(next){const old=this._items,snapshots=[];if(Array.isArray(next))for(let index=0;index<Math.min(next.length,512);index+=1)try{const raw=next[index];if(raw===null||typeof raw!="object")continue;const cached=this.itemSnapshots.get(raw);if(cached){snapshots.push(cached);continue}const value=raw.value,color=raw.color,label=raw.label;if(typeof value!="string"||typeof color!="string"||typeof label!="string")continue;const snapshot=Object.freeze({value,color,label,...raw.icon===void 0?{}:{icon:raw.icon},...raw.gemstone===void 0?{}:{gemstone:raw.gemstone}});this.itemSnapshots.set(raw,snapshot),snapshots.push(snapshot)}catch{}this._items=Object.freeze(snapshots),this.requestUpdate("items",old)}get mode(){return this._mode}set mode(next){const normalized=SWATCH_PICKER_MODE.normalizeReflected(this,"mode",next),old=this._mode;old!==normalized&&(this._mode=normalized,this.requestUpdate("mode",old))}resolveSelectedIndex(){if(this.value===null)return this.selectedOption=void 0,this.selectedIndex=-1,-1;if(this.selectedIndex>=0&&this.items[this.selectedIndex]===this.selectedOption&&this.selectedOption?.value===this.value)return this.selectedIndex;const identityIndex=this.selectedOption?this.items.indexOf(this.selectedOption):-1;return this.selectedIndex=identityIndex>=0&&this.items[identityIndex]?.value===this.value?identityIndex:this.items.findIndex(option=>option.value===this.value),this.selectedOption=this.selectedIndex>=0?this.items[this.selectedIndex]:void 0,this.selectedIndex}select(option,index){const previousIndex=this.resolveSelectedIndex();if(index===previousIndex&&option.value===this.value)return;const previousValue=this.value;this.selectedOption=option,this.selectedIndex=index,this.value=option.value,previousValue===option.value&&this.requestUpdate(),this.emit("lr-change",{value:option.value})}focusSwatch(index){this.renderRoot.querySelector(`[part="swatch"][data-index="${index}"]`)?.focus()}willUpdate(changed){if(super.willUpdate(changed),!changed.has("items"))return;const active=this.shadowRoot?.activeElement;if(active?.getAttribute("part")!=="swatch")return;const previousOptions=changed.get("items"),previousIndex=Number(active.dataset.index);if(!Number.isInteger(previousIndex)||previousIndex<0)return;const focusedOption=previousOptions?.[previousIndex],identityIndex=focusedOption===void 0?-1:this.items.indexOf(focusedOption),nextIndex=identityIndex>=0?identityIndex:Math.min(previousIndex,this.items.length-1);if(nextIndex<0){this.pendingFocusIndex=void 0,this.fallbackTabbableIndex=0;return}this.pendingFocusIndex=nextIndex,this.fallbackTabbableIndex=nextIndex}updated(changed){super.updated(changed),!(!changed.has("items")||this.pendingFocusIndex===void 0)&&this.scheduleAfterUpdate(()=>{const pendingIndex=this.pendingFocusIndex;this.pendingFocusIndex=void 0,!(pendingIndex===void 0||this.items.length===0)&&this.focusSwatch(Math.min(pendingIndex,this.items.length-1))},"restore-swatch-picker-focus")}tabbableSwatch(){const selectedIndex=this.resolveSelectedIndex(),tabbableIndex=selectedIndex!==-1?selectedIndex:Math.min(this.fallbackTabbableIndex,Math.max(0,this.items.length-1));return this.renderRoot?.querySelector(`[part="swatch"][data-index="${tabbableIndex}"]`)??null}click(){this.tabbableSwatch()?.click()}focus(options){this.tabbableSwatch()?.focus(options)}blur(){this.tabbableSwatch()?.blur()}keyboardOriginIndex(event){const fromEvent=event.composedPath().find(candidate2=>candidate2.nodeType===1&&candidate2.getAttribute?.("part")==="swatch"&&candidate2.getRootNode()===this.renderRoot),focused=this.shadowRoot?.activeElement,candidate=fromEvent??(focused?.getAttribute("part")==="swatch"?focused:void 0),index=Number(candidate?.dataset.index);return Number.isInteger(index)&&index>=0&&index<this.items.length?index:this.resolveSelectedIndex()}render(){const hostLabel=this.getAttribute("aria-label"),ariaLabel=hostLabel!==null?hostLabel:this.accessibleLabel||nothing,selectedIndex=this.resolveSelectedIndex(),tabbableIndex=selectedIndex!==-1?selectedIndex:Math.min(this.fallbackTabbableIndex,Math.max(0,this.items.length-1));return html`
       <div
         part="base"
         role="radiogroup"
@@ -22,4 +22,4 @@ var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3
               ${icon?renderInertPresentation(icon,{part:"swatch-icon"}):html`<span part="swatch-fill" aria-hidden="true"></span>`}
             </button>`})}
       </div>
-    `}}__decorate([property()],LyraSwatchPicker.prototype,"value",void 0),__decorate([property({reflect:!0})],LyraSwatchPicker.prototype,"size",void 0),__decorate([property({reflect:!0,converter:SWATCH_PICKER_MODE})],LyraSwatchPicker.prototype,"mode",null),__decorate([property({attribute:"aria-label"})],LyraSwatchPicker.prototype,"accessibleLabel",void 0),__decorate([property()],LyraSwatchPicker.prototype,"label",void 0),__decorate([property({type:Boolean,reflect:!0})],LyraSwatchPicker.prototype,"disabled",void 0);export{LyraSwatchPicker};
+    `}}__decorate([property()],LyraSwatchPicker.prototype,"value",void 0),__decorate([property({reflect:!0})],LyraSwatchPicker.prototype,"size",void 0),__decorate([property({reflect:!0,converter:SWATCH_PICKER_MODE})],LyraSwatchPicker.prototype,"mode",null),__decorate([property({attribute:"aria-label"})],LyraSwatchPicker.prototype,"accessibleLabel",void 0),__decorate([property({type:Boolean,reflect:!0})],LyraSwatchPicker.prototype,"disabled",void 0);export{LyraSwatchPicker};