@aceshooting/lyra-ui 27.0.0 → 28.1.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{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.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`
+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
@@ -310,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
@@ -552,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

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

@@ -1,4 +1,4 @@
-import{__decorate}from"tslib";import{relayNativeEvent}from"../../../internal/native-event-relay.js";import{html,nothing}from"lit";import{property,state}from"lit/decorators.js";import{repeat}from"lit/directives/repeat.js";import{styleMap}from"lit/directives/style-map.js";import{sanitizeCssDeclarationValue,sanitizeCssLength}from"../../../internal/safe-css.js";import{LyraElement}from"../../../internal/lyra-element.js";import{isRtl}from"../../../internal/rtl.js";import{srOnly,nextId}from"../../../internal/a11y.js";import{finiteCount,finiteInteger,finiteRatio}from"../../../internal/numbers.js";import{trueDefaultBooleanConverter}from"../../../internal/converters.js";import{resolveCssTokenLength}from"../../../internal/css-token-length.js";import{getCollator,getNumberFormat}from"../../../internal/intl-cache.js";import{readPersistedState,writePersistedState}from"../../../internal/persisted-state.js";import{definePersistedProperty,isPersistedPropertyExplicitlySet}from"../../../internal/persisted-restore.js";import{styles}from"./table.styles.js";import{chevronIcon,closeIcon,sortIcon}from"../../../internal/icons.js";import{minMax}from"../../../internal/numbers.js";import{literalSetConverter,trueDefaultSpellcheckConverter as spellcheckConverter}from"../../../internal/converters.js";import{activeElementIn,shadowFocusTarget}from"../../../internal/active-element.js";import{AnnouncementSinkController}from"../../../internal/announcer.js";import{devWarnOnce}from"../../../internal/dev-mode-attribute-warning.js";import{normalizeSize,optionalSizeConverter}from"../../../internal/variants.js";import{markVetoGuardWrite,VetoWriteGuard}from"../../../internal/veto-write-guard.js";import{requestThenCommit}from"../../../internal/request-commit.js";import{ColumnResizePointerSession,columnResizeAriaValues,columnResizeKeyboardWidth,columnResizePointerWidth,columnResizeWidth}from"../../../internal/column-resize.js";import{renderDataState}from"../../../internal/data-state-renderer.js";import{LYRA_DEFAULT_clear,LYRA_DEFAULT_collapse,LYRA_DEFAULT_details,LYRA_DEFAULT_expand,LYRA_DEFAULT_loadMore,LYRA_DEFAULT_loading,LYRA_DEFAULT_map,LYRA_DEFAULT_navigation,LYRA_DEFAULT_noColumns,LYRA_DEFAULT_noData,LYRA_DEFAULT_noMatches,LYRA_DEFAULT_open,LYRA_DEFAULT_resizeColumn,LYRA_DEFAULT_resizeValuePixels,LYRA_DEFAULT_retry,LYRA_DEFAULT_search,LYRA_DEFAULT_select,LYRA_DEFAULT_showAllColumns,LYRA_DEFAULT_showFewerColumns,LYRA_DEFAULT_tableEditCell,LYRA_DEFAULT_tableFilterLabel,LYRA_DEFAULT_tableFilterPlaceholder,LYRA_DEFAULT_tableLoadFailed,LYRA_DEFAULT_tableLoading,LYRA_DEFAULT_tableLoadingMore,LYRA_DEFAULT_tableRowLimit,LYRA_DEFAULT_tableRowTotal}from"../../../internal/default-strings.generated.js";const DEFAULT_SKELETON_ROWS=3,MAX_SKELETON_ROWS=20,DEFAULT_PAGE_SIZE=100,MAX_PAGE_SIZE=500,MAX_TABLE_COLLECTION_ENTRIES=1e4,TABLE_SCROLL_OVERFLOW_TOLERANCE_PX=1,DEFAULT_RESIZE_MIN_WIDTH_PX=48,MISSING_CELL_RENDERER_WARNING="lyra-table-missing-cell-renderer",MISSING_ACCESSIBLE_NAME_WARNING="lyra-table-missing-accessible-name",INERT_PRIORITY_COLUMN_CONFIG_WARNING="lyra-table-inert-priority-column-config";function frozenArray(values){const snapshot=[];try{for(const value of values)if(snapshot.push(value),snapshot.length>=MAX_TABLE_COLLECTION_ENTRIES)break}catch{}return Object.freeze(snapshot)}function keySet(values){const snapshot=new Set;try{for(const value of values){if(typeof value=="string"){if(value.trim().length===0)continue}else if(typeof value!="number")continue;if(snapshot.add(value),snapshot.size>=MAX_TABLE_COLLECTION_ENTRIES)break}}catch{}return snapshot}function readonlyKeySet(values){const snapshot=keySet(values);let facade;return facade={get size(){return snapshot.size},has:value=>snapshot.has(value),entries:()=>snapshot.entries(),keys:()=>snapshot.keys(),values:()=>snapshot.values(),[Symbol.iterator]:()=>snapshot[Symbol.iterator](),forEach(callback,thisArg){snapshot.forEach(value=>callback.call(thisArg,value,value,facade))}},Object.freeze(facade)}const keySetFacades=new WeakMap;function storedKeySetFacade(values){let facade=keySetFacades.get(values);return facade||(facade=readonlyKeySet(values),keySetFacades.set(values,facade)),facade}const COMPACT_EMPTY_SIZES=new Set(["2xs","xs","s"]),isCompactEmptySize=size=>COMPACT_EMPTY_SIZES.has(normalizeSize(size)),TABLE_LAYOUT=literalSetConverter(["auto","fixed"],"auto"),INTERACTIVE_SELECTOR='button, a[href], input, select, textarea, summary, audio[controls], video[controls], [contenteditable]:not([contenteditable="false"]), [tabindex]:not([tabindex="-1"]), [role="button"], [role="checkbox"], [role="combobox"], [role="listbox"], [role="menu"], [role="menuitem"], [role="option"], [role="radio"], [role="separator"], [role="slider"], [role="spinbutton"], [role="switch"], [role="tab"], [role="textbox"]';function stickyDirection(sticky){if(sticky==="start"||sticky==="end")return sticky}const cellDeclarationVerdicts=new Map,CELL_DECLARATION_CACHE_LIMIT=1e3;function sanitizeCellStyle(cellStyle){const safe={};for(const[rawProperty,value]of Object.entries(cellStyle??{})){if(typeof value!="string")continue;const property2=normalizeStyleProperty(rawProperty.trim()),key=`${property2}\0${value}`;let verdict=cellDeclarationVerdicts.get(key);verdict===void 0&&(verdict=sanitizeCssDeclarationValue(property2,value)??"",cellDeclarationVerdicts.size>=CELL_DECLARATION_CACHE_LIMIT&&cellDeclarationVerdicts.clear(),cellDeclarationVerdicts.set(key,verdict)),verdict&&(safe[property2]=verdict)}return safe}function normalizeStyleProperty(property2){return property2.startsWith("--")?property2:property2.replace(/[A-Z]/g,"-$&").toLowerCase()}function normalizedEditTrigger(editTrigger){if(editTrigger==="always"||editTrigger==="double-click")return editTrigger}function encodeKey(key){return`${typeof key}:${key}`}function safeStringifyForFilter(row){const seen=new WeakSet;try{return JSON.stringify(row,(_key,value)=>{if(typeof value=="bigint")return value.toString();if(typeof value=="object"&&value!==null){if(seen.has(value))return"[Circular]";seen.add(value)}return value})??""}catch{return""}}function asElement(value){return typeof value!="object"||!("nodeType"in value)||value.nodeType!==1||!("matches"in value)?null:value}function eventInteractiveTarget(event,boundary){for(const value of event.composedPath()){if(value===boundary)break;const element=asElement(value);if(element!==null&&(element.matches("[data-table-interactive]")||element.matches(INTERACTIVE_SELECTOR)&&!element.matches("[data-row-key], th[data-col-key]")))return element}return null}class LyraTable extends LyraElement{constructor(){super(...arguments),this.assignedSources=new Map,this._columns=Object.freeze([]),this._rows=Object.freeze([]),this._rowsTruncated=!1,this._layout="auto",this.sortKey="",this.sortDir="asc",this.sortIndicators="active",this.sortMode="client",this.defaultSortDir="asc",this.hostAccessibleLabel=null,this.caption="",this.captionId=nextId("lr-table-caption"),this.selectionMode="none",this.expansionMode="none",this.scrollMode="self",this._selectedKeys=new Set,this.filterable=!1,this.filterText="",this.spellcheck=!0,this.autocapitalize="",this.autoCorrect="",this.loading=!1,this.loadingAppearance="spinner",this.skeletonRows=0,this.pageSize=DEFAULT_PAGE_SIZE,this.page=1,this.totalItems=-1,this.paginationMode="client",this.unknownTotal=!1,this.hasNext=!0,this._expandedKeys=new Set,this.hasMore=!1,this.loadingMore=!1,this.error=!1,this.errorDescription="",this.announce=!1,this.emptyDescription="",this.emptyColumnsDescription="",this.hasHiddenPriorityColumns=!1,this.priorityToggleAvailable=!1,this.persistReady=!1,this.announcements=new AnnouncementSinkController(this,{eager:["polite","assertive"]}),this.firstUpdateAnnouncementsReady=!1,this.activeColKey=null,this.activeRowKey=null,this.editingCell=null,this.focusedEditorCell=null,this.editorHadFocusBeforeUpdate=!1,this.rovingFocusSnapshot=null,this._resizedColumnWidths=new Map,this.resizeWriteGuard=new VetoWriteGuard,this.resizePointer=new ColumnResizePointerSession(event=>this.onResizePointerMove(event),event=>this.onResizePointerEnd(event),event=>this.onResizePointerEnd(event)),this.rowsByKey=new Map,this.columnsByKey=new Map,this.layoutFrame=null,this.observedHeaders=new Set,this.priorityTierNaturalWidth=new Map,this.priorityTierHiddenAllocation=new Map,this.priorityTierRevealAllocation=new Map,this.onResizePointerDown=event=>{const handle=event.currentTarget,key=handle.dataset.colKey,column=key?this.columnsByKey.get(key):void 0,header=handle.closest("th[data-col-key]");if(!key||!column||!header||!this.ownerDocument.defaultView)return;const replacedStartWidth=this.resizeState?.key===key?this.resizeState.startWidth:void 0;this.cancelResizeGesture();const minWidth=this.minimumResizeWidth(column);this.resizeState={key,pointerId:event.pointerId,startX:event.clientX,startWidth:replacedStartWidth??header.getBoundingClientRect().width,minWidth,maxWidth:this.maximumResizeWidth(column,minWidth),handle,previousWidth:this.resizedColumnWidths.get(key)},handle.toggleAttribute("data-resizing",!0),event.preventDefault(),event.stopPropagation(),this.resizePointer.start(event,handle)},this.onResizePointerMove=event=>{const state2=this.resizeState;if(!state2||event.pointerId!==state2.pointerId)return;const width=columnResizePointerWidth(state2.startWidth,state2.startX,event.clientX,isRtl(this),state2.minWidth,state2.maxWidth);this.resizedColumnWidths.get(state2.key)!==width&&(this.resizedColumnWidths=new Map(this.resizedColumnWidths).set(state2.key,width),this.emit("lr-column-resize",Object.freeze({columnKey:state2.key,width})))},this.onResizeKeyDown=event=>{const handle=event.currentTarget,key=handle.dataset.colKey,column=key?this.columnsByKey.get(key):void 0;if(!column)return;const minWidth=this.minimumResizeWidth(column),maxWidth=this.maximumResizeWidth(column,minWidth),currentWidth=this.currentResizeWidth(column,handle),requestedWidth=columnResizeKeyboardWidth(event,currentWidth,minWidth,maxWidth,isRtl(this));requestedWidth!==void 0&&(event.preventDefault(),event.stopPropagation(),this.resizeColumnTo(column,requestedWidth))},this.onResizePointerEnd=event=>{const state2=this.resizeState;if(!state2||event.pointerId!==state2.pointerId)return;if(state2.handle.removeAttribute("data-resizing"),this.resizeState=void 0,this.resizePointer.stop(),event.type!=="pointerup"){const reverted=new Map(this.resizedColumnWidths);state2.previousWidth===void 0?reverted.delete(state2.key):reverted.set(state2.key,state2.previousWidth),this.resizedColumnWidths=reverted;return}const committedWidth=this.resizedColumnWidths.get(state2.key);if(committedWidth===void 0||committedWidth===state2.previousWidth)return;this.resizeWriteGuard.open();const request=this.emit("lr-column-resize-request",Object.freeze({columnKey:state2.key,width:committedWidth}),{cancelable:!0});if(!this.resizeWriteGuard.touched){if(request.defaultPrevented){this.rollbackResizePreview(state2);return}this.emit("lr-column-resize",Object.freeze({columnKey:state2.key,width:committedWidth}))}},this.scheduleLayoutSync=()=>{if(this.layoutFrame)return;const owner=this.ownerDocument.defaultView;if(!owner)return;const frame={owner,handle:0};frame.handle=owner.requestAnimationFrame(()=>{this.layoutFrame===frame&&(this.layoutFrame=null,!(!this.isConnected||this.ownerDocument.defaultView!==owner)&&(this.syncAutoScrollMode(),this.recomputeHiddenPriorityColumns(),this.applyStickyOffsets(),this.syncResizeHandleValues()))}),this.layoutFrame=frame},this.cachedCanonicalRowEntries=null,this.canonicalRowEntriesInputs=null,this.cachedMatchingEntries=null,this.matchingEntriesInputs=null,this.cachedSortedEntries=null,this.sortedEntriesInputs=null,this.onFilterInput=event=>{event.stopPropagation();const input=event.currentTarget;this.filterText=input.value,this.emit("lr-filter-change",Object.freeze({filterText:this.filterText}))},this.onClearFilter=()=>{this.filterText!==""&&(this.filterText="",this.emit("lr-filter-change",Object.freeze({filterText:""})),this.renderRoot.querySelector('[part="filter"]')?.focus())},this.stopOwnedEvent=event=>{event.stopPropagation()},this.onNativeFocus=event=>{event.stopPropagation(),relayNativeEvent(this,event)},this.onNativeBlur=event=>{event.stopPropagation(),relayNativeEvent(this,event)},this.onPaginationChange=event=>{event.stopPropagation();const{page}=event.detail;this.paginationMode==="client"&&(this.page=page),this.emit("lr-page-change",Object.freeze({page}))},this.onTableFocusIn=event=>{const target=event.target,cell=target?.closest?.("td[data-col-key]"),row=target?.closest?.("[data-row-key]"),columnKey=cell?.dataset.colKey,rowKey=row?.dataset.rowKey;this.focusedEditorCell=target?.getAttribute("part")==="cell-editor"&&columnKey!==void 0&&rowKey!==void 0&&normalizedEditTrigger(this.columnsByKey.get(columnKey)?.editTrigger)==="always"?{rowKey,columnKey}:null},this.onEditorKeyDown=(event,rowKey,columnKey)=>{event.stopPropagation();const alwaysOn=normalizedEditTrigger(this.columnsByKey.get(columnKey)?.editTrigger)==="always";event.key==="Enter"?(event.preventDefault(),this.commitEdit(event,rowKey,columnKey)):event.key==="Escape"&&!alwaysOn&&(event.preventDefault(),this.editingCell=null)},this.onTableDoubleClick=event=>{const target=event.target,table=event.currentTarget;if(eventInteractiveTarget(event,table))return;const cell=target.closest('[part="cell"][data-col-key]'),row=target.closest("[data-row-key]");cell&&row?.dataset.rowKey&&cell.dataset.colKey&&this.startEditing(row.dataset.rowKey,cell.dataset.colKey)},this.toggleColumns=()=>{this.priorityColumnsVisible=!this.priorityColumnsVisible,this.emit("lr-priority-columns-visibility-change",Object.freeze({visible:this.priorityColumnsVisible}))},this.onTableClick=e=>{const target=e.target,table=e.currentTarget;if(eventInteractiveTarget(e,table))return;const th=target.closest("th[data-col-key]");if(th)return this.activateColumn(th.dataset.colKey);const tr=target.closest("[data-row-key]");tr&&this.activateRow(tr.dataset.rowKey)},this.onTableKeyDown=e=>{const target=e.target,table=e.currentTarget;if(eventInteractiveTarget(e,table)||(e.altKey||e.metaKey)&&e.key.startsWith("Arrow"))return;const th=target.closest("th[data-col-key]");if(th)return this.onHeaderKeyDown(e,th);const tr=target.closest("[data-row-key]");tr&&this.onRowKeyDown(e,tr)}}static{this.defaultStrings={...super.defaultStrings,clear:LYRA_DEFAULT_clear,collapse:LYRA_DEFAULT_collapse,details:LYRA_DEFAULT_details,expand:LYRA_DEFAULT_expand,loadMore:LYRA_DEFAULT_loadMore,loading:LYRA_DEFAULT_loading,map:LYRA_DEFAULT_map,navigation:LYRA_DEFAULT_navigation,noColumns:LYRA_DEFAULT_noColumns,noData:LYRA_DEFAULT_noData,noMatches:LYRA_DEFAULT_noMatches,open:LYRA_DEFAULT_open,resizeColumn:LYRA_DEFAULT_resizeColumn,resizeValuePixels:LYRA_DEFAULT_resizeValuePixels,retry:LYRA_DEFAULT_retry,search:LYRA_DEFAULT_search,select:LYRA_DEFAULT_select,showAllColumns:LYRA_DEFAULT_showAllColumns,showFewerColumns:LYRA_DEFAULT_showFewerColumns,tableEditCell:LYRA_DEFAULT_tableEditCell,tableFilterLabel:LYRA_DEFAULT_tableFilterLabel,tableFilterPlaceholder:LYRA_DEFAULT_tableFilterPlaceholder,tableLoadFailed:LYRA_DEFAULT_tableLoadFailed,tableLoading:LYRA_DEFAULT_tableLoading,tableLoadingMore:LYRA_DEFAULT_tableLoadingMore,tableRowLimit:LYRA_DEFAULT_tableRowLimit,tableRowTotal:LYRA_DEFAULT_tableRowTotal}}static{this.styles=[LyraElement.styles,styles,srOnly]}isRebind(name,value,current){return value===current||this.assignedSources.has(name)&&this.assignedSources.get(name)===value?!0:(this.assignedSources.set(name,value),!1)}get columns(){return this._columns}set columns(value){if(this.isRebind("columns",value,this._columns))return;const previous=this._columns,columns=[],seen=new Set;let length=0;try{if(Array.isArray(value)){const descriptor=Object.getOwnPropertyDescriptor(value,"length"),sourceLength=descriptor&&"value"in descriptor?descriptor.value:0;typeof sourceLength=="number"&&Number.isSafeInteger(sourceLength)&&sourceLength>=0&&(length=Math.min(sourceLength,MAX_TABLE_COLLECTION_ENTRIES))}}catch{length=0}for(let index=0;index<length;index+=1){let descriptor;try{descriptor=Object.getOwnPropertyDescriptor(value,String(index))}catch{continue}if(!descriptor||!("value"in descriptor))continue;const column=descriptor.value;try{const key=column?.key;if(typeof key!="string"||key.trim().length===0||seen.has(key))continue;seen.add(key),columns.push(column)}catch{}}this._columns=frozenArray(columns),this.requestUpdate("columns",previous)}get rows(){return this._rows}set rows(value){if(this.isRebind("rows",value,this._rows))return;const previous=this._rows;this._rows=frozenArray(Array.isArray(value)?value:[]),this._rowsTruncated=Array.isArray(value)&&value.length>this._rows.length,this.requestUpdate("rows",previous)}get rowsTruncated(){return this._rowsTruncated}get layout(){return this._layout}set layout(next){const normalized=TABLE_LAYOUT.normalizeReflected(this,"layout",next),old=this._layout;old!==normalized&&(this._layout=normalized,this.requestUpdate("layout",old))}get selectedRowKeys(){return storedKeySetFacade(this._selectedKeys)}set selectedRowKeys(value){if(this.isRebind("selectedRowKeys",value,storedKeySetFacade(this._selectedKeys)))return;const previous=this._selectedKeys;this._selectedKeys=keySet(value??[]),this.requestUpdate("selectedRowKeys",previous)}get expandedRowKeys(){return storedKeySetFacade(this._expandedKeys)}set expandedRowKeys(value){if(this.isRebind("expandedRowKeys",value,storedKeySetFacade(this._expandedKeys)))return;const previous=this._expandedKeys;this._expandedKeys=keySet(value??[]),this.requestUpdate("expandedRowKeys",previous)}asKeySet(keys){return keys}asKeyList(keys){return keys}get emptySize(){return this._emptySize}set emptySize(value){const previous=this._emptySize,next=optionalSizeConverter.normalize(value);next!==previous&&(this._emptySize=next,this.requestUpdate("emptySize",previous))}get priorityColumnsToggleAvailable(){return this.priorityToggleAvailable}static{definePersistedProperty(this.prototype,"priorityColumnsVisible",{initial:!1,attribute:"priority-columns-visible",type:Boolean,reflect:!0})}get storageFullKey(){return this.storageKey?`lr-table:${this.storageKey}`:void 0}get resizedColumnWidths(){return this._resizedColumnWidths}set resizedColumnWidths(value){const previous=this._resizedColumnWidths;this._resizedColumnWidths=value,markVetoGuardWrite(this.resizeWriteGuard),this.requestUpdate("resizedColumnWidths",previous)}parsePixelLength(value){if(!value)return;const trimmed=value.trim();if(!trimmed.endsWith("px"))return;const parsed=Number.parseFloat(trimmed);return Number.isFinite(parsed)?parsed:void 0}minimumResizeWidth(column){const explicit=this.parsePixelLength(column.minWidth);if(explicit!==void 0)return Math.max(0,explicit);const cached=this.themedResizeMinWidth;if(cached&&cached.document===this.ownerDocument)return cached.width;const width=this.resolveThemedResizeMinWidth();return this.themedResizeMinWidth={document:this.ownerDocument,width},width}resolveThemedResizeMinWidth(){const hostStyle=this.ownerDocument.defaultView?.getComputedStyle(this),themed=hostStyle?.getPropertyValue("--lr-table-resize-min-width").trim()||hostStyle?.getPropertyValue("--_lr-table-resize-min-width-default").trim()||"",resolved=resolveCssTokenLength(themed,{host:this});return resolved===void 0?DEFAULT_RESIZE_MIN_WIDTH_PX:Math.max(0,resolved)}maximumResizeWidth(column,minWidth){const explicit=this.parsePixelLength(column.maxWidth);return explicit===void 0?Number.POSITIVE_INFINITY:Math.max(minWidth,explicit)}currentResizeWidth(column,handle){const resized=this.resizedColumnWidths.get(column.key);if(resized!==void 0)return resized;const explicit=this.parsePixelLength(column.width);if(explicit!==void 0)return explicit;const rendered=handle?.closest("th[data-col-key]")?.getBoundingClientRect().width;return rendered&&rendered>0?rendered:this.minimumResizeWidth(column)}resizeValueText(width){return this.localize("resizeValuePixels",void 0,{value:getNumberFormat(this.effectiveLocale).format(Math.round(width))})}resizeColumnTo(column,requestedWidth){const minWidth=this.minimumResizeWidth(column),maxWidth=this.maximumResizeWidth(column,minWidth),width=columnResizeWidth(requestedWidth,minWidth,maxWidth);this.resizedColumnWidths.get(column.key)!==width&&requestThenCommit({requestDetail:Object.freeze({columnKey:column.key,width}),emitRequest:(detail,init)=>this.emit("lr-column-resize-request",detail,init),guard:this.resizeWriteGuard,commit:()=>{this.resizedColumnWidths=new Map(this.resizedColumnWidths).set(column.key,width),this.emit("lr-column-resize",Object.freeze({columnKey:column.key,width})),markVetoGuardWrite(this.resizeWriteGuard)}})}renderedColumnWidth(column){const resized=this.resizedColumnWidths.get(column.key);return resized===void 0?sanitizeCssLength(column.width,"height"):`${resized}px`}renderResizeHandle(column){if(!column.resizable)return nothing;const minWidth=this.minimumResizeWidth(column),maxWidth=this.maximumResizeWidth(column,minWidth),width=this.currentResizeWidth(column),aria=columnResizeAriaValues(width,minWidth,maxWidth);return html`<span
+import{__decorate}from"tslib";import{relayNativeEvent}from"../../../internal/native-event-relay.js";import{html,nothing}from"lit";import{property,state}from"lit/decorators.js";import{repeat}from"lit/directives/repeat.js";import{styleMap}from"lit/directives/style-map.js";import{sanitizeCssDeclarationValue,sanitizeCssLength}from"../../../internal/safe-css.js";import{LyraElement}from"../../../internal/lyra-element.js";import{isRtl}from"../../../internal/rtl.js";import{srOnly,nextId}from"../../../internal/a11y.js";import{finiteCount,finiteInteger,finiteRatio}from"../../../internal/numbers.js";import{trueDefaultBooleanConverter}from"../../../internal/converters.js";import{resolveCssTokenLength}from"../../../internal/css-token-length.js";import{getCollator,getNumberFormat}from"../../../internal/intl-cache.js";import{readPersistedState,writePersistedState}from"../../../internal/persisted-state.js";import{definePersistedProperty,isPersistedPropertyExplicitlySet}from"../../../internal/persisted-restore.js";import{styles}from"./table.styles.js";import{chevronIcon,closeIcon,sortIcon}from"../../../internal/icons.js";import{minMax}from"../../../internal/numbers.js";import{literalSetConverter,trueDefaultSpellcheckConverter as spellcheckConverter}from"../../../internal/converters.js";import{activeElementIn,shadowFocusTarget}from"../../../internal/active-element.js";import{AnnouncementSinkController}from"../../../internal/announcer.js";import{devWarnOnce}from"../../../internal/dev-mode-attribute-warning.js";import{normalizeSize,optionalSizeConverter}from"../../../internal/variants.js";import{markVetoGuardWrite,VetoWriteGuard}from"../../../internal/veto-write-guard.js";import{requestThenCommit}from"../../../internal/request-commit.js";import{ColumnResizePointerSession,columnResizeAriaValues,columnResizeKeyboardWidth,columnResizePointerWidth,columnResizeWidth}from"../../../internal/column-resize.js";import{renderDataState}from"../../../internal/data-state-renderer.js";import{LYRA_DEFAULT_noColumns,LYRA_DEFAULT_resizeColumn,LYRA_DEFAULT_showAllColumns,LYRA_DEFAULT_showFewerColumns,LYRA_DEFAULT_tableEditCell,LYRA_DEFAULT_tableFilterLabel,LYRA_DEFAULT_tableFilterPlaceholder,LYRA_DEFAULT_tableLoading,LYRA_DEFAULT_tableLoadingMore,LYRA_DEFAULT_tableRowLimit,LYRA_DEFAULT_tableRowTotal}from"../../../internal/default-strings/data.generated.js";import{LYRA_DEFAULT_clear,LYRA_DEFAULT_collapse,LYRA_DEFAULT_details,LYRA_DEFAULT_expand,LYRA_DEFAULT_loadMore,LYRA_DEFAULT_loading,LYRA_DEFAULT_map,LYRA_DEFAULT_navigation,LYRA_DEFAULT_noData,LYRA_DEFAULT_noMatches,LYRA_DEFAULT_open,LYRA_DEFAULT_resizeValuePixels,LYRA_DEFAULT_retry,LYRA_DEFAULT_search,LYRA_DEFAULT_select,LYRA_DEFAULT_tableLoadFailed}from"../../../internal/default-strings/shared.generated.js";const DEFAULT_SKELETON_ROWS=3,MAX_SKELETON_ROWS=20,DEFAULT_PAGE_SIZE=100,MAX_PAGE_SIZE=500,MAX_TABLE_COLLECTION_ENTRIES=1e4,TABLE_SCROLL_OVERFLOW_TOLERANCE_PX=1,DEFAULT_RESIZE_MIN_WIDTH_PX=48,MISSING_CELL_RENDERER_WARNING="lyra-table-missing-cell-renderer",MISSING_ACCESSIBLE_NAME_WARNING="lyra-table-missing-accessible-name",INERT_PRIORITY_COLUMN_CONFIG_WARNING="lyra-table-inert-priority-column-config";function frozenArray(values){const snapshot=[];try{for(const value of values)if(snapshot.push(value),snapshot.length>=MAX_TABLE_COLLECTION_ENTRIES)break}catch{}return Object.freeze(snapshot)}function keySet(values){const snapshot=new Set;try{for(const value of values){if(typeof value=="string"){if(value.trim().length===0)continue}else if(typeof value!="number")continue;if(snapshot.add(value),snapshot.size>=MAX_TABLE_COLLECTION_ENTRIES)break}}catch{}return snapshot}function readonlyKeySet(values){const snapshot=keySet(values);let facade;return facade={get size(){return snapshot.size},has:value=>snapshot.has(value),entries:()=>snapshot.entries(),keys:()=>snapshot.keys(),values:()=>snapshot.values(),[Symbol.iterator]:()=>snapshot[Symbol.iterator](),forEach(callback,thisArg){snapshot.forEach(value=>callback.call(thisArg,value,value,facade))}},Object.freeze(facade)}const keySetFacades=new WeakMap;function storedKeySetFacade(values){let facade=keySetFacades.get(values);return facade||(facade=readonlyKeySet(values),keySetFacades.set(values,facade)),facade}const COMPACT_EMPTY_SIZES=new Set(["2xs","xs","s"]),isCompactEmptySize=size=>COMPACT_EMPTY_SIZES.has(normalizeSize(size)),TABLE_LAYOUT=literalSetConverter(["auto","fixed"],"auto"),TABLE_PAGINATION_FORMAT=literalSetConverter(["standard","compact"],"compact"),INTERACTIVE_SELECTOR='button, a[href], input, select, textarea, summary, audio[controls], video[controls], [contenteditable]:not([contenteditable="false"]), [tabindex]:not([tabindex="-1"]), [role="button"], [role="checkbox"], [role="combobox"], [role="listbox"], [role="menu"], [role="menuitem"], [role="option"], [role="radio"], [role="separator"], [role="slider"], [role="spinbutton"], [role="switch"], [role="tab"], [role="textbox"]';function stickyDirection(sticky){if(sticky==="start"||sticky==="end")return sticky}const cellDeclarationVerdicts=new Map,CELL_DECLARATION_CACHE_LIMIT=1e3;function sanitizeCellStyle(cellStyle){const safe={};for(const[rawProperty,value]of Object.entries(cellStyle??{})){if(typeof value!="string")continue;const property2=normalizeStyleProperty(rawProperty.trim()),key=`${property2}\0${value}`;let verdict=cellDeclarationVerdicts.get(key);verdict===void 0&&(verdict=sanitizeCssDeclarationValue(property2,value)??"",cellDeclarationVerdicts.size>=CELL_DECLARATION_CACHE_LIMIT&&cellDeclarationVerdicts.clear(),cellDeclarationVerdicts.set(key,verdict)),verdict&&(safe[property2]=verdict)}return safe}function normalizeStyleProperty(property2){return property2.startsWith("--")?property2:property2.replace(/[A-Z]/g,"-$&").toLowerCase()}function normalizedEditTrigger(editTrigger){if(editTrigger==="always"||editTrigger==="double-click")return editTrigger}function encodeKey(key){return`${typeof key}:${key}`}function safeStringifyForFilter(row){const seen=new WeakSet;try{return JSON.stringify(row,(_key,value)=>{if(typeof value=="bigint")return value.toString();if(typeof value=="object"&&value!==null){if(seen.has(value))return"[Circular]";seen.add(value)}return value})??""}catch{return""}}function asElement(value){return typeof value!="object"||!("nodeType"in value)||value.nodeType!==1||!("matches"in value)?null:value}function eventInteractiveTarget(event,boundary){for(const value of event.composedPath()){if(value===boundary)break;const element=asElement(value);if(element!==null&&(element.matches("[data-table-interactive]")||element.matches(INTERACTIVE_SELECTOR)&&!element.matches("[data-row-key], th[data-col-key]")))return element}return null}class LyraTable extends LyraElement{constructor(){super(...arguments),this.assignedSources=new Map,this._columns=Object.freeze([]),this._rows=Object.freeze([]),this._rowsTruncated=!1,this._layout="auto",this.sortKey="",this.sortDir="asc",this.sortIndicators="active",this.sortMode="client",this.defaultSortDir="asc",this.hostAccessibleLabel=null,this.caption="",this.captionId=nextId("lr-table-caption"),this.selectionMode="none",this.expansionMode="none",this.scrollMode="self",this._selectedKeys=new Set,this.filterable=!1,this.filterText="",this.spellcheck=!0,this.autocapitalize="",this.autoCorrect="",this.loading=!1,this.loadingAppearance="spinner",this.skeletonRows=0,this.pageSize=DEFAULT_PAGE_SIZE,this.page=1,this.totalItems=-1,this.paginationMode="client",this.unknownTotal=!1,this.paginationWithSummary=!1,this.paginationFormat="compact",this.hasNext=!0,this._expandedKeys=new Set,this.hasMore=!1,this.loadingMore=!1,this.error=!1,this.errorDescription="",this.announce=!1,this.emptyDescription="",this.emptyColumnsDescription="",this.hasHiddenPriorityColumns=!1,this.priorityToggleAvailable=!1,this.persistReady=!1,this.announcements=new AnnouncementSinkController(this,{eager:["polite","assertive"]}),this.firstUpdateAnnouncementsReady=!1,this.activeColKey=null,this.activeRowKey=null,this.editingCell=null,this.focusedEditorCell=null,this.editorHadFocusBeforeUpdate=!1,this.rovingFocusSnapshot=null,this._resizedColumnWidths=new Map,this.resizeWriteGuard=new VetoWriteGuard,this.resizePointer=new ColumnResizePointerSession(event=>this.onResizePointerMove(event),event=>this.onResizePointerEnd(event),event=>this.onResizePointerEnd(event)),this.rowsByKey=new Map,this.columnsByKey=new Map,this.layoutFrame=null,this.observedHeaders=new Set,this.priorityTierNaturalWidth=new Map,this.priorityTierHiddenAllocation=new Map,this.priorityTierRevealAllocation=new Map,this.onResizePointerDown=event=>{const handle=event.currentTarget,key=handle.dataset.colKey,column=key?this.columnsByKey.get(key):void 0,header=handle.closest("th[data-col-key]");if(!key||!column||!header||!this.ownerDocument.defaultView)return;const replacedStartWidth=this.resizeState?.key===key?this.resizeState.startWidth:void 0;this.cancelResizeGesture();const minWidth=this.minimumResizeWidth(column);this.resizeState={key,pointerId:event.pointerId,startX:event.clientX,startWidth:replacedStartWidth??header.getBoundingClientRect().width,minWidth,maxWidth:this.maximumResizeWidth(column,minWidth),handle,previousWidth:this.resizedColumnWidths.get(key)},handle.toggleAttribute("data-resizing",!0),event.preventDefault(),event.stopPropagation(),this.resizePointer.start(event,handle)},this.onResizePointerMove=event=>{const state2=this.resizeState;if(!state2||event.pointerId!==state2.pointerId)return;const width=columnResizePointerWidth(state2.startWidth,state2.startX,event.clientX,isRtl(this),state2.minWidth,state2.maxWidth);this.resizedColumnWidths.get(state2.key)!==width&&(this.resizedColumnWidths=new Map(this.resizedColumnWidths).set(state2.key,width),this.emit("lr-column-resize",Object.freeze({columnKey:state2.key,width})))},this.onResizeKeyDown=event=>{const handle=event.currentTarget,key=handle.dataset.colKey,column=key?this.columnsByKey.get(key):void 0;if(!column)return;const minWidth=this.minimumResizeWidth(column),maxWidth=this.maximumResizeWidth(column,minWidth),currentWidth=this.currentResizeWidth(column,handle),requestedWidth=columnResizeKeyboardWidth(event,currentWidth,minWidth,maxWidth,isRtl(this));requestedWidth!==void 0&&(event.preventDefault(),event.stopPropagation(),this.resizeColumnTo(column,requestedWidth))},this.onResizePointerEnd=event=>{const state2=this.resizeState;if(!state2||event.pointerId!==state2.pointerId)return;if(state2.handle.removeAttribute("data-resizing"),this.resizeState=void 0,this.resizePointer.stop(),event.type!=="pointerup"){const reverted=new Map(this.resizedColumnWidths);state2.previousWidth===void 0?reverted.delete(state2.key):reverted.set(state2.key,state2.previousWidth),this.resizedColumnWidths=reverted;return}const committedWidth=this.resizedColumnWidths.get(state2.key);if(committedWidth===void 0||committedWidth===state2.previousWidth)return;this.resizeWriteGuard.open();const request=this.emit("lr-column-resize-request",Object.freeze({columnKey:state2.key,width:committedWidth}),{cancelable:!0});if(!this.resizeWriteGuard.touched){if(request.defaultPrevented){this.rollbackResizePreview(state2);return}this.emit("lr-column-resize",Object.freeze({columnKey:state2.key,width:committedWidth}))}},this.scheduleLayoutSync=()=>{if(this.layoutFrame)return;const owner=this.ownerDocument.defaultView;if(!owner)return;const frame={owner,handle:0};frame.handle=owner.requestAnimationFrame(()=>{this.layoutFrame===frame&&(this.layoutFrame=null,!(!this.isConnected||this.ownerDocument.defaultView!==owner)&&(this.syncAutoScrollMode(),this.recomputeHiddenPriorityColumns(),this.applyStickyOffsets(),this.syncResizeHandleValues()))}),this.layoutFrame=frame},this.cachedCanonicalRowEntries=null,this.canonicalRowEntriesInputs=null,this.cachedMatchingEntries=null,this.matchingEntriesInputs=null,this.cachedSortedEntries=null,this.sortedEntriesInputs=null,this.onFilterInput=event=>{event.stopPropagation();const input=event.currentTarget;this.filterText=input.value,this.emit("lr-filter-change",Object.freeze({filterText:this.filterText}))},this.onClearFilter=()=>{this.filterText!==""&&(this.filterText="",this.emit("lr-filter-change",Object.freeze({filterText:""})),this.renderRoot.querySelector('[part="filter"]')?.focus())},this.stopOwnedEvent=event=>{event.stopPropagation()},this.onNativeFocus=event=>{event.stopPropagation(),relayNativeEvent(this,event)},this.onNativeBlur=event=>{event.stopPropagation(),relayNativeEvent(this,event)},this.onPaginationChange=event=>{event.stopPropagation();const{page}=event.detail;this.paginationMode==="client"&&(this.page=page),this.emit("lr-page-change",Object.freeze({page}))},this.onTableFocusIn=event=>{const target=event.target,cell=target?.closest?.("td[data-col-key]"),row=target?.closest?.("[data-row-key]"),columnKey=cell?.dataset.colKey,rowKey=row?.dataset.rowKey;this.focusedEditorCell=target?.getAttribute("part")==="cell-editor"&&columnKey!==void 0&&rowKey!==void 0&&normalizedEditTrigger(this.columnsByKey.get(columnKey)?.editTrigger)==="always"?{rowKey,columnKey}:null},this.onEditorKeyDown=(event,rowKey,columnKey)=>{event.stopPropagation();const alwaysOn=normalizedEditTrigger(this.columnsByKey.get(columnKey)?.editTrigger)==="always";event.key==="Enter"?(event.preventDefault(),this.commitEdit(event,rowKey,columnKey)):event.key==="Escape"&&!alwaysOn&&(event.preventDefault(),this.editingCell=null)},this.onTableDoubleClick=event=>{const target=event.target,table=event.currentTarget;if(eventInteractiveTarget(event,table))return;const cell=target.closest('[part="cell"][data-col-key]'),row=target.closest("[data-row-key]");cell&&row?.dataset.rowKey&&cell.dataset.colKey&&this.startEditing(row.dataset.rowKey,cell.dataset.colKey)},this.toggleColumns=()=>{this.priorityColumnsVisible=!this.priorityColumnsVisible,this.emit("lr-priority-columns-visibility-change",Object.freeze({visible:this.priorityColumnsVisible}))},this.onTableClick=e=>{const target=e.target,table=e.currentTarget;if(eventInteractiveTarget(e,table))return;const th=target.closest("th[data-col-key]");if(th)return this.activateColumn(th.dataset.colKey);const tr=target.closest("[data-row-key]");tr&&this.activateRow(tr.dataset.rowKey)},this.onTableKeyDown=e=>{const target=e.target,table=e.currentTarget;if(eventInteractiveTarget(e,table)||(e.altKey||e.metaKey)&&e.key.startsWith("Arrow"))return;const th=target.closest("th[data-col-key]");if(th)return this.onHeaderKeyDown(e,th);const tr=target.closest("[data-row-key]");tr&&this.onRowKeyDown(e,tr)}}static{this.defaultStrings={...super.defaultStrings,clear:LYRA_DEFAULT_clear,collapse:LYRA_DEFAULT_collapse,details:LYRA_DEFAULT_details,expand:LYRA_DEFAULT_expand,loadMore:LYRA_DEFAULT_loadMore,loading:LYRA_DEFAULT_loading,map:LYRA_DEFAULT_map,navigation:LYRA_DEFAULT_navigation,noColumns:LYRA_DEFAULT_noColumns,noData:LYRA_DEFAULT_noData,noMatches:LYRA_DEFAULT_noMatches,open:LYRA_DEFAULT_open,resizeColumn:LYRA_DEFAULT_resizeColumn,resizeValuePixels:LYRA_DEFAULT_resizeValuePixels,retry:LYRA_DEFAULT_retry,search:LYRA_DEFAULT_search,select:LYRA_DEFAULT_select,showAllColumns:LYRA_DEFAULT_showAllColumns,showFewerColumns:LYRA_DEFAULT_showFewerColumns,tableEditCell:LYRA_DEFAULT_tableEditCell,tableFilterLabel:LYRA_DEFAULT_tableFilterLabel,tableFilterPlaceholder:LYRA_DEFAULT_tableFilterPlaceholder,tableLoadFailed:LYRA_DEFAULT_tableLoadFailed,tableLoading:LYRA_DEFAULT_tableLoading,tableLoadingMore:LYRA_DEFAULT_tableLoadingMore,tableRowLimit:LYRA_DEFAULT_tableRowLimit,tableRowTotal:LYRA_DEFAULT_tableRowTotal}}static{this.styles=[LyraElement.styles,styles,srOnly]}isRebind(name,value,current){return value===current||this.assignedSources.has(name)&&this.assignedSources.get(name)===value?!0:(this.assignedSources.set(name,value),!1)}get columns(){return this._columns}set columns(value){if(this.isRebind("columns",value,this._columns))return;const previous=this._columns,columns=[],seen=new Set;let length=0;try{if(Array.isArray(value)){const descriptor=Object.getOwnPropertyDescriptor(value,"length"),sourceLength=descriptor&&"value"in descriptor?descriptor.value:0;typeof sourceLength=="number"&&Number.isSafeInteger(sourceLength)&&sourceLength>=0&&(length=Math.min(sourceLength,MAX_TABLE_COLLECTION_ENTRIES))}}catch{length=0}for(let index=0;index<length;index+=1){let descriptor;try{descriptor=Object.getOwnPropertyDescriptor(value,String(index))}catch{continue}if(!descriptor||!("value"in descriptor))continue;const column=descriptor.value;try{const key=column?.key;if(typeof key!="string"||key.trim().length===0||seen.has(key))continue;seen.add(key),columns.push(column)}catch{}}this._columns=frozenArray(columns),this.requestUpdate("columns",previous)}get rows(){return this._rows}set rows(value){if(this.isRebind("rows",value,this._rows))return;const previous=this._rows;this._rows=frozenArray(Array.isArray(value)?value:[]),this._rowsTruncated=Array.isArray(value)&&value.length>this._rows.length,this.requestUpdate("rows",previous)}get rowsTruncated(){return this._rowsTruncated}get layout(){return this._layout}set layout(next){const normalized=TABLE_LAYOUT.normalizeReflected(this,"layout",next),old=this._layout;old!==normalized&&(this._layout=normalized,this.requestUpdate("layout",old))}get selectedRowKeys(){return storedKeySetFacade(this._selectedKeys)}set selectedRowKeys(value){if(this.isRebind("selectedRowKeys",value,storedKeySetFacade(this._selectedKeys)))return;const previous=this._selectedKeys;this._selectedKeys=keySet(value??[]),this.requestUpdate("selectedRowKeys",previous)}get expandedRowKeys(){return storedKeySetFacade(this._expandedKeys)}set expandedRowKeys(value){if(this.isRebind("expandedRowKeys",value,storedKeySetFacade(this._expandedKeys)))return;const previous=this._expandedKeys;this._expandedKeys=keySet(value??[]),this.requestUpdate("expandedRowKeys",previous)}asKeySet(keys){return keys}asKeyList(keys){return keys}get emptySize(){return this._emptySize}set emptySize(value){const previous=this._emptySize,next=optionalSizeConverter.normalize(value);next!==previous&&(this._emptySize=next,this.requestUpdate("emptySize",previous))}get priorityColumnsToggleAvailable(){return this.priorityToggleAvailable}static{definePersistedProperty(this.prototype,"priorityColumnsVisible",{initial:!1,attribute:"priority-columns-visible",type:Boolean,reflect:!0})}get storageFullKey(){return this.storageKey?`lr-table:${this.storageKey}`:void 0}get resizedColumnWidths(){return this._resizedColumnWidths}set resizedColumnWidths(value){const previous=this._resizedColumnWidths;this._resizedColumnWidths=value,markVetoGuardWrite(this.resizeWriteGuard),this.requestUpdate("resizedColumnWidths",previous)}parsePixelLength(value){if(!value)return;const trimmed=value.trim();if(!trimmed.endsWith("px"))return;const parsed=Number.parseFloat(trimmed);return Number.isFinite(parsed)?parsed:void 0}minimumResizeWidth(column){const explicit=this.parsePixelLength(column.minWidth);if(explicit!==void 0)return Math.max(0,explicit);const cached=this.themedResizeMinWidth;if(cached&&cached.document===this.ownerDocument)return cached.width;const width=this.resolveThemedResizeMinWidth();return this.themedResizeMinWidth={document:this.ownerDocument,width},width}resolveThemedResizeMinWidth(){const hostStyle=this.ownerDocument.defaultView?.getComputedStyle(this),themed=hostStyle?.getPropertyValue("--lr-table-resize-min-width").trim()||hostStyle?.getPropertyValue("--_lr-table-resize-min-width-default").trim()||"",resolved=resolveCssTokenLength(themed,{host:this});return resolved===void 0?DEFAULT_RESIZE_MIN_WIDTH_PX:Math.max(0,resolved)}maximumResizeWidth(column,minWidth){const explicit=this.parsePixelLength(column.maxWidth);return explicit===void 0?Number.POSITIVE_INFINITY:Math.max(minWidth,explicit)}currentResizeWidth(column,handle){const resized=this.resizedColumnWidths.get(column.key);if(resized!==void 0)return resized;const explicit=this.parsePixelLength(column.width);if(explicit!==void 0)return explicit;const rendered=handle?.closest("th[data-col-key]")?.getBoundingClientRect().width;return rendered&&rendered>0?rendered:this.minimumResizeWidth(column)}resizeValueText(width){return this.localize("resizeValuePixels",void 0,{value:getNumberFormat(this.effectiveLocale).format(Math.round(width))})}resizeColumnTo(column,requestedWidth){const minWidth=this.minimumResizeWidth(column),maxWidth=this.maximumResizeWidth(column,minWidth),width=columnResizeWidth(requestedWidth,minWidth,maxWidth);this.resizedColumnWidths.get(column.key)!==width&&requestThenCommit({requestDetail:Object.freeze({columnKey:column.key,width}),emitRequest:(detail,init)=>this.emit("lr-column-resize-request",detail,init),guard:this.resizeWriteGuard,commit:()=>{this.resizedColumnWidths=new Map(this.resizedColumnWidths).set(column.key,width),this.emit("lr-column-resize",Object.freeze({columnKey:column.key,width})),markVetoGuardWrite(this.resizeWriteGuard)}})}renderedColumnWidth(column){const resized=this.resizedColumnWidths.get(column.key);return resized===void 0?sanitizeCssLength(column.width,"height"):`${resized}px`}renderResizeHandle(column){if(!column.resizable)return nothing;const minWidth=this.minimumResizeWidth(column),maxWidth=this.maximumResizeWidth(column,minWidth),width=this.currentResizeWidth(column),aria=columnResizeAriaValues(width,minWidth,maxWidth);return html`<span
       part="resize-handle"
       data-col-key=${column.key}
       role="separator"
@@ -237,7 +237,9 @@ import{__decorate}from"tslib";import{relayNativeEvent}from"../../../internal/nat
             >${this.loadingMore?this.loadingMoreText():this.localizedOverride("loadMore",this.moreLabel)}</button>`:nothing}
         ${hasPagination?html`<lr-pagination
               part="pagination"
-              format="compact"
+              exportparts="summary:pagination-summary, controls:pagination-controls, pages:pagination-pages, page:pagination-page, page-current:pagination-page-current, page-field:pagination-page-field, page-input:pagination-page-input, page-count:pagination-page-count, button:pagination-button"
+              .format=${this.paginationFormat}
+              .withSummary=${this.paginationWithSummary}
               .page=${this.page}
               .pageSize=${this.normalizedPageSize}
               .total=${this.serverUnknownTotal?-1:this.matchingTotalItems}
@@ -248,4 +250,4 @@ import{__decorate}from"tslib";import{relayNativeEvent}from"../../../internal/nat
               @lr-page-change=${this.onPaginationChange}
             ></lr-pagination>`:nothing}
       </div>
-    `}}__decorate([property({attribute:!1})],LyraTable.prototype,"columns",null),__decorate([property({attribute:!1})],LyraTable.prototype,"rows",null),__decorate([property({reflect:!0,converter:TABLE_LAYOUT})],LyraTable.prototype,"layout",null),__decorate([property({attribute:"sort-key"})],LyraTable.prototype,"sortKey",void 0),__decorate([property({attribute:"sort-dir"})],LyraTable.prototype,"sortDir",void 0),__decorate([property({attribute:"sort-indicators",converter:literalSetConverter(["active","all"],"active")})],LyraTable.prototype,"sortIndicators",void 0),__decorate([property({reflect:!0,attribute:"sort-mode"})],LyraTable.prototype,"sortMode",void 0),__decorate([property({attribute:"default-sort-dir"})],LyraTable.prototype,"defaultSortDir",void 0),__decorate([property({attribute:"aria-label"})],LyraTable.prototype,"hostAccessibleLabel",void 0),__decorate([property()],LyraTable.prototype,"caption",void 0),__decorate([property({attribute:!1})],LyraTable.prototype,"rowKey",void 0),__decorate([property({reflect:!0,attribute:"selection-mode"})],LyraTable.prototype,"selectionMode",void 0),__decorate([property({reflect:!0,attribute:"expansion-mode"})],LyraTable.prototype,"expansionMode",void 0),__decorate([property({reflect:!0,attribute:"scroll-mode"})],LyraTable.prototype,"scrollMode",void 0),__decorate([property({attribute:!1})],LyraTable.prototype,"selectedRowKeys",null),__decorate([property({type:Boolean,reflect:!0})],LyraTable.prototype,"filterable",void 0),__decorate([property({attribute:"filter-text"})],LyraTable.prototype,"filterText",void 0),__decorate([property({attribute:!1})],LyraTable.prototype,"filter",void 0),__decorate([property({attribute:"filter-label"})],LyraTable.prototype,"filterLabel",void 0),__decorate([property({attribute:"filter-placeholder"})],LyraTable.prototype,"filterPlaceholder",void 0),__decorate([property({converter:spellcheckConverter})],LyraTable.prototype,"spellcheck",void 0),__decorate([property()],LyraTable.prototype,"autocapitalize",void 0),__decorate([property({attribute:"autocorrect"})],LyraTable.prototype,"autoCorrect",void 0),__decorate([property({type:Boolean,reflect:!0})],LyraTable.prototype,"loading",void 0),__decorate([property({attribute:"loading-label"})],LyraTable.prototype,"loadingLabel",void 0),__decorate([property({reflect:!0,attribute:"loading-appearance"})],LyraTable.prototype,"loadingAppearance",void 0),__decorate([property({type:Number,attribute:"skeleton-rows"})],LyraTable.prototype,"skeletonRows",void 0),__decorate([property({attribute:!1})],LyraTable.prototype,"groupBy",void 0),__decorate([property({attribute:!1})],LyraTable.prototype,"groupLabel",void 0),__decorate([property({type:Number,attribute:"page-size"})],LyraTable.prototype,"pageSize",void 0),__decorate([property({type:Number,reflect:!0})],LyraTable.prototype,"page",void 0),__decorate([property({type:Number,attribute:"total-items"})],LyraTable.prototype,"totalItems",void 0),__decorate([property({reflect:!0,attribute:"pagination-mode"})],LyraTable.prototype,"paginationMode",void 0),__decorate([property({type:Boolean,attribute:"unknown-total",reflect:!0})],LyraTable.prototype,"unknownTotal",void 0),__decorate([property({type:Boolean,attribute:"has-next",reflect:!0,converter:trueDefaultBooleanConverter})],LyraTable.prototype,"hasNext",void 0),__decorate([property({attribute:!1})],LyraTable.prototype,"expandedContent",void 0),__decorate([property({attribute:!1})],LyraTable.prototype,"canExpand",void 0),__decorate([property({attribute:!1})],LyraTable.prototype,"rowExpandLabel",void 0),__decorate([property({attribute:!1})],LyraTable.prototype,"expandedRowKeys",null),__decorate([property({attribute:!1})],LyraTable.prototype,"heatTintScale",void 0),__decorate([property({attribute:!1})],LyraTable.prototype,"rowTotal",void 0),__decorate([property({attribute:!1})],LyraTable.prototype,"grandTotal",void 0),__decorate([property({type:Boolean,attribute:"has-more",reflect:!0})],LyraTable.prototype,"hasMore",void 0),__decorate([property({type:Boolean,attribute:"loading-more",reflect:!0})],LyraTable.prototype,"loadingMore",void 0),__decorate([property({attribute:"loading-more-label"})],LyraTable.prototype,"loadingMoreLabel",void 0),__decorate([property({attribute:"more-label"})],LyraTable.prototype,"moreLabel",void 0),__decorate([property({type:Boolean,reflect:!0})],LyraTable.prototype,"error",void 0),__decorate([property({attribute:"error-heading"})],LyraTable.prototype,"errorHeading",void 0),__decorate([property({attribute:"error-description"})],LyraTable.prototype,"errorDescription",void 0),__decorate([property({type:Boolean,reflect:!0})],LyraTable.prototype,"announce",void 0),__decorate([property({attribute:"empty-heading"})],LyraTable.prototype,"emptyHeading",void 0),__decorate([property({attribute:"empty-description"})],LyraTable.prototype,"emptyDescription",void 0),__decorate([property({attribute:"empty-size",converter:optionalSizeConverter})],LyraTable.prototype,"emptySize",null),__decorate([property({attribute:"empty-columns-heading"})],LyraTable.prototype,"emptyColumnsHeading",void 0),__decorate([property({attribute:"empty-columns-description"})],LyraTable.prototype,"emptyColumnsDescription",void 0),__decorate([property({attribute:"reveal-columns-label"})],LyraTable.prototype,"revealColumnsLabel",void 0),__decorate([property({attribute:"columns-hide-label"})],LyraTable.prototype,"columnsHideLabel",void 0),__decorate([property({type:Boolean,attribute:"has-hidden-priority-columns",reflect:!0})],LyraTable.prototype,"hasHiddenPriorityColumns",void 0),__decorate([state()],LyraTable.prototype,"priorityToggleAvailable",void 0),__decorate([property({type:Boolean,attribute:"priority-columns-visible",reflect:!0,noAccessor:!0})],LyraTable.prototype,"priorityColumnsVisible",void 0),__decorate([property({attribute:"storage-key"})],LyraTable.prototype,"storageKey",void 0),__decorate([state()],LyraTable.prototype,"activeColKey",void 0),__decorate([state()],LyraTable.prototype,"activeRowKey",void 0),__decorate([state()],LyraTable.prototype,"editingCell",void 0),__decorate([state()],LyraTable.prototype,"resizedColumnWidths",null);export{LyraTable};
+    `}}__decorate([property({attribute:!1})],LyraTable.prototype,"columns",null),__decorate([property({attribute:!1})],LyraTable.prototype,"rows",null),__decorate([property({reflect:!0,converter:TABLE_LAYOUT})],LyraTable.prototype,"layout",null),__decorate([property({attribute:"sort-key"})],LyraTable.prototype,"sortKey",void 0),__decorate([property({attribute:"sort-dir"})],LyraTable.prototype,"sortDir",void 0),__decorate([property({attribute:"sort-indicators",converter:literalSetConverter(["active","all"],"active")})],LyraTable.prototype,"sortIndicators",void 0),__decorate([property({reflect:!0,attribute:"sort-mode"})],LyraTable.prototype,"sortMode",void 0),__decorate([property({attribute:"default-sort-dir"})],LyraTable.prototype,"defaultSortDir",void 0),__decorate([property({attribute:"aria-label"})],LyraTable.prototype,"hostAccessibleLabel",void 0),__decorate([property()],LyraTable.prototype,"caption",void 0),__decorate([property({attribute:!1})],LyraTable.prototype,"rowKey",void 0),__decorate([property({reflect:!0,attribute:"selection-mode"})],LyraTable.prototype,"selectionMode",void 0),__decorate([property({reflect:!0,attribute:"expansion-mode"})],LyraTable.prototype,"expansionMode",void 0),__decorate([property({reflect:!0,attribute:"scroll-mode"})],LyraTable.prototype,"scrollMode",void 0),__decorate([property({attribute:!1})],LyraTable.prototype,"selectedRowKeys",null),__decorate([property({type:Boolean,reflect:!0})],LyraTable.prototype,"filterable",void 0),__decorate([property({attribute:"filter-text"})],LyraTable.prototype,"filterText",void 0),__decorate([property({attribute:!1})],LyraTable.prototype,"filter",void 0),__decorate([property({attribute:"filter-label"})],LyraTable.prototype,"filterLabel",void 0),__decorate([property({attribute:"filter-placeholder"})],LyraTable.prototype,"filterPlaceholder",void 0),__decorate([property({converter:spellcheckConverter})],LyraTable.prototype,"spellcheck",void 0),__decorate([property()],LyraTable.prototype,"autocapitalize",void 0),__decorate([property({attribute:"autocorrect"})],LyraTable.prototype,"autoCorrect",void 0),__decorate([property({type:Boolean,reflect:!0})],LyraTable.prototype,"loading",void 0),__decorate([property({attribute:"loading-label"})],LyraTable.prototype,"loadingLabel",void 0),__decorate([property({reflect:!0,attribute:"loading-appearance"})],LyraTable.prototype,"loadingAppearance",void 0),__decorate([property({type:Number,attribute:"skeleton-rows"})],LyraTable.prototype,"skeletonRows",void 0),__decorate([property({attribute:!1})],LyraTable.prototype,"groupBy",void 0),__decorate([property({attribute:!1})],LyraTable.prototype,"groupLabel",void 0),__decorate([property({type:Number,attribute:"page-size"})],LyraTable.prototype,"pageSize",void 0),__decorate([property({type:Number,reflect:!0})],LyraTable.prototype,"page",void 0),__decorate([property({type:Number,attribute:"total-items"})],LyraTable.prototype,"totalItems",void 0),__decorate([property({reflect:!0,attribute:"pagination-mode"})],LyraTable.prototype,"paginationMode",void 0),__decorate([property({type:Boolean,attribute:"unknown-total",reflect:!0})],LyraTable.prototype,"unknownTotal",void 0),__decorate([property({type:Boolean,attribute:"pagination-with-summary",reflect:!0})],LyraTable.prototype,"paginationWithSummary",void 0),__decorate([property({attribute:"pagination-format",converter:TABLE_PAGINATION_FORMAT})],LyraTable.prototype,"paginationFormat",void 0),__decorate([property({type:Boolean,attribute:"has-next",reflect:!0,converter:trueDefaultBooleanConverter})],LyraTable.prototype,"hasNext",void 0),__decorate([property({attribute:!1})],LyraTable.prototype,"expandedContent",void 0),__decorate([property({attribute:!1})],LyraTable.prototype,"canExpand",void 0),__decorate([property({attribute:!1})],LyraTable.prototype,"rowExpandLabel",void 0),__decorate([property({attribute:!1})],LyraTable.prototype,"expandedRowKeys",null),__decorate([property({attribute:!1})],LyraTable.prototype,"heatTintScale",void 0),__decorate([property({attribute:!1})],LyraTable.prototype,"rowTotal",void 0),__decorate([property({attribute:!1})],LyraTable.prototype,"grandTotal",void 0),__decorate([property({type:Boolean,attribute:"has-more",reflect:!0})],LyraTable.prototype,"hasMore",void 0),__decorate([property({type:Boolean,attribute:"loading-more",reflect:!0})],LyraTable.prototype,"loadingMore",void 0),__decorate([property({attribute:"loading-more-label"})],LyraTable.prototype,"loadingMoreLabel",void 0),__decorate([property({attribute:"more-label"})],LyraTable.prototype,"moreLabel",void 0),__decorate([property({type:Boolean,reflect:!0})],LyraTable.prototype,"error",void 0),__decorate([property({attribute:"error-heading"})],LyraTable.prototype,"errorHeading",void 0),__decorate([property({attribute:"error-description"})],LyraTable.prototype,"errorDescription",void 0),__decorate([property({type:Boolean,reflect:!0})],LyraTable.prototype,"announce",void 0),__decorate([property({attribute:"empty-heading"})],LyraTable.prototype,"emptyHeading",void 0),__decorate([property({attribute:"empty-description"})],LyraTable.prototype,"emptyDescription",void 0),__decorate([property({attribute:"empty-size",converter:optionalSizeConverter})],LyraTable.prototype,"emptySize",null),__decorate([property({attribute:"empty-columns-heading"})],LyraTable.prototype,"emptyColumnsHeading",void 0),__decorate([property({attribute:"empty-columns-description"})],LyraTable.prototype,"emptyColumnsDescription",void 0),__decorate([property({attribute:"reveal-columns-label"})],LyraTable.prototype,"revealColumnsLabel",void 0),__decorate([property({attribute:"columns-hide-label"})],LyraTable.prototype,"columnsHideLabel",void 0),__decorate([property({type:Boolean,attribute:"has-hidden-priority-columns",reflect:!0})],LyraTable.prototype,"hasHiddenPriorityColumns",void 0),__decorate([state()],LyraTable.prototype,"priorityToggleAvailable",void 0),__decorate([property({type:Boolean,attribute:"priority-columns-visible",reflect:!0,noAccessor:!0})],LyraTable.prototype,"priorityColumnsVisible",void 0),__decorate([property({attribute:"storage-key"})],LyraTable.prototype,"storageKey",void 0),__decorate([state()],LyraTable.prototype,"activeColKey",void 0),__decorate([state()],LyraTable.prototype,"activeRowKey",void 0),__decorate([state()],LyraTable.prototype,"editingCell",void 0),__decorate([state()],LyraTable.prototype,"resizedColumnWidths",null);export{LyraTable};

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

@@ -1 +1 @@
-import{iconHitTarget,focusRing}from"../../../internal/interactive-control.styles.js";import{css}from"lit";import{dataStateRetryStyles,dataStateSurfaceStyles}from"../../../internal/data-state-renderer.styles.js";const styles=css` :host { display: block; inline-size: 100%; --_lr-table-heat-tint-lo-default: var(--lr-color-brand-quiet); --_lr-table-heat-tint-hi-default: var(--lr-color-brand); --_lr-table-resize-min-width-default: var(--lr-size-3rem); --_lr-table-resize-handle-opacity-default: 0.12; } [part='base'] { overflow: auto; max-block-size: var(--lr-table-max-height, none); border: var(--lr-border-width-thin) solid var(--lr-color-border-subtle); border-radius: var(--lr-table-radius, var(--lr-radius-container)); background: var(--lr-table-surface, var(--lr-color-surface)); scrollbar-width: var(--lr-theme-scrollbar-width, auto); scrollbar-gutter: var(--lr-theme-scrollbar-gutter, auto); } [part='row-limit'] { padding: var(--lr-space-s); color: var(--lr-color-text-quiet); font-size: var(--lr-font-size-sm); } :host([scroll-mode='page']) [part='base'], :host([scroll-mode='auto']) [part='base']:not([data-scroll-overflow]) { overflow: visible; max-block-size: none; } :host([scroll-mode='page']) [part='base']:not([data-scroll-overflow]), :host([scroll-mode='auto']) [part='base']:not([data-scroll-overflow]) { overflow: clip; } [part='filter-label'] { display: flex; align-items: center; gap: var(--lr-space-s); padding: var(--lr-space-s); border-block-end: var(--lr-border-width-thin) solid var(--lr-color-border-subtle); color: var(--lr-color-text-quiet); font-size: var(--lr-font-size-md-sm); } [part='filter'] { min-inline-size: 0; flex: 1; padding: var(--lr-space-xs) var(--lr-space-s); border: var(--lr-border-width-thin) solid var(--lr-color-border); border-radius: var(--lr-radius-xs); background: var(--lr-color-surface); color: var(--lr-color-text); font: inherit; } [part='filter']:focus-visible { ${focusRing} } :where([part='filter']):hover { background: var(--lr-color-brand-quiet); } :where([part='filter']):active { background: color-mix( in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active) ); } [part='filter']::placeholder { color: var(--lr-color-text-quiet); opacity: 1; } [part='filter'][type='search']::-webkit-search-cancel-button, [part='filter'][type='search']::-webkit-search-decoration { appearance: none; } [part='filter-clear'] { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; ${iconHitTarget} border: 0; border-radius: var(--lr-radius-xs); background: transparent; cursor: pointer; color: var(--lr-color-text-quiet); padding: var(--lr-space-xs); transition: background-color var(--lr-transition-fast), color var(--lr-transition-fast); } [part='filter-clear']:hover { color: var(--lr-color-text); } [part='filter-clear']:active { color: var(--lr-color-text); background: color-mix( in oklab, var(--lr-color-surface), var(--lr-color-mix-partner) var(--lr-color-mix-active) ); } [part='filter-clear']:focus-visible { outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); outline-offset: calc(-1 * var(--lr-focus-ring-width)); } [part='loading']:not(.sr-only) { display: grid; place-items: center; min-block-size: var(--lr-size-8rem); padding: var(--lr-space-l); } [part='pagination'] { display: block; border-block-start: var(--lr-border-width-thin) solid var(--lr-color-border-subtle); } [part='base'][data-hide-priority-low]:not([data-force-visible]) [data-priority='low'] { display: none; } [part='base'][data-hide-priority-medium]:not([data-force-visible]) [data-priority='medium'] { display: none; } [part='table'] { inline-size: 100%; border-collapse: collapse; font: inherit; font-size: var(--lr-table-font-size, inherit); } [part='table'][data-layout='fixed'] { table-layout: fixed; } [part='row'], [part='head'] > tr, [part='footer-row'] { block-size: max( var(--lr-size-24px), var(--lr-table-row-height, calc(var(--lr-table-row-min-height) * var(--_lr-density-control, 1))), var(--_lr-density-target-min, 0px) ); } [part='header-cell'] { position: sticky; inset-block-start: 0; background: var(--_lr-table-header-bg, var(--lr-table-surface, var(--lr-color-surface))); text-align: start; font-weight: var(--lr-font-weight-semibold); padding: var(--lr-table-cell-padding, var(--lr-space-s)); border-block-end: var(--lr-border-width-thin) solid var(--lr-color-border-subtle); cursor: default; white-space: nowrap; } [part='header-cell'][data-resizable] { padding-inline-end: calc(var(--lr-space-s) + var(--lr-size-0-5rem)); } [part='resize-handle'] { position: absolute; inset-block: 0; inset-inline-end: 0; inline-size: var(--lr-size-0-5rem); ${iconHitTarget} cursor: col-resize; touch-action: none; } [part='resize-handle']:hover, [part='resize-handle']:focus-visible { background: var(--lr-table-resize-handle-hover-bg, var(--lr-color-brand)); opacity: var( --lr-table-resize-handle-hover-opacity, var(--lr-table-resize-handle-opacity, var(--_lr-table-resize-handle-opacity-default)) ); } [part='resize-handle']:active, [part='resize-handle'][data-resizing] { background: var( --lr-table-resize-handle-active-bg, var(--lr-table-resize-handle-hover-bg, var(--lr-color-brand)) ); opacity: var( --lr-table-resize-handle-active-opacity, calc( var( --lr-table-resize-handle-hover-opacity, var(--lr-table-resize-handle-opacity, var(--_lr-table-resize-handle-opacity-default)) ) * 2 ) ); } [part='resize-handle']:focus-visible { outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); outline-offset: calc(-1 * max(var(--lr-focus-ring-width), calc(var(--lr-focus-ring-width) + var(--lr-focus-ring-offset)))); } :where([part='header-cell'][aria-sort]:not([aria-sort='none'])), :where([part='header-cell'][data-sortable]) { cursor: pointer; } [part='header-cell']:where([aria-sort]:not([aria-sort='none'])) { --_lr-table-header-bg: var(--lr-table-header-sorted-bg, var(--lr-table-surface, var(--lr-color-surface))); background: var(--_lr-table-header-bg); color: var(--lr-table-header-sorted-color, inherit); } [part='header-cell'][data-sortable]:hover { background: var(--lr-color-brand-quiet); } [part='header-cell'][data-sortable]:active { background: color-mix( in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active) ); } [part='header-cell']:focus-visible { ${focusRing} } [part='header-cell'][data-align='end'] { text-align: end; } [part~='sort-icon'] { display: inline-block; margin-inline-start: var(--lr-space-xs); vertical-align: middle; transition: transform var(--lr-transition-fast); } [part~='sort-icon-inactive'] { color: var(--lr-color-text-quiet); } @media (forced-colors: active) { [part~='sort-icon-inactive'] { color: CanvasText !important; } } [part~='sort-icon'] svg { display: block; } [part~='sort-icon'][data-dir='asc'] { transform: rotate(-90deg); } [part~='sort-icon'][data-dir='desc'] { transform: rotate(90deg); } @media (prefers-reduced-motion: reduce) { [part~='sort-icon'] { transition: none !important; } } [part='row'][data-stripe] { background: var(--lr-table-row-stripe-bg, transparent); --_lr-table-row-bg: var(--lr-table-row-stripe-bg, var(--lr-table-surface, var(--lr-color-surface))); } [part='row'][aria-selected='true'] { --_lr-table-row-bg: var(--lr-table-row-selected-bg, var(--lr-color-brand-quiet)); background: var(--_lr-table-row-bg); } [part='row']:hover { --_lr-table-row-bg: color-mix(in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-hover)); background: var(--_lr-table-row-bg); } [part='row']:active { --_lr-table-row-bg: color-mix( in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active) ); background: var(--_lr-table-row-bg); } @media (forced-colors: active) { :where([part~='row'][aria-selected='true']) { outline: var(--lr-border-width-medium) solid Highlight; outline-offset: calc(-1 * var(--lr-border-width-medium)); } :where([part~='row']:hover:not([aria-selected='true'])) { outline: var(--lr-border-width-thin) dashed Highlight; outline-offset: calc(-1 * var(--lr-border-width-thin)); } } [part='group-cell'] { padding: var(--lr-table-cell-padding-compact, var(--lr-space-xs) var(--lr-space-s)); border-block-end: var(--lr-border-width-thin) solid var(--lr-color-border-subtle); background: var(--lr-color-surface-raised); color: var(--lr-color-text-quiet); font-weight: var(--lr-font-weight-semibold); text-align: start; } [part='row']:focus-visible { ${focusRing} } [part='cell'] { padding: var(--lr-table-cell-padding, var(--lr-space-s)); border-block-end: var(--lr-border-width-thin) solid var(--lr-color-border-subtle); color: var(--lr-table-cell-color, inherit); } [part='cell'][data-editable] { transition: var(--lr-transition-interactive); } :where([part='cell'][data-editable]):hover { cursor: pointer; background: var(--lr-color-brand-quiet); } :where([part='cell'][data-editable]):active { background: color-mix( in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active) ); } [part='cell'][data-editable]:focus-visible { ${focusRing} } [part='cell'] a:where(:any-link) { color: var(--lr-table-cell-link-color, var(--lr-color-brand)); } [part='cell'] a:where(:any-link):hover, [part='cell'] a:where(:any-link):focus-visible, [part='cell'] a:where(:any-link):active { color: var( --lr-table-cell-link-hover-color, var(--lr-table-cell-link-color, var(--lr-color-brand)) ); text-decoration-thickness: var(--lr-border-width-medium); } [part='cell-editor'] { box-sizing: border-box; inline-size: 100%; min-inline-size: 0; padding: var(--lr-space-xs) var(--lr-space-s); border: var(--lr-border-width-thin) solid var(--lr-color-brand); border-radius: var(--lr-radius-xs); background: var(--lr-color-surface); color: var(--lr-color-text); font: inherit; } [part='cell-editor']:focus-visible { ${focusRing} } :where([part='cell-editor']):hover { background: var(--lr-color-brand-quiet); } :where([part='cell-editor']):active { background: color-mix( in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active) ); } [part='cell-editor'][type='number'] { appearance: textfield; } [part='cell-editor'][type='number']::-webkit-inner-spin-button, [part='cell-editor'][type='number']::-webkit-outer-spin-button { appearance: none; margin: 0; } select[part='cell-editor'] { appearance: none; padding-inline-end: calc(var(--lr-space-s) + var(--lr-size-0-75rem)); cursor: pointer; } select[part='cell-editor'] option { background: var(--lr-color-surface); color: var(--lr-color-text); } [part='cell']:has(> select[part='cell-editor']) { position: relative; } [part='cell']:has(> select[part='cell-editor'])::after { content: ''; position: absolute; inset-inline-end: var(--lr-space-s); inset-block-start: 50%; inline-size: var(--lr-size-0-75rem); block-size: var(--lr-size-0-75rem); color: var(--lr-color-text-quiet); background: currentColor; mask: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpolyline points="9 6 15 12 9 18"%3E%3C/polyline%3E%3C/svg%3E') center / contain no-repeat; transform: translateY(-50%) rotate(90deg); pointer-events: none; } @media (forced-colors: active) { [part='cell']:has(> select[part='cell-editor'])::after { forced-color-adjust: none; color: ButtonText; } } [part='cell'][data-align='end'] { text-align: end; } [part='row-total-cell'] { padding: var(--lr-table-cell-padding, var(--lr-space-s)); border-block-end: var(--lr-border-width-thin) solid var(--lr-color-border-subtle); font-weight: var(--lr-font-weight-semibold); text-align: end; } [part='cell'][data-heat] { background: color-mix( in srgb, var(--lr-table-heat-tint-hi, var(--_lr-table-heat-tint-hi-default)) var(--lr-table-heat-t), var(--lr-table-heat-tint-lo, var(--_lr-table-heat-tint-lo-default)) ); } [part='expand-toggle-cell'] { padding: var(--lr-space-s); border-block-end: var(--lr-border-width-thin) solid var(--lr-color-border-subtle); text-align: center; } [part='row-expand-toggle'] { display: inline-flex; align-items: center; justify-content: center; font: inherit; border: none; background: none; padding: var(--lr-space-xs); cursor: pointer; color: inherit; ${iconHitTarget} } [part='row-expand-toggle']:hover { background: var(--lr-color-brand-quiet); } [part='row-expand-toggle']:active { background: color-mix( in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active) ); } [part='row-expand-toggle']:focus-visible { ${focusRing} } [part='row-expand-icon'] { display: inline-block; transition: transform var(--lr-transition-fast); } [part='row-expand-icon'] svg { display: block; } [part='row-expand-toggle'][aria-expanded='true'] [part='row-expand-icon'] { transform: rotate(90deg); } :host(:dir(rtl)) [part='row-expand-icon'] { transform: rotate(180deg); } :host(:dir(rtl)) [part='row-expand-toggle'][aria-expanded='true'] [part='row-expand-icon'] { transform: rotate(90deg); } @media (prefers-reduced-motion: reduce) { [part='row-expand-icon'] { transition: none !important; } } [part='expanded-row'] [part='expanded-cell'] { padding: var(--lr-space-s); border-block-end: var(--lr-border-width-thin) solid var(--lr-color-border-subtle); background: var(--lr-table-surface, var(--lr-color-surface)); } [part='header-cell'][data-sticky], [part='cell'][data-sticky] { position: sticky; inset-inline-start: var(--lr-table-sticky-offset, 0); z-index: var(--lr-layer-content); box-shadow: var(--lr-size-1px) 0 0 0 var(--lr-color-border-subtle); } [part='cell'][data-sticky] { background: var(--_lr-table-row-bg, var(--lr-table-surface, var(--lr-color-surface))); } [part='header-cell'][data-sticky] { background: var(--_lr-table-header-bg, var(--lr-table-surface, var(--lr-color-surface))); } [part='header-cell'][data-sticky='end'], [part='cell'][data-sticky='end'] { inset-inline-start: auto; inset-inline-end: var(--lr-table-sticky-offset, 0); box-shadow: calc(-1 * var(--lr-size-1px)) 0 0 0 var(--lr-color-border-subtle); } :host(:dir(rtl)) [part='header-cell'][data-sticky], :host(:dir(rtl)) [part='cell'][data-sticky] { box-shadow: calc(-1 * var(--lr-size-1px)) 0 0 0 var(--lr-color-border-subtle); } :host(:dir(rtl)) [part='header-cell'][data-sticky='end'], :host(:dir(rtl)) [part='cell'][data-sticky='end'] { box-shadow: var(--lr-size-1px) 0 0 0 var(--lr-color-border-subtle); } [part='foot'] { position: sticky; inset-block-end: 0; background: var(--lr-table-surface, var(--lr-color-surface)); } [part='footer-cell'] { padding: var(--lr-table-cell-padding-compact, var(--lr-space-xs) var(--lr-space-s)); border-block-start: var(--lr-border-width-thin) solid var(--lr-color-border-subtle); font-weight: var(--lr-font-weight-semibold); text-align: start; } [part='footer-cell'][data-align='end'] { text-align: end; } [part='more-button'], [part='reveal-columns-button'] { display: block; inline-size: 100%; padding: var(--lr-space-s); border: none; background: none; color: var(--lr-color-brand); font: inherit; cursor: pointer; border-block-start: var(--lr-border-width-thin) solid var(--lr-color-border); } [part='more-button']:hover:where(:not([aria-disabled='true'])), [part='reveal-columns-button']:hover { background: var(--lr-color-brand-quiet); } [part='more-button']:active:where(:not([aria-disabled='true'])), [part='reveal-columns-button']:active { background: color-mix( in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active) ); } [part='more-button']:focus-visible, [part='reveal-columns-button']:focus-visible { ${focusRing} } [part='more-button']:where([aria-disabled='true']) { cursor: progress; } ${dataStateSurfaceStyles("error")} ${dataStateRetryStyles} `;export{styles};
+import{iconHitTarget,focusRing}from"../../../internal/interactive-control.styles.js";import{css}from"lit";import{raiseWhileOverlayOpen}from"../../../internal/open-overlay-raise.styles.js";import{dataStateRetryStyles,dataStateSurfaceStyles}from"../../../internal/data-state-renderer.styles.js";const styles=css` :host { display: block; inline-size: 100%; --_lr-table-heat-tint-lo-default: var(--lr-color-brand-quiet); --_lr-table-heat-tint-hi-default: var(--lr-color-brand); --_lr-table-resize-min-width-default: var(--lr-size-3rem); --_lr-table-resize-handle-opacity-default: 0.12; } [part='base'] { overflow: auto; max-block-size: var(--lr-table-max-height, none); border: var(--lr-border-width-thin) solid var(--lr-color-border-subtle); border-radius: var(--lr-table-radius, var(--lr-radius-container)); background: var(--lr-table-surface, var(--lr-color-surface)); scrollbar-width: var(--lr-theme-scrollbar-width, auto); scrollbar-gutter: var(--lr-theme-scrollbar-gutter, auto); } [part='row-limit'] { padding: var(--lr-space-s); color: var(--lr-color-text-quiet); font-size: var(--lr-font-size-sm); } :host([scroll-mode='page']) [part='base'], :host([scroll-mode='auto']) [part='base']:not([data-scroll-overflow]) { overflow: visible; max-block-size: none; } :host([scroll-mode='page']) [part='base']:not([data-scroll-overflow]), :host([scroll-mode='auto']) [part='base']:not([data-scroll-overflow]) { overflow: clip; } [part='filter-label'] { display: flex; align-items: center; gap: var(--lr-space-s); padding: var(--lr-space-s); border-block-end: var(--lr-border-width-thin) solid var(--lr-color-border-subtle); color: var(--lr-color-text-quiet); font-size: var(--lr-font-size-md-sm); } [part='filter'] { min-inline-size: 0; flex: 1; padding: var(--lr-space-xs) var(--lr-space-s); border: var(--lr-border-width-thin) solid var(--lr-color-border); border-radius: var(--lr-radius-xs); background: var(--lr-color-surface); color: var(--lr-color-text); font: inherit; } [part='filter']:focus-visible { ${focusRing} } :where([part='filter']):hover { background: var(--lr-color-brand-quiet); } :where([part='filter']):active { background: color-mix( in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active) ); } [part='filter']::placeholder { color: var(--lr-color-text-quiet); opacity: 1; } [part='filter'][type='search']::-webkit-search-cancel-button, [part='filter'][type='search']::-webkit-search-decoration { appearance: none; } [part='filter-clear'] { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; ${iconHitTarget} border: 0; border-radius: var(--lr-radius-xs); background: transparent; cursor: pointer; color: var(--lr-color-text-quiet); padding: var(--lr-space-xs); transition: background-color var(--lr-transition-fast), color var(--lr-transition-fast); } [part='filter-clear']:hover { color: var(--lr-color-text); } [part='filter-clear']:active { color: var(--lr-color-text); background: color-mix( in oklab, var(--lr-color-surface), var(--lr-color-mix-partner) var(--lr-color-mix-active) ); } [part='filter-clear']:focus-visible { outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); outline-offset: calc(-1 * var(--lr-focus-ring-width)); } [part='loading']:not(.sr-only) { display: grid; place-items: center; min-block-size: var(--lr-size-8rem); padding: var(--lr-space-l); } [part='pagination'] { display: block; border-block-start: var(--lr-border-width-thin) solid var(--lr-color-border-subtle); } [part='base'][data-hide-priority-low]:not([data-force-visible]) [data-priority='low'] { display: none; } [part='base'][data-hide-priority-medium]:not([data-force-visible]) [data-priority='medium'] { display: none; } [part='table'] { inline-size: 100%; border-collapse: collapse; font: inherit; font-size: var(--lr-table-font-size, inherit); } [part='table'][data-layout='fixed'] { table-layout: fixed; } [part='row'], [part='head'] > tr, [part='footer-row'] { block-size: max( var(--lr-size-24px), var(--lr-table-row-height, calc(var(--lr-table-row-min-height) * var(--_lr-density-control, 1))), var(--_lr-density-target-min, 0px) ); } [part='header-cell'] { position: sticky; inset-block-start: 0; background: var(--_lr-table-header-bg, var(--lr-table-surface, var(--lr-color-surface))); text-align: start; font-weight: var(--lr-font-weight-semibold); padding: var(--lr-table-cell-padding, var(--lr-space-s)); border-block-end: var(--lr-border-width-thin) solid var(--lr-color-border-subtle); cursor: default; white-space: nowrap; } [part='header-cell'][data-resizable] { padding-inline-end: calc(var(--lr-space-s) + var(--lr-size-0-5rem)); } [part='resize-handle'] { position: absolute; inset-block: 0; inset-inline-end: 0; inline-size: var(--lr-size-0-5rem); ${iconHitTarget} cursor: col-resize; touch-action: none; } [part='resize-handle']:hover, [part='resize-handle']:focus-visible { background: var(--lr-table-resize-handle-hover-bg, var(--lr-color-brand)); opacity: var( --lr-table-resize-handle-hover-opacity, var(--lr-table-resize-handle-opacity, var(--_lr-table-resize-handle-opacity-default)) ); } [part='resize-handle']:active, [part='resize-handle'][data-resizing] { background: var( --lr-table-resize-handle-active-bg, var(--lr-table-resize-handle-hover-bg, var(--lr-color-brand)) ); opacity: var( --lr-table-resize-handle-active-opacity, calc( var( --lr-table-resize-handle-hover-opacity, var(--lr-table-resize-handle-opacity, var(--_lr-table-resize-handle-opacity-default)) ) * 2 ) ); } [part='resize-handle']:focus-visible { outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); outline-offset: calc(-1 * max(var(--lr-focus-ring-width), calc(var(--lr-focus-ring-width) + var(--lr-focus-ring-offset)))); } :where([part='header-cell'][aria-sort]:not([aria-sort='none'])), :where([part='header-cell'][data-sortable]) { cursor: pointer; } [part='header-cell']:where([aria-sort]:not([aria-sort='none'])) { --_lr-table-header-bg: var(--lr-table-header-sorted-bg, var(--lr-table-surface, var(--lr-color-surface))); background: var(--_lr-table-header-bg); color: var(--lr-table-header-sorted-color, inherit); } [part='header-cell'][data-sortable]:hover { background: var(--lr-color-brand-quiet); } [part='header-cell'][data-sortable]:active { background: color-mix( in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active) ); } [part='header-cell']:focus-visible { ${focusRing} } [part='header-cell'][data-align='end'] { text-align: end; } [part~='sort-icon'] { display: inline-block; margin-inline-start: var(--lr-space-xs); vertical-align: middle; transition: transform var(--lr-transition-fast); } [part~='sort-icon-inactive'] { color: var(--lr-color-text-quiet); } @media (forced-colors: active) { [part~='sort-icon-inactive'] { color: CanvasText !important; } } [part~='sort-icon'] svg { display: block; } [part~='sort-icon'][data-dir='asc'] { transform: rotate(-90deg); } [part~='sort-icon'][data-dir='desc'] { transform: rotate(90deg); } @media (prefers-reduced-motion: reduce) { [part~='sort-icon'] { transition: none !important; } } [part='row'][data-stripe] { background: var(--lr-table-row-stripe-bg, transparent); --_lr-table-row-bg: var(--lr-table-row-stripe-bg, var(--lr-table-surface, var(--lr-color-surface))); } [part='row'][aria-selected='true'] { --_lr-table-row-bg: var(--lr-table-row-selected-bg, var(--lr-color-brand-quiet)); background: var(--_lr-table-row-bg); } [part='row']:hover { --_lr-table-row-bg: color-mix(in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-hover)); background: var(--_lr-table-row-bg); } [part='row']:active { --_lr-table-row-bg: color-mix( in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active) ); background: var(--_lr-table-row-bg); } @media (forced-colors: active) { :where([part~='row'][aria-selected='true']) { outline: var(--lr-border-width-medium) solid Highlight; outline-offset: calc(-1 * var(--lr-border-width-medium)); } :where([part~='row']:hover:not([aria-selected='true'])) { outline: var(--lr-border-width-thin) dashed Highlight; outline-offset: calc(-1 * var(--lr-border-width-thin)); } } [part='group-cell'] { padding: var(--lr-table-cell-padding-compact, var(--lr-space-xs) var(--lr-space-s)); border-block-end: var(--lr-border-width-thin) solid var(--lr-color-border-subtle); background: var(--lr-color-surface-raised); color: var(--lr-color-text-quiet); font-weight: var(--lr-font-weight-semibold); text-align: start; } [part='row']:focus-visible { ${focusRing} } [part='cell'] { padding: var(--lr-table-cell-padding, var(--lr-space-s)); border-block-end: var(--lr-border-width-thin) solid var(--lr-color-border-subtle); color: var(--lr-table-cell-color, inherit); } [part='cell'][data-editable] { transition: var(--lr-transition-interactive); } :where([part='cell'][data-editable]):hover { cursor: pointer; background: var(--lr-color-brand-quiet); } :where([part='cell'][data-editable]):active { background: color-mix( in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active) ); } [part='cell'][data-editable]:focus-visible { ${focusRing} } [part='cell'] a:where(:any-link) { color: var(--lr-table-cell-link-color, var(--lr-color-brand)); } [part='cell'] a:where(:any-link):hover, [part='cell'] a:where(:any-link):focus-visible, [part='cell'] a:where(:any-link):active { color: var( --lr-table-cell-link-hover-color, var(--lr-table-cell-link-color, var(--lr-color-brand)) ); text-decoration-thickness: var(--lr-border-width-medium); } [part='cell-editor'] { box-sizing: border-box; inline-size: 100%; min-inline-size: 0; padding: var(--lr-space-xs) var(--lr-space-s); border: var(--lr-border-width-thin) solid var(--lr-color-brand); border-radius: var(--lr-radius-xs); background: var(--lr-color-surface); color: var(--lr-color-text); font: inherit; } [part='cell-editor']:focus-visible { ${focusRing} } :where([part='cell-editor']):hover { background: var(--lr-color-brand-quiet); } :where([part='cell-editor']):active { background: color-mix( in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active) ); } [part='cell-editor'][type='number'] { appearance: textfield; } [part='cell-editor'][type='number']::-webkit-inner-spin-button, [part='cell-editor'][type='number']::-webkit-outer-spin-button { appearance: none; margin: 0; } select[part='cell-editor'] { appearance: none; padding-inline-end: calc(var(--lr-space-s) + var(--lr-size-0-75rem)); cursor: pointer; } select[part='cell-editor'] option { background: var(--lr-color-surface); color: var(--lr-color-text); } [part='cell']:has(> select[part='cell-editor']) { position: relative; } [part='cell']:has(> select[part='cell-editor'])::after { content: ''; position: absolute; inset-inline-end: var(--lr-space-s); inset-block-start: 50%; inline-size: var(--lr-size-0-75rem); block-size: var(--lr-size-0-75rem); color: var(--lr-color-text-quiet); background: currentColor; mask: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpolyline points="9 6 15 12 9 18"%3E%3C/polyline%3E%3C/svg%3E') center / contain no-repeat; transform: translateY(-50%) rotate(90deg); pointer-events: none; } @media (forced-colors: active) { [part='cell']:has(> select[part='cell-editor'])::after { forced-color-adjust: none; color: ButtonText; } } [part='cell'][data-align='end'] { text-align: end; } [part='row-total-cell'] { padding: var(--lr-table-cell-padding, var(--lr-space-s)); border-block-end: var(--lr-border-width-thin) solid var(--lr-color-border-subtle); font-weight: var(--lr-font-weight-semibold); text-align: end; } [part='cell'][data-heat] { background: color-mix( in srgb, var(--lr-table-heat-tint-hi, var(--_lr-table-heat-tint-hi-default)) var(--lr-table-heat-t), var(--lr-table-heat-tint-lo, var(--_lr-table-heat-tint-lo-default)) ); } [part='expand-toggle-cell'] { padding: var(--lr-space-s); border-block-end: var(--lr-border-width-thin) solid var(--lr-color-border-subtle); text-align: center; } [part='row-expand-toggle'] { display: inline-flex; align-items: center; justify-content: center; font: inherit; border: none; background: none; padding: var(--lr-space-xs); cursor: pointer; color: inherit; ${iconHitTarget} } [part='row-expand-toggle']:hover { background: var(--lr-color-brand-quiet); } [part='row-expand-toggle']:active { background: color-mix( in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active) ); } [part='row-expand-toggle']:focus-visible { ${focusRing} } [part='row-expand-icon'] { display: inline-block; transition: transform var(--lr-transition-fast); } [part='row-expand-icon'] svg { display: block; } [part='row-expand-toggle'][aria-expanded='true'] [part='row-expand-icon'] { transform: rotate(90deg); } :host(:dir(rtl)) [part='row-expand-icon'] { transform: rotate(180deg); } :host(:dir(rtl)) [part='row-expand-toggle'][aria-expanded='true'] [part='row-expand-icon'] { transform: rotate(90deg); } @media (prefers-reduced-motion: reduce) { [part='row-expand-icon'] { transition: none !important; } } [part='expanded-row'] [part='expanded-cell'] { padding: var(--lr-space-s); border-block-end: var(--lr-border-width-thin) solid var(--lr-color-border-subtle); background: var(--lr-table-surface, var(--lr-color-surface)); } [part='header-cell'][data-sticky], [part='cell'][data-sticky] { position: sticky; inset-inline-start: var(--lr-table-sticky-offset, 0); z-index: var(--lr-layer-content); box-shadow: var(--lr-size-1px) 0 0 0 var(--lr-color-border-subtle); } [part='cell'][data-sticky] { background: var(--_lr-table-row-bg, var(--lr-table-surface, var(--lr-color-surface))); } [part='header-cell'][data-sticky] { background: var(--_lr-table-header-bg, var(--lr-table-surface, var(--lr-color-surface))); } [part='header-cell'][data-sticky='end'], [part='cell'][data-sticky='end'] { inset-inline-start: auto; inset-inline-end: var(--lr-table-sticky-offset, 0); box-shadow: calc(-1 * var(--lr-size-1px)) 0 0 0 var(--lr-color-border-subtle); } :host(:dir(rtl)) [part='header-cell'][data-sticky], :host(:dir(rtl)) [part='cell'][data-sticky] { box-shadow: calc(-1 * var(--lr-size-1px)) 0 0 0 var(--lr-color-border-subtle); } :host(:dir(rtl)) [part='header-cell'][data-sticky='end'], :host(:dir(rtl)) [part='cell'][data-sticky='end'] { box-shadow: var(--lr-size-1px) 0 0 0 var(--lr-color-border-subtle); } ${raiseWhileOverlayOpen("[part='cell'][data-sticky]","var(--lr-layer-popover)","calc(var(--lr-layer-content) + 1)")} [part='foot'] { position: sticky; inset-block-end: 0; background: var(--lr-table-surface, var(--lr-color-surface)); } [part='footer-cell'] { padding: var(--lr-table-cell-padding-compact, var(--lr-space-xs) var(--lr-space-s)); border-block-start: var(--lr-border-width-thin) solid var(--lr-color-border-subtle); font-weight: var(--lr-font-weight-semibold); text-align: start; } [part='footer-cell'][data-align='end'] { text-align: end; } [part='more-button'], [part='reveal-columns-button'] { display: block; inline-size: 100%; padding: var(--lr-space-s); border: none; background: none; color: var(--lr-color-brand); font: inherit; cursor: pointer; border-block-start: var(--lr-border-width-thin) solid var(--lr-color-border); } [part='more-button']:hover:where(:not([aria-disabled='true'])), [part='reveal-columns-button']:hover { background: var(--lr-color-brand-quiet); } [part='more-button']:active:where(:not([aria-disabled='true'])), [part='reveal-columns-button']:active { background: color-mix( in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active) ); } [part='more-button']:focus-visible, [part='reveal-columns-button']:focus-visible { ${focusRing} } [part='more-button']:where([aria-disabled='true']) { cursor: progress; } ${dataStateSurfaceStyles("error")} ${dataStateRetryStyles} `;export{styles};

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

@@ -1,4 +1,4 @@
-import{__decorate}from"tslib";import{eventCollectionSupport}from"../../../internal/collection-snapshot.js";import{html}from"lit";import{property,state}from"lit/decorators.js";import{applyComposedFocusRepair,captureComposedFocusRepair,collectComposedFocusTargets}from"../../../internal/focus-navigation.js";import{getNumberFormat}from"../../../internal/intl-cache.js";import{LyraElement}from"../../../internal/lyra-element.js";import{literalSetConverter}from"../../../internal/converters.js";import{tag}from"../../../internal/prefix.js";import{observeScrollOverflow,SCROLL_OVERFLOW_ATTRIBUTE}from"../../../internal/scroll-overflow.js";import{isUsableActiveElement,safeDeepActiveElement}from"../../../internal/active-element.js";import{OBSERVE_TIMELINE_ITEM_TIMESTAMP,SET_TIMELINE_CLUSTER_PRESENTATION,isTimelineClusterItemContract,timeValueChanged}from"./timeline-cluster.js";import{scrollOverflowFadeStyles}from"../../../internal/scroll-overflow.styles.js";import{styles}from"./timeline.styles.js";import{LYRA_DEFAULT_timeline,LYRA_DEFAULT_timelineClusterCount}from"../../../internal/default-strings.generated.js";const TIMELINE_ORIENTATION=literalSetConverter(["vertical","horizontal"],"vertical");function safelyContainsActive(container,candidate){if(!isUsableActiveElement(candidate))return!1;try{return container.contains(candidate)}catch{return!1}}const TIMELINE_SCALE=literalSetConverter(["flow","time"],"flow"),TIMELINE_COLLISION=literalSetConverter(["overlap","stack","cluster"],"overlap"),EMPTY_TIMELINE_CLUSTERS=Object.freeze([]),CLUSTER_HIDDEN_ATTRIBUTE="data-lr-timeline-cluster-hidden",TIMELINE_COLLISION_THRESHOLD=.015;function timelineEpochMs(raw){if(raw==null)return null;const ms=(raw instanceof Date?raw:typeof raw=="number"?new Date(raw):new Date(String(raw))).getTime();return Number.isFinite(ms)?ms:null}function itemEpochMs(element){return timelineEpochMs(element.timestamp)}class LyraTimeline extends LyraElement{constructor(){super(...arguments),this._orientation="vertical",this._scale="flow",this._collision="overlap",this.slottedCount=0,this.collisionClusters=EMPTY_TIMELINE_CLUSTERS,this.managedClusterHiddenItems=new Set,this.managedClusterRepresentatives=new Set,this.clusterActivations=new Map,this.timestampObservedItems=new Set,this.focusRepairGeneration=0,this.scrollOverflow=observeScrollOverflow(this,()=>this.renderRoot.querySelector('[part="base"]'),()=>{this.scheduleTimeExtentMeasurement(),this.scale==="time"&&this.collision==="cluster"&&this.scheduleClusterMeasurement(),this.syncScrollTabStop()}),this.onSlotChange=e=>{this.updateBrowserDerivedState(()=>{this.slottedCount=this.countTimelineItems(e.target),this.applyTimeScale()})},this.onTimelineItemTimestampChange=()=>{this.isConnected&&this.scheduleAfterUpdate(()=>this.applyTimeScale(),"timeline-item-timestamps")}}static{this.defaultStrings={...super.defaultStrings,timeline:LYRA_DEFAULT_timeline,timelineClusterCount:LYRA_DEFAULT_timelineClusterCount}}static{this.collectionSupport=eventCollectionSupport}static{this.immutableEventDetails=Object.freeze(["lr-cluster-activate"])}static{this.identityEventDetailProperties=Object.freeze({"lr-cluster-activate":Object.freeze(["items"])})}static{this.styles=[LyraElement.styles,scrollOverflowFadeStyles,styles]}get orientation(){return this._orientation}set orientation(value){const normalized=TIMELINE_ORIENTATION.normalizeReflected(this,"orientation",value),previous=this._orientation;previous!==normalized&&(this._orientation=normalized,this.requestUpdate("orientation",previous))}get scale(){return this._scale}set scale(value){const normalized=TIMELINE_SCALE.normalizeReflected(this,"scale",value),previous=this._scale;previous!==normalized&&(this._scale=normalized,this.requestUpdate("scale",previous))}get collision(){return this._collision}set collision(value){const normalized=TIMELINE_COLLISION.normalizeReflected(this,"collision",value),previous=this._collision;previous!==normalized&&(this._collision=normalized,this.requestUpdate("collision",previous))}connectedCallback(){super.connectedCallback(),this.hasUpdated&&this.scheduleAfterUpdate(()=>this.applyTimeScale(),"timeline-clusters")}disconnectedCallback(){this.cancelClusterMeasurement(),this.cancelTimeExtentMeasurement(),this.focusRepairGeneration+=1,this.restoreClusterPresentation(),this.restoreClusterVisibility(),this.syncTimestampObservers([]),this.collisionClusters.length>0&&(this.collisionClusters=EMPTY_TIMELINE_CLUSTERS),super.disconnectedCallback()}willUpdate(changed){super.willUpdate(changed),this.hasUpdated||(this.slottedCount=Array.from(this.children).filter(element=>!element.getAttribute("slot")&&element.localName===tag("timeline-item")).length),this.hasUpdated?(changed.has("scale")||changed.has("collision")||changed.has("rangeStart")||changed.has("rangeEnd"))&&this.applyTimeScale():this.seedFirstRenderState(()=>this.applyTimeScale())}updated(changed){super.updated(changed),this.scrollOverflow.observeExtra(this.timelineItems()),this.syncScrollTabStop(),this.scheduleTimeExtentMeasurement(),(changed.has("collisionClusters")||changed.has("orientation"))&&this.collisionClusters.length>0&&this.scheduleAfterUpdate(()=>this.applyTimeScale(),"timeline-cluster-measurement"),this.collisionClusters.length>0&&this.syncClusterPresentations(this.collisionClusters)}syncScrollTabStop(){const base=this.renderRoot.querySelector('[part="base"]');if(!base)return;const reachableOnlyByScrolling=this.orientation==="horizontal"&&base.hasAttribute(SCROLL_OVERFLOW_ATTRIBUTE);base.setAttribute("tabindex",reachableOnlyByScrolling?"0":"-1")}countTimelineItems(slot){return slot.assignedElements({flatten:!0}).filter(element=>element.localName===tag("timeline-item")).length}firstUpdated(changed){super.firstUpdated(changed),this.scheduleAfterUpdate(()=>this.updateBrowserDerivedState(()=>{const slot=this.shadowRoot.querySelector("slot");this.slottedCount=this.countTimelineItems(slot),this.applyTimeScale()}),"timeline-first-slot-reconciliation")}get itemCount(){return this.slottedCount}syncTimestampObservers(items){const current=new Set(items);for(const item of this.timestampObservedItems)current.has(item)||(isTimelineClusterItemContract(item)&&item[OBSERVE_TIMELINE_ITEM_TIMESTAMP](this.onTimelineItemTimestampChange,!1),this.timestampObservedItems.delete(item));for(const item of current)this.timestampObservedItems.has(item)||isTimelineClusterItemContract(item)&&(item[OBSERVE_TIMELINE_ITEM_TIMESTAMP](this.onTimelineItemTimestampChange,!0),this.timestampObservedItems.add(item))}timelineItems(){const slot=this.shadowRoot?.querySelector("slot");return(slot?slot.assignedElements({flatten:!0}):Array.from(this.children).filter(element=>!element.getAttribute("slot"))).filter(element=>element.localName===tag("timeline-item"))}timeRange(stamps){const pinnedStart=timelineEpochMs(this.rangeStart),pinnedEnd=timelineEpochMs(this.rangeEnd);if(pinnedStart!==null&&pinnedEnd!==null&&pinnedEnd>pinnedStart)return[pinnedStart,pinnedEnd];const finite=stamps.filter(value=>value!==null);if(finite.length<2)return null;const lo=Math.min(...finite),hi=Math.max(...finite);return hi>lo?[lo,hi]:null}applyTimeScale(){this.scheduleTimeExtentMeasurement();const items=this.timelineItems();if(this.syncTimestampObservers(items),this.scale!=="time"){for(const item of items)item.style.removeProperty("--_lr-timeline-item-offset"),item.style.removeProperty("--_lr-timeline-item-lane");this.applyCollisionClusters([]);return}const stamps=items.map(item=>itemEpochMs(item)),range=this.timeRange(stamps),lastIndex=Math.max(1,items.length-1),offsets=new Array(items.length).fill(0);items.forEach((item,index)=>{const stamp=stamps[index]??null,ratio=range&&stamp!==null?(stamp-range[0])/(range[1]-range[0]):this.collision==="cluster"&&stamp!==null?0:index/lastIndex,clamped=Math.min(1,Math.max(0,ratio));offsets[index]=clamped,item.style.setProperty("--_lr-timeline-item-offset",`${clamped*100}%`)}),this.applyCollisionLanes(items,offsets),this.applyCollisionClusters(this.collision==="cluster"?this.buildCollisionClusters(items,offsets,this.clusterCollisionThreshold()):[])}applyCollisionLanes(items,offsets){if(this.collision!=="stack"){for(const item of items)item.style.removeProperty("--_lr-timeline-item-lane");return}const order=items.map((_,index)=>index).sort((a,b)=>(offsets[a]??0)-(offsets[b]??0)),laneTails=[],lanes=new Array(items.length).fill(0);for(const index of order){const offset=offsets[index]??0;let lane=laneTails.findIndex(tail=>offset-tail>=TIMELINE_COLLISION_THRESHOLD);lane===-1&&(lane=laneTails.length),laneTails[lane]=offset,lanes[index]=lane}items.forEach((item,index)=>{item.style.setProperty("--_lr-timeline-item-lane",String(lanes[index]??0))})}buildCollisionClusters(items,offsets,threshold){const order=items.map((_,index)=>index).sort((a,b)=>(offsets[a]??0)-(offsets[b]??0)||a-b),clusters=[];let window=[],windowStart=0;const flush=()=>{if(window.length<2){window=[];return}const memberIndexes=[...window].sort((a,b)=>a-b);clusters.push({offset:windowStart,items:memberIndexes.map(index=>items[index])}),window=[]};for(const index of order){const offset=offsets[index]??0;window.length>0&&offset-windowStart>=threshold&&flush(),window.length===0&&(windowStart=offset),window.push(index)}return flush(),clusters}clusterCollisionThreshold(){const base=this.renderRoot.querySelector('[part="base"]');if(!base)return TIMELINE_COLLISION_THRESHOLD;const axisExtent=this.orientation==="horizontal"?base.clientWidth:base.clientHeight;if(!Number.isFinite(axisExtent)||axisExtent<=0)return TIMELINE_COLLISION_THRESHOLD;let markerExtent=0;for(const item of this.managedClusterRepresentatives){const marker=item.shadowRoot?.querySelector('[part="cluster"]');if(!marker)continue;const rect=marker.getBoundingClientRect();markerExtent=Math.max(markerExtent,this.orientation==="horizontal"?rect.width:rect.height)}return!Number.isFinite(markerExtent)||markerExtent<=0?TIMELINE_COLLISION_THRESHOLD:Math.max(TIMELINE_COLLISION_THRESHOLD,markerExtent/axisExtent)}scheduleTimeExtentMeasurement(){const view=this.ownerDocument?.defaultView;view&&(this.timeExtentFrame!==void 0&&this.timeExtentView===view||(this.cancelTimeExtentMeasurement(),this.timeExtentView=view,this.timeExtentFrame=view.requestAnimationFrame(()=>{if(this.timeExtentFrame=void 0,this.timeExtentView=void 0,!this.isConnected||this.ownerDocument.defaultView!==view)return;const base=this.renderRoot.querySelector('[part="base"]');if(!base)return;let overhang=0;if(this.scale==="time"&&this.orientation!=="horizontal"){const bottom=base.getBoundingClientRect().bottom;for(const item of this.timelineItems())item.getClientRects().length&&(overhang=Math.max(overhang,item.getBoundingClientRect().bottom-bottom))}const trailing=`${Math.ceil(overhang)}px`;if(base.style.getPropertyValue("--_lr-timeline-trailing-extent")!==trailing&&base.style.setProperty("--_lr-timeline-trailing-extent",trailing),this.scale!=="time"||this.orientation!=="horizontal"||this.collision==="cluster"){base.style.removeProperty("--_lr-timeline-content-height");return}let extent=0;for(const item of this.timelineItems())item.getClientRects().length&&(extent=Math.max(extent,item.offsetTop+item.offsetHeight+1));const height=`${extent+Math.max(0,base.offsetHeight-base.clientHeight)}px`;base.style.getPropertyValue("--_lr-timeline-content-height")!==height&&base.style.setProperty("--_lr-timeline-content-height",height)})))}cancelTimeExtentMeasurement(){this.timeExtentFrame!==void 0&&this.timeExtentView&&this.timeExtentView.cancelAnimationFrame(this.timeExtentFrame),this.timeExtentFrame=void 0,this.timeExtentView=void 0}scheduleClusterMeasurement(){const view=this.ownerDocument.defaultView;view&&(this.clusterMeasurementFrame!==void 0&&this.clusterMeasurementView===view||(this.cancelClusterMeasurement(),this.clusterMeasurementView=view,this.clusterMeasurementFrame=view.requestAnimationFrame(()=>{this.clusterMeasurementFrame=void 0,this.clusterMeasurementView=void 0,this.isConnected&&this.ownerDocument.defaultView===view&&this.scale==="time"&&this.collision==="cluster"&&this.applyTimeScale()})))}cancelClusterMeasurement(){this.clusterMeasurementFrame!==void 0&&this.clusterMeasurementView&&this.clusterMeasurementView.cancelAnimationFrame(this.clusterMeasurementFrame),this.clusterMeasurementFrame=void 0,this.clusterMeasurementView=void 0}sameClusters(left,right){return left.length===right.length&&left.every((cluster,index)=>cluster.offset===right[index]?.offset&&cluster.items.length===right[index]?.items.length&&cluster.items.every((item,itemIndex)=>item===right[index]?.items[itemIndex]))}captureClusterFocusRepair(clusters){const active=safeDeepActiveElement(this.ownerDocument);if(!active)return;const focusedItem=this.timelineItems().find(item=>item===active||safelyContainsActive(item,active)||safeDeepActiveElement(item.shadowRoot)===active);if(!focusedItem)return;const wasRepresentative=this.managedClusterRepresentatives.has(focusedItem),nextCluster=clusters.find(cluster=>cluster.items.includes(focusedItem)),nextRepresentative=nextCluster?.items[0],mode=nextCluster?"cluster":"item";if(mode==="cluster"&&wasRepresentative&&nextRepresentative===focusedItem||mode==="item"&&!wasRepresentative)return;const base=this.renderRoot.querySelector('[part="base"]');let snapshot;try{snapshot=captureComposedFocusRepair(focusedItem,base)}catch{return}if(snapshot)return{item:mode==="cluster"?nextRepresentative:focusedItem,mode,snapshot}}scheduleClusterFocusRepair(repair){const generation=++this.focusRepairGeneration;repair&&repair.item.updateComplete.then(()=>{if(generation!==this.focusRepairGeneration||!this.isConnected)return;const base=this.renderRoot.querySelector('[part="base"]'),target=repair.mode==="cluster"?repair.item.shadowRoot?.querySelector('[part="cluster"]')??null:collectComposedFocusTargets(repair.item).elements[0]??base;try{applyComposedFocusRepair(repair.snapshot,target)}catch{}})}applyCollisionClusters(clusters){const frozen=Object.freeze(clusters.map(cluster=>Object.freeze({offset:cluster.offset,items:Object.freeze([...cluster.items])}))),changed=!this.sameClusters(this.collisionClusters,frozen),focusRepair=changed?this.captureClusterFocusRepair(frozen):void 0,representatives=new Set(frozen.map(cluster=>cluster.items[0])),hiddenItems=new Set(frozen.flatMap(cluster=>cluster.items.filter(item=>!representatives.has(item))));for(const item of this.managedClusterHiddenItems){if(hiddenItems.has(item)){item.hasAttribute(CLUSTER_HIDDEN_ATTRIBUTE)||item.setAttribute(CLUSTER_HIDDEN_ATTRIBUTE,"");continue}item.getAttribute(CLUSTER_HIDDEN_ATTRIBUTE)===""&&item.removeAttribute(CLUSTER_HIDDEN_ATTRIBUTE),this.managedClusterHiddenItems.delete(item)}for(const item of hiddenItems)this.managedClusterHiddenItems.has(item)||item.hasAttribute(CLUSTER_HIDDEN_ATTRIBUTE)||(item.setAttribute(CLUSTER_HIDDEN_ATTRIBUTE,""),this.managedClusterHiddenItems.add(item));if(changed){this.restoreClusterPresentation();for(const cluster of frozen){const representative=cluster.items[0];this.clusterActivations.set(representative,()=>this.activateCluster(cluster.items)),this.managedClusterRepresentatives.add(representative)}this.collisionClusters=frozen,this.syncClusterPresentations(frozen),this.scheduleClusterFocusRepair(focusRepair)}for(const cluster of frozen)cluster.items[0].style.setProperty("--_lr-timeline-item-offset",`${cluster.offset*100}%`)}syncClusterPresentations(clusters){for(const cluster of clusters){const representative=cluster.items[0],activate=this.clusterActivations.get(representative);if(!activate)continue;const countText=getNumberFormat(this.effectiveLocale).format(cluster.items.length);isTimelineClusterItemContract(representative)&&representative[SET_TIMELINE_CLUSTER_PRESENTATION]({accessibleLabel:this.localize("timelineClusterCount",void 0,{count:countText}),countText,activate})}}restoreClusterPresentation(){for(const item of this.managedClusterRepresentatives)isTimelineClusterItemContract(item)&&item[SET_TIMELINE_CLUSTER_PRESENTATION](void 0);this.managedClusterRepresentatives.clear(),this.clusterActivations.clear()}restoreClusterVisibility(){for(const item of this.managedClusterHiddenItems)item.getAttribute(CLUSTER_HIDDEN_ATTRIBUTE)===""&&item.removeAttribute(CLUSTER_HIDDEN_ATTRIBUTE);this.managedClusterHiddenItems.clear()}activateCluster(items){const snapshot=this.ownerDocument.defaultView?.Array.from(items)??[...items];this.emit("lr-cluster-activate",Object.freeze({items:Object.freeze(snapshot)}))}render(){return html`
+import{__decorate}from"tslib";import{eventCollectionSupport}from"../../../internal/collection-snapshot.js";import{html}from"lit";import{property,state}from"lit/decorators.js";import{applyComposedFocusRepair,captureComposedFocusRepair,collectComposedFocusTargets}from"../../../internal/focus-navigation.js";import{getNumberFormat}from"../../../internal/intl-cache.js";import{LyraElement}from"../../../internal/lyra-element.js";import{literalSetConverter}from"../../../internal/converters.js";import{tag}from"../../../internal/prefix.js";import{observeScrollOverflow,SCROLL_OVERFLOW_ATTRIBUTE}from"../../../internal/scroll-overflow.js";import{isUsableActiveElement,safeDeepActiveElement}from"../../../internal/active-element.js";import{OBSERVE_TIMELINE_ITEM_TIMESTAMP,SET_TIMELINE_CLUSTER_PRESENTATION,isTimelineClusterItemContract,timeValueChanged}from"./timeline-cluster.js";import{scrollOverflowFadeStyles}from"../../../internal/scroll-overflow.styles.js";import{styles}from"./timeline.styles.js";import{LYRA_DEFAULT_timeline,LYRA_DEFAULT_timelineClusterCount}from"../../../internal/default-strings/data.generated.js";const TIMELINE_ORIENTATION=literalSetConverter(["vertical","horizontal"],"vertical");function safelyContainsActive(container,candidate){if(!isUsableActiveElement(candidate))return!1;try{return container.contains(candidate)}catch{return!1}}const TIMELINE_SCALE=literalSetConverter(["flow","time"],"flow"),TIMELINE_COLLISION=literalSetConverter(["overlap","stack","cluster"],"overlap"),EMPTY_TIMELINE_CLUSTERS=Object.freeze([]),CLUSTER_HIDDEN_ATTRIBUTE="data-lr-timeline-cluster-hidden",TIMELINE_COLLISION_THRESHOLD=.015;function timelineEpochMs(raw){if(raw==null)return null;const ms=(raw instanceof Date?raw:typeof raw=="number"?new Date(raw):new Date(String(raw))).getTime();return Number.isFinite(ms)?ms:null}function itemEpochMs(element){return timelineEpochMs(element.timestamp)}class LyraTimeline extends LyraElement{constructor(){super(...arguments),this._orientation="vertical",this._scale="flow",this._collision="overlap",this.slottedCount=0,this.collisionClusters=EMPTY_TIMELINE_CLUSTERS,this.managedClusterHiddenItems=new Set,this.managedClusterRepresentatives=new Set,this.clusterActivations=new Map,this.timestampObservedItems=new Set,this.focusRepairGeneration=0,this.scrollOverflow=observeScrollOverflow(this,()=>this.renderRoot.querySelector('[part="base"]'),()=>{this.scheduleTimeExtentMeasurement(),this.scale==="time"&&this.collision==="cluster"&&this.scheduleClusterMeasurement(),this.syncScrollTabStop()}),this.onSlotChange=e=>{this.updateBrowserDerivedState(()=>{this.slottedCount=this.countTimelineItems(e.target),this.applyTimeScale()})},this.onTimelineItemTimestampChange=()=>{this.isConnected&&this.scheduleAfterUpdate(()=>this.applyTimeScale(),"timeline-item-timestamps")}}static{this.defaultStrings={...super.defaultStrings,timeline:LYRA_DEFAULT_timeline,timelineClusterCount:LYRA_DEFAULT_timelineClusterCount}}static{this.collectionSupport=eventCollectionSupport}static{this.immutableEventDetails=Object.freeze(["lr-cluster-activate"])}static{this.identityEventDetailProperties=Object.freeze({"lr-cluster-activate":Object.freeze(["items"])})}static{this.styles=[LyraElement.styles,scrollOverflowFadeStyles,styles]}get orientation(){return this._orientation}set orientation(value){const normalized=TIMELINE_ORIENTATION.normalizeReflected(this,"orientation",value),previous=this._orientation;previous!==normalized&&(this._orientation=normalized,this.requestUpdate("orientation",previous))}get scale(){return this._scale}set scale(value){const normalized=TIMELINE_SCALE.normalizeReflected(this,"scale",value),previous=this._scale;previous!==normalized&&(this._scale=normalized,this.requestUpdate("scale",previous))}get collision(){return this._collision}set collision(value){const normalized=TIMELINE_COLLISION.normalizeReflected(this,"collision",value),previous=this._collision;previous!==normalized&&(this._collision=normalized,this.requestUpdate("collision",previous))}connectedCallback(){super.connectedCallback(),this.hasUpdated&&this.scheduleAfterUpdate(()=>this.applyTimeScale(),"timeline-clusters")}disconnectedCallback(){this.cancelClusterMeasurement(),this.cancelTimeExtentMeasurement(),this.focusRepairGeneration+=1,this.restoreClusterPresentation(),this.restoreClusterVisibility(),this.syncTimestampObservers([]),this.collisionClusters.length>0&&(this.collisionClusters=EMPTY_TIMELINE_CLUSTERS),super.disconnectedCallback()}willUpdate(changed){super.willUpdate(changed),this.hasUpdated||(this.slottedCount=Array.from(this.children).filter(element=>!element.getAttribute("slot")&&element.localName===tag("timeline-item")).length),this.hasUpdated?(changed.has("scale")||changed.has("collision")||changed.has("rangeStart")||changed.has("rangeEnd"))&&this.applyTimeScale():this.seedFirstRenderState(()=>this.applyTimeScale())}updated(changed){super.updated(changed),this.scrollOverflow.observeExtra(this.timelineItems()),this.syncScrollTabStop(),this.scheduleTimeExtentMeasurement(),(changed.has("collisionClusters")||changed.has("orientation"))&&this.collisionClusters.length>0&&this.scheduleAfterUpdate(()=>this.applyTimeScale(),"timeline-cluster-measurement"),this.collisionClusters.length>0&&this.syncClusterPresentations(this.collisionClusters)}syncScrollTabStop(){const base=this.renderRoot.querySelector('[part="base"]');if(!base)return;const reachableOnlyByScrolling=this.orientation==="horizontal"&&base.hasAttribute(SCROLL_OVERFLOW_ATTRIBUTE);base.setAttribute("tabindex",reachableOnlyByScrolling?"0":"-1")}countTimelineItems(slot){return slot.assignedElements({flatten:!0}).filter(element=>element.localName===tag("timeline-item")).length}firstUpdated(changed){super.firstUpdated(changed),this.scheduleAfterUpdate(()=>this.updateBrowserDerivedState(()=>{const slot=this.shadowRoot.querySelector("slot");this.slottedCount=this.countTimelineItems(slot),this.applyTimeScale()}),"timeline-first-slot-reconciliation")}get itemCount(){return this.slottedCount}syncTimestampObservers(items){const current=new Set(items);for(const item of this.timestampObservedItems)current.has(item)||(isTimelineClusterItemContract(item)&&item[OBSERVE_TIMELINE_ITEM_TIMESTAMP](this.onTimelineItemTimestampChange,!1),this.timestampObservedItems.delete(item));for(const item of current)this.timestampObservedItems.has(item)||isTimelineClusterItemContract(item)&&(item[OBSERVE_TIMELINE_ITEM_TIMESTAMP](this.onTimelineItemTimestampChange,!0),this.timestampObservedItems.add(item))}timelineItems(){const slot=this.shadowRoot?.querySelector("slot");return(slot?slot.assignedElements({flatten:!0}):Array.from(this.children).filter(element=>!element.getAttribute("slot"))).filter(element=>element.localName===tag("timeline-item"))}timeRange(stamps){const pinnedStart=timelineEpochMs(this.rangeStart),pinnedEnd=timelineEpochMs(this.rangeEnd);if(pinnedStart!==null&&pinnedEnd!==null&&pinnedEnd>pinnedStart)return[pinnedStart,pinnedEnd];const finite=stamps.filter(value=>value!==null);if(finite.length<2)return null;const lo=Math.min(...finite),hi=Math.max(...finite);return hi>lo?[lo,hi]:null}applyTimeScale(){this.scheduleTimeExtentMeasurement();const items=this.timelineItems();if(this.syncTimestampObservers(items),this.scale!=="time"){for(const item of items)item.style.removeProperty("--_lr-timeline-item-offset"),item.style.removeProperty("--_lr-timeline-item-lane");this.applyCollisionClusters([]);return}const stamps=items.map(item=>itemEpochMs(item)),range=this.timeRange(stamps),lastIndex=Math.max(1,items.length-1),offsets=new Array(items.length).fill(0);items.forEach((item,index)=>{const stamp=stamps[index]??null,ratio=range&&stamp!==null?(stamp-range[0])/(range[1]-range[0]):this.collision==="cluster"&&stamp!==null?0:index/lastIndex,clamped=Math.min(1,Math.max(0,ratio));offsets[index]=clamped,item.style.setProperty("--_lr-timeline-item-offset",`${clamped*100}%`)}),this.applyCollisionLanes(items,offsets),this.applyCollisionClusters(this.collision==="cluster"?this.buildCollisionClusters(items,offsets,this.clusterCollisionThreshold()):[])}applyCollisionLanes(items,offsets){if(this.collision!=="stack"){for(const item of items)item.style.removeProperty("--_lr-timeline-item-lane");return}const order=items.map((_,index)=>index).sort((a,b)=>(offsets[a]??0)-(offsets[b]??0)),laneTails=[],lanes=new Array(items.length).fill(0);for(const index of order){const offset=offsets[index]??0;let lane=laneTails.findIndex(tail=>offset-tail>=TIMELINE_COLLISION_THRESHOLD);lane===-1&&(lane=laneTails.length),laneTails[lane]=offset,lanes[index]=lane}items.forEach((item,index)=>{item.style.setProperty("--_lr-timeline-item-lane",String(lanes[index]??0))})}buildCollisionClusters(items,offsets,threshold){const order=items.map((_,index)=>index).sort((a,b)=>(offsets[a]??0)-(offsets[b]??0)||a-b),clusters=[];let window=[],windowStart=0;const flush=()=>{if(window.length<2){window=[];return}const memberIndexes=[...window].sort((a,b)=>a-b);clusters.push({offset:windowStart,items:memberIndexes.map(index=>items[index])}),window=[]};for(const index of order){const offset=offsets[index]??0;window.length>0&&offset-windowStart>=threshold&&flush(),window.length===0&&(windowStart=offset),window.push(index)}return flush(),clusters}clusterCollisionThreshold(){const base=this.renderRoot.querySelector('[part="base"]');if(!base)return TIMELINE_COLLISION_THRESHOLD;const axisExtent=this.orientation==="horizontal"?base.clientWidth:base.clientHeight;if(!Number.isFinite(axisExtent)||axisExtent<=0)return TIMELINE_COLLISION_THRESHOLD;let markerExtent=0;for(const item of this.managedClusterRepresentatives){const marker=item.shadowRoot?.querySelector('[part="cluster"]');if(!marker)continue;const rect=marker.getBoundingClientRect();markerExtent=Math.max(markerExtent,this.orientation==="horizontal"?rect.width:rect.height)}return!Number.isFinite(markerExtent)||markerExtent<=0?TIMELINE_COLLISION_THRESHOLD:Math.max(TIMELINE_COLLISION_THRESHOLD,markerExtent/axisExtent)}scheduleTimeExtentMeasurement(){const view=this.ownerDocument?.defaultView;view&&(this.timeExtentFrame!==void 0&&this.timeExtentView===view||(this.cancelTimeExtentMeasurement(),this.timeExtentView=view,this.timeExtentFrame=view.requestAnimationFrame(()=>{if(this.timeExtentFrame=void 0,this.timeExtentView=void 0,!this.isConnected||this.ownerDocument.defaultView!==view)return;const base=this.renderRoot.querySelector('[part="base"]');if(!base)return;let overhang=0;if(this.scale==="time"&&this.orientation!=="horizontal"){const bottom=base.getBoundingClientRect().bottom;for(const item of this.timelineItems())item.getClientRects().length&&(overhang=Math.max(overhang,item.getBoundingClientRect().bottom-bottom))}const trailing=`${Math.ceil(overhang)}px`;if(base.style.getPropertyValue("--_lr-timeline-trailing-extent")!==trailing&&base.style.setProperty("--_lr-timeline-trailing-extent",trailing),this.scale!=="time"||this.orientation!=="horizontal"||this.collision==="cluster"){base.style.removeProperty("--_lr-timeline-content-height");return}let extent=0;for(const item of this.timelineItems())item.getClientRects().length&&(extent=Math.max(extent,item.offsetTop+item.offsetHeight+1));const height=`${extent+Math.max(0,base.offsetHeight-base.clientHeight)}px`;base.style.getPropertyValue("--_lr-timeline-content-height")!==height&&base.style.setProperty("--_lr-timeline-content-height",height)})))}cancelTimeExtentMeasurement(){this.timeExtentFrame!==void 0&&this.timeExtentView&&this.timeExtentView.cancelAnimationFrame(this.timeExtentFrame),this.timeExtentFrame=void 0,this.timeExtentView=void 0}scheduleClusterMeasurement(){const view=this.ownerDocument.defaultView;view&&(this.clusterMeasurementFrame!==void 0&&this.clusterMeasurementView===view||(this.cancelClusterMeasurement(),this.clusterMeasurementView=view,this.clusterMeasurementFrame=view.requestAnimationFrame(()=>{this.clusterMeasurementFrame=void 0,this.clusterMeasurementView=void 0,this.isConnected&&this.ownerDocument.defaultView===view&&this.scale==="time"&&this.collision==="cluster"&&this.applyTimeScale()})))}cancelClusterMeasurement(){this.clusterMeasurementFrame!==void 0&&this.clusterMeasurementView&&this.clusterMeasurementView.cancelAnimationFrame(this.clusterMeasurementFrame),this.clusterMeasurementFrame=void 0,this.clusterMeasurementView=void 0}sameClusters(left,right){return left.length===right.length&&left.every((cluster,index)=>cluster.offset===right[index]?.offset&&cluster.items.length===right[index]?.items.length&&cluster.items.every((item,itemIndex)=>item===right[index]?.items[itemIndex]))}captureClusterFocusRepair(clusters){const active=safeDeepActiveElement(this.ownerDocument);if(!active)return;const focusedItem=this.timelineItems().find(item=>item===active||safelyContainsActive(item,active)||safeDeepActiveElement(item.shadowRoot)===active);if(!focusedItem)return;const wasRepresentative=this.managedClusterRepresentatives.has(focusedItem),nextCluster=clusters.find(cluster=>cluster.items.includes(focusedItem)),nextRepresentative=nextCluster?.items[0],mode=nextCluster?"cluster":"item";if(mode==="cluster"&&wasRepresentative&&nextRepresentative===focusedItem||mode==="item"&&!wasRepresentative)return;const base=this.renderRoot.querySelector('[part="base"]');let snapshot;try{snapshot=captureComposedFocusRepair(focusedItem,base)}catch{return}if(snapshot)return{item:mode==="cluster"?nextRepresentative:focusedItem,mode,snapshot}}scheduleClusterFocusRepair(repair){const generation=++this.focusRepairGeneration;repair&&repair.item.updateComplete.then(()=>{if(generation!==this.focusRepairGeneration||!this.isConnected)return;const base=this.renderRoot.querySelector('[part="base"]'),target=repair.mode==="cluster"?repair.item.shadowRoot?.querySelector('[part="cluster"]')??null:collectComposedFocusTargets(repair.item).elements[0]??base;try{applyComposedFocusRepair(repair.snapshot,target)}catch{}})}applyCollisionClusters(clusters){const frozen=Object.freeze(clusters.map(cluster=>Object.freeze({offset:cluster.offset,items:Object.freeze([...cluster.items])}))),changed=!this.sameClusters(this.collisionClusters,frozen),focusRepair=changed?this.captureClusterFocusRepair(frozen):void 0,representatives=new Set(frozen.map(cluster=>cluster.items[0])),hiddenItems=new Set(frozen.flatMap(cluster=>cluster.items.filter(item=>!representatives.has(item))));for(const item of this.managedClusterHiddenItems){if(hiddenItems.has(item)){item.hasAttribute(CLUSTER_HIDDEN_ATTRIBUTE)||item.setAttribute(CLUSTER_HIDDEN_ATTRIBUTE,"");continue}item.getAttribute(CLUSTER_HIDDEN_ATTRIBUTE)===""&&item.removeAttribute(CLUSTER_HIDDEN_ATTRIBUTE),this.managedClusterHiddenItems.delete(item)}for(const item of hiddenItems)this.managedClusterHiddenItems.has(item)||item.hasAttribute(CLUSTER_HIDDEN_ATTRIBUTE)||(item.setAttribute(CLUSTER_HIDDEN_ATTRIBUTE,""),this.managedClusterHiddenItems.add(item));if(changed){this.restoreClusterPresentation();for(const cluster of frozen){const representative=cluster.items[0];this.clusterActivations.set(representative,()=>this.activateCluster(cluster.items)),this.managedClusterRepresentatives.add(representative)}this.collisionClusters=frozen,this.syncClusterPresentations(frozen),this.scheduleClusterFocusRepair(focusRepair)}for(const cluster of frozen)cluster.items[0].style.setProperty("--_lr-timeline-item-offset",`${cluster.offset*100}%`)}syncClusterPresentations(clusters){for(const cluster of clusters){const representative=cluster.items[0],activate=this.clusterActivations.get(representative);if(!activate)continue;const countText=getNumberFormat(this.effectiveLocale).format(cluster.items.length);isTimelineClusterItemContract(representative)&&representative[SET_TIMELINE_CLUSTER_PRESENTATION]({accessibleLabel:this.localize("timelineClusterCount",void 0,{count:countText}),countText,activate})}}restoreClusterPresentation(){for(const item of this.managedClusterRepresentatives)isTimelineClusterItemContract(item)&&item[SET_TIMELINE_CLUSTER_PRESENTATION](void 0);this.managedClusterRepresentatives.clear(),this.clusterActivations.clear()}restoreClusterVisibility(){for(const item of this.managedClusterHiddenItems)item.getAttribute(CLUSTER_HIDDEN_ATTRIBUTE)===""&&item.removeAttribute(CLUSTER_HIDDEN_ATTRIBUTE);this.managedClusterHiddenItems.clear()}activateCluster(items){const snapshot=this.ownerDocument.defaultView?.Array.from(items)??[...items];this.emit("lr-cluster-activate",Object.freeze({items:Object.freeze(snapshot)}))}render(){return html`
       <div part="base" role="list" tabindex="-1" aria-label=${this.accessibleLabel==null?this.localize("timeline"):this.accessibleLabel}>
         <slot @slotchange=${this.onSlotChange}></slot>
       </div>