@aceshooting/lyra-ui 9.1.1 → 11.0.0

package/dist/components/layout/responsive-panel/responsive-panel.styles.js

@@ -5,10 +5,6 @@ import{css}from"lit";const styles=css`
     max-inline-size: 100%;
   }
 
-  /* [part="base"] is display:none whenever the panel isn't open, in both
-     presentations -- a docked (inline) panel can be toggled closed just like
-     an overlay one, it just doesn't need backdrop/focus-trap/scroll-lock
-     mechanics to do it. */
   [part='base'] {
     display: none;
     min-inline-size: 0;
@@ -23,8 +19,6 @@ import{css}from"lit";const styles=css`
     inset: 0;
     z-index: var(--lr-overlay-stack-index, var(--lr-layer-modal));
   }
-  /* Bottom-sheet anchors its panel to the block-end edge instead of
-     stretching it full-height like fullscreen does. */
   :host([variant='bottom-sheet'][open]) [part='base'].overlay {
     align-items: flex-end;
   }
@@ -45,18 +39,12 @@ import{css}from"lit";const styles=css`
     background: var(--lr-color-surface);
   }
 
-  /* Inline (docked) presentation: a normal panel in the page's layout flow,
-     bordered like a card so it reads as a distinct region. */
   [part='base']:not(.overlay) [part='panel'] {
     border: var(--lr-border-width-thin) solid var(--lr-color-border);
     border-radius: var(--lr-radius);
     overflow: auto;
   }
 
-  /* Overlay/fullscreen (default variant): the panel fills the entire
-     viewport edge-to-edge -- no backdrop is visible around it, but the
-     backdrop element still renders/still matters for the shared
-     Escape/backdrop-click dismissal wiring described on the class. */
   [part='base'].overlay [part='panel'] {
     inline-size: 100%;
     block-size: 100%;
@@ -65,16 +53,10 @@ import{css}from"lit";const styles=css`
     padding-block-end: var(--lr-safe-area-bottom);
     padding-inline-start: var(--lr-safe-area-inline-start);
     padding-inline-end: var(--lr-safe-area-inline-end);
-    /* Only the OVERLAY presentations repaint the panel: docked/inline is resting chrome in the
-       page's own flow and must keep the page surface, while an overlay sits over a scrim and in
-       dark mode would otherwise be the same near-black as the page behind it. The bottom-sheet
-       rule below narrows this same selector, so it inherits both declarations. */
     background: var(
       --lr-responsive-panel-overlay-panel-bg,
       var(--lr-color-surface-overlay)
     );
-    /* Modal layer, lower step: the panel is flush with every viewport edge (bottom-sheet with all
-       but one), so there is no free edge for a deeper shadow to read against. */
     box-shadow: var(
       --lr-responsive-panel-overlay-panel-shadow,
       var(--lr-shadow-l)
@@ -82,21 +64,12 @@ import{css}from"lit";const styles=css`
     overflow: auto;
   }
 
-  /* Overlay/bottom-sheet: a partial-height sheet, rounded only on the top
-     edge, that leaves the backdrop (and whatever page content sits behind
-     it) visible above it. */
   :host([variant='bottom-sheet']) [part='base'].overlay [part='panel'] {
     block-size: auto;
     max-block-size: var(--lr-responsive-panel-sheet-max-block-size, 85vh);
     border-start-start-radius: var(--lr-radius);
     border-start-end-radius: var(--lr-radius);
   }
-  /* Dynamic-viewport refinement of the clamp above, so a mobile browser's
-     collapsing address bar doesn't leave the sheet taller than the visible
-     viewport. Guarded by @supports rather than written as a second plain
-     declaration: once the value comes from a custom property, an unsupported
-     dvh unit fails at computed-value time and resets max-block-size to none
-     instead of falling back to the preceding vh declaration. */
   @supports (max-block-size: 1dvh) {
     :host([variant='bottom-sheet']) [part='base'].overlay [part='panel'] {
       max-block-size: var(--lr-responsive-panel-sheet-max-block-size, 85dvh);

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

@@ -3,11 +3,6 @@ import{css}from"lit";const styles=css`
     display: block;
     min-inline-size: 0;
     max-inline-size: 100%;
-    /* --lr-scroller-shadow-color/-size are the Lyra-prefixed aliases of the upstream
-       --shadow-color/--shadow-size cssprops (see the class JSDoc) -- resolved once here so every
-       edge-shadow rule below reads one effective value instead of repeating the full three-level
-       fallback chain at each use site, same indirection lr-split-panel/lr-dock-panel already use
-       for their own component-scoped tokens. */
     --_lr-scroller-effective-shadow-color: var(
       --lr-scroller-shadow-color,
       var(--shadow-color, var(--lr-color-surface))
@@ -113,11 +108,6 @@ import{css}from"lit";const styles=css`
   }
 
   [part~="control"] {
-    /* Keep the glyph-sized control compact by default (--lr-scroller-control-size
-       is a consumer-tunable custom property, not this floor) while still giving the
-       interactive box the shared minimum target size -- same "small glyph, padded hit
-       box" pattern as lr-code-block's/lr-json-viewer's [part='toggle']. Covers
-       both previous and next (the shared part on both, per csspart doc above). */
     display: inline-grid;
     place-items: center;
     inline-size: var(--lr-scroller-control-size, var(--lr-size-2rem));
@@ -136,8 +126,6 @@ import{css}from"lit";const styles=css`
     background: var(--lr-color-brand-quiet);
   }
 
-  /* Held down, the control scrolls repeatedly, so the press is the long-lived state here rather
-     than an instant -- the deeper mix of the same brand-quiet fill marks it for its duration. */
   [part~="control"]:active:not(:disabled) {
     background: color-mix(
       in oklab,
@@ -146,19 +134,11 @@ import{css}from"lit";const styles=css`
     );
   }
 
-  /* no-pressed-state: the viewport is a scroll port, not a target -- pressing it activates
-     nothing, and :active matches the ancestors of whatever was pressed, so clicking any slotted
-     item would flash this outline around the whole strip. */
   [part="viewport"]:hover {
     outline: var(--lr-border-width-thin) solid var(--lr-color-border);
     outline-offset: var(--lr-focus-ring-offset);
   }
 
-  /* previous/next are the same rendered button as [part='control'] above (each
-     button's part attribute carries both tokens, e.g. part="control previous", so
-     this needs the token-matching ~= form, not =, to actually hit it) -- this
-     restates the identical floor directly against each individual part name too,
-     since a shadow-part guard lookup is per-name, not per-rendered-element. */
   [part~="previous"],
   [part~="next"] {
     min-inline-size: var(--lr-icon-button-size);

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

@@ -98,7 +98,13 @@ export declare class LyraSegmented extends LyraElement<LyraSegmentedEventMap> {
     size: LyraSize;
     private selectedItem?;
     private rehomeSegmentFocus;
-    constructor();
+    /** Gates the [part="base"] edge fade on the track genuinely overflowing, with one-sided/RTL-aware
+     *  logical-edge state -- see --lr-scroll-fade-size and segmented.styles.ts. Stored (rather than a
+     *  bare statement-expression call) so `updated()` can register each segment on the controller's
+     *  own `ResizeObserver` via `observeExtra()` below -- a segment's own intrinsic content (a longer
+     *  localized label, an icon loading in) can grow scrollWidth without [part="base"]'s own border
+     *  box changing at all, which the plain per-track observation alone cannot see. */
+    private scrollOverflow;
     private select;
     private segmentButtonAt;
     private focusItem;

package/dist/components/layout/segmented/segmented.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,state}from"lit/decorators.js";import{repeat}from"lit/directives/repeat.js";import{LyraElement}from"../../../internal/lyra-element.js";import{sizes}from"../../../internal/sizes.styles.js";import{isRtl}from"../../../internal/rtl.js";import{prefersReducedMotion}from"../../../internal/motion.js";import{observeScrollOverflow}from"../../../internal/scroll-overflow.js";import{hostAriaLabel}from"../../../internal/a11y.js";import{styles}from"./segmented.styles.js";import{activeElementIn}from"../../../internal/active-element.js";const MAX_SEGMENTED_ITEMS=256;function snapshotSegmentedItems(value){try{if(!Array.isArray(value))return Object.freeze([])}catch{return Object.freeze([])}const seenValues=new Set,normalized=[];let length=0;try{length=Math.min(value.length,MAX_SEGMENTED_ITEMS)}catch{return Object.freeze(normalized)}for(let index=0;index<length;index+=1)try{const candidate=value[index];if(!candidate||typeof candidate!="object")continue;const record=candidate,itemValue=record.value,label=record.label,disabled=record.disabled,icon=record.icon;if(typeof itemValue!="string"||itemValue.length===0||itemValue!==itemValue.trim()||seenValues.has(itemValue)||typeof label!="string"||disabled!==void 0&&typeof disabled!="boolean")continue;seenValues.add(itemValue),normalized.push(Object.freeze({value:itemValue,label,...icon!==void 0?{icon}:{},...disabled!==void 0?{disabled}:{}}))}catch{}return Object.freeze(normalized)}class LyraSegmented extends LyraElement{static{this.styles=[LyraElement.styles,sizes,styles]}get items(){return this.effectiveItems}set items(value){const previous=this.effectiveItems;this.effectiveItems=snapshotSegmentedItems(value),this.requestUpdate("items",previous)}constructor(){super(),this.effectiveItems=Object.freeze([]),this.value="",this.label="",this.size="m",this.rehomeSegmentFocus=!1,this.onKeyDown=e=>{const navigable=this.items.map((item,index)=>({item,index})).filter(({item})=>!item.disabled);if(navigable.length===0)return;const focusedIndex=this.keyboardOriginIndex(e),selectedIndex=this.items.indexOf(this.selectedItem),originIndex=focusedIndex>=0?focusedIndex:selectedIndex,currentIndex=selectedIndex<0&&this.segmentButtonAt(originIndex)?.tabIndex===0?-1:navigable.findIndex(({index})=>index===originIndex),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.item),this.focusItem(target.index)},observeScrollOverflow(this,()=>this.renderRoot.querySelector('[part="base"]'))}select(item){if(item.disabled||item===this.selectedItem)return;const valueChanged=item.value!==this.value;this.selectedItem=item,valueChanged&&(this.value=item.value,this.emit("lr-change",{value:item.value}))}segmentButtonAt(index){return this.renderRoot.querySelector(`[part="segment"][data-index="${index}"]`)}focusItem(index){this.segmentButtonAt(index)?.focus()}scrollToValue(value){const index=this.items.findIndex(item=>item.value===value);this.segmentButtonAt(index)?.scrollIntoView({block:"nearest",inline:"nearest",behavior:prefersReducedMotion(this.ownerDocument.defaultView)?"auto":"smooth"})}updated(changed){super.updated(changed),this.rehomeSegmentFocus&&(this.rehomeSegmentFocus=!1,this.renderRoot.querySelector('[part="segment"][tabindex="0"]')?.focus()),changed.has("value")&&changed.get("value")!==void 0&&this.value&&this.scrollToValue(this.value)}willUpdate(changed){super.willUpdate(changed),changed.has("items")&&activeElementIn(this.renderRoot)?.getAttribute("part")==="segment"&&(this.rehomeSegmentFocus=!0),(changed.has("value")||changed.has("items")&&(!this.selectedItem||!this.items.includes(this.selectedItem)||this.selectedItem.value!==this.value||this.selectedItem.disabled))&&(this.selectedItem=this.items.find(item=>item.value===this.value&&!item.disabled))}keyboardOriginIndex(event){const fromEvent=event.composedPath().find(candidate2=>candidate2.nodeType===1&&candidate2.getAttribute?.("part")==="segment"&&candidate2.getRootNode()===this.renderRoot),focused=activeElementIn(this.renderRoot),candidate=fromEvent??(focused?.getAttribute("part")==="segment"?focused:void 0),index=Number(candidate?.dataset.index);return Number.isInteger(index)&&index>=0&&index<this.items.length?index:-1}render(){const ariaLabel=hostAriaLabel(this)??(this.label||nothing),selectedIndex=this.items.indexOf(this.selectedItem),fallbackSelectedIndex=selectedIndex>=0?selectedIndex:this.items.findIndex(item=>item.value===this.value&&!item.disabled),tabbableIndex=fallbackSelectedIndex!==-1?fallbackSelectedIndex:this.items.findIndex(item=>!item.disabled);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,state}from"lit/decorators.js";import{repeat}from"lit/directives/repeat.js";import{LyraElement}from"../../../internal/lyra-element.js";import{sizes}from"../../../internal/sizes.styles.js";import{isRtl}from"../../../internal/rtl.js";import{prefersReducedMotion}from"../../../internal/motion.js";import{observeScrollOverflow}from"../../../internal/scroll-overflow.js";import{hostAriaLabel}from"../../../internal/a11y.js";import{styles}from"./segmented.styles.js";import{activeElementIn}from"../../../internal/active-element.js";const MAX_SEGMENTED_ITEMS=256;function snapshotSegmentedItems(value){try{if(!Array.isArray(value))return Object.freeze([])}catch{return Object.freeze([])}const seenValues=new Set,normalized=[];let length=0;try{length=Math.min(value.length,MAX_SEGMENTED_ITEMS)}catch{return Object.freeze(normalized)}for(let index=0;index<length;index+=1)try{const candidate=value[index];if(!candidate||typeof candidate!="object")continue;const record=candidate,itemValue=record.value,label=record.label,disabled=record.disabled,icon=record.icon;if(typeof itemValue!="string"||itemValue.length===0||itemValue!==itemValue.trim()||seenValues.has(itemValue)||typeof label!="string"||disabled!==void 0&&typeof disabled!="boolean")continue;seenValues.add(itemValue),normalized.push(Object.freeze({value:itemValue,label,...icon!==void 0?{icon}:{},...disabled!==void 0?{disabled}:{}}))}catch{}return Object.freeze(normalized)}class LyraSegmented extends LyraElement{constructor(){super(...arguments),this.effectiveItems=Object.freeze([]),this.value="",this.label="",this.size="m",this.rehomeSegmentFocus=!1,this.scrollOverflow=observeScrollOverflow(this,()=>this.renderRoot.querySelector('[part="base"]')),this.onKeyDown=e=>{const navigable=this.items.map((item,index)=>({item,index})).filter(({item})=>!item.disabled);if(navigable.length===0)return;const focusedIndex=this.keyboardOriginIndex(e),selectedIndex=this.items.indexOf(this.selectedItem),originIndex=focusedIndex>=0?focusedIndex:selectedIndex,currentIndex=selectedIndex<0&&this.segmentButtonAt(originIndex)?.tabIndex===0?-1:navigable.findIndex(({index})=>index===originIndex),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.item),this.focusItem(target.index)}}static{this.styles=[LyraElement.styles,sizes,styles]}get items(){return this.effectiveItems}set items(value){const previous=this.effectiveItems;this.effectiveItems=snapshotSegmentedItems(value),this.requestUpdate("items",previous)}select(item){if(item.disabled||item===this.selectedItem)return;const valueChanged=item.value!==this.value;this.selectedItem=item,valueChanged&&(this.value=item.value,this.emit("lr-change",{value:item.value}))}segmentButtonAt(index){return this.renderRoot.querySelector(`[part="segment"][data-index="${index}"]`)}focusItem(index){this.segmentButtonAt(index)?.focus()}scrollToValue(value){const index=this.items.findIndex(item=>item.value===value);this.segmentButtonAt(index)?.scrollIntoView({block:"nearest",inline:"nearest",behavior:prefersReducedMotion(this.ownerDocument.defaultView)?"auto":"smooth"})}updated(changed){super.updated(changed),this.scrollOverflow.observeExtra(this.renderRoot.querySelectorAll('[part="segment"]')),this.rehomeSegmentFocus&&(this.rehomeSegmentFocus=!1,this.renderRoot.querySelector('[part="segment"][tabindex="0"]')?.focus()),changed.has("value")&&changed.get("value")!==void 0&&this.value&&this.scrollToValue(this.value)}willUpdate(changed){super.willUpdate(changed),changed.has("items")&&activeElementIn(this.renderRoot)?.getAttribute("part")==="segment"&&(this.rehomeSegmentFocus=!0),(changed.has("value")||changed.has("items")&&(!this.selectedItem||!this.items.includes(this.selectedItem)||this.selectedItem.value!==this.value||this.selectedItem.disabled))&&(this.selectedItem=this.items.find(item=>item.value===this.value&&!item.disabled))}keyboardOriginIndex(event){const fromEvent=event.composedPath().find(candidate2=>candidate2.nodeType===1&&candidate2.getAttribute?.("part")==="segment"&&candidate2.getRootNode()===this.renderRoot),focused=activeElementIn(this.renderRoot),candidate=fromEvent??(focused?.getAttribute("part")==="segment"?focused:void 0),index=Number(candidate?.dataset.index);return Number.isInteger(index)&&index>=0&&index<this.items.length?index:-1}render(){const ariaLabel=hostAriaLabel(this)??(this.label||nothing),selectedIndex=this.items.indexOf(this.selectedItem),fallbackSelectedIndex=selectedIndex>=0?selectedIndex:this.items.findIndex(item=>item.value===this.value&&!item.disabled),tabbableIndex=fallbackSelectedIndex!==-1?fallbackSelectedIndex:this.items.findIndex(item=>!item.disabled);return html`
       <div
         part="base"
         role="radiogroup"

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

@@ -1,16 +1,8 @@
 import{css}from"lit";const styles=css`
   :host {
     display: inline-flex;
-    /* Lets the host shrink below its row's max-content width when it's a flex/grid
-       item in a consumer's own narrow layout -- the default min-width:auto for flex
-       items would otherwise force the scroll container wide. */
     min-inline-size: 0;
     max-inline-size: 100%;
-    /* One ladder for the whole library (internal/sizes.styles.ts): the track floor, the segment
-       padding and the segment font size are the tier's own --lr-form-control-* values, so a toolbar
-       built with same-size controls shows this control at a matching height beside them, per the
-       class doc's own "flush beside those controls" promise. This component used to carry six
-       :host([size=...]) blocks of its own, on a scale that had drifted from that one. */
     --_lr-segmented-track-min-height: var(--lr-form-control-height);
     --_lr-segmented-segment-padding: var(--lr-form-control-padding-block)
       var(--lr-form-control-padding-inline);
@@ -22,10 +14,6 @@ import{css}from"lit";const styles=css`
     overflow-x: auto;
     overflow-y: hidden;
     min-inline-size: 0;
-    /* --lr-segmented-track-height is deliberately NEVER declared anywhere: an exact-height hatch
-       only works as an undeclared sentinel, so the fallback arm below can fall through to the
-       per-size --lr-segmented-track-min-height floor. Declaring it as "auto" on :host would be a
-       valid value that always wins, silently making the per-size floor dead code. */
     min-block-size: var(
       --lr-segmented-track-height,
       var(
@@ -40,13 +28,7 @@ import{css}from"lit";const styles=css`
     padding: var(--lr-segmented-track-padding, var(--lr-size-0-125rem));
     gap: var(--lr-segmented-track-gap, var(--lr-size-0-125rem));
   }
-  /* Edge fade, gated on the track actually overflowing -- ScrollOverflowController toggles
-     data-scroll-overflow from a real scrollWidth/clientWidth measurement. This used to be painted
-     unconditionally ("a low-cost affordance that needs no observers"), which is only harmless when
-     there IS overflow: at the 2rem-per-edge default a two-option row (Overall | Daily) is narrower
-     than its own two fades, so both labels rendered half-transparent and the control read as
-     disabled. */
-  [part="base"][data-scroll-overflow] {
+  [part="base"][data-scroll-overflow]:where([data-scroll-start][data-scroll-end]) {
     -webkit-mask-image: linear-gradient(
       to right,
       transparent,
@@ -62,6 +44,72 @@ import{css}from"lit";const styles=css`
       transparent
     );
   }
+  [part="base"][data-scroll-overflow]:where(
+      [data-scroll-end]:not([data-scroll-start])
+    ) {
+    -webkit-mask-image: linear-gradient(
+      to right,
+      var(--lr-mask-opaque),
+      var(--lr-mask-opaque) calc(100% - var(--lr-scroll-fade-size)),
+      transparent
+    );
+    mask-image: linear-gradient(
+      to right,
+      var(--lr-mask-opaque),
+      var(--lr-mask-opaque) calc(100% - var(--lr-scroll-fade-size)),
+      transparent
+    );
+  }
+  [part="base"][data-scroll-overflow]:where(
+      [data-scroll-start]:not([data-scroll-end])
+    ) {
+    -webkit-mask-image: linear-gradient(
+      to right,
+      transparent,
+      var(--lr-mask-opaque) var(--lr-scroll-fade-size),
+      var(--lr-mask-opaque)
+    );
+    mask-image: linear-gradient(
+      to right,
+      transparent,
+      var(--lr-mask-opaque) var(--lr-scroll-fade-size),
+      var(--lr-mask-opaque)
+    );
+  }
+  :host(:dir(rtl))
+    [part="base"][data-scroll-overflow]:where(
+      [data-scroll-end]:not([data-scroll-start])
+    ) {
+    -webkit-mask-image: linear-gradient(
+      to right,
+      transparent,
+      var(--lr-mask-opaque) var(--lr-scroll-fade-size),
+      var(--lr-mask-opaque)
+    );
+    mask-image: linear-gradient(
+      to right,
+      transparent,
+      var(--lr-mask-opaque) var(--lr-scroll-fade-size),
+      var(--lr-mask-opaque)
+    );
+  }
+  :host(:dir(rtl))
+    [part="base"][data-scroll-overflow]:where(
+      [data-scroll-start]:not([data-scroll-end])
+    ) {
+    -webkit-mask-image: linear-gradient(
+      to right,
+      var(--lr-mask-opaque),
+      var(--lr-mask-opaque) calc(100% - var(--lr-scroll-fade-size)),
+      transparent
+    );
+    mask-image: linear-gradient(
+      to right,
+      var(--lr-mask-opaque),
+      var(--lr-mask-opaque) calc(100% - var(--lr-scroll-fade-size)),
+      transparent
+    );
+  }
   [part="segment"] {
     min-inline-size: 0;
     border: none;
@@ -92,22 +140,11 @@ import{css}from"lit";const styles=css`
     opacity: var(--lr-opacity-disabled);
     cursor: not-allowed;
   }
-  /* Reads its own prop, not the shared --lr-color-text token the selected state used to share:
-     recoloring the selected pill must never repaint hovered-unselected segments with it.
-     :where() zeroes the wrapped selectors' specificity contribution, leaving only :hover itself
-     -- (0,1,0) total, functionally identical selection to the unwrapped shape but now losing (on
-     the pseudo-element tiebreak) to a consumer's own ::part(segment):hover override ((0,1,1))
-     without that consumer needing !important -- mirrors lr-attachment-trigger's identical fix. */
   :where([part="segment"]):hover:where(
       :not([aria-disabled="true"]):not([aria-checked="true"])
     ) {
     color: var(--lr-segmented-hover-color, var(--lr-color-text));
   }
-  /* Hover lifts only the label colour on this control, so the pressed state has to add a surface
-     to be a visible step past it: the segment's own transparent fill mixed toward
-     --lr-color-mix-partner, which lands as the partner colour at --lr-color-mix-active alpha over
-     whatever track colour the theme is using. Same :not() guards, and the same zeroed specificity,
-     as the hover rule it twins. */
   :where([part="segment"]):active:where(
       :not([aria-disabled="true"]):not([aria-checked="true"])
     ) {
@@ -128,10 +165,6 @@ import{css}from"lit";const styles=css`
     outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);
     outline-offset: var(--lr-focus-ring-offset);
   }
-  /* Every value here is an inline var() fallback rather than a :host-declared property on purpose:
-     :host is re-declared per size tier, which would shadow any value a consumer sets on an
-     ancestor -- exactly what these hooks exist to allow. Unset, each falls back to the token the
-     rule used before the hooks existed, so the rendering is unchanged. */
   [part="segment"][aria-checked="true"] {
     background: var(--lr-segmented-selected-bg, var(--lr-color-surface));
     color: var(--lr-segmented-selected-color, var(--lr-color-text));
@@ -139,12 +172,11 @@ import{css}from"lit";const styles=css`
       --lr-segmented-selected-font-weight,
       var(--lr-font-weight-semibold)
     );
-    /* Smallest step in the scale: the checked segment is a thumb lifted a hair off its own track,
-       the shallowest piece of resting chrome the library has. */
     box-shadow: var(--lr-segmented-selected-shadow, var(--lr-shadow-xs));
   }
   @media (forced-colors: active) {
-    [part="base"][data-scroll-overflow] {
+    [part="base"][data-scroll-overflow],
+    :host(:dir(rtl)) [part="base"][data-scroll-overflow] {
       -webkit-mask-image: none;
       mask-image: none;
     }

package/dist/components/layout/split-panel/split-panel.styles.js

@@ -48,7 +48,7 @@ import{css}from"lit";const styles=css`
   [part~='panel'] {
     min-inline-size: 0;
     min-block-size: 0;
-    overflow: hidden;
+    overflow: auto;
     overflow-wrap: anywhere;
   }
 
@@ -92,8 +92,6 @@ import{css}from"lit";const styles=css`
     user-select: none;
   }
 
-  /* Transparent hit slop preserves the visible divider width while maintaining Lyra's minimum
-     interactive target. Generated content belongs to the divider's own hit-test box. */
   [part~='divider']::before {
     content: '';
     position: absolute;
@@ -119,10 +117,6 @@ import{css}from"lit";const styles=css`
     inset-inline: 0;
   }
 
-  /* --lr-split-panel-divider-hover-color/-active-color deliberately don't reuse the bare
-     --lr-color-brand/--lr-color-border-strong tokens directly -- the divider's drag-affordance
-     accent is its own visual purpose that happens to default to those shared colors, not tied to
-     them by design, mirroring lr-dock-panel's [part='handle'] hover/active tokens. */
   [part~='divider']:where(:hover) {
     background: var(--lr-split-panel-divider-hover-color, var(--lr-color-brand));
   }

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

@@ -165,7 +165,14 @@ export declare class LyraStepper extends LyraElement<LyraStepperEventMap> {
     /** Owns breakpoint resolution, basis selection, and the viewport `MediaQueryList` lifecycle
      *  (including teardown on disconnect) -- see `OrientationBreakpointController`. */
     private orientationBreakpoints;
-    constructor();
+    /** Gates the horizontal [part="base"] edge fade on the track genuinely overflowing, with
+     *  one-sided/RTL-aware logical-edge state -- see --lr-scroll-fade-size and stepper.styles.ts.
+     *  Independent of the orientation controller above: the vertical rules zero the mask out
+     *  regardless of this attribute. Stored (rather than a bare statement-expression call) so
+     *  `updated()` can register each step on the controller's own `ResizeObserver` via
+     *  `observeExtra()` below -- a step's own intrinsic content (a longer localized label, an icon
+     *  loading in) can grow scrollWidth without [part="base"]'s own border box changing at all. */
+    private scrollOverflow;
     /** The live layout/navigation axis after applying `orientationBreakpoint` -- identical to
      *  `orientation` whenever that's unset. See the class doc. */
     get effectiveOrientation(): LyraOrientation;

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

@@ -12,7 +12,7 @@ var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3
     focusable="false"
   >
     <polyline points="5 12.5 10 17.5 19 6.5"></polyline>
-  </svg>`}class LyraStepper extends LyraElement{static{this.styles=[LyraElement.styles,styles]}get steps(){return this.effectiveSteps}set steps(value){const previous=this.effectiveSteps;this.effectiveSteps=snapshotSteps(value),this.requestUpdate("steps",previous)}constructor(){super(),this.effectiveSteps=Object.freeze([]),this.orientation="horizontal",this.orientationBreakpointBasis="container",this.narrowOrientation="vertical",this.wrapLabels=!1,this.accessibleLabel=null,this._effectiveOrientation="horizontal",this.resizeObserverGeneration=0,this.measuredInlineSize=Number.POSITIVE_INFINITY,this.orientationBreakpoints=new OrientationBreakpointController(this,()=>this.updateEffectiveOrientation(this.baseEl?.clientWidth??this.measuredInlineSize,!0)),this.onKeyDown=e=>{const navigable=this.steps.map((step,index)=>({step,index})).filter(({step})=>!step.disabled);if(navigable.length===0)return;const focused=activeElementIn(this.renderRoot),focusedIndex=Number(focused?.dataset.index),currentIndex=navigable.findIndex(item=>item.index===focusedIndex),vertical=this.effectiveOrientation==="vertical",rtl=!vertical&&isRtl(this),forwardKey=vertical?"ArrowDown":rtl?"ArrowLeft":"ArrowRight",backwardKey=vertical?"ArrowUp":rtl?"ArrowRight":"ArrowLeft";let targetIndex;switch(e.key){case forwardKey:targetIndex=Math.min(navigable.length-1,(currentIndex<0?-1:currentIndex)+1);break;case backwardKey:targetIndex=Math.max(0,(currentIndex<0?1:currentIndex)-1);break;case"Home":targetIndex=0;break;case"End":targetIndex=navigable.length-1;break;case"Enter":case" ":if(e.preventDefault(),currentIndex>=0){const target=navigable[currentIndex];this.selectStep(target.step,target.index)}return;default:return}e.preventDefault(),this.focusStep(navigable[targetIndex].index)},observeScrollOverflow(this,()=>this.baseEl)}get effectiveOrientation(){return this._effectiveOrientation}connectedCallback(){super.connectedCallback();const hostWidth=this.getBoundingClientRect().width;hostWidth>0&&(this.measuredInlineSize=hostWidth),this.orientationBreakpoints.containerObservationEnabled&&this.armResizeObserver()}disconnectedCallback(){super.disconnectedCallback(),this.resetResizeObserver()}adoptedCallback(){super.adoptedCallback(),this.resetResizeObserver()}firstUpdated(changed){super.firstUpdated(changed),this.orientationBreakpoints.containerObservationEnabled&&this.armResizeObserver()}willUpdate(changed){if(super.willUpdate(changed),changed.has("steps")){const focusedStep=activeElementIn(this.renderRoot);focusedStep?.getAttribute("part")==="step"&&(this.pendingStepFocus={stepId:focusedStep.dataset.stepId??"",index:Number(focusedStep.dataset.index)})}(changed.has("orientationBreakpoint")||changed.has("orientationBreakpointBasis"))&&this.orientationBreakpoints.configure(this.orientationBreakpoint,this.orientationBreakpointBasis),(changed.has("orientation")||changed.has("narrowOrientation")||changed.has("orientationBreakpoint")||changed.has("orientationBreakpointBasis"))&&this.updateEffectiveOrientation(this.baseEl?.clientWidth??this.measuredInlineSize,this.hasUpdated&&this.orientationBreakpointBasis==="viewport")}updated(changed){if(super.updated(changed),this.pendingStepFocus!==void 0){const focusedOccurrence=this.pendingStepFocus;this.pendingStepFocus=void 0;const enabledIdentityMatches=[...this.renderRoot.querySelectorAll('[part="step"]')].filter(step=>step.dataset.stepId===focusedOccurrence.stepId&&step.getAttribute("aria-disabled")!=="true");(enabledIdentityMatches.find(step=>Number(step.dataset.index)===focusedOccurrence.index)??(enabledIdentityMatches.length===1?enabledIdentityMatches[0]:void 0)??this.renderRoot.querySelector('[part="step"][tabindex="0"]'))?.focus()}(changed.has("orientationBreakpoint")||changed.has("orientationBreakpointBasis"))&&(this.orientationBreakpoints.containerObservationEnabled?this.armResizeObserver():this.resetResizeObserver())}updateEffectiveOrientation(width,emitOnChange){const next=this.orientationBreakpoints.isBelow(width)?this.narrowOrientation:this.orientation;this.orientationBreakpoints.active?this.setAttribute("data-effective-orientation",next):this.removeAttribute("data-effective-orientation"),next!==this._effectiveOrientation&&(this._effectiveOrientation=next,this.requestUpdate(),emitOnChange&&this.emit("lr-stepper-orientation-change",{orientation:next}))}armResizeObserver(){const observedElement=this.baseEl;if(!this.isConnected||!observedElement)return;const ownerDocument=this.ownerDocument;if(this.resizeObserver&&this.resizeObservedElement===observedElement&&this.resizeObserverOwnerDocument===ownerDocument)return;this.resetResizeObserver();const ResizeObserverConstructor=ownerDocument.defaultView?.ResizeObserver;if(!ResizeObserverConstructor)return;const generation=this.resizeObserverGeneration,observer=new ResizeObserverConstructor(entries=>{if(this.resizeObserver!==observer||this.resizeObserverGeneration!==generation||!this.isConnected||this.ownerDocument!==ownerDocument||this.baseEl!==observedElement)return;const box=entries[0]?.contentBoxSize?.[0],width=box?box.inlineSize:observedElement.getBoundingClientRect().width;this.measuredInlineSize=width,this.updateEffectiveOrientation(width,!0)});this.resizeObserver=observer,this.resizeObservedElement=observedElement,this.resizeObserverOwnerDocument=ownerDocument,observer.observe(observedElement)}resetResizeObserver(){this.resizeObserverGeneration+=1,this.resizeObserver?.disconnect(),this.resizeObserver=void 0,this.resizeObservedElement=void 0,this.resizeObserverOwnerDocument=void 0}selectStep(step,index){step.disabled||this.emit("lr-step-select",{stepId:step.stepId,index})}focusStep(index){this.renderRoot.querySelector(`[part="step"][data-index="${index}"]`)?.focus()}render(){const currentIndex=this.steps.findIndex(step=>step.state==="current"),rovingIndex=currentIndex>=0&&!this.steps[currentIndex].disabled?currentIndex:this.steps.findIndex(step=>!step.disabled),numberFormat=getNumberFormat(this.effectiveLocale);return html`
+  </svg>`}class LyraStepper extends LyraElement{constructor(){super(...arguments),this.effectiveSteps=Object.freeze([]),this.orientation="horizontal",this.orientationBreakpointBasis="container",this.narrowOrientation="vertical",this.wrapLabels=!1,this.accessibleLabel=null,this._effectiveOrientation="horizontal",this.resizeObserverGeneration=0,this.measuredInlineSize=Number.POSITIVE_INFINITY,this.orientationBreakpoints=new OrientationBreakpointController(this,()=>this.updateEffectiveOrientation(this.baseEl?.clientWidth??this.measuredInlineSize,!0)),this.scrollOverflow=observeScrollOverflow(this,()=>this.baseEl),this.onKeyDown=e=>{const navigable=this.steps.map((step,index)=>({step,index})).filter(({step})=>!step.disabled);if(navigable.length===0)return;const focused=activeElementIn(this.renderRoot),focusedIndex=Number(focused?.dataset.index),currentIndex=navigable.findIndex(item=>item.index===focusedIndex),vertical=this.effectiveOrientation==="vertical",rtl=!vertical&&isRtl(this),forwardKey=vertical?"ArrowDown":rtl?"ArrowLeft":"ArrowRight",backwardKey=vertical?"ArrowUp":rtl?"ArrowRight":"ArrowLeft";let targetIndex;switch(e.key){case forwardKey:targetIndex=Math.min(navigable.length-1,(currentIndex<0?-1:currentIndex)+1);break;case backwardKey:targetIndex=Math.max(0,(currentIndex<0?1:currentIndex)-1);break;case"Home":targetIndex=0;break;case"End":targetIndex=navigable.length-1;break;case"Enter":case" ":if(e.preventDefault(),currentIndex>=0){const target=navigable[currentIndex];this.selectStep(target.step,target.index)}return;default:return}e.preventDefault(),this.focusStep(navigable[targetIndex].index)}}static{this.styles=[LyraElement.styles,styles]}get steps(){return this.effectiveSteps}set steps(value){const previous=this.effectiveSteps;this.effectiveSteps=snapshotSteps(value),this.requestUpdate("steps",previous)}get effectiveOrientation(){return this._effectiveOrientation}connectedCallback(){super.connectedCallback();const hostWidth=this.getBoundingClientRect().width;hostWidth>0&&(this.measuredInlineSize=hostWidth),this.orientationBreakpoints.containerObservationEnabled&&this.armResizeObserver()}disconnectedCallback(){super.disconnectedCallback(),this.resetResizeObserver()}adoptedCallback(){super.adoptedCallback(),this.resetResizeObserver()}firstUpdated(changed){super.firstUpdated(changed),this.orientationBreakpoints.containerObservationEnabled&&this.armResizeObserver()}willUpdate(changed){if(super.willUpdate(changed),changed.has("steps")){const focusedStep=activeElementIn(this.renderRoot);focusedStep?.getAttribute("part")==="step"&&(this.pendingStepFocus={stepId:focusedStep.dataset.stepId??"",index:Number(focusedStep.dataset.index)})}(changed.has("orientationBreakpoint")||changed.has("orientationBreakpointBasis"))&&this.orientationBreakpoints.configure(this.orientationBreakpoint,this.orientationBreakpointBasis),(changed.has("orientation")||changed.has("narrowOrientation")||changed.has("orientationBreakpoint")||changed.has("orientationBreakpointBasis"))&&this.updateEffectiveOrientation(this.baseEl?.clientWidth??this.measuredInlineSize,this.hasUpdated&&this.orientationBreakpointBasis==="viewport")}updated(changed){if(super.updated(changed),this.scrollOverflow.observeExtra(this.renderRoot.querySelectorAll('[part="step"]')),this.pendingStepFocus!==void 0){const focusedOccurrence=this.pendingStepFocus;this.pendingStepFocus=void 0;const enabledIdentityMatches=[...this.renderRoot.querySelectorAll('[part="step"]')].filter(step=>step.dataset.stepId===focusedOccurrence.stepId&&step.getAttribute("aria-disabled")!=="true");(enabledIdentityMatches.find(step=>Number(step.dataset.index)===focusedOccurrence.index)??(enabledIdentityMatches.length===1?enabledIdentityMatches[0]:void 0)??this.renderRoot.querySelector('[part="step"][tabindex="0"]'))?.focus()}(changed.has("orientationBreakpoint")||changed.has("orientationBreakpointBasis"))&&(this.orientationBreakpoints.containerObservationEnabled?this.armResizeObserver():this.resetResizeObserver())}updateEffectiveOrientation(width,emitOnChange){const next=this.orientationBreakpoints.isBelow(width)?this.narrowOrientation:this.orientation;this.orientationBreakpoints.active?this.setAttribute("data-effective-orientation",next):this.removeAttribute("data-effective-orientation"),next!==this._effectiveOrientation&&(this._effectiveOrientation=next,this.requestUpdate(),emitOnChange&&this.emit("lr-stepper-orientation-change",{orientation:next}))}armResizeObserver(){const observedElement=this.baseEl;if(!this.isConnected||!observedElement)return;const ownerDocument=this.ownerDocument;if(this.resizeObserver&&this.resizeObservedElement===observedElement&&this.resizeObserverOwnerDocument===ownerDocument)return;this.resetResizeObserver();const ResizeObserverConstructor=ownerDocument.defaultView?.ResizeObserver;if(!ResizeObserverConstructor)return;const generation=this.resizeObserverGeneration,observer=new ResizeObserverConstructor(entries=>{if(this.resizeObserver!==observer||this.resizeObserverGeneration!==generation||!this.isConnected||this.ownerDocument!==ownerDocument||this.baseEl!==observedElement)return;const box=entries[0]?.contentBoxSize?.[0],width=box?box.inlineSize:observedElement.getBoundingClientRect().width;this.measuredInlineSize=width,this.updateEffectiveOrientation(width,!0)});this.resizeObserver=observer,this.resizeObservedElement=observedElement,this.resizeObserverOwnerDocument=ownerDocument,observer.observe(observedElement)}resetResizeObserver(){this.resizeObserverGeneration+=1,this.resizeObserver?.disconnect(),this.resizeObserver=void 0,this.resizeObservedElement=void 0,this.resizeObserverOwnerDocument=void 0}selectStep(step,index){step.disabled||this.emit("lr-step-select",{stepId:step.stepId,index})}focusStep(index){this.renderRoot.querySelector(`[part="step"][data-index="${index}"]`)?.focus()}render(){const currentIndex=this.steps.findIndex(step=>step.state==="current"),rovingIndex=currentIndex>=0&&!this.steps[currentIndex].disabled?currentIndex:this.steps.findIndex(step=>!step.disabled),numberFormat=getNumberFormat(this.effectiveLocale);return html`
       <div
         part="base"
         role="list"