@aceshooting/lyra-ui 9.1.0 → 10.0.1

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"

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

@@ -9,24 +9,10 @@ import{css}from"lit";const styles=css`
     min-inline-size: 0;
     max-inline-size: 100%;
     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-tab-group). The mask-image edge
-       fade mirrors lr-tab-group'/lr-segmented's identical horizontally-scrolling-row treatment; it now
-       lives in its own overflow-gated rule below, and is reset to 'none' in the vertical-axis
-       rules so it can never bleed through a higher-specificity match that doesn't also redeclare
-       it (CSS cascades per-property, not per-rule). */
     overflow-x: auto;
     overflow-y: hidden;
   }
-  /* Edge fade, gated on the track actually overflowing -- ScrollOverflowController toggles
-     data-scroll-overflow from a real scrollWidth/clientWidth measurement. Unconditional (as this
-     used to be) it fades the first and last step of a stepper that fits. The vertical-axis rules
-     below still reset it to 'none' at higher specificity, so it cannot bleed into that axis even
-     if a visible-overflow measurement happens to trip the attribute. */
-  [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,
@@ -42,6 +28,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="step-item"] {
     display: contents;
   }
@@ -52,9 +104,6 @@ import{css}from"lit";const styles=css`
     -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
-     above by source order alone (equal specificity) whenever the effective axis diverges from it. */
   :host([data-effective-orientation="vertical"]) [part="base"] {
     flex-direction: column;
     overflow-x: visible;
@@ -69,12 +118,8 @@ import{css}from"lit";const styles=css`
     -webkit-mask-image: none;
     mask-image: none;
   }
-  /* Same overflow gate as the authored-horizontal rule above, restated at this rule's specificity
-     so the live-axis override re-applies the fade rather than being pinned to the 'none' it must
-     otherwise declare (it has to redeclare the property: the vertical arm it competes with sets
-     it, and CSS cascades per-property). */
   :host([data-effective-orientation="horizontal"])
-    [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,
@@ -90,6 +135,74 @@ import{css}from"lit";const styles=css`
       transparent
     );
   }
+  :host([data-effective-orientation="horizontal"])
+    [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
+    );
+  }
+  :host([data-effective-orientation="horizontal"])
+    [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)[data-effective-orientation="horizontal"])
+    [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)[data-effective-orientation="horizontal"])
+    [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="step"] {
     display: flex;
     align-items: center;
@@ -107,16 +220,10 @@ import{css}from"lit";const styles=css`
     opacity: var(--lr-opacity-disabled);
     cursor: not-allowed;
   }
-  /* :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-stepper-hover-bg, var(--lr-color-brand-quiet));
     color: var(--lr-stepper-hover-color, var(--lr-color-text));
   }
-  /* The same brand-quiet fill, mixed further toward --lr-color-mix-partner: a step being pressed
-     is a visible tier past the one the pointer is only resting on. Same :not() guard and the same
-     zeroed specificity as the hover rule above. */
   :where([part="step"]):active:where(:not([aria-disabled="true"])) {
     background: var(
       --lr-stepper-active-bg,
@@ -132,12 +239,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);
   }
-  /* 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-stepper-current-color, var(--lr-color-text));
     font-weight: var(
@@ -148,10 +249,6 @@ import{css}from"lit";const styles=css`
   [part="step"][data-state="error"] {
     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;
@@ -189,8 +286,6 @@ import{css}from"lit";const styles=css`
     white-space: normal;
     overflow-wrap: anywhere;
   }
-  /* An active breakpoint can temporarily make an authored vertical stepper horizontal. Keep the
-     opt-in vertical-only, and let the later effective-axis rule win over the authored-axis rule. */
   :host([wrap-labels][data-effective-orientation="horizontal"])
     [part="step-label"] {
     min-inline-size: auto;
@@ -199,7 +294,11 @@ import{css}from"lit";const styles=css`
   }
   @media (forced-colors: active) {
     [part="base"],
+    [part="base"][data-scroll-overflow],
+    :host(:dir(rtl)) [part="base"][data-scroll-overflow],
     :host([data-effective-orientation="horizontal"])
+      [part="base"][data-scroll-overflow],
+    :host(:dir(rtl)[data-effective-orientation="horizontal"])
       [part="base"][data-scroll-overflow] {
       -webkit-mask-image: none;
       mask-image: none;

package/dist/components/layout/tab-group/tab-group.class.d.ts

@@ -142,7 +142,10 @@ export declare class LyraTabGroup extends LyraElement<LyraTabGroupEventMap> {
      * exhausted. Without it, each inactive edge control is hidden, matching Shoelace. */
     fixedScrollControls: boolean;
     /** The group's real unnamed slot. It is kept hidden because Lyra assigns each tab and panel to
-     * its own deterministic named slot, but remains exposed for mapped slot observation. */
+     * its own deterministic named slot, but remains exposed for mapped slot observation. Stays a
+     * writable `@query` field rather than a readonly `get`: `wa-tab-group` declares it writable, and
+     * check-pinned-upstream-manifests treats a readonly-vs-writable difference on a mirrored member
+     * as an `unsupported` surface drift -- a release blocker. */
     defaultSlot: HTMLSlotElement;
     private tabs;
     /** Where keyboard focus currently sits under `activation="manual"`, which is allowed to differ