@aceshooting/lyra-ui 13.0.1 → 14.0.0

package/dist/components/conversation/voice-picker/voice-picker.class.d.ts

@@ -39,6 +39,9 @@ export type LyraVoicePickerSelectionDirection=LyraSelectionDirection;export inte
 * In free-text mode, `input` and the native selection/range-editing APIs expose the editable
 * combobox text. `setRangeText()` synchronizes `value`, form data, and validity without emitting
 * user-input events. These APIs are no-ops in closed-dropdown mode and before render.
+* `readonly` keeps both combobox owners focusable and browseable while blocking user typing and
+* catalog commits; selection/copy, voice previews, form submission/reset, and programmatic writes
+* remain available.
 * Catalog assignments become bounded, clone-owned, frozen snapshots. Create and reassign a new
 * catalog array after changing its rows; mutating an assigned source does not update the picker.
 *
@@ -113,8 +116,10 @@ export type LyraVoicePickerSelectionDirection=LyraSelectionDirection;export inte
 *   of a synthetic stale-value option row.
 * @cssprop [--lr-voice-picker-option-synthetic-font-style=italic] - Font style of a synthetic
 *   stale-value option label.
-* @cssprop [--lr-voice-picker-preview-hover-bg=var(--lr-color-brand-quiet)] - Preview hover fill.
-* @cssprop [--lr-voice-picker-preview-hover-color=var(--lr-color-brand)] - Preview hover icon.
+* @cssprop [--lr-voice-picker-preview-hover-bg=var(--lr-color-brand-quiet)] - Shared hover/press
+*   fill for the standalone and row preview actions.
+* @cssprop [--lr-voice-picker-preview-hover-color=var(--lr-color-brand)] - Shared hover/press
+*   icon color for the standalone and row preview actions.
 * @cssprop [--lr-form-control-required-content=' *'] - The required marker appended to
 *   `form-control-label` while `required` is set. Set it to `''` to suppress the marker, or to any
 *   other quoted string (`' (required)'`, a localized word) to replace it.
@@ -137,6 +142,9 @@ provider:string;
 get catalog():LyraCatalog<LyraVoiceCatalogEntry> |undefined;set catalog(next:LyraCatalog<LyraVoiceCatalogEntry> |undefined);
 /** Let the user type/commit a value that isn't in `catalog`, even when `catalog` is non-empty. */
 allowCustom:boolean;
+/** Keeps user edits and catalog commits from changing `value` while retaining focus, popup
+*  navigation, selection/copy, previews, form submission, reset, and programmatic writes. */
+readonly:boolean;
 /** Whether to render preview affordances at all. */
 preview:boolean;
 /** Visible label text. The `label` slot appends custom label content to the same native label. */
@@ -181,8 +189,8 @@ get defaultValue():string;set defaultValue(next:string);get name():string;set na
 /** Whether the control is disabled explicitly or by an ancestor fieldset. */
 get effectiveDisabled():boolean;
 /**
-* Shared with every other form control: own `disabled` and a `<fieldset disabled>` ancestor bar
-* constraint validation (this picker has no `readonly` of its own). A barred control matches
+* Shared with every other form control: own `disabled`/`readonly` and a `<fieldset disabled>`
+* ancestor bar constraint validation. A barred control matches
 * neither `:valid` nor `:invalid` natively, so leaving `valueMissing` raised on a disabled
 * required picker is what painted it red under the documented `:state(user-invalid)` rule.
 */

package/dist/components/conversation/voice-picker/voice-picker.class.js

@@ -1,4 +1,4 @@
-var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html,nothing}from"lit";import{property,state}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{installFormControlLabelSupport}from"../../../internal/form-control-labels.js";installFormControlLabelSupport();import{sizes}from"../../../internal/sizes.styles.js";import{hostAriaLabel,nextId}from"../../../internal/a11y.js";import{chevronIcon,playIcon,pauseIcon}from"../../../internal/icons.js";import{AnchoredValidityController,VALIDITY_ANCHOR}from"../../../internal/anchored-validity.js";import{attachInternalsSafely,getFormOwner,installCustomErrorProperty,isBarredFromValidation,setFormOwner}from"../../../internal/form-associated.js";import{installInvalidEventAlias}from"../../../internal/invalid-event-alias.js";import{syncValidityStates}from"../../../internal/custom-states.js";import{safeMediaSrc}from"../../../internal/safe-url.js";import{styles}from"./voice-picker.styles.js";import{trueDefaultBooleanConverter,trueDefaultSpellcheckConverter as spellcheckConverter}from"../../../internal/converters.js";import{CatalogPickerController}from"../../../internal/catalog-picker.js";import{activeElementIn}from"../../../internal/active-element.js";import{SlotPresenceController}from"../../../internal/slot-presence-controller.js";import{LYRA_DEFAULT_fieldRequired,LYRA_DEFAULT_noMatches,LYRA_DEFAULT_notInCatalog,LYRA_DEFAULT_voice,LYRA_DEFAULT_voicePickerNoVoices,LYRA_DEFAULT_voicePickerPreview,LYRA_DEFAULT_voicePickerRequired,LYRA_DEFAULT_voicePickerStopPreview}from"../../../internal/default-strings.generated.js";const MAX_VOICE_CATALOG_ENTRIES=1e4;function ownString(value,key){try{const descriptor=Object.getOwnPropertyDescriptor(value,key);return descriptor&&"value"in descriptor&&typeof descriptor.value=="string"?descriptor.value:void 0}catch{return}}function snapshotVoiceCatalog(value){if(!Array.isArray(value))return;const stringSnapshot=[],entrySnapshot=[];let objectCatalog=!1,length=0;try{length=Math.min(value.length,MAX_VOICE_CATALOG_ENTRIES)}catch{return Object.freeze(stringSnapshot)}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 candidate=descriptor.value;if(typeof candidate=="string"){objectCatalog?entrySnapshot.push(Object.freeze({id:candidate,label:candidate})):stringSnapshot.push(candidate);continue}if(candidate===null||typeof candidate!="object")continue;const id=ownString(candidate,"id"),label=ownString(candidate,"label");if(id===void 0||label===void 0)continue;objectCatalog||(entrySnapshot.push(...stringSnapshot.map(entry=>Object.freeze({id:entry,label:entry}))),objectCatalog=!0);const language=ownString(candidate,"language"),description=ownString(candidate,"description"),previewUrl=ownString(candidate,"previewUrl");entrySnapshot.push(Object.freeze({id,label,...language===void 0?{}:{language},...description===void 0?{}:{description},...previewUrl===void 0?{}:{previewUrl}}))}return Object.freeze(objectCatalog?entrySnapshot:stringSnapshot)}class LyraVoicePicker extends LyraElement{static{this.defaultStrings={...super.defaultStrings,fieldRequired:LYRA_DEFAULT_fieldRequired,noMatches:LYRA_DEFAULT_noMatches,notInCatalog:LYRA_DEFAULT_notInCatalog,voice:LYRA_DEFAULT_voice,voicePickerNoVoices:LYRA_DEFAULT_voicePickerNoVoices,voicePickerPreview:LYRA_DEFAULT_voicePickerPreview,voicePickerRequired:LYRA_DEFAULT_voicePickerRequired,voicePickerStopPreview:LYRA_DEFAULT_voicePickerStopPreview}}static{this.formAssociated=!0}static{this.styles=[LyraElement.styles,sizes,styles]}static{this.properties={customError:{attribute:"custom-error",reflect:!0,noAccessor:!0},disabled:{type:Boolean,reflect:!0,noAccessor:!0},required:{type:Boolean,reflect:!0,noAccessor:!0},value:{attribute:!1,noAccessor:!0},defaultValue:{attribute:"value",reflect:!1,useDefault:!0,noAccessor:!0},name:{reflect:!0,noAccessor:!0}}}get catalog(){return this._catalog}set catalog(next){const old=this._catalog;next!==old&&(this.internalPreviewTargetId!==null&&this.stopInternalPreview(),this._catalog=snapshotVoiceCatalog(next),this.requestUpdate("catalog",old))}get open(){return this.catalogPicker.open}set open(next){this.catalogPicker.setOpen(next)}get activeIndex(){return this.catalogPicker.activeIndex}get query(){return this.catalogPicker.query}constructor(){super(),this.provider="",this.allowCustom=!1,this.preview=!0,this.label="",this.hint="",this.errorText="",this.placeholder="",this.spellcheck=!0,this.autocapitalize="",this.autoCorrect="",this.autocomplete="off",this.inputMode="",this.enterKeyHint="",this.size="m",this.touched=!1,this.slotPresence=new SlotPresenceController(this),this.previewingId=null,this.listId=nextId("voice-picker-list"),this.controlId=nextId("voice-picker-control"),this.pendingPreviewId=null,this.previewGeneration=0,this._fieldsetDisabled=!1,this._name="",this._disabled=!1,this._required=!1,this.transferControlFocus=!1,this.catalogPicker=new CatalogPickerController(this,{catalog:()=>this.catalog,allowCustom:()=>this.allowCustom,locale:()=>this.effectiveLocale,searchableFields:entry=>[entry.id,entry.label,entry.language??"",entry.description??""],emitChange:detail=>this.emit("lr-change",detail),beforeValueChange:value=>{const previewTarget=this.internalPreviewTargetId;previewTarget!==null&&previewTarget!==value&&this.stopInternalPreview()},beforeActiveIndexChange:next=>this.reconcilePreviewForActiveIndex(next),afterQueryChange:()=>this.reconcilePreviewVisibility(this.open,this.catalogPicker.filteredEntries),onValueChange:(value,oldValue)=>{this.internals.setFormValue(value),this.updateValidity(),this.requestUpdate("value",oldValue)},onDefaultValueChange:(_value,oldValue)=>this.requestUpdate("defaultValue",oldValue),onStateChange:(state2,oldValue)=>{state2==="open"?(this.catalogPicker.open||this.reconcilePreviewVisibility(!1,[]),this.requestUpdate("open",oldValue)):this.requestUpdate()},onControlBlur:()=>{this.effectiveDisabled||(this.touched=!0)}}),this.onAudioEnded=event=>{event.currentTarget===this.audioEl&&this.stopInternalPreview()},this.onAudioLoadFailure=eventOrAudio=>{const direct=eventOrAudio,isDomErrorEvent=direct.localName!=="audio",audioLike=direct.localName==="audio"?eventOrAudio:eventOrAudio.currentTarget,failedAudio=audioLike?.localName==="audio"&&typeof audioLike.pause=="function"&&typeof audioLike.removeEventListener=="function"?audioLike:void 0;if(!failedAudio||(failedAudio.removeEventListener("ended",this.onAudioEnded),failedAudio.removeEventListener("error",this.onAudioLoadFailure),failedAudio.pause(),failedAudio!==this.audioEl))return;const pendingVoiceId=this.pendingPreviewId;this.previewGeneration++,this.audioEl=void 0,this.pendingPreviewId=null,isDomErrorEvent&&this.previewingId===null&&pendingVoiceId!==null&&(this.previewingId=pendingVoiceId,this.emit("lr-preview-change",{voiceId:pendingVoiceId})),this.previewingId!==null&&(this.previewingId=null,this.emit("lr-preview-change",{voiceId:null}))},this.onPreviewButtonClick=()=>{const candidate=this.previewCandidateId;candidate&&(this.internalPreviewTargetId===candidate?this.stopInternalPreview():this.requestPreview(candidate))},this.onOptionPreviewClick=(e,entry)=>{e.stopPropagation(),this.internalPreviewTargetId===entry.id?this.stopInternalPreview():this.requestPreview(entry.id)},this.onTriggerClick=()=>{this.effectiveDisabled||(this.open?this.hide():this.show())},this.onControlBlur=event=>{this.catalogPicker.handleControlBlur(event)},this.onControlFocus=event=>{this.catalogPicker.handleControlFocus(event)},this.onTriggerKeyDown=e=>{this.catalogPicker.handleTriggerKeyDown(e)},this.onComboMouseDown=e=>{this.catalogPicker.handleComboMouseDown(e)},this.onInputFocus=event=>{this.catalogPicker.handleInputFocus(event)},this.onInput=e=>{this.catalogPicker.handleInput(e)},this.onInputKeyDown=e=>{this.catalogPicker.handleInputKeyDown(e)},this.onListboxMouseDown=e=>{this.catalogPicker.handleListboxMouseDown(e)},this.onListboxClick=e=>{this.catalogPicker.handleListboxClick(e)},this.internals=attachInternalsSafely(this),this.validityController=new AnchoredValidityController(this,this.internals,()=>this[VALIDITY_ANCHOR]()),installCustomErrorProperty(this,()=>this.validityController.customValidityMessage),installInvalidEventAlias(this,init=>this.emit("lr-invalid",null,init)),this.internals.setFormValue("")}get form(){return getFormOwner(this.internals)}set form(owner){setFormOwner(this,owner)}getForm(){return getFormOwner(this.internals)}get labels(){return this.internals.labels}get validity(){return this.internals.validity}get validationMessage(){return this.internals.validationMessage}get willValidate(){return this.internals.willValidate}[VALIDITY_ANCHOR](){return this.renderRoot?.querySelector('[part="trigger"], [part="combobox-input"]')??null}click(){this.catalogPicker.click()}focus(options){this.catalogPicker.focus(options)}blur(){this.catalogPicker.blur()}get input(){return this.catalogPicker.input}get selectionStart(){return this.input?.selectionStart??null}set selectionStart(value){this.input&&(this.input.selectionStart=value)}get selectionEnd(){return this.input?.selectionEnd??null}set selectionEnd(value){this.input&&(this.input.selectionEnd=value)}get selectionDirection(){return this.input?.selectionDirection??null}set selectionDirection(value){this.input&&(this.input.selectionDirection=value)}select(){this.catalogPicker.select()}setSelectionRange(start,end,direction){this.catalogPicker.setSelectionRange(start,end,direction)}setRangeText(replacement,start,end,selectMode){this.catalogPicker.setRangeText(replacement,start,end,selectMode)}connectedCallback(){super.connectedCallback(),this.updateValidity(),this.catalogPicker.connected(this.hasUpdated)}willUpdate(changed){if(super.willUpdate(changed),this.hasUpdated){const switchingMode=this.renderRoot.querySelector('[part="trigger"]')!==null!==this.closedMode,focused=activeElementIn(this.shadowRoot??this.ownerDocument);this.catalogPicker.suppressControlEvents=switchingMode,this.transferControlFocus=switchingMode&&focused?.nodeType===1&&focused.matches('[part="trigger"], [part="combobox-input"]')}if(this.hasUpdated&&(changed.has("catalog")||changed.has("allowCustom")||changed.has("value"))){const activeValue=this.renderRoot.querySelector('[part="option"][data-active]')?.dataset.value,rows=this.closedMode?this.effectiveEntries:this.filteredEntries;this.catalogPicker.reconcileRows(activeValue,!1),this.reconcilePreviewVisibility(this.open,rows)}changed.has("preview")&&!this.preview&&this.stopInternalPreview()}disconnectedCallback(){super.disconnectedCallback(),this.stopInternalPreview(),this.catalogPicker.disconnected()}adoptedCallback(){super.adoptedCallback(),this.stopInternalPreview(),this.catalogPicker.adopted()}get value(){return this.catalogPicker.value}set value(next){this.catalogPicker.value=next}get defaultValue(){return this.catalogPicker.defaultValue}set defaultValue(next){this.catalogPicker.defaultValue=next}get name(){return this._name}set name(next){const old=this._name;this._name=next??"",this._name?this.setAttribute("name",this._name):this.removeAttribute("name"),this.requestUpdate("name",old)}get disabled(){return this._disabled}set disabled(next){const old=this._disabled;this._disabled=!!next,this.toggleAttribute("disabled",this._disabled),this._disabled&&(this.hide(),this.stopInternalPreview()),this.updateValidity(),this.requestUpdate("disabled",old)}get required(){return this._required}set required(next){const old=this._required;this._required=!!next,this.toggleAttribute("required",this._required),this.updateValidity(),this.requestUpdate("required",old)}get effectiveDisabled(){return this.disabled||this._fieldsetDisabled}get barredFromValidation(){return isBarredFromValidation(this,this.internals)}updateValidity(){this.barredFromValidation?this.validityController.setValidity({}):this.required&&!this.value?this.validityController.setValidity({valueMissing:!0},this.localize("voicePickerRequired")):this.validityController.setValidity({}),this.publishValidityStates()}publishValidityStates(){syncValidityStates(this.internals,{required:this.required,hasInteracted:this.touched,barred:this.barredFromValidation})}formResetCallback(){this.touched=!1,this.catalogPicker.resetValue()}formStateRestoreCallback(state2,_mode){this.catalogPicker.restoreState(state2)}formDisabledCallback(disabled){this._fieldsetDisabled=disabled,disabled&&(this.hide(),this.stopInternalPreview()),this.updateValidity(),this.requestUpdate()}checkValidity(){return this.internals.checkValidity()}reportValidity(){return this.touched=!0,this.publishValidityStates(),this.internals.reportValidity()}setCustomValidity(message){this.validityController.setCustomValidity(message??""),this.publishValidityStates()}get closedMode(){return this.catalogPicker.closedMode}get effectiveEntries(){return this.catalogPicker.effectiveEntries}get filteredEntries(){return this.catalogPicker.filteredEntries}get malformedCatalogEntries(){const raw=this.catalog;if(!raw||raw.length===0)return[];const out=[];for(const item of raw){const record=typeof item=="string"?{id:item,label:item}:item;typeof record?.id=="string"&&record.id.trim()!==""||out.push({...record,id:"",synthetic:!1})}return out}labelFor(id){return this.catalogPicker.labelFor(id)}show(){this.catalogPicker.show()}hide(){this.catalogPicker.hide()}updated(changed){super.updated(changed);const reposition=changed.has("open")||this.open&&(changed.has("catalog")||changed.has("allowCustom"));this.catalogPicker.updated(reposition),(changed.has("required")||changed.has("touched")||changed.has("value"))&&this.toggleAttribute("data-invalid",this.touched&&!this.internals.validity.valid),this.publishValidityStates(),this.transferControlFocus&&(this.transferControlFocus=!1,this.renderRoot.querySelector('[part="trigger"], [part="combobox-input"]')?.focus()),this.catalogPicker.suppressControlEvents=!1}get internalPreviewTargetId(){return this.pendingPreviewId??this.previewingId}reconcilePreviewVisibility(open,rows){const target=this.internalPreviewTargetId;if(target===null)return;const standaloneCandidate=open&&this.activeIndex>=0?rows[this.activeIndex]?.id??this.value:this.value,hasVisibleRow=open&&rows.some(entry=>entry.id===target&&!!entry.previewUrl);target!==standaloneCandidate&&!hasVisibleRow&&this.stopInternalPreview()}reconcilePreviewForActiveIndex(next){const target=this.internalPreviewTargetId;if(target!==null){const rows=this.closedMode?this.effectiveEntries:this.filteredEntries,nextCandidate=this.open&&next>=0?rows[next]?.id??this.value:this.value;target!==nextCandidate&&this.stopInternalPreview()}}get previewCandidateId(){return this.open&&this.activeIndex>=0?(this.closedMode?this.effectiveEntries:this.filteredEntries)[this.activeIndex]?.id??this.value:this.value}requestPreview(voiceId){if(!voiceId)return;const currentTarget=this.internalPreviewTargetId;currentTarget!==null&&currentTarget!==voiceId&&this.stopInternalPreview();const previewUrl=this.effectiveEntries.find(e=>e.id===voiceId)?.previewUrl;!this.emit("lr-preview-request",{voiceId,previewUrl},{cancelable:!0}).defaultPrevented&&previewUrl&&this.playInternal(voiceId,previewUrl)}playInternal(voiceId,url){const safe=safeMediaSrc(url);if(!safe)return;this.stopInternalPreview();const audio=this.ownerDocument.createElement("audio");audio.src=safe,audio.addEventListener("ended",this.onAudioEnded),audio.addEventListener("error",this.onAudioLoadFailure);const generation=++this.previewGeneration;this.audioEl=audio,this.pendingPreviewId=voiceId;let playResult;try{playResult=audio.play()}catch{this.onAudioLoadFailure(audio);return}Promise.resolve(playResult).then(()=>{generation!==this.previewGeneration||audio!==this.audioEl||this.pendingPreviewId!==voiceId||(this.pendingPreviewId=null,this.previewingId=voiceId,this.emit("lr-preview-change",{voiceId}))},()=>this.onAudioLoadFailure(audio))}stopInternalPreview(){const hadTarget=this.internalPreviewTargetId!==null||this.audioEl!==void 0;this.audioEl&&(this.audioEl.removeEventListener("ended",this.onAudioEnded),this.audioEl.removeEventListener("error",this.onAudioLoadFailure),this.audioEl.pause(),this.audioEl=void 0),hadTarget&&this.previewGeneration++,this.pendingPreviewId=null,this.previewingId!==null&&(this.previewingId=null,this.emit("lr-preview-change",{voiceId:null}))}get previewButtonLabel(){const candidate=this.previewCandidateId,playing=this.previewingId!==null&&this.previewingId===candidate,name=this.labelFor(candidate)||candidate;return playing?this.localize("voicePickerStopPreview"):this.localize("voicePickerPreview",void 0,{name})}renderRows(rows,activeId){return rows.map((entry,i)=>{const id=`${this.listId}-opt-${i}`,selected=entry.id!==""&&entry.id===this.value,meta=[entry.language,entry.description].filter(Boolean).join(" \xB7 ");return html`<div
+var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html,nothing}from"lit";import{property,state}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{installFormControlLabelSupport}from"../../../internal/form-control-labels.js";installFormControlLabelSupport();import{sizes}from"../../../internal/sizes.styles.js";import{hostAriaLabel,nextId}from"../../../internal/a11y.js";import{chevronIcon,playIcon,pauseIcon}from"../../../internal/icons.js";import{AnchoredValidityController,VALIDITY_ANCHOR}from"../../../internal/anchored-validity.js";import{attachInternalsSafely,getFormOwner,installCustomErrorProperty,isBarredFromValidation,setFormOwner}from"../../../internal/form-associated.js";import{installInvalidEventAlias}from"../../../internal/invalid-event-alias.js";import{syncValidityStates}from"../../../internal/custom-states.js";import{safeMediaSrc}from"../../../internal/safe-url.js";import{styles}from"./voice-picker.styles.js";import{trueDefaultBooleanConverter,trueDefaultSpellcheckConverter as spellcheckConverter}from"../../../internal/converters.js";import{CatalogPickerController}from"../../../internal/catalog-picker.js";import{activeElementIn}from"../../../internal/active-element.js";import{SlotPresenceController}from"../../../internal/slot-presence-controller.js";import{LYRA_DEFAULT_fieldRequired,LYRA_DEFAULT_noMatches,LYRA_DEFAULT_notInCatalog,LYRA_DEFAULT_voice,LYRA_DEFAULT_voicePickerNoVoices,LYRA_DEFAULT_voicePickerPreview,LYRA_DEFAULT_voicePickerRequired,LYRA_DEFAULT_voicePickerStopPreview}from"../../../internal/default-strings.generated.js";const MAX_VOICE_CATALOG_ENTRIES=1e4;function ownString(value,key){try{const descriptor=Object.getOwnPropertyDescriptor(value,key);return descriptor&&"value"in descriptor&&typeof descriptor.value=="string"?descriptor.value:void 0}catch{return}}function snapshotVoiceCatalog(value){if(!Array.isArray(value))return;const stringSnapshot=[],entrySnapshot=[];let objectCatalog=!1,length=0;try{length=Math.min(value.length,MAX_VOICE_CATALOG_ENTRIES)}catch{return Object.freeze(stringSnapshot)}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 candidate=descriptor.value;if(typeof candidate=="string"){objectCatalog?entrySnapshot.push(Object.freeze({id:candidate,label:candidate})):stringSnapshot.push(candidate);continue}if(candidate===null||typeof candidate!="object")continue;const id=ownString(candidate,"id"),label=ownString(candidate,"label");if(id===void 0||label===void 0)continue;objectCatalog||(entrySnapshot.push(...stringSnapshot.map(entry=>Object.freeze({id:entry,label:entry}))),objectCatalog=!0);const language=ownString(candidate,"language"),description=ownString(candidate,"description"),previewUrl=ownString(candidate,"previewUrl");entrySnapshot.push(Object.freeze({id,label,...language===void 0?{}:{language},...description===void 0?{}:{description},...previewUrl===void 0?{}:{previewUrl}}))}return Object.freeze(objectCatalog?entrySnapshot:stringSnapshot)}class LyraVoicePicker extends LyraElement{static{this.defaultStrings={...super.defaultStrings,fieldRequired:LYRA_DEFAULT_fieldRequired,noMatches:LYRA_DEFAULT_noMatches,notInCatalog:LYRA_DEFAULT_notInCatalog,voice:LYRA_DEFAULT_voice,voicePickerNoVoices:LYRA_DEFAULT_voicePickerNoVoices,voicePickerPreview:LYRA_DEFAULT_voicePickerPreview,voicePickerRequired:LYRA_DEFAULT_voicePickerRequired,voicePickerStopPreview:LYRA_DEFAULT_voicePickerStopPreview}}static{this.formAssociated=!0}static{this.styles=[LyraElement.styles,sizes,styles]}static{this.properties={customError:{attribute:"custom-error",reflect:!0,noAccessor:!0},disabled:{type:Boolean,reflect:!0,noAccessor:!0},required:{type:Boolean,reflect:!0,noAccessor:!0},value:{attribute:!1,noAccessor:!0},defaultValue:{attribute:"value",reflect:!1,useDefault:!0,noAccessor:!0},name:{reflect:!0,noAccessor:!0}}}get catalog(){return this._catalog}set catalog(next){const old=this._catalog;next!==old&&(this.internalPreviewTargetId!==null&&this.stopInternalPreview(),this._catalog=snapshotVoiceCatalog(next),this.requestUpdate("catalog",old))}get open(){return this.catalogPicker.open}set open(next){this.catalogPicker.setOpen(next)}get activeIndex(){return this.catalogPicker.activeIndex}get query(){return this.catalogPicker.query}constructor(){super(),this.provider="",this.allowCustom=!1,this.readonly=!1,this.preview=!0,this.label="",this.hint="",this.errorText="",this.placeholder="",this.spellcheck=!0,this.autocapitalize="",this.autoCorrect="",this.autocomplete="off",this.inputMode="",this.enterKeyHint="",this.size="m",this.touched=!1,this.slotPresence=new SlotPresenceController(this),this.previewingId=null,this.listId=nextId("voice-picker-list"),this.controlId=nextId("voice-picker-control"),this.pendingPreviewId=null,this.previewGeneration=0,this._fieldsetDisabled=!1,this._name="",this._disabled=!1,this._required=!1,this.transferControlFocus=!1,this.catalogPicker=new CatalogPickerController(this,{catalog:()=>this.catalog,allowCustom:()=>this.allowCustom,isReadonly:()=>this.readonly,locale:()=>this.effectiveLocale,searchableFields:entry=>[entry.id,entry.label,entry.language??"",entry.description??""],emitChange:detail=>this.emit("lr-change",detail),beforeValueChange:value=>{const previewTarget=this.internalPreviewTargetId;previewTarget!==null&&previewTarget!==value&&this.stopInternalPreview()},beforeActiveIndexChange:next=>this.reconcilePreviewForActiveIndex(next),afterQueryChange:()=>this.reconcilePreviewVisibility(this.open,this.catalogPicker.filteredEntries),onValueChange:(value,oldValue)=>{this.internals.setFormValue(value),this.updateValidity(),this.requestUpdate("value",oldValue)},onDefaultValueChange:(_value,oldValue)=>this.requestUpdate("defaultValue",oldValue),onStateChange:(state2,oldValue)=>{state2==="open"?(this.catalogPicker.open||this.reconcilePreviewVisibility(!1,[]),this.requestUpdate("open",oldValue)):this.requestUpdate()},onControlBlur:()=>{this.effectiveDisabled||(this.touched=!0)}}),this.onAudioEnded=event=>{event.currentTarget===this.audioEl&&this.stopInternalPreview()},this.onAudioLoadFailure=eventOrAudio=>{const direct=eventOrAudio,isDomErrorEvent=direct.localName!=="audio",audioLike=direct.localName==="audio"?eventOrAudio:eventOrAudio.currentTarget,failedAudio=audioLike?.localName==="audio"&&typeof audioLike.pause=="function"&&typeof audioLike.removeEventListener=="function"?audioLike:void 0;if(!failedAudio||(failedAudio.removeEventListener("ended",this.onAudioEnded),failedAudio.removeEventListener("error",this.onAudioLoadFailure),failedAudio.pause(),failedAudio!==this.audioEl))return;const pendingVoiceId=this.pendingPreviewId;this.previewGeneration++,this.audioEl=void 0,this.pendingPreviewId=null,isDomErrorEvent&&this.previewingId===null&&pendingVoiceId!==null&&(this.previewingId=pendingVoiceId,this.emit("lr-preview-change",{voiceId:pendingVoiceId})),this.previewingId!==null&&(this.previewingId=null,this.emit("lr-preview-change",{voiceId:null}))},this.onPreviewButtonClick=()=>{const candidate=this.previewCandidateId;candidate&&(this.internalPreviewTargetId===candidate?this.stopInternalPreview():this.requestPreview(candidate))},this.onOptionPreviewClick=(e,entry)=>{e.stopPropagation(),this.internalPreviewTargetId===entry.id?this.stopInternalPreview():this.requestPreview(entry.id)},this.onTriggerClick=()=>{this.effectiveDisabled||(this.open?this.hide():this.show())},this.onControlBlur=event=>{this.catalogPicker.handleControlBlur(event)},this.onControlFocus=event=>{this.catalogPicker.handleControlFocus(event)},this.onTriggerKeyDown=e=>{this.catalogPicker.handleTriggerKeyDown(e)},this.onComboMouseDown=e=>{this.catalogPicker.handleComboMouseDown(e)},this.onInputFocus=event=>{this.catalogPicker.handleInputFocus(event)},this.onInput=e=>{this.catalogPicker.handleInput(e)},this.onInputKeyDown=e=>{this.catalogPicker.handleInputKeyDown(e)},this.onListboxMouseDown=e=>{this.catalogPicker.handleListboxMouseDown(e)},this.onListboxClick=e=>{this.catalogPicker.handleListboxClick(e)},this.internals=attachInternalsSafely(this),this.validityController=new AnchoredValidityController(this,this.internals,()=>this[VALIDITY_ANCHOR]()),installCustomErrorProperty(this,()=>this.validityController.customValidityMessage),installInvalidEventAlias(this,init=>this.emit("lr-invalid",null,init)),this.internals.setFormValue("")}get form(){return getFormOwner(this.internals)}set form(owner){setFormOwner(this,owner)}getForm(){return getFormOwner(this.internals)}get labels(){return this.internals.labels}get validity(){return this.internals.validity}get validationMessage(){return this.internals.validationMessage}get willValidate(){return this.internals.willValidate}[VALIDITY_ANCHOR](){return this.renderRoot?.querySelector('[part="trigger"], [part="combobox-input"]')??null}click(){this.catalogPicker.click()}focus(options){this.catalogPicker.focus(options)}blur(){this.catalogPicker.blur()}get input(){return this.catalogPicker.input}get selectionStart(){return this.input?.selectionStart??null}set selectionStart(value){this.input&&(this.input.selectionStart=value)}get selectionEnd(){return this.input?.selectionEnd??null}set selectionEnd(value){this.input&&(this.input.selectionEnd=value)}get selectionDirection(){return this.input?.selectionDirection??null}set selectionDirection(value){this.input&&(this.input.selectionDirection=value)}select(){this.catalogPicker.select()}setSelectionRange(start,end,direction){this.catalogPicker.setSelectionRange(start,end,direction)}setRangeText(replacement,start,end,selectMode){this.catalogPicker.setRangeText(replacement,start,end,selectMode)}connectedCallback(){super.connectedCallback(),this.updateValidity(),this.catalogPicker.connected(this.hasUpdated)}willUpdate(changed){if(super.willUpdate(changed),this.hasUpdated){const switchingMode=this.renderRoot.querySelector('[part="trigger"]')!==null!==this.closedMode,focused=activeElementIn(this.shadowRoot??this.ownerDocument);this.catalogPicker.suppressControlEvents=switchingMode,this.transferControlFocus=switchingMode&&focused?.nodeType===1&&focused.matches('[part="trigger"], [part="combobox-input"]')}if(this.hasUpdated&&(changed.has("catalog")||changed.has("allowCustom")||changed.has("value"))){const activeValue=this.renderRoot.querySelector('[part="option"][data-active]')?.dataset.value,rows=this.closedMode?this.effectiveEntries:this.filteredEntries;this.catalogPicker.reconcileRows(activeValue,!1),this.reconcilePreviewVisibility(this.open,rows)}changed.has("preview")&&!this.preview&&this.stopInternalPreview()}disconnectedCallback(){super.disconnectedCallback(),this.stopInternalPreview(),this.catalogPicker.disconnected()}adoptedCallback(){super.adoptedCallback(),this.stopInternalPreview(),this.catalogPicker.adopted()}get value(){return this.catalogPicker.value}set value(next){this.catalogPicker.value=next}get defaultValue(){return this.catalogPicker.defaultValue}set defaultValue(next){this.catalogPicker.defaultValue=next}get name(){return this._name}set name(next){const old=this._name;this._name=next??"",this._name?this.setAttribute("name",this._name):this.removeAttribute("name"),this.requestUpdate("name",old)}get disabled(){return this._disabled}set disabled(next){const old=this._disabled;this._disabled=!!next,this.toggleAttribute("disabled",this._disabled),this._disabled&&(this.hide(),this.stopInternalPreview()),this.updateValidity(),this.requestUpdate("disabled",old)}get required(){return this._required}set required(next){const old=this._required;this._required=!!next,this.toggleAttribute("required",this._required),this.updateValidity(),this.requestUpdate("required",old)}get effectiveDisabled(){return this.disabled||this._fieldsetDisabled}get barredFromValidation(){return isBarredFromValidation(this,this.internals)}updateValidity(){this.barredFromValidation?this.validityController.setValidity({}):this.required&&!this.value?this.validityController.setValidity({valueMissing:!0},this.localize("voicePickerRequired")):this.validityController.setValidity({}),this.publishValidityStates()}publishValidityStates(){syncValidityStates(this.internals,{required:this.required,hasInteracted:this.touched,barred:this.barredFromValidation})}formResetCallback(){this.touched=!1,this.catalogPicker.resetValue()}formStateRestoreCallback(state2,_mode){this.catalogPicker.restoreState(state2)}formDisabledCallback(disabled){this._fieldsetDisabled=disabled,disabled&&(this.hide(),this.stopInternalPreview()),this.updateValidity(),this.requestUpdate()}checkValidity(){return this.internals.checkValidity()}reportValidity(){return this.touched=!0,this.publishValidityStates(),this.internals.reportValidity()}setCustomValidity(message){this.validityController.setCustomValidity(message??""),this.publishValidityStates()}get closedMode(){return this.catalogPicker.closedMode}get effectiveEntries(){return this.catalogPicker.effectiveEntries}get filteredEntries(){return this.catalogPicker.filteredEntries}get malformedCatalogEntries(){const raw=this.catalog;if(!raw||raw.length===0)return[];const out=[];for(const item of raw){const record=typeof item=="string"?{id:item,label:item}:item;typeof record?.id=="string"&&record.id.trim()!==""||out.push({...record,id:"",synthetic:!1})}return out}labelFor(id){return this.catalogPicker.labelFor(id)}show(){this.catalogPicker.show()}hide(){this.catalogPicker.hide()}updated(changed){super.updated(changed);const reposition=changed.has("open")||this.open&&(changed.has("catalog")||changed.has("allowCustom"));this.catalogPicker.updated(reposition),(changed.has("required")||changed.has("readonly")||changed.has("touched")||changed.has("value"))&&(changed.has("readonly")&&this.updateValidity(),this.toggleAttribute("data-invalid",this.touched&&!this.internals.validity.valid)),this.publishValidityStates(),this.transferControlFocus&&(this.transferControlFocus=!1,this.renderRoot.querySelector('[part="trigger"], [part="combobox-input"]')?.focus()),this.catalogPicker.suppressControlEvents=!1}get internalPreviewTargetId(){return this.pendingPreviewId??this.previewingId}reconcilePreviewVisibility(open,rows){const target=this.internalPreviewTargetId;if(target===null)return;const standaloneCandidate=open&&this.activeIndex>=0?rows[this.activeIndex]?.id??this.value:this.value,hasVisibleRow=open&&rows.some(entry=>entry.id===target&&!!entry.previewUrl);target!==standaloneCandidate&&!hasVisibleRow&&this.stopInternalPreview()}reconcilePreviewForActiveIndex(next){const target=this.internalPreviewTargetId;if(target!==null){const rows=this.closedMode?this.effectiveEntries:this.filteredEntries,nextCandidate=this.open&&next>=0?rows[next]?.id??this.value:this.value;target!==nextCandidate&&this.stopInternalPreview()}}get previewCandidateId(){return this.open&&this.activeIndex>=0?(this.closedMode?this.effectiveEntries:this.filteredEntries)[this.activeIndex]?.id??this.value:this.value}requestPreview(voiceId){if(!voiceId)return;const currentTarget=this.internalPreviewTargetId;currentTarget!==null&&currentTarget!==voiceId&&this.stopInternalPreview();const previewUrl=this.effectiveEntries.find(e=>e.id===voiceId)?.previewUrl;!this.emit("lr-preview-request",{voiceId,previewUrl},{cancelable:!0}).defaultPrevented&&previewUrl&&this.playInternal(voiceId,previewUrl)}playInternal(voiceId,url){const safe=safeMediaSrc(url);if(!safe)return;this.stopInternalPreview();const audio=this.ownerDocument.createElement("audio");audio.src=safe,audio.addEventListener("ended",this.onAudioEnded),audio.addEventListener("error",this.onAudioLoadFailure);const generation=++this.previewGeneration;this.audioEl=audio,this.pendingPreviewId=voiceId;let playResult;try{playResult=audio.play()}catch{this.onAudioLoadFailure(audio);return}Promise.resolve(playResult).then(()=>{generation!==this.previewGeneration||audio!==this.audioEl||this.pendingPreviewId!==voiceId||(this.pendingPreviewId=null,this.previewingId=voiceId,this.emit("lr-preview-change",{voiceId}))},()=>this.onAudioLoadFailure(audio))}stopInternalPreview(){const hadTarget=this.internalPreviewTargetId!==null||this.audioEl!==void 0;this.audioEl&&(this.audioEl.removeEventListener("ended",this.onAudioEnded),this.audioEl.removeEventListener("error",this.onAudioLoadFailure),this.audioEl.pause(),this.audioEl=void 0),hadTarget&&this.previewGeneration++,this.pendingPreviewId=null,this.previewingId!==null&&(this.previewingId=null,this.emit("lr-preview-change",{voiceId:null}))}get previewButtonLabel(){const candidate=this.previewCandidateId,playing=this.previewingId!==null&&this.previewingId===candidate,name=this.labelFor(candidate)||candidate;return playing?this.localize("voicePickerStopPreview"):this.localize("voicePickerPreview",void 0,{name})}renderRows(rows,activeId){return rows.map((entry,i)=>{const id=`${this.listId}-opt-${i}`,selected=entry.id!==""&&entry.id===this.value,meta=[entry.language,entry.description].filter(Boolean).join(" · ");return html`<div
         part="option"
         id=${id}
         role="option"
@@ -66,6 +66,7 @@ var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3
           aria-label=${hostAriaLabel(this)??(hasLabel?nothing:this.placeholder||this.localize("voice"))}
           aria-describedby=${describedBy||nothing}
           aria-required=${this.required?"true":"false"}
+          aria-readonly=${this.readonly?"true":"false"}
           aria-invalid=${this.touched&&!this.internals.validity.valid?"true":"false"}
           ?disabled=${this.effectiveDisabled}
           @click=${this.onTriggerClick}
@@ -99,6 +100,7 @@ var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3
             aria-autocomplete="list"
             aria-describedby=${describedBy||nothing}
             aria-required=${this.required?"true":"false"}
+            aria-readonly=${this.readonly?"true":"false"}
             aria-invalid=${this.touched&&!this.internals.validity.valid?"true":"false"}
             autocomplete=${this.autocomplete||nothing}
             spellcheck=${this.spellcheck}
@@ -107,6 +109,7 @@ var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3
             inputmode=${this.inputMode||nothing}
             enterkeyhint=${this.enterKeyHint||nothing}
             .value=${this.open?this.query:this.labelFor(this.value)}
+            .readOnly=${this.readonly}
             placeholder=${this.placeholder}
             ?disabled=${this.effectiveDisabled}
             @input=${this.onInput}
@@ -122,4 +125,4 @@ var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3
       ${this.renderHintError(hasError,hasHint)}
     `}render(){return html`<div part="form-control">
       ${this.closedMode?this.renderClosed():this.renderFreeText()}
-    </div>`}}__decorate([property()],LyraVoicePicker.prototype,"provider",void 0),__decorate([property({attribute:!1})],LyraVoicePicker.prototype,"catalog",null),__decorate([property({type:Boolean,reflect:!0,attribute:"allow-custom"})],LyraVoicePicker.prototype,"allowCustom",void 0),__decorate([property({reflect:!0,converter:trueDefaultBooleanConverter})],LyraVoicePicker.prototype,"preview",void 0),__decorate([property()],LyraVoicePicker.prototype,"label",void 0),__decorate([property()],LyraVoicePicker.prototype,"hint",void 0),__decorate([property({attribute:"error-text"})],LyraVoicePicker.prototype,"errorText",void 0),__decorate([property()],LyraVoicePicker.prototype,"placeholder",void 0),__decorate([property({converter:spellcheckConverter})],LyraVoicePicker.prototype,"spellcheck",void 0),__decorate([property()],LyraVoicePicker.prototype,"autocapitalize",void 0),__decorate([property({attribute:"autocorrect"})],LyraVoicePicker.prototype,"autoCorrect",void 0),__decorate([property()],LyraVoicePicker.prototype,"autocomplete",void 0),__decorate([property({attribute:"inputmode"})],LyraVoicePicker.prototype,"inputMode",void 0),__decorate([property({attribute:"enterkeyhint"})],LyraVoicePicker.prototype,"enterKeyHint",void 0),__decorate([property({type:Boolean,reflect:!0})],LyraVoicePicker.prototype,"open",null),__decorate([property({reflect:!0})],LyraVoicePicker.prototype,"size",void 0),__decorate([state()],LyraVoicePicker.prototype,"touched",void 0),__decorate([state()],LyraVoicePicker.prototype,"previewingId",void 0);export{LyraVoicePicker};
+    </div>`}}__decorate([property()],LyraVoicePicker.prototype,"provider",void 0),__decorate([property({attribute:!1})],LyraVoicePicker.prototype,"catalog",null),__decorate([property({type:Boolean,reflect:!0,attribute:"allow-custom"})],LyraVoicePicker.prototype,"allowCustom",void 0),__decorate([property({type:Boolean,reflect:!0})],LyraVoicePicker.prototype,"readonly",void 0),__decorate([property({reflect:!0,converter:trueDefaultBooleanConverter})],LyraVoicePicker.prototype,"preview",void 0),__decorate([property()],LyraVoicePicker.prototype,"label",void 0),__decorate([property()],LyraVoicePicker.prototype,"hint",void 0),__decorate([property({attribute:"error-text"})],LyraVoicePicker.prototype,"errorText",void 0),__decorate([property()],LyraVoicePicker.prototype,"placeholder",void 0),__decorate([property({converter:spellcheckConverter})],LyraVoicePicker.prototype,"spellcheck",void 0),__decorate([property()],LyraVoicePicker.prototype,"autocapitalize",void 0),__decorate([property({attribute:"autocorrect"})],LyraVoicePicker.prototype,"autoCorrect",void 0),__decorate([property()],LyraVoicePicker.prototype,"autocomplete",void 0),__decorate([property({attribute:"inputmode"})],LyraVoicePicker.prototype,"inputMode",void 0),__decorate([property({attribute:"enterkeyhint"})],LyraVoicePicker.prototype,"enterKeyHint",void 0),__decorate([property({type:Boolean,reflect:!0})],LyraVoicePicker.prototype,"open",null),__decorate([property({reflect:!0})],LyraVoicePicker.prototype,"size",void 0),__decorate([state()],LyraVoicePicker.prototype,"touched",void 0),__decorate([state()],LyraVoicePicker.prototype,"previewingId",void 0);export{LyraVoicePicker};

package/dist/components/conversation/voice-picker/voice-picker.styles.js

@@ -1 +1 @@
-import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/form-control.styles.js";const styles=css` :host { position: relative; display: inline-block; inline-size: 100%; min-inline-size: 0; max-inline-size: var(--lr-size-24rem); --_lr-voice-picker-gap-default: var(--lr-space-xs); --_lr-voice-picker-radius-default: var(--lr-form-control-radius); } :host(:disabled) { cursor: not-allowed; } [part='form-control-label'] { display: block; margin-block-end: var(--lr-space-xs); overflow-wrap: anywhere; font-size: var(--lr-font-size-md-sm); font-weight: var(--lr-font-weight-semibold); } [part='form-control-label'][hidden] { display: none; } ${formControlRequiredMarker} .control-row { display: flex; align-items: stretch; gap: var(--lr-voice-picker-gap, var(--_lr-voice-picker-gap-default)); } [part='trigger'], [part='combobox'] { display: flex; align-items: center; gap: var(--lr-voice-picker-gap, var(--_lr-voice-picker-gap-default)); flex: 1 1 auto; min-inline-size: 0; min-block-size: var(--lr-form-control-height); box-sizing: border-box; padding: var(--lr-form-control-padding-block) var(--lr-form-control-padding-inline); border: var(--lr-border-width-thin) solid var(--lr-color-border); border-radius: var(--lr-voice-picker-radius, var(--_lr-voice-picker-radius-default)); background: var(--lr-color-surface); color: inherit; font: inherit; font-size: var(--lr-form-control-font-size); } [part='trigger'] { cursor: pointer; text-align: start; } [part='combobox'] { cursor: text; } [part='trigger']:hover:not(:disabled) { border-color: var(--lr-color-brand); } [part='trigger']:active:not(:disabled) { border-color: var(--lr-color-brand); background: color-mix(in oklab, var(--lr-color-surface), var(--lr-color-mix-partner) var(--lr-color-mix-active)); } [part='trigger']:focus-visible, [part='combobox']:focus-within { outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); outline-offset: var(--lr-focus-ring-offset); } :host([open]) [part='trigger'] { border-color: var(--lr-voice-picker-open-border-color, var(--lr-color-brand)); } :host(:disabled) [part='trigger'], :host(:disabled) [part='combobox'] { opacity: var(--lr-opacity-disabled); cursor: not-allowed; } [part='provider-badge'] { flex: 0 1 auto; min-inline-size: 0; max-inline-size: 40%; overflow: hidden; text-overflow: ellipsis; padding-inline-end: var(--lr-space-xs); margin-inline-end: var(--lr-space-xs); border-inline-end: var(--lr-border-width-thin) solid var(--lr-color-border); font-size: var(--lr-size-0-6875rem); font-weight: var(--lr-font-weight-bold); text-transform: uppercase; letter-spacing: var(--lr-size-0-04em); color: var(--lr-color-text-quiet); white-space: nowrap; } .trigger-label { flex: 1 1 auto; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .trigger-label[data-placeholder] { color: var(--lr-color-text-quiet); } [part='combobox-input'] { flex: 1 1 auto; min-inline-size: 0; border: none; outline: none; background: transparent; color: inherit; font: inherit; } [part='combobox-input']::placeholder { color: var(--lr-color-text-quiet); } [part='expand-icon'] { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; color: var(--lr-color-text-quiet); min-inline-size: min(var(--lr-icon-button-size), var(--lr-form-control-height)); min-block-size: min(var(--lr-icon-button-size), var(--lr-form-control-height)); line-height: var(--lr-line-height-none); } [part='expand-icon'] svg { transform: rotate(90deg); } [part='preview-button'] { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; inline-size: max(var(--lr-icon-button-size), var(--lr-form-control-height)); block-size: max(var(--lr-icon-button-size), var(--lr-form-control-height)); min-inline-size: var(--lr-icon-button-size); min-block-size: var(--lr-icon-button-size); border: var(--lr-border-width-thin) solid var(--lr-color-border); border-radius: var(--lr-voice-picker-radius, var(--_lr-voice-picker-radius-default)); background: var(--lr-color-surface); color: var(--lr-color-text); cursor: pointer; } [part='preview-button']:hover:not(:disabled) { background: var(--lr-color-brand-quiet); } [part='preview-button']:active:not(:disabled) { background: color-mix(in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active)); } [part='preview-button']:focus-visible { outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); outline-offset: var(--lr-focus-ring-offset); } [part='preview-button']:disabled { opacity: var(--lr-opacity-disabled); cursor: not-allowed; } [part='preview-button'][aria-pressed='true'] { border-color: var(--lr-voice-picker-preview-active-border, var(--lr-color-brand)); color: var(--lr-voice-picker-preview-active-color, var(--lr-color-brand)); } [part='listbox'] { position: fixed; z-index: var(--lr-layer-dropdown); box-sizing: border-box; max-block-size: min(var(--lr-size-18rem), var(--lr-positioner-available-block-size, var(--lr-size-18rem))); overflow-y: auto; overflow-x: hidden; inline-size: max-content; min-inline-size: min(var(--lr-size-12rem), var(--lr-positioner-available-inline-size, var(--lr-size-12rem))); max-inline-size: min(var(--lr-popover-viewport-clamp), var(--lr-size-28rem), var(--lr-positioner-available-inline-size, 100vw)); padding: var(--lr-space-xs); background: var(--lr-color-surface); border: var(--lr-border-width-thin) solid var(--lr-color-border); border-radius: var(--lr-voice-picker-radius, var(--_lr-voice-picker-radius-default)); box-shadow: var(--lr-shadow-m); visibility: hidden; opacity: 0; transform: translateY(var(--lr-size-neg-0-25rem)); transition: opacity var(--lr-transition-fast), transform var(--lr-transition-fast), visibility var(--lr-transition-fast); } :host([open]) [part='listbox'] { visibility: visible; opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { [part='listbox'] { transition: none !important; } } [part='option'] { display: flex; align-items: center; gap: var(--lr-voice-picker-gap, var(--_lr-voice-picker-gap-default)); inline-size: 100%; box-sizing: border-box; padding: var(--lr-space-xs) var(--lr-space-s); border: var(--lr-border-width-thin) solid transparent; border-radius: var(--lr-voice-picker-radius, var(--_lr-voice-picker-radius-default)); background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; } [part='option'][aria-selected='true'] { border-color: var(--lr-voice-picker-option-selected-border, var(--lr-color-brand)); color: var(--lr-voice-picker-option-selected-color, var(--lr-color-brand)); background: var(--lr-voice-picker-option-selected-bg, transparent); font-weight: var( --lr-voice-picker-option-selected-font-weight, var(--lr-font-weight-semibold) ); } [part='option']:hover, [part='option'][data-active] { background: var(--lr-voice-picker-option-active-bg, var(--lr-color-brand-quiet)); } [part='option']:active { background: color-mix( in oklab, var(--lr-voice-picker-option-active-bg, var(--lr-color-brand-quiet)), var(--lr-color-mix-partner) var(--lr-color-mix-active) ); } [part='option-label'] { flex: 1 1 auto; min-inline-size: 0; display: flex; flex-direction: column; overflow: hidden; } [part='option-label'] > :first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } [part='option-meta'] { font-size: var(--lr-size-0-6875rem); color: var(--lr-color-text-quiet); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } [part='option'][data-synthetic] { border-style: var(--lr-voice-picker-option-synthetic-border-style, dashed); border-color: var(--lr-voice-picker-option-synthetic-border-color, var(--lr-color-border)); } [part='option'][data-synthetic] [part='option-label'] { font-style: var(--lr-voice-picker-option-synthetic-font-style, italic); } [part='option-badge'] { flex: 0 0 auto; font-size: var(--lr-size-0-6875rem); font-style: normal; font-weight: var(--lr-font-weight-normal); color: var(--lr-color-text-quiet); white-space: nowrap; } [part='option-preview'] { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-inline-size: var(--lr-icon-button-size); min-block-size: var(--lr-icon-button-size); border-radius: var(--lr-voice-picker-radius, var(--_lr-voice-picker-radius-default)); color: var(--lr-color-text-quiet); cursor: pointer; } [part='option-preview']:hover { background: var(--lr-voice-picker-preview-hover-bg, var(--lr-color-brand-quiet)); color: var(--lr-voice-picker-preview-hover-color, var(--lr-color-brand)); } [part='option-preview']:active { background: color-mix( in oklab, var(--lr-voice-picker-preview-hover-bg, var(--lr-color-brand-quiet)), var(--lr-color-mix-partner) var(--lr-color-mix-active) ); color: var(--lr-voice-picker-preview-hover-color, var(--lr-color-brand)); } [part='empty'] { padding: var(--lr-space-m); color: var(--lr-color-text-quiet); font-size: var(--lr-font-size-md-sm); } [part='hint'] { margin-block-start: var(--lr-space-xs); overflow-wrap: anywhere; font-size: var(--lr-font-size-sm); color: var(--lr-color-text-quiet); } [part='hint'][hidden] { display: none; } [part='error'] { margin-block-start: var(--lr-space-xs); overflow-wrap: anywhere; font-size: var(--lr-font-size-sm); color: var(--lr-color-danger); } [part='error'][hidden] { display: none; } `;export{styles};
+import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/form-control.styles.js";const styles=css` :host { position: relative; display: inline-block; inline-size: 100%; min-inline-size: 0; max-inline-size: var(--lr-size-24rem); --_lr-voice-picker-gap-default: var(--lr-space-xs); --_lr-voice-picker-radius-default: var(--lr-form-control-radius); } :host(:disabled) { cursor: not-allowed; } [part='form-control-label'] { display: block; margin-block-end: var(--lr-space-xs); overflow-wrap: anywhere; font-size: var(--lr-font-size-md-sm); font-weight: var(--lr-font-weight-semibold); } [part='form-control-label'][hidden] { display: none; } ${formControlRequiredMarker} .control-row { display: flex; align-items: stretch; gap: var(--lr-voice-picker-gap, var(--_lr-voice-picker-gap-default)); } [part='trigger'], [part='combobox'] { display: flex; align-items: center; gap: var(--lr-voice-picker-gap, var(--_lr-voice-picker-gap-default)); flex: 1 1 auto; min-inline-size: 0; min-block-size: var(--lr-form-control-height); box-sizing: border-box; padding: var(--lr-form-control-padding-block) var(--lr-form-control-padding-inline); border: var(--lr-border-width-thin) solid var(--lr-color-border); border-radius: var(--lr-voice-picker-radius, var(--_lr-voice-picker-radius-default)); background: var(--lr-color-surface); color: inherit; font: inherit; font-size: var(--lr-form-control-font-size); } [part='trigger'] { cursor: pointer; text-align: start; } [part='combobox'] { cursor: text; } [part='trigger']:hover:not(:disabled) { border-color: var(--lr-color-brand); } [part='trigger']:active:not(:disabled) { border-color: var(--lr-color-brand); background: color-mix(in oklab, var(--lr-color-surface), var(--lr-color-mix-partner) var(--lr-color-mix-active)); } [part='trigger']:focus-visible, [part='combobox']:focus-within { outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); outline-offset: var(--lr-focus-ring-offset); } :host([open]) [part='trigger'] { border-color: var(--lr-voice-picker-open-border-color, var(--lr-color-brand)); } :host(:disabled) [part='trigger'], :host(:disabled) [part='combobox'] { opacity: var(--lr-opacity-disabled); cursor: not-allowed; } [part='provider-badge'] { flex: 0 1 auto; min-inline-size: 0; max-inline-size: 40%; overflow: hidden; text-overflow: ellipsis; padding-inline-end: var(--lr-space-xs); margin-inline-end: var(--lr-space-xs); border-inline-end: var(--lr-border-width-thin) solid var(--lr-color-border); font-size: var(--lr-size-0-6875rem); font-weight: var(--lr-font-weight-bold); text-transform: uppercase; letter-spacing: var(--lr-size-0-04em); color: var(--lr-color-text-quiet); white-space: nowrap; } .trigger-label { flex: 1 1 auto; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .trigger-label[data-placeholder] { color: var(--lr-color-text-quiet); } [part='combobox-input'] { flex: 1 1 auto; min-inline-size: 0; border: none; outline: none; background: transparent; color: inherit; font: inherit; } [part='combobox-input']::placeholder { color: var(--lr-color-text-quiet); } [part='expand-icon'] { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; color: var(--lr-color-text-quiet); min-inline-size: min(var(--lr-icon-button-size), var(--lr-form-control-height)); min-block-size: min(var(--lr-icon-button-size), var(--lr-form-control-height)); line-height: var(--lr-line-height-none); } [part='expand-icon'] svg { transform: rotate(90deg); } [part='preview-button'] { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; inline-size: max(var(--lr-icon-button-size), var(--lr-form-control-height)); block-size: max(var(--lr-icon-button-size), var(--lr-form-control-height)); min-inline-size: var(--lr-icon-button-size); min-block-size: var(--lr-icon-button-size); border: var(--lr-border-width-thin) solid var(--lr-color-border); border-radius: var(--lr-voice-picker-radius, var(--_lr-voice-picker-radius-default)); background: var(--lr-color-surface); color: var(--lr-color-text); font: inherit; cursor: pointer; } [part='preview-button']:hover:not(:disabled) { background: var(--lr-voice-picker-preview-hover-bg, var(--lr-color-brand-quiet)); color: var(--lr-voice-picker-preview-hover-color, var(--lr-color-brand)); } [part='preview-button']:active:not(:disabled) { background: color-mix( in oklab, var(--lr-voice-picker-preview-hover-bg, var(--lr-color-brand-quiet)), var(--lr-color-mix-partner) var(--lr-color-mix-active) ); color: var(--lr-voice-picker-preview-hover-color, var(--lr-color-brand)); } [part='preview-button']:focus-visible { outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); outline-offset: var(--lr-focus-ring-offset); } [part='preview-button']:disabled { opacity: var(--lr-opacity-disabled); cursor: not-allowed; } [part='preview-button'][aria-pressed='true'] { border-color: var(--lr-voice-picker-preview-active-border, var(--lr-color-brand)); color: var(--lr-voice-picker-preview-active-color, var(--lr-color-brand)); } [part='listbox'] { position: fixed; z-index: var(--lr-layer-dropdown); box-sizing: border-box; max-block-size: min(var(--lr-size-18rem), var(--lr-positioner-available-block-size, var(--lr-size-18rem))); overflow-y: auto; overflow-x: hidden; inline-size: max-content; min-inline-size: min(var(--lr-size-12rem), var(--lr-positioner-available-inline-size, var(--lr-size-12rem))); max-inline-size: min(var(--lr-popover-viewport-clamp), var(--lr-size-28rem), var(--lr-positioner-available-inline-size, 100vw)); padding: var(--lr-space-xs); background: var(--lr-color-surface); border: var(--lr-border-width-thin) solid var(--lr-color-border); border-radius: var(--lr-voice-picker-radius, var(--_lr-voice-picker-radius-default)); box-shadow: var(--lr-shadow-m); visibility: hidden; opacity: 0; transform: translateY(var(--lr-size-neg-0-25rem)); transition: opacity var(--lr-transition-fast), transform var(--lr-transition-fast), visibility var(--lr-transition-fast); } :host([open]) [part='listbox'] { visibility: visible; opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { [part='listbox'] { transition: none !important; } } [part='option'] { display: flex; align-items: center; gap: var(--lr-voice-picker-gap, var(--_lr-voice-picker-gap-default)); inline-size: 100%; box-sizing: border-box; padding: var(--lr-space-xs) var(--lr-space-s); border: var(--lr-border-width-thin) solid transparent; border-radius: var(--lr-voice-picker-radius, var(--_lr-voice-picker-radius-default)); background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; } [part='option'][aria-selected='true'] { border-color: var(--lr-voice-picker-option-selected-border, var(--lr-color-brand)); color: var(--lr-voice-picker-option-selected-color, var(--lr-color-brand)); background: var(--lr-voice-picker-option-selected-bg, transparent); font-weight: var( --lr-voice-picker-option-selected-font-weight, var(--lr-font-weight-semibold) ); } [part='option']:hover, [part='option'][data-active] { background: var(--lr-voice-picker-option-active-bg, var(--lr-color-brand-quiet)); } [part='option']:active { background: color-mix( in oklab, var(--lr-voice-picker-option-active-bg, var(--lr-color-brand-quiet)), var(--lr-color-mix-partner) var(--lr-color-mix-active) ); } [part='option-label'] { flex: 1 1 auto; min-inline-size: 0; display: flex; flex-direction: column; overflow: hidden; } [part='option-label'] > :first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } [part='option-meta'] { font-size: var(--lr-size-0-6875rem); color: var(--lr-color-text-quiet); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } [part='option']:hover [part='option-meta'], [part='option'][data-active] [part='option-meta'] { color: var(--lr-color-text); } [part='option'][data-synthetic] { border-style: var(--lr-voice-picker-option-synthetic-border-style, dashed); border-color: var(--lr-voice-picker-option-synthetic-border-color, var(--lr-color-border)); } [part='option'][data-synthetic] [part='option-label'] { font-style: var(--lr-voice-picker-option-synthetic-font-style, italic); } [part='option-badge'] { flex: 0 0 auto; font-size: var(--lr-size-0-6875rem); font-style: normal; font-weight: var(--lr-font-weight-normal); color: var(--lr-color-text-quiet); white-space: nowrap; } [part='option-preview'] { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-inline-size: var(--lr-icon-button-size); min-block-size: var(--lr-icon-button-size); border-radius: var(--lr-voice-picker-radius, var(--_lr-voice-picker-radius-default)); color: var(--lr-color-text-quiet); cursor: pointer; } [part='option-preview']:hover { background: var(--lr-voice-picker-preview-hover-bg, var(--lr-color-brand-quiet)); color: var(--lr-voice-picker-preview-hover-color, var(--lr-color-brand)); } [part='option-preview']:active { background: color-mix( in oklab, var(--lr-voice-picker-preview-hover-bg, var(--lr-color-brand-quiet)), var(--lr-color-mix-partner) var(--lr-color-mix-active) ); color: var(--lr-voice-picker-preview-hover-color, var(--lr-color-brand)); } [part='empty'] { padding: var(--lr-space-m); color: var(--lr-color-text-quiet); font-size: var(--lr-font-size-md-sm); } [part='hint'] { margin-block-start: var(--lr-space-xs); overflow-wrap: anywhere; font-size: var(--lr-font-size-sm); color: var(--lr-color-text-quiet); } [part='hint'][hidden] { display: none; } [part='error'] { margin-block-start: var(--lr-space-xs); overflow-wrap: anywhere; font-size: var(--lr-font-size-sm); color: var(--lr-color-danger); } [part='error'][hidden] { display: none; } `;export{styles};

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

@@ -1,4 +1,4 @@
-import{type TemplateResult}from'lit';import{LyraElement}from'../../../internal/lyra-element.js';import type{LyraDatePickerFirstDayOfWeek}from'../../forms/date-picker/date-picker.class.js';export interface CalendarEvent{readonly id?:string;readonly date:string;readonly title:string;readonly color?:string;readonly data?:unknown;}export interface LyraCalendarEventMap{'lr-date-select':CustomEvent<{date:string;}>;'lr-event-select':CustomEvent<{event:CalendarEvent;}>;'lr-view-change':CustomEvent<{viewDate:string;}>;}
+import{type TemplateResult}from'lit';import{LyraElement}from'../../../internal/lyra-element.js';import type{LyraDatePickerFirstDayOfWeek}from'../../forms/date-picker/date-picker.class.js';export interface CalendarEvent{readonly id?:string;readonly date:string|number|Date;readonly title:string;readonly color?:string;readonly data?:unknown;}export interface LyraCalendarEventMap{'lr-date-select':CustomEvent<{date:string;}>;'lr-event-select':CustomEvent<{event:CalendarEvent;}>;'lr-view-change':CustomEvent<{viewDate:string;}>;}
 /** The two display modes `view` accepts. */
 export type CalendarView='month'|'agenda';
 /** The shared closed weekday vocabulary `lr-date-picker`/`lr-date-input` already accept
@@ -11,8 +11,10 @@ export type LyraCalendarFirstDayOfWeek=LyraDatePickerFirstDayOfWeek;
 * keyboard users can activate individual events without switching views.
 * Agenda view renders the same events as full-width buttons.
 *
-* Public collection properties take bounded, clone-owned readonly snapshots. Create a new
-* collection and reassign it after changes; mutating the assigned array does not update the view.
+* Public collection properties take bounded, detached readonly sequences. Calendar-only fields
+* are projected from own data descriptors once per assignment; `lr-event-select` retains the
+* caller's original event identity. Create a new collection and reassign it after changes;
+* mutating the assigned array does not update the view.
 *
 * `firstDayOfWeek` defaults to `'auto'`, deriving the week start from `effectiveLocale` (via the
 * shared `resolveFirstDayOfWeek()` contract also used by `lr-date-picker`/`lr-date-input`), and
@@ -39,6 +41,12 @@ export type LyraCalendarFirstDayOfWeek=LyraDatePickerFirstDayOfWeek;
 * @csspart event - Event marker.
 * @csspart agenda - Agenda list.
 * @csspart agenda-event - One focusable event button in agenda view (`view="agenda"` only).
+* @cssprop [--lr-calendar-nav-hover-bg=var(--lr-color-brand-quiet)] - Month-navigation hover background.
+* @cssprop [--lr-calendar-nav-active-bg=color-mix(in oklab, var(--lr-calendar-nav-hover-bg, var(--lr-color-brand-quiet)), var(--lr-color-mix-partner) var(--lr-color-mix-active))] - Month-navigation pressed background.
+* @cssprop [--lr-calendar-day-hover-bg=var(--lr-color-brand-quiet)] - Day hover background.
+* @cssprop [--lr-calendar-day-active-bg=color-mix(in oklab, var(--lr-calendar-day-hover-bg, var(--lr-color-brand-quiet)), var(--lr-color-mix-partner) var(--lr-color-mix-active))] - Day pressed background.
+* @cssprop [--lr-calendar-agenda-event-hover-bg=var(--lr-color-brand-quiet)] - Agenda-event hover background.
+* @cssprop [--lr-calendar-agenda-event-active-bg=color-mix(in oklab, var(--lr-calendar-agenda-event-hover-bg, var(--lr-color-brand-quiet)), var(--lr-color-mix-partner) var(--lr-color-mix-active))] - Agenda-event pressed background.
 * @cssprop [--lr-calendar-day-min-block-size=var(--lr-size-6rem)] - Minimum block size of a day cell.
 * @cssprop [--lr-calendar-day-min-block-size-narrow=var(--lr-size-4rem)] - Minimum block size of a day cell once the host is narrower than 28rem.
 * @cssprop [--lr-calendar-day-selected-bg=var(--lr-color-brand-quiet)] - Background of a selected day cell, decoupled from the shared token also driving the nav-button/agenda-event hover background.
@@ -59,7 +67,7 @@ protected static readonly identityCollectionProperties:readonly string[];static
 *  `resolveFirstDayOfWeek()` contract, which derives `'auto'` from `effectiveLocale` and falls
 *  back to Sunday (0) for anything else. */
 private get normalizedFirstDayOfWeek();private changeMonth;private selectDate;
-/** Invalid rows are omitted without cloning so `lr-event-select` retains caller identity. */
+/** Invalid rows are omitted; all later rendering uses the descriptor-safe projection. */
 private get effectiveEvents();
 /** `events` bucketed by ISO date, built once per render — the month grid reads events for each of its 42 day cells and re-renders on every roving-focus arrow-key move, so a per-cell linear scan of `events` would cost O(cells × events) per keystroke. */
 private bucketEventsByDate;private weeks;

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

@@ -1,2 +1,2 @@
-var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html}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{formatISO,monthMatrix,parseISO,resolveFirstDayOfWeek,weekdayLabels}from"../../forms/date-picker/calendar-core.js";import{sanitizeCssColor}from"../../../internal/safe-css.js";import{styles}from"./calendar.styles.js";import{getDateTimeFormat,getNumberFormat}from"../../../internal/intl-cache.js";import{hostAriaLabel}from"../../../internal/a11y.js";import{isNonBlankIdentity,isRecord}from"../../retrieval/retrieval-identity.js";import{LYRA_DEFAULT_calendarEmpty,LYRA_DEFAULT_calendarLabel,LYRA_DEFAULT_calendarNextMonth,LYRA_DEFAULT_calendarPreviousMonth}from"../../../internal/default-strings.generated.js";const monthStart=date=>new Date(date.getFullYear(),date.getMonth(),1);class LyraCalendar extends LyraElement{constructor(){super(...arguments),this.events=[],this.value="",this.viewDate=formatISO(new Date).slice(0,7)+"-01",this._view="month",this.firstDayOfWeek="auto",this.accessibleLabel="",this.focusedDate=""}static{this.defaultStrings={...super.defaultStrings,calendarEmpty:LYRA_DEFAULT_calendarEmpty,calendarLabel:LYRA_DEFAULT_calendarLabel,calendarNextMonth:LYRA_DEFAULT_calendarNextMonth,calendarPreviousMonth:LYRA_DEFAULT_calendarPreviousMonth}}static{this.ownedCollectionProperties=Object.freeze(["events"])}static{this.identityCollectionProperties=Object.freeze(["events"])}static{this.styles=[LyraElement.styles,styles]}get view(){return this._view}set view(value){const normalized=value==="agenda"?"agenda":"month",previous=this._view;if(previous===normalized){value!==normalized&&this.requestUpdate("view",previous);return}this._view=normalized,this.requestUpdate("view",previous)}get viewStart(){const parsed=parseISO(this.viewDate);return monthStart(parsed||new Date)}get normalizedFirstDayOfWeek(){return resolveFirstDayOfWeek(this.firstDayOfWeek,this.effectiveLocale)}changeMonth(delta){const next=new Date(this.viewStart.getFullYear(),this.viewStart.getMonth()+delta,1);this.viewDate=formatISO(next),this.emit("lr-view-change",{viewDate:this.viewDate})}selectDate(date){this.value=date,this.focusedDate=date,this.emit("lr-date-select",{date})}get effectiveEvents(){return this.events.filter(event=>isRecord(event)&&typeof event.date=="string"&&isNonBlankIdentity(event.title))}bucketEventsByDate(events){const buckets=new Map;for(const event of events){const bucket=buckets.get(event.date);bucket?bucket.push(event):buckets.set(event.date,[event])}return buckets}weeks(){const start=this.viewStart;return monthMatrix(start.getFullYear(),start.getMonth(),this.normalizedFirstDayOfWeek)}gridBounds(weeks){return[weeks[0][0],weeks[weeks.length-1][6]]}onDayKeyDown(event,date){let delta=0;if(event.key==="ArrowLeft")delta=this.effectiveDirection==="rtl"?1:-1;else if(event.key==="ArrowRight")delta=this.effectiveDirection==="rtl"?-1:1;else if(event.key==="ArrowUp")delta=-7;else if(event.key==="ArrowDown")delta=7;else if(event.key==="Enter"||event.key===" "){event.preventDefault(),this.selectDate(formatISO(date));return}else return;event.preventDefault();const next=new Date(date);next.setDate(next.getDate()+delta);const[gridFirst,gridLast]=this.gridBounds(this.weeks());(next<gridFirst||next>gridLast)&&(this.viewDate=formatISO(monthStart(next)),this.emit("lr-view-change",{viewDate:this.viewDate})),this.focusedDate=formatISO(next),queueMicrotask(()=>this.renderRoot.querySelector(`[data-date="${this.focusedDate}"]`)?.focus())}weekdays(){return weekdayLabels(this.normalizedFirstDayOfWeek,"short",this.effectiveLocale)}updated(changed){super.updated(changed),this.getAttribute("view")!==this._view&&this.setAttribute("view",this._view)}render(){const start=this.viewStart,weeks=this.weeks(),monthTitle=getDateTimeFormat(this.effectiveLocale,{month:"long",year:"numeric"}).format(start),today=formatISO(new Date),label=hostAriaLabel(this)??this.localize("calendarLabel"),dayLabelFmt=getDateTimeFormat(this.effectiveLocale,{dateStyle:"full"}),agendaDateFmt=getDateTimeFormat(this.effectiveLocale,{dateStyle:"medium"}),dayNumberFmt=getNumberFormat(this.effectiveLocale),events=this.effectiveEvents,agenda=events.filter(event=>event.date.startsWith(formatISO(start).slice(0,7))).sort((a,b)=>a.date<b.date?-1:a.date>b.date?1:0),eventsByDate=this.view==="month"?this.bucketEventsByDate(events):void 0,[gridFirst,gridLast]=this.gridBounds(weeks),rawAnchor=this.focusedDate||this.value||today,rawAnchorDate=parseISO(rawAnchor),anchor=rawAnchorDate&&rawAnchorDate>=gridFirst&&rawAnchorDate<=gridLast?rawAnchor:formatISO(start);return html`<section aria-label=${label}><header part="header navigation"><button part="nav previous-button" type="button" aria-label=${this.localize("calendarPreviousMonth")} @click=${()=>this.changeMonth(-1)}><span part="nav-glyph" aria-hidden="true">‹</span></button><span part="title">${monthTitle}</span><button part="nav next-button" type="button" aria-label=${this.localize("calendarNextMonth")} @click=${()=>this.changeMonth(1)}><span part="nav-glyph" aria-hidden="true">›</span></button></header>
-      ${this.view==="agenda"?html`<div part="agenda">${agenda.length?agenda.map(event=>{const date=parseISO(event.date),bg=event.color?sanitizeCssColor(event.color):void 0;return html`<button part="agenda-event" type="button" style=${styleMap(bg?{"--_lr-calendar-agenda-event-background":bg,"--_lr-calendar-agenda-event-foreground":"var(--lr-color-on-brand)"}:{})} @click=${()=>this.emit("lr-event-select",{event})}><strong>${date?agendaDateFmt.format(date):event.date}</strong> ${event.title}</button>`}):html`<p>${this.localize("calendarEmpty")}</p>`}</div>`:html`<div part="weekdays">${this.weekdays().map(day=>html`<span part="weekday">${day}</span>`)}</div><div part="grid" role="grid" aria-label=${monthTitle}>${weeks.map(week=>html`<div part="week" role="row">${week.map(date=>{const dateIso=formatISO(date),dayEvents=eventsByDate?.get(dateIso)??[];return html`<div part="day" role="gridcell" data-date=${dateIso} data-outside=${date.getMonth()!==start.getMonth()?"true":"false"} data-today=${dateIso===today?"true":"false"} data-selected=${dateIso===this.value?"true":"false"} aria-selected=${dateIso===this.value?"true":"false"} aria-label=${dayLabelFmt.format(date)} tabindex=${dateIso===anchor?"0":"-1"} @click=${event=>{(event.target===event.currentTarget||event.target.getAttribute("part")==="date")&&this.selectDate(dateIso)}} @keydown=${event=>{event.target===event.currentTarget&&this.onDayKeyDown(event,date)}}><span part="date">${dayNumberFmt.format(date.getDate())}</span>${dayEvents.map(item=>{const bg=item.color?sanitizeCssColor(item.color):void 0;return html`<button part="event" type="button" style=${styleMap(bg?{backgroundColor:bg}:{})} @click=${event=>{event.stopPropagation(),this.emit("lr-event-select",{event:item})}}>${item.title}</button>`})}</div>`})}</div>`)}</div>`}</section>`}}__decorate([property({attribute:!1})],LyraCalendar.prototype,"events",void 0),__decorate([property()],LyraCalendar.prototype,"value",void 0),__decorate([property({attribute:"view-date"})],LyraCalendar.prototype,"viewDate",void 0),__decorate([property({reflect:!0})],LyraCalendar.prototype,"view",null),__decorate([property({attribute:"first-day-of-week"})],LyraCalendar.prototype,"firstDayOfWeek",void 0),__decorate([property({attribute:"aria-label"})],LyraCalendar.prototype,"accessibleLabel",void 0),__decorate([state()],LyraCalendar.prototype,"focusedDate",void 0);export{LyraCalendar};
+var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html}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{formatISO,monthMatrix,parseISO,resolveFirstDayOfWeek,weekdayLabels}from"../../forms/date-picker/calendar-core.js";import{sanitizeCssColor}from"../../../internal/safe-css.js";import{styles}from"./calendar.styles.js";import{getDateTimeFormat,getNumberFormat}from"../../../internal/intl-cache.js";import{hostAriaLabel}from"../../../internal/a11y.js";import{MISSING_OWN_DATA_DESCRIPTOR,UNSAFE_OWN_DATA_DESCRIPTOR,getOwnDataDescriptor}from"../../../internal/data-descriptors.js";import{LYRA_DEFAULT_calendarEmpty,LYRA_DEFAULT_calendarLabel,LYRA_DEFAULT_calendarNextMonth,LYRA_DEFAULT_calendarPreviousMonth}from"../../../internal/default-strings.generated.js";const monthStart=date=>new Date(date.getFullYear(),date.getMonth(),1),canonicalEventSnapshots=new WeakMap;function normalizeCalendarEventDate(value){if(typeof value=="string"){const date=parseISO(value);return date?formatISO(date):void 0}if(typeof value=="number"){if(!Number.isFinite(value))return;const date=new Date(value);return Number.isNaN(date.getTime())?void 0:formatISO(date)}if(!(value===null||typeof value!="object"))try{const epoch=Date.prototype.getTime.call(value);return Number.isFinite(epoch)?formatISO(new Date(epoch)):void 0}catch{return}}function isSafeNonArrayObject(value){if(value===null||typeof value!="object")return!1;try{return!Array.isArray(value)}catch{return!1}}function projectCalendarEvent(value){if(!isSafeNonArrayObject(value))return;const date=getOwnDataDescriptor(value,"date"),title=getOwnDataDescriptor(value,"title"),color=getOwnDataDescriptor(value,"color");if(date===MISSING_OWN_DATA_DESCRIPTOR||date===UNSAFE_OWN_DATA_DESCRIPTOR||title===MISSING_OWN_DATA_DESCRIPTOR||title===UNSAFE_OWN_DATA_DESCRIPTOR||typeof title.value!="string"||title.value.trim().length===0)return;const normalizedDate=normalizeCalendarEventDate(date.value);if(normalizedDate)return Object.freeze({source:value,date:normalizedDate,title:title.value,color:color===MISSING_OWN_DATA_DESCRIPTOR||color===UNSAFE_OWN_DATA_DESCRIPTOR||typeof color.value!="string"?void 0:color.value})}function canonicalCalendarEvents(values){const cached=canonicalEventSnapshots.get(values);if(cached)return cached;const projected=[];for(const value of values){const event=projectCalendarEvent(value);event&&projected.push(event)}const snapshot=Object.freeze(projected);return canonicalEventSnapshots.set(values,snapshot),snapshot}class LyraCalendar extends LyraElement{constructor(){super(...arguments),this.events=[],this.value="",this.viewDate=formatISO(new Date).slice(0,7)+"-01",this._view="month",this.firstDayOfWeek="auto",this.accessibleLabel="",this.focusedDate=""}static{this.defaultStrings={...super.defaultStrings,calendarEmpty:LYRA_DEFAULT_calendarEmpty,calendarLabel:LYRA_DEFAULT_calendarLabel,calendarNextMonth:LYRA_DEFAULT_calendarNextMonth,calendarPreviousMonth:LYRA_DEFAULT_calendarPreviousMonth}}static{this.ownedCollectionProperties=Object.freeze(["events"])}static{this.identityCollectionProperties=Object.freeze(["events"])}static{this.styles=[LyraElement.styles,styles]}get view(){return this._view}set view(value){const normalized=value==="agenda"?"agenda":"month",previous=this._view;if(previous===normalized){value!==normalized&&this.requestUpdate("view",previous);return}this._view=normalized,this.requestUpdate("view",previous)}get viewStart(){const parsed=parseISO(this.viewDate);return monthStart(parsed||new Date)}get normalizedFirstDayOfWeek(){return resolveFirstDayOfWeek(this.firstDayOfWeek,this.effectiveLocale)}changeMonth(delta){const next=new Date(this.viewStart.getFullYear(),this.viewStart.getMonth()+delta,1);this.viewDate=formatISO(next),this.emit("lr-view-change",{viewDate:this.viewDate})}selectDate(date){this.value=date,this.focusedDate=date,this.emit("lr-date-select",{date})}get effectiveEvents(){return canonicalCalendarEvents(this.events)}bucketEventsByDate(events){const buckets=new Map;for(const event of events){const bucket=buckets.get(event.date);bucket?bucket.push(event):buckets.set(event.date,[event])}return buckets}weeks(){const start=this.viewStart;return monthMatrix(start.getFullYear(),start.getMonth(),this.normalizedFirstDayOfWeek)}gridBounds(weeks){return[weeks[0][0],weeks[weeks.length-1][6]]}onDayKeyDown(event,date){let delta=0;if(event.key==="ArrowLeft")delta=this.effectiveDirection==="rtl"?1:-1;else if(event.key==="ArrowRight")delta=this.effectiveDirection==="rtl"?-1:1;else if(event.key==="ArrowUp")delta=-7;else if(event.key==="ArrowDown")delta=7;else if(event.key==="Enter"||event.key===" "){event.preventDefault(),this.selectDate(formatISO(date));return}else return;event.preventDefault();const next=new Date(date);next.setDate(next.getDate()+delta);const[gridFirst,gridLast]=this.gridBounds(this.weeks());(next<gridFirst||next>gridLast)&&(this.viewDate=formatISO(monthStart(next)),this.emit("lr-view-change",{viewDate:this.viewDate})),this.focusedDate=formatISO(next),queueMicrotask(()=>this.renderRoot.querySelector(`[data-date="${this.focusedDate}"]`)?.focus())}weekdays(){return weekdayLabels(this.normalizedFirstDayOfWeek,"short",this.effectiveLocale)}updated(changed){super.updated(changed),this.getAttribute("view")!==this._view&&this.setAttribute("view",this._view)}render(){const start=this.viewStart,weeks=this.weeks(),monthTitle=getDateTimeFormat(this.effectiveLocale,{month:"long",year:"numeric"}).format(start),today=formatISO(new Date),label=hostAriaLabel(this)??this.localize("calendarLabel"),dayLabelFmt=getDateTimeFormat(this.effectiveLocale,{dateStyle:"full"}),agendaDateFmt=getDateTimeFormat(this.effectiveLocale,{dateStyle:"medium"}),dayNumberFmt=getNumberFormat(this.effectiveLocale),events=this.effectiveEvents,agenda=events.filter(event=>event.date.startsWith(formatISO(start).slice(0,7))).sort((a,b)=>a.date<b.date?-1:a.date>b.date?1:0),eventsByDate=this.view==="month"?this.bucketEventsByDate(events):void 0,[gridFirst,gridLast]=this.gridBounds(weeks),rawAnchor=this.focusedDate||this.value||today,rawAnchorDate=parseISO(rawAnchor),anchor=rawAnchorDate&&rawAnchorDate>=gridFirst&&rawAnchorDate<=gridLast?rawAnchor:formatISO(start);return html`<section aria-label=${label}><header part="header navigation"><button part="nav previous-button" type="button" aria-label=${this.localize("calendarPreviousMonth")} @click=${()=>this.changeMonth(-1)}><span part="nav-glyph" aria-hidden="true">‹</span></button><span part="title">${monthTitle}</span><button part="nav next-button" type="button" aria-label=${this.localize("calendarNextMonth")} @click=${()=>this.changeMonth(1)}><span part="nav-glyph" aria-hidden="true">›</span></button></header>
+      ${this.view==="agenda"?html`<div part="agenda">${agenda.length?agenda.map(event=>{const date=parseISO(event.date),bg=event.color?sanitizeCssColor(event.color):void 0;return html`<button part="agenda-event" type="button" style=${styleMap(bg?{"--_lr-calendar-agenda-event-background":bg,"--_lr-calendar-agenda-event-foreground":"var(--lr-color-on-brand)"}:{})} @click=${()=>this.emit("lr-event-select",{event:event.source})}><strong>${date?agendaDateFmt.format(date):event.date}</strong> ${event.title}</button>`}):html`<p>${this.localize("calendarEmpty")}</p>`}</div>`:html`<div part="weekdays">${this.weekdays().map(day=>html`<span part="weekday">${day}</span>`)}</div><div part="grid" role="grid" aria-label=${monthTitle}>${weeks.map(week=>html`<div part="week" role="row">${week.map(date=>{const dateIso=formatISO(date),dayEvents=eventsByDate?.get(dateIso)??[];return html`<div part="day" role="gridcell" data-date=${dateIso} data-outside=${date.getMonth()!==start.getMonth()?"true":"false"} data-today=${dateIso===today?"true":"false"} data-selected=${dateIso===this.value?"true":"false"} aria-selected=${dateIso===this.value?"true":"false"} aria-label=${dayLabelFmt.format(date)} tabindex=${dateIso===anchor?"0":"-1"} @click=${event=>{(event.target===event.currentTarget||event.target.getAttribute("part")==="date")&&this.selectDate(dateIso)}} @keydown=${event=>{event.target===event.currentTarget&&this.onDayKeyDown(event,date)}}><span part="date">${dayNumberFmt.format(date.getDate())}</span>${dayEvents.map(item=>{const bg=item.color?sanitizeCssColor(item.color):void 0;return html`<button part="event" type="button" style=${styleMap(bg?{backgroundColor:bg}:{})} @click=${event=>{event.stopPropagation(),this.emit("lr-event-select",{event:item.source})}}>${item.title}</button>`})}</div>`})}</div>`)}</div>`}</section>`}}__decorate([property({attribute:!1})],LyraCalendar.prototype,"events",void 0),__decorate([property()],LyraCalendar.prototype,"value",void 0),__decorate([property({attribute:"view-date"})],LyraCalendar.prototype,"viewDate",void 0),__decorate([property({reflect:!0})],LyraCalendar.prototype,"view",null),__decorate([property({attribute:"first-day-of-week"})],LyraCalendar.prototype,"firstDayOfWeek",void 0),__decorate([property({attribute:"aria-label"})],LyraCalendar.prototype,"accessibleLabel",void 0),__decorate([state()],LyraCalendar.prototype,"focusedDate",void 0);export{LyraCalendar};

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

@@ -1 +1 @@
-import{css}from"lit";const styles=css`:host{contain-intrinsic-inline-size:var(--lr-size-20rem);min-inline-size:0;display:block;container-type:inline-size}[part~=header]{justify-content:space-between;align-items:center;gap:var(--lr-space-s);margin-block-end:var(--lr-space-s);display:flex}[part=title]{font-weight:var(--lr-font-weight-semibold)}[part~=nav]{justify-content:center;align-items:center;gap:var(--lr-space-xs);min-inline-size:var(--lr-icon-button-size);min-block-size:var(--lr-icon-button-size);display:flex}button[part~=nav],[part=day]{min-inline-size:var(--lr-icon-button-size);min-block-size:var(--lr-icon-button-size);border:var(--lr-border-width-thin) solid var(--lr-color-border);background:var(--lr-color-surface);color:var(--lr-color-text);cursor:pointer}button[part~=nav]{padding-inline:var(--lr-space-s);border-radius:var(--lr-radius)}button[part~=nav]:hover,[part=agenda-event]:hover{background:var(--lr-color-brand-quiet)}button[part~=nav]:active,[part=agenda-event]:active{background:color-mix(in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active))}button[part~=nav]:focus-visible,[part=agenda-event]:focus-visible{outline:var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);outline-offset:calc(var(--lr-focus-ring-offset) * -1)}[part=day][data-outside=true]{color:var(--lr-calendar-day-outside-color,var(--lr-color-text-quiet));background:var(--lr-calendar-day-outside-bg,var(--lr-color-surface))}[part=day][data-today=true]{outline:var(--lr-border-width-medium) solid var(--lr-calendar-day-today-outline-color,var(--lr-color-brand));outline-offset:calc(var(--lr-border-width-medium) * -1)}[part=day][data-selected=true]{background:var(--lr-calendar-day-selected-bg,var(--lr-color-brand-quiet))}[part=day]:hover{background:var(--lr-color-brand-quiet)}[part=day]:active{background:color-mix(in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active))}[part=day]:focus-visible{outline:var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);outline-offset:calc(var(--lr-focus-ring-offset) * -1)}[part=weekdays]{grid-template-columns:repeat(7,minmax(0,1fr));display:grid}[part=weekday]{padding:var(--lr-space-xs);color:var(--lr-color-text-quiet);font-size:var(--lr-font-size-sm);text-align:center}[part=grid]{border-block-start:var(--lr-border-width-thin) solid var(--lr-color-border);border-inline-start:var(--lr-border-width-thin) solid var(--lr-color-border);grid-template-columns:repeat(7,minmax(0,1fr));display:grid}[part=week]{display:contents}[part=day]{min-block-size:var(--lr-calendar-day-min-block-size,var(--lr-size-6rem));padding:var(--lr-space-xs);text-align:start;border-block-start:0;border-inline-start:0;flex-direction:column;align-items:stretch;display:flex}[part=date]{font-weight:var(--lr-font-weight-semibold)}[part=event]{box-sizing:border-box;inline-size:100%;min-inline-size:var(--lr-size-1-5rem);min-block-size:var(--lr-size-1-5rem);padding:var(--lr-space-2xs);border-radius:var(--lr-radius);background:var(--lr-color-brand);color:var(--lr-color-on-brand);font:inherit;font-size:var(--lr-font-size-sm);text-align:start;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;border:0;margin-block-start:var(--lr-space-2xs);overflow:hidden}[part=event]:hover{background-image:linear-gradient(color-mix(in oklab, transparent, var(--lr-color-mix-partner) var(--lr-color-mix-hover)), color-mix(in oklab, transparent, var(--lr-color-mix-partner) var(--lr-color-mix-hover)))}[part=event]:active{background-image:linear-gradient(color-mix(in oklab, transparent, var(--lr-color-mix-partner) var(--lr-color-mix-active)), color-mix(in oklab, transparent, var(--lr-color-mix-partner) var(--lr-color-mix-active)))}[part=event]:focus-visible{outline:var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);outline-offset:calc(var(--lr-focus-ring-offset) * -1)}[part=agenda]{gap:var(--lr-space-s);display:grid}[part=agenda-event]{padding:var(--lr-space-s);border:0;border-inline-start:var(--lr-border-width-medium) solid var(--lr-color-brand);background:var(--_lr-calendar-agenda-event-background,var(--lr-color-surface));color:var(--_lr-calendar-agenda-event-foreground,var(--lr-color-text));font:inherit;text-align:start;cursor:pointer}@container (inline-size<=28rem){[part=day]{min-block-size:var(--lr-calendar-day-min-block-size-narrow,var(--lr-size-4rem))}[part=event]{font-size:var(--lr-font-size-xs)}}:host(:dir(rtl)) [part=nav-glyph]{transform:scaleX(-1)}@media (forced-colors:active){[part=day][data-selected=true]{outline:var(--lr-border-width-medium) solid Highlight;outline-offset:calc(var(--lr-border-width-medium) * -1)}[part=day][data-today=true]{border-style:double}[part=day]:hover,button[part~=nav]:hover,[part=agenda-event]:hover{outline:var(--lr-border-width-thin) dashed Highlight;outline-offset:calc(var(--lr-border-width-thin) * -1)}[part=event]{forced-color-adjust:none;border:var(--lr-border-width-thin) solid ButtonText;color:buttontext;background:buttonface!important}}`;export{styles};
+import{css}from"lit";const styles=css`:host{contain-intrinsic-inline-size:var(--lr-size-20rem);min-inline-size:0;display:block;container-type:inline-size}[part~=header]{justify-content:space-between;align-items:center;gap:var(--lr-space-s);margin-block-end:var(--lr-space-s);display:flex}[part=title]{font-weight:var(--lr-font-weight-semibold)}[part~=nav]{justify-content:center;align-items:center;gap:var(--lr-space-xs);min-inline-size:var(--lr-icon-button-size);min-block-size:var(--lr-icon-button-size);display:flex}button[part~=nav],[part=day]{min-inline-size:var(--lr-icon-button-size);min-block-size:var(--lr-icon-button-size);border:var(--lr-border-width-thin) solid var(--lr-color-border);background:var(--lr-color-surface);color:var(--lr-color-text);cursor:pointer;font:inherit}button[part~=nav]{padding-inline:var(--lr-space-s);border-radius:var(--lr-radius)}[part=nav-glyph]{font-size:var(--lr-size-1em)}button[part~=nav]:hover{background:var(--lr-calendar-nav-hover-bg,var(--lr-color-brand-quiet))}button[part~=nav]:active{background:var(--lr-calendar-nav-active-bg,color-mix(in oklab, var(--lr-calendar-nav-hover-bg,var(--lr-color-brand-quiet)), var(--lr-color-mix-partner) var(--lr-color-mix-active)))}button[part~=nav]:focus-visible,[part=agenda-event]:focus-visible{outline:var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);outline-offset:calc(var(--lr-focus-ring-offset) * -1)}[part=day][data-outside=true]{color:var(--lr-calendar-day-outside-color,var(--lr-color-text-quiet));background:var(--lr-calendar-day-outside-bg,var(--lr-color-surface))}[part=day][data-today=true]{outline:var(--lr-border-width-medium) solid var(--lr-calendar-day-today-outline-color,var(--lr-color-brand));outline-offset:calc(var(--lr-border-width-medium) * -1)}[part=day][data-selected=true]{background:var(--lr-calendar-day-selected-bg,var(--lr-color-brand-quiet))}[part=day]:hover{background:var(--lr-calendar-day-hover-bg,var(--lr-color-brand-quiet))}[part=day]:active{background:var(--lr-calendar-day-active-bg,color-mix(in oklab, var(--lr-calendar-day-hover-bg,var(--lr-color-brand-quiet)), var(--lr-color-mix-partner) var(--lr-color-mix-active)))}[part=day]:focus-visible{outline:var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);outline-offset:calc(var(--lr-focus-ring-offset) * -1)}[part=weekdays]{grid-template-columns:repeat(7,minmax(0,1fr));display:grid}[part=weekday]{padding:var(--lr-space-xs);color:var(--lr-color-text-quiet);font-size:var(--lr-font-size-sm);text-align:center}[part=grid]{border-block-start:var(--lr-border-width-thin) solid var(--lr-color-border);border-inline-start:var(--lr-border-width-thin) solid var(--lr-color-border);grid-template-columns:repeat(7,minmax(0,1fr));display:grid}[part=week]{display:contents}[part=day]{min-block-size:var(--lr-calendar-day-min-block-size,var(--lr-size-6rem));padding:var(--lr-space-xs);text-align:start;border-block-start:0;border-inline-start:0;flex-direction:column;align-items:stretch;display:flex}[part=date]{font-weight:var(--lr-font-weight-semibold)}[part=event]{box-sizing:border-box;inline-size:100%;min-inline-size:var(--lr-size-1-5rem);min-block-size:var(--lr-size-1-5rem);padding:var(--lr-space-2xs);border-radius:var(--lr-radius);background:var(--lr-color-brand);color:var(--lr-color-on-brand);font:inherit;font-size:var(--lr-font-size-sm);text-align:start;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;border:0;margin-block-start:var(--lr-space-2xs);overflow:hidden}[part=event]:hover{background-image:linear-gradient(color-mix(in oklab, transparent, var(--lr-color-mix-partner) var(--lr-color-mix-hover)), color-mix(in oklab, transparent, var(--lr-color-mix-partner) var(--lr-color-mix-hover)))}[part=event]:active{background-image:linear-gradient(color-mix(in oklab, transparent, var(--lr-color-mix-partner) var(--lr-color-mix-active)), color-mix(in oklab, transparent, var(--lr-color-mix-partner) var(--lr-color-mix-active)))}[part=event]:focus-visible{outline:var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);outline-offset:calc(var(--lr-focus-ring-offset) * -1)}[part=agenda]{gap:var(--lr-space-s);display:grid}[part=agenda-event]{padding:var(--lr-space-s);border:0;border-inline-start:var(--lr-border-width-medium) solid var(--lr-color-brand);background:var(--_lr-calendar-agenda-event-background,var(--lr-color-surface));color:var(--_lr-calendar-agenda-event-foreground,var(--lr-color-text));font:inherit;text-align:start;cursor:pointer}[part=agenda-event]:hover{background:var(--lr-calendar-agenda-event-hover-bg,var(--lr-color-brand-quiet))}[part=agenda-event]:active{background:var(--lr-calendar-agenda-event-active-bg,color-mix(in oklab, var(--lr-calendar-agenda-event-hover-bg,var(--lr-color-brand-quiet)), var(--lr-color-mix-partner) var(--lr-color-mix-active)))}@container (inline-size<=28rem){[part=day]{min-block-size:var(--lr-calendar-day-min-block-size-narrow,var(--lr-size-4rem))}[part=event]{font-size:var(--lr-font-size-xs)}}:host(:dir(rtl)) [part=nav-glyph]{transform:scaleX(-1)}@media (forced-colors:active){[part=day][data-selected=true]{outline:var(--lr-border-width-medium) solid Highlight;outline-offset:calc(var(--lr-border-width-medium) * -1)}[part=day][data-today=true]{border-style:double}[part=day]:hover,button[part~=nav]:hover,[part=agenda-event]:hover{outline:var(--lr-border-width-thin) dashed Highlight;outline-offset:calc(var(--lr-border-width-thin) * -1)}[part=event]{forced-color-adjust:none;border:var(--lr-border-width-thin) solid ButtonText;color:buttontext;background:buttonface!important}}`;export{styles};

package/dist/components/data/context-meter/context-meter.class.d.ts

@@ -59,7 +59,9 @@ label:string;
 *  hand-roll swatch+label markup outside the component. Non-interactive: it toggles nothing and
 *  emits nothing, mirroring `<lr-sequence-strip>`'s `showLegend` rather than the interactive
 *  `<lr-graph-legend>`. */
-showLegend:boolean;private normalizedSegmentValue;
+showLegend:boolean;private projectedSegmentsSource;private projectedSegments;
+/** Later rendering only reads this once-projected, bounded data-descriptor view. */
+private get effectiveSegments();private normalizedSegmentValue;
 /** Sum of segment values, clamped so a negative/NaN entry can't produce a negative total. */
 private get usedTotal();
 /** Per-segment ratio of `value` to `total`, clamped to [0,1] and capped so the

package/dist/components/data/context-meter/context-meter.class.js

@@ -1,4 +1,4 @@
-var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html,svg,nothing}from"lit";import{property}from"lit/decorators.js";import{styleMap}from"lit/directives/style-map.js";import{LyraElement}from"../../../internal/lyra-element.js";import{finiteNumber}from"../../../internal/numbers.js";import{resolveIntlLocale}from"../../../internal/intl-cache.js";import{sanitizeCssColor}from"../../../internal/safe-css.js";import{srOnly}from"../../../internal/a11y.js";import{styles}from"./context-meter.styles.js";import{LYRA_DEFAULT_contextMeterLabeledSummary,LYRA_DEFAULT_contextMeterSegmentLabel,LYRA_DEFAULT_contextMeterUsed,LYRA_DEFAULT_contextMeterUsedOfTotal}from"../../../internal/default-strings.generated.js";const RADIUS=40,CENTER=50,STROKE=12,CIRCUMFERENCE=2*Math.PI*RADIUS;function formatCount(n,locale){return Math.round(finiteNumber(n,0)).toLocaleString(resolveIntlLocale(locale))}class LyraContextMeter extends LyraElement{constructor(){super(...arguments),this.segments=[],this.total=0,this._shape="bar",this.label="",this.showLegend=!1}static{this.defaultStrings={...super.defaultStrings,contextMeterLabeledSummary:LYRA_DEFAULT_contextMeterLabeledSummary,contextMeterSegmentLabel:LYRA_DEFAULT_contextMeterSegmentLabel,contextMeterUsed:LYRA_DEFAULT_contextMeterUsed,contextMeterUsedOfTotal:LYRA_DEFAULT_contextMeterUsedOfTotal}}static{this.ownedCollectionProperties=Object.freeze(["segments"])}static{this.styles=[LyraElement.styles,srOnly,styles]}get shape(){return this._shape}set shape(value){const normalized=value==="ring"?"ring":"bar",previous=this._shape;if(previous===normalized){value!==normalized&&this.requestUpdate("shape",previous);return}this._shape=normalized,this.requestUpdate("shape",previous)}normalizedSegmentValue(segment){return Math.max(0,finiteNumber(segment.value,0))}get usedTotal(){return this.segments.reduce((sum,segment)=>{const next=sum+this.normalizedSegmentValue(segment);return finiteNumber(next,Number.MAX_VALUE)},0)}ratios(){const total=Math.max(0,finiteNumber(this.total,0));if(total<=0)return[];const out=[];let cumulative=0;for(const segment of this.segments){const raw=this.normalizedSegmentValue(segment),available=Math.max(0,1-cumulative),ratio=Math.min(raw/total,available);cumulative+=ratio,out.push({segment,value:raw,ratio})}return out}get clampedUsedTotal(){const total=Math.max(0,finiteNumber(this.total,0));return{used:total>0?Math.min(this.usedTotal,total):this.usedTotal,total}}get summary(){const{used:usedForSummary,total:totalValue}=this.clampedUsedTotal,used=formatCount(usedForSummary,this.effectiveLocale),phrase=totalValue>0?this.localize("contextMeterUsedOfTotal",void 0,{used,total:formatCount(totalValue,this.effectiveLocale)}):this.localize("contextMeterUsed",void 0,{used});return this.label?this.localize("contextMeterLabeledSummary",void 0,{label:this.label,summary:phrase}):phrase}segmentTitle(segment,value=this.normalizedSegmentValue(segment)){return this.localize("contextMeterSegmentLabel",void 0,{label:segment.label,count:formatCount(value,this.effectiveLocale)})}segmentColor(segment){return segment.color?sanitizeCssColor(segment.color):void 0}renderSemantics(){const{used,total}=this.clampedUsedTotal,accessibleName=this.summary;return html`
+var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html,svg,nothing}from"lit";import{property}from"lit/decorators.js";import{styleMap}from"lit/directives/style-map.js";import{LyraElement}from"../../../internal/lyra-element.js";import{finiteNumber}from"../../../internal/numbers.js";import{resolveIntlLocale}from"../../../internal/intl-cache.js";import{sanitizeCssColor}from"../../../internal/safe-css.js";import{getOwnDataDescriptor,MISSING_OWN_DATA_DESCRIPTOR,UNSAFE_OWN_DATA_DESCRIPTOR}from"../../../internal/data-descriptors.js";import{srOnly}from"../../../internal/a11y.js";import{styles}from"./context-meter.styles.js";import{LYRA_DEFAULT_contextMeterLabeledSummary,LYRA_DEFAULT_contextMeterSegmentLabel,LYRA_DEFAULT_contextMeterUsed,LYRA_DEFAULT_contextMeterUsedOfTotal}from"../../../internal/default-strings.generated.js";const RADIUS=40,CENTER=50,STROKE=12,CIRCUMFERENCE=2*Math.PI*RADIUS,MAX_CONTEXT_METER_SEGMENTS=1e4,EMPTY_CONTEXT_METER_SEGMENTS=Object.freeze([]);function projectContextMeterSegments(value){try{if(!Array.isArray(value))return EMPTY_CONTEXT_METER_SEGMENTS;const length=getOwnDataDescriptor(value,"length");if(length===MISSING_OWN_DATA_DESCRIPTOR||length===UNSAFE_OWN_DATA_DESCRIPTOR||typeof length.value!="number"||!Number.isSafeInteger(length.value)||length.value<0)return EMPTY_CONTEXT_METER_SEGMENTS;const segments=[];for(let index=0;index<Math.min(length.value,MAX_CONTEXT_METER_SEGMENTS);index+=1){const entry=getOwnDataDescriptor(value,String(index));if(entry===MISSING_OWN_DATA_DESCRIPTOR||entry===UNSAFE_OWN_DATA_DESCRIPTOR||entry.value===null||typeof entry.value!="object"||Array.isArray(entry.value))continue;const label=getOwnDataDescriptor(entry.value,"label"),segmentValue=getOwnDataDescriptor(entry.value,"value"),tone=getOwnDataDescriptor(entry.value,"tone"),color=getOwnDataDescriptor(entry.value,"color");if(label===MISSING_OWN_DATA_DESCRIPTOR||label===UNSAFE_OWN_DATA_DESCRIPTOR||segmentValue===MISSING_OWN_DATA_DESCRIPTOR||segmentValue===UNSAFE_OWN_DATA_DESCRIPTOR||tone===UNSAFE_OWN_DATA_DESCRIPTOR||color===UNSAFE_OWN_DATA_DESCRIPTOR||typeof label.value!="string"||typeof segmentValue.value!="number"||tone!==MISSING_OWN_DATA_DESCRIPTOR&&typeof tone.value!="string"||color!==MISSING_OWN_DATA_DESCRIPTOR&&typeof color.value!="string")continue;const toneValue=tone===MISSING_OWN_DATA_DESCRIPTOR?void 0:tone.value,colorValue=color===MISSING_OWN_DATA_DESCRIPTOR?void 0:color.value;segments.push(Object.freeze({label:label.value,value:segmentValue.value,...toneValue===void 0?{}:{tone:toneValue},...colorValue===void 0?{}:{color:colorValue}}))}return Object.freeze(segments)}catch{return EMPTY_CONTEXT_METER_SEGMENTS}}function formatCount(n,locale){return Math.round(finiteNumber(n,0)).toLocaleString(resolveIntlLocale(locale))}class LyraContextMeter extends LyraElement{constructor(){super(...arguments),this.segments=[],this.total=0,this._shape="bar",this.label="",this.showLegend=!1,this.projectedSegments=EMPTY_CONTEXT_METER_SEGMENTS}static{this.defaultStrings={...super.defaultStrings,contextMeterLabeledSummary:LYRA_DEFAULT_contextMeterLabeledSummary,contextMeterSegmentLabel:LYRA_DEFAULT_contextMeterSegmentLabel,contextMeterUsed:LYRA_DEFAULT_contextMeterUsed,contextMeterUsedOfTotal:LYRA_DEFAULT_contextMeterUsedOfTotal}}static{this.ownedCollectionProperties=Object.freeze(["segments"])}static{this.styles=[LyraElement.styles,srOnly,styles]}get shape(){return this._shape}set shape(value){const normalized=value==="ring"?"ring":"bar",previous=this._shape;if(previous===normalized){value!==normalized&&this.requestUpdate("shape",previous);return}this._shape=normalized,this.requestUpdate("shape",previous)}get effectiveSegments(){const source=this.segments;return source!==this.projectedSegmentsSource&&(this.projectedSegmentsSource=source,this.projectedSegments=projectContextMeterSegments(source)),this.projectedSegments}normalizedSegmentValue(segment){return Math.max(0,finiteNumber(segment.value,0))}get usedTotal(){return this.effectiveSegments.reduce((sum,segment)=>{const next=sum+this.normalizedSegmentValue(segment);return finiteNumber(next,Number.MAX_VALUE)},0)}ratios(){const total=Math.max(0,finiteNumber(this.total,0));if(total<=0)return[];const out=[];let cumulative=0;for(const segment of this.effectiveSegments){const raw=this.normalizedSegmentValue(segment),available=Math.max(0,1-cumulative),ratio=Math.min(raw/total,available);cumulative+=ratio,out.push({segment,value:raw,ratio})}return out}get clampedUsedTotal(){const total=Math.max(0,finiteNumber(this.total,0));return{used:total>0?Math.min(this.usedTotal,total):this.usedTotal,total}}get summary(){const{used:usedForSummary,total:totalValue}=this.clampedUsedTotal,used=formatCount(usedForSummary,this.effectiveLocale),phrase=totalValue>0?this.localize("contextMeterUsedOfTotal",void 0,{used,total:formatCount(totalValue,this.effectiveLocale)}):this.localize("contextMeterUsed",void 0,{used});return this.label?this.localize("contextMeterLabeledSummary",void 0,{label:this.label,summary:phrase}):phrase}segmentTitle(segment,value=this.normalizedSegmentValue(segment)){return this.localize("contextMeterSegmentLabel",void 0,{label:segment.label,count:formatCount(value,this.effectiveLocale)})}segmentColor(segment){return segment.color?sanitizeCssColor(segment.color):void 0}renderSemantics(){const{used,total}=this.clampedUsedTotal,accessibleName=this.summary;return html`
       <div
         part="semantic"
         class="sr-only"
@@ -9,7 +9,7 @@ var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3
         aria-valuemax=${total>0?String(total):nothing}
       ></div>
       <ul part="segment-list" class="sr-only">
-        ${this.segments.map(segment=>html`<li part="segment-item">${this.segmentTitle(segment)}</li>`)}
+        ${this.effectiveSegments.map(segment=>html`<li part="segment-item">${this.segmentTitle(segment)}</li>`)}
       </ul>
     `}renderBar(){const ratios=this.ratios();return html`
       <div part="base">
@@ -50,7 +50,7 @@ var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3
       </svg>
     `}renderLegend(){return html`
       <div part="legend" aria-hidden="true">
-        ${this.segments.map(segment=>{const color=this.segmentColor(segment);return html`<span part="legend-item">
+        ${this.effectiveSegments.map(segment=>{const color=this.segmentColor(segment);return html`<span part="legend-item">
             <span
               part="legend-swatch"
               data-tone=${segment.tone??"neutral"}

package/dist/components/data/data-grid/data-grid.class.d.ts

@@ -59,7 +59,8 @@ import{type PropertyValues,type TemplateResult}from'lit';import{LyraElement}from
 * @event lr-sort-change - Fired after a user changes sorting.
 * @event focus - Native focus relayed once from the toolbar search or active column-filter input.
 * @event blur - Native blur relayed once from the toolbar search or active column-filter input.
-* @csspart body - Scrollable body viewport.
+* @csspart body - The sole vertical and horizontal scroll viewport; header and footer columns
+*   mirror its logical inline position.
 * @csspart cell - A data cell.
 * @csspart column-menu - A per-column menu.
 * @csspart column-menu-button - A per-column menu trigger.
@@ -129,6 +130,12 @@ import{type PropertyValues,type TemplateResult}from'lit';import{LyraElement}from
 * @cssprop [--header-text-color=var(--lr-color-text)] - Header foreground.
 * @cssprop [--indent-size=var(--lr-size-1-25rem)] - Tree-level indentation.
 * @cssprop [--max-height=var(--lr-size-30rem)] - Scroll viewport maximum height; `none` renders all.
+* @cssprop --lr-data-grid-control-active-background - Pressed background for grid controls.
+* @cssprop --lr-data-grid-control-hover-background - Hovered background for grid controls.
+* @cssprop --lr-data-grid-page-size-active-background - Pressed page-size selector background.
+* @cssprop --lr-data-grid-row-active-background - Pressed data-row background.
+* @cssprop --lr-data-grid-sortable-header-active-background - Pressed sortable-header background.
+* @cssprop --lr-data-grid-sortable-header-hover-background - Hovered sortable-header background.
 * @cssprop [--row-height=var(--lr-size-3-5rem)] - Estimated and minimum row height.
 * @cssprop --row-hover-background - Hovered-row background.
 * @cssprop [--selected-background=var(--lr-color-brand-quiet)] - Selected-row background.
@@ -237,11 +244,25 @@ withColumnsMenu:boolean;
 /** Keeps a sorted column in ascending/descending states instead of removing its sort. */
 withoutSortRemoval:boolean;
 /** Shows the global search field. */
-withSearch:boolean;private columnWidths;private columnVisibility;private columnPinning;private activeFilterColumn;private columnsMenuOpen;private activeColumnMenu;private liveText;private bodyScrollTop;private viewportHeight;private focusedRow;private focusedColumn;private dragGhost;private bodyElement?;private requestGeneration;private requestController?;private requestTimer?;private ownsLoadingState;private resizeSession?;private columnDragSession?;private columnDragSequence;private managedOverlay?;private managedOverlayOwner;private lastSelectedIndex;private isMounting;
+withSearch:boolean;private columnWidths;private columnVisibility;private columnPinning;private activeFilterColumn;private columnsMenuOpen;private activeColumnMenu;private liveText;private bodyScrollTop;
+/** Logical distance from the body's inline start; header/footer translate it into their physical
+* direction so `[part="body"]` remains the sole horizontal viewport in both writing modes. */
+private bodyScrollInlineOffset;private viewportHeight;private focusedRow;private focusedColumn;private dragGhost;private activeResizeColumn;private bodyElement?;private requestGeneration;private requestController?;private requestTimer?;private ownsLoadingState;private resizeSession?;private columnDragSession?;private columnDragSequence;private managedOverlay?;private managedOverlayOwner;private lastSelectedIndex;private isMounting;
+/** Measured whole-display-item block sizes, keyed by stable row/group identity rather than a
+* transient virtual index. Unmeasured items retain `resolvedRowHeight` as their bounded estimate. */
+private readonly measuredItemHeights;private measuredItemOffsets;private measuredItemOffsetSignature;private measuredItemOffsetEstimate;private measuredItemOffsetsDirty;private measurementLocale;private measurementDisplaySignature;private measurementRowHeight;private measurementFontSignature;
+/** The last stable item at the viewport's leading edge, retained across projections that can
+* reorder or remeasure rows before the next render reconciles their physical offsets. */
+private lastMeasurementAnchor?;private measuredBodyWidth;
+/** Width reserved by a vertical body scrollbar at logical inline end. Header/footer live outside
+* that scrollport, so their inline-end pins need the same inset to share its visible edge. */
+private bodyScrollbarInlineEndGutter;private rowMeasurementObserver?;private rowMeasurementObserverOwner?;private rowMeasurementObserverBody?;private readonly observedMeasurementElements;private measurementUpdateQueued;private measurementScrollSyncQueued;private bodyScrollStateSyncQueued;
+/** A component-issued vertical scroll that must not be mistaken for intervening user intent. */
+private expectedBodyScroll?;private pendingVirtualScroll?;
 /** Handle on the shared light-DOM live region announcements actually go through -- a region
 *  rendered inside this shadow root is not reliably announced (JAWS with Firefox ignores one
 *  outright), so `[part="live-region"]` is only an `aria-hidden` mirror. */
-private sink?;connectedCallback():void;disconnectedCallback():void;protected willUpdate(changed:PropertyValues<this>):void;protected updated(changed:PropertyValues<this>):void;private get currentManagedOverlayOwner();private managedOverlayElements;private dismissManagedOverlay;private syncManagedOverlay;private toggleColumnsPanel;private toggleFilterPanel;private toggleColumnPanel;
+private sink?;connectedCallback():void;disconnectedCallback():void;adoptedCallback():void;protected willUpdate(changed:PropertyValues<this>):void;protected updated(changed:PropertyValues<this>):void;private get currentManagedOverlayOwner();private managedOverlayElements;private dismissManagedOverlay;private syncManagedOverlay;private toggleColumnsPanel;private toggleFilterPanel;private toggleColumnPanel;
 /** Send `text` to assistive tech. It goes to the shared light-DOM region -- appended as a new
 *  child node, so an identical repeat (copying twice in a row) is read again rather than being a
 *  silent no-op -- and is mirrored into `[part="live-region"]` for styling/inspection only. */
@@ -305,4 +326,24 @@ private get ariaColumnCount();private rowIsSelectable;private rowMatches;private
 /** Object-valued grouping callbacks may return a fresh object on every projection. The lowest
 * stable member identity keeps that group's key repeatable while still separating structurally
 * equal object buckets, which cannot share a row. */
-private groupMemberKey;private groupKey;private topLevelGroupBuckets;private groupItems;private get displayItems();private groupedDisplayItems;private get resolvedRowHeight();private get virtualWindow();private get gridTemplate();private columnStyle;private estimatedColumnWidth;private columnBounds;private pinOffset;private columnLabel;private columnIsSortable;private sortFor;private activateSort;private onHeaderClick;private onFilterInput;private onBodyScroll;private onCellClick;private emitCellContextMenu;private descendantRows;private setRowSelected;private selectCurrentPage;private emitSelection;private rowSelectionState;private toggleRowExpanded;private toggleGroupExpanded;private moveColumn;private columnCanMove;private columnCanResize;private onDragStart;private onDrop;private onResizeStart;private onResizeMove;private takeResizeSession;private restoreResizeSession;private onResizeEnd;private onResizeCancel;private onResizeKey;private onPageSizeChange;private focusCell;private onGridKeyDown;private setGroupSelected;private userPinColumn;private userToggleColumn;private relayEditorFocus;private relayEditorBlur;private renderToolbar;private renderSelectAllHeader;private renderColumnMenu;private renderHeader;private renderCellValue;private renderExpandButton;private renderDataRow;private renderGroupRow;private renderBodyContent;private renderFooter;private visiblePageNumbers;private renderPager;protected render():TemplateResult;}declare global{interface HTMLElementTagNameMap{'lr-data-grid':LyraDataGrid;}}
+private groupMemberKey;private groupKey;private topLevelGroupBuckets;private groupItems;private get displayItems();private groupedDisplayItems;private measurementSignature;private invalidateRowMeasurements;
+/** Clears estimates whenever a change can alter a row's physical block size. Pure scrolling is
+* deliberately absent: cache entries are keyed by stable display identity and survive a row
+* leaving/re-entering the virtual window. */
+private reconcileRowMeasurementCache;
+/** Detects CSS-token/font metric changes even when no public reactive property changed. */
+private recordMeasurementRowHeight;private currentMeasurementFontSignature;private recordMeasuredBodyWidth;private syncMeasuredBodyWidth;
+/** Mirrors the body's actual vertical-scrollbar reservation onto outer end-pinned tracks without
+* scheduling a nested Lit update from `updated()`. */
+private syncBodyScrollbarInlineEndGutter;
+/** ResizeObserver and `updated()` may both discover a changed height in one render. Coalesce a
+* follow-up pass outside Lit's lifecycle so a measurement cannot recursively schedule updates. */
+private queueMeasurementUpdate;private queueMeasuredScrollTop;
+/** Reads layout-clamped scroll state after Lit commits without scheduling a nested update. */
+private queueBodyScrollStateSync;private resetRowMeasurementObserver;private syncRowMeasurementObserver;private displayItemOffsets;private displayItemOffset;private displayItemHeight;private displayItemIndexAtOffset;private captureMeasurementAnchor;private measurementAnchorAtOffset;private pendingMeasurementAnchor?;private correctMeasurementAnchor;private measureRenderedItems;
+/** Replays a virtual scroll command only after its target's measured offsets are stable. */
+private alignPendingVirtualScroll;private get resolvedRowHeight();private get virtualWindow();private get gridTemplate();
+/** Physical header/footer translation derived from the body's normalized logical inline offset. */
+private get bodyScrollTranslation();private columnStyle;private estimatedColumnWidth;private columnBounds;private pinOffset;private columnLabel;private columnIsSortable;private sortFor;private activateSort;private onHeaderClick;private onFilterInput;
+/** Reads the authoritative body position after native scrolling or a layout-driven clamp. */
+private syncBodyScrollState;private onBodyScroll;private onCellClick;private emitCellContextMenu;private descendantRows;private setRowSelected;private selectCurrentPage;private emitSelection;private rowSelectionState;private toggleRowExpanded;private toggleGroupExpanded;private moveColumn;private columnCanMove;private columnCanResize;private onDragStart;private onDrop;private onResizeStart;private onResizeMove;private takeResizeSession;private restoreResizeSession;private onResizeEnd;private onResizeCancel;private onResizeKey;private onPageSizeChange;private focusCell;private onGridKeyDown;private setGroupSelected;private userPinColumn;private userToggleColumn;private relayEditorFocus;private relayEditorBlur;private renderToolbar;private renderSelectAllHeader;private renderColumnMenu;private renderHeader;private renderCellValue;private renderExpandButton;private renderDataRow;private renderGroupRow;private renderBodyContent;private renderFooter;private visiblePageNumbers;private renderPager;protected render():TemplateResult;}declare global{interface HTMLElementTagNameMap{'lr-data-grid':LyraDataGrid;}}