@aceshooting/lyra-ui 9.1.1 → 10.0.1

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

package/dist/components/layout/tab-group/tab-group.styles.js

@@ -15,10 +15,6 @@ import{css}from"lit";const styles=css`
     block-size: 100%;
     box-sizing: border-box;
   }
-  /* The tablist plus its two overflow controls. A row of its own so the controls can flank the
-     scroll container without ever becoming children of role="tablist" (whose only legal children
-     are the tabs). min-inline-size: 0 is what lets the tablist shrink below its content width and
-     therefore scroll at all. */
   [part="nav"] {
     display: flex;
     align-items: stretch;
@@ -37,8 +33,6 @@ import{css}from"lit";const styles=css`
     min-inline-size: 0;
   }
   :where([part~="scroll-button"]) {
-    /* Never shrinks: at the narrow allocations that produce overflow in the first place, a
-       shrinkable control would be squeezed straight through the WCAG 2.5.8 floor. */
     flex: 0 0 auto;
     display: inline-grid;
     place-items: center;
@@ -49,22 +43,12 @@ import{css}from"lit";const styles=css`
     appearance: none;
     background: none;
     border: none;
-    /* Continues the tablist's own rule across the control, so the line under the strip runs
-       unbroken from edge to edge instead of stopping short at each control. */
     border-block-end: var(--lr-border-width-thin) solid var(--lr-color-border);
     color: var(--lr-color-text-quiet);
     cursor: pointer;
     transition: color var(--lr-transition-fast),
       background var(--lr-transition-fast);
   }
-  /* The controls exist in the DOM for an overflow that may not exist yet, so they are taken out of
-     layout (and out of the accessibility tree with it) until the tablist is measured as actually
-     overflowing -- the same ScrollOverflowController measurement the edge fade above is gated on,
-     so the two affordances can never disagree. :has() on the wrapper is what lets the *preceding*
-     control react to the tablist's own state attribute: CSS has no previous-sibling combinator.
-     The whole qualifier sits in :where() so it contributes no specificity, leaving this rule at
-     (0,1,0) -- it beats the display above by order alone, and a consumer's own
-     ::part(scroll-button) ((0,1,1)) still outranks it without needing !important. */
   :where([part="nav"]:not(:has([part~="tablist"][data-scroll-overflow])))
     [part~="scroll-button"] {
     display: none;
@@ -72,8 +56,6 @@ import{css}from"lit";const styles=css`
   :where([part~="scroll-button"][hidden]) {
     display: none;
   }
-  /* Same treatment as [part="tab"], so the controls read as part of the strip rather than as two
-     foreign buttons bolted to its ends. */
   :where([part~="scroll-button"]):where(:hover) {
     color: var(--lr-tab-group-scroll-button-hover-color, var(--lr-color-text));
   }
@@ -88,9 +70,6 @@ import{css}from"lit";const styles=css`
     );
     color: var(--lr-tab-group-scroll-button-active-color, var(--lr-color-text));
   }
-  /* Firefox suppresses native :active when the control's mousedown keeps focus on the tab. The
-     short-lived attribute mirrors that state there. The base and each state selector are wrapped
-     in :where(), so source order applies the state without blocking a consumer part override. */
   :where([part~="scroll-button"]):where([data-pressed]) {
     background: var(
       --lr-tab-group-scroll-button-active-bg,
@@ -102,8 +81,6 @@ import{css}from"lit";const styles=css`
     );
     color: var(--lr-tab-group-scroll-button-active-color, var(--lr-color-text));
   }
-  /* Reachable only by script (the controls are tabindex="-1"), but a consumer that focuses one must
-     still see where focus went. */
   [part~="scroll-button"]:focus-visible {
     outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);
     outline-offset: calc(var(--lr-focus-ring-offset) * -1);
@@ -113,11 +90,6 @@ import{css}from"lit";const styles=css`
     display: inline-flex;
     align-items: center;
   }
-  /* internal/icons.ts ships one direction-free chevron pointing right; the *wrapping part* points
-     it, never the svg. LTR: the start control points left, the end control right. RTL: the whole
-     row is mirrored by flex layout, so the meanings swap with it -- "toward the inline start" is
-     physically rightward. Hence the mirror moves from one control to the other rather than being
-     added to both. */
   [part~="scroll-button-start"] [part="scroll-button-glyph"] {
     transform: scaleX(-1);
   }
@@ -127,11 +99,7 @@ import{css}from"lit";const styles=css`
   :host(:dir(rtl)) [part~="scroll-button-end"] [part="scroll-button-glyph"] {
     transform: scaleX(-1);
   }
-  /* Edge affordance, gated on the tablist actually overflowing -- ScrollOverflowController toggles
-     data-scroll-overflow from a real scrollWidth/clientWidth measurement; scrolling itself stays
-     native, with no scroll listener. Painted unconditionally (as it used to be) it fades the first
-     and last tab of a row that fits, for no reason. */
-  [part~="tablist"][data-scroll-overflow][data-scroll-start][data-scroll-end] {
+  [part~="tablist"][data-scroll-overflow]:where([data-scroll-start][data-scroll-end]) {
     -webkit-mask-image: linear-gradient(
       to right,
       transparent,
@@ -147,8 +115,8 @@ import{css}from"lit";const styles=css`
       transparent
     );
   }
-  [part~="tablist"][data-scroll-overflow][data-scroll-end]:not(
-      [data-scroll-start]
+  [part~="tablist"][data-scroll-overflow]:where(
+      [data-scroll-end]:not([data-scroll-start])
     ) {
     -webkit-mask-image: linear-gradient(
       to right,
@@ -163,8 +131,8 @@ import{css}from"lit";const styles=css`
       transparent
     );
   }
-  [part~="tablist"][data-scroll-overflow][data-scroll-start]:not(
-      [data-scroll-end]
+  [part~="tablist"][data-scroll-overflow]:where(
+      [data-scroll-start]:not([data-scroll-end])
     ) {
     -webkit-mask-image: linear-gradient(
       to right,
@@ -180,8 +148,8 @@ import{css}from"lit";const styles=css`
     );
   }
   :host(:dir(rtl))
-    [part~="tablist"][data-scroll-overflow][data-scroll-end]:not(
-      [data-scroll-start]
+    [part~="tablist"][data-scroll-overflow]:where(
+      [data-scroll-end]:not([data-scroll-start])
     ) {
     -webkit-mask-image: linear-gradient(
       to right,
@@ -197,8 +165,8 @@ import{css}from"lit";const styles=css`
     );
   }
   :host(:dir(rtl))
-    [part~="tablist"][data-scroll-overflow][data-scroll-start]:not(
-      [data-scroll-end]
+    [part~="tablist"][data-scroll-overflow]:where(
+      [data-scroll-start]:not([data-scroll-end])
     ) {
     -webkit-mask-image: linear-gradient(
       to right,
@@ -218,8 +186,6 @@ import{css}from"lit";const styles=css`
     appearance: none;
     background: none;
     border: none;
-    /* Sits directly over the tablist's own border-block-end so the accent
-       underline below replaces it, pixel for pixel, when selected. */
     border-block-end: var(--lr-border-width-medium) solid transparent;
     margin-block-end: var(--lr-size-neg-1px);
     padding: var(--lr-space-s) var(--lr-space-xs);
@@ -228,9 +194,6 @@ import{css}from"lit";const styles=css`
     color: var(--lr-color-text-quiet);
     cursor: pointer;
     white-space: nowrap;
-    /* inline-flex only matters once a tab-icon part is also present (gap
-       has no effect with a single child) -- a text-only tab lays out
-       identically to the previous plain inline-block button. */
     display: inline-flex;
     align-items: center;
     gap: var(--lr-space-xs);
@@ -242,18 +205,9 @@ import{css}from"lit";const styles=css`
     flex: 0 0 auto;
     align-items: center;
   }
-  /* Reads its own prop, not the shared --lr-color-text token: recoloring the selected tab must
-     never repaint hovered-unselected tabs with the selected color. :where() zeroes the wrapped
-     selectors' specificity contribution, leaving only :hover itself -- (0,1,0) total, so a
-     consumer's own ::part(tab):hover override ((0,1,1)) always wins without needing !important
-     (mirrors lr-attachment-trigger's identical fix). */
   :where([part="tab"]):hover:where(:not([aria-disabled="true"])) {
     color: var(--lr-tab-group-hover-color, var(--lr-color-text));
   }
-  /* Hover lifts only the label colour here, so the pressed state adds a surface to be a visible
-     step past it: the tab's own transparent fill mixed toward --lr-color-mix-partner, which lands
-     as the partner colour at --lr-color-mix-active alpha over whatever the tablist sits on. A
-     disabled tab has pointer-events: none and never reaches it. */
   :where([part="tab"]):active:where(:not([aria-disabled="true"])) {
     background: var(
       --lr-tab-group-active-bg,
@@ -268,9 +222,6 @@ import{css}from"lit";const styles=css`
       var(--lr-tab-group-hover-color, var(--lr-color-text))
     );
   }
-  /* Inline var() fallbacks rather than :host-declared properties, so a consumer can set them on any
-     ancestor and a :host declaration can never shadow that. Unset, each falls back to the token the
-     rule used before the hooks existed, so the rendering is unchanged. */
   [part="tab"][aria-selected="true"] {
     color: var(--lr-tab-group-selected-color, var(--lr-color-brand));
     border-block-end-color: var(
@@ -291,8 +242,6 @@ import{css}from"lit";const styles=css`
   }
   [part="tab"][aria-disabled="true"] {
     cursor: not-allowed;
-    /* No :hover color change and no pointer feedback -- the click handler
-       already no-ops on a disabled tab, this just matches it visually. */
     pointer-events: none;
     opacity: var(--lr-opacity-disabled);
   }
@@ -312,10 +261,6 @@ import{css}from"lit";const styles=css`
     min-block-size: 0;
     overflow: auto;
   }
-  /* no-pressed-state: the panel is a container for whatever the consumer slotted into the tab, not
-     a target -- pressing it activates nothing, and :active matches the ancestors of whatever was
-     pressed, so a click on any control inside the panel would flash this outline around all of
-     it. */
   [part="panel"]:hover {
     outline: var(--lr-border-width-thin) solid var(--lr-color-border);
     outline-offset: var(--lr-focus-ring-offset);
@@ -333,9 +278,6 @@ import{css}from"lit";const styles=css`
     }
   }
 
-  /* Placement. The base flex direction moves the strip relative to the panels; start/end are
-     logical, so row/row-reverse mirror under RTL with no :dir() rule. A vertical strip trades
-     its block-end rule for an inline-end one, in the matching logical direction. */
   :host([placement="bottom"]) [part~="base"] {
     flex-direction: column-reverse;
   }
@@ -352,9 +294,6 @@ import{css}from"lit";const styles=css`
     inset-block-start: calc(-1 * var(--lr-border-width-medium));
     inset-block-end: auto;
   }
-  /* A vertical strip renders no scroll controls at all. Its nav keeps its natural width for short
-     labels, but is allowed to shrink and capped so one unbroken label cannot consume the panel's
-     entire allocation. Keep the fallback inline: consumers can set it on the group or an ancestor. */
   :host([placement="start"]) [part="nav"],
   :host([placement="end"]) [part="nav"] {
     flex: 0 1 auto;
@@ -387,8 +326,6 @@ import{css}from"lit";const styles=css`
     max-block-size: 100%;
     border-block-end: none;
   }
-  /* The vertical nav is deliberately single-line: clipping the visual label preserves a compact
-     side rail while the full label remains the tab's accessible name. */
   :host([placement="start"]) [part="tab"],
   :host([placement="end"]) [part="tab"] {
     min-inline-size: 0;
@@ -404,14 +341,11 @@ import{css}from"lit";const styles=css`
     border-inline-start: var(--track-width, var(--lr-border-width-thin)) solid
       var(--track-color, var(--lr-color-border));
   }
-  /* The horizontal edge fade measures inline overflow; a vertical strip scrolls in the block
-     direction instead, so the mask would dim the wrong ends. */
   :host([placement="start"]) [part~="tablist"][data-scroll-overflow],
   :host([placement="end"]) [part~="tablist"][data-scroll-overflow] {
     -webkit-mask-image: none;
     mask-image: none;
   }
-  /* The selected-tab indicator runs along whichever edge the panels are on. */
   :host([placement="start"]) [part="tab"][aria-selected="true"],
   :host([placement="end"]) [part="tab"][aria-selected="true"] {
     box-shadow: none;

package/dist/components/layout/tab-group/tab.styles.js

@@ -1,6 +1,4 @@
 import{css}from"lit";const styles=css`
-  /* The group renders the real button and projects this element into it; contributing a box of its
-     own would put a second layout node inside that button. */
   :host {
     display: contents;
   }

package/dist/components/layout/virtual-list/virtual-list.class.d.ts

@@ -3,7 +3,7 @@ import { LyraElement } from '../../../internal/lyra-element.js';
 /** Largest accepted overscan on either side of the visible range. This keeps
  *  an accidental huge value from defeating virtualization. */
 export declare const MAX_OVERSCAN_ROWS = 100;
-/** `lr-visible-range-changed` detail -- the current visible (non-overscanned) item index range. */
+/** `lr-visible-range-change` detail -- the current visible (non-overscanned) item index range. */
 export interface LyraVirtualListRange {
     start: number;
     end: number;
@@ -44,7 +44,7 @@ export interface LyraVirtualListScroll {
     viewportHeight: number;
 }
 export interface LyraVirtualListEventMap {
-    'lr-visible-range-changed': CustomEvent<LyraVirtualListRange>;
+    'lr-visible-range-change': CustomEvent<LyraVirtualListRange>;
     'lr-load-more': CustomEvent<null>;
     'lr-virtual-scroll': CustomEvent<LyraVirtualListScroll>;
 }
@@ -171,7 +171,7 @@ export interface LyraVirtualListEventMap {
  *   end, re-arms it) — a consumer wanting an automatic retry after a failed
  *   fetch should surface its own retry affordance rather than relying on
  *   this firing again unprompted.
- * @event lr-visible-range-changed - `detail: { start, end }` (see
+ * @event lr-visible-range-change - `detail: { start, end }` (see
  *   `LyraVirtualListRange`) — the current visible (non-overscanned) item index
  *   range, fired only when it actually changes.
  * @event lr-virtual-scroll - `detail: { scrollTop, viewportHeight }` (see
@@ -179,7 +179,7 @@ export interface LyraVirtualListEventMap {
  *   `requestAnimationFrame` tick that already coalesces native `scroll`
  *   events, so a fling that fires dozens of native events produces at most one
  *   of these per frame, and none at all when the position did not actually
- *   change. Unlike `lr-visible-range-changed` this reports *sub-row*
+ *   change. Unlike `lr-visible-range-change` this reports *sub-row*
  *   movement, which is what a scroll-linked layout (a pinned header, a
  *   minimap) needs.
  *