@aceshooting/lyra-ui 16.0.0 → 18.0.0

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

@@ -45,6 +45,14 @@ export type LyraVoicePickerSelectionDirection=LyraSelectionDirection;export inte
 * 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.
 *
+* A catalog row may also set `disabled`, marking it non-actionable exactly like `lr-model-select`'s
+* own catalog rows: `aria-disabled="true"` replaces its selected/active affordances, activating it
+* (click or keyboard) commits nothing and changes no state, and arrow-key/Home/End
+* active-descendant navigation steps past it instead of landing on it. It does not affect that
+* row's own `[part="option-preview"]`, a separate affordance -- a disabled voice remains
+* previewable so a listener can hear why it is excluded. Omitted or `false` renders the row exactly
+* as before this field existed.
+*
 * @customElement lr-voice-picker
 * @slot label - Custom visible label content.
 * @slot hint - Custom hint content.
@@ -56,7 +64,8 @@ export type LyraVoicePickerSelectionDirection=LyraSelectionDirection;export inte
 * @cssstate invalid - Matches while it does not — from the very first render, before the user has
 * touched anything.
 * @cssstate user-valid - `valid`, but only after the user has interacted: a blur of the
-* trigger/combobox, or a `reportValidity()` call (which is what a submit attempt runs).
+* trigger/combobox, `reportValidity()`, or a submission attempt. Not after a silent
+* `checkValidity()` alone.
 * @cssstate user-invalid - `invalid` after that same interaction. Style validation errors with this
 * rather than `invalid`: a pristine required picker is genuinely invalid, but colouring it red
 * before the user has done anything is hostile.
@@ -130,6 +139,8 @@ 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-option-disabled-opacity=0.5] - Opacity of an option row whose catalog
+*   entry sets `disabled`.
 * @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
@@ -226,9 +237,10 @@ private updateValidity;
 *  can move -- {@linkcode updateValidity}, `reportValidity()`, and `updated()` -- because this
 *  control drives `ElementInternals` directly rather than through the `FormAssociated` mixin,
 *  which does this for the controls that do use it. `touched` is the interaction flag: it flips
-*  on the trigger's/input's first blur, and on a `reportValidity()` call, which is what a submit
-*  attempt runs. */
-private publishValidityStates;formResetCallback():void;formStateRestoreCallback(state:string|File|FormData|null,_mode?:'restore'|'autocomplete'):void;formDisabledCallback(disabled:boolean):void;checkValidity():boolean;reportValidity():boolean;
+*  on the trigger's/input's first blur, and on interactive validation -- `reportValidity()` and
+*  a submission attempt alike, via `installInteractionOnInvalid()`. A silent `checkValidity()`
+*  alone never counts. */
+private publishValidityStates;formResetCallback():void;formStateRestoreCallback(state:string|File|FormData|null,_mode?:'restore'|'autocomplete'):void;formDisabledCallback(disabled:boolean):void;private markInteracted;checkValidity():boolean;reportValidity():boolean;
 /**
 * Sets or clears a consumer-supplied validation error — the standard channel for a server-side
 * rejection ("that voice is not enabled for your account") that no client-side constraint can

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

@@ -1,10 +1,11 @@
-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
+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{installInteractionOnInvalid,installInvalidEventAlias,withStaticValidityCheck}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 ownBoolean(value,key){try{const descriptor=Object.getOwnPropertyDescriptor(value,key);return descriptor&&"value"in descriptor&&typeof descriptor.value=="boolean"?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"),disabled=ownBoolean(candidate,"disabled");entrySnapshot.push(Object.freeze({id,label,...language===void 0?{}:{language},...description===void 0?{}:{description},...previewUrl===void 0?{}:{previewUrl},...disabled===void 0?{}:{disabled}}))}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.markInteracted=()=>{this.touched||(this.touched=!0,this.publishValidityStates())},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)),installInteractionOnInvalid(this,this.markInteracted),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 withStaticValidityCheck(this,()=>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"
         data-value=${entry.id}
         ?data-synthetic=${entry.synthetic}
         aria-selected=${selected?"true":"false"}
+        aria-disabled=${entry.disabled===!0?"true":nothing}
         ?data-active=${id===activeId}
       >
         <span part="option-label">

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

@@ -1 +1 @@
-import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/form-control.styles.js";import{overlaySurfaceFill}from"../../../internal/overlay-surface.styles.js";const styles=css` :host { position: relative; display: inline-block; inline-size: 100%; min-inline-size: 0; max-inline-size: var(--lr-voice-picker-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); --_lr-voice-picker-trigger-min-height-default: var(--lr-form-control-height); } :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-voice-picker-trigger-height, var( --lr-voice-picker-trigger-min-height, var(--_lr-voice-picker-trigger-min-height-default) ) ); block-size: var(--lr-voice-picker-trigger-height, auto); 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-voice-picker-trigger-border-color, var(--lr-color-border)); border-radius: var(--lr-voice-picker-radius, var(--_lr-voice-picker-radius-default)); background: var(--lr-voice-picker-trigger-fill, 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: var( --lr-voice-picker-trigger-height, var( --lr-voice-picker-trigger-min-height, 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); ${overlaySurfaceFill} border-radius: var( --lr-voice-picker-radius, var(--lr-overlay-radius, var(--_lr-voice-picker-radius-default)) ); box-shadow: var(--lr-overlay-shadow-anchored, 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};
+import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/form-control.styles.js";import{overlaySurfaceFill}from"../../../internal/overlay-surface.styles.js";const styles=css` :host { position: relative; display: inline-block; inline-size: 100%; min-inline-size: 0; max-inline-size: var(--lr-voice-picker-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); --_lr-voice-picker-trigger-min-height-default: var(--lr-form-control-height); } :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-voice-picker-trigger-height, var( --lr-voice-picker-trigger-min-height, var(--_lr-voice-picker-trigger-min-height-default) ) ); block-size: var(--lr-voice-picker-trigger-height, auto); 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-voice-picker-trigger-border-color, var(--lr-color-border)); border-radius: var(--lr-voice-picker-radius, var(--_lr-voice-picker-radius-default)); background: var(--lr-voice-picker-trigger-fill, 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: var( --lr-voice-picker-trigger-height, var( --lr-voice-picker-trigger-min-height, 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); ${overlaySurfaceFill} border-radius: var( --lr-voice-picker-radius, var(--lr-overlay-radius, var(--_lr-voice-picker-radius-default)) ); box-shadow: var(--lr-overlay-shadow-anchored, 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']:where(:not([aria-disabled='true'])):hover, [part='option'][data-active] { background: var(--lr-voice-picker-option-active-bg, var(--lr-color-brand-quiet)); } [part='option']:where(:not([aria-disabled='true'])):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'][aria-disabled='true'] { cursor: default; opacity: var(--lr-voice-picker-option-disabled-opacity, 0.5); } [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']:where(:not([aria-disabled='true'])):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/context-meter/context-meter.class.d.ts

@@ -20,7 +20,17 @@ readonly value:number;}export interface LyraContextMeterEventMap{'lr-segment-act
 /** Absolute quantity (e.g. tokens), not a pre-computed percentage. */
 value:number;tone?:ContextMeterTone;
 /** Optional arbitrary CSS color. When set, it takes precedence over `tone`. */
-color?:string;}
+color?:string;
+/**
+* Marks this band non-actionable while `interactive` is set: its control renders genuinely
+* disabled (no tab stop, no hover/press affordance) and activating it emits no
+* `lr-segment-activate`.
+*
+* Deliberately NOT inferred from `value === 0`. A zero band is legitimately clickable in a
+* budget meter -- the original use for this component -- so inertness is declared, never
+* guessed. For the derived signal, style the `segment-empty`/`legend-item-empty` part instead.
+*/
+disabled?:boolean;}
 /**
 * `<lr-context-meter>` — a segmented occupancy meter (bar or ring) for
 * showing how a fixed capacity (a model's context window, a token budget,
@@ -42,6 +52,11 @@ color?:string;}
 *   `--lr-context-meter-segment-color` when `color` is set. While `interactive` is set it is a
 *   `<button>` (bar) or a `role="button"` arc (ring) carrying `aria-pressed`, and a second
 *   `segment-selected` part token while its index is in `selectedIndices`.
+* @csspart segment-empty - A band whose `value` is 0. Derived, not declared, and carries no
+*   built-in treatment: it is the hook for a consumer's own "nothing in this bucket" styling. A
+*   zero band stays actionable unless its entry also sets `disabled`.
+* @csspart segment-disabled - A band whose `segments` entry sets `disabled`. The control is
+*   genuinely disabled: no tab stop, no hover/press affordance, and activating it emits nothing.
 * @csspart label - The visible caption, when `label` is set.
 * @csspart semantic - The visually-hidden meter/group carrying aggregate range semantics.
 * @csspart segment-list - The visually-hidden list exposing the segment breakdown.
@@ -50,6 +65,9 @@ color?:string;}
 *   `aria-hidden` in the default presentational mode, because `segment-list` already exposes the
 *   same names to assistive technology; reachable while `interactive` is set, where its rows are
 *   the filter controls themselves.
+* @csspart legend-item-empty - The legend row of a band whose `value` is 0. Derived; no built-in
+*   treatment, exactly like `segment-empty`.
+* @csspart legend-item-disabled - The legend row of a band whose entry sets `disabled`.
 * @csspart legend-item - One swatch + label pair in the legend, one per `segments` entry. A
 *   `<button>` carrying `aria-pressed` while `interactive` is set, a plain `<span>` otherwise.
 * @csspart legend-value - One legend row's absolute count, rendered by `legendDisplay`'s
@@ -67,6 +85,7 @@ color?:string;}
 * @cssprop [--lr-context-meter-segment-seam-color=var(--lr-color-surface)] - Color of the hairline seam painted between adjacent `bar`-shape segments.
 * @cssprop [--lr-context-meter-selected-ring-color=var(--lr-color-text)] - Colour of the inset ring marking a `bar`-shape band or a legend row whose index is in `selectedIndices`. Painted inside the shadow root because the state lives in the part name, and as a ring rather than an outline so it composes with the hover/press/focus outlines instead of being replaced by them.
 * @cssprop [--lr-context-meter-selected-ring-width=var(--lr-border-width-thick)] - Width of that selected ring.
+* @cssprop [--lr-context-meter-disabled-opacity=var(--lr-opacity-disabled)] - Opacity of a band or legend row whose `segments` entry sets `disabled`. The band keeps its own colour -- it is still the datum it always was -- and loses only the affordances that promise activation.
 * @cssprop [--lr-context-meter-selected-arc-stroke=16] - Stroke width, in this component's `0 0 100 100` viewBox units, of a selected `ring`-shape arc. Arcs share one bounding box, so a selected arc reports itself by thickening in place rather than by an outline that would trace the whole ring.
 * @event lr-segment-activate - A band or its legend row was activated while `interactive` is set.
 *   `detail: { index, label, value }`. Cancelable: the default action is this component toggling
@@ -173,9 +192,9 @@ private formatShare;
 private activateSegment;
 /** Enter/Space on the ring's `role="button"` arcs, which get none of a native button's keys. */
 private onArcKeyDown;
-/** The part token list for a band or legend row, carrying its selected state in the name --
-*  `::part(segment)[data-selected]` is invalid CSS, so the state has to live in the part name. */
-private statePart;private renderSemantics;private renderBar;private renderRing;
+/** The part token list for a band or legend row. `::part(segment)[data-selected]` is invalid
+*  CSS, so every state a consumer may need to style has to live in the part name itself. */
+private segmentPart;private renderSemantics;private renderBar;private renderRing;
 /** The visible category key. It repeats, in sighted form, exactly the label/count pairs the
 *  visually-hidden `segment-list` already exposes, so the whole subtree is `aria-hidden` — a
 *  screen reader announcing the same scheme twice is worse than not announcing the duplicate at

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{nativeSvgTitle}from"../../../internal/svg-title.js";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{getNumberFormat,resolveIntlLocale}from"../../../internal/intl-cache.js";import{requestThenCommit}from"../../../internal/request-commit.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 CONTEXT_METER_LEGEND_DISPLAYS=Object.freeze(["label","label-value","label-percent","label-value-percent"]);function normalizeContextMeterLegendDisplay(value){return CONTEXT_METER_LEGEND_DISPLAYS.includes(value)?value:"label"}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.legendDisplay="label",this.interactive=!1,this.selectedIndices=[],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","selectedIndices"])}static{this.immutableEventDetails=Object.freeze(["lr-segment-activate"])}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}canonicalSelectedIndices(){const count=this.effectiveSegments.length;return[...new Set(this.selectedIndices.filter(candidate=>typeof candidate=="number"&&Number.isInteger(candidate)&&candidate>=0&&candidate<count))].sort((left,right)=>left-right)}isSelected(index){return this.canonicalSelectedIndices().includes(index)}formatShare(ratio){return getNumberFormat(this.effectiveLocale,{style:"percent",maximumFractionDigits:1}).format(ratio)}activateSegment(index){if(!this.interactive)return;const segment=this.effectiveSegments[index];segment&&requestThenCommit({requestDetail:{index,label:segment.label,value:this.normalizedSegmentValue(segment)},emitRequest:(detail,init)=>this.emit("lr-segment-activate",detail,init),commit:()=>{const selected=this.canonicalSelectedIndices();this.selectedIndices=selected.includes(index)?selected.filter(candidate=>candidate!==index):[...selected,index].sort((left,right)=>left-right)}})}onArcKeyDown(event,index){event.key!=="Enter"&&event.key!==" "||(event.preventDefault(),this.activateSegment(index))}statePart(base,selected){return selected?`${base} ${base}-selected`:base}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{nativeSvgTitle}from"../../../internal/svg-title.js";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{getNumberFormat,resolveIntlLocale}from"../../../internal/intl-cache.js";import{requestThenCommit}from"../../../internal/request-commit.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{statePart}from"../../../internal/state-part.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 CONTEXT_METER_LEGEND_DISPLAYS=Object.freeze(["label","label-value","label-percent","label-value-percent"]);function normalizeContextMeterLegendDisplay(value){return CONTEXT_METER_LEGEND_DISPLAYS.includes(value)?value:"label"}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"),disabled=getOwnDataDescriptor(entry.value,"disabled");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||disabled===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"||disabled!==MISSING_OWN_DATA_DESCRIPTOR&&typeof disabled.value!="boolean")continue;const toneValue=tone===MISSING_OWN_DATA_DESCRIPTOR?void 0:tone.value,colorValue=color===MISSING_OWN_DATA_DESCRIPTOR?void 0:color.value,disabledValue=disabled===MISSING_OWN_DATA_DESCRIPTOR?void 0:disabled.value;segments.push(Object.freeze({label:label.value,value:segmentValue.value,...toneValue===void 0?{}:{tone:toneValue},...colorValue===void 0?{}:{color:colorValue},...disabledValue===void 0?{}:{disabled:disabledValue}}))}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.legendDisplay="label",this.interactive=!1,this.selectedIndices=[],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","selectedIndices"])}static{this.immutableEventDetails=Object.freeze(["lr-segment-activate"])}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}canonicalSelectedIndices(){const count=this.effectiveSegments.length;return[...new Set(this.selectedIndices.filter(candidate=>typeof candidate=="number"&&Number.isInteger(candidate)&&candidate>=0&&candidate<count))].sort((left,right)=>left-right)}isSelected(index){return this.canonicalSelectedIndices().includes(index)}formatShare(ratio){return getNumberFormat(this.effectiveLocale,{style:"percent",maximumFractionDigits:1}).format(ratio)}activateSegment(index){if(!this.interactive)return;const segment=this.effectiveSegments[index];!segment||segment.disabled||requestThenCommit({requestDetail:{index,label:segment.label,value:this.normalizedSegmentValue(segment)},emitRequest:(detail,init)=>this.emit("lr-segment-activate",detail,init),commit:()=>{const selected=this.canonicalSelectedIndices();this.selectedIndices=selected.includes(index)?selected.filter(candidate=>candidate!==index):[...selected,index].sort((left,right)=>left-right)}})}onArcKeyDown(event,index){event.key!=="Enter"&&event.key!==" "||(event.preventDefault(),this.activateSegment(index))}segmentPart(base,index,segment){return statePart(base,{selected:this.isSelected(index),empty:this.normalizedSegmentValue(segment)===0,disabled:segment.disabled===!0})}renderSemantics(){const{used,total}=this.clampedUsedTotal,accessibleName=this.summary;return html`
       <div
         part="semantic"
         class="sr-only"
@@ -16,9 +16,10 @@ var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3
         ${this.label?html`<div part="label" aria-hidden="true">${this.label}</div>`:nothing}
         <div part="track" aria-hidden=${this.interactive?nothing:"true"}>
           ${ratios.map(({segment,value,ratio},index)=>{const title=this.segmentTitle(segment,value),selected=this.isSelected(index),style=styleMap({flexBasis:`${(ratio*100).toFixed(4)}%`,...this.segmentColor(segment)?{"--lr-context-meter-segment-color":this.segmentColor(segment)}:{}});return this.interactive?html`<button
-                  part=${this.statePart("segment",selected)}
+                  part=${this.segmentPart("segment",index,segment)}
                   type="button"
                   data-tone=${segment.tone??"neutral"}
+                  ?disabled=${segment.disabled===!0}
                   aria-pressed=${selected?"true":"false"}
                   aria-label=${title}
                   title=${title}
@@ -34,14 +35,15 @@ var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3
       </div>
     `}renderRing(){const ratios=this.ratios();let cumulative=0;const arcs=ratios.map(({segment,value,ratio},index)=>{const segLen=ratio*CIRCUMFERENCE,dashoffset=-cumulative*CIRCUMFERENCE;cumulative+=ratio;const title=this.segmentTitle(segment,value),selected=this.isSelected(index);return svg`
         <circle
-          part=${this.interactive?this.statePart("segment",selected):"segment"}
+          part=${this.interactive?this.segmentPart("segment",index,segment):"segment"}
           data-tone=${segment.tone??"neutral"}
           role=${this.interactive?"button":nothing}
-          tabindex=${this.interactive?"0":nothing}
+          tabindex=${this.interactive&&!segment.disabled?"0":nothing}
+          aria-disabled=${this.interactive&&segment.disabled?"true":nothing}
           aria-pressed=${this.interactive?selected?"true":"false":nothing}
           aria-label=${this.interactive?title:nothing}
-          @click=${this.interactive?()=>this.activateSegment(index):nothing}
-          @keydown=${this.interactive?event=>this.onArcKeyDown(event,index):nothing}
+          @click=${this.interactive&&!segment.disabled?()=>this.activateSegment(index):nothing}
+          @keydown=${this.interactive&&!segment.disabled?event=>this.onArcKeyDown(event,index):nothing}
           style=${styleMap(this.segmentColor(segment)?{"--lr-context-meter-segment-color":this.segmentColor(segment)}:{})}
           cx=${CENTER}
           cy=${CENTER}
@@ -75,8 +77,9 @@ var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3
             ${showsPercent?html`<span part="legend-percent"
                   >${this.formatShare(ratios[index]?.ratio??0)}</span
                 >`:nothing}`;return this.interactive?html`<button
-                part=${this.statePart("legend-item",selected)}
+                part=${this.segmentPart("legend-item",index,segment)}
                 type="button"
+                ?disabled=${segment.disabled===!0}
                 aria-pressed=${selected?"true":"false"}
                 @click=${()=>this.activateSegment(index)}
               >

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

@@ -1 +1 @@
-import{css}from"lit";const styles=css`:host{inline-size:100%;min-inline-size:0;display:block}:host([shape=ring]){inline-size:var(--lr-size-8em);block-size:var(--lr-size-8em);display:inline-block}[part=base]{gap:var(--lr-space-xs);flex-direction:column;display:flex}:host([shape=ring]) [part=base]{block-size:100%;inline-size:100%}[part=label]{overflow-wrap:anywhere;min-inline-size:0;font-size:var(--lr-font-size-xs);color:var(--lr-color-text-quiet);font-family:var(--lr-font)}[part=track]{block-size:var(--lr-context-meter-track-size,var(--lr-size-0-5rem));border-radius:var(--lr-context-meter-track-radius,calc(var(--lr-radius) * .5));background:var(--lr-context-meter-track-bg,color-mix(in srgb, var(--lr-color-border) 30%, transparent));align-items:stretch;display:flex;position:relative;overflow:hidden}[part~=segment]{min-inline-size:calc(var(--lr-border-width-thin) * 2);background:var(--lr-color-border);block-size:100%;transition:flex-basis var(--lr-transition-base);flex:none;display:block}[part~=segment]:not(:first-of-type){border-inline-start:var(--lr-border-width-thin) solid var(--lr-context-meter-segment-seam-color,var(--lr-color-surface))}[part~=segment][data-tone=brand]{background:var(--lr-color-brand)}[part~=segment][data-tone=success]{background:var(--lr-color-success)}[part~=segment][data-tone=warning]{background:var(--lr-color-warning)}[part~=segment][data-tone=danger]{background:var(--lr-color-danger)}[part~=segment][style*=--lr-context-meter-segment-color]{background:var(--lr-context-meter-segment-color)}[part=legend]{align-items:center;gap:var(--lr-space-2xs) var(--lr-space-s);font-size:var(--lr-font-size-xs);color:var(--lr-color-text-quiet);flex-wrap:wrap;margin-block-start:var(--lr-space-xs);display:flex}[part~=legend-item]{align-items:center;gap:var(--lr-space-2xs);min-inline-size:0;display:inline-flex}[part=legend-swatch]{inline-size:var(--lr-context-meter-legend-swatch-size,var(--lr-size-0-625rem));block-size:var(--lr-context-meter-legend-swatch-size,var(--lr-size-0-625rem));border-radius:var(--lr-radius-xs);background:var(--lr-color-border);flex:none}[part=legend-swatch][data-tone=brand]{background:var(--lr-color-brand)}[part=legend-swatch][data-tone=success]{background:var(--lr-color-success)}[part=legend-swatch][data-tone=warning]{background:var(--lr-color-warning)}[part=legend-swatch][data-tone=danger]{background:var(--lr-color-danger)}[part=legend-swatch][style*=--lr-context-meter-segment-color]{background:var(--lr-context-meter-segment-color)}[part=legend-label]{overflow-wrap:anywhere;min-inline-size:0}button[part~=segment]{appearance:none;font:inherit;color:inherit;cursor:pointer;border:0;padding:0}button[part~=segment]:where(:hover){outline:var(--lr-border-width-thin) solid var(--lr-color-text-quiet);outline-offset:calc(var(--lr-border-width-thin) * -1)}button[part~=segment]:where(:active){outline-color:var(--lr-color-text)}button[part~=segment]:where(:focus-visible){outline:var(--lr-focus-ring);outline-offset:calc(var(--lr-focus-ring-width) * -1)}:host([shape=ring]) [part~=segment]:where(:hover){opacity:.8}:host([shape=ring]) [part~=segment]:where(:active){opacity:.6}:host([shape=ring]) [part~=segment]:where(:focus-visible){opacity:.8;outline:var(--lr-focus-ring);outline-offset:var(--lr-focus-ring-offset)}button[part~=legend-item]{appearance:none;padding:var(--lr-space-2xs);border-radius:var(--lr-radius-xs);font:inherit;color:inherit;text-align:start;cursor:pointer;transition:var(--lr-transition-interactive);background:0 0;border:0}button[part~=legend-item]:where(:hover){background:var(--lr-color-brand-quiet)}button[part~=legend-item]:where(:active){background:var(--lr-color-border)}button[part~=legend-item]:where(:focus-visible){outline:var(--lr-focus-ring);outline-offset:var(--lr-focus-ring-offset)}button[part~=segment-selected],button[part~=legend-item-selected]{box-shadow:inset 0 0 0 var(--lr-context-meter-selected-ring-width,var(--lr-border-width-thick)) var(--lr-context-meter-selected-ring-color,var(--lr-color-text))}:host([shape=ring]) [part~=segment-selected]{stroke-width:var(--lr-context-meter-selected-arc-stroke,16)}:host([shape=ring][show-legend]){block-size:auto}:host([shape=ring][show-legend]) svg[part=base]{inline-size:var(--lr-size-8em);block-size:var(--lr-size-8em)}:host([shape=ring]) svg[part=base]{display:block;overflow:visible}:host([shape=ring]) [part=track]{fill:none;stroke:color-mix(in srgb, var(--lr-color-border) 30%, transparent)}:host([shape=ring]) [part~=segment]{fill:none;stroke:var(--lr-color-border);stroke-linecap:butt;transition:stroke-dasharray var(--lr-transition-base), stroke-dashoffset var(--lr-transition-base)}:host([shape=ring]) [part~=segment][data-tone=brand]{stroke:var(--lr-color-brand)}:host([shape=ring]) [part~=segment][data-tone=success]{stroke:var(--lr-color-success)}:host([shape=ring]) [part~=segment][data-tone=warning]{stroke:var(--lr-color-warning)}:host([shape=ring]) [part~=segment][data-tone=danger]{stroke:var(--lr-color-danger)}:host([shape=ring]) [part~=segment][style*=--lr-context-meter-segment-color]{stroke:var(--lr-context-meter-segment-color)}:host([shape=ring]) [part=label]{overflow:hidden}:host([shape=ring]) .ring-label{overflow-wrap:anywhere;block-size:100%;inline-size:100%;color:var(--lr-color-text-quiet);font-size:var(--lr-font-size-2xs);line-height:var(--lr-line-height-compact);text-align:center;text-transform:uppercase;justify-content:center;align-items:center;display:flex;overflow:hidden}@media (forced-colors:active){[part~=segment],[part=legend-swatch]{forced-color-adjust:none;border:var(--lr-border-width-thin) solid Canvas;background:canvastext}[part~=segment][data-tone=success],[part=legend-swatch][data-tone=success]{border-style:dashed}[part~=segment][data-tone=warning],[part=legend-swatch][data-tone=warning]{border-style:dotted}[part~=segment][data-tone=danger],[part=legend-swatch][data-tone=danger]{border-style:double}:host([shape=ring]) [part~=segment]{fill:none;stroke:canvastext}:host([shape=ring]) [part~=segment][data-tone=success]{stroke-dasharray:8 3}:host([shape=ring]) [part~=segment][data-tone=warning]{stroke-dasharray:2 3}:host([shape=ring]) [part~=segment][data-tone=danger]{stroke-dasharray:8 2 2 2}button[part~=segment-selected]{box-shadow:inset 0 0 0 var(--lr-border-width-thick) Highlight}button[part~=legend-item-selected]{outline:var(--lr-border-width-thick) solid Highlight;outline-offset:calc(var(--lr-border-width-thick) * -1)}:host([shape=ring]) [part~=segment-selected]{stroke:highlight}}@media (prefers-reduced-motion:reduce){[part~=segment],button[part~=legend-item]{transition:none!important}}`;export{styles};
+import{css}from"lit";const styles=css`:host{inline-size:100%;min-inline-size:0;display:block}:host([shape=ring]){inline-size:var(--lr-size-8em);block-size:var(--lr-size-8em);display:inline-block}[part=base]{gap:var(--lr-space-xs);flex-direction:column;display:flex}:host([shape=ring]) [part=base]{block-size:100%;inline-size:100%}[part=label]{overflow-wrap:anywhere;min-inline-size:0;font-size:var(--lr-font-size-xs);color:var(--lr-color-text-quiet);font-family:var(--lr-font)}[part=track]{block-size:var(--lr-context-meter-track-size,var(--lr-size-0-5rem));border-radius:var(--lr-context-meter-track-radius,calc(var(--lr-radius) * .5));background:var(--lr-context-meter-track-bg,color-mix(in srgb, var(--lr-color-border) 30%, transparent));align-items:stretch;display:flex;position:relative;overflow:hidden}[part~=segment]{min-inline-size:calc(var(--lr-border-width-thin) * 2);background:var(--lr-color-border);block-size:100%;transition:flex-basis var(--lr-transition-base);flex:none;display:block}[part~=segment]:not(:first-of-type){border-inline-start:var(--lr-border-width-thin) solid var(--lr-context-meter-segment-seam-color,var(--lr-color-surface))}[part~=segment][data-tone=brand]{background:var(--lr-color-brand)}[part~=segment][data-tone=success]{background:var(--lr-color-success)}[part~=segment][data-tone=warning]{background:var(--lr-color-warning)}[part~=segment][data-tone=danger]{background:var(--lr-color-danger)}[part~=segment][style*=--lr-context-meter-segment-color]{background:var(--lr-context-meter-segment-color)}[part=legend]{align-items:center;gap:var(--lr-space-2xs) var(--lr-space-s);font-size:var(--lr-font-size-xs);color:var(--lr-color-text-quiet);flex-wrap:wrap;margin-block-start:var(--lr-space-xs);display:flex}[part~=legend-item]{align-items:center;gap:var(--lr-space-2xs);min-inline-size:0;display:inline-flex}[part=legend-swatch]{inline-size:var(--lr-context-meter-legend-swatch-size,var(--lr-size-0-625rem));block-size:var(--lr-context-meter-legend-swatch-size,var(--lr-size-0-625rem));border-radius:var(--lr-radius-xs);background:var(--lr-color-border);flex:none}[part=legend-swatch][data-tone=brand]{background:var(--lr-color-brand)}[part=legend-swatch][data-tone=success]{background:var(--lr-color-success)}[part=legend-swatch][data-tone=warning]{background:var(--lr-color-warning)}[part=legend-swatch][data-tone=danger]{background:var(--lr-color-danger)}[part=legend-swatch][style*=--lr-context-meter-segment-color]{background:var(--lr-context-meter-segment-color)}[part=legend-label]{overflow-wrap:anywhere;min-inline-size:0}button[part~=segment]{appearance:none;font:inherit;color:inherit;cursor:pointer;border:0;padding:0}button[part~=segment]:where(:not(:disabled)):where(:hover){outline:var(--lr-border-width-thin) solid var(--lr-color-text-quiet);outline-offset:calc(var(--lr-border-width-thin) * -1)}button[part~=segment]:where(:not(:disabled)):where(:active){outline-color:var(--lr-color-text)}button[part~=segment]:where(:focus-visible){outline:var(--lr-focus-ring);outline-offset:calc(var(--lr-focus-ring-width) * -1)}:host([shape=ring]) [part~=segment]:where(:not([aria-disabled=true])):where(:hover){opacity:.8}:host([shape=ring]) [part~=segment]:where(:not([aria-disabled=true])):where(:active){opacity:.6}:host([shape=ring]) [part~=segment]:where(:focus-visible){opacity:.8;outline:var(--lr-focus-ring);outline-offset:var(--lr-focus-ring-offset)}button[part~=legend-item]{appearance:none;padding:var(--lr-space-2xs);border-radius:var(--lr-radius-xs);font:inherit;color:inherit;text-align:start;cursor:pointer;transition:var(--lr-transition-interactive);background:0 0;border:0}button[part~=legend-item]:where(:not(:disabled)):where(:hover){background:var(--lr-color-brand-quiet)}button[part~=legend-item]:where(:not(:disabled)):where(:active){background:var(--lr-color-border)}button[part~=legend-item]:where(:focus-visible){outline:var(--lr-focus-ring);outline-offset:var(--lr-focus-ring-offset)}button[part~=segment-selected],button[part~=legend-item-selected]{box-shadow:inset 0 0 0 var(--lr-context-meter-selected-ring-width,var(--lr-border-width-thick)) var(--lr-context-meter-selected-ring-color,var(--lr-color-text))}:host([shape=ring]) [part~=segment-selected]{stroke-width:var(--lr-context-meter-selected-arc-stroke,16)}button[part~=segment]:where(:disabled),button[part~=legend-item]:where(:disabled),:host([shape=ring]) [part~=segment]:where([aria-disabled=true]){cursor:default;opacity:var(--lr-context-meter-disabled-opacity,var(--lr-opacity-disabled))}:host([shape=ring][show-legend]){block-size:auto}:host([shape=ring][show-legend]) svg[part=base]{inline-size:var(--lr-size-8em);block-size:var(--lr-size-8em)}:host([shape=ring]) svg[part=base]{display:block;overflow:visible}:host([shape=ring]) [part=track]{fill:none;stroke:color-mix(in srgb, var(--lr-color-border) 30%, transparent)}:host([shape=ring]) [part~=segment]{fill:none;stroke:var(--lr-color-border);stroke-linecap:butt;transition:stroke-dasharray var(--lr-transition-base), stroke-dashoffset var(--lr-transition-base)}:host([shape=ring]) [part~=segment][data-tone=brand]{stroke:var(--lr-color-brand)}:host([shape=ring]) [part~=segment][data-tone=success]{stroke:var(--lr-color-success)}:host([shape=ring]) [part~=segment][data-tone=warning]{stroke:var(--lr-color-warning)}:host([shape=ring]) [part~=segment][data-tone=danger]{stroke:var(--lr-color-danger)}:host([shape=ring]) [part~=segment][style*=--lr-context-meter-segment-color]{stroke:var(--lr-context-meter-segment-color)}:host([shape=ring]) [part=label]{font-size:var(--lr-size-1em);overflow:hidden}:host([shape=ring]) .ring-label{overflow-wrap:anywhere;block-size:100%;inline-size:100%;color:var(--lr-color-text-quiet);font-size:calc(var(--lr-size-1em) * .625);line-height:var(--lr-line-height-compact);text-align:center;text-transform:uppercase;justify-content:center;align-items:center;display:flex;overflow:hidden}@media (forced-colors:active){[part~=segment],[part=legend-swatch]{forced-color-adjust:none;border:var(--lr-border-width-thin) solid Canvas;background:canvastext}[part~=segment][data-tone=success],[part=legend-swatch][data-tone=success]{border-style:dashed}[part~=segment][data-tone=warning],[part=legend-swatch][data-tone=warning]{border-style:dotted}[part~=segment][data-tone=danger],[part=legend-swatch][data-tone=danger]{border-style:double}:host([shape=ring]) [part~=segment]{fill:none;stroke:canvastext}:host([shape=ring]) [part~=segment][data-tone=success]{stroke-dasharray:8 3}:host([shape=ring]) [part~=segment][data-tone=warning]{stroke-dasharray:2 3}:host([shape=ring]) [part~=segment][data-tone=danger]{stroke-dasharray:8 2 2 2}button[part~=segment-selected]{box-shadow:inset 0 0 0 var(--lr-border-width-thick) Highlight}button[part~=legend-item-selected]{outline:var(--lr-border-width-thick) solid Highlight;outline-offset:calc(var(--lr-border-width-thick) * -1)}:host([shape=ring]) [part~=segment-selected]{stroke:highlight}}@media (prefers-reduced-motion:reduce){[part~=segment],button[part~=legend-item]{transition:none!important}}`;export{styles};

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

@@ -219,7 +219,9 @@ filterDebounce:number;
 get filteredCount():number;
 /** Keeps matching descendants and their ancestors during tree filtering. */
 filterFromLeafRows:boolean;private _filters;
-/** Clone-owned controlled per-column filters. */
+/** Clone-owned controlled per-column filters. Re-binding an equal value is not a change: the
+*  held value and its reference survive, nothing re-renders, and no server request is
+*  rescheduled, so a host that re-binds on every render cannot postpone the request forever. */
 get filters():readonly DataGridFilter[];set filters(value:readonly DataGridFilter[]);private _groupBy;
 /** One or more field/column identifiers used to group client rows.
 * @default null */
@@ -295,7 +297,8 @@ get selectedRows():readonly Row[];set selectedRows(next:readonly Row[]);private
 server:boolean;
 /** Density on the shared Lyra size ladder. */
 size:DataGridSize;private _sort;
-/** Clone-owned controlled multi-column sorting state. */
+/** Clone-owned controlled multi-column sorting state. Like `filters`, re-binding an equal value
+*  is not a change and reschedules nothing. */
 get sort():SortingState;set sort(value:SortingState);
 /** Starts new sort cycles descending. */
 sortDescFirst:boolean;