@aceshooting/lyra-ui 26.0.0 → 28.0.0

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

@@ -1,4 +1,4 @@
-import{__decorate}from"tslib";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{finiteCount,finiteInteger}from"../../../internal/numbers.js";import{activeElementIn}from"../../../internal/active-element.js";import{isKeyboardFocusEvent}from"../../../internal/focus-modality.js";import{lyraLocaleCatalogVersion}from"../../../internal/localization-runtime.js";import{styles}from"./sequence-strip.styles.js";import{LYRA_DEFAULT_sequenceStripBucketLabel,LYRA_DEFAULT_sequenceStripBucketSummary,LYRA_DEFAULT_sequenceStripCategoryCount,LYRA_DEFAULT_sequenceStripEmpty,LYRA_DEFAULT_sequenceStripUnnamedCategory}from"../../../internal/default-strings.generated.js";const MAX_RENDERED_CELLS=200,MAX_RENDERED_CATEGORIES=200,MAX_SEQUENCE_COLLECTION_ENTRIES=1e4;function bucketStartIndex(cell,total,cellCount){return Math.ceil(cell*total/cellCount)}function buildSequenceStripCells(items){const total=finiteCount(items.length);if(total===0)return[];const cellCount=Math.min(total,MAX_RENDERED_CELLS);if(cellCount===total)return items.map((item,index)=>({start:index,end:index,categoryId:item.categoryId,marker:item.marker===!0}));const cells=[];for(let cell=0;cell<cellCount;cell++){const start=bucketStartIndex(cell,total,cellCount),end=bucketStartIndex(cell+1,total,cellCount)-1,counts=new Map;let marker=!1;for(let index=start;index<=end;index++){const item=items[index];item&&(item.marker===!0&&(marker=!0),counts.set(item.categoryId,(counts.get(item.categoryId)??0)+1))}let categoryId="",dominantCount=0;for(const[id,count]of counts)count>dominantCount&&(dominantCount=count,categoryId=id);cells.push({start,end,categoryId,marker})}return cells}class LyraSequenceStrip extends LyraElement{constructor(){super(...arguments),this._items=[],this._categories=[],this.hostAccessibleLabel=null,this.selectedIndex=-1,this.withLegend=!1,this.hoverIndex=null,this.keyboardIndex=null,this.keyboardTooltip=!1,this.cellCache=[],this.restoringOwnedFocus=!1,this.focusRestoreGeneration=0,this.viewKey=[]}static{this.defaultStrings={...super.defaultStrings,sequenceStripBucketLabel:LYRA_DEFAULT_sequenceStripBucketLabel,sequenceStripBucketSummary:LYRA_DEFAULT_sequenceStripBucketSummary,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){if(value===this.itemsSource||value===this._items)return;this.itemsSource=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}:{},...item.disabled===void 0?{}:{disabled:!!item.disabled}}))}catch{}this._items=Object.freeze(next),this.requestUpdate("items",previous)}get categories(){return this._categories}set categories(value){if(value===this.categoriesSource||value===this._categories)return;this.categoriesSource=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)}cellIndexForItem(itemIndex){const total=finiteCount(this.items.length);if(total===0)return-1;const index=finiteInteger(itemIndex,-1,-1,total-1);if(index<0)return-1;const cellCount=Math.min(total,MAX_RENDERED_CELLS);return cellCount===total?index:Math.min(cellCount-1,Math.floor(index*cellCount/total))}selectedCellIndex(){if(!Number.isInteger(this.selectedIndex)||this.selectedIndex<0||this.selectedIndex>=this.items.length)return null;const cellIndex=this.cellIndexForItem(this.selectedIndex);return cellIndex>=0?cellIndex:null}activateItem(index){const item=this.items[index];!item||item.disabled||this.emit("lr-item-activate",{index,id:item.id,item})}activateCell(cellIndex){const cell=this.cells()[cellIndex];cell&&this.activateItem(cell.start)}cellDisabled(cell){return this.items[cell.start]?.disabled===!0}nearestEnabledCellIndex(cells,index){const count=cells.length;if(!count)return-1;const clamped=Math.min(Math.max(index,0),count-1);if(!this.cellDisabled(cells[clamped]))return clamped;for(let forward=clamped+1;forward<count;forward+=1)if(!this.cellDisabled(cells[forward]))return forward;for(let backward=clamped-1;backward>=0;backward-=1)if(!this.cellDisabled(cells[backward]))return backward;return-1}stepEnabledCellIndex(cells,from,direction){const count=cells.length;if(!count)return from;let index=Math.min(Math.max(from+direction,0),count-1);for(let steps=0;steps<count;steps+=1){if(!this.cellDisabled(cells[index]))return index;if(index+=direction,index<0||index>=count)break}return from}willUpdate(changed){if(super.willUpdate(changed),changed.has("items")){this.focusRestoreGeneration++,this.hoverIndex=null;const focusedCell=activeElementIn(this.shadowRoot),focusedCellIndex=Number(focusedCell?.dataset?.index);if(!Number.isInteger(focusedCellIndex)||focusedCellIndex<0){this.keyboardIndex=null;return}const focusedId=focusedCell?.dataset?.itemId,retainedItemIndex=focusedId===void 0||focusedId===""?-1:this.items.findIndex(item=>item.id===focusedId),cells=this.cells(),nextIndex=retainedItemIndex>=0?this.cellIndexForItem(retainedItemIndex):cells.length?Math.min(focusedCellIndex,cells.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()}cells(){const items=this._items;return this.cellCacheSource===items?this.cellCache:(this.cellCacheSource=items,this.cellCache=Object.freeze(buildSequenceStripCells(items)),this.cellCache)}cellView(cells){const locale=this.effectiveLocale,key=[cells,this._categories,this.markerLabel,locale,this.strings,lyraLocaleCatalogVersion(locale)];if(!this.view||key.some((part,index)=>part!==this.viewKey[index])){const categories=this.categoryMap();this.viewKey=key,this.view={labels:cells.map(cell=>this.cellLabel(cell,categories)),colors:cells.map(cell=>this.categoryColor(cell.categoryId,categories)),summary:this.autoSummary()}}return this.view}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;this.markerLabel&&markerCount>0&&clauses.push(this.localize("sequenceStripCategoryCount",void 0,{label:this.markerLabel,count:getNumberFormat(this.effectiveLocale).format(markerCount),pluralCount:markerCount}));const overview=this.bucketSummary();return overview!==void 0&&clauses.push(overview),getListFormat(this.effectiveLocale,{style:"long",type:"unit"}).format(clauses)}bucketSummary(){const cells=this.cells();if(cells.length===0||cells.length>=this.items.length)return;const number=getNumberFormat(this.effectiveLocale);return this.localize("sequenceStripBucketSummary",void 0,{items:number.format(this.items.length),ranges:number.format(cells.length),pluralCount:this.items.length})}cellLabel(cell,categories=this.categoryMap()){if(cell.end<=cell.start){const item=this.items[cell.start];return item?this.itemLabel(item,categories):this.categoryLabel(cell.categoryId,categories)}const number=getNumberFormat(this.effectiveLocale);return this.localize("sequenceStripBucketLabel",void 0,{label:this.categoryLabel(cell.categoryId,categories),start:number.format(cell.start+1),end:number.format(cell.end+1),pluralCount:cell.end-cell.start+1})}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,event){this.restoringOwnedFocus||(this.keyboardIndex=index,this.keyboardTooltip=isKeyboardFocusEvent(event))}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.activateCell(index);return}const cells=this.cells();if(!["ArrowLeft","ArrowRight","Home","End"].includes(e.key)||cells.length===0)return;e.preventDefault();const forwardKey=isRtl(this)?"ArrowLeft":"ArrowRight",backwardKey=isRtl(this)?"ArrowRight":"ArrowLeft";let next=index;if(e.key==="Home")next=cells.findIndex(cell=>!this.cellDisabled(cell));else if(e.key==="End")for(next=cells.length-1;next>=0&&this.cellDisabled(cells[next]);)next-=1;else e.key===forwardKey?next=this.stepEnabledCellIndex(cells,index,1):e.key===backwardKey&&(next=this.stepEnabledCellIndex(cells,index,-1));if(next<0)return;const items=this.items,targetStart=cells[next]?.start,targetId=targetStart===void 0?void 0:items[targetStart]?.id;if(targetId===void 0)return;const generation=this.focusRestoreGeneration;this.keyboardIndex=next,this.keyboardTooltip=!0,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`
+import{__decorate}from"tslib";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{resolveListMove}from"../../../internal/list-navigation.js";import{sanitizeCssColor}from"../../../internal/safe-css.js";import{finiteCount,finiteInteger}from"../../../internal/numbers.js";import{shadowFocusTarget}from"../../../internal/active-element.js";import{isKeyboardFocusEvent}from"../../../internal/focus-modality.js";import{lyraLocaleCatalogVersion}from"../../../internal/localization-runtime.js";import{styles}from"./sequence-strip.styles.js";import{LYRA_DEFAULT_sequenceStripBucketLabel,LYRA_DEFAULT_sequenceStripBucketSummary,LYRA_DEFAULT_sequenceStripCategoryCount,LYRA_DEFAULT_sequenceStripEmpty,LYRA_DEFAULT_sequenceStripUnnamedCategory}from"../../../internal/default-strings/data.generated.js";const MAX_RENDERED_CELLS=200,MAX_RENDERED_CATEGORIES=200,MAX_SEQUENCE_COLLECTION_ENTRIES=1e4;function bucketStartIndex(cell,total,cellCount){return Math.ceil(cell*total/cellCount)}function buildSequenceStripCells(items){const total=finiteCount(items.length);if(total===0)return[];const cellCount=Math.min(total,MAX_RENDERED_CELLS);if(cellCount===total)return items.map((item,index)=>({start:index,end:index,categoryId:item.categoryId,marker:item.marker===!0}));const cells=[];for(let cell=0;cell<cellCount;cell++){const start=bucketStartIndex(cell,total,cellCount),end=bucketStartIndex(cell+1,total,cellCount)-1,counts=new Map;let marker=!1;for(let index=start;index<=end;index++){const item=items[index];item&&(item.marker===!0&&(marker=!0),counts.set(item.categoryId,(counts.get(item.categoryId)??0)+1))}let categoryId="",dominantCount=0;for(const[id,count]of counts)count>dominantCount&&(dominantCount=count,categoryId=id);cells.push({start,end,categoryId,marker})}return cells}class LyraSequenceStrip extends LyraElement{constructor(){super(...arguments),this._items=[],this._categories=[],this.hostAccessibleLabel=null,this.selectedIndex=-1,this.withLegend=!1,this.hoverIndex=null,this.keyboardIndex=null,this.keyboardTooltip=!1,this.cellCache=[],this.restoringOwnedFocus=!1,this.focusRestoreGeneration=0,this.viewKey=[]}static{this.defaultStrings={...super.defaultStrings,sequenceStripBucketLabel:LYRA_DEFAULT_sequenceStripBucketLabel,sequenceStripBucketSummary:LYRA_DEFAULT_sequenceStripBucketSummary,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){if(value===this.itemsSource||value===this._items)return;this.itemsSource=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}:{},...item.disabled===void 0?{}:{disabled:!!item.disabled}}))}catch{}this._items=Object.freeze(next),this.requestUpdate("items",previous)}get categories(){return this._categories}set categories(value){if(value===this.categoriesSource||value===this._categories)return;this.categoriesSource=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)}cellIndexForItem(itemIndex){const total=finiteCount(this.items.length);if(total===0)return-1;const index=finiteInteger(itemIndex,-1,-1,total-1);if(index<0)return-1;const cellCount=Math.min(total,MAX_RENDERED_CELLS);return cellCount===total?index:Math.min(cellCount-1,Math.floor(index*cellCount/total))}selectedCellIndex(){if(!Number.isInteger(this.selectedIndex)||this.selectedIndex<0||this.selectedIndex>=this.items.length)return null;const cellIndex=this.cellIndexForItem(this.selectedIndex);return cellIndex>=0?cellIndex:null}activateItem(index){const item=this.items[index];!item||item.disabled||this.emit("lr-item-activate",{index,id:item.id,item})}activateCell(cellIndex){const cell=this.cells()[cellIndex];cell&&this.activateItem(cell.start)}cellDisabled(cell){return this.items[cell.start]?.disabled===!0}nearestEnabledCellIndex(cells,index){const count=cells.length;if(!count)return-1;const clamped=Math.min(Math.max(index,0),count-1);if(!this.cellDisabled(cells[clamped]))return clamped;for(let forward=clamped+1;forward<count;forward+=1)if(!this.cellDisabled(cells[forward]))return forward;for(let backward=clamped-1;backward>=0;backward-=1)if(!this.cellDisabled(cells[backward]))return backward;return-1}willUpdate(changed){if(super.willUpdate(changed),changed.has("items")){this.focusRestoreGeneration++,this.hoverIndex=null;const focusedCell=shadowFocusTarget(this),focusedCellIndex=Number(focusedCell?.dataset?.index);if(!Number.isInteger(focusedCellIndex)||focusedCellIndex<0){this.keyboardIndex=null;return}const focusedId=focusedCell?.dataset?.itemId,retainedItemIndex=focusedId===void 0||focusedId===""?-1:this.items.findIndex(item=>item.id===focusedId),cells=this.cells(),nextIndex=retainedItemIndex>=0?this.cellIndexForItem(retainedItemIndex):cells.length?Math.min(focusedCellIndex,cells.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()}cells(){const items=this._items;return this.cellCacheSource===items?this.cellCache:(this.cellCacheSource=items,this.cellCache=Object.freeze(buildSequenceStripCells(items)),this.cellCache)}cellView(cells){const locale=this.effectiveLocale,key=[cells,this._categories,this.markerLabel,locale,this.strings,lyraLocaleCatalogVersion(locale)];if(!this.view||key.some((part,index)=>part!==this.viewKey[index])){const categories=this.categoryMap();this.viewKey=key,this.view={labels:cells.map(cell=>this.cellLabel(cell,categories)),colors:cells.map(cell=>this.categoryColor(cell.categoryId,categories)),summary:this.autoSummary()}}return this.view}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;this.markerLabel&&markerCount>0&&clauses.push(this.localize("sequenceStripCategoryCount",void 0,{label:this.markerLabel,count:getNumberFormat(this.effectiveLocale).format(markerCount),pluralCount:markerCount}));const overview=this.bucketSummary();return overview!==void 0&&clauses.push(overview),getListFormat(this.effectiveLocale,{style:"long",type:"unit"}).format(clauses)}bucketSummary(){const cells=this.cells();if(cells.length===0||cells.length>=this.items.length)return;const number=getNumberFormat(this.effectiveLocale);return this.localize("sequenceStripBucketSummary",void 0,{items:number.format(this.items.length),ranges:number.format(cells.length),pluralCount:this.items.length})}cellLabel(cell,categories=this.categoryMap()){if(cell.end<=cell.start){const item=this.items[cell.start];return item?this.itemLabel(item,categories):this.categoryLabel(cell.categoryId,categories)}const number=getNumberFormat(this.effectiveLocale);return this.localize("sequenceStripBucketLabel",void 0,{label:this.categoryLabel(cell.categoryId,categories),start:number.format(cell.start+1),end:number.format(cell.end+1),pluralCount:cell.end-cell.start+1})}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,event){this.restoringOwnedFocus||(this.keyboardIndex=index,this.keyboardTooltip=isKeyboardFocusEvent(event))}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.activateCell(index);return}const cells=this.cells();if(!["ArrowLeft","ArrowRight","Home","End"].includes(e.key)||cells.length===0)return;e.preventDefault();const next=resolveListMove(e,{count:cells.length,current:index,orientation:"horizontal",direction:this.effectiveDirection,wrap:!1,isAvailable:cellIndex=>!this.cellDisabled(cells[cellIndex])})??(e.key==="Home"||e.key==="End"?-1:index);if(next<0)return;const items=this.items,targetStart=cells[next]?.start,targetId=targetStart===void 0?void 0:items[targetStart]?.id;if(targetId===void 0)return;const generation=this.focusRestoreGeneration;this.keyboardIndex=next,this.keyboardTooltip=!0,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">

package/dist/components/data/sparkline/sparkline.class.js

@@ -1,4 +1,4 @@
-import{__decorate}from"tslib";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){const hostLabel=this.getAttribute("aria-label");if(hostLabel!==null)return hostLabel;if(this.label)return this.label;if(typeof this.accessibleLabel=="string"&&this.accessibleLabel.length>0)return this.accessibleLabel;const last=values.at(-1);if(last===void 0)return this.localize("noData");const magnitude=Math.abs(last),digits=magnitude>0&&magnitude<1?Math.min(20,Math.max(2,1-Math.floor(Math.log10(magnitude)))):2;return this.localize("trendOf",void 0,{count:getNumberFormat(this.effectiveLocale).format(values.length),value:getNumberFormat(this.effectiveLocale,{maximumFractionDigits:digits}).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
+import{__decorate}from"tslib";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_trendOf}from"../../../internal/default-strings/data.generated.js";import{LYRA_DEFAULT_noData}from"../../../internal/default-strings/shared.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){const hostLabel=this.getAttribute("aria-label");if(hostLabel!==null)return hostLabel;if(this.label)return this.label;if(typeof this.accessibleLabel=="string"&&this.accessibleLabel.length>0)return this.accessibleLabel;const last=values.at(-1);if(last===void 0)return this.localize("noData");const magnitude=Math.abs(last),digits=magnitude>0&&magnitude<1?Math.min(20,Math.max(2,1-Math.floor(Math.log10(magnitude)))):2;return this.localize("trendOf",void 0,{count:getNumberFormat(this.effectiveLocale).format(values.length),value:getNumberFormat(this.effectiveLocale,{maximumFractionDigits:digits}).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.class.js

@@ -1,4 +1,4 @@
-import{__decorate}from"tslib";import{html,nothing}from"lit";import{property,state}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{chevronIcon}from"../../../internal/icons.js";import{nextId,srOnly}from"../../../internal/a11y.js";import{decimalPlaces,finiteNumber}from"../../../internal/numbers.js";import{resolveGuardedRel}from"../../../internal/link-rel.js";import{safeLinkHref}from"../../../internal/safe-url.js";import{detectPlatform}from"../../../internal/platform.js";import{getNumberFormat}from"../../../internal/intl-cache.js";import{containsNestedInteractive}from"../../../internal/nested-interactive.js";import{normalizeReflectedOptionalSize,optionalSizeConverter}from"../../../internal/variants.js";import{styles}from"./stat.styles.js";import{LYRA_DEFAULT_statTrendAnnouncement,LYRA_DEFAULT_statTrendBad,LYRA_DEFAULT_statTrendDecreased,LYRA_DEFAULT_statTrendGood,LYRA_DEFAULT_statTrendIncreased,LYRA_DEFAULT_trendUnchanged}from"../../../internal/default-strings.generated.js";const MAX_STAT_ROWS=1e4;class LyraStat extends LyraElement{constructor(){super(...arguments),this.label="",this.accessibleLabel=null,this.value="",this.unit="",this.variant="neutral",this._deltaPercent=null,this.caption="",this.goodDirection="up",this._rows=[],this.emphasis=!1,this.exactValue="",this.sub="",this.prose=!1,this.frame="card",this.orientation="vertical",this.hasIcon=!1,this.hasCaptionSlot=!1,this.hasSparkSlot=!1,this.hasSubSlot=!1,this.labelId=nextId("stat-label"),this.valueId=`${this.labelId}-value`,this.unitId=`${this.labelId}-unit`,this.rowLabelIds=[],this.onIconSlotChange=()=>{this.hasIcon=Array.from(this.children??[]).some(el=>el.getAttribute("slot")==="start")},this.onCaptionSlotChange=()=>{this.hasCaptionSlot=Array.from(this.children??[]).some(el=>el.getAttribute("slot")==="caption")},this.onSparkSlotChange=()=>{this.hasSparkSlot=Array.from(this.children??[]).some(el=>el.getAttribute("slot")==="spark")},this.onSubSlotChange=()=>{this.hasSubSlot=Array.from(this.children??[]).some(el=>el.getAttribute("slot")==="sub")},this.onLinkedContentClick=event=>{if(containsNestedInteractive(event,event.currentTarget)||event.defaultPrevented)return;const anchor=this.shadowRoot?.querySelector('[part="base"][href]'),MouseEventConstructor=this.ownerDocument.defaultView?.MouseEvent;if(anchor)if(MouseEventConstructor&&event instanceof MouseEventConstructor){const platform=detectPlatform(this.ownerDocument.defaultView?.navigator),newContext=event.shiftKey||(platform==="mac"?event.metaKey:event.ctrlKey),previousTarget=anchor.getAttribute("target"),previousRel=anchor.getAttribute("rel"),guardedRel=resolveGuardedRel(this.rel,"_blank");newContext&&(anchor.target="_blank",anchor.rel=guardedRel);try{anchor.dispatchEvent(new MouseEventConstructor("click",{bubbles:!0,cancelable:!0,composed:!0,view:event.view,detail:event.detail,button:event.button,buttons:event.buttons,clientX:event.clientX,clientY:event.clientY,screenX:event.screenX,screenY:event.screenY,ctrlKey:event.ctrlKey,metaKey:event.metaKey,shiftKey:event.shiftKey,altKey:event.altKey}))}finally{newContext&&(anchor.getAttribute("target")==="_blank"&&(previousTarget===null?anchor.removeAttribute("target"):anchor.setAttribute("target",previousTarget)),anchor.getAttribute("rel")===guardedRel&&(previousRel===null?anchor.removeAttribute("rel"):anchor.setAttribute("rel",previousRel)))}}else anchor.click()}}static{this.defaultStrings={...super.defaultStrings,statTrendAnnouncement:LYRA_DEFAULT_statTrendAnnouncement,statTrendBad:LYRA_DEFAULT_statTrendBad,statTrendDecreased:LYRA_DEFAULT_statTrendDecreased,statTrendGood:LYRA_DEFAULT_statTrendGood,statTrendIncreased:LYRA_DEFAULT_statTrendIncreased,trendUnchanged:LYRA_DEFAULT_trendUnchanged}}static{this.styles=[LyraElement.styles,styles,srOnly]}get deltaPercent(){return this._deltaPercent}set deltaPercent(value){const old=this._deltaPercent;this._deltaPercent=value!=null&&Number.isFinite(value)?finiteNumber(value,0):null,this.requestUpdate("deltaPercent",old)}get rows(){return this._rows}set rows(value){if(value===this.rowsSource||value===this._rows)return;this.rowsSource=value;const previous=this._rows,snapshot=[];if(Array.isArray(value))for(const row of value.slice(0,MAX_STAT_ROWS))try{snapshot.push(Object.freeze({label:typeof row?.label=="string"?row.label:"",value:typeof row?.value=="string"?row.value:"",...typeof row?.exactValue=="string"?{exactValue:row.exactValue}:{}}))}catch{}this._rows=Object.freeze(snapshot),this.requestUpdate("rows",previous)}get size(){return this._size}set size(next){const normalized=normalizeReflectedOptionalSize(this,next),old=this._size;old!==normalized&&(this._size=normalized,this.requestUpdate("size",old))}willUpdate(changed){if(super.willUpdate(changed),!this.hasUpdated){const lightChildren=Array.from(this.children??[]);this.hasIcon=lightChildren.some(el=>el.getAttribute("slot")==="start"),this.hasCaptionSlot=lightChildren.some(el=>el.getAttribute("slot")==="caption"),this.hasSparkSlot=lightChildren.some(el=>el.getAttribute("slot")==="spark"),this.hasSubSlot=lightChildren.some(el=>el.getAttribute("slot")==="sub")}changed.has("rows")&&(this.rowLabelIds=this.rows.map(()=>nextId("stat-row-label")))}click(){const anchor=this.shadowRoot?.querySelector('[part="base"][href]');anchor?anchor.click():super.click()}render(){const href=safeLinkHref(this.href),linked=!!href,hasTrend=this.deltaPercent!==null,effectiveDelta=this.deltaPercent??0,rawDirection=effectiveDelta>0?"up":effectiveDelta<0?"down":"flat",isGood=rawDirection==="flat"?null:rawDirection===this.goodDirection,arrow=rawDirection==="flat"?"–":chevronIcon(),hasCaption=this.hasCaptionSlot||(this.caption??"").length>0,hasSub=this.hasSubSlot||(this.sub??"").length>0,formattedTrend=getNumberFormat(this.effectiveLocale,{style:"percent",maximumFractionDigits:Math.min(20,decimalPlaces(effectiveDelta))}).format(Math.abs(effectiveDelta)/100),trendAnnouncement=rawDirection==="flat"?this.localize("trendUnchanged"):this.localize("statTrendAnnouncement",void 0,{trend:this.localize(rawDirection==="up"?"statTrendIncreased":"statTrendDecreased",void 0,{value:formattedTrend}),polarity:this.localize(isGood?"statTrendGood":"statTrendBad")}),content=html`
+import{__decorate}from"tslib";import{html,nothing}from"lit";import{property,state}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{chevronIcon}from"../../../internal/icons.js";import{nextId,srOnly}from"../../../internal/a11y.js";import{decimalPlaces,finiteNumber}from"../../../internal/numbers.js";import{resolveGuardedRel}from"../../../internal/link-rel.js";import{safeLinkHref}from"../../../internal/safe-url.js";import{detectPlatform}from"../../../internal/platform.js";import{getNumberFormat}from"../../../internal/intl-cache.js";import{containsNestedInteractive}from"../../../internal/nested-interactive.js";import{normalizeReflectedOptionalSize,optionalSizeConverter}from"../../../internal/variants.js";import{styles}from"./stat.styles.js";import{LYRA_DEFAULT_statTrendAnnouncement,LYRA_DEFAULT_statTrendBad,LYRA_DEFAULT_statTrendDecreased,LYRA_DEFAULT_statTrendGood,LYRA_DEFAULT_statTrendIncreased,LYRA_DEFAULT_trendUnchanged}from"../../../internal/default-strings/data.generated.js";const MAX_STAT_ROWS=1e4;class LyraStat extends LyraElement{constructor(){super(...arguments),this.label="",this.accessibleLabel=null,this.value="",this.unit="",this.variant="neutral",this._deltaPercent=null,this.caption="",this.goodDirection="up",this._rows=[],this.emphasis=!1,this.exactValue="",this.sub="",this.prose=!1,this.frame="card",this.orientation="vertical",this.hasIcon=!1,this.hasCaptionSlot=!1,this.hasSparkSlot=!1,this.hasSubSlot=!1,this.labelId=nextId("stat-label"),this.valueId=`${this.labelId}-value`,this.unitId=`${this.labelId}-unit`,this.rowLabelIds=[],this.onIconSlotChange=()=>{this.hasIcon=Array.from(this.children??[]).some(el=>el.getAttribute("slot")==="start")},this.onCaptionSlotChange=()=>{this.hasCaptionSlot=Array.from(this.children??[]).some(el=>el.getAttribute("slot")==="caption")},this.onSparkSlotChange=()=>{this.hasSparkSlot=Array.from(this.children??[]).some(el=>el.getAttribute("slot")==="spark")},this.onSubSlotChange=()=>{this.hasSubSlot=Array.from(this.children??[]).some(el=>el.getAttribute("slot")==="sub")},this.onLinkedContentClick=event=>{if(containsNestedInteractive(event,event.currentTarget)||event.defaultPrevented)return;const anchor=this.shadowRoot?.querySelector('[part="base"][href]'),MouseEventConstructor=this.ownerDocument.defaultView?.MouseEvent;if(anchor)if(MouseEventConstructor&&event instanceof MouseEventConstructor){const platform=detectPlatform(this.ownerDocument.defaultView?.navigator),newContext=event.shiftKey||(platform==="mac"?event.metaKey:event.ctrlKey),previousTarget=anchor.getAttribute("target"),previousRel=anchor.getAttribute("rel"),guardedRel=resolveGuardedRel(this.rel,"_blank");newContext&&(anchor.target="_blank",anchor.rel=guardedRel);try{anchor.dispatchEvent(new MouseEventConstructor("click",{bubbles:!0,cancelable:!0,composed:!0,view:event.view,detail:event.detail,button:event.button,buttons:event.buttons,clientX:event.clientX,clientY:event.clientY,screenX:event.screenX,screenY:event.screenY,ctrlKey:event.ctrlKey,metaKey:event.metaKey,shiftKey:event.shiftKey,altKey:event.altKey}))}finally{newContext&&(anchor.getAttribute("target")==="_blank"&&(previousTarget===null?anchor.removeAttribute("target"):anchor.setAttribute("target",previousTarget)),anchor.getAttribute("rel")===guardedRel&&(previousRel===null?anchor.removeAttribute("rel"):anchor.setAttribute("rel",previousRel)))}}else anchor.click()}}static{this.defaultStrings={...super.defaultStrings,statTrendAnnouncement:LYRA_DEFAULT_statTrendAnnouncement,statTrendBad:LYRA_DEFAULT_statTrendBad,statTrendDecreased:LYRA_DEFAULT_statTrendDecreased,statTrendGood:LYRA_DEFAULT_statTrendGood,statTrendIncreased:LYRA_DEFAULT_statTrendIncreased,trendUnchanged:LYRA_DEFAULT_trendUnchanged}}static{this.styles=[LyraElement.styles,styles,srOnly]}get deltaPercent(){return this._deltaPercent}set deltaPercent(value){const old=this._deltaPercent;this._deltaPercent=value!=null&&Number.isFinite(value)?finiteNumber(value,0):null,this.requestUpdate("deltaPercent",old)}get rows(){return this._rows}set rows(value){if(value===this.rowsSource||value===this._rows)return;this.rowsSource=value;const previous=this._rows,snapshot=[];if(Array.isArray(value))for(const row of value.slice(0,MAX_STAT_ROWS))try{snapshot.push(Object.freeze({label:typeof row?.label=="string"?row.label:"",value:typeof row?.value=="string"?row.value:"",...typeof row?.exactValue=="string"?{exactValue:row.exactValue}:{}}))}catch{}this._rows=Object.freeze(snapshot),this.requestUpdate("rows",previous)}get size(){return this._size}set size(next){const normalized=normalizeReflectedOptionalSize(this,next),old=this._size;old!==normalized&&(this._size=normalized,this.requestUpdate("size",old))}willUpdate(changed){if(super.willUpdate(changed),!this.hasUpdated){const lightChildren=Array.from(this.children??[]);this.hasIcon=lightChildren.some(el=>el.getAttribute("slot")==="start"),this.hasCaptionSlot=lightChildren.some(el=>el.getAttribute("slot")==="caption"),this.hasSparkSlot=lightChildren.some(el=>el.getAttribute("slot")==="spark"),this.hasSubSlot=lightChildren.some(el=>el.getAttribute("slot")==="sub")}changed.has("rows")&&(this.rowLabelIds=this.rows.map(()=>nextId("stat-row-label")))}click(){const anchor=this.shadowRoot?.querySelector('[part="base"][href]');anchor?anchor.click():super.click()}render(){const href=safeLinkHref(this.href),linked=!!href,hasTrend=this.deltaPercent!==null,effectiveDelta=this.deltaPercent??0,rawDirection=effectiveDelta>0?"up":effectiveDelta<0?"down":"flat",isGood=rawDirection==="flat"?null:rawDirection===this.goodDirection,arrow=rawDirection==="flat"?"–":chevronIcon(),hasCaption=this.hasCaptionSlot||(this.caption??"").length>0,hasSub=this.hasSubSlot||(this.sub??"").length>0,formattedTrend=getNumberFormat(this.effectiveLocale,{style:"percent",maximumFractionDigits:Math.min(20,decimalPlaces(effectiveDelta))}).format(Math.abs(effectiveDelta)/100),trendAnnouncement=rawDirection==="flat"?this.localize("trendUnchanged"):this.localize("statTrendAnnouncement",void 0,{trend:this.localize(rawDirection==="up"?"statTrendIncreased":"statTrendDecreased",void 0,{value:formattedTrend}),polarity:this.localize(isGood?"statTrendGood":"statTrendBad")}),content=html`
       <span part="icon" ?hidden=${!this.hasIcon}
         ><slot name="start" @slotchange=${this.onIconSlotChange}></slot
         ></span

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

@@ -1,4 +1,4 @@
-import{type TemplateResult,type PropertyValues}from'lit';import{LyraElement}from'../../../internal/lyra-element.js';import{type LyraSize}from'../../../internal/variants.js';
+import type{LyraPaginationFormat}from'../pagination/pagination.class.js';import{type TemplateResult,type PropertyValues}from'lit';import{LyraElement}from'../../../internal/lyra-element.js';import{type LyraSize}from'../../../internal/variants.js';
 /** How `loading` renders. `'spinner'` (the default) replaces the grid with an indeterminate
 *  spinner; `'skeleton'` keeps the real grid — `<colgroup>`, `<thead>`, filter field, pagination
 *  footer — and fills the body with placeholder rows so the table sketches its shape instead of
@@ -106,7 +106,11 @@ sortValue?:(row:T)=>string|number|null|undefined;align?:TableEdgeAlign;
 priority?:'medium'|'low';
 /** Pins this column's header/cell to one edge with `position: sticky` so it stays visible while
 *  the table scrolls horizontally. Both directions use CSS logical properties, so RTL flips
-*  automatically. */
+*  automatically. Each sticky cell is its own stacking context, so the table raises a cell above
+*  its siblings while it holds an open `lr-dropdown`, `lr-popover`, `lr-select` or `lr-combobox`
+*  (popover layer) or has focus inside (one step above content), keeping a per-row actions menu
+*  visible and hit-testable over the following rows. Set `top-layer` on the overlay only when it
+*  must also clear a stacking context outside the table. */
 sticky?:TableEdgeAlign;
 /** Renders a sticky-bottom footer cell for this column, computed from every currently-rendered
 *  row (post-sort, pre-pagination) -- e.g. a column total. Omit for a column with no footer
@@ -199,201 +203,11 @@ export interface LyraTableEventMap<T=unknown,K extends string|number=string|numb
 /** A row was activated by pointer or Enter/Space. */
 'lr-row-activate':CustomEvent<Readonly<{row:T;}>>;'lr-row-expand-request':CustomEvent<Readonly<{row:T;rowKey:K;expanded:boolean;}>>;'lr-row-expand-toggle':CustomEvent<Readonly<{row:T;rowKey:K;expanded:boolean;}>>;'lr-load-more':CustomEvent<null>;'lr-retry-request':CustomEvent<null>;'lr-selection-change':CustomEvent<Readonly<{selectedRowKeys:readonly K[];}>>;'lr-filter-change':CustomEvent<Readonly<{filterText:string;}>>;'lr-page-change':CustomEvent<Readonly<{page:number;}>>;'lr-cell-edit':CustomEvent<Readonly<{row:T;columnKey:string;value:string|number;}>>;'lr-column-resize-request':CustomEvent<Readonly<{columnKey:string;width:number;}>>;'lr-column-resize':CustomEvent<Readonly<{columnKey:string;width:number;}>>;}
 /**
-* `<lr-table>` — a sort/select-aware data table.
-*
-* A sortable-header activation first proposes a cancelable `lr-sort-request`. If accepted, client
-* mode writes `sortKey`/`sortDir` and reorders the rendered rows before emitting `lr-sort`; server
-* mode leaves those properties controlled and emits the same committed transaction so the caller
-* can fetch and supply the corresponding row order. Single/multiple selection is self-managed in
-* one `selectedRowKeys` store; row expansion follows the same opt-in shape through
-* `expansionMode`/`expandedRowKeys` -- see that property's own doc block below for the
-* request/commit detail. The
-* direction chosen the first time a column becomes the active `sortKey` comes from that column's
-* own `columns[].defaultSortDir` when set, falling back to the element-level `defaultSortDir`
-* (`'asc'` by default) otherwise -- letting one column in an otherwise-ascending table (e.g. a
-* "last updated" column) start descending. Re-activating the column that is already `sortKey`
-* still only toggles between `'asc'` and `'desc'`.
-*
-* Header/row activation is delegated: one `click` and one `keydown`
-* listener on `<table>` resolve the target via `closest('[data-col-key]'
-* | '[data-row-key]')` and a key→object lookup map, instead of allocating
-* fresh per-column/per-row closures on every render. Both listeners inspect
-* the delegated event's composed path for actual native, role, or tabindex
-* semantics (see `INTERACTIVE_SELECTOR`) so a button/link/input inside a cell
-* owns its own activation instead of triggering `lr-row-activate`. A passive
-* custom element remains part of the row activation surface; an opaque
-* closed-shadow control marks its host with `data-table-interactive`.
-*
-* Keyboard focus follows a roving-tabindex pattern (one `tabindex="0"` stop
-* among the header cells, one among the body rows — see `focusedColKey()` /
-* `focusedRowKey()`), matching this repo's other `role="grid"`/composite
-* widgets. Left/Right/Home/End move within the header row; Up/Down/Home/End
-* move within the body; Down from the header enters the body's roving stop,
-* and Up from the body's first row returns to the header's roving stop.
-* Enter/Space still only sort/activate (see `activateColumn()` /
-* `activateRow()`). When controlled rows or columns replace the focused
-* member, focus follows the same stable key when it survives and otherwise
-* clamps to the nearest surviving index; an update never reclaims focus once
-* the user has moved it outside the table. Effective locale changes use the same current
-* page identity for activation, editing, and direct row-focus restoration.
-*
-* A column with `editTrigger: 'double-click'` additionally gives its own resting cell a
-* `tabindex="-1"` roving-focus stop — reachable, once the row itself has focus, with ArrowRight
-* (ArrowLeft under RTL) to enter at the first editable cell in the row and step forward, ArrowLeft
-* (ArrowRight under RTL) to step back and, from the first editable cell, return focus to the row —
-* never through Tab, so a table with one or more editable columns gains no new Tab stop, only a
-* new arrow-reachable one, and a table with none renders no `tabindex`/`part='cell'[data-editable]`
-* at all. `F2` or `Enter` on that focused cell opens its editor (`startEditing()`); `editCell()` is
-* the same effect as a public method, for a consumer's own key binding, menu action, or other
-* trigger. `Enter` on the row itself (not a focused cell) still only activates the row, exactly as
-* before — the two coexist because the table tells them apart from which of the two currently has
-* focus, not from the key alone. Escape and Enter inside the open editor keep cancelling/committing
-* as already documented below; either one now also returns focus to the cell that opened it (the
-* editor's own DOM node is what closes), matching a conventional grid's F2/Escape contract and
-* closing the WCAG 2.1.1 (Keyboard) gap a pointer-only `double-click` trigger otherwise leaves.
-* Priority-hidden columns hide their header, body, and footer cells together; revealing
-* priority columns restores all three bands.
-* Blank and later-duplicate column keys are omitted first-wins at assignment. Rows retain their
-* caller-owned records, then one canonical `rowKey` projection omits blank and later-duplicate
-* identities before filtering, counts, pagination, focus, actions, and events.
-*
-* Set `aria-label` on the host to give the `role="grid"` element an
-* accessible name; it's forwarded into the shadow DOM's `<table>`.
-*
-* `columns[].priority` ('medium' | 'low') hides that column once measured overflow says
-* `[part='base']` actually needs the room -- `'low'` first, `'medium'` next if the table would still
-* overflow with just `'low'` gone -- never at a fixed container width; `[part='reveal-columns-button']`
-* forces them all back into view. The public `hasHiddenPriorityColumns`
-* property reports only whether a priority column is actually hidden right
-* now, measured via `ResizeObserver` on `[part='base']` plus a post-render DOM
-* check. The toggle separately measures whether priority columns would hide
-* at the current allocation, so it stays available while force-visible mode
-* is active without making `hasHiddenPriorityColumns` contradict the rendered
-* state. `priorityColumnsVisible` defaults to `false` and toggles itself on
-* `[part='reveal-columns-button']` activation with no external wiring
-* required, but is also settable up front (property or the reflected
-* `priority-columns-visible` attribute) to restore a previously-persisted
-* preference, and readable back — directly or via the `lr-priority-columns-visibility-change`
-* event — to persist the current one. `columns[].sticky` pins a column's
-* header/cells to the inline-start (`'start'`) or inline-end (`'end'`)
-* edge while the table scrolls horizontally. Every member of the priority-column family --
-* `revealColumnsLabel`/`columnsHideLabel` (which only ever reach the DOM on
-* `[part='reveal-columns-button']`), `priorityColumnsVisible` (which only overrides a hide rule
-* there is none of) and `storageKey` (which persists nothing else) -- is inert unless at least one
-* column declares `priority`, so configuring any of them without one logs a one-time,
-* production-silent, page-bounded development `console.warn` naming the members that will do
-* nothing (the same dev-diagnostic shape as an unnamed grid's own warning). The read-only
-* `priorityColumnsToggleAvailable` reports whether the reveal button is currently offered at all,
-* which is the same measured state the button itself renders from.
-*
-* Row expansion: `expandedContent` and `canExpand` render the leading chevron column, and
-* `expansionMode`/`expandedRowKeys` decide who owns which rows are open, including off-view keys —
-* see those members.
-*
-* Selection is opt-in through the `selectionMode` property. Use `single` or
-* `multiple` to self-manage row selection; the default `none` remains
-* presentational. `selectedRowKeys` contains the raw keys in every mode; single mode enforces one.
-*
-* `rowElement(rowKey)`, `cellElement(rowKey, columnKey)` and `expandedContentElement(rowKey)`
-* resolve a rendered `<tr>`/`<td>` from the identity a consumer already has, for code that has to
-* reach content its own `cell(row)` or `expandedContent(row)` callback rendered into this shadow
-* root (measuring it, scrolling it into view, or applying a style `::part()` cannot express, since
-* only pseudo-classes may follow a part selector). One method per callback, because the expansion
-* panel is a *sibling* `<tr part='expanded-row'>` of the data row rather than a descendant of it:
-* `rowElement`/`cellElement` reach `cell(row)` output only, and `expandedContentElement` returns
-* the `[part='expanded-cell']` holding `expandedContent(row)` output. All three read the current
-* render output, so `await table.updateComplete` first and treat `null` as "not rendered right
-* now". They resolve the `data-row-key`/`data-col-key`/`data-expanded-row-key` attributes those
-* elements carry: `data-col-key` is the column's own `key`, while `data-row-key` and
-* `data-expanded-row-key` are a type-tagged encoding of the row key (`string:a` vs `number:1`)
-* that keeps a numeric key distinct from the string that stringifies the same way. The panel
-* deliberately does not repeat `data-row-key`, so every `[data-row-key]` query still resolves
-* exactly one element per row. All three attributes are stable public API; prefer the methods over
-* building a selector from them, since a consumer-supplied key is not safe to interpolate into CSS
-* unescaped.
-*
-* `filterable` adds a compact search field above the grid. `filterText` is
-* controlled and emits `lr-filter-change`; `filter` can provide a typed
-* predicate, otherwise the row is matched against its JSON representation.
-* The internal filter and cell-editor native value events are contained at
-* their translation boundaries; hosts receive `lr-filter-change` and
-* `lr-cell-edit` instead.
-* `pageSize` bounds pagination through the existing `<lr-pagination>` primitive (100 rows by
-* default, normalized to 1..500). Client mode owns the accepted page and slices `rows`; server mode
-* leaves `page` controlled, bounds the supplied page to `pageSize`, and uses `totalItems` for the
-* navigation summary. `unknownTotal` (server mode only) forwards `<lr-pagination>`'s own
-* indeterminate mode for a caller with no total -- see `unknownTotal` and `hasNext`. `loading`
-* keeps the table shell busy; see `loadingAppearance` for how. Initial declarative loading stays
-* silent; every post-mount transition into either
-* loading appearance appends to the shared light-DOM polite sink — including repeated cycles —
-* while every placeholder opts out of `<lr-skeleton>`'s own announcement.
-* Columns with `editTrigger: 'double-click'` open a native text/number/select editor on
-* double-click, `F2`, or `Enter` on the cell's own roving focus stop (see the keyboard paragraph
-* above), and emit `lr-cell-edit`; row mutation remains consumer-owned. `editType: 'select'`
-* renders a native `<select>` populated from `editOptions` (`{ value, label }[]`) instead of an
-* `<input>` -- a column with no `editOptions` renders an empty, valueless `<select>` rather than
-* throwing. `editTrigger: 'always'` instead renders that editor in every body cell of the
-* column from first paint — a settings/rate-style column meant to be typed
-* straight into. Persistent editors are plain tab stops (no `tabindex` of their
-* own, exactly like the row-expand toggle) outside the header/row roving model,
-* so arrow keys still navigate the grid from a row's own tab stop and act as
-* caret movement once focus is inside a field. Enter commits and keeps focus;
-* Escape has nothing to cancel back to, so it is left uncancelled for an
-* ancestor dialog/popover. Their value binds as a content attribute, so once
-* the user has typed into one an out-of-band `rows` update to that same cell no
-* longer replaces the draft; an untouched editor still picks up a new value. A persistent
-* `editType: 'select'` editor has no such native protection -- `<select>`/`<option>` carry no
-* dirty-value flag, so an out-of-band `rows` update to that cell re-applies the selection even
-* after the user has picked a different option.
-* Each editor's accessible name is `columns[].editLabel(row)` when the column defines it, or
-* otherwise the interpolated `tableEditCell` string (`Edit {column}`) -- the same name for every
-* row in that column, since the default carries no row context. Define `editLabel` for any
-* `editTrigger: 'always'` column: its editors are permanent, individually focusable Tab stops, so
-* leaving every one of them identically named (e.g. fifty "Edit Status" controls) fails WCAG 2.4.6
-* and 1.3.1 for keyboard and screen-reader users.
-* Focus is restored across a re-sort that moves the editor's node, and dropped
-* (never re-aimed at an unrelated row) when its row leaves the rendered page.
-* `spellcheck`/`autocapitalize`/`autoCorrect` forward to the filter input and, for a `'text'`
-* (the default) `editType`, the inline cell editor -- no effect on a `'number'` or `'select'` cell
-* editor.
-* `groupBy` inserts non-focusable group header rows before each group; use
-* `groupLabel` when the raw group key needs custom content. A client-mode
-* sort applies *within* each group, so grouping survives sorting on a column
-* unrelated to the group key.
-*
-* `columns[].heatValue` opts a column into heat-tint mode: its numeric return value is normalized
-* against a shared scale spanning every `heatValue`-defining column across every currently-rendered
-* row (auto-derived, or overridden via `heatTintScale`) and painted as a `color-mix()` background via
-* the retheme-able `--lr-table-heat-tint-lo`/`-hi` custom properties (matching `lr-heatmap`'s own
-* ramp-token convention). The heat-tint and resize properties can be set on the table or a theme
-* ancestor; a value set directly on the table wins through the normal cascade. `rowTotal`/`grandTotal`
-* add a trailing column mirroring `expandedContent`'s
-* leading one: `rowTotal(row)` renders per-row, `grandTotal(rows)` renders at its intersection with
-* the footer row (only when a column also defines `footer`) — both share `footer`'s own
-* "consumer computes/renders" contract rather than assuming addition.
-*
-* The public readonly `viewRows` (`rows` after filtering and client-mode sorting, ignoring
-* pagination) and `pageRows` (`viewRows` sliced to the page currently rendered in `<tbody>`) getters
-* expose the same rows `footer(rows)`/`grandTotal(rows)`/the heat-tint domain already see, so a
-* consumer that needs "what the grid currently shows" -- e.g. to export it -- reads one of these
-* instead of re-implementing filtering, sorting, and pagination itself. Both return a fresh, frozen
-* array on every read; mutating the result cannot reach the table's own internal state.
-*
-* The built-in empty state is addressable rather than fixed: every `<lr-empty>` the table renders
-* carries `part="empty"` and re-exports its own inner parts as `empty-heading`/`empty-description`/
-* `empty-icon`/`empty-actions`/`empty-base`, the two *data*-empty branches (no rows at all, and
-* filtered/paginated down to zero) render it as the fallback content of a named `empty` slot so a
-* consumer can replace it wholesale, and `emptySize` overrides each branch's built-in `compact`
-* default. The no-columns branch is deliberately **not** slot-replaceable — it reports a
-* configuration problem (`emptyColumnsHeading`), not "this query returned nothing", and a single slot
-* covering all three would collapse that distinction.
-*
-* A failed load keeps the grid's context: see `error` (and its precedence over the loading and
-* empty states), the `error` slot, and the cancelable `lr-retry-request`.
-*
-* `layout` sets a floor on the `<table>`'s `table-layout`: `'fixed'` forces it even with no column
-* widths, while the default `'auto'` still resolves to `fixed` whenever a column declares a `width`
-* or a drag-resize is in flight (column resizing does not work under `table-layout: auto`).
+* `<lr-table>` — a sort/select-aware data table. Sorting is a cancelable request followed by a
+* committed `lr-sort` (client mode reorders rows; server mode leaves order to the caller);
+* selection and expansion are opt-in and self-managed; a failed load keeps the grid's context
+* through `error`, its slot and `lr-retry-request`. Behavior, precedence rules and examples:
+* `llms/data.md`.
 *
 * @customElement lr-table
 * @event lr-sort-request - Cancelable sort proposal. Frozen readonly
@@ -500,6 +314,15 @@ export interface LyraTableEventMap<T=unknown,K extends string|number=string|numb
 *   is what keeps them geometrically identical to real rows), so this is the part to target for
 *   the placeholder's own look — e.g. `::part(skeleton) { --lr-skeleton-h: 2em; }`.
 * @csspart pagination - The optional pagination component.
+* @csspart pagination-summary - The nested pager's item-range summary (`pagination-with-summary`).
+* @csspart pagination-controls - The nested pager's previous/pages/next control group.
+* @csspart pagination-pages - The nested pager's numbered page list (`pagination-format="standard"`).
+* @csspart pagination-page - One numbered page control (`pagination-format="standard"`).
+* @csspart pagination-page-current - Also carried by the applied page control.
+* @csspart pagination-page-field - The compact page input and page-count wrapper.
+* @csspart pagination-page-input - The compact page-jump input.
+* @csspart pagination-page-count - The compact total page count after the input.
+* @csspart pagination-button - Every page, ellipsis and navigation control of the nested pager.
 * @csspart row-limit - Localized notice when the assigned row collection exceeds 10,000 entries.
 * @csspart empty - The built-in `<lr-empty>` host, in all three empty states (no columns
 *   configured, no rows at all, and filtered/paginated down to zero rows). The two data-empty
@@ -564,6 +387,11 @@ export interface LyraTableEventMap<T=unknown,K extends string|number=string|numb
 * @cssprop [--lr-table-font-size=inherit] - Font size of the `<table>` element and, through normal
 *   inheritance, every cell inside it. The rest of the font shorthand (family, weight, etc.) keeps
 *   inheriting from the host regardless of this override.
+* @cssprop [--lr-table-surface=var(--lr-color-surface)] - Surface of the frame, resting and striped rows,
+*   sticky header and columns, expanded rows and footer. One declaration recolours the table in every
+*   row state; the selected and hovered fills stay their own tokens.
+* @cssprop [--lr-table-radius=var(--lr-radius-container)] - Corner radius of the frame. The frame clips
+*   its painted content to it in `self` mode and in `auto` mode while content fits.
 * @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
@@ -737,6 +565,14 @@ totalItems:number;paginationMode:'client'|'server';
 *  outside `paginationMode: 'server'` -- client mode always knows the exact row count it slices,
 *  so it never needs the indeterminate layout. */
 unknownTotal:boolean;
+/** Shows the nested `<lr-pagination>`'s item-range summary (its `with-summary`, e.g. "1-10 of
+*  95") at the inline start of the pagination footer, with the controls at the inline end. An
+*  indeterminate server pager (`unknownTotal`) has no summary to show. */
+paginationWithSummary:boolean;
+/** The nested `<lr-pagination>`'s `format`: `compact` (default; previous/next around a page-jump
+*  input and page count) or `standard` (a numbered page list). Unsupported values resolve to
+*  `compact`. */
+paginationFormat:LyraPaginationFormat;
 /** Whether at least one more page exists past the current one. Consulted only alongside
 *  `unknownTotal`; forwarded verbatim to the nested `<lr-pagination>`'s own `hasNext`. Defaults to
 *  `true` so an indeterminate server pager stays navigable until the caller's API reports