@aceshooting/lyra-ui 13.0.1 → 14.1.0

package/dist/components/forms/token-input/token-input.class.d.ts

@@ -6,6 +6,12 @@ import{type PropertyValues,type TemplateResult}from'lit';import{LyraElement}from
 * internal input is in a shadow root and has no form owner, so the platform can never do it here).
 * A `delimiter` keystroke stays purely a commit key and never submits. Tab commits a nonempty
 * draft without preventing the key, so native focus traversal still advances.
+* Composing keyboard events, including legacy key code 229, remain with the draft or inline
+* editor without adding, removing, committing or closing tokens.
+* Host-root external descriptions precede local hint/error guidance on the native draft input
+* and follow live source replacement, removal, reconnection and document adoption.
+* Removing label, hint or error-text safely removes the copy without changing native
+* attribute-removal property readback. Editable token labels keep their text vertically centered.
 * `select()`, the selection getters/setters, `setSelectionRange()`, and `setRangeText()` expose the
 * native draft input's editing surface. Range edits synchronize the pending draft without
 * emitting user events, so a later delimiter/Enter/Tab/blur commit consumes the edited text.
@@ -144,7 +150,7 @@ private editingIndex;private editDraft;
 *  current token count so a shrinking list can never leave the row with no tab stop. */
 private rovingIndex;private focusEditorPending;private focusTokenPending;private tokenFocusRepairPending?;
 /** One native blur can be followed by a teardown blur when its commit removes the focused editor. */
-private editorBlurRelayed;private hasLabelSlot;private hasHintSlot;private hasErrorSlot;private hasStartSlot;private hasEndSlot;private inputEl?;private internals;private validityController;
+private editorBlurRelayed;private hasLabelSlot;private hasHintSlot;private hasErrorSlot;private hasStartSlot;private hasEndSlot;private inputEl?;private externalDescriptionLease?;private syncExternalDescription;private releaseExternalDescription;private internals;private validityController;
 /** Consumer-supplied validation message reflected through `custom-error`. */
 customError:string|null;private labelId;private hintId;private errorId;private _value;private _defaultValue;private _valueDirty;private settingDefaultValue;private reflectingDefaultValue;private _fieldsetDisabled;private _name;private _required;private _disabled;get value():readonly string[];set value(next:readonly string[]);
 /** Reflected JSON-array reset default; changing it never overwrites a dirty live token list. */
@@ -153,7 +159,7 @@ get defaultValue():readonly string[];set defaultValue(next:readonly string[]|nul
 *  This control keys its `FormData` entries directly off `name` (see
 *  `syncValidity()`), so a rename must rebuild that `FormData` in the same
 *  tick -- mirrors `<lr-combobox>`'s identical `name` setter. */
-get name():string;set name(next:string);get required():boolean;set required(next:boolean);get disabled():boolean;set disabled(next:boolean);constructor();connectedCallback():void;disconnectedCallback():void;get form():HTMLFormElement|null;set form(owner:FormOwnerValue);getForm():HTMLFormElement|null;get labels():NodeList;get validity():ValidityState;get validationMessage():string;get willValidate():boolean;
+get name():string;set name(next:string);get required():boolean;set required(next:boolean);get disabled():boolean;set disabled(next:boolean);constructor();connectedCallback():void;disconnectedCallback():void;adoptedCallback():void;get form():HTMLFormElement|null;set form(owner:FormOwnerValue);getForm():HTMLFormElement|null;get labels():NodeList;get validity():ValidityState;get validationMessage():string;get willValidate():boolean;
 /** Effective disabled state: this element's own `disabled` OR an ancestor
 *  `<fieldset disabled>`'s inherited state -- mirrors native `<input>`, whose
 *  own `disabled` IDL property/attribute is never mutated by a fieldset. */

package/dist/components/forms/token-input/token-input.class.js

@@ -1,4 +1,4 @@
-var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html,nothing}from"lit";import{property,query,state}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{installFormControlLabelSupport}from"../../../internal/form-control-labels.js";installFormControlLabelSupport();import{activeElementIn}from"../../../internal/active-element.js";import{captureComposedFocusRepair,applyComposedFocusRepair}from"../../../internal/focus-navigation.js";import{AnchoredValidityController,VALIDITY_ANCHOR}from"../../../internal/anchored-validity.js";import{syncValidityStates}from"../../../internal/custom-states.js";import{nextId}from"../../../internal/a11y.js";import{closeIcon}from"../../../internal/icons.js";import{autocorrectConverter,normalizeAutocorrect,spellcheckConverter}from"../../../internal/converters.js";import{submitOnEnter}from"../../../internal/submit-on-enter.js";import{dispatchNativeEvent,dispatchNativeInputEvent,relayNativeEvent}from"../../../internal/native-event-relay.js";import{sizes}from"../../../internal/sizes.styles.js";import{styles}from"./token-input.styles.js";import{attachInternalsSafely,createStringArrayFormDataState,getFormOwner,installCustomErrorProperty,isBarredFromValidation,readStringArrayFormDataState,setFormOwner}from"../../../internal/form-associated.js";import{installInvalidEventAlias}from"../../../internal/invalid-event-alias.js";import{LYRA_DEFAULT_fieldRequired,LYRA_DEFAULT_removeWithContext,LYRA_DEFAULT_tokenInputEditWithContext,LYRA_DEFAULT_tokenInputRequired}from"../../../internal/default-strings.generated.js";const delimiterConverter={fromAttribute:value=>value===null?",":value===""||value==="none"?null:value};function normalizeStringArray(value){if(!Array.isArray(value))return Object.freeze([]);try{const normalized=[];for(const entry of value)typeof entry=="string"&&normalized.push(entry);return Object.freeze(normalized)}catch{return Object.freeze([])}}const stringArrayConverter={fromAttribute:value=>{if(value===null)return null;try{const parsed=JSON.parse(value);return normalizeStringArray(parsed)}catch{return[]}},toAttribute:value=>value==null?null:JSON.stringify(value)};class LyraTokenInput extends LyraElement{static{this.defaultStrings={...super.defaultStrings,fieldRequired:LYRA_DEFAULT_fieldRequired,removeWithContext:LYRA_DEFAULT_removeWithContext,tokenInputEditWithContext:LYRA_DEFAULT_tokenInputEditWithContext,tokenInputRequired:LYRA_DEFAULT_tokenInputRequired}}static{this.formAssociated=!0}static{this.styles=[LyraElement.styles,sizes,styles]}static{this.properties={customError:{attribute:"custom-error",reflect:!0,noAccessor:!0},name:{reflect:!0,noAccessor:!0},required:{type:Boolean,reflect:!0,noAccessor:!0},disabled:{type:Boolean,reflect:!0,noAccessor:!0},defaultValue:{attribute:"value",reflect:!0,useDefault:!0,converter:stringArrayConverter,noAccessor:!0}}}get autocorrect(){return this.autocorrectValue}set autocorrect(next){this.autocorrectValue=normalizeAutocorrect(next),this.requestUpdate()}get editable(){return this._editable}set editable(next){const old=this._editable;this._editable=!!next,this._editable||this.discardTransientState(!1),this.requestUpdate("editable",old)}get value(){return this._value}set value(next){const old=this._value;this.settingDefaultValue||(this._valueDirty=!0);const normalized=normalizeStringArray(next);this.captureTokenFocusRepair(normalized),this.editingIndex>=0&&normalized!==old&&(this.editingIndex=-1,this.editDraft="",this.focusEditorPending=!1),this._value=normalized,this.requestUpdate("value",old),this.internals&&this.syncValidity()}get defaultValue(){return this._defaultValue}set defaultValue(next){if(this.reflectingDefaultValue)return;const old=this._defaultValue;this._defaultValue=normalizeStringArray(next),this.reflectingDefaultValue=!0;try{next==null?this.removeAttribute("value"):this.setAttribute("value",JSON.stringify(this._defaultValue))}finally{this.reflectingDefaultValue=!1}this._valueDirty||this.restoreLiveValueFromDefault(),this.requestUpdate("defaultValue",old)}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.syncValidity(),this.requestUpdate("name",old)}get required(){return this._required}set required(next){const old=this._required;this._required=!!next,this.toggleAttribute("required",this._required),this.syncValidity(),this.requestUpdate("required",old)}get disabled(){return this._disabled}set disabled(next){const old=this._disabled,wasEffectivelyDisabled=this.effectiveDisabled;this._disabled=!!next,!wasEffectivelyDisabled&&this.effectiveDisabled&&this.retireDisabledInteraction(),this.toggleAttribute("disabled",this._disabled),this.syncValidity(),this.requestUpdate("disabled",old)}constructor(){super(),this.label="",this.hint="",this.errorText="",this.placeholder="",this.spellcheck=!0,this.autocapitalize="",this.autocorrectValue=!0,this.accessibleLabel="",this.size="m",this.pill=!1,this.allowDuplicates=!1,this._editable=!1,this.delimiter=",",this.draft="",this.touched=!1,this.editingIndex=-1,this.editDraft="",this.rovingIndex=0,this.focusEditorPending=!1,this.focusTokenPending=-1,this.editorBlurRelayed=!1,this.hasLabelSlot=!1,this.hasHintSlot=!1,this.hasErrorSlot=!1,this.hasStartSlot=!1,this.hasEndSlot=!1,this.labelId=nextId("token-input-label"),this.hintId=nextId("token-input-hint"),this.errorId=nextId("token-input-error"),this._value=Object.freeze([]),this._defaultValue=Object.freeze([]),this._valueDirty=!1,this.settingDefaultValue=!1,this.reflectingDefaultValue=!1,this._fieldsetDisabled=!1,this._name="",this._required=!1,this._disabled=!1,this.onEditInput=event=>{event.stopPropagation(),!this.liveDisabled&&(this.editDraft=event.target.value)},this.onEditFocus=event=>{if(this.liveDisabled){event.stopPropagation();return}this.editorBlurRelayed=!1,relayNativeEvent(this,event)},this.onEditKeyDown=event=>{event.key==="Enter"?(event.preventDefault(),this.commitEdit(!0)):event.key==="Escape"&&(event.preventDefault(),event.stopPropagation(),this.cancelEdit())},this.onEditBlur=event=>{if(this.editorBlurRelayed){event.stopPropagation();return}this.editorBlurRelayed=!0,event.stopPropagation(),queueMicrotask(()=>{!this.isConnected||!this.editable||this.liveDisabled?this.discardTransientState(!1):this.commitEdit(!1),relayNativeEvent(this,event)})},this.onInput=event=>{event.stopPropagation(),!this.liveDisabled&&(this.draft=event.target.value)},this.onKeyDown=event=>{this.liveDisabled||(event.key==="Enter"||this.delimiter!==null&&event.key===this.delimiter?this.draft.trim()?(event.preventDefault(),this.addDraft()):event.key==="Enter"&&submitOnEnter(this,event):event.key==="Tab"?this.draft.trim()&&this.addDraft():event.key==="Backspace"&&!this.draft&&this.value.length&&this.editingIndex<0&&this.removeToken(this.value.length-1))},this.onBlur=event=>{this.liveDisabled||(this.draft.trim()&&this.addDraft(),this.touched=!0),this.syncValidity(),relayNativeEvent(this,event)},this.onFocus=event=>{if(this.liveDisabled){event.stopPropagation();return}relayNativeEvent(this,event)},this.onLabelSlotChange=e=>{this.hasLabelSlot=e.target.assignedElements({flatten:!0}).length>0},this.onHintSlotChange=e=>{this.hasHintSlot=e.target.assignedElements({flatten:!0}).length>0},this.onErrorSlotChange=e=>{this.hasErrorSlot=e.target.assignedElements({flatten:!0}).length>0},this.onStartSlotChange=e=>{this.hasStartSlot=e.target.assignedElements({flatten:!0}).length>0},this.onEndSlotChange=e=>{this.hasEndSlot=e.target.assignedElements({flatten:!0}).length>0},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))}connectedCallback(){super.connectedCallback(),this.syncValidity()}disconnectedCallback(){this.tokenFocusRepairPending=void 0,this.discardTransientState(!0),super.disconnectedCallback()}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}get effectiveDisabled(){return this.disabled||this._fieldsetDisabled}formDisabledCallback(disabled){const wasEffectivelyDisabled=this.effectiveDisabled;this._fieldsetDisabled=disabled,!wasEffectivelyDisabled&&this.effectiveDisabled&&this.retireDisabledInteraction(),this.syncValidity(),this.requestUpdate()}[VALIDITY_ANCHOR](){return this.inputEl??this.renderRoot?.querySelector('[part="input-wrapper"]')??null}checkValidity(){return this.internals.checkValidity()}reportValidity(){return this.touched=!0,this.syncValidity(),this.internals.reportValidity()}setCustomValidity(message){this.validityController.setCustomValidity(message??""),this.syncValidity()}get liveDisabled(){return this.effectiveDisabled||this.matches(":disabled")}focus(options){this.liveDisabled||this.inputEl?.focus(options)}blur(){const active=this.shadowRoot?.activeElement;active&&typeof active.blur=="function"&&active.blur()}click(){this.liveDisabled||this.inputEl?.focus()}select(){this.inputEl?.select()}get selectionStart(){return this.inputEl?.selectionStart??null}set selectionStart(value){this.inputEl&&(this.inputEl.selectionStart=value??0)}get selectionEnd(){return this.inputEl?.selectionEnd??null}set selectionEnd(value){this.inputEl&&(this.inputEl.selectionEnd=value??0)}get selectionDirection(){return this.inputEl?.selectionDirection??null}set selectionDirection(value){this.inputEl&&(this.inputEl.selectionDirection=value??"none")}setSelectionRange(selectionStart,selectionEnd,selectionDirection="none"){this.inputEl?.setSelectionRange(selectionStart,selectionEnd,selectionDirection??"none")}setRangeText(replacement,start,end,selectMode="preserve"){const input=this.inputEl;input&&(start===void 0||end===void 0?input.setRangeText(replacement):input.setRangeText(replacement,start,end,selectMode),this.draft=input.value)}willUpdate(changed){super.willUpdate(changed),this.hasUpdated||(this.hasLabelSlot=Array.from(this.children??[]).some(el=>el.getAttribute("slot")==="label"),this.hasHintSlot=Array.from(this.children??[]).some(el=>el.getAttribute("slot")==="hint"),this.hasErrorSlot=Array.from(this.children??[]).some(el=>el.getAttribute("slot")==="error"),this.hasStartSlot=Array.from(this.children??[]).some(el=>el.getAttribute("slot")==="start"),this.hasEndSlot=Array.from(this.children??[]).some(el=>el.getAttribute("slot")==="end"))}get barredFromValidation(){return isBarredFromValidation(this,this.internals)}syncValidity(){const barred=this.barredFromValidation,missing=!barred&&this.required&&this.value.length===0;this.validityController.setValidity(missing?{valueMissing:!0}:{},missing?this.localize("tokenInputRequired"):""),this.toggleAttribute("data-invalid",!barred&&this.touched&&!this.internals.validity.valid),syncValidityStates(this.internals,{required:this.required,hasInteracted:this.touched,barred});const data=new FormData;this.name&&this.value.forEach(token=>data.append(this.name,token)),this.internals.setFormValue(this.name?data:null,createStringArrayFormDataState(this.name,this.value))}updateValue(next){this.value=next,this.syncValidity(),dispatchNativeInputEvent(this),this.emit("lr-input",Object.freeze({value:Object.freeze([...this.value])})),dispatchNativeEvent(this,"change"),this.emit("lr-change",Object.freeze({value:Object.freeze([...this.value])}))}addDraft(){if(this.liveDisabled)return;const candidates=(this.delimiter?this.draft.split(this.delimiter):[this.draft]).map(token=>token.trim()).filter(Boolean),next=[...this.value],seen=this.allowDuplicates?null:new Set(next),added=[];for(const token of candidates)seen?.has(token)||(seen?.add(token),next.push(token),added.push(token));if(added.length===0){this.draft="";return}this.emit("lr-add",Object.freeze({value:added[added.length-1],values:Object.freeze([...added])}),{cancelable:!0}).defaultPrevented||(this.updateValue(next),this.draft="")}discardTransientState(clearDraft){this.editingIndex=-1,this.editDraft="",this.focusEditorPending=!1,this.focusTokenPending=-1,clearDraft&&(this.draft="",this.inputEl&&(this.inputEl.value=""))}retireDisabledInteraction(){this.tokenFocusRepairPending=void 0,this.discardTransientState(!0);const active=this.shadowRoot?.activeElement;active&&typeof active.blur=="function"&&active.blur()}captureTokenFocusRepair(next){this.tokenFocusRepairPending=void 0;const tokens=[...this.renderRoot?.querySelectorAll('[part~="token"]')??[]];if(next.length>=tokens.length)return;const active=activeElementIn(this.shadowRoot),token=active?.closest('[part~="token"]');if(!active||!token)return;const index=tokens.indexOf(token);if(index<0)return;const repair=captureComposedFocusRepair(this,active);if(!repair)return;const targetIndex=Math.min(index,Math.max(0,next.length-1));this.rovingIndex=targetIndex,this.tokenFocusRepairPending={index:targetIndex,surface:active.matches('[part~="remove"]')?"remove":"label",repair}}removeToken(index){if(this.liveDisabled)return;const removed=this.value[index];removed===void 0||this.emit("lr-remove",{value:removed,index},{cancelable:!0}).defaultPrevented||(this.editingIndex>=0&&(this.editingIndex=-1,this.editDraft=""),this.updateValue(this.value.filter((_token,i)=>i!==index)))}get activeTokenIndex(){return this.value.length?Math.min(Math.max(this.rovingIndex,0),this.value.length-1):-1}startEdit(index){this.liveDisabled||!this.editable||index<0||index>=this.value.length||(this.editingIndex=index,this.editDraft=this.value[index],this.rovingIndex=index,this.editorBlurRelayed=!1,this.focusEditorPending=!0)}cancelEdit(){this.editingIndex<0||(this.focusTokenPending=this.editingIndex,this.editingIndex=-1,this.editDraft="")}commitEdit(restoreFocus){if(this.liveDisabled){this.discardTransientState(!1);return}const index=this.editingIndex;if(index<0)return;const previousValue=this.value[index],next=this.editDraft.trim();if(previousValue===void 0||!next||next===previousValue||!this.allowDuplicates&&this.value.some((token,i)=>i!==index&&token===next)){restoreFocus&&(this.focusTokenPending=index),this.editingIndex=-1,this.editDraft="";return}this.emit("lr-token-edit",{value:next,previousValue,index},{cancelable:!0}).defaultPrevented||(restoreFocus&&(this.focusTokenPending=index),this.editingIndex=-1,this.editDraft="",this.updateValue(this.value.map((token,i)=>i===index?next:token)))}moveRovingFocus(index){if(!this.value.length)return;const clamped=Math.min(Math.max(index,0),this.value.length-1);this.rovingIndex=clamped,this.focusTokenPending=clamped}onTokenKeyDown(event,index){if(this.liveDisabled)return;const rtl=this.effectiveDirection==="rtl",forward=rtl?"ArrowLeft":"ArrowRight",backward=rtl?"ArrowRight":"ArrowLeft";event.key==="Enter"||event.key===" "||event.key==="F2"?(event.preventDefault(),this.startEdit(index)):event.key===forward?(event.preventDefault(),this.moveRovingFocus(index+1)):event.key===backward?(event.preventDefault(),this.moveRovingFocus(index-1)):event.key==="Home"?(event.preventDefault(),this.moveRovingFocus(0)):event.key==="End"&&(event.preventDefault(),this.moveRovingFocus(this.value.length-1))}stopInternalChange(event){event.stopPropagation()}formResetCallback(){this.restoreLiveValueFromDefault(),this.discardTransientState(!0),this.rovingIndex=0,this.touched=!1,this.syncValidity()}restoreLiveValueFromDefault(){this.settingDefaultValue=!0;try{this.value=[...this._defaultValue]}finally{this.settingDefaultValue=!1}this._valueDirty=!1}formStateRestoreCallback(state2,_mode){this.value=readStringArrayFormDataState(state2),this.discardTransientState(!0),this.rovingIndex=0,this.touched=!1,this.syncValidity()}updated(changed){if(super.updated(changed),this.focusEditorPending){this.focusEditorPending=!1;const editor=this.renderRoot?.querySelector('[part="token-editor"]');editor?.focus(),editor?.select()}if(this.focusTokenPending>=0){const index=this.focusTokenPending;this.focusTokenPending=-1;const label=this.renderRoot?.querySelectorAll('[part="token-label"]')?.[index];label?.focus(),label?.scrollIntoView({block:"nearest",inline:"nearest"})}const pending=this.tokenFocusRepairPending;if(this.tokenFocusRepairPending=void 0,pending){const token=[...this.renderRoot.querySelectorAll('[part~="token"]')][pending.index],target=(pending.surface==="remove"?token?.querySelector('[part~="remove"]'):token?.querySelector('[part~="token-label"]'))??token?.querySelector('[part~="remove"]')??this.inputEl??null;applyComposedFocusRepair(pending.repair,target)&&target?.scrollIntoView({block:"nearest",inline:"nearest"})}}renderRemoveButton(token,index){return html`<button
+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,query,state}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{installFormControlLabelSupport}from"../../../internal/form-control-labels.js";installFormControlLabelSupport();import{activeElementIn}from"../../../internal/active-element.js";import{acquireResolvedAriaRelationship}from"../../../internal/aria-controls.js";import{captureComposedFocusRepair,applyComposedFocusRepair}from"../../../internal/focus-navigation.js";import{AnchoredValidityController,VALIDITY_ANCHOR}from"../../../internal/anchored-validity.js";import{syncValidityStates}from"../../../internal/custom-states.js";import{nextId}from"../../../internal/a11y.js";import{closeIcon}from"../../../internal/icons.js";import{autocorrectConverter,normalizeAutocorrect,spellcheckConverter}from"../../../internal/converters.js";import{submitOnEnter}from"../../../internal/submit-on-enter.js";import{dispatchNativeEvent,dispatchNativeInputEvent,relayNativeEvent}from"../../../internal/native-event-relay.js";import{sizes}from"../../../internal/sizes.styles.js";import{styles}from"./token-input.styles.js";import{attachInternalsSafely,createStringArrayFormDataState,getFormOwner,installCustomErrorProperty,isBarredFromValidation,readStringArrayFormDataState,setFormOwner}from"../../../internal/form-associated.js";import{installInvalidEventAlias}from"../../../internal/invalid-event-alias.js";import{LYRA_DEFAULT_fieldRequired,LYRA_DEFAULT_removeWithContext,LYRA_DEFAULT_tokenInputEditWithContext,LYRA_DEFAULT_tokenInputRequired}from"../../../internal/default-strings.generated.js";const delimiterConverter={fromAttribute:value=>value===null?",":value===""||value==="none"?null:value};function normalizeStringArray(value){if(!Array.isArray(value))return Object.freeze([]);try{const normalized=[];for(const entry of value)typeof entry=="string"&&normalized.push(entry);return Object.freeze(normalized)}catch{return Object.freeze([])}}const stringArrayConverter={fromAttribute:value=>{if(value===null)return null;try{const parsed=JSON.parse(value);return normalizeStringArray(parsed)}catch{return[]}},toAttribute:value=>value==null?null:JSON.stringify(value)};class LyraTokenInput extends LyraElement{static{this.defaultStrings={...super.defaultStrings,fieldRequired:LYRA_DEFAULT_fieldRequired,removeWithContext:LYRA_DEFAULT_removeWithContext,tokenInputEditWithContext:LYRA_DEFAULT_tokenInputEditWithContext,tokenInputRequired:LYRA_DEFAULT_tokenInputRequired}}static{this.formAssociated=!0}static{this.styles=[LyraElement.styles,sizes,styles]}static{this.properties={customError:{attribute:"custom-error",reflect:!0,noAccessor:!0},name:{reflect:!0,noAccessor:!0},required:{type:Boolean,reflect:!0,noAccessor:!0},disabled:{type:Boolean,reflect:!0,noAccessor:!0},defaultValue:{attribute:"value",reflect:!0,useDefault:!0,converter:stringArrayConverter,noAccessor:!0}}}get autocorrect(){return this.autocorrectValue}set autocorrect(next){this.autocorrectValue=normalizeAutocorrect(next),this.requestUpdate()}get editable(){return this._editable}set editable(next){const old=this._editable;this._editable=!!next,this._editable||this.discardTransientState(!1),this.requestUpdate("editable",old)}syncExternalDescription(){const target=this.isConnected?this.inputEl:void 0;if(!target){this.releaseExternalDescription();return}this.externalDescriptionLease?this.externalDescriptionLease.update(target):this.externalDescriptionLease=acquireResolvedAriaRelationship(this,target,"aria-describedby")}releaseExternalDescription(){this.externalDescriptionLease?.release(),this.externalDescriptionLease=void 0}get value(){return this._value}set value(next){const old=this._value;this.settingDefaultValue||(this._valueDirty=!0);const normalized=normalizeStringArray(next);this.captureTokenFocusRepair(normalized),this.editingIndex>=0&&normalized!==old&&(this.editingIndex=-1,this.editDraft="",this.focusEditorPending=!1),this._value=normalized,this.requestUpdate("value",old),this.internals&&this.syncValidity()}get defaultValue(){return this._defaultValue}set defaultValue(next){if(this.reflectingDefaultValue)return;const old=this._defaultValue;this._defaultValue=normalizeStringArray(next),this.reflectingDefaultValue=!0;try{next==null?this.removeAttribute("value"):this.setAttribute("value",JSON.stringify(this._defaultValue))}finally{this.reflectingDefaultValue=!1}this._valueDirty||this.restoreLiveValueFromDefault(),this.requestUpdate("defaultValue",old)}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.syncValidity(),this.requestUpdate("name",old)}get required(){return this._required}set required(next){const old=this._required;this._required=!!next,this.toggleAttribute("required",this._required),this.syncValidity(),this.requestUpdate("required",old)}get disabled(){return this._disabled}set disabled(next){const old=this._disabled,wasEffectivelyDisabled=this.effectiveDisabled;this._disabled=!!next,!wasEffectivelyDisabled&&this.effectiveDisabled&&this.retireDisabledInteraction(),this.toggleAttribute("disabled",this._disabled),this.syncValidity(),this.requestUpdate("disabled",old)}constructor(){super(),this.label="",this.hint="",this.errorText="",this.placeholder="",this.spellcheck=!0,this.autocapitalize="",this.autocorrectValue=!0,this.accessibleLabel="",this.size="m",this.pill=!1,this.allowDuplicates=!1,this._editable=!1,this.delimiter=",",this.draft="",this.touched=!1,this.editingIndex=-1,this.editDraft="",this.rovingIndex=0,this.focusEditorPending=!1,this.focusTokenPending=-1,this.editorBlurRelayed=!1,this.hasLabelSlot=!1,this.hasHintSlot=!1,this.hasErrorSlot=!1,this.hasStartSlot=!1,this.hasEndSlot=!1,this.labelId=nextId("token-input-label"),this.hintId=nextId("token-input-hint"),this.errorId=nextId("token-input-error"),this._value=Object.freeze([]),this._defaultValue=Object.freeze([]),this._valueDirty=!1,this.settingDefaultValue=!1,this.reflectingDefaultValue=!1,this._fieldsetDisabled=!1,this._name="",this._required=!1,this._disabled=!1,this.onEditInput=event=>{event.stopPropagation(),!this.liveDisabled&&(this.editDraft=event.target.value)},this.onEditFocus=event=>{if(this.liveDisabled){event.stopPropagation();return}this.editorBlurRelayed=!1,relayNativeEvent(this,event)},this.onEditKeyDown=event=>{event.isComposing||event.keyCode===229||(event.key==="Enter"?(event.preventDefault(),this.commitEdit(!0)):event.key==="Escape"&&(event.preventDefault(),event.stopPropagation(),this.cancelEdit()))},this.onEditBlur=event=>{if(this.editorBlurRelayed){event.stopPropagation();return}this.editorBlurRelayed=!0,event.stopPropagation(),queueMicrotask(()=>{!this.isConnected||!this.editable||this.liveDisabled?this.discardTransientState(!1):this.commitEdit(!1),relayNativeEvent(this,event)})},this.onInput=event=>{event.stopPropagation(),!this.liveDisabled&&(this.draft=event.target.value)},this.onKeyDown=event=>{event.isComposing||event.keyCode===229||this.liveDisabled||(event.key==="Enter"||this.delimiter!==null&&event.key===this.delimiter?this.draft.trim()?(event.preventDefault(),this.addDraft()):event.key==="Enter"&&submitOnEnter(this,event):event.key==="Tab"?this.draft.trim()&&this.addDraft():event.key==="Backspace"&&!this.draft&&this.value.length&&this.editingIndex<0&&this.removeToken(this.value.length-1))},this.onBlur=event=>{this.liveDisabled||(this.draft.trim()&&this.addDraft(),this.touched=!0),this.syncValidity(),relayNativeEvent(this,event)},this.onFocus=event=>{if(this.liveDisabled){event.stopPropagation();return}relayNativeEvent(this,event)},this.onLabelSlotChange=e=>{this.hasLabelSlot=e.target.assignedElements({flatten:!0}).length>0},this.onHintSlotChange=e=>{this.hasHintSlot=e.target.assignedElements({flatten:!0}).length>0},this.onErrorSlotChange=e=>{this.hasErrorSlot=e.target.assignedElements({flatten:!0}).length>0},this.onStartSlotChange=e=>{this.hasStartSlot=e.target.assignedElements({flatten:!0}).length>0},this.onEndSlotChange=e=>{this.hasEndSlot=e.target.assignedElements({flatten:!0}).length>0},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))}connectedCallback(){super.connectedCallback(),this.hasUpdated&&this.syncExternalDescription(),this.syncValidity()}disconnectedCallback(){this.releaseExternalDescription(),this.tokenFocusRepairPending=void 0,this.discardTransientState(!0),super.disconnectedCallback()}adoptedCallback(){super.adoptedCallback(),this.releaseExternalDescription(),this.isConnected&&this.hasUpdated&&this.syncExternalDescription()}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}get effectiveDisabled(){return this.disabled||this._fieldsetDisabled}formDisabledCallback(disabled){const wasEffectivelyDisabled=this.effectiveDisabled;this._fieldsetDisabled=disabled,!wasEffectivelyDisabled&&this.effectiveDisabled&&this.retireDisabledInteraction(),this.syncValidity(),this.requestUpdate()}[VALIDITY_ANCHOR](){return this.inputEl??this.renderRoot?.querySelector('[part="input-wrapper"]')??null}checkValidity(){return this.internals.checkValidity()}reportValidity(){return this.touched=!0,this.syncValidity(),this.internals.reportValidity()}setCustomValidity(message){this.validityController.setCustomValidity(message??""),this.syncValidity()}get liveDisabled(){return this.effectiveDisabled||this.matches(":disabled")}focus(options){this.liveDisabled||this.inputEl?.focus(options)}blur(){const active=activeElementIn(this.shadowRoot);active&&typeof active.blur=="function"&&active.blur()}click(){this.liveDisabled||this.inputEl?.focus()}select(){this.inputEl?.select()}get selectionStart(){return this.inputEl?.selectionStart??null}set selectionStart(value){this.inputEl&&(this.inputEl.selectionStart=value??0)}get selectionEnd(){return this.inputEl?.selectionEnd??null}set selectionEnd(value){this.inputEl&&(this.inputEl.selectionEnd=value??0)}get selectionDirection(){return this.inputEl?.selectionDirection??null}set selectionDirection(value){this.inputEl&&(this.inputEl.selectionDirection=value??"none")}setSelectionRange(selectionStart,selectionEnd,selectionDirection="none"){this.inputEl?.setSelectionRange(selectionStart,selectionEnd,selectionDirection??"none")}setRangeText(replacement,start,end,selectMode="preserve"){const input=this.inputEl;input&&(start===void 0||end===void 0?input.setRangeText(replacement):input.setRangeText(replacement,start,end,selectMode),this.draft=input.value)}willUpdate(changed){super.willUpdate(changed),this.hasUpdated||(this.hasLabelSlot=Array.from(this.children??[]).some(el=>el.getAttribute("slot")==="label"),this.hasHintSlot=Array.from(this.children??[]).some(el=>el.getAttribute("slot")==="hint"),this.hasErrorSlot=Array.from(this.children??[]).some(el=>el.getAttribute("slot")==="error"),this.hasStartSlot=Array.from(this.children??[]).some(el=>el.getAttribute("slot")==="start"),this.hasEndSlot=Array.from(this.children??[]).some(el=>el.getAttribute("slot")==="end"))}get barredFromValidation(){return isBarredFromValidation(this,this.internals)}syncValidity(){const barred=this.barredFromValidation,missing=!barred&&this.required&&this.value.length===0;this.validityController.setValidity(missing?{valueMissing:!0}:{},missing?this.localize("tokenInputRequired"):""),this.toggleAttribute("data-invalid",!barred&&this.touched&&!this.internals.validity.valid),syncValidityStates(this.internals,{required:this.required,hasInteracted:this.touched,barred});const data=new FormData;this.name&&this.value.forEach(token=>data.append(this.name,token)),this.internals.setFormValue(this.name?data:null,createStringArrayFormDataState(this.name,this.value))}updateValue(next){this.value=next,this.syncValidity(),dispatchNativeInputEvent(this),this.emit("lr-input",Object.freeze({value:Object.freeze([...this.value])})),dispatchNativeEvent(this,"change"),this.emit("lr-change",Object.freeze({value:Object.freeze([...this.value])}))}addDraft(){if(this.liveDisabled)return;const candidates=(this.delimiter?this.draft.split(this.delimiter):[this.draft]).map(token=>token.trim()).filter(Boolean),next=[...this.value],seen=this.allowDuplicates?null:new Set(next),added=[];for(const token of candidates)seen?.has(token)||(seen?.add(token),next.push(token),added.push(token));if(added.length===0){this.draft="";return}this.emit("lr-add",Object.freeze({value:added[added.length-1],values:Object.freeze([...added])}),{cancelable:!0}).defaultPrevented||(this.updateValue(next),this.draft="")}discardTransientState(clearDraft){this.editingIndex=-1,this.editDraft="",this.focusEditorPending=!1,this.focusTokenPending=-1,clearDraft&&(this.draft="",this.inputEl&&(this.inputEl.value=""))}retireDisabledInteraction(){this.tokenFocusRepairPending=void 0,this.discardTransientState(!0);const active=activeElementIn(this.shadowRoot);active&&typeof active.blur=="function"&&active.blur()}captureTokenFocusRepair(next){this.tokenFocusRepairPending=void 0;const tokens=[...this.renderRoot?.querySelectorAll('[part~="token"]')??[]];if(next.length>=tokens.length)return;const active=activeElementIn(this.shadowRoot),token=typeof active?.closest=="function"?active.closest('[part~="token"]'):null;if(!active||!token)return;const index=tokens.indexOf(token);if(index<0)return;const repair=captureComposedFocusRepair(this,active);if(!repair)return;const targetIndex=Math.min(index,Math.max(0,next.length-1));this.rovingIndex=targetIndex,this.tokenFocusRepairPending={index:targetIndex,surface:active.matches('[part~="remove"]')?"remove":"label",repair}}removeToken(index){if(this.liveDisabled)return;const removed=this.value[index];removed===void 0||this.emit("lr-remove",{value:removed,index},{cancelable:!0}).defaultPrevented||(this.editingIndex>=0&&(this.editingIndex=-1,this.editDraft=""),this.updateValue(this.value.filter((_token,i)=>i!==index)))}get activeTokenIndex(){return this.value.length?Math.min(Math.max(this.rovingIndex,0),this.value.length-1):-1}startEdit(index){this.liveDisabled||!this.editable||index<0||index>=this.value.length||(this.editingIndex=index,this.editDraft=this.value[index],this.rovingIndex=index,this.editorBlurRelayed=!1,this.focusEditorPending=!0)}cancelEdit(){this.editingIndex<0||(this.focusTokenPending=this.editingIndex,this.editingIndex=-1,this.editDraft="")}commitEdit(restoreFocus){if(this.liveDisabled){this.discardTransientState(!1);return}const index=this.editingIndex;if(index<0)return;const previousValue=this.value[index],next=this.editDraft.trim();if(previousValue===void 0||!next||next===previousValue||!this.allowDuplicates&&this.value.some((token,i)=>i!==index&&token===next)){restoreFocus&&(this.focusTokenPending=index),this.editingIndex=-1,this.editDraft="";return}this.emit("lr-token-edit",{value:next,previousValue,index},{cancelable:!0}).defaultPrevented||(restoreFocus&&(this.focusTokenPending=index),this.editingIndex=-1,this.editDraft="",this.updateValue(this.value.map((token,i)=>i===index?next:token)))}moveRovingFocus(index){if(!this.value.length)return;const clamped=Math.min(Math.max(index,0),this.value.length-1);this.rovingIndex=clamped,this.focusTokenPending=clamped}onTokenKeyDown(event,index){if(this.liveDisabled)return;const rtl=this.effectiveDirection==="rtl",forward=rtl?"ArrowLeft":"ArrowRight",backward=rtl?"ArrowRight":"ArrowLeft";event.key==="Enter"||event.key===" "||event.key==="F2"?(event.preventDefault(),this.startEdit(index)):event.key===forward?(event.preventDefault(),this.moveRovingFocus(index+1)):event.key===backward?(event.preventDefault(),this.moveRovingFocus(index-1)):event.key==="Home"?(event.preventDefault(),this.moveRovingFocus(0)):event.key==="End"&&(event.preventDefault(),this.moveRovingFocus(this.value.length-1))}stopInternalChange(event){event.stopPropagation()}formResetCallback(){this.restoreLiveValueFromDefault(),this.discardTransientState(!0),this.rovingIndex=0,this.touched=!1,this.syncValidity()}restoreLiveValueFromDefault(){this.settingDefaultValue=!0;try{this.value=[...this._defaultValue]}finally{this.settingDefaultValue=!1}this._valueDirty=!1}formStateRestoreCallback(state2,_mode){this.value=readStringArrayFormDataState(state2),this.discardTransientState(!0),this.rovingIndex=0,this.touched=!1,this.syncValidity()}updated(changed){if(super.updated(changed),this.syncExternalDescription(),this.focusEditorPending){this.focusEditorPending=!1;const editor=this.renderRoot?.querySelector('[part="token-editor"]');editor?.focus(),editor?.select()}if(this.focusTokenPending>=0){const index=this.focusTokenPending;this.focusTokenPending=-1;const label=this.renderRoot?.querySelectorAll('[part="token-label"]')?.[index];label?.focus(),label?.scrollIntoView({block:"nearest",inline:"nearest"})}const pending=this.tokenFocusRepairPending;if(this.tokenFocusRepairPending=void 0,pending){const token=[...this.renderRoot.querySelectorAll('[part~="token"]')][pending.index],target=(pending.surface==="remove"?token?.querySelector('[part~="remove"]'):token?.querySelector('[part~="token-label"]'))??token?.querySelector('[part~="remove"]')??this.inputEl??null;applyComposedFocusRepair(pending.repair,target)&&target?.scrollIntoView({block:"nearest",inline:"nearest"})}}renderRemoveButton(token,index){return html`<button
       part="remove"
       type="button"
       aria-label=${this.localize("removeWithContext",void 0,{label:token})}
@@ -33,7 +33,7 @@ var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3
         @keydown=${event=>this.onTokenKeyDown(event,index)}
         >${token}</span
       >${this.renderRemoveButton(token,index)}</span
-    >`}render(){const hasLabel=this.hasLabelSlot||this.label.length>0,hasAccessibleLabel=this.hasAttribute("aria-label")||!!this.accessibleLabel,hasHint=this.hasHintSlot||this.hint.length>0,hasError=this.hasErrorSlot||this.errorText.length>0,described=[hasHint?this.hintId:"",hasError?this.errorId:""].filter(Boolean).join(" ")||nothing;return html`<div part="form-control">
+    >`}render(){const hasLabel=this.hasLabelSlot||(this.label??"").length>0,hasAccessibleLabel=this.hasAttribute("aria-label")||!!this.accessibleLabel,hasHint=this.hasHintSlot||(this.hint??"").length>0,hasError=this.hasErrorSlot||(this.errorText??"").length>0,described=[hasHint?this.hintId:"",hasError?this.errorId:""].filter(Boolean).join(" ")||nothing;return html`<div part="form-control">
       <label
         part="form-control-label"
         ?hidden=${!hasLabel}

package/dist/components/forms/token-input/token-input.styles.js

@@ -1 +1 @@
-import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/form-control.styles.js";const styles=css` :host { display: block; min-inline-size: 0; max-inline-size: 100%; box-sizing: border-box; --_lr-token-input-min-input-inline-size: var(--lr-size-4rem); --_lr-token-input-padding: var(--lr-form-control-padding-block) var(--lr-space-xs); --_lr-token-input-font-size: var(--lr-font-size-md-sm); --_lr-token-input-token-padding: var(--lr-space-2xs) var(--lr-space-xs); --_lr-token-input-gap: var(--lr-space-xs); --_lr-token-input-token-gap: var(--lr-space-2xs); --_lr-token-input-radius: var(--lr-radius); --_lr-token-input-control-min-height: var(--lr-form-control-height); } :host([pill]) { --_lr-token-input-radius: var(--lr-radius-pill); } :host([size="2xs"]) { --_lr-token-input-padding: var(--lr-form-control-padding-block) var(--lr-size-0-0625rem); --_lr-token-input-font-size: var(--lr-font-size-2xs); --_lr-token-input-token-padding: 0 var(--lr-space-2xs); } :host([size="xs"]) { --_lr-token-input-padding: var(--lr-form-control-padding-block) var(--lr-size-0-125rem); --_lr-token-input-font-size: var(--lr-font-size-xs); --_lr-token-input-token-padding: var(--lr-size-1px) var(--lr-space-2xs); } :host([size="s"]), :host([size="small"]) { --_lr-token-input-padding: var(--lr-form-control-padding-block) var(--lr-space-xs); --_lr-token-input-font-size: var(--lr-font-size-sm); --_lr-token-input-token-padding: var(--lr-space-2xs) var(--lr-space-xs); } :host([size="l"]), :host([size="large"]) { --_lr-token-input-padding: var(--lr-form-control-padding-block) var(--lr-space-m); --_lr-token-input-font-size: var(--lr-font-size-lg); --_lr-token-input-token-padding: var(--lr-space-xs) var(--lr-space-s); } :host([size="xl"]) { --_lr-token-input-padding: var(--lr-form-control-padding-block) var(--lr-space-l); --_lr-token-input-font-size: var(--lr-font-size-xl); --_lr-token-input-token-padding: var(--lr-space-s) var(--lr-space-m); } [part="form-control"] { display: grid; min-inline-size: 0; max-inline-size: 100%; gap: var(--lr-token-input-gap, var(--_lr-token-input-gap)); } [part="form-control-label"] { color: var(--lr-color-text); font-weight: var(--lr-font-weight-semibold); } :host([required]) [part="form-control-label"] > span[aria-hidden="true"] { display: none; } ${formControlRequiredMarker} [part='input-wrapper'] { display: flex; flex-wrap: wrap; min-inline-size: 0; max-inline-size: 100%; overflow-x: hidden; overflow-y: auto; align-items: center; gap: var(--lr-token-input-gap, var(--_lr-token-input-gap)); min-block-size: var( --lr-token-input-control-height, var( --lr-token-input-control-min-height, var(--_lr-token-input-control-min-height) ) ); block-size: var(--lr-token-input-control-height, auto); padding: var(--lr-token-input-padding, var(--_lr-token-input-padding)); font-size: var( --lr-token-input-font-size, var(--_lr-token-input-font-size) ); border: var(--lr-border-width-thin) solid var(--lr-color-border); border-radius: var(--lr-token-input-radius, var(--_lr-token-input-radius)); background: var(--lr-color-surface); } [part="input-wrapper"]:focus-within { border-color: var( --lr-token-input-focus-border-color, var(--lr-color-brand) ); outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); outline-offset: var(--lr-focus-ring-offset); } [part="input"] { flex: 1 1 var(--lr-token-input-input-inline-size, var(--lr-size-8rem)); min-inline-size: var( --lr-token-input-min-input-inline-size, var(--_lr-token-input-min-input-inline-size) ); padding-block: 0; border: 0; outline: 0; background: transparent; color: var(--lr-color-text); font: inherit; } [part="input"]::placeholder { color: var(--lr-color-text-quiet); } [part="start"], [part="end"] { flex: 0 0 auto; display: inline-flex; align-items: center; color: var(--lr-color-text-quiet); } [part="start"][hidden], [part="end"][hidden] { display: none; } [part="token"] { display: inline-flex; min-inline-size: 0; max-inline-size: 100%; overflow: hidden; align-items: center; gap: var(--lr-token-input-token-gap, var(--_lr-token-input-token-gap)); padding: var( --lr-token-input-token-padding, var(--_lr-token-input-token-padding) ); border-radius: var(--lr-token-input-radius, var(--_lr-token-input-radius)); background: var(--lr-token-input-token-bg, var(--lr-color-brand-quiet)); color: var(--lr-color-text); } [part="token"] > span:first-child { min-inline-size: 0; } [part="token"] > span:first-child, [part="token-label"] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } [part="remove"] { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; min-inline-size: var(--lr-icon-button-size); min-block-size: var(--lr-icon-button-size); border: 0; padding: 0; background: transparent; color: inherit; cursor: pointer; } [part="remove"]:hover { background: var( --lr-token-input-remove-hover-bg, var(--lr-token-input-action-hover-bg, var(--lr-color-brand-quiet)) ); } [part="remove"]:active { background: var( --lr-token-input-remove-pressed-bg, color-mix( in oklab, var( --lr-token-input-remove-hover-bg, var(--lr-token-input-action-hover-bg, var(--lr-color-brand-quiet)) ), var(--lr-color-mix-partner) var(--lr-color-mix-active) ) ); } [part="remove"]:focus-visible { outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); outline-offset: var(--lr-focus-ring-offset); } [part="token-label"] { min-inline-size: var(--lr-icon-button-size); min-block-size: var(--lr-icon-button-size); border-radius: var(--lr-token-input-radius, var(--_lr-token-input-radius)); cursor: pointer; } :host(:where(:not(:disabled))) [part="token-label"]:hover { background: var( --lr-token-input-edit-hover-bg, var(--lr-token-input-action-hover-bg, var(--lr-color-brand-quiet)) ); } :host(:where(:not(:disabled))) [part="token-label"]:active { background: var( --lr-token-input-edit-pressed-bg, color-mix( in oklab, var( --lr-token-input-edit-hover-bg, var(--lr-token-input-action-hover-bg, var(--lr-color-brand-quiet)) ), var(--lr-color-mix-partner) var(--lr-color-mix-active) ) ); } [part="token-label"]:focus-visible { outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); outline-offset: var(--lr-focus-ring-offset); } :host(:disabled) [part="token-label"] { cursor: default; } [part="token-editor"] { inline-size: var(--lr-token-input-editor-inline-size, var(--lr-size-6rem)); max-inline-size: 100%; border: 0; outline: 0; padding: 0; background: transparent; color: inherit; font: inherit; } [part="token-editor"]::placeholder { color: var(--lr-color-text-quiet); } [part="hint"], [part="error"] { color: var(--lr-color-text-quiet); font-size: var(--lr-font-size-sm); } [part="error"] { color: var(--lr-color-danger); } :host([data-invalid]) [part="input-wrapper"] { border-color: var( --lr-token-input-invalid-border-color, var(--lr-color-danger) ); } :host(:disabled) { opacity: var(--lr-opacity-disabled); } [part="form-control-label"], [part="hint"], [part="error"] { min-inline-size: 0; max-inline-size: 100%; overflow-wrap: anywhere; } `;export{styles};
+import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/form-control.styles.js";const styles=css` :host { display: block; min-inline-size: 0; max-inline-size: 100%; box-sizing: border-box; --_lr-token-input-min-input-inline-size: var(--lr-size-4rem); --_lr-token-input-padding: var(--lr-form-control-padding-block) var(--lr-space-xs); --_lr-token-input-font-size: var(--lr-font-size-md-sm); --_lr-token-input-token-padding: var(--lr-space-2xs) var(--lr-space-xs); --_lr-token-input-gap: var(--lr-space-xs); --_lr-token-input-token-gap: var(--lr-space-2xs); --_lr-token-input-radius: var(--lr-radius); --_lr-token-input-control-min-height: var(--lr-form-control-height); } :host([pill]) { --_lr-token-input-radius: var(--lr-radius-pill); } :host([size="2xs"]) { --_lr-token-input-padding: var(--lr-form-control-padding-block) var(--lr-size-0-0625rem); --_lr-token-input-font-size: var(--lr-font-size-2xs); --_lr-token-input-token-padding: 0 var(--lr-space-2xs); } :host([size="xs"]) { --_lr-token-input-padding: var(--lr-form-control-padding-block) var(--lr-size-0-125rem); --_lr-token-input-font-size: var(--lr-font-size-xs); --_lr-token-input-token-padding: var(--lr-size-1px) var(--lr-space-2xs); } :host([size="s"]), :host([size="small"]) { --_lr-token-input-padding: var(--lr-form-control-padding-block) var(--lr-space-xs); --_lr-token-input-font-size: var(--lr-font-size-sm); --_lr-token-input-token-padding: var(--lr-space-2xs) var(--lr-space-xs); } :host([size="l"]), :host([size="large"]) { --_lr-token-input-padding: var(--lr-form-control-padding-block) var(--lr-space-m); --_lr-token-input-font-size: var(--lr-font-size-lg); --_lr-token-input-token-padding: var(--lr-space-xs) var(--lr-space-s); } :host([size="xl"]) { --_lr-token-input-padding: var(--lr-form-control-padding-block) var(--lr-space-l); --_lr-token-input-font-size: var(--lr-font-size-xl); --_lr-token-input-token-padding: var(--lr-space-s) var(--lr-space-m); } [part="form-control"] { display: grid; min-inline-size: 0; max-inline-size: 100%; gap: var(--lr-token-input-gap, var(--_lr-token-input-gap)); } [part="form-control-label"] { color: var(--lr-color-text); font-weight: var(--lr-font-weight-semibold); } :host([required]) [part="form-control-label"] > span[aria-hidden="true"] { display: none; } ${formControlRequiredMarker} [part='input-wrapper'] { display: flex; flex-wrap: wrap; min-inline-size: 0; max-inline-size: 100%; overflow-x: hidden; overflow-y: auto; align-items: center; gap: var(--lr-token-input-gap, var(--_lr-token-input-gap)); min-block-size: var( --lr-token-input-control-height, var( --lr-token-input-control-min-height, var(--_lr-token-input-control-min-height) ) ); block-size: var(--lr-token-input-control-height, auto); padding: var(--lr-token-input-padding, var(--_lr-token-input-padding)); font-size: var( --lr-token-input-font-size, var(--_lr-token-input-font-size) ); border: var(--lr-border-width-thin) solid var(--lr-color-border); border-radius: var(--lr-token-input-radius, var(--_lr-token-input-radius)); background: var(--lr-color-surface); } [part="input-wrapper"]:focus-within { border-color: var( --lr-token-input-focus-border-color, var(--lr-color-brand) ); outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); outline-offset: var(--lr-focus-ring-offset); } [part="input"] { flex: 1 1 var(--lr-token-input-input-inline-size, var(--lr-size-8rem)); min-inline-size: var( --lr-token-input-min-input-inline-size, var(--_lr-token-input-min-input-inline-size) ); padding-block: 0; border: 0; outline: 0; background: transparent; color: var(--lr-color-text); font: inherit; } [part="input"]::placeholder { color: var(--lr-color-text-quiet); } [part="start"], [part="end"] { flex: 0 0 auto; display: inline-flex; align-items: center; color: var(--lr-color-text-quiet); } [part="start"][hidden], [part="end"][hidden] { display: none; } [part="token"] { display: inline-flex; min-inline-size: 0; max-inline-size: 100%; overflow: hidden; align-items: center; gap: var(--lr-token-input-token-gap, var(--_lr-token-input-token-gap)); padding: var( --lr-token-input-token-padding, var(--_lr-token-input-token-padding) ); border-radius: var(--lr-token-input-radius, var(--_lr-token-input-radius)); background: var(--lr-token-input-token-bg, var(--lr-color-brand-quiet)); color: var(--lr-color-text); } [part="token"] > span:first-child { min-inline-size: 0; } [part="token"] > span:first-child, [part="token-label"] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } [part="remove"] { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; min-inline-size: var(--lr-icon-button-size); min-block-size: var(--lr-icon-button-size); border: 0; padding: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; } [part="remove"]:hover { background: var( --lr-token-input-remove-hover-bg, var(--lr-token-input-action-hover-bg, var(--lr-color-brand-quiet)) ); } [part="remove"]:active { background: var( --lr-token-input-remove-pressed-bg, color-mix( in oklab, var( --lr-token-input-remove-hover-bg, var(--lr-token-input-action-hover-bg, var(--lr-color-brand-quiet)) ), var(--lr-color-mix-partner) var(--lr-color-mix-active) ) ); } [part="remove"]:focus-visible { outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); outline-offset: var(--lr-focus-ring-offset); } [part="token-label"] { align-content: center; min-inline-size: var(--lr-icon-button-size); min-block-size: var(--lr-icon-button-size); border-radius: var(--lr-token-input-radius, var(--_lr-token-input-radius)); cursor: pointer; } :host(:where(:not(:disabled))) [part="token-label"]:hover { background: var( --lr-token-input-edit-hover-bg, var(--lr-token-input-action-hover-bg, var(--lr-color-brand-quiet)) ); } :host(:where(:not(:disabled))) [part="token-label"]:active { background: var( --lr-token-input-edit-pressed-bg, color-mix( in oklab, var( --lr-token-input-edit-hover-bg, var(--lr-token-input-action-hover-bg, var(--lr-color-brand-quiet)) ), var(--lr-color-mix-partner) var(--lr-color-mix-active) ) ); } [part="token-label"]:focus-visible { outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); outline-offset: var(--lr-focus-ring-offset); } :host(:disabled) [part="token-label"] { cursor: default; } [part="token-editor"] { inline-size: var(--lr-token-input-editor-inline-size, var(--lr-size-6rem)); max-inline-size: 100%; border: 0; outline: 0; padding: 0; background: transparent; color: inherit; font: inherit; } [part="token-editor"]::placeholder { color: var(--lr-color-text-quiet); } [part="hint"], [part="error"] { color: var(--lr-color-text-quiet); font-size: var(--lr-font-size-sm); } [part="error"] { color: var(--lr-color-danger); } :host([data-invalid]) [part="input-wrapper"] { border-color: var( --lr-token-input-invalid-border-color, var(--lr-color-danger) ); } :host(:disabled) { opacity: var(--lr-opacity-disabled); } [part="form-control-label"], [part="hint"], [part="error"] { min-inline-size: 0; max-inline-size: 100%; overflow-wrap: anywhere; } `;export{styles};

package/dist/components/layout/app-rail/app-rail.class.d.ts

@@ -82,14 +82,16 @@ export declare function computeAppRailMode(iconOnlyMatches:boolean,mobileMatches
 * @csspart nav - The wrapper around the default (nav items) slot.
 * @csspart footer - The wrapper around the `footer` slot.
 * @csspart toggle - The mobile hamburger/close toggle button. Hidden via
-*   CSS outside `'mobile'` mode, or entirely via `hideToggle`.
+*   CSS outside `'mobile'` mode, or entirely via `hideToggle`; it inherits the rail's typography
+*   and its glyph scales at 1em.
 * @csspart backdrop - The mobile overlay's scrim. Only rendered while open.
 * @csspart panel - The mobile overlay's floating panel — see the class doc
 *   for why it's the same element as `base`, never both at once.
 * @csspart resizer - The `resizable` opt-in's drag handle -- its interactive hit target, sized to
 *   the shared minimum tappable size (`--lr-icon-button-size`), independent of the slimmer
-*   visible line rendered by its `resizer-track` child. Only rendered while `resizable` and `mode`
-*   is `'full'`.
+*   visible line rendered by its `resizer-track` child. Its numeric ARIA range remains in CSS
+*   pixels while `aria-valuetext` reports the current width through the effective locale. Only
+*   rendered while `resizable` and `mode` is `'full'`.
 * @csspart resizer-track - The resizer's slim visible drag line, centered inside `[part="resizer"]`'s
 *   larger hit target (mirrors `<lr-swatch-picker>`'s `[part="swatch"]`/`[part="swatch-fill"]`
 *   split). Colors on hover/focus the same way the whole handle previously did.
@@ -181,7 +183,9 @@ hideToggle:boolean;
 *  handle (pointer-drag and `ArrowLeft`/`ArrowRight` keyboard stepping, RTL-aware) clamped to
 *  `[minRailWidthPx, maxRailWidthPx]`. Set `storageKey` to persist the fields selected by
 *  `persist`; otherwise listen for `lr-rail-resize` and persist its committed `widthPx` yourself.
-*  Call `preventDefault()` on `lr-rail-resize-request` to keep the current width. `false` (the
+*  Call `preventDefault()` on `lr-rail-resize-request` to keep the current width. A request
+*  listener that disables resizing, leaves full mode, or disconnects the rail also cancels the
+*  pending proposal without overwriting listener state. `false` (the
 *  default) renders no resizer and leaves the fixed-width `--lr-app-rail-width` CSS token exactly
 *  as before this property existed. */
 resizable:boolean;
@@ -248,7 +252,7 @@ private get safeMaxRailWidthPx();
 *  `[safeMinRailWidthPx, safeMaxRailWidthPx]` here -- a NaN/negative/out-of-bounds direct
 *  assignment would otherwise reach `updated()`'s inline-size write and this resizer's own
 *  `aria-valuenow` exactly as given. */
-private get effectiveRailWidthPx();private get storageFullKey();private get persistFields();
+private get effectiveRailWidthPx();private resizeValueText;private get storageFullKey();private get persistFields();
 /** Restore the selected persisted fields. Runs once, before the first render. Effective `mode`
 *  remains breakpoint-derived; only the optional non-mobile `preferredMode` input is restorable. */
 private loadPersisted;private persistState;protected willUpdate(changed:PropertyValues):void;protected updated(changed:PropertyValues):void;connectedCallback():void;disconnectedCallback():void;adoptedCallback():void;private activateMobileOverlay;private deactivateMobileOverlay;private setupMediaQueries;private teardownMediaQueries;private onIconOnlyChange;private onMobileChange;private applyComputedMode;private setEffectiveMode;private setOpen;private onToggleClick;private onBackdropClick;private onNavItemClick;private onHeaderSlotChange;private onFooterSlotChange;private onNavSlotChange;private onResizerPointerDown;private onResizerPointerMove;private onResizerPointerUp;private endResizerGesture;

package/dist/components/layout/app-rail/app-rail.class.js

@@ -1,4 +1,4 @@
-var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html,nothing,svg}from"lit";import{property,query,state}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{activateOverlay,composedContains,deepActiveElement}from"../../../internal/overlay-manager.js";import{nextId}from"../../../internal/a11y.js";import{closeIcon}from"../../../internal/icons.js";import{tag}from"../../../internal/prefix.js";import{isRtl}from"../../../internal/rtl.js";import{finiteRange}from"../../../internal/numbers.js";import{readPersistedState,writePersistedState}from"../../../internal/persisted-state.js";import{styles}from"./app-rail.styles.js";import"./app-rail-item.class.js";import{LYRA_DEFAULT_closeNavigation,LYRA_DEFAULT_navigation,LYRA_DEFAULT_openNavigation,LYRA_DEFAULT_resizeNavigation}from"../../../internal/default-strings.generated.js";const APP_RAIL_PERSIST_FIELDS=new Set(["open","width","preferred-mode"]);function menuIcon(){return svg`
+var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html,nothing,svg}from"lit";import{property,query,state}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{activateOverlay,composedContains,deepActiveElement}from"../../../internal/overlay-manager.js";import{nextId}from"../../../internal/a11y.js";import{closeIcon}from"../../../internal/icons.js";import{tag}from"../../../internal/prefix.js";import{isRtl}from"../../../internal/rtl.js";import{finiteRange}from"../../../internal/numbers.js";import{getNumberFormat}from"../../../internal/intl-cache.js";import{readPersistedState,writePersistedState}from"../../../internal/persisted-state.js";import{styles}from"./app-rail.styles.js";import"./app-rail-item.class.js";import{LYRA_DEFAULT_closeNavigation,LYRA_DEFAULT_navigation,LYRA_DEFAULT_openNavigation,LYRA_DEFAULT_resizeNavigation,LYRA_DEFAULT_resizeValuePixels}from"../../../internal/default-strings.generated.js";const APP_RAIL_PERSIST_FIELDS=new Set(["open","width","preferred-mode"]);function menuIcon(){return svg`
     <svg
       width="1em"
       height="1em"
@@ -15,7 +15,7 @@ var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3
       <line x1="4" y1="12" x2="20" y2="12"></line>
       <line x1="4" y1="17" x2="20" y2="17"></line>
     </svg>
-  `}function computeAppRailMode(iconOnlyMatches,mobileMatches,preferredMode){return mobileMatches?"mobile":preferredMode||(iconOnlyMatches?"icon-only":"full")}class LyraAppRail extends LyraElement{constructor(){super(...arguments),this.iconOnlyBreakpoint="960px",this.mobileBreakpoint="600px",this.open=!1,this.accessibleLabel=null,this.hideToggle=!1,this.resizable=!1,this.persist="open width",this.minRailWidthPx=190,this.maxRailWidthPx=440,this._dragging=!1,this.hasHeaderSlot=!1,this.hasFooterSlot=!1,this.persistReady=!1,this._mode="full",this.forced=!1,this.iconOnlyMatches=!1,this.mobileMatches=!1,this.overlayActive=!1,this.justOpened=!1,this.recoverInlineFocusAfterResponsiveClose=!1,this.navId=nextId("app-rail-nav"),this.resizeStartX=0,this.resizeStartWidth=0,this.resizeGestureChanged=!1,this.managedItems=new Set,this.onIconOnlyChange=e=>{this.iconOnlyMatches=e.matches,this.forced||this.applyComputedMode()},this.onMobileChange=e=>{this.mobileMatches=e.matches,this.forced||this.applyComputedMode()},this.onToggleClick=e=>{this.open||(this.explicitTrigger=e.currentTarget),this.setOpen(!this.open)},this.onBackdropClick=()=>{this.overlayHandle?.dismissBackdrop()},this.onNavItemClick=()=>{this.overlayActive&&this.setOpen(!1)},this.onHeaderSlotChange=e=>{this.hasHeaderSlot=e.target.assignedElements({flatten:!0}).length>0},this.onFooterSlotChange=e=>{this.hasFooterSlot=e.target.assignedElements({flatten:!0}).length>0},this.onNavSlotChange=()=>{this.syncSlottedItems()},this.onResizerPointerDown=e=>{if(!e.isPrimary||e.button!==0||!this.resizable||this._mode!=="full"||this.resizePointerId!==void 0)return;const resizer=e.currentTarget,ownerWindow=resizer.ownerDocument.defaultView;ownerWindow&&(this.resizePointerId=e.pointerId,this.resizeOwnerWindow=ownerWindow,this.resizeStartX=e.clientX,this.resizeStartWidth=this.effectiveRailWidthPx,this.resizeGestureChanged=!1,resizer.setPointerCapture(e.pointerId),ownerWindow.addEventListener("pointermove",this.onResizerPointerMove),ownerWindow.addEventListener("pointerup",this.onResizerPointerUp),ownerWindow.addEventListener("pointercancel",this.onResizerPointerUp),ownerWindow.addEventListener("lostpointercapture",this.onResizerPointerUp),this.setDragging(!0))},this.onResizerPointerMove=e=>{if(e.pointerId!==this.resizePointerId)return;if(!this.resizable||this._mode!=="full"){this.endResizerGesture();return}let delta=e.clientX-this.resizeStartX;isRtl(this)&&(delta=-delta);const next=Math.min(this.safeMaxRailWidthPx,Math.max(this.safeMinRailWidthPx,this.resizeStartWidth+delta));this.requestRailResize(next,!1)},this.onResizerPointerUp=e=>{e.pointerId===this.resizePointerId&&this.endResizerGesture(e.type==="pointerup")},this.onResizerKeyDown=e=>{const rtl=isRtl(this),forwardKey=rtl?"ArrowLeft":"ArrowRight",backwardKey=rtl?"ArrowRight":"ArrowLeft",step=8;if(e.key===forwardKey){const next=Math.min(this.safeMaxRailWidthPx,this.effectiveRailWidthPx+step);next!==this.effectiveRailWidthPx&&(e.preventDefault(),this.requestRailResize(next))}else if(e.key===backwardKey){const next=Math.max(this.safeMinRailWidthPx,this.effectiveRailWidthPx-step);next!==this.effectiveRailWidthPx&&(e.preventDefault(),this.requestRailResize(next))}}}static{this.defaultStrings={...super.defaultStrings,closeNavigation:LYRA_DEFAULT_closeNavigation,navigation:LYRA_DEFAULT_navigation,openNavigation:LYRA_DEFAULT_openNavigation,resizeNavigation:LYRA_DEFAULT_resizeNavigation}}static{this.knownUnobservedAttributes=["mode","dragging"]}static{this.styles=[LyraElement.styles,styles]}get forceMode(){return this._forceMode}set forceMode(next){if(next!=null&&next!=="auto"&&next!=="full"&&next!=="icon-only")return;const old=this._forceMode;if(this._forceMode=next??void 0,this.requestUpdate("forceMode",old),next==null||next==="auto"){if(!this.forced)return;this.forced=!1,this.applyComputedMode();return}this.forced=!0,this.setEffectiveMode(next)}get dragging(){return this._dragging}setDragging(next){this._dragging=next,this.toggleAttribute("dragging",next)}syncSlottedItems(){const slot=this.shadowRoot?.querySelector('[part="nav"] > slot'),itemTag=tag("app-rail-item"),railTag=tag("app-rail"),next=new Set((slot?.assignedElements({flatten:!0})??[]).filter(item=>item.localName===itemTag));for(const item of this.managedItems){if(next.has(item))continue;const newOwner=item.closest(railTag);newOwner&&newOwner!==this&&item.parentElement===newOwner&&!item.hasAttribute("slot")?item.toggleAttribute("icon-only",newOwner.mode==="icon-only"):item.removeAttribute("icon-only")}for(const item of next)item.toggleAttribute("icon-only",this._mode==="icon-only");this.managedItems=next}get mode(){return this._mode}get safeMinRailWidthPx(){return finiteRange(this.minRailWidthPx,190,0)}get safeMaxRailWidthPx(){return Math.max(this.safeMinRailWidthPx,finiteRange(this.maxRailWidthPx,440,0))}get effectiveRailWidthPx(){return this.railWidthPx!=null?finiteRange(this.railWidthPx,this.safeMinRailWidthPx,this.safeMinRailWidthPx,this.safeMaxRailWidthPx):this.baseEl?.getBoundingClientRect().width??240}get storageFullKey(){return this.storageKey?`lr-app-rail:${this.storageKey}`:void 0}get persistFields(){const persist=typeof this.persist=="string"?this.persist:"";return new Set(persist.split(/\s+/).filter(field=>APP_RAIL_PERSIST_FIELDS.has(field)))}loadPersisted(){const parsed=readPersistedState(this.storageFullKey,v=>typeof v=="object"&&v!==null);if(!parsed)return!1;const fields=this.persistFields;return fields.has("open")&&typeof parsed.open=="boolean"&&(this.open=parsed.open),fields.has("width")&&typeof parsed.railWidthPx=="number"&&Number.isFinite(parsed.railWidthPx)&&(this.railWidthPx=parsed.railWidthPx),fields.has("preferred-mode")&&(parsed.preferredMode==="full"||parsed.preferredMode==="icon-only")?(this.preferredMode=parsed.preferredMode,!0):!1}persistState(){const fields=this.persistFields;if(fields.size===0)return;const state2={};fields.has("open")&&(state2.open=this.open),fields.has("width")&&(state2.railWidthPx=this.railWidthPx),fields.has("preferred-mode")&&(state2.preferredMode=this.preferredMode??null),writePersistedState(this.storageFullKey,state2)}willUpdate(changed){if(super.willUpdate(changed),(changed.has("resizable")||changed.has("mode"))&&(!this.resizable||this._mode!=="full")&&this.endResizerGesture(),this.hasUpdated||(this.hasHeaderSlot=Array.from(this.children).some(el=>el.getAttribute("slot")==="header"),this.hasFooterSlot=Array.from(this.children).some(el=>el.getAttribute("slot")==="footer"),this.loadPersisted()&&!this.forced&&(this._mode=computeAppRailMode(this.iconOnlyMatches,this.mobileMatches,this.preferredMode))),this.hasUpdated&&(changed.has("iconOnlyBreakpoint")||changed.has("mobileBreakpoint"))&&(this.teardownMediaQueries(),this.setupMediaQueries()),this.hasUpdated&&changed.has("preferredMode")&&!this.forced&&this.applyComputedMode(),changed.has("open")||changed.has("mode")){const next=this._mode==="mobile"&&this.open;next!==this.overlayActive&&(this.overlayActive=next,next?(this.justOpened=!0,this.activateMobileOverlay()):this.deactivateMobileOverlay(this._mode==="mobile"))}}updated(changed){if(super.updated(changed),this._lastReflectedMode!==this._mode&&(this._lastReflectedMode=this._mode,this.setAttribute("mode",this._mode)),this.syncSlottedItems(),this.recoverInlineFocusAfterResponsiveClose){this.recoverInlineFocusAfterResponsiveClose=!1;const active=deepActiveElement(this.ownerDocument);this.baseEl&&!composedContains(this.baseEl,active)&&this.baseEl.focus()}this.justOpened&&(this.justOpened=!1,this.overlayHandle?.focusInitial()),this.persistReady&&(changed.has("open")||changed.has("railWidthPx")&&!this.dragging||changed.has("preferredMode")||changed.has("persist"))&&this.persistState(),this.persistReady=!0,(changed.has("railWidthPx")||changed.has("resizable")||changed.has("mode")||!this.hasUpdated)&&this.baseEl&&(this.resizable&&this.railWidthPx!=null&&this._mode==="full"?this.baseEl.style.setProperty("inline-size",`${this.effectiveRailWidthPx}px`):this.baseEl.style.removeProperty("inline-size"))}connectedCallback(){super.connectedCallback(),this.setupMediaQueries(),this.hasUpdated&&this._mode==="mobile"&&this.open&&(this.overlayHandle?.isActive()?this.overlayHandle.resume():this.activateMobileOverlay(),queueMicrotask(()=>this.overlayHandle?.focusInitial())),this.hasUpdated&&queueMicrotask(()=>{this.isConnected&&this.syncSlottedItems()})}disconnectedCallback(){super.disconnectedCallback(),this.teardownMediaQueries(),this.overlayHandle?.suspend(),this.endResizerGesture()}adoptedCallback(){super.adoptedCallback(),this.teardownMediaQueries(),this.endResizerGesture()}activateMobileOverlay(){this.overlayHandle=activateOverlay({host:this,panel:()=>this.shadowRoot?.querySelector('[part="panel"]')??null,onEscape:()=>this.setOpen(!1),onBackdrop:()=>this.setOpen(!1),restoreFocusTo:this.explicitTrigger,lockScroll:!0,suspendWhenUnrendered:!0}),this.explicitTrigger=void 0}deactivateMobileOverlay(restoreFocus=!0){this.overlayHandle?.deactivate({restoreFocus}),this.overlayHandle=void 0}setupMediaQueries(){if(!this.isConnected)return;const view=this.ownerDocument.defaultView;if(!view?.matchMedia)return;const iconOnlyQuery=view.matchMedia(`(max-width: ${this.iconOnlyBreakpoint})`),mobileQuery=view.matchMedia(`(max-width: ${this.mobileBreakpoint})`),iconOnlyListener=event=>{this.mqIconOnly!==iconOnlyQuery||!this.isConnected||this.ownerDocument.defaultView!==view||this.onIconOnlyChange(event)},mobileListener=event=>{this.mqMobile!==mobileQuery||!this.isConnected||this.ownerDocument.defaultView!==view||this.onMobileChange(event)};this.mqIconOnly=iconOnlyQuery,this.mqMobile=mobileQuery,this.mqIconOnlyListener=iconOnlyListener,this.mqMobileListener=mobileListener,iconOnlyQuery.addEventListener("change",iconOnlyListener),mobileQuery.addEventListener("change",mobileListener),this.iconOnlyMatches=iconOnlyQuery.matches,this.mobileMatches=mobileQuery.matches,this.forced||this.applyComputedMode()}teardownMediaQueries(){this.mqIconOnly&&this.mqIconOnlyListener&&this.mqIconOnly.removeEventListener("change",this.mqIconOnlyListener),this.mqMobile&&this.mqMobileListener&&this.mqMobile.removeEventListener("change",this.mqMobileListener),this.mqIconOnly=void 0,this.mqMobile=void 0,this.mqIconOnlyListener=void 0,this.mqMobileListener=void 0}applyComputedMode(){this.setEffectiveMode(computeAppRailMode(this.iconOnlyMatches,this.mobileMatches,this.preferredMode))}setEffectiveMode(next){if(this._mode===next)return;const old=this._mode;old==="mobile"&&next!=="mobile"&&this.open&&(this.recoverInlineFocusAfterResponsiveClose=!0),this._mode=next,this.requestUpdate("mode",old),this.emit("lr-mode-change",{mode:next}),next!=="mobile"&&this.open&&this.setOpen(!1,{force:!0})}setOpen(next,options){if(this.open===next)return;if(options?.force){this.open=next,this.emit("lr-toggle",{open:next});return}const mode=this._mode,open=this.open;this.emit("lr-toggle",{open:next},{cancelable:!0}).defaultPrevented||this._mode!==mode||this.open!==open||(this.open=next)}endResizerGesture(commit=!1){const ownerWindow=this.resizeOwnerWindow,changed=this.resizeGestureChanged,widthPx=this.effectiveRailWidthPx;this.resizePointerId=void 0,this.resizeOwnerWindow=void 0,this.resizeGestureChanged=!1,this.setDragging(!1),ownerWindow?.removeEventListener("pointermove",this.onResizerPointerMove),ownerWindow?.removeEventListener("pointerup",this.onResizerPointerUp),ownerWindow?.removeEventListener("pointercancel",this.onResizerPointerUp),ownerWindow?.removeEventListener("lostpointercapture",this.onResizerPointerUp),commit&&changed&&(this.emit("lr-rail-resize",{widthPx}),this.persistReady&&this.persistState())}requestRailResize(next,commit=!0){return next===this.effectiveRailWidthPx||this.emit("lr-rail-resize-request",{widthPx:next},{cancelable:!0}).defaultPrevented?!1:(this.railWidthPx=next,commit?this.emit("lr-rail-resize",{widthPx:next}):this.resizeGestureChanged=!0,!0)}render(){const mobile=this._mode==="mobile";return html`
+  `}function computeAppRailMode(iconOnlyMatches,mobileMatches,preferredMode){return mobileMatches?"mobile":preferredMode||(iconOnlyMatches?"icon-only":"full")}class LyraAppRail extends LyraElement{constructor(){super(...arguments),this.iconOnlyBreakpoint="960px",this.mobileBreakpoint="600px",this.open=!1,this.accessibleLabel=null,this.hideToggle=!1,this.resizable=!1,this.persist="open width",this.minRailWidthPx=190,this.maxRailWidthPx=440,this._dragging=!1,this.hasHeaderSlot=!1,this.hasFooterSlot=!1,this.persistReady=!1,this._mode="full",this.forced=!1,this.iconOnlyMatches=!1,this.mobileMatches=!1,this.overlayActive=!1,this.justOpened=!1,this.recoverInlineFocusAfterResponsiveClose=!1,this.navId=nextId("app-rail-nav"),this.resizeStartX=0,this.resizeStartWidth=0,this.resizeGestureChanged=!1,this.managedItems=new Set,this.onIconOnlyChange=e=>{this.iconOnlyMatches=e.matches,this.forced||this.applyComputedMode()},this.onMobileChange=e=>{this.mobileMatches=e.matches,this.forced||this.applyComputedMode()},this.onToggleClick=e=>{this.open||(this.explicitTrigger=e.currentTarget),this.setOpen(!this.open)},this.onBackdropClick=()=>{this.overlayHandle?.dismissBackdrop()},this.onNavItemClick=()=>{this.overlayActive&&this.setOpen(!1)},this.onHeaderSlotChange=e=>{this.hasHeaderSlot=e.target.assignedElements({flatten:!0}).length>0},this.onFooterSlotChange=e=>{this.hasFooterSlot=e.target.assignedElements({flatten:!0}).length>0},this.onNavSlotChange=()=>{this.syncSlottedItems()},this.onResizerPointerDown=e=>{if(!e.isPrimary||e.button!==0||!this.resizable||this._mode!=="full"||this.resizePointerId!==void 0)return;const resizer=e.currentTarget,ownerWindow=resizer.ownerDocument.defaultView;ownerWindow&&(this.resizePointerId=e.pointerId,this.resizeOwnerWindow=ownerWindow,this.resizeStartX=e.clientX,this.resizeStartWidth=this.effectiveRailWidthPx,this.resizeGestureChanged=!1,resizer.setPointerCapture(e.pointerId),ownerWindow.addEventListener("pointermove",this.onResizerPointerMove),ownerWindow.addEventListener("pointerup",this.onResizerPointerUp),ownerWindow.addEventListener("pointercancel",this.onResizerPointerUp),ownerWindow.addEventListener("lostpointercapture",this.onResizerPointerUp),this.setDragging(!0))},this.onResizerPointerMove=e=>{if(e.pointerId!==this.resizePointerId)return;if(!this.resizable||this._mode!=="full"){this.endResizerGesture();return}let delta=e.clientX-this.resizeStartX;isRtl(this)&&(delta=-delta);const next=Math.min(this.safeMaxRailWidthPx,Math.max(this.safeMinRailWidthPx,this.resizeStartWidth+delta));this.requestRailResize(next,!1)},this.onResizerPointerUp=e=>{e.pointerId===this.resizePointerId&&this.endResizerGesture(e.type==="pointerup")},this.onResizerKeyDown=e=>{const rtl=isRtl(this),forwardKey=rtl?"ArrowLeft":"ArrowRight",backwardKey=rtl?"ArrowRight":"ArrowLeft",step=8;if(e.key===forwardKey){const next=Math.min(this.safeMaxRailWidthPx,this.effectiveRailWidthPx+step);next!==this.effectiveRailWidthPx&&(e.preventDefault(),this.requestRailResize(next))}else if(e.key===backwardKey){const next=Math.max(this.safeMinRailWidthPx,this.effectiveRailWidthPx-step);next!==this.effectiveRailWidthPx&&(e.preventDefault(),this.requestRailResize(next))}}}static{this.defaultStrings={...super.defaultStrings,closeNavigation:LYRA_DEFAULT_closeNavigation,navigation:LYRA_DEFAULT_navigation,openNavigation:LYRA_DEFAULT_openNavigation,resizeNavigation:LYRA_DEFAULT_resizeNavigation,resizeValuePixels:LYRA_DEFAULT_resizeValuePixels}}static{this.knownUnobservedAttributes=["mode","dragging"]}static{this.styles=[LyraElement.styles,styles]}get forceMode(){return this._forceMode}set forceMode(next){if(next!=null&&next!=="auto"&&next!=="full"&&next!=="icon-only")return;const old=this._forceMode;if(this._forceMode=next??void 0,this.requestUpdate("forceMode",old),next==null||next==="auto"){if(!this.forced)return;this.forced=!1,this.applyComputedMode();return}this.forced=!0,this.setEffectiveMode(next)}get dragging(){return this._dragging}setDragging(next){this._dragging=next,this.toggleAttribute("dragging",next)}syncSlottedItems(){const slot=this.shadowRoot?.querySelector('[part="nav"] > slot'),itemTag=tag("app-rail-item"),railTag=tag("app-rail"),next=new Set((slot?.assignedElements({flatten:!0})??[]).filter(item=>item.localName===itemTag));for(const item of this.managedItems){if(next.has(item))continue;const newOwner=item.closest(railTag);newOwner&&newOwner!==this&&item.parentElement===newOwner&&!item.hasAttribute("slot")?item.toggleAttribute("icon-only",newOwner.mode==="icon-only"):item.removeAttribute("icon-only")}for(const item of next)item.toggleAttribute("icon-only",this._mode==="icon-only");this.managedItems=next}get mode(){return this._mode}get safeMinRailWidthPx(){return finiteRange(this.minRailWidthPx,190,0)}get safeMaxRailWidthPx(){return Math.max(this.safeMinRailWidthPx,finiteRange(this.maxRailWidthPx,440,0))}get effectiveRailWidthPx(){return this.railWidthPx!=null?finiteRange(this.railWidthPx,this.safeMinRailWidthPx,this.safeMinRailWidthPx,this.safeMaxRailWidthPx):this.baseEl?.getBoundingClientRect().width??240}resizeValueText(widthPx){return this.localize("resizeValuePixels",void 0,{value:getNumberFormat(this.effectiveLocale).format(Math.round(widthPx))})}get storageFullKey(){return this.storageKey?`lr-app-rail:${this.storageKey}`:void 0}get persistFields(){const persist=typeof this.persist=="string"?this.persist:"";return new Set(persist.split(/\s+/).filter(field=>APP_RAIL_PERSIST_FIELDS.has(field)))}loadPersisted(){const parsed=readPersistedState(this.storageFullKey,v=>typeof v=="object"&&v!==null);if(!parsed)return!1;const fields=this.persistFields;return fields.has("open")&&typeof parsed.open=="boolean"&&(this.open=parsed.open),fields.has("width")&&typeof parsed.railWidthPx=="number"&&Number.isFinite(parsed.railWidthPx)&&(this.railWidthPx=parsed.railWidthPx),fields.has("preferred-mode")&&(parsed.preferredMode==="full"||parsed.preferredMode==="icon-only")?(this.preferredMode=parsed.preferredMode,!0):!1}persistState(){const fields=this.persistFields;if(fields.size===0)return;const state2={};fields.has("open")&&(state2.open=this.open),fields.has("width")&&(state2.railWidthPx=this.railWidthPx),fields.has("preferred-mode")&&(state2.preferredMode=this.preferredMode??null),writePersistedState(this.storageFullKey,state2)}willUpdate(changed){if(super.willUpdate(changed),(changed.has("resizable")||changed.has("mode"))&&(!this.resizable||this._mode!=="full")&&this.endResizerGesture(),this.hasUpdated||(this.hasHeaderSlot=Array.from(this.children).some(el=>el.getAttribute("slot")==="header"),this.hasFooterSlot=Array.from(this.children).some(el=>el.getAttribute("slot")==="footer"),this.loadPersisted()&&!this.forced&&(this._mode=computeAppRailMode(this.iconOnlyMatches,this.mobileMatches,this.preferredMode))),this.hasUpdated&&(changed.has("iconOnlyBreakpoint")||changed.has("mobileBreakpoint"))&&(this.teardownMediaQueries(),this.setupMediaQueries()),this.hasUpdated&&changed.has("preferredMode")&&!this.forced&&this.applyComputedMode(),changed.has("open")||changed.has("mode")){const next=this._mode==="mobile"&&this.open;next!==this.overlayActive&&(this.overlayActive=next,next?(this.justOpened=!0,this.activateMobileOverlay()):this.deactivateMobileOverlay(this._mode==="mobile"))}}updated(changed){if(super.updated(changed),this._lastReflectedMode!==this._mode&&(this._lastReflectedMode=this._mode,this.setAttribute("mode",this._mode)),this.syncSlottedItems(),this.recoverInlineFocusAfterResponsiveClose){this.recoverInlineFocusAfterResponsiveClose=!1;const active=deepActiveElement(this.ownerDocument);this.baseEl&&!composedContains(this.baseEl,active)&&this.baseEl.focus()}this.justOpened&&(this.justOpened=!1,this.overlayHandle?.focusInitial()),this.persistReady&&(changed.has("open")||changed.has("railWidthPx")&&!this.dragging||changed.has("preferredMode")||changed.has("persist"))&&this.persistState(),this.persistReady=!0,(changed.has("railWidthPx")||changed.has("resizable")||changed.has("mode")||!this.hasUpdated)&&this.baseEl&&(this.resizable&&this.railWidthPx!=null&&this._mode==="full"?this.baseEl.style.setProperty("inline-size",`${this.effectiveRailWidthPx}px`):this.baseEl.style.removeProperty("inline-size"))}connectedCallback(){super.connectedCallback(),this.setupMediaQueries(),this.hasUpdated&&this._mode==="mobile"&&this.open&&(this.overlayHandle?.isActive()?this.overlayHandle.resume():this.activateMobileOverlay(),queueMicrotask(()=>this.overlayHandle?.focusInitial())),this.hasUpdated&&queueMicrotask(()=>{this.isConnected&&this.syncSlottedItems()})}disconnectedCallback(){super.disconnectedCallback(),this.teardownMediaQueries(),this.overlayHandle?.suspend(),this.endResizerGesture()}adoptedCallback(){super.adoptedCallback(),this.teardownMediaQueries(),this.endResizerGesture()}activateMobileOverlay(){this.overlayHandle=activateOverlay({host:this,panel:()=>this.shadowRoot?.querySelector('[part="panel"]')??null,onEscape:()=>this.setOpen(!1),onBackdrop:()=>this.setOpen(!1),restoreFocusTo:this.explicitTrigger,lockScroll:!0,suspendWhenUnrendered:!0}),this.explicitTrigger=void 0}deactivateMobileOverlay(restoreFocus=!0){this.overlayHandle?.deactivate({restoreFocus}),this.overlayHandle=void 0}setupMediaQueries(){if(!this.isConnected)return;const view=this.ownerDocument.defaultView;if(!view?.matchMedia)return;const iconOnlyQuery=view.matchMedia(`(max-width: ${this.iconOnlyBreakpoint})`),mobileQuery=view.matchMedia(`(max-width: ${this.mobileBreakpoint})`),iconOnlyListener=event=>{this.mqIconOnly!==iconOnlyQuery||!this.isConnected||this.ownerDocument.defaultView!==view||this.onIconOnlyChange(event)},mobileListener=event=>{this.mqMobile!==mobileQuery||!this.isConnected||this.ownerDocument.defaultView!==view||this.onMobileChange(event)};this.mqIconOnly=iconOnlyQuery,this.mqMobile=mobileQuery,this.mqIconOnlyListener=iconOnlyListener,this.mqMobileListener=mobileListener,iconOnlyQuery.addEventListener("change",iconOnlyListener),mobileQuery.addEventListener("change",mobileListener),this.iconOnlyMatches=iconOnlyQuery.matches,this.mobileMatches=mobileQuery.matches,this.forced||this.applyComputedMode()}teardownMediaQueries(){this.mqIconOnly&&this.mqIconOnlyListener&&this.mqIconOnly.removeEventListener("change",this.mqIconOnlyListener),this.mqMobile&&this.mqMobileListener&&this.mqMobile.removeEventListener("change",this.mqMobileListener),this.mqIconOnly=void 0,this.mqMobile=void 0,this.mqIconOnlyListener=void 0,this.mqMobileListener=void 0}applyComputedMode(){this.setEffectiveMode(computeAppRailMode(this.iconOnlyMatches,this.mobileMatches,this.preferredMode))}setEffectiveMode(next){if(this._mode===next)return;const old=this._mode;old==="mobile"&&next!=="mobile"&&this.open&&(this.recoverInlineFocusAfterResponsiveClose=!0),this._mode=next,this.requestUpdate("mode",old),this.emit("lr-mode-change",{mode:next}),next!=="mobile"&&this.open&&this.setOpen(!1,{force:!0})}setOpen(next,options){if(this.open===next)return;if(options?.force){this.open=next,this.emit("lr-toggle",{open:next});return}const mode=this._mode,open=this.open;this.emit("lr-toggle",{open:next},{cancelable:!0}).defaultPrevented||this._mode!==mode||this.open!==open||(this.open=next)}endResizerGesture(commit=!1){const ownerWindow=this.resizeOwnerWindow,changed=this.resizeGestureChanged,widthPx=this.effectiveRailWidthPx;this.resizePointerId=void 0,this.resizeOwnerWindow=void 0,this.resizeGestureChanged=!1,this.setDragging(!1),ownerWindow?.removeEventListener("pointermove",this.onResizerPointerMove),ownerWindow?.removeEventListener("pointerup",this.onResizerPointerUp),ownerWindow?.removeEventListener("pointercancel",this.onResizerPointerUp),ownerWindow?.removeEventListener("lostpointercapture",this.onResizerPointerUp),commit&&changed&&(this.emit("lr-rail-resize",{widthPx}),this.persistReady&&this.persistState())}requestRailResize(next,commit=!0){if(!this.resizable||this._mode!=="full"||!this.isConnected||next===this.effectiveRailWidthPx)return!1;const event=this.emit("lr-rail-resize-request",{widthPx:next},{cancelable:!0});return!this.resizable||this._mode!=="full"||!this.isConnected?(this.endResizerGesture(),!1):event.defaultPrevented?!1:(this.railWidthPx=next,commit?this.emit("lr-rail-resize",{widthPx:next}):this.resizeGestureChanged=!0,!0)}render(){const mobile=this._mode==="mobile",railWidthPx=this.effectiveRailWidthPx;return html`
       <button
         part="toggle"
         type="button"
@@ -51,7 +51,8 @@ var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3
             role="separator"
             aria-orientation="vertical"
             aria-label=${this.localize("resizeNavigation")}
-            aria-valuenow=${Math.round(this.effectiveRailWidthPx)}
+            aria-valuenow=${Math.round(railWidthPx)}
+            aria-valuetext=${this.resizeValueText(railWidthPx)}
             aria-valuemin=${this.safeMinRailWidthPx}
             aria-valuemax=${this.safeMaxRailWidthPx}
             tabindex="0"

package/dist/components/layout/app-rail/app-rail.styles.js

@@ -1 +1 @@
-import{css}from"lit";const styles=css`:host{--_lr-app-rail-width:var(--lr-size-15rem);--_lr-app-rail-icon-width:var(--lr-size-4rem);--_lr-app-rail-mobile-width:var(--lr-size-18rem);--_lr-app-rail-overlay-color:var(--lr-color-overlay);display:block;position:relative}[part=toggle]{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-radius);background:var(--lr-color-surface);color:var(--lr-color-text);cursor:pointer;justify-content:center;align-items:center;display:none}:host([mode=mobile]) [part=toggle]{display:inline-flex}:host([hide-toggle][mode=mobile]) [part=toggle]{display:none}:host([mode=mobile][open]) [part=toggle]{z-index:calc(var(--lr-overlay-stack-index,var(--lr-layer-modal)) + 2);position:relative}[part=toggle]:hover{background:var(--lr-app-rail-toggle-hover-bg,var(--lr-color-brand-quiet));color:var(--lr-app-rail-toggle-hover-color,var(--lr-color-brand))}[part=toggle]:active{background:var(--lr-app-rail-toggle-active-bg,color-mix(in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active)));color:var(--lr-app-rail-toggle-active-color,var(--lr-color-brand))}[part=toggle]:focus-visible{outline:var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);outline-offset:var(--lr-focus-ring-offset)}[part=backdrop]{z-index:var(--lr-overlay-stack-index,var(--lr-layer-modal));background:var(--lr-app-rail-overlay-color,var(--_lr-app-rail-overlay-color));position:fixed;inset:0}[part=base]{inline-size:var(--lr-app-rail-width,var(--_lr-app-rail-width));border-inline-end:var(--lr-border-width-thin) solid var(--lr-color-border);background:var(--lr-color-surface);block-size:100%;transition:inline-size var(--lr-transition-base);flex-direction:column;padding-block-end:var(--lr-safe-area-bottom);display:flex;position:relative;overflow:clip auto}:host([mode=icon-only]) [part=base]{inline-size:var(--lr-app-rail-icon-width,var(--_lr-app-rail-icon-width))}:host([dragging]) [part=base]{transition:none}[part=resizer]{inline-size:var(--lr-icon-button-size);min-inline-size:var(--lr-icon-button-size);min-block-size:var(--lr-icon-button-size);cursor:col-resize;touch-action:none;background:0 0;justify-content:center;align-items:stretch;display:flex;position:absolute;inset-block:0;inset-inline-end:calc(var(--lr-icon-button-size) * -.5)}[part=resizer-track]{inline-size:var(--lr-size-3px);transition:background-color var(--lr-transition-fast);background:0 0}[part=resizer]:hover [part=resizer-track]{background:var(--lr-app-rail-resizer-hover-bg,var(--lr-color-brand))}[part=resizer]:active [part=resizer-track]{background:var(--lr-app-rail-resizer-active-bg,color-mix(in oklab, var(--lr-color-brand), var(--lr-color-mix-partner) var(--lr-color-mix-active)))}[part=resizer]:focus-visible{outline:var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);outline-offset:var(--lr-focus-ring-offset)}[part=panel]{z-index:calc(var(--lr-overlay-stack-index,var(--lr-layer-modal)) + 1);inline-size:min(var(--lr-app-rail-mobile-width,var(--_lr-app-rail-mobile-width)), 85vw);background:var(--lr-color-surface-overlay);box-shadow:var(--lr-shadow-l);transition:transform var(--lr-transition-base);flex-direction:column;padding-block-end:var(--lr-safe-area-bottom);display:flex;position:fixed;inset-block:0;inset-inline-start:0;overflow:clip auto;transform:translate(-100%)}:host(:dir(rtl)) [part=panel]{transform:translate(100%)}:host([mode=mobile][open]) [part=panel]{transform:none}[part=header]{padding:var(--lr-space-m);border-block-end:var(--lr-border-width-thin) solid var(--lr-color-border)}[part=header][hidden]{display:none}[part=footer]{padding:var(--lr-space-m);border-block-start:var(--lr-border-width-thin) solid var(--lr-color-border)}[part=footer][hidden]{display:none}[part=nav]{padding:var(--lr-space-s);gap:var(--lr-space-xs);flex-direction:column;flex:auto;display:flex;overflow:clip auto}:host([mode=icon-only]) [part=nav]{align-items:center}:host([mode=icon-only]) ::slotted(lr-app-rail-item){max-inline-size:var(--lr-app-rail-icon-width,var(--_lr-app-rail-icon-width))}@media (prefers-reduced-motion:reduce){[part=base],[part=panel],[part=resizer-track]{transition:none!important}}`;export{styles};
+import{css}from"lit";const styles=css`:host{--_lr-app-rail-width:var(--lr-size-15rem);--_lr-app-rail-icon-width:var(--lr-size-4rem);--_lr-app-rail-mobile-width:var(--lr-size-18rem);--_lr-app-rail-overlay-color:var(--lr-color-overlay);display:block;position:relative}[part=toggle]{font:inherit;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-radius);background:var(--lr-color-surface);color:var(--lr-color-text);cursor:pointer;justify-content:center;align-items:center;display:none}:host([mode=mobile]) [part=toggle]{display:inline-flex}:host([hide-toggle][mode=mobile]) [part=toggle]{display:none}:host([mode=mobile][open]) [part=toggle]{z-index:calc(var(--lr-overlay-stack-index,var(--lr-layer-modal)) + 2);position:relative}[part=toggle]:hover{background:var(--lr-app-rail-toggle-hover-bg,var(--lr-color-brand-quiet));color:var(--lr-app-rail-toggle-hover-color,var(--lr-color-brand))}[part=toggle]:active{background:var(--lr-app-rail-toggle-active-bg,color-mix(in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active)));color:var(--lr-app-rail-toggle-active-color,var(--lr-color-brand))}[part=toggle]:focus-visible{outline:var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);outline-offset:var(--lr-focus-ring-offset)}[part=backdrop]{z-index:var(--lr-overlay-stack-index,var(--lr-layer-modal));background:var(--lr-app-rail-overlay-color,var(--_lr-app-rail-overlay-color));position:fixed;inset:0}[part=base]{inline-size:var(--lr-app-rail-width,var(--_lr-app-rail-width));border-inline-end:var(--lr-border-width-thin) solid var(--lr-color-border);background:var(--lr-color-surface);block-size:100%;transition:inline-size var(--lr-transition-base);flex-direction:column;padding-block-end:var(--lr-safe-area-bottom);display:flex;position:relative;overflow:clip auto}:host([mode=icon-only]) [part=base]{inline-size:var(--lr-app-rail-icon-width,var(--_lr-app-rail-icon-width))}:host([dragging]) [part=base]{transition:none}[part=resizer]{inline-size:var(--lr-icon-button-size);min-inline-size:var(--lr-icon-button-size);min-block-size:var(--lr-icon-button-size);cursor:col-resize;touch-action:none;background:0 0;justify-content:center;align-items:stretch;display:flex;position:absolute;inset-block:0;inset-inline-end:calc(var(--lr-icon-button-size) * -.5)}[part=resizer-track]{inline-size:var(--lr-size-3px);transition:background-color var(--lr-transition-fast);background:0 0}[part=resizer]:hover [part=resizer-track]{background:var(--lr-app-rail-resizer-hover-bg,var(--lr-color-brand))}[part=resizer]:active [part=resizer-track]{background:var(--lr-app-rail-resizer-active-bg,color-mix(in oklab, var(--lr-color-brand), var(--lr-color-mix-partner) var(--lr-color-mix-active)))}[part=resizer]:focus-visible{outline:var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);outline-offset:var(--lr-focus-ring-offset)}[part=panel]{z-index:calc(var(--lr-overlay-stack-index,var(--lr-layer-modal)) + 1);inline-size:min(var(--lr-app-rail-mobile-width,var(--_lr-app-rail-mobile-width)), 85vw);background:var(--lr-color-surface-overlay);box-shadow:var(--lr-shadow-l);transition:transform var(--lr-transition-base);flex-direction:column;padding-block-end:var(--lr-safe-area-bottom);display:flex;position:fixed;inset-block:0;inset-inline-start:0;overflow:clip auto;transform:translate(-100%)}:host(:dir(rtl)) [part=panel]{transform:translate(100%)}:host([mode=mobile][open]) [part=panel]{transform:none}[part=header]{padding:var(--lr-space-m);border-block-end:var(--lr-border-width-thin) solid var(--lr-color-border)}[part=header][hidden]{display:none}[part=footer]{padding:var(--lr-space-m);border-block-start:var(--lr-border-width-thin) solid var(--lr-color-border)}[part=footer][hidden]{display:none}[part=nav]{padding:var(--lr-space-s);gap:var(--lr-space-xs);flex-direction:column;flex:auto;display:flex;overflow:clip auto}:host([mode=icon-only]) [part=nav]{align-items:center}:host([mode=icon-only]) ::slotted(lr-app-rail-item){max-inline-size:var(--lr-app-rail-icon-width,var(--_lr-app-rail-icon-width))}@media (prefers-reduced-motion:reduce){[part=base],[part=panel],[part=resizer-track]{transition:none!important}}`;export{styles};

package/dist/components/layout/carousel/carousel.class.d.ts

@@ -33,7 +33,8 @@ import{type PropertyValues,type TemplateResult}from'lit';import{LyraElement}from
 *   `current-slide` wins.
 * @csspart base - Compatibility name for the carousel landmark; use `carousel`.
 * @csspart carousel - The carousel landmark. It is the same node as `base`.
-* @csspart scroll-container - The keyboard-focusable scroll-snap viewport.
+* @csspart scroll-container - The keyboard-focusable scroll-snap viewport. Arrow/Home/End
+*   navigation leaves descendant editors and interactive controls in charge of their own keys.
 * @csspart track - Lyra extension wrapping the slotted slides and eligible inert loop snapshots.
 * @csspart controls - Lyra extension wrapping enabled navigation and pagination.
 * @csspart navigation - The previous/next navigation wrapper.
@@ -95,4 +96,4 @@ goToSlide(index:number,behavior?:ScrollBehavior):void;
 /** Appends a carousel item. */
 addSlide(slide:LyraCarouselItem):void;
 /** Removes the carousel item at `index`. */
-removeSlide(index:number):void;private stopAutoplay;private restartAutoplay;private scrollPaddingStart;private axisOffsetOf;private scrollByAxis;private restingSlide;private alignToActiveSlide;private motionAwareScrollBehavior;private cancelScrollSettle;private onViewportScroll;private onViewportScrollEnd;private clearAlignment;private takeOverViewport;private settleScrolledSlide;private onViewportPointerEnter;private onViewportPointerLeave;private onViewportFocusIn;private onViewportFocusOut;private onViewportPointerDown;private pointerTargetsInteractiveContent;private onViewportPointerMove;private finishDrag;private cancelClickSuppression;private cancelDrag;private onViewportPointerUp;private onViewportPointerCancel;private onViewportLostPointerCapture;private onViewportClick;private onViewportKeyDown;private computedSlideBasis;render():TemplateResult;}declare global{interface HTMLElementTagNameMap{'lr-carousel':LyraCarousel;}}
+removeSlide(index:number):void;private stopAutoplay;private restartAutoplay;private scrollPaddingStart;private axisOffsetOf;private scrollByAxis;private restingSlide;private alignToActiveSlide;private motionAwareScrollBehavior;private cancelScrollSettle;private onViewportScroll;private onViewportScrollEnd;private clearAlignment;private takeOverViewport;private settleScrolledSlide;private onViewportPointerEnter;private onViewportPointerLeave;private onViewportFocusIn;private onViewportFocusOut;private onViewportPointerDown;private targetsInteractiveContent;private onViewportPointerMove;private finishDrag;private cancelClickSuppression;private cancelDrag;private onViewportPointerUp;private onViewportPointerCancel;private onViewportLostPointerCapture;private onViewportClick;private onViewportKeyDown;private computedSlideBasis;render():TemplateResult;}declare global{interface HTMLElementTagNameMap{'lr-carousel':LyraCarousel;}}

package/dist/components/layout/carousel/carousel.class.js

@@ -1,4 +1,4 @@
-var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html,nothing}from"lit";import{property,query}from"lit/decorators.js";import{acquireAnnouncementSink}from"../../../internal/announcer.js";import{isAccessibilitySubtreeExcluded,isAccessibilityVisible,isAccessibilityVisibilityHidden}from"../../../internal/accessibility-visibility.js";import{activeElementIn,deepActiveElementIn}from"../../../internal/active-element.js";import{composedAccessibilityText}from"../../../internal/announcement-text.js";import{renderInertPresentation}from"../../../internal/inert-presentation.js";import{LyraElement}from"../../../internal/lyra-element.js";import{finiteDuration,finiteInteger}from"../../../internal/numbers.js";import{composedContains}from"../../../internal/overlay-manager.js";import{getNumberFormat}from"../../../internal/intl-cache.js";import{tag}from"../../../internal/prefix.js";import{styles}from"./carousel.styles.js";import{LYRA_DEFAULT_carousel,LYRA_DEFAULT_carouselGoTo,LYRA_DEFAULT_carouselIndicators,LYRA_DEFAULT_carouselLabel,LYRA_DEFAULT_carouselSlide,LYRA_DEFAULT_carouselSlideAnnouncement,LYRA_DEFAULT_carouselSlideAnnouncementSeparator,LYRA_DEFAULT_carouselSlidePosition,LYRA_DEFAULT_next,LYRA_DEFAULT_previous}from"../../../internal/default-strings.generated.js";const LOOP_SNAPSHOT_UNSAFE_TAGS=new Set(["audio","canvas","embed","form","iframe","img","input","link","object","picture","script","select","source","style","textarea","track","video"]),CAROUSEL_MANAGED_SLIDE_ATTRIBUTES=new Set(["aria-hidden","aria-label","aria-roledescription","hidden","inert","role"]),SLIDE_SNAPSHOT_KEYS=["hidden","inert","role","label","roleDescription","ariaHidden"];class LyraCarousel extends LyraElement{static{this.defaultStrings={...super.defaultStrings,carousel:LYRA_DEFAULT_carousel,carouselGoTo:LYRA_DEFAULT_carouselGoTo,carouselIndicators:LYRA_DEFAULT_carouselIndicators,carouselLabel:LYRA_DEFAULT_carouselLabel,carouselSlide:LYRA_DEFAULT_carouselSlide,carouselSlideAnnouncement:LYRA_DEFAULT_carouselSlideAnnouncement,carouselSlideAnnouncementSeparator:LYRA_DEFAULT_carouselSlideAnnouncementSeparator,carouselSlidePosition:LYRA_DEFAULT_carouselSlidePosition,next:LYRA_DEFAULT_next,previous:LYRA_DEFAULT_previous}}static{this.styles=[LyraElement.styles,styles]}static get observedAttributes(){return[...new Set([...super.observedAttributes,"currentslide"])]}get currentSlide(){return this._currentSlide}set currentSlide(value){this.setCurrentSlideState(value)}get pagination(){return this._pagination}set pagination(value){this.setPaginationState(!!value)}get slides(){return this._slides}constructor(){super(),this._currentSlide=0,this._pagination=!1,this._slides=0,this.loop=!1,this.autoplay=!1,this.autoplayInterval=3e3,this.navigation=!1,this.orientation="horizontal",this.mouseDragging=!1,this.slidesPerPage=1,this.slidesPerMove=1,this.hostAccessibleLabel=null,this.reduceMotion=!1,this.snapshots=new Map,this.appliedSnapshots=new WeakMap,this.adoptingScrolledSlide=!1,this.hasAlignedOnce=!1,this.loopClonesDirty=!0,this.pointerInteracting=!1,this.focusInteracting=!1,this.dragStartCoordinate=0,this.dragStartScroll=0,this.dragMoved=!1,this.suppressClick=!1,this.announcementsArmed=!1,this.changeOrigin="manual",this.manualPending=!1,this.observerGeneration=0,this.onMotionPreferenceChange=event=>{this.reduceMotion=event.matches,this.restartAutoplay(),this.requestUpdate()},this.onVisibilityChange=()=>{this.restartAutoplay()},this.onSlotChange=()=>{this.handleSlidesChanged()},this.onViewportScroll=()=>{this.cancelScrollSettle();const view=this.ownerDocument.defaultView;view&&(this.settleTimerWindow=view,this.settleTimer=view.setTimeout(this.settleScrolledSlide,120))},this.onViewportScrollEnd=()=>{this.cancelScrollSettle(),this.settleScrolledSlide()},this.settleScrolledSlide=()=>{if(this.settleTimer=void 0,this.settleTimerWindow=void 0,!this.isConnected)return;const viewport=this.viewport;if(!viewport)return;if(this.alignTarget){if(Math.abs(this.axisOffsetOf(this.alignTarget,viewport))>2)return;const cloneSide=this.alignTarget.dataset.carouselClone;if(cloneSide==="before"||cloneSide==="after"){const realSlide=this.slideElements()[this.alignIndex??-1];if(realSlide){this.alignTarget=realSlide,this.scrollByAxis(viewport,this.axisOffsetOf(realSlide,viewport),"instant");return}}this.clearAlignment();return}const resting=this.restingSlide();if(!resting)return;const changed=resting.index!==this.currentSlide;!changed&&!resting.cloneSide||(this.adoptingScrolledSlide=!0,changed&&(this.currentSlide=resting.index,this.emit("lr-slide-change",{index:resting.index,slide:this.slideElements()[resting.index]})),this.updateComplete.then(()=>{if(resting.cloneSide&&this.isConnected&&this.viewport){const realSlide=this.slideElements()[resting.index];realSlide&&this.scrollByAxis(this.viewport,this.axisOffsetOf(realSlide,this.viewport),"instant")}this.adoptingScrolledSlide=!1}))},this.onViewportPointerEnter=()=>{this.pointerInteracting=!0,this.restartAutoplay()},this.onViewportPointerLeave=()=>{this.dragPointerId===void 0&&(this.pointerInteracting=!1,this.restartAutoplay())},this.onViewportFocusIn=event=>{this.focusInteracting=!0;const slides=new Set(this.slideElements()),focusedSlide=event.composedPath().find(candidate=>candidate.nodeType===1&&slides.has(candidate));focusedSlide&&(this.lastFocusedSlide=focusedSlide),this.restartAutoplay()},this.onViewportFocusOut=()=>{this.queueOwnerMicrotask(()=>{if(!this.isConnected)return;const active=deepActiveElementIn(this.ownerDocument);this.lastFocusedSlide&&!composedContains(this.lastFocusedSlide,active)&&(this.lastFocusedSlide.isConnected||active!==null&&active!==this.ownerDocument.body)&&(this.lastFocusedSlide=void 0),this.focusInteracting=this.matches(":focus-within"),this.restartAutoplay()})},this.onViewportPointerDown=event=>{if(!this.mouseDragging||event.pointerType!=="mouse"||!event.isPrimary||event.button!==0||this.dragPointerId!==void 0||this.pointerTargetsInteractiveContent(event))return;this.takeOverViewport();const viewport=this.viewport;if(viewport){this.dragPointerId=event.pointerId,this.dragStartCoordinate=this.effectiveOrientation()==="vertical"?event.clientY:event.clientX,this.dragStartScroll=this.effectiveOrientation()==="vertical"?viewport.scrollTop:viewport.scrollLeft,this.dragMoved=!1,viewport.setAttribute("data-dragging","");try{viewport.setPointerCapture(event.pointerId)}catch{}this.restartAutoplay()}},this.onViewportPointerMove=event=>{if(event.pointerId!==this.dragPointerId)return;const viewport=this.viewport;if(!viewport)return;const delta=(this.effectiveOrientation()==="vertical"?event.clientY:event.clientX)-this.dragStartCoordinate;Math.abs(delta)>2&&(this.dragMoved=!0),this.dragMoved&&(event.preventDefault(),this.effectiveOrientation()==="vertical"?viewport.scrollTo({top:this.dragStartScroll-delta,behavior:"instant"}):viewport.scrollTo({left:this.dragStartScroll-delta,behavior:"instant"}))},this.onViewportPointerUp=event=>{this.finishDrag(event.pointerId,!1)},this.onViewportPointerCancel=event=>{this.finishDrag(event.pointerId,!0)},this.onViewportLostPointerCapture=event=>{this.finishDrag(event.pointerId,!0)},this.onViewportClick=event=>{this.suppressClick&&(event.preventDefault(),event.stopImmediatePropagation())},this.onViewportKeyDown=event=>{const vertical=this.effectiveOrientation()==="vertical",rtl=this.effectiveDirection==="rtl",forwardKey=vertical?"ArrowDown":rtl?"ArrowLeft":"ArrowRight",backwardKey=vertical?"ArrowUp":rtl?"ArrowRight":"ArrowLeft";event.key===forwardKey?(event.preventDefault(),this.next()):event.key===backwardKey?(event.preventDefault(),this.previous()):event.key==="Home"?(event.preventDefault(),this.goToSlide(0)):event.key==="End"&&(event.preventDefault(),this.goToSlide(this.loop?this.slideElements().length-1:this.maxStartIndex()))},this.requestUpdate("currentSlide",void 0),this.requestUpdate("pagination",void 0)}attributeChangedCallback(name,oldValue,newValue){if(name==="currentslide"){oldValue!==newValue&&(this.currentSlide=finiteInteger(Number(newValue??0),0));return}super.attributeChangedCallback(name,oldValue,newValue),name==="current-slide"&&newValue===null&&oldValue!==newValue&&this.hasAttribute("currentslide")&&(this.currentSlide=finiteInteger(Number(this.getAttribute("currentslide")??0),0))}connectedCallback(){this.hasAttribute("current-slide")&&(this.currentSlide=finiteInteger(Number(this.getAttribute("current-slide")??0),0)),super.connectedCallback();const view=this.ownerDocument.defaultView;this.announcementSink??=acquireAnnouncementSink("polite",{document:this.ownerDocument,source:this}),this.announcementsArmed=!1,this.manualPending=!1,this.mediaQuery=typeof view?.matchMedia=="function"?view.matchMedia("(prefers-reduced-motion: reduce)"):void 0,this.reduceMotion=this.mediaQuery?.matches??!1,this.mediaQuery?.addEventListener("change",this.onMotionPreferenceChange),this.visibilityDocument=this.ownerDocument,this.visibilityDocument.addEventListener("visibilitychange",this.onVisibilityChange),this.armSlideContentObserver(),this.restartAutoplay(),this.hasUpdated&&this.queueOwnerMicrotask(()=>{this.isConnected&&this.handleSlidesChanged()})}disconnectedCallback(){this.announcementSink?.release(),this.announcementSink=void 0,this.announcementsArmed=!1,this.manualPending=!1,this.cancelDrag(!1),this.stopAutoplay(),this.cancelScrollSettle(),this.cancelClickSuppression(),this.suppressClick=!1,this.pointerInteracting=!1,this.focusInteracting=!1,this.hasAlignedOnce=!1,this.clearAlignment(),this.mediaQuery?.removeEventListener("change",this.onMotionPreferenceChange),this.mediaQuery=void 0,this.visibilityDocument?.removeEventListener("visibilitychange",this.onVisibilityChange),this.visibilityDocument=void 0,this.resetSlideContentObserver(),this.restoreSlides(),this.lastFocusedSlide=void 0,super.disconnectedCallback()}armSlideContentObserver(){const ownerDocument=this.ownerDocument,MutationObserverCtor=ownerDocument.defaultView?.MutationObserver;if(!MutationObserverCtor||!this.isConnected)return;this.resetSlideContentObserver();const generation=this.observerGeneration,observer=new MutationObserverCtor(records=>{this.observer!==observer||this.observerDocument!==ownerDocument||this.observerGeneration!==generation||!this.isConnected||this.ownerDocument!==ownerDocument||!records.some(record=>{if(record.type!=="attributes")return!0;if(record.target===this)return!1;if(!CAROUSEL_MANAGED_SLIDE_ATTRIBUTES.has(record.attributeName??""))return!0;const slide=record.target,snapshot=this.snapshots.get(slide);return snapshot?this.adoptChanges(slide,snapshot):!1})||(this.loop&&(this.loopClonesDirty=!0),this.syncSlides(),this.requestUpdate())});this.observer=observer,this.observerDocument=ownerDocument,observer.observe(this,{attributes:!0,characterData:!0,childList:!0,subtree:!0})}resetSlideContentObserver(){this.observerGeneration+=1,this.observer?.disconnect(),this.observer=void 0,this.observerDocument=void 0}willUpdate(changed){if(super.willUpdate(changed),(changed.has("currentSlide")||changed.has("slidesPerPage"))&&this.slideSlot){const normalized=this.normalizedIndex();this.currentSlide!==normalized&&(this.currentSlide=normalized)}}updated(changed){super.updated(changed);const shouldAnnounceActivePage=this.announcementsArmed&&(this.manualPending||changed.has("slidesPerPage"));this.syncSlides(),(this.loopClonesDirty||changed.has("loop")||changed.has("slidesPerPage")||changed.has("slidesPerMove"))&&(this.syncLoopClones(),this.loopClonesDirty=!1),(changed.has("autoplay")||changed.has("autoplayInterval")||changed.has("loop")||changed.has("slidesPerPage"))&&this.restartAutoplay(),!this.adoptingScrolledSlide&&(changed.has("currentSlide")||changed.has("slidesPerPage")||changed.has("orientation")||!this.hasAlignedOnce)&&this.alignToActiveSlide(),this.hasAlignedOnce=!0,shouldAnnounceActivePage&&this.announceActivePage(),this.manualPending=!1,this.announcementsArmed=!0}setCurrentSlideState(value){const old=this._currentSlide,next=finiteInteger(value,0);old!==next&&(this._currentSlide=next,this.changeOrigin==="manual"&&(this.manualPending=!0),this.requestUpdate("currentSlide",old))}setPaginationState(value){const old=this._pagination;old!==value&&(this._pagination=value,this.requestUpdate("pagination",old))}queueOwnerMicrotask(callback){const view=this.ownerDocument.defaultView;view?view.queueMicrotask(callback):queueMicrotask(callback)}effectiveOrientation(){return this.orientation==="vertical"?"vertical":"horizontal"}slideElements(){return(this.slideSlot?.assignedElements({flatten:!0})??[]).filter(element=>element.nodeType===1&&element.namespaceURI==="http://www.w3.org/1999/xhtml")}pageSize(count=this.slideElements().length){return finiteInteger(this.slidesPerPage,1,1,Math.max(1,count))}moveSize(count=this.slideElements().length){return finiteInteger(this.slidesPerMove,1,1,this.pageSize(count))}maxStartIndex(count=this.slideElements().length){return Math.max(0,count-this.pageSize(count))}normalizedIndex(count=this.slideElements().length){if(count===0)return 0;const max=this.loop?count-1:this.maxStartIndex(count);return finiteInteger(this.currentSlide,0,0,max)}pageTargets(count=this.slideElements().length){if(count===0)return[];if(this.loop)return Array.from({length:count},(_unused,index)=>index);const max=this.maxStartIndex(count),move=this.moveSize(count),targets=[0];for(let target=move;target<max;target+=move)targets.push(target);return max>0&&targets.at(-1)!==max&&targets.push(max),targets}visibleIndices(count,current){const visible=new Set,perPage=this.pageSize(count);for(let offset=0;offset<perPage;offset+=1){const index=this.loop?(current+offset)%count:current+offset;index>=0&&index<count&&visible.add(index)}return visible}announceActivePage(){if(!isAccessibilityVisible(this))return;const slides=this.slideElements();if(slides.length===0)return;const current=this.normalizedIndex(slides.length),visible=this.visibleIndices(slides.length,current),format=getNumberFormat(this.effectiveLocale),messages=slides.flatMap((slide,index)=>{if(!visible.has(index))return[];if(isAccessibilitySubtreeExcluded(slide))return[];const slideTextVisible=!isAccessibilityVisibilityHidden(slide),authoredLabel=slideTextVisible?this.snapshots.get(slide)?.label?.trim():"";if(authoredLabel)return[authoredLabel];const position=this.localize("carouselSlidePosition",void 0,{index:format.format(index+1),total:format.format(slides.length)}),content=Array.from(slide.childNodes).map(node=>composedAccessibilityText(node,slideTextVisible)).join(" ").replace(/\s+/g," ").trim();return!slideTextVisible&&!content?[]:[content&&content!==position?this.localize("carouselSlideAnnouncement",void 0,{position,content}):position]});this.announcementSink?.announce(messages.join(this.localize("carouselSlideAnnouncementSeparator")))}restoreAttribute(slide,name,value){value===null?slide.removeAttribute(name):slide.setAttribute(name,value)}snapshotSlide(slide){return{hidden:slide.hidden,inert:slide.inert,role:slide.getAttribute("role"),label:slide.getAttribute("aria-label"),roleDescription:slide.getAttribute("aria-roledescription"),ariaHidden:slide.getAttribute("aria-hidden")}}adoptChanges(slide,snapshot){const applied=this.appliedSnapshots.get(slide);if(!applied)return!1;const current=this.snapshotSlide(slide);let changed=!1;for(const key of SLIDE_SNAPSHOT_KEYS)current[key]!==applied[key]&&(snapshot[key]=current[key],changed=!0);return changed}restoreSlide(slide,snapshot){slide.hidden=snapshot.hidden,slide.inert=snapshot.inert,this.restoreAttribute(slide,"role",snapshot.role),this.restoreAttribute(slide,"aria-label",snapshot.label),this.restoreAttribute(slide,"aria-roledescription",snapshot.roleDescription),this.restoreAttribute(slide,"aria-hidden",snapshot.ariaHidden)}restoreSlides(){for(const[slide,snapshot]of this.snapshots)this.adoptChanges(slide,snapshot),this.restoreSlide(slide,snapshot);this.snapshots.clear()}syncSlides(){const slides=this.slideElements(),assigned=new Set(slides);for(const[slide,snapshot]of this.snapshots)this.adoptChanges(slide,snapshot)&&(this.loopClonesDirty=!0),assigned.has(slide)||(this.restoreSlide(slide,snapshot),this.snapshots.delete(slide));const current=this.normalizedIndex(slides.length);this.currentSlide!==current&&(this.currentSlide=current);const visible=this.visibleIndices(slides.length,current);this.repairFocusBeforeSlideExclusion(slides,visible);const format=getNumberFormat(this.effectiveLocale);slides.forEach((slide,slideIndex)=>{const existing=this.snapshots.get(slide),snapshot=existing??this.snapshotSlide(slide);existing||this.snapshots.set(slide,snapshot),slide.localName===tag("carousel-item")?(this.restoreAttribute(slide,"role",snapshot.role??"group"),this.restoreAttribute(slide,"aria-roledescription",snapshot.roleDescription??this.localize("carouselSlide")),this.restoreAttribute(slide,"aria-label",snapshot.label??this.localize("carouselSlidePosition",void 0,{index:format.format(slideIndex+1),total:format.format(slides.length)}))):(this.restoreAttribute(slide,"role",snapshot.role),this.restoreAttribute(slide,"aria-roledescription",snapshot.roleDescription),this.restoreAttribute(slide,"aria-label",snapshot.label)),slide.hidden=snapshot.hidden,visible.has(slideIndex)?(slide.inert=snapshot.inert,this.restoreAttribute(slide,"aria-hidden",snapshot.ariaHidden)):(slide.inert=!0,slide.setAttribute("aria-hidden","true")),this.appliedSnapshots.set(slide,this.snapshotSlide(slide))})}repairFocusBeforeSlideExclusion(slides,visible){const active=deepActiveElementIn(this.ownerDocument),focusedIndex=slides.findIndex(slide=>composedContains(slide,active)),focusedSlideWillBeExcluded=focusedIndex>=0&&!visible.has(focusedIndex),focusedSlideWasRemoved=focusedIndex<0&&this.lastFocusedSlide!==void 0&&!this.lastFocusedSlide.isConnected&&(active===null||active===this.ownerDocument.body);!focusedSlideWillBeExcluded&&!focusedSlideWasRemoved||(this.viewport?.focus(),this.lastFocusedSlide=void 0)}handleSlidesChanged(){const count=this.slideElements().length,active=activeElementIn(this.shadowRoot);if(active?.matches('[part~="pagination-item"]')){const children=active.parentElement.children,pages=this.pageTargets(count).length;(pages<2||[...children].indexOf(active)>=pages)&&(pages>1?children[pages-1]:this.viewport)?.focus()}else active?.matches('[part~="navigation-button"]')&&(!this.navigation||count<=this.pageSize(count))&&this.viewport?.focus();if(this._slides!==count){const previous=this._slides;this._slides=count,this.requestUpdate("slides",previous)}this.loopClonesDirty=!0,this.syncSlides(),this.syncLoopClones(),this.loopClonesDirty=!1,this.restartAutoplay(),this.requestUpdate()}prepareClone(original,index,side){if([original,...Array.from(original.querySelectorAll("*"))].some(element=>element.namespaceURI!=="http://www.w3.org/1999/xhtml"||element.localName.includes("-")||LOOP_SNAPSHOT_UNSAFE_TAGS.has(element.localName)))return;const clone=original.cloneNode(!0),descendants=[clone,...Array.from(clone.querySelectorAll("*"))];for(const descendant of descendants)descendant.removeAttribute("id"),descendant.removeAttribute("name"),descendant.removeAttribute("form"),descendant.removeAttribute("for"),descendant.removeAttribute("aria-controls"),descendant.removeAttribute("aria-describedby"),descendant.removeAttribute("aria-labelledby");return clone.removeAttribute("slot"),clone.dataset.carouselClone=side,clone.dataset.carouselIndex=String(index),clone.inert=!0,clone.setAttribute("aria-hidden","true"),clone}syncLoopClones(){const before=this.beforeClones,after=this.afterClones;if(!before||!after)return;before.replaceChildren(),after.replaceChildren();const slides=this.slideElements();if(!this.loop||slides.length<2)return;const cloneCount=Math.min(slides.length,Math.max(this.pageSize(slides.length),this.moveSize(slides.length))),beforeStart=slides.length-cloneCount;for(let index=beforeStart;index<slides.length;index+=1){const clone=this.prepareClone(slides[index],index,"before");clone&&before.append(clone)}for(let index=0;index<cloneCount;index+=1){const clone=this.prepareClone(slides[index],index,"after");clone&&after.append(clone)}}cloneFor(side,index){return(side==="before"?this.beforeClones:this.afterClones)?.querySelector(`[data-carousel-index="${index}"]`)??void 0}changeTo(index,behavior="smooth",origin="manual"){const slides=this.slideElements(),count=slides.length;if(count===0||!Number.isFinite(index))return;const requested=Math.trunc(index);let next,loopSide;if(this.loop?(next=(requested%count+count)%count,requested<0?loopSide="before":requested>=count&&(loopSide="after")):next=Math.min(this.maxStartIndex(count),Math.max(0,requested)),next===this.currentSlide)return;this.requestedBehavior=behavior,this.loopSide=loopSide;const previousOrigin=this.changeOrigin;this.changeOrigin=origin;try{this.currentSlide=next}finally{this.changeOrigin=previousOrigin}this.emit("lr-slide-change",{index:next,slide:slides[next]})}next(behavior="smooth"){this.changeTo(this.currentSlide+this.moveSize(),behavior)}previous(behavior="smooth"){this.changeTo(this.currentSlide-this.moveSize(),behavior)}goToSlide(index,behavior="smooth"){this.changeTo(index,behavior)}addSlide(slide){slide?.nodeType!==1||slide?.namespaceURI!=="http://www.w3.org/1999/xhtml"||(this.append(slide),this.queueOwnerMicrotask(()=>{this.isConnected&&this.handleSlidesChanged()}))}removeSlide(index){if(!Number.isFinite(index))return;const target=this.slideElements()[Math.trunc(index)];target&&(target.remove(),this.queueOwnerMicrotask(()=>{this.isConnected&&this.handleSlidesChanged()}))}stopAutoplay(){this.timer!==void 0&&this.timerWindow?.clearInterval(this.timer),this.timer=void 0,this.timerWindow=void 0}restartAutoplay(){this.stopAutoplay();const count=this.slideElements().length,doc=this.visibilityDocument??this.ownerDocument,view=doc.defaultView;if(!this.isConnected||!view||!this.autoplay||this.reduceMotion||this.pointerInteracting||this.focusInteracting||this.dragPointerId!==void 0||doc.visibilityState!=="visible"||count<=this.pageSize(count))return;const interval=finiteDuration(this.autoplayInterval,3e3,1e3);this.timerWindow=view,this.timer=view.setInterval(()=>{this.loop||this.currentSlide<this.maxStartIndex()?this.changeTo(this.currentSlide+this.moveSize(),"smooth","autoplay"):this.stopAutoplay()},interval)}scrollPaddingStart(){const rect=this.scrollHintProbe?.getBoundingClientRect();if(!rect)return 0;const pixels=this.effectiveOrientation()==="vertical"?rect.height:rect.width;return Number.isFinite(pixels)?pixels:0}axisOffsetOf(slide,viewport){const viewportRect=viewport.getBoundingClientRect(),slideRect=slide.getBoundingClientRect(),padding=this.scrollPaddingStart();return this.effectiveOrientation()==="vertical"?slideRect.top-(viewportRect.top+padding):this.effectiveDirection==="rtl"?slideRect.right-(viewportRect.right-padding):slideRect.left-(viewportRect.left+padding)}scrollByAxis(viewport,distance,behavior){this.effectiveOrientation()==="vertical"?viewport.scrollBy({top:distance,behavior}):viewport.scrollBy({left:distance,behavior})}restingSlide(){const viewport=this.viewport,slides=this.slideElements();if(!viewport||slides.length===0)return;const candidates=slides.map((element,index)=>({element,index}));for(const clone of this.shadowRoot?.querySelectorAll("[data-carousel-clone]")??[]){const index=Number(clone.dataset.carouselIndex),cloneSide=clone.dataset.carouselClone;Number.isInteger(index)&&index>=0&&index<slides.length&&(cloneSide==="before"||cloneSide==="after")&&candidates.push({element:clone,index,cloneSide})}let nearest,nearestDistance=Number.POSITIVE_INFINITY;for(const candidate of candidates){const distance=Math.abs(this.axisOffsetOf(candidate.element,viewport));distance<nearestDistance&&(nearestDistance=distance,nearest=candidate)}return nearest}alignToActiveSlide(){const viewport=this.viewport,targetIndex=this.normalizedIndex(),realSlide=this.slideElements()[targetIndex];if(!viewport||!realSlide)return;const loopSide=this.loopSide,requestedBehavior=this.requestedBehavior;this.loopSide=void 0,this.requestedBehavior=void 0;const target=loopSide?this.cloneFor(loopSide,targetIndex)??realSlide:realSlide,offset=this.axisOffsetOf(target,viewport);if(Math.round(offset)===0){this.clearAlignment();return}this.alignIndex=targetIndex,this.alignTarget=target;const behavior=this.motionAwareScrollBehavior(requestedBehavior??"smooth",!0);this.scrollByAxis(viewport,offset,behavior)}motionAwareScrollBehavior(requested,instantBeforeFirstAlignment=!1){return this.reduceMotion||instantBeforeFirstAlignment&&!this.hasAlignedOnce?"instant":requested}cancelScrollSettle(){this.settleTimer!==void 0&&this.settleTimerWindow?.clearTimeout(this.settleTimer),this.settleTimer=void 0,this.settleTimerWindow=void 0}clearAlignment(){this.alignTarget=void 0,this.alignIndex=void 0,this.loopSide=void 0,this.requestedBehavior=void 0}takeOverViewport(){this.clearAlignment()}pointerTargetsInteractiveContent(event){const slides=new Set(this.slideElements());for(const target of event.composedPath()){if(!(target instanceof Element)||target===this||target===this.viewport||slides.has(target))continue;const name=target.localName;if(name==="a"||name==="button"||name==="input"||name==="label"||name==="select"||name==="textarea"||target.hasAttribute("contenteditable")||name.includes("-")&&target.getRootNode()!==this.shadowRoot)return!0;const role=target.getAttribute("role")?.trim().toLowerCase();if(role&&["button","checkbox","combobox","link","radio","slider","spinbutton","switch","textbox"].includes(role))return!0}return!1}finishDrag(pointerId,canceled){if(pointerId!==this.dragPointerId)return;const viewport=this.viewport,moved=this.dragMoved;if(this.dragPointerId=void 0,this.dragMoved=!1,viewport?.removeAttribute("data-dragging"),viewport?.hasPointerCapture(pointerId))try{viewport.releasePointerCapture(pointerId)}catch{}if(moved){this.suppressClick=!0,this.cancelClickSuppression();const view=this.ownerDocument.defaultView;view?(this.clickTimerWindow=view,this.clickTimer=view.setTimeout(()=>{this.suppressClick=!1,this.clickTimer=void 0,this.clickTimerWindow=void 0},0)):this.suppressClick=!1}if(canceled&&viewport){const active=this.slideElements()[this.normalizedIndex()];active&&this.scrollByAxis(viewport,this.axisOffsetOf(active,viewport),this.motionAwareScrollBehavior("smooth"))}else canceled||this.onViewportScroll();this.matches(":hover")||(this.pointerInteracting=!1),this.restartAutoplay()}cancelClickSuppression(){this.clickTimer!==void 0&&this.clickTimerWindow?.clearTimeout(this.clickTimer),this.clickTimer=void 0,this.clickTimerWindow=void 0}cancelDrag(realign){this.dragPointerId!==void 0&&this.finishDrag(this.dragPointerId,realign)}computedSlideBasis(perPage){return perPage===1?"100%":`calc((100% - (${perPage-1} * var(--slide-gap, var(--lr-space-m)))) / ${perPage})`}render(){const count=this.slideElements().length,current=this.normalizedIndex(count),pageTargets=this.pageTargets(count),exactCurrentPage=pageTargets.indexOf(current),currentPage=exactCurrentPage>=0?exactCurrentPage:pageTargets.reduce((nearest,target,pageIndex)=>Math.abs(target-current)<Math.abs(pageTargets[nearest]-current)?pageIndex:nearest,0),hasNavigation=this.navigation&&count>this.pageSize(count),hasPagination=this.pagination&&pageTargets.length>1,label=this.hostAccessibleLabel!==null?this.hostAccessibleLabel:this.accessibleLabel==null?this.localize("carouselLabel"):this.accessibleLabel,numberFormat=getNumberFormat(this.effectiveLocale),orientation=this.effectiveOrientation(),perPage=this.pageSize(count);return html`<section
+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,query}from"lit/decorators.js";import{acquireAnnouncementSink}from"../../../internal/announcer.js";import{isAccessibilitySubtreeExcluded,isAccessibilityVisible,isAccessibilityVisibilityHidden}from"../../../internal/accessibility-visibility.js";import{activeElementIn,deepActiveElementIn}from"../../../internal/active-element.js";import{composedAccessibilityText}from"../../../internal/announcement-text.js";import{renderInertPresentation}from"../../../internal/inert-presentation.js";import{LyraElement}from"../../../internal/lyra-element.js";import{finiteDuration,finiteInteger}from"../../../internal/numbers.js";import{composedContains}from"../../../internal/overlay-manager.js";import{getNumberFormat}from"../../../internal/intl-cache.js";import{tag}from"../../../internal/prefix.js";import{styles}from"./carousel.styles.js";import{LYRA_DEFAULT_carousel,LYRA_DEFAULT_carouselGoTo,LYRA_DEFAULT_carouselIndicators,LYRA_DEFAULT_carouselLabel,LYRA_DEFAULT_carouselSlide,LYRA_DEFAULT_carouselSlideAnnouncement,LYRA_DEFAULT_carouselSlideAnnouncementSeparator,LYRA_DEFAULT_carouselSlidePosition,LYRA_DEFAULT_next,LYRA_DEFAULT_previous}from"../../../internal/default-strings.generated.js";const LOOP_SNAPSHOT_UNSAFE_TAGS=new Set(["audio","canvas","embed","form","iframe","img","input","link","object","picture","script","select","source","style","textarea","track","video"]),CAROUSEL_MANAGED_SLIDE_ATTRIBUTES=new Set(["aria-hidden","aria-label","aria-roledescription","hidden","inert","role"]),SLIDE_SNAPSHOT_KEYS=["hidden","inert","role","label","roleDescription","ariaHidden"];class LyraCarousel extends LyraElement{static{this.defaultStrings={...super.defaultStrings,carousel:LYRA_DEFAULT_carousel,carouselGoTo:LYRA_DEFAULT_carouselGoTo,carouselIndicators:LYRA_DEFAULT_carouselIndicators,carouselLabel:LYRA_DEFAULT_carouselLabel,carouselSlide:LYRA_DEFAULT_carouselSlide,carouselSlideAnnouncement:LYRA_DEFAULT_carouselSlideAnnouncement,carouselSlideAnnouncementSeparator:LYRA_DEFAULT_carouselSlideAnnouncementSeparator,carouselSlidePosition:LYRA_DEFAULT_carouselSlidePosition,next:LYRA_DEFAULT_next,previous:LYRA_DEFAULT_previous}}static{this.styles=[LyraElement.styles,styles]}static get observedAttributes(){return[...new Set([...super.observedAttributes,"currentslide"])]}get currentSlide(){return this._currentSlide}set currentSlide(value){this.setCurrentSlideState(value)}get pagination(){return this._pagination}set pagination(value){this.setPaginationState(!!value)}get slides(){return this._slides}constructor(){super(),this._currentSlide=0,this._pagination=!1,this._slides=0,this.loop=!1,this.autoplay=!1,this.autoplayInterval=3e3,this.navigation=!1,this.orientation="horizontal",this.mouseDragging=!1,this.slidesPerPage=1,this.slidesPerMove=1,this.hostAccessibleLabel=null,this.reduceMotion=!1,this.snapshots=new Map,this.appliedSnapshots=new WeakMap,this.adoptingScrolledSlide=!1,this.hasAlignedOnce=!1,this.loopClonesDirty=!0,this.pointerInteracting=!1,this.focusInteracting=!1,this.dragStartCoordinate=0,this.dragStartScroll=0,this.dragMoved=!1,this.suppressClick=!1,this.announcementsArmed=!1,this.changeOrigin="manual",this.manualPending=!1,this.observerGeneration=0,this.onMotionPreferenceChange=event=>{this.reduceMotion=event.matches,this.restartAutoplay(),this.requestUpdate()},this.onVisibilityChange=()=>{this.restartAutoplay()},this.onSlotChange=()=>{this.handleSlidesChanged()},this.onViewportScroll=()=>{this.cancelScrollSettle();const view=this.ownerDocument.defaultView;view&&(this.settleTimerWindow=view,this.settleTimer=view.setTimeout(this.settleScrolledSlide,120))},this.onViewportScrollEnd=()=>{this.cancelScrollSettle(),this.settleScrolledSlide()},this.settleScrolledSlide=()=>{if(this.settleTimer=void 0,this.settleTimerWindow=void 0,!this.isConnected)return;const viewport=this.viewport;if(!viewport)return;if(this.alignTarget){if(Math.abs(this.axisOffsetOf(this.alignTarget,viewport))>2)return;const cloneSide=this.alignTarget.dataset.carouselClone;if(cloneSide==="before"||cloneSide==="after"){const realSlide=this.slideElements()[this.alignIndex??-1];if(realSlide){this.alignTarget=realSlide,this.scrollByAxis(viewport,this.axisOffsetOf(realSlide,viewport),"instant");return}}this.clearAlignment();return}const resting=this.restingSlide();if(!resting)return;const changed=resting.index!==this.currentSlide;!changed&&!resting.cloneSide||(this.adoptingScrolledSlide=!0,changed&&(this.currentSlide=resting.index,this.emit("lr-slide-change",{index:resting.index,slide:this.slideElements()[resting.index]})),this.updateComplete.then(()=>{if(resting.cloneSide&&this.isConnected&&this.viewport){const realSlide=this.slideElements()[resting.index];realSlide&&this.scrollByAxis(this.viewport,this.axisOffsetOf(realSlide,this.viewport),"instant")}this.adoptingScrolledSlide=!1}))},this.onViewportPointerEnter=()=>{this.pointerInteracting=!0,this.restartAutoplay()},this.onViewportPointerLeave=()=>{this.dragPointerId===void 0&&(this.pointerInteracting=!1,this.restartAutoplay())},this.onViewportFocusIn=event=>{this.focusInteracting=!0;const slides=new Set(this.slideElements()),focusedSlide=event.composedPath().find(candidate=>candidate.nodeType===1&&slides.has(candidate));focusedSlide&&(this.lastFocusedSlide=focusedSlide),this.restartAutoplay()},this.onViewportFocusOut=()=>{this.queueOwnerMicrotask(()=>{if(!this.isConnected)return;const active=deepActiveElementIn(this.ownerDocument);this.lastFocusedSlide&&!composedContains(this.lastFocusedSlide,active)&&(this.lastFocusedSlide.isConnected||active!==null&&active!==this.ownerDocument.body)&&(this.lastFocusedSlide=void 0),this.focusInteracting=this.matches(":focus-within"),this.restartAutoplay()})},this.onViewportPointerDown=event=>{if(!this.mouseDragging||event.pointerType!=="mouse"||!event.isPrimary||event.button!==0||this.dragPointerId!==void 0||this.targetsInteractiveContent(event))return;this.takeOverViewport();const viewport=this.viewport;if(viewport){this.dragPointerId=event.pointerId,this.dragStartCoordinate=this.effectiveOrientation()==="vertical"?event.clientY:event.clientX,this.dragStartScroll=this.effectiveOrientation()==="vertical"?viewport.scrollTop:viewport.scrollLeft,this.dragMoved=!1,viewport.setAttribute("data-dragging","");try{viewport.setPointerCapture(event.pointerId)}catch{}this.restartAutoplay()}},this.onViewportPointerMove=event=>{if(event.pointerId!==this.dragPointerId)return;const viewport=this.viewport;if(!viewport)return;const delta=(this.effectiveOrientation()==="vertical"?event.clientY:event.clientX)-this.dragStartCoordinate;Math.abs(delta)>2&&(this.dragMoved=!0),this.dragMoved&&(event.preventDefault(),this.effectiveOrientation()==="vertical"?viewport.scrollTo({top:this.dragStartScroll-delta,behavior:"instant"}):viewport.scrollTo({left:this.dragStartScroll-delta,behavior:"instant"}))},this.onViewportPointerUp=event=>{this.finishDrag(event.pointerId,!1)},this.onViewportPointerCancel=event=>{this.finishDrag(event.pointerId,!0)},this.onViewportLostPointerCapture=event=>{this.finishDrag(event.pointerId,!0)},this.onViewportClick=event=>{this.suppressClick&&(event.preventDefault(),event.stopImmediatePropagation())},this.onViewportKeyDown=event=>{if(this.targetsInteractiveContent(event,!0))return;const vertical=this.effectiveOrientation()==="vertical",rtl=this.effectiveDirection==="rtl",forwardKey=vertical?"ArrowDown":rtl?"ArrowLeft":"ArrowRight",backwardKey=vertical?"ArrowUp":rtl?"ArrowRight":"ArrowLeft";event.key===forwardKey?(event.preventDefault(),this.next()):event.key===backwardKey?(event.preventDefault(),this.previous()):event.key==="Home"?(event.preventDefault(),this.goToSlide(0)):event.key==="End"&&(event.preventDefault(),this.goToSlide(this.loop?this.slideElements().length-1:this.maxStartIndex()))},this.requestUpdate("currentSlide",void 0),this.requestUpdate("pagination",void 0)}attributeChangedCallback(name,oldValue,newValue){if(name==="currentslide"){oldValue!==newValue&&(this.currentSlide=finiteInteger(Number(newValue??0),0));return}super.attributeChangedCallback(name,oldValue,newValue),name==="current-slide"&&newValue===null&&oldValue!==newValue&&this.hasAttribute("currentslide")&&(this.currentSlide=finiteInteger(Number(this.getAttribute("currentslide")??0),0))}connectedCallback(){this.hasAttribute("current-slide")&&(this.currentSlide=finiteInteger(Number(this.getAttribute("current-slide")??0),0)),super.connectedCallback();const view=this.ownerDocument.defaultView;this.announcementSink??=acquireAnnouncementSink("polite",{document:this.ownerDocument,source:this}),this.announcementsArmed=!1,this.manualPending=!1,this.mediaQuery=typeof view?.matchMedia=="function"?view.matchMedia("(prefers-reduced-motion: reduce)"):void 0,this.reduceMotion=this.mediaQuery?.matches??!1,this.mediaQuery?.addEventListener("change",this.onMotionPreferenceChange),this.visibilityDocument=this.ownerDocument,this.visibilityDocument.addEventListener("visibilitychange",this.onVisibilityChange),this.armSlideContentObserver(),this.restartAutoplay(),this.hasUpdated&&this.queueOwnerMicrotask(()=>{this.isConnected&&this.handleSlidesChanged()})}disconnectedCallback(){this.announcementSink?.release(),this.announcementSink=void 0,this.announcementsArmed=!1,this.manualPending=!1,this.cancelDrag(!1),this.stopAutoplay(),this.cancelScrollSettle(),this.cancelClickSuppression(),this.suppressClick=!1,this.pointerInteracting=!1,this.focusInteracting=!1,this.hasAlignedOnce=!1,this.clearAlignment(),this.mediaQuery?.removeEventListener("change",this.onMotionPreferenceChange),this.mediaQuery=void 0,this.visibilityDocument?.removeEventListener("visibilitychange",this.onVisibilityChange),this.visibilityDocument=void 0,this.resetSlideContentObserver(),this.restoreSlides(),this.lastFocusedSlide=void 0,super.disconnectedCallback()}armSlideContentObserver(){const ownerDocument=this.ownerDocument,MutationObserverCtor=ownerDocument.defaultView?.MutationObserver;if(!MutationObserverCtor||!this.isConnected)return;this.resetSlideContentObserver();const generation=this.observerGeneration,observer=new MutationObserverCtor(records=>{this.observer!==observer||this.observerDocument!==ownerDocument||this.observerGeneration!==generation||!this.isConnected||this.ownerDocument!==ownerDocument||!records.some(record=>{if(record.type!=="attributes")return!0;if(record.target===this)return!1;if(!CAROUSEL_MANAGED_SLIDE_ATTRIBUTES.has(record.attributeName??""))return!0;const slide=record.target,snapshot=this.snapshots.get(slide);return snapshot?this.adoptChanges(slide,snapshot):!1})||(this.loop&&(this.loopClonesDirty=!0),this.syncSlides(),this.requestUpdate())});this.observer=observer,this.observerDocument=ownerDocument,observer.observe(this,{attributes:!0,characterData:!0,childList:!0,subtree:!0})}resetSlideContentObserver(){this.observerGeneration+=1,this.observer?.disconnect(),this.observer=void 0,this.observerDocument=void 0}willUpdate(changed){if(super.willUpdate(changed),(changed.has("currentSlide")||changed.has("slidesPerPage"))&&this.slideSlot){const normalized=this.normalizedIndex();this.currentSlide!==normalized&&(this.currentSlide=normalized)}}updated(changed){super.updated(changed);const shouldAnnounceActivePage=this.announcementsArmed&&(this.manualPending||changed.has("slidesPerPage"));this.syncSlides(),(this.loopClonesDirty||changed.has("loop")||changed.has("slidesPerPage")||changed.has("slidesPerMove"))&&(this.syncLoopClones(),this.loopClonesDirty=!1),(changed.has("autoplay")||changed.has("autoplayInterval")||changed.has("loop")||changed.has("slidesPerPage"))&&this.restartAutoplay(),!this.adoptingScrolledSlide&&(changed.has("currentSlide")||changed.has("slidesPerPage")||changed.has("orientation")||!this.hasAlignedOnce)&&this.alignToActiveSlide(),this.hasAlignedOnce=!0,shouldAnnounceActivePage&&this.announceActivePage(),this.manualPending=!1,this.announcementsArmed=!0}setCurrentSlideState(value){const old=this._currentSlide,next=finiteInteger(value,0);old!==next&&(this._currentSlide=next,this.changeOrigin==="manual"&&(this.manualPending=!0),this.requestUpdate("currentSlide",old))}setPaginationState(value){const old=this._pagination;old!==value&&(this._pagination=value,this.requestUpdate("pagination",old))}queueOwnerMicrotask(callback){const view=this.ownerDocument.defaultView;view?view.queueMicrotask(callback):queueMicrotask(callback)}effectiveOrientation(){return this.orientation==="vertical"?"vertical":"horizontal"}slideElements(){return(this.slideSlot?.assignedElements({flatten:!0})??[]).filter(element=>element.nodeType===1&&element.namespaceURI==="http://www.w3.org/1999/xhtml")}pageSize(count=this.slideElements().length){return finiteInteger(this.slidesPerPage,1,1,Math.max(1,count))}moveSize(count=this.slideElements().length){return finiteInteger(this.slidesPerMove,1,1,this.pageSize(count))}maxStartIndex(count=this.slideElements().length){return Math.max(0,count-this.pageSize(count))}normalizedIndex(count=this.slideElements().length){if(count===0)return 0;const max=this.loop?count-1:this.maxStartIndex(count);return finiteInteger(this.currentSlide,0,0,max)}pageTargets(count=this.slideElements().length){if(count===0)return[];if(this.loop)return Array.from({length:count},(_unused,index)=>index);const max=this.maxStartIndex(count),move=this.moveSize(count),targets=[0];for(let target=move;target<max;target+=move)targets.push(target);return max>0&&targets.at(-1)!==max&&targets.push(max),targets}visibleIndices(count,current){const visible=new Set,perPage=this.pageSize(count);for(let offset=0;offset<perPage;offset+=1){const index=this.loop?(current+offset)%count:current+offset;index>=0&&index<count&&visible.add(index)}return visible}announceActivePage(){if(!isAccessibilityVisible(this))return;const slides=this.slideElements();if(slides.length===0)return;const current=this.normalizedIndex(slides.length),visible=this.visibleIndices(slides.length,current),format=getNumberFormat(this.effectiveLocale),messages=slides.flatMap((slide,index)=>{if(!visible.has(index))return[];if(isAccessibilitySubtreeExcluded(slide))return[];const slideTextVisible=!isAccessibilityVisibilityHidden(slide),authoredLabel=slideTextVisible?this.snapshots.get(slide)?.label?.trim():"";if(authoredLabel)return[authoredLabel];const position=this.localize("carouselSlidePosition",void 0,{index:format.format(index+1),total:format.format(slides.length)}),content=Array.from(slide.childNodes).map(node=>composedAccessibilityText(node,slideTextVisible)).join(" ").replace(/\s+/g," ").trim();return!slideTextVisible&&!content?[]:[content&&content!==position?this.localize("carouselSlideAnnouncement",void 0,{position,content}):position]});this.announcementSink?.announce(messages.join(this.localize("carouselSlideAnnouncementSeparator")))}restoreAttribute(slide,name,value){value===null?slide.removeAttribute(name):slide.setAttribute(name,value)}snapshotSlide(slide){return{hidden:slide.hidden,inert:slide.inert,role:slide.getAttribute("role"),label:slide.getAttribute("aria-label"),roleDescription:slide.getAttribute("aria-roledescription"),ariaHidden:slide.getAttribute("aria-hidden")}}adoptChanges(slide,snapshot){const applied=this.appliedSnapshots.get(slide);if(!applied)return!1;const current=this.snapshotSlide(slide);let changed=!1;for(const key of SLIDE_SNAPSHOT_KEYS)current[key]!==applied[key]&&(snapshot[key]=current[key],changed=!0);return changed}restoreSlide(slide,snapshot){slide.hidden=snapshot.hidden,slide.inert=snapshot.inert,this.restoreAttribute(slide,"role",snapshot.role),this.restoreAttribute(slide,"aria-label",snapshot.label),this.restoreAttribute(slide,"aria-roledescription",snapshot.roleDescription),this.restoreAttribute(slide,"aria-hidden",snapshot.ariaHidden)}restoreSlides(){for(const[slide,snapshot]of this.snapshots)this.adoptChanges(slide,snapshot),this.restoreSlide(slide,snapshot);this.snapshots.clear()}syncSlides(){const slides=this.slideElements(),assigned=new Set(slides);for(const[slide,snapshot]of this.snapshots)this.adoptChanges(slide,snapshot)&&(this.loopClonesDirty=!0),assigned.has(slide)||(this.restoreSlide(slide,snapshot),this.snapshots.delete(slide));const current=this.normalizedIndex(slides.length);this.currentSlide!==current&&(this.currentSlide=current);const visible=this.visibleIndices(slides.length,current);this.repairFocusBeforeSlideExclusion(slides,visible);const format=getNumberFormat(this.effectiveLocale);slides.forEach((slide,slideIndex)=>{const existing=this.snapshots.get(slide),snapshot=existing??this.snapshotSlide(slide);existing||this.snapshots.set(slide,snapshot),slide.localName===tag("carousel-item")?(this.restoreAttribute(slide,"role",snapshot.role??"group"),this.restoreAttribute(slide,"aria-roledescription",snapshot.roleDescription??this.localize("carouselSlide")),this.restoreAttribute(slide,"aria-label",snapshot.label??this.localize("carouselSlidePosition",void 0,{index:format.format(slideIndex+1),total:format.format(slides.length)}))):(this.restoreAttribute(slide,"role",snapshot.role),this.restoreAttribute(slide,"aria-roledescription",snapshot.roleDescription),this.restoreAttribute(slide,"aria-label",snapshot.label)),slide.hidden=snapshot.hidden,visible.has(slideIndex)?(slide.inert=snapshot.inert,this.restoreAttribute(slide,"aria-hidden",snapshot.ariaHidden)):(slide.inert=!0,slide.setAttribute("aria-hidden","true")),this.appliedSnapshots.set(slide,this.snapshotSlide(slide))})}repairFocusBeforeSlideExclusion(slides,visible){const active=deepActiveElementIn(this.ownerDocument),focusedIndex=slides.findIndex(slide=>composedContains(slide,active)),focusedSlideWillBeExcluded=focusedIndex>=0&&!visible.has(focusedIndex),focusedSlideWasRemoved=focusedIndex<0&&this.lastFocusedSlide!==void 0&&!this.lastFocusedSlide.isConnected&&(active===null||active===this.ownerDocument.body);!focusedSlideWillBeExcluded&&!focusedSlideWasRemoved||(this.viewport?.focus(),this.lastFocusedSlide=void 0)}handleSlidesChanged(){const count=this.slideElements().length,active=activeElementIn(this.shadowRoot);if(active?.matches('[part~="pagination-item"]')){const children=active.parentElement.children,pages=this.pageTargets(count).length;(pages<2||[...children].indexOf(active)>=pages)&&(pages>1?children[pages-1]:this.viewport)?.focus()}else active?.matches('[part~="navigation-button"]')&&(!this.navigation||count<=this.pageSize(count))&&this.viewport?.focus();if(this._slides!==count){const previous=this._slides;this._slides=count,this.requestUpdate("slides",previous)}this.loopClonesDirty=!0,this.syncSlides(),this.syncLoopClones(),this.loopClonesDirty=!1,this.restartAutoplay(),this.requestUpdate()}prepareClone(original,index,side){if([original,...Array.from(original.querySelectorAll("*"))].some(element=>element.namespaceURI!=="http://www.w3.org/1999/xhtml"||element.localName.includes("-")||LOOP_SNAPSHOT_UNSAFE_TAGS.has(element.localName)))return;const clone=original.cloneNode(!0),descendants=[clone,...Array.from(clone.querySelectorAll("*"))];for(const descendant of descendants)descendant.removeAttribute("id"),descendant.removeAttribute("name"),descendant.removeAttribute("form"),descendant.removeAttribute("for"),descendant.removeAttribute("aria-controls"),descendant.removeAttribute("aria-describedby"),descendant.removeAttribute("aria-labelledby");return clone.removeAttribute("slot"),clone.dataset.carouselClone=side,clone.dataset.carouselIndex=String(index),clone.inert=!0,clone.setAttribute("aria-hidden","true"),clone}syncLoopClones(){const before=this.beforeClones,after=this.afterClones;if(!before||!after)return;before.replaceChildren(),after.replaceChildren();const slides=this.slideElements();if(!this.loop||slides.length<2)return;const cloneCount=Math.min(slides.length,Math.max(this.pageSize(slides.length),this.moveSize(slides.length))),beforeStart=slides.length-cloneCount;for(let index=beforeStart;index<slides.length;index+=1){const clone=this.prepareClone(slides[index],index,"before");clone&&before.append(clone)}for(let index=0;index<cloneCount;index+=1){const clone=this.prepareClone(slides[index],index,"after");clone&&after.append(clone)}}cloneFor(side,index){return(side==="before"?this.beforeClones:this.afterClones)?.querySelector(`[data-carousel-index="${index}"]`)??void 0}changeTo(index,behavior="smooth",origin="manual"){const slides=this.slideElements(),count=slides.length;if(count===0||!Number.isFinite(index))return;const requested=Math.trunc(index);let next,loopSide;if(this.loop?(next=(requested%count+count)%count,requested<0?loopSide="before":requested>=count&&(loopSide="after")):next=Math.min(this.maxStartIndex(count),Math.max(0,requested)),next===this.currentSlide)return;this.requestedBehavior=behavior,this.loopSide=loopSide;const previousOrigin=this.changeOrigin;this.changeOrigin=origin;try{this.currentSlide=next}finally{this.changeOrigin=previousOrigin}this.emit("lr-slide-change",{index:next,slide:slides[next]})}next(behavior="smooth"){this.changeTo(this.currentSlide+this.moveSize(),behavior)}previous(behavior="smooth"){this.changeTo(this.currentSlide-this.moveSize(),behavior)}goToSlide(index,behavior="smooth"){this.changeTo(index,behavior)}addSlide(slide){slide?.nodeType!==1||slide?.namespaceURI!=="http://www.w3.org/1999/xhtml"||(this.append(slide),this.queueOwnerMicrotask(()=>{this.isConnected&&this.handleSlidesChanged()}))}removeSlide(index){if(!Number.isFinite(index))return;const target=this.slideElements()[Math.trunc(index)];target&&(target.remove(),this.queueOwnerMicrotask(()=>{this.isConnected&&this.handleSlidesChanged()}))}stopAutoplay(){this.timer!==void 0&&this.timerWindow?.clearInterval(this.timer),this.timer=void 0,this.timerWindow=void 0}restartAutoplay(){this.stopAutoplay();const count=this.slideElements().length,doc=this.visibilityDocument??this.ownerDocument,view=doc.defaultView;if(!this.isConnected||!view||!this.autoplay||this.reduceMotion||this.pointerInteracting||this.focusInteracting||this.dragPointerId!==void 0||doc.visibilityState!=="visible"||count<=this.pageSize(count))return;const interval=finiteDuration(this.autoplayInterval,3e3,1e3);this.timerWindow=view,this.timer=view.setInterval(()=>{this.loop||this.currentSlide<this.maxStartIndex()?this.changeTo(this.currentSlide+this.moveSize(),"smooth","autoplay"):this.stopAutoplay()},interval)}scrollPaddingStart(){const rect=this.scrollHintProbe?.getBoundingClientRect();if(!rect)return 0;const pixels=this.effectiveOrientation()==="vertical"?rect.height:rect.width;return Number.isFinite(pixels)?pixels:0}axisOffsetOf(slide,viewport){const viewportRect=viewport.getBoundingClientRect(),slideRect=slide.getBoundingClientRect(),padding=this.scrollPaddingStart();return this.effectiveOrientation()==="vertical"?slideRect.top-(viewportRect.top+padding):this.effectiveDirection==="rtl"?slideRect.right-(viewportRect.right-padding):slideRect.left-(viewportRect.left+padding)}scrollByAxis(viewport,distance,behavior){this.effectiveOrientation()==="vertical"?viewport.scrollBy({top:distance,behavior}):viewport.scrollBy({left:distance,behavior})}restingSlide(){const viewport=this.viewport,slides=this.slideElements();if(!viewport||slides.length===0)return;const candidates=slides.map((element,index)=>({element,index}));for(const clone of this.shadowRoot?.querySelectorAll("[data-carousel-clone]")??[]){const index=Number(clone.dataset.carouselIndex),cloneSide=clone.dataset.carouselClone;Number.isInteger(index)&&index>=0&&index<slides.length&&(cloneSide==="before"||cloneSide==="after")&&candidates.push({element:clone,index,cloneSide})}let nearest,nearestDistance=Number.POSITIVE_INFINITY;for(const candidate of candidates){const distance=Math.abs(this.axisOffsetOf(candidate.element,viewport));distance<nearestDistance&&(nearestDistance=distance,nearest=candidate)}return nearest}alignToActiveSlide(){const viewport=this.viewport,targetIndex=this.normalizedIndex(),realSlide=this.slideElements()[targetIndex];if(!viewport||!realSlide)return;const loopSide=this.loopSide,requestedBehavior=this.requestedBehavior;this.loopSide=void 0,this.requestedBehavior=void 0;const target=loopSide?this.cloneFor(loopSide,targetIndex)??realSlide:realSlide,offset=this.axisOffsetOf(target,viewport);if(Math.round(offset)===0){this.clearAlignment();return}this.alignIndex=targetIndex,this.alignTarget=target;const behavior=this.motionAwareScrollBehavior(requestedBehavior??"smooth",!0);this.scrollByAxis(viewport,offset,behavior)}motionAwareScrollBehavior(requested,instantBeforeFirstAlignment=!1){return this.reduceMotion||instantBeforeFirstAlignment&&!this.hasAlignedOnce?"instant":requested}cancelScrollSettle(){this.settleTimer!==void 0&&this.settleTimerWindow?.clearTimeout(this.settleTimer),this.settleTimer=void 0,this.settleTimerWindow=void 0}clearAlignment(){this.alignTarget=void 0,this.alignIndex=void 0,this.loopSide=void 0,this.requestedBehavior=void 0}takeOverViewport(){this.clearAlignment()}targetsInteractiveContent(event,includeSlideEditors=!1){const slides=new Set(this.slideElements());for(const target of event.composedPath()){if(!(target instanceof Element))continue;const slideRoot=slides.has(target);if(target===this||target===this.viewport||slideRoot&&!includeSlideEditors)continue;const name=target.localName;if(name==="a"||name==="button"||name==="input"||name==="label"||name==="select"||name==="textarea"||target.hasAttribute("contenteditable")||!slideRoot&&name.includes("-")&&target.getRootNode()!==this.shadowRoot)return!0;const role=target.getAttribute("role")?.trim().toLowerCase();if(role&&["button","checkbox","combobox","link","radio","slider","spinbutton","switch","textbox"].includes(role))return!0}return!1}finishDrag(pointerId,canceled){if(pointerId!==this.dragPointerId)return;const viewport=this.viewport,moved=this.dragMoved;if(this.dragPointerId=void 0,this.dragMoved=!1,viewport?.removeAttribute("data-dragging"),viewport?.hasPointerCapture(pointerId))try{viewport.releasePointerCapture(pointerId)}catch{}if(moved){this.suppressClick=!0,this.cancelClickSuppression();const view=this.ownerDocument.defaultView;view?(this.clickTimerWindow=view,this.clickTimer=view.setTimeout(()=>{this.suppressClick=!1,this.clickTimer=void 0,this.clickTimerWindow=void 0},0)):this.suppressClick=!1}if(canceled&&viewport){const active=this.slideElements()[this.normalizedIndex()];active&&this.scrollByAxis(viewport,this.axisOffsetOf(active,viewport),this.motionAwareScrollBehavior("smooth"))}else canceled||this.onViewportScroll();this.matches(":hover")||(this.pointerInteracting=!1),this.restartAutoplay()}cancelClickSuppression(){this.clickTimer!==void 0&&this.clickTimerWindow?.clearTimeout(this.clickTimer),this.clickTimer=void 0,this.clickTimerWindow=void 0}cancelDrag(realign){this.dragPointerId!==void 0&&this.finishDrag(this.dragPointerId,realign)}computedSlideBasis(perPage){return perPage===1?"100%":`calc((100% - (${perPage-1} * var(--slide-gap, var(--lr-space-m)))) / ${perPage})`}render(){const count=this.slideElements().length,current=this.normalizedIndex(count),pageTargets=this.pageTargets(count),exactCurrentPage=pageTargets.indexOf(current),currentPage=exactCurrentPage>=0?exactCurrentPage:pageTargets.reduce((nearest,target,pageIndex)=>Math.abs(target-current)<Math.abs(pageTargets[nearest]-current)?pageIndex:nearest,0),hasNavigation=this.navigation&&count>this.pageSize(count),hasPagination=this.pagination&&pageTargets.length>1,label=this.hostAccessibleLabel!==null?this.hostAccessibleLabel:this.accessibleLabel==null?this.localize("carouselLabel"):this.accessibleLabel,numberFormat=getNumberFormat(this.effectiveLocale),orientation=this.effectiveOrientation(),perPage=this.pageSize(count);return html`<section
       part="base carousel"
       role="region"
       aria-roledescription=${this.localize("carousel")}

package/dist/components/layout/command-palette/command-palette.class.d.ts

@@ -76,10 +76,10 @@ hotkey:string;
 accessibleLabel?:string;private queryText;private activeIndex;private listScrollTop;private listViewportHeight;private rowPitch;private groupPitch;private listId;private overlay?;private activeCommandId?;private listResizeObserver?;private observedList?;private observedRow?;private observedGroup?;private rowPitchFrame?;private listScrollFrame?;
 /** Window that owns listeners, observers, and animation frames for the current connection. */
 private runtimeWindow?;
-/** The `commands` array `haystacks` was built from -- reference-keyed memo, since `commands`
+/** The canonical command view `haystacks` was built from -- reference-keyed memo, since `commands`
 *  only ever changes by reassignment (it's `attribute: false`; in-place mutation wouldn't
 *  trigger a re-render either). */
-private haystacksFor?;private haystacksLocale;private haystacks;private filteredForCommands?;private filteredForQuery;private filteredForLocale;private filteredRows;private normalizedForCommands?;private normalizedRows;private normalizedCommandIds;private resultModelFor?;private resultModelRowPitch?;private resultModelGroupPitch?;private resultModelCache?;private openRequestTarget?;
+private haystacksFor?;private haystacksLocale;private haystacks;private filteredForCommands?;private filteredForQuery;private filteredForLocale;private filteredRows;private normalizedForCommands?;private normalizedRows;private resultModelFor?;private resultModelRowPitch?;private resultModelGroupPitch?;private resultModelCache?;private openRequestTarget?;
 /** Canonical command collection consumed by search, focus, rendering, and activation. Keeping
 *  the first valid occurrence makes duplicate handling deterministic while retaining caller
 *  object identity in `lr-select` and `onSelect`. */