@aceshooting/lyra-ui 9.1.0 → 10.0.1

package/dist/components/data/pagination/pagination.styles.js

@@ -4,11 +4,6 @@ import{css}from"lit";const styles=css`
     min-inline-size: 0;
     container-type: inline-size;
     contain-intrinsic-inline-size: var(--lr-size-20rem);
-    /* Both knobs read the shared control ladder, which owns every tier and matches both the s/m/l
-       and small/medium/large spellings in one selector list. Keeping the public
-       --lr-pagination-* names in front lets a consumer retune this component alone, while the
-       values still come from one place. The literal fallbacks are the ladder's own "m" tier, so
-       this sheet resolves to the resting control footprint on its own. */
     --_lr-pagination-control-size: var(
       --lr-form-control-height,
       var(--lr-size-2-5rem)
@@ -18,17 +13,7 @@ import{css}from"lit";const styles=css`
       var(--lr-font-size-m)
     );
     --_lr-pagination-control-radius: var(--lr-radius);
-    /* Inner padding of the nav buttons and the page input. Exposed as a single knob (previously
-       a hardcoded var(--lr-space-xs) repeated at both sites) so a consumer can adjust the icon /
-       digit inset. Kept uniform across every tier -- today's padding is identical at every tier,
-       and per-tier divergence would visibly change the current rendering, which must stay
-       byte-identical. The control's outer footprint is fixed by --lr-pagination-control-size
-       (border-box), so this only affects the inner inset, not the button size. */
     --_lr-pagination-control-padding: var(--lr-space-xs);
-    /* Resting fill and border of every control, varied by the appearance variant below. Routed through two
-       properties rather than one rule per appearance so the rule that consumes them stays at the
-       specificity of a bare [part] selector -- a consumer's ::part(page) override has to be able
-       to win, and an :host([appearance=...]) [part=...] rule would out-specify it. */
     --_lr-pagination-control-bg-default: var(--lr-color-surface);
     --_lr-pagination-control-border-color-default: var(--lr-color-border);
   }
@@ -123,14 +108,9 @@ import{css}from"lit";const styles=css`
     text-decoration: none;
     cursor: pointer;
   }
-  /* A numbered page grows with its digits instead of clipping a four-digit page number, while the
-     icon-only controls keep their square footprint. */
   [part~="page"] {
     inline-size: auto;
   }
-  /* The applied page reads as a solid chip in every appearance -- which page you are on must not
-     depend on which look the consumer picked. Declared after the appearance-driven rule above and
-     at the same specificity, so a consumer ::part(page-current) override still wins. */
   [part~="page-current"] {
     border-color: var(--lr-pagination-current-border-color, transparent);
     background: var(--lr-pagination-current-bg, var(--lr-color-brand));
@@ -140,8 +120,6 @@ import{css}from"lit";const styles=css`
   [part~="ellipsis"] {
     color: var(--lr-color-text-quiet);
   }
-  /* :where() zeroes every state qualifier's specificity contribution, so a consumer's
-     ::part(previous-button):hover / ::part(next-button):hover override wins without !important. */
   [part~="first-button"]:where(:hover):where(:not(:disabled)):where(
       :not([aria-disabled="true"])
     ),
@@ -159,17 +137,13 @@ import{css}from"lit";const styles=css`
     ),
   [part~="page"]:where(:hover):where(:not(:disabled)):where(
       :not([aria-disabled="true"])
-    ):where(:not([part~="page-current"])),
-  [part="page-input"]:where(:hover):where(:not(:disabled)) {
+    ):where(:not([part~="page-current"])) {
     background: var(--lr-pagination-hover-bg, var(--lr-color-brand-quiet));
     border-color: var(
       --lr-pagination-hover-border-color,
       var(--lr-color-brand)
     );
   }
-  /* Same selectors, same zeroed specificity, one step further toward --lr-color-mix-partner (which
-     follows the text colour) -- so the pressed fill is unmistakably deeper than the hovered one in
-     either theme, and a consumer's ::part(next-button):active still wins. */
   [part~="first-button"]:where(:active):where(:not(:disabled)):where(
       :not([aria-disabled="true"])
     ),
@@ -187,8 +161,7 @@ import{css}from"lit";const styles=css`
     ),
   [part~="page"]:where(:active):where(:not(:disabled)):where(
       :not([aria-disabled="true"])
-    ):where(:not([part~="page-current"])),
-  [part="page-input"]:where(:active):where(:not(:disabled)) {
+    ):where(:not([part~="page-current"])) {
     background: var(
       --lr-pagination-active-bg,
       color-mix(
@@ -202,15 +175,10 @@ import{css}from"lit";const styles=css`
       var(--lr-color-brand)
     );
   }
-  /* The current page is already a brand chip; without its own :hover arm it would fall back to the
-     rule above and visibly lighten under the pointer, reading as "not selected". */
   [part~="page-current"]:where(:hover) {
     background: var(--lr-pagination-current-hover-bg, var(--lr-color-brand));
     border-color: var(--lr-pagination-current-hover-border-color, transparent);
   }
-  /* Pressing the page you are already on is a no-op, but it still has to acknowledge the click --
-     the chip deepens rather than lightening, so it never momentarily reads as deselected. MUST stay
-     after the generic :active rule above: both are (0,1,0) after :where(), so source order decides. */
   [part~="page-current"]:where(:active) {
     background: var(
       --lr-pagination-current-active-bg,
@@ -242,8 +210,6 @@ import{css}from"lit";const styles=css`
     cursor: not-allowed;
     opacity: var(--lr-opacity-disabled);
   }
-  /* Link mode has no :disabled to hang off -- the anchors carry aria-disabled and lose their href
-     instead, so the resting look has to follow that attribute. */
   [part~="button"]:where([aria-disabled="true"]) {
     cursor: not-allowed;
     opacity: var(--lr-opacity-disabled);
@@ -257,8 +223,6 @@ import{css}from"lit";const styles=css`
     justify-content: center;
     line-height: var(--lr-line-height-none);
   }
-  /* The two chevrons of an edge control overlap slightly so they read as one doubled glyph rather
-     than two separate arrows. */
   [part="first-icon"] slot > svg + svg,
   [part="last-icon"] slot > svg + svg {
     margin-inline-start: var(--lr-size-neg-4px);
@@ -319,11 +283,27 @@ import{css}from"lit";const styles=css`
     appearance: none;
     margin: 0;
   }
-  /* :where() zeroes the [aria-invalid='true'] qualifier's specificity contribution -- otherwise
-     this (0,2,0) rule would beat a consumer's own ::part(page-input) border-color override
-     whenever the typed page is out of range. The color routes through a scoped cssprop so a
-     consumer can retint just the invalid state without hijacking the shared --lr-color-danger
-     token used everywhere else. */
+  [part="page-input"]:where(:hover):where(:not(:disabled)) {
+    background: var(--lr-pagination-hover-bg, var(--lr-color-brand-quiet));
+    border-color: var(
+      --lr-pagination-hover-border-color,
+      var(--lr-color-brand)
+    );
+  }
+  [part="page-input"]:where(:active):where(:not(:disabled)) {
+    background: var(
+      --lr-pagination-active-bg,
+      color-mix(
+        in oklab,
+        var(--lr-color-brand-quiet),
+        var(--lr-color-mix-partner) var(--lr-color-mix-active)
+      )
+    );
+    border-color: var(
+      --lr-pagination-active-border-color,
+      var(--lr-color-brand)
+    );
+  }
   [part="page-input"]:where([aria-invalid="true"]) {
     border-color: var(--lr-pagination-invalid-border, var(--lr-color-danger));
   }
@@ -338,9 +318,6 @@ import{css}from"lit";const styles=css`
     white-space: nowrap;
     border: 0;
   }
-  /* Container-query lengths cannot reference custom properties. This is the
-     documented 320px narrow-allocation baseline expressed in root-relative
-     units so it still follows the page's type scale. */
   @container (max-inline-size: 20rem) {
     [part~="base"] {
       flex-direction: column;

package/dist/components/data/sequence-strip/sequence-strip.class.d.ts

@@ -19,6 +19,15 @@ export interface SequenceStripCategory {
      *  localized unnamed-category label rather than exposing an internal id. */
     readonly label?: string;
 }
+/** Detail of `lr-item-activate`: which strip item the user picked. */
+export interface LyraSequenceStripActivateDetail {
+    readonly index: number;
+    readonly id: string;
+    readonly item: SequenceStripItem;
+}
+export interface LyraSequenceStripEventMap {
+    'lr-item-activate': CustomEvent<LyraSequenceStripActivateDetail>;
+}
 /**
  * `<lr-sequence-strip>` — a compact, one-thin-cell-per-item strip visualizing a sequence of
  * categorical states, with an optional secondary per-cell marker. Pure CSS/flex, no chart.js/SVG/
@@ -40,6 +49,10 @@ export interface SequenceStripCategory {
  * collection after changing it.
  *
  * @customElement lr-sequence-strip
+ * @event lr-item-activate - Fired when a cell is clicked, or activated with Enter/Space on the
+ *   roving-tabindex focus. `detail: { index, id, item }` identifies the picked item. Not
+ *   cancelable, and it does not move `selectedIndex` on its own -- the selection is controlled,
+ *   so the consumer stays the single source of truth for a playback index this strip does not own.
  * @csspart base - The root strip wrapper (`role="list"`).
  * @csspart cell - Each named, roving-focus item cell, background-colored by its category.
  * @csspart marker - The small bottom marker on a cell whose item sets `marker: true`.
@@ -63,7 +76,7 @@ export interface SequenceStripCategory {
  * @status stable
  * @since 4.0.0
  */
-export declare class LyraSequenceStrip extends LyraElement {
+export declare class LyraSequenceStrip extends LyraElement<LyraSequenceStripEventMap> {
     static styles: import("lit").CSSResultGroup[];
     private _items;
     private _categories;
@@ -79,6 +92,26 @@ export declare class LyraSequenceStrip extends LyraElement {
      *  computes the summary from `items`/`categories`; an explicitly empty string renders as an
      *  empty label rather than falling back to the auto-generated summary. */
     accessibleLabel?: string;
+    /**
+     * Index of the currently selected item, or `-1` (the default) for none — the controlled selection
+     * this strip's natural companion, `lr-sequence-playback`, scrubs through. Mirrors the shape
+     * `lr-lite-chart`'s `selectedIndices` and `lr-heatmap`'s `selectedCell` already establish.
+     *
+     * Controlled, not self-managing: activating a cell emits `lr-item-activate` and does **not**
+     * move the selection on its own, so the consumer stays the single source of truth and the
+     * component cannot drift from a playback index it does not own. An out-of-range or non-integer
+     * value selects nothing rather than throwing.
+     */
+    selectedIndex: number;
+    /** Whether `index` is the selected one, guarding a non-integer or out-of-range value. */
+    private isSelected;
+    /**
+     * Emits `lr-item-activate` for `index`.
+     *
+     * Not cancelable: nothing in this component branches on `defaultPrevented`, and the library's
+     * contract reserves cancelable events for real veto points.
+     */
+    private activateItem;
     /** Renders a static `[part="legend"]` key of every `categories` entry below the strip, so the
      *  color-to-category mapping is readable without hovering each cell. Deliberately
      *  non-interactive: unlike `<lr-graph-legend>` this toggles nothing and emits nothing — the

package/dist/components/data/sequence-strip/sequence-strip.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{styleMap}from"lit/directives/style-map.js";import{LyraElement}from"../../../internal/lyra-element.js";import{getListFormat,getNumberFormat}from"../../../internal/intl-cache.js";import{isRtl}from"../../../internal/rtl.js";import{sanitizeCssColor}from"../../../internal/safe-css.js";import{styles}from"./sequence-strip.styles.js";import{LYRA_DEFAULT_sequenceStripCategoryCount,LYRA_DEFAULT_sequenceStripEmpty,LYRA_DEFAULT_sequenceStripUnnamedCategory}from"../../../internal/default-strings.generated.js";const MAX_RENDERED_ITEMS=200,MAX_RENDERED_CATEGORIES=200,MAX_SEQUENCE_COLLECTION_ENTRIES=1e4;class LyraSequenceStrip extends LyraElement{constructor(){super(...arguments),this._items=[],this._categories=[],this.showLegend=!1,this.hoverIndex=null,this.keyboardIndex=null,this.restoringOwnedFocus=!1,this.focusRestoreGeneration=0}static{this.defaultStrings={...super.defaultStrings,sequenceStripCategoryCount:LYRA_DEFAULT_sequenceStripCategoryCount,sequenceStripEmpty:LYRA_DEFAULT_sequenceStripEmpty,sequenceStripUnnamedCategory:LYRA_DEFAULT_sequenceStripUnnamedCategory}}static{this.styles=[LyraElement.styles,styles]}get items(){return this._items}set items(value){const previous=this._items,seen=new Set,next=[];if(Array.isArray(value))for(const item of value.slice(0,MAX_SEQUENCE_COLLECTION_ENTRIES))try{if(!item||typeof item.id!="string"||item.id.trim().length===0||seen.has(item.id))continue;seen.add(item.id),next.push(Object.freeze({id:item.id,categoryId:typeof item.categoryId=="string"?item.categoryId:"",...item.marker===void 0?{}:{marker:!!item.marker},...typeof item.label=="string"?{label:item.label}:{}}))}catch{}this._items=Object.freeze(next),this.requestUpdate("items",previous)}get categories(){return this._categories}set categories(value){const previous=this._categories,seen=new Set,next=[];if(Array.isArray(value))for(const category of value.slice(0,MAX_SEQUENCE_COLLECTION_ENTRIES))try{if(!category||typeof category.id!="string"||category.id.trim().length===0||seen.has(category.id))continue;seen.add(category.id),next.push(Object.freeze({id:category.id,color:typeof category.color=="string"?category.color:"",...typeof category.label=="string"?{label:category.label}:{}}))}catch{}this._categories=Object.freeze(next),this.requestUpdate("categories",previous)}willUpdate(changed){if(super.willUpdate(changed),changed.has("items")){this.focusRestoreGeneration++,this.hoverIndex=null;const focusedCell=this.shadowRoot?.activeElement,focusedIndex=Number(focusedCell?.dataset.index);if(!Number.isInteger(focusedIndex)||focusedIndex<0){this.keyboardIndex=null;return}const focusedId=(changed.get("items")??[])[focusedIndex]?.id,retainedIndex=focusedId==null?-1:this.items.findIndex(item=>item.id===focusedId),nextIndex=retainedIndex>=0?retainedIndex:this.items.length?Math.min(focusedIndex,this.items.length-1):-1;this.keyboardIndex=nextIndex>=0?nextIndex:null,this.pendingFocusTarget=nextIndex>=0?nextIndex:"base",this.restoringOwnedFocus=!0}}updated(changed){super.updated(changed);const pending=this.pendingFocusTarget;if(pending===void 0)return;this.pendingFocusTarget=void 0;const generation=this.focusRestoreGeneration;this.scheduleAfterUpdate(()=>{try{if(generation!==this.focusRestoreGeneration||!this.isConnected)return;if(pending==="base"){this.shadowRoot?.querySelector('[part="base"]')?.focus();return}this.shadowRoot?.querySelector(`[part="cell"][data-index="${pending}"]`)?.focus()}finally{this.restoringOwnedFocus=!1}},"sequence-strip-focus")}disconnectedCallback(){this.focusRestoreGeneration++,this.pendingFocusTarget=void 0,this.restoringOwnedFocus=!1,this.hoverIndex=null,this.keyboardIndex=null,super.disconnectedCallback()}categoryMap(){return new Map(this.categories.map(category=>[category.id,category]))}categoryColor(categoryId,categories){return sanitizeCssColor(categories.get(categoryId)?.color)??"transparent"}categoryLabel(categoryId,categories){const label=categories.get(categoryId)?.label;return label!==void 0&&label.trim().length>0?label:this.localize("sequenceStripUnnamedCategory")}autoSummary(){const counts=new Map,categories=this.categoryMap();for(const item of this.items)counts.set(item.categoryId,(counts.get(item.categoryId)??0)+1);if(counts.size===0)return this.localize("sequenceStripEmpty");const clauses=[...counts.entries()].map(([categoryId,count])=>{const label=this.categoryLabel(categoryId,categories);return this.localize("sequenceStripCategoryCount",void 0,{label,count:getNumberFormat(this.effectiveLocale).format(count),pluralCount:count})}),markerCount=this.items.filter(item=>item.marker).length;return this.markerLabel&&markerCount>0&&clauses.push(this.localize("sequenceStripCategoryCount",void 0,{label:this.markerLabel,count:getNumberFormat(this.effectiveLocale).format(markerCount),pluralCount:markerCount})),getListFormat(this.effectiveLocale,{style:"long",type:"unit"}).format(clauses)}itemLabel(item,categories=this.categoryMap()){return item.label!==void 0&&item.label.trim().length>0?item.label:this.categoryLabel(item.categoryId,categories)}onCellEnter(index){this.hoverIndex=index}onCellLeave(){this.hoverIndex=null}onCellFocus(index){this.restoringOwnedFocus||(this.keyboardIndex=index)}onStripFocusOut(e){if(this.restoringOwnedFocus)return;const next=e.relatedTarget;(!(next instanceof Element)||next.getAttribute("part")!=="cell")&&(this.keyboardIndex=null)}onCellKeyDown(e,index){if(!["ArrowLeft","ArrowRight","Home","End"].includes(e.key)||this.items.length===0)return;e.preventDefault();const forwardKey=isRtl(this)?"ArrowLeft":"ArrowRight",backwardKey=isRtl(this)?"ArrowRight":"ArrowLeft";let next=index;e.key==="Home"?next=0:e.key==="End"?next=this.items.length-1:e.key===forwardKey?next=Math.min(this.items.length-1,index+1):e.key===backwardKey&&(next=Math.max(0,index-1));const items=this.items,targetId=items[next]?.id;if(targetId===void 0)return;const generation=this.focusRestoreGeneration;this.keyboardIndex=next,this.updateComplete.then(()=>{if(generation!==this.focusRestoreGeneration||!this.isConnected||this.items!==items)return;const target=this.shadowRoot?.querySelector(`[part="cell"][data-index="${next}"]`);target?.dataset.itemId===targetId&&target.focus()})}renderLegend(){const renderedCategories=this.categories.slice(0,MAX_RENDERED_CATEGORIES),categoryMap=this.categoryMap(),number=getNumberFormat(this.effectiveLocale);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{styleMap}from"lit/directives/style-map.js";import{LyraElement}from"../../../internal/lyra-element.js";import{getListFormat,getNumberFormat}from"../../../internal/intl-cache.js";import{isRtl}from"../../../internal/rtl.js";import{sanitizeCssColor}from"../../../internal/safe-css.js";import{styles}from"./sequence-strip.styles.js";import{LYRA_DEFAULT_sequenceStripCategoryCount,LYRA_DEFAULT_sequenceStripEmpty,LYRA_DEFAULT_sequenceStripUnnamedCategory}from"../../../internal/default-strings.generated.js";const MAX_RENDERED_ITEMS=200,MAX_RENDERED_CATEGORIES=200,MAX_SEQUENCE_COLLECTION_ENTRIES=1e4;class LyraSequenceStrip extends LyraElement{constructor(){super(...arguments),this._items=[],this._categories=[],this.selectedIndex=-1,this.showLegend=!1,this.hoverIndex=null,this.keyboardIndex=null,this.restoringOwnedFocus=!1,this.focusRestoreGeneration=0}static{this.defaultStrings={...super.defaultStrings,sequenceStripCategoryCount:LYRA_DEFAULT_sequenceStripCategoryCount,sequenceStripEmpty:LYRA_DEFAULT_sequenceStripEmpty,sequenceStripUnnamedCategory:LYRA_DEFAULT_sequenceStripUnnamedCategory}}static{this.styles=[LyraElement.styles,styles]}get items(){return this._items}set items(value){const previous=this._items,seen=new Set,next=[];if(Array.isArray(value))for(const item of value.slice(0,MAX_SEQUENCE_COLLECTION_ENTRIES))try{if(!item||typeof item.id!="string"||item.id.trim().length===0||seen.has(item.id))continue;seen.add(item.id),next.push(Object.freeze({id:item.id,categoryId:typeof item.categoryId=="string"?item.categoryId:"",...item.marker===void 0?{}:{marker:!!item.marker},...typeof item.label=="string"?{label:item.label}:{}}))}catch{}this._items=Object.freeze(next),this.requestUpdate("items",previous)}get categories(){return this._categories}set categories(value){const previous=this._categories,seen=new Set,next=[];if(Array.isArray(value))for(const category of value.slice(0,MAX_SEQUENCE_COLLECTION_ENTRIES))try{if(!category||typeof category.id!="string"||category.id.trim().length===0||seen.has(category.id))continue;seen.add(category.id),next.push(Object.freeze({id:category.id,color:typeof category.color=="string"?category.color:"",...typeof category.label=="string"?{label:category.label}:{}}))}catch{}this._categories=Object.freeze(next),this.requestUpdate("categories",previous)}isSelected(index){return Number.isInteger(this.selectedIndex)&&this.selectedIndex>=0&&this.selectedIndex<this.items.length&&this.selectedIndex===index}activateItem(index){const item=this.items[index];item&&this.emit("lr-item-activate",{index,id:item.id,item})}willUpdate(changed){if(super.willUpdate(changed),changed.has("items")){this.focusRestoreGeneration++,this.hoverIndex=null;const focusedCell=this.shadowRoot?.activeElement,focusedIndex=Number(focusedCell?.dataset.index);if(!Number.isInteger(focusedIndex)||focusedIndex<0){this.keyboardIndex=null;return}const focusedId=(changed.get("items")??[])[focusedIndex]?.id,retainedIndex=focusedId==null?-1:this.items.findIndex(item=>item.id===focusedId),nextIndex=retainedIndex>=0?retainedIndex:this.items.length?Math.min(focusedIndex,this.items.length-1):-1;this.keyboardIndex=nextIndex>=0?nextIndex:null,this.pendingFocusTarget=nextIndex>=0?nextIndex:"base",this.restoringOwnedFocus=!0}}updated(changed){super.updated(changed);const pending=this.pendingFocusTarget;if(pending===void 0)return;this.pendingFocusTarget=void 0;const generation=this.focusRestoreGeneration;this.scheduleAfterUpdate(()=>{try{if(generation!==this.focusRestoreGeneration||!this.isConnected)return;if(pending==="base"){this.shadowRoot?.querySelector('[part="base"]')?.focus();return}this.shadowRoot?.querySelector(`[part="cell"][data-index="${pending}"]`)?.focus()}finally{this.restoringOwnedFocus=!1}},"sequence-strip-focus")}disconnectedCallback(){this.focusRestoreGeneration++,this.pendingFocusTarget=void 0,this.restoringOwnedFocus=!1,this.hoverIndex=null,this.keyboardIndex=null,super.disconnectedCallback()}categoryMap(){return new Map(this.categories.map(category=>[category.id,category]))}categoryColor(categoryId,categories){return sanitizeCssColor(categories.get(categoryId)?.color)??"transparent"}categoryLabel(categoryId,categories){const label=categories.get(categoryId)?.label;return label!==void 0&&label.trim().length>0?label:this.localize("sequenceStripUnnamedCategory")}autoSummary(){const counts=new Map,categories=this.categoryMap();for(const item of this.items)counts.set(item.categoryId,(counts.get(item.categoryId)??0)+1);if(counts.size===0)return this.localize("sequenceStripEmpty");const clauses=[...counts.entries()].map(([categoryId,count])=>{const label=this.categoryLabel(categoryId,categories);return this.localize("sequenceStripCategoryCount",void 0,{label,count:getNumberFormat(this.effectiveLocale).format(count),pluralCount:count})}),markerCount=this.items.filter(item=>item.marker).length;return this.markerLabel&&markerCount>0&&clauses.push(this.localize("sequenceStripCategoryCount",void 0,{label:this.markerLabel,count:getNumberFormat(this.effectiveLocale).format(markerCount),pluralCount:markerCount})),getListFormat(this.effectiveLocale,{style:"long",type:"unit"}).format(clauses)}itemLabel(item,categories=this.categoryMap()){return item.label!==void 0&&item.label.trim().length>0?item.label:this.categoryLabel(item.categoryId,categories)}onCellEnter(index){this.hoverIndex=index}onCellLeave(){this.hoverIndex=null}onCellFocus(index){this.restoringOwnedFocus||(this.keyboardIndex=index)}onStripFocusOut(e){if(this.restoringOwnedFocus)return;const next=e.relatedTarget;(!(next instanceof Element)||next.getAttribute("part")!=="cell")&&(this.keyboardIndex=null)}onCellKeyDown(e,index){if(e.key==="Enter"||e.key===" "||e.key==="Spacebar"){e.preventDefault(),this.activateItem(index);return}if(!["ArrowLeft","ArrowRight","Home","End"].includes(e.key)||this.items.length===0)return;e.preventDefault();const forwardKey=isRtl(this)?"ArrowLeft":"ArrowRight",backwardKey=isRtl(this)?"ArrowRight":"ArrowLeft";let next=index;e.key==="Home"?next=0:e.key==="End"?next=this.items.length-1:e.key===forwardKey?next=Math.min(this.items.length-1,index+1):e.key===backwardKey&&(next=Math.max(0,index-1));const items=this.items,targetId=items[next]?.id;if(targetId===void 0)return;const generation=this.focusRestoreGeneration;this.keyboardIndex=next,this.updateComplete.then(()=>{if(generation!==this.focusRestoreGeneration||!this.isConnected||this.items!==items)return;const target=this.shadowRoot?.querySelector(`[part="cell"][data-index="${next}"]`);target?.dataset.itemId===targetId&&target.focus()})}renderLegend(){const renderedCategories=this.categories.slice(0,MAX_RENDERED_CATEGORIES),categoryMap=this.categoryMap(),number=getNumberFormat(this.effectiveLocale);return html`
       <div part="legend" aria-hidden="true">
         ${renderedCategories.map(category=>html`
             <span part="legend-item">
@@ -41,6 +41,9 @@ var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3
               @pointerleave=${()=>this.onCellLeave()}
               @focus=${()=>this.onCellFocus(index)}
               @keydown=${e=>this.onCellKeyDown(e,index)}
+              @click=${()=>this.activateItem(index)}
+              aria-current=${this.isSelected(index)?"true":"false"}
+              ?data-selected=${this.isSelected(index)}
             >
               ${item.marker?html`<span part="marker"></span>`:nothing}
               ${index===tooltipIndex?html`
@@ -52,4 +55,4 @@ var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3
       </div>
       ${this.items.length>renderedItems.length?html`<div part="window-range" aria-hidden="true">${number.format(windowStart+1)}–${number.format(windowStart+renderedItems.length)} / ${number.format(this.items.length)}</div>`:nothing}
       ${this.showLegend?this.renderLegend():nothing}
-    `}}__decorate([property({attribute:!1})],LyraSequenceStrip.prototype,"items",null),__decorate([property({attribute:!1})],LyraSequenceStrip.prototype,"categories",null),__decorate([property({attribute:"accessible-label"})],LyraSequenceStrip.prototype,"accessibleLabel",void 0),__decorate([property({type:Boolean,reflect:!0,attribute:"show-legend"})],LyraSequenceStrip.prototype,"showLegend",void 0),__decorate([property({attribute:"marker-label"})],LyraSequenceStrip.prototype,"markerLabel",void 0),__decorate([state()],LyraSequenceStrip.prototype,"hoverIndex",void 0),__decorate([state()],LyraSequenceStrip.prototype,"keyboardIndex",void 0);export{LyraSequenceStrip};
+    `}}__decorate([property({attribute:!1})],LyraSequenceStrip.prototype,"items",null),__decorate([property({attribute:!1})],LyraSequenceStrip.prototype,"categories",null),__decorate([property({attribute:"accessible-label"})],LyraSequenceStrip.prototype,"accessibleLabel",void 0),__decorate([property({type:Number,attribute:"selected-index"})],LyraSequenceStrip.prototype,"selectedIndex",void 0),__decorate([property({type:Boolean,reflect:!0,attribute:"show-legend"})],LyraSequenceStrip.prototype,"showLegend",void 0),__decorate([property({attribute:"marker-label"})],LyraSequenceStrip.prototype,"markerLabel",void 0),__decorate([state()],LyraSequenceStrip.prototype,"hoverIndex",void 0),__decorate([state()],LyraSequenceStrip.prototype,"keyboardIndex",void 0);export{LyraSequenceStrip};

package/dist/components/data/sequence-strip/sequence-strip.styles.js

@@ -9,9 +9,6 @@ import{css}from"lit";const styles=css`
     gap: var(--lr-size-1px);
     block-size: var(--lr-sequence-strip-height, var(--lr-size-1-5rem));
   }
-  /* Above the documented 320-item dense threshold, retaining a 1px gap per item would make the
-     gaps alone wider than the 320px responsive baseline. Collapse only that decorative spacing;
-     every semantic cell stays rendered, colored, named, and keyboard reachable. */
   [part='base'][data-dense] {
     gap: 0;
   }
@@ -23,17 +20,25 @@ import{css}from"lit";const styles=css`
     align-items: flex-end;
     justify-content: center;
   }
-  /* no-pressed-state: a cell is a role="listitem" span with no activation of any kind -- it takes a
-     roving tabindex and reacts to pointerenter/focus purely to move the tooltip, and there is no
-     click handler and no lr-* event behind it. Nothing happens on press, so a pressed treatment
-     would be promising an action the strip does not have. */
+  [part='cell'] {
+    cursor: pointer;
+  }
   [part='cell']:hover,
   [part='cell']:focus-visible {
     outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);
     outline-offset: calc(-1 * var(--lr-focus-ring-width));
   }
-  /* Round the strip's own outer ends via the first/last cell, not overflow:hidden on [part='base'] --
-     that would clip [part='tooltip'], which is deliberately positioned outside the base's own box. */
+  [part='cell']:active {
+    outline: var(--lr-focus-ring-width) solid var(--lr-color-text);
+    outline-offset: calc(-1 * var(--lr-focus-ring-width));
+  }
+  [part='cell'][data-selected] {
+    outline: var(--lr-focus-ring-width) solid var(--lr-color-text);
+    outline-offset: calc(-1 * var(--lr-focus-ring-width));
+  }
+  [part='cell'][data-selected]:focus-visible {
+    outline-color: var(--lr-focus-ring-color);
+  }
   [part='cell']:first-child {
     border-start-start-radius: var(--lr-radius-xs);
     border-end-start-radius: var(--lr-radius-xs);
@@ -63,19 +68,12 @@ import{css}from"lit";const styles=css`
     pointer-events: none;
     z-index: var(--lr-layer-content);
   }
-  /* The tooltip is a child of the active cell, so this 50% inset tracks that cell instead of the
-     strip. Under RTL the inset anchors to the physical right edge; the fixed horizontal -50%
-     translate must flip sign there because translateX is physical, not logical. */
   :host(:dir(rtl)) [part='tooltip'] {
     transform: translate(50%, calc(-1 * var(--lr-size-6px)));
   }
   [part='tooltip'][hidden] {
     display: none;
   }
-  /* The legend keys the whole category scheme, so its row count grows with the consumer's
-     categories and its labels grow with translation -- it wraps rather than overflowing, and each
-     item keeps min-inline-size: 0 so a long label shrinks inside its own row instead of forcing
-     the strip's allocation wider. */
   [part='legend'] {
     display: flex;
     flex-wrap: wrap;
@@ -108,10 +106,6 @@ import{css}from"lit";const styles=css`
     block-size: var(--lr-sequence-strip-legend-swatch-size, var(--lr-size-0-625rem));
     border-radius: var(--lr-radius-xs);
   }
-  /* The marker legend row stands for the marker on *any* cell, so its chip is deliberately a
-     neutral background rather than a category color, with the cell's own bottom bar reproduced as
-     an inset shadow (same thickness, same --lr-sequence-strip-marker-color) instead of a child
-     element -- the chip has no children to give the bar its own box. */
   [part='legend-marker-swatch'] {
     background: var(--lr-sequence-strip-legend-marker-bg, var(--lr-color-surface-raised));
     box-shadow: inset 0 calc(-1 * var(--lr-size-2px)) 0 0

package/dist/components/data/sparkline/sparkline.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,svg}from"lit";import{property}from"lit/decorators.js";import{nextId}from"../../../internal/a11y.js";import{LyraElement}from"../../../internal/lyra-element.js";import{getNumberFormat}from"../../../internal/intl-cache.js";import{finiteNumber,finiteRatio}from"../../../internal/numbers.js";import{styles}from"./sparkline.styles.js";import{LYRA_DEFAULT_noData,LYRA_DEFAULT_trendOf}from"../../../internal/default-strings.generated.js";const VIEW=100,MAX_POINTS=500;function decimate(arr,max){if(arr.length<=max)return[...arr];const step=(arr.length-1)/(max-1);return Array.from({length:max},(_,i)=>arr[Math.round(i*step)])}function finiteData(value){const source=value.trim();return source?source.split(/\s+/u).map(Number).filter(item=>Number.isFinite(item)):[]}function normalizeAppearance(value){return value==="gradient"||value==="line"||value==="solid"?value:"solid"}function normalizeCurve(value){return value==="natural"||value==="step"||value==="linear"?value:"linear"}class LyraSparkline extends LyraElement{constructor(){super(...arguments),this.appearance="solid",this.curve="linear",this.data="",this.label="",this.accessibleLabel=null,this.values=[],this._mark="line",this.gradientId=nextId("sparkline-gradient")}static{this.defaultStrings={...super.defaultStrings,noData:LYRA_DEFAULT_noData,trendOf:LYRA_DEFAULT_trendOf}}static{this.styles=[LyraElement.styles,styles]}get mark(){return this._mark}set mark(value){const normalized=value==="bar"?"bar":"line",previous=this._mark;if(previous===normalized){value!==normalized&&this.requestUpdate("mark",previous);return}this._mark=normalized,this.requestUpdate("mark",previous)}plotValues(){if(this.data.trim()){const parsed=finiteData(this.data);return parsed.length>=2?parsed:[]}return Array.isArray(this.values)?this.values.filter(item=>Number.isFinite(item)):[]}points(values=this.plotValues()){let autoLo=values[0]??0,autoHi=values[0]??0;if(!Number.isFinite(this.min)||!Number.isFinite(this.max))for(const value of values)value<autoLo&&(autoLo=value),value>autoHi&&(autoHi=value);let lo=finiteNumber(this.min??autoLo,autoLo),hi=finiteNumber(this.max??autoHi,autoHi);lo>hi&&([lo,hi]=[hi,lo]);const samples=values.length>MAX_POINTS?decimate(values,MAX_POINTS):[...values];return samples.map((value,index)=>{const forwardX=samples.length>1?index/(samples.length-1)*VIEW:VIEW/2,x=this.effectiveDirection==="rtl"?VIEW-forwardX:forwardX,y=lo===hi?VIEW/2:VIEW-finiteRatio(value,lo,hi)*VIEW;return[x,y]})}linePath(points){const first=points[0];if(!first)return"";if(points.length===1)return`M${first[0]},${first[1]} L${first[0]},${first[1]}`;const curve=normalizeCurve(this.curve);if(curve==="step")return points.slice(1).reduce((path,point)=>`${path} H${point[0]} V${point[1]}`,`M${first[0]},${first[1]}`);if(curve==="natural"){let path=`M${first[0]},${first[1]}`;for(let index=0;index<points.length-1;index++){const before=points[Math.max(0,index-1)],start=points[index],end=points[index+1],after=points[Math.min(points.length-1,index+2)],c1x=start[0]+(end[0]-before[0])/6,c1y=start[1]+(end[1]-before[1])/6,c2x=end[0]-(after[0]-start[0])/6,c2y=end[1]-(after[1]-start[1])/6;path+=` C${c1x},${c1y} ${c2x},${c2y} ${end[0]},${end[1]}`}return path}return points.map(([x,y],index)=>`${index?"L":"M"}${x},${y}`).join(" ")}accessibleName(values){if(this.label)return this.label;if(this.accessibleLabel)return this.accessibleLabel;const last=values.at(-1);return last===void 0?this.localize("noData"):this.localize("trendOf",void 0,{count:getNumberFormat(this.effectiveLocale).format(values.length),value:getNumberFormat(this.effectiveLocale,{maximumFractionDigits:2}).format(last)})}renderBars(points){const slot=VIEW/Math.max(1,points.length),barWidth=Math.min(4,Math.max(1,slot*.7));return html`${points.map(([x,y])=>{const barY=Math.min(VIEW,Math.max(0,y));return svg`<rect
+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,svg}from"lit";import{property}from"lit/decorators.js";import{nextId}from"../../../internal/a11y.js";import{LyraElement}from"../../../internal/lyra-element.js";import{getNumberFormat}from"../../../internal/intl-cache.js";import{finiteNumber,finiteRatio}from"../../../internal/numbers.js";import{styles}from"./sparkline.styles.js";import{LYRA_DEFAULT_noData,LYRA_DEFAULT_trendOf}from"../../../internal/default-strings.generated.js";const VIEW=100,MAX_POINTS=500;function decimate(arr,max){if(arr.length<=max)return[...arr];const step=(arr.length-1)/(max-1);return Array.from({length:max},(_,i)=>arr[Math.round(i*step)])}function finiteData(value){const source=value.trim();return source?source.split(/\s+/u).map(Number).filter(item=>Number.isFinite(item)):[]}function normalizeAppearance(value){return value==="gradient"||value==="line"||value==="solid"?value:"solid"}function normalizeCurve(value){return value==="natural"||value==="step"||value==="linear"?value:"linear"}class LyraSparkline extends LyraElement{constructor(){super(...arguments),this.appearance="solid",this.curve="linear",this.data="",this.label="",this.accessibleLabel=null,this.values=[],this._mark="line",this.gradientId=nextId("sparkline-gradient")}static{this.defaultStrings={...super.defaultStrings,noData:LYRA_DEFAULT_noData,trendOf:LYRA_DEFAULT_trendOf}}static{this.styles=[LyraElement.styles,styles]}get mark(){return this._mark}set mark(value){const normalized=value==="bar"?"bar":"line",previous=this._mark;if(previous===normalized){value!==normalized&&this.requestUpdate("mark",previous);return}this._mark=normalized,this.requestUpdate("mark",previous)}plotValues(){if(this.data.trim()){const parsed=finiteData(this.data);return parsed.length>=2?parsed:[]}return Array.isArray(this.values)?this.values.filter(item=>Number.isFinite(item)):[]}points(values=this.plotValues()){let autoLo=values[0]??0,autoHi=values[0]??0;if(!Number.isFinite(this.min)||!Number.isFinite(this.max))for(const value of values)value<autoLo&&(autoLo=value),value>autoHi&&(autoHi=value);let lo=finiteNumber(this.min??autoLo,autoLo),hi=finiteNumber(this.max??autoHi,autoHi);lo>hi&&([lo,hi]=[hi,lo]);const samples=values.length>MAX_POINTS?decimate(values,MAX_POINTS):[...values];return samples.map((value,index)=>{const forwardX=samples.length>1?index/(samples.length-1)*VIEW:VIEW/2,x=this.effectiveDirection==="rtl"?VIEW-forwardX:forwardX,y=lo===hi?VIEW/2:VIEW-finiteRatio(value,lo,hi)*VIEW;return[x,y]})}linePath(points){const first=points[0];if(!first)return"";if(points.length===1)return`M${first[0]},${first[1]} L${first[0]},${first[1]}`;const curve=normalizeCurve(this.curve);if(curve==="step")return points.slice(1).reduce((path,point)=>`${path} H${point[0]} V${point[1]}`,`M${first[0]},${first[1]}`);if(curve==="natural"){let path=`M${first[0]},${first[1]}`;for(let index=0;index<points.length-1;index++){const before=points[Math.max(0,index-1)],start=points[index],end=points[index+1],after=points[Math.min(points.length-1,index+2)],c1x=start[0]+(end[0]-before[0])/6,c1y=start[1]+(end[1]-before[1])/6,c2x=end[0]-(after[0]-start[0])/6,c2y=end[1]-(after[1]-start[1])/6;path+=` C${c1x},${c1y} ${c2x},${c2y} ${end[0]},${end[1]}`}return path}return points.map(([x,y],index)=>`${index?"L":"M"}${x},${y}`).join(" ")}accessibleName(values){if(this.accessibleLabel)return this.accessibleLabel;if(this.label)return this.label;const last=values.at(-1);return last===void 0?this.localize("noData"):this.localize("trendOf",void 0,{count:getNumberFormat(this.effectiveLocale).format(values.length),value:getNumberFormat(this.effectiveLocale,{maximumFractionDigits:2}).format(last)})}renderBars(points){const slot=VIEW/Math.max(1,points.length),barWidth=Math.min(4,Math.max(1,slot*.7));return html`${points.map(([x,y])=>{const barY=Math.min(VIEW,Math.max(0,y));return svg`<rect
         part="bar"
         x="${x-barWidth/2}"
         y="${barY}"

package/dist/components/data/stat/stat.styles.js

@@ -28,10 +28,6 @@ import{css}from"lit";const styles=css`
     inset: 0;
     z-index: var(--lr-layer-base);
   }
-  /* The visible content is a sibling of the stretched native link. Built-in, non-interactive
-     regions let pointer input pass through to that link; public slots opt back into hit testing so
-     their own controls remain independently operable. Plain slotted content delegates its click
-     to the link in the class rather than becoming a dead patch in the card. */
   .linked-content {
     position: relative;
     z-index: var(--lr-layer-content);
@@ -53,19 +49,11 @@ import{css}from"lit";const styles=css`
     cursor: pointer;
     transition: border-color var(--lr-transition-fast), box-shadow var(--lr-transition-fast);
   }
-  /* :where() zeroes the extra [href] attribute selector's specificity contribution, leaving only
-     :hover itself so a consumer's ::part(base):hover override ((0,1,1)) wins without needing
-     !important. */
   :where([part='base'][href]):hover,
   :where(.linked-shell:hover > [part='base']) {
     border-color: var(--lr-stat-link-hover-border-color, var(--lr-color-brand));
-    /* One step of lift on an otherwise flat resting card -- a hovered tile is still resting chrome,
-       not an overlay, so it stops at the card step. */
     box-shadow: var(--lr-stat-link-hover-shadow, var(--lr-shadow-s));
   }
-  /* The pressed tile keeps the hovered border and lift and adds a fill: a shadow change alone is
-     nearly invisible on a card this large, and the tint mixes toward --lr-color-mix-partner (the
-     text colour) so it darkens a light theme and lightens a dark one rather than always doing one. */
   :where([part='base'][href]):active {
     border-color: var(
       --lr-stat-link-active-border-color,
@@ -100,8 +88,6 @@ import{css}from"lit";const styles=css`
     letter-spacing: var(--lr-size-0-04em);
     color: var(--lr-color-text-quiet);
   }
-  /* An empty label part is still a flex item and still picks up [part='base']'s gap, leaving a
-     stray blank line above the value — collapse it the same way icon/sub/spark/caption/rows do. */
   [part='label'][hidden] {
     display: none;
   }
@@ -120,26 +106,11 @@ import{css}from"lit";const styles=css`
     font-weight: var(--lr-font-weight-bold);
     font-family: var(--lr-font-mono);
   }
-  /* [part='value']/[part='row-value'] become keyboard-focusable (tabindex="0")
-     whenever exactValue/row.exactValue is set (see stat.class.ts), so they
-     need their own visible focus ring like every other focusable part in the
-     library. */
   [part='value']:focus-visible,
   [part='row-value']:focus-visible {
     outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);
     outline-offset: var(--lr-focus-ring-offset);
   }
-  /* Mouse-user counterpart to the :focus-visible rule above: only the [tabindex] state (i.e.
-     exactValue/row.exactValue is actually set, so there's a tooltip to reveal) gets a hover
-     affordance -- a value with nothing to reveal stays inert on hover, matching its own lack of a
-     focus ring. :where() zeroes the extra [tabindex] attribute selector's specificity
-     contribution, leaving only :hover itself so a consumer's ::part(value):hover /
-     ::part(row-value):hover override wins without needing !important. */
-  /* no-pressed-state: the [tabindex] on these parts exists only so a keyboard user can reach the
-     same native title tooltip a mouse user gets by hovering -- there is no click handler and
-     nothing to activate, which is exactly what cursor: help says. A value part inside a linked
-     stat never takes the tabindex at all (the anchor owns the interaction, and its own pressed
-     state above covers it). */
   :where([part='value'][tabindex]):hover,
   :where([part='row-value'][tabindex]):hover {
     color: var(--lr-color-brand);
@@ -159,10 +130,6 @@ import{css}from"lit";const styles=css`
     font-size: var(--lr-font-size-sm);
     font-weight: var(--lr-font-weight-semibold);
     border-radius: var(--lr-radius);
-    /* 0.05rem/0.4rem don't cleanly map to any --lr-space-* step (the
-       smallest, --lr-space-xs, is 0.25rem): rounding the vertical value
-       up to xs would 5x this chip's padding and blow out the compact
-       trend-chip look, so both stay literal here. */
     padding: var(--lr-size-0-05rem) var(--lr-size-0-4rem);
     align-self: flex-start;
   }
@@ -172,10 +139,6 @@ import{css}from"lit";const styles=css`
   [part='trend'][data-direction='down'] svg {
     transform: rotate(90deg);
   }
-  /* Scoped cssprops (falling back to today's exact shared-token values) so a consumer can retint
-     just the trend pill without also recoloring the headline value's variant="success"/"danger"
-     tint below, which deliberately keeps reading the shared --lr-color-success/-danger tokens
-     directly -- and vice versa. */
   [part='trend'][data-polarity='good'] {
     color: var(--lr-stat-trend-good-color, var(--lr-color-success));
     background: var(--lr-stat-trend-good-bg, color-mix(in srgb, var(--lr-color-success) 8%, transparent));
@@ -197,8 +160,6 @@ import{css}from"lit";const styles=css`
     color: var(--lr-stat-value-danger-color, var(--lr-color-danger));
   }
   [part='spark'] {
-    /* Consumers compose their own <lr-sparkline slot="spark">; this part
-       only needs to reserve width for it. */
     display: block;
   }
   [part='spark'][hidden] {
@@ -226,9 +187,6 @@ import{css}from"lit";const styles=css`
     display: flex;
     min-inline-size: 0;
     flex-direction: column;
-    /* Slightly tighter than the card's own --lr-space-xs gap so the
-       breakdown list reads as one nested group rather than siblings of
-       equal weight with label/value/caption. */
     gap: var(--lr-size-0-125rem);
   }
   [part='rows'][hidden] {
@@ -255,14 +213,9 @@ import{css}from"lit";const styles=css`
     font-family: var(--lr-font-mono);
     font-weight: var(--lr-font-weight-semibold);
   }
-  /* Orthogonal to the status variant: an accent edge that marks a stat as
-     visually emphasized (e.g. the "headline" stat in a group) regardless of
-     status color. */
   :host([emphasis]) [part='base'] {
     border-inline-start: var(--lr-border-width-thick) solid var(--lr-stat-emphasis-border-color, var(--lr-color-brand));
   }
-  /* Status semantics win over visual emphasis: only tint the value with the
-     brand color when there's no status variant already claiming it. */
   :host([emphasis][variant='neutral']) [part='value'] {
     color: var(--lr-stat-emphasis-value-color, var(--lr-color-brand));
   }
@@ -283,13 +236,6 @@ import{css}from"lit";const styles=css`
     padding: var(--lr-space-s);
     gap: var(--lr-size-0-125rem);
   }
-  /* MUST stay after :host([compact]): both selectors are :host([x]) [part='base'], i.e. equal
-     specificity, so source order alone decides which padding wins when a stat is both compact and
-     plain. plain is the stronger statement ("no chrome at all"), so it goes last.
-     Also drops block-size: 100% — stretching to fill an arbitrarily tall parent is card behavior;
-     a chrome-less stat sits at its content height so it can be dropped inline in prose or a
-     toolbar. The emphasis accent edge is card chrome too and goes with the rest of the border;
-     the emphasis brand value tint is unaffected and still applies. */
   :host([frame='plain']) [part='base'] {
     padding: 0;
     border: 0;
@@ -304,15 +250,9 @@ import{css}from"lit";const styles=css`
   :host([frame='plain']) .linked-content {
     padding: 0;
   }
-  /* The card's interactive affordance is a border-color shift plus a lift shadow, and neither
-     reads on a border-less, background-less box — a linked plain stat underlines its headline
-     value instead. The :focus-visible outline above needs no border and still applies as-is. */
   :host([frame='plain']) [part='base'][href]:hover {
     box-shadow: none;
   }
-  /* The pressed card treatment has to be stripped for the same reason the hovered one is: a lift
-     shadow with no surface under it reads as a smudge, and a fill would put back exactly the box
-     frame="plain" exists to remove. The thicker underline below carries the press instead. */
   :host([frame='plain']) [part='base'][href]:active {
     box-shadow: none;
     background: transparent;
@@ -321,9 +261,6 @@ import{css}from"lit";const styles=css`
   :host([frame='plain']) [part='base'][href]:focus-visible + .linked-content [part='value'] {
     text-decoration: underline;
   }
-  /* Pressed thickens the same underline rather than recolouring the value -- the value already
-     carries the status variant's colour, and overriding it for the length of a click would read as
-     the stat changing state. */
   :host([frame='plain']) [part='base'][href]:active + .linked-content [part='value'] {
     text-decoration: underline;
     text-decoration-thickness: var(--lr-border-width-medium);
@@ -340,13 +277,9 @@ import{css}from"lit";const styles=css`
     align-items: baseline;
     column-gap: var(--lr-space-s);
   }
-  /* The trend pill opts out of baseline alignment in the stacked layout; on a single baseline row
-     it has to sit on that baseline like everything else. */
   :host([orientation='horizontal']) [part='trend'] {
     align-self: baseline;
   }
-  /* A breakdown list and a sparkline have no sensible place on a text baseline, so they claim a
-     full line of their own and stay stacked beneath the horizontal row. */
   :host([orientation='horizontal']) [part='spark'],
   :host([orientation='horizontal']) [part='rows'] {
     flex-basis: 100%;

package/dist/components/data/table/table.class.d.ts

@@ -18,6 +18,18 @@ export type TableSelectionMode = 'none' | 'single' | 'multiple';
  *  `sortKey`/`sortDir`, `'server'` renders `rows` in the order given. Mirrors the
  *  `paginationMode` split of the same two names. */
 export type TableSortMode = 'client' | 'server';
+/** `<lr-table>`'s `scrollMode`: which element scrolls when the table overflows.
+ *
+ * `'self'` (default) makes `[part="base"]` the scroll container, which is what pairs with
+ * `--lr-table-max-height` and what makes the sticky header pin inside the table's own viewport.
+ *
+ * `'page'` hands scrolling back to the page. Necessary because a scroll container clips *both*
+ * axes -- CSS gives no way to scroll one axis and not the other -- so an uncapped table that is
+ * still `overflow: auto` creates a sticky containing block that never scrolls, and its header
+ * scrolls off with the document instead of pinning. With `'page'` the header's nearest scrollport
+ * is the page, so it pins there; the cost is that a table wider than its host overflows the page
+ * rather than scrolling inside itself. */
+export type TableScrollMode = 'self' | 'page';
 /** Canonical table sort direction. */
 export type TableSortDirection = 'asc' | 'desc';
 /** Cancelable sort proposal detail. */
@@ -320,8 +332,10 @@ export interface LyraTableEventMap<T = unknown> {
  *   Frozen readonly `detail: { row, rowKey }`. Fired only when `expandedContent` is set and
  *   the row passes `canExpand`; does not itself mutate `expandedRowKeys` — the
  *   consumer updates it and passes the new value back in.
- * @event lr-selection-change - Opt-in row selection changed. Frozen readonly
- *   `detail: { rowKeys: readonly (string | number)[] }`.
+ * @event lr-selection-change - Opt-in row selection changed, from a row activation or from a
+ *   `selectionMode` flip to `'single'` coercing an existing multi-row selection down to one key.
+ *   Frozen readonly `detail: { rowKeys: readonly (string | number)[] }`. Not cancelable in either
+ *   case: it announces a selection that has already changed rather than proposing one.
  * @event lr-filter-change - The filter field changed. Frozen readonly `detail: { text }`.
  * @event lr-page-change - A pagination control requested a page. Frozen readonly `detail: { page }`.
  * @event lr-cell-edit - An inline editor committed a value. `detail: { row, columnKey, value }`.
@@ -401,6 +415,15 @@ export interface LyraTableEventMap<T = unknown> {
  * @cssprop [--lr-table-resize-handle-hover-opacity=var(--lr-table-resize-handle-opacity,0.12)] - Resize-handle hover/focus opacity.
  * @cssprop [--lr-table-resize-handle-active-bg=var(--lr-table-resize-handle-hover-bg,var(--lr-color-brand))] - Resize-handle pressed background.
  * @cssprop [--lr-table-resize-handle-active-opacity=calc(var(--lr-table-resize-handle-hover-opacity,var(--lr-table-resize-handle-opacity,0.12))*2)] - Resize-handle pressed opacity.
+ * @cssprop [--lr-table-cell-color=inherit] - Text colour of body cells; inherits the host's own
+ *   colour by default.
+ * @cssprop [--lr-table-cell-link-color=var(--lr-color-brand)] - Colour of an anchor returned from a
+ *   column's `cell(row)`. Such an anchor renders inside this component's shadow root, so page CSS
+ *   cannot reach it and `::part()` cannot select past the first compound selector to reach it
+ *   either; without this hook it computes to the UA default link blue. Set `revert` for the UA
+ *   default.
+ * @cssprop [--lr-table-cell-link-hover-color=var(--lr-table-cell-link-color,var(--lr-color-brand))] -
+ *   Colour of that anchor on hover and `:focus-visible`, which also thicken its underline.
  * @cssprop [--lr-table-max-height=none] - Cap on the scroll container's block size, past which the
  *   table body scrolls.
  * @cssprop [--lr-table-heat-tint-lo=var(--lr-color-brand-quiet)] - Low endpoint of the heat-tint
@@ -500,6 +523,9 @@ export declare class LyraTable<T = unknown> extends LyraElement<LyraTableEventMa
      *  wins. */
     rowKey?: (row: T) => string | number;
     selectionMode: TableSelectionMode;
+    /** Which element scrolls when the table overflows; see `TableScrollMode`. Defaults to `'self'`,
+     *  which is the pre-10.0 behaviour. */
+    scrollMode: TableScrollMode;
     private _selectedKeys;
     /** Selected raw row keys in every selection mode, bounded to 10,000 keys. Single mode replaces
      * this set with exactly one key per row activation; multiple mode toggles membership. Reads
@@ -574,7 +600,15 @@ export declare class LyraTable<T = unknown> extends LyraElement<LyraTableEventMa
      *  `expandedRowKeys`. Table-level (not per-column) since the panel spans
      *  every column via `colspan`. Setting this makes every row render a
      *  leading chevron-toggle cell before all data columns; omit for no
-     *  leading cell at all (unchanged output). */
+     *  leading cell at all (unchanged output). The returned content renders inside this
+     *  component's shadow root, behind the `expanded-cell` part -- page-level CSS selectors cannot
+     *  reach it, and `::part(expanded-cell)` only reaches that wrapping `<td>`, not the descendants
+     *  this callback returns (`::part()` is a pseudo-element; only pseudo-classes may follow it, so
+     *  `::part(expanded-cell) .child` never matches, the same limitation `cell(row)`'s returned
+     *  anchors run into). Style such content by returning already-styled elements -- inline
+     *  `style`, or elements that reference this table's own `--lr-*` design tokens, which inherit
+     *  across the shadow boundary like any custom property -- rather than depending on a
+     *  page-level selector to find it. */
     expandedContent?: (row: T) => unknown;
     /** Gates whether a given row gets an interactive chevron/toggle at all,
      *  when `expandedContent` is set. Omit to make every row expandable. A
@@ -704,6 +738,11 @@ export declare class LyraTable<T = unknown> extends LyraElement<LyraTableEventMa
     private observedBase?;
     private readonly observedHeaders;
     private parsePixelLength;
+    /** The themed floor a column may be dragged/keyed down to, in used pixels. `rem`/`em` resolve
+     *  against the live root/own font size through the shared `resolveCssLength()` -- a hardcoded
+     *  `* 16` would pick the wrong floor on a page whose root font-size isn't the browser default.
+     *  A token in a unit with no used pixel length here (`ch`, `pt`, `calc()`, a bare `%` with no
+     *  base) falls back to DEFAULT_RESIZE_MIN_WIDTH_PX rather than being read as raw pixels. */
     private minimumResizeWidth;
     private maximumResizeWidth;
     private currentResizeWidth;