@aceshooting/lyra-ui 26.0.0 → 28.0.0

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

@@ -1,4 +1,4 @@
-import{__decorate}from"tslib";import{setNativeRangeText,nativeAutocorrectAttribute}from"../../../internal/native-text-control.js";import{installFormControlLabelSupport}from"../../../internal/form-control-labels.js";import{FormControlController,reflectFormName}from"../../../internal/form-control-controller.js";import{html,nothing}from"lit";import{property,query,state}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{activeElementIn}from"../../../internal/active-element.js";import{acquireResolvedAriaRelationship}from"../../../internal/aria-controls.js";import{captureComposedFocusRepair,applyComposedFocusRepair}from"../../../internal/focus-navigation.js";import{VALIDITY_ANCHOR}from"../../../internal/anchored-validity.js";import{syncValidityStates}from"../../../internal/custom-states.js";import{SlotPresenceController}from"../../../internal/slot-presence-controller.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{createStringArrayFormDataState,getFormOwner,isBarredFromValidation,readStringArrayFormDataState,setFormOwner}from"../../../internal/form-associated.js";import{LYRA_DEFAULT_fieldRequired,LYRA_DEFAULT_removeWithContext,LYRA_DEFAULT_tokenInputEditWithContext,LYRA_DEFAULT_tokenInputRequired}from"../../../internal/default-strings.generated.js";installFormControlLabelSupport();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},readonly:{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??"",reflectFormName(this,this._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._fieldsetDisabled=this.validityController?.fieldsetDisabled(this._fieldsetDisabled)??this._fieldsetDisabled,this.syncValidity(),this.requestUpdate("disabled",old)}get readonly(){return this._readonly}set readonly(next){const old=this._readonly,nextValue=!!next;!old&&nextValue&&this.discardTransientState(!0),this._readonly=nextValue,this.toggleAttribute("readonly",this._readonly),this.syncValidity(),this.requestUpdate("readonly",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.slotPresence=new SlotPresenceController(this),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._readonly=!1,this.markInteracted=()=>{this.touched||(this.touched=!0,this.syncValidity())},this.onEditInput=event=>{event.stopPropagation(),!(this.liveDisabled||this.readonly)&&(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.readonly)&&(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.validityController=new FormControlController(this,{invalid:init=>this.emit("lr-invalid",null,init),interacted:this.markInteracted,customError:()=>this.validityController.customValidityMessage}),this.internals=this.validityController.formInternals}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){if(this.validityController?.reflectingDisabled)return;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.validityController.checkValidity()}reportValidity(){return this.validityController.syncConstraints(),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&&(setNativeRangeText(input,replacement,start,end,selectMode),this.draft=input.value)}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){const previousValue=Object.freeze([...this.value]);this.value=next,this.syncValidity();const detail=()=>Object.freeze({value:Object.freeze([...this.value]),previousValue});dispatchNativeInputEvent(this),this.emit("lr-input",detail()),dispatchNativeEvent(this,"change"),this.emit("lr-change",detail())}addDraft(){if(this.liveDisabled||this.readonly)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}const addDetail=()=>Object.freeze({value:added[added.length-1],values:Object.freeze([...added])});this.emit("lr-token-add-request",addDetail(),{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||this.readonly)return;const removed=this.value[index];removed===void 0||this.emit("lr-token-remove-request",{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.readonly||!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.readonly){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-request",{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
+import{__decorate}from"tslib";import{setNativeRangeText,nativeAutocorrectAttribute}from"../../../internal/native-text-control.js";import{installFormControlLabelSupport}from"../../../internal/form-control-labels.js";import{FormControlController,reflectFormName}from"../../../internal/form-control-controller.js";import{html,nothing}from"lit";import{property,query,state}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{LyraFormControlElement}from"../../../internal/form-control-element.js";import{shadowFocusTarget}from"../../../internal/active-element.js";import{acquireResolvedAriaRelationship}from"../../../internal/aria-controls.js";import{captureComposedFocusRepair,applyComposedFocusRepair}from"../../../internal/focus-navigation.js";import{VALIDITY_ANCHOR}from"../../../internal/anchored-validity.js";import{syncValidityStates}from"../../../internal/custom-states.js";import{SlotPresenceController}from"../../../internal/slot-presence-controller.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{createStringArrayFormDataState,getFormOwner,isBarredFromValidation,readStringArrayFormDataState,setFormOwner}from"../../../internal/form-associated.js";import{LYRA_DEFAULT_tokenInputEditWithContext,LYRA_DEFAULT_tokenInputRequired}from"../../../internal/default-strings/forms.generated.js";import{LYRA_DEFAULT_fieldRequired,LYRA_DEFAULT_removeWithContext}from"../../../internal/default-strings/shared.generated.js";installFormControlLabelSupport();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 LyraFormControlElement{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},readonly:{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??"",reflectFormName(this,this._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._fieldsetDisabled=this.validityController?.fieldsetDisabled(this._fieldsetDisabled)??this._fieldsetDisabled,this.syncValidity(),this.requestUpdate("disabled",old)}get readonly(){return this._readonly}set readonly(next){const old=this._readonly,nextValue=!!next;!old&&nextValue&&this.discardTransientState(!0),this._readonly=nextValue,this.toggleAttribute("readonly",this._readonly),this.syncValidity(),this.requestUpdate("readonly",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.slotPresence=new SlotPresenceController(this),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._readonly=!1,this.markInteracted=()=>{this.touched||(this.touched=!0,this.syncValidity())},this.onEditInput=event=>{event.stopPropagation(),!(this.liveDisabled||this.readonly)&&(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.readonly)&&(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.validityController=new FormControlController(this,{invalid:init=>this.emit("lr-invalid",null,init),interacted:this.markInteracted,customError:()=>this.validityController.customValidityMessage}),this.internals=this.validityController.formInternals}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)}get effectiveDisabled(){return this.disabled||this._fieldsetDisabled}formDisabledCallback(disabled){if(this.validityController?.reflectingDisabled)return;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.validityController.checkValidity()}reportValidity(){return this.validityController.syncConstraints(),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=shadowFocusTarget(this);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&&(setNativeRangeText(input,replacement,start,end,selectMode),this.draft=input.value)}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){const previousValue=Object.freeze([...this.value]);this.value=next,this.syncValidity();const detail=()=>Object.freeze({value:Object.freeze([...this.value]),previousValue});dispatchNativeInputEvent(this),this.emit("lr-input",detail()),dispatchNativeEvent(this,"change"),this.emit("lr-change",detail())}addDraft(){if(this.liveDisabled||this.readonly)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}const addDetail=()=>Object.freeze({value:added[added.length-1],values:Object.freeze([...added])});this.emit("lr-token-add-request",addDetail(),{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=shadowFocusTarget(this);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=shadowFocusTarget(this),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||this.readonly)return;const removed=this.value[index];removed===void 0||this.emit("lr-token-remove-request",{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.readonly||!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.readonly){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-request",{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})}

package/dist/components/forms/unit-picker/unit-picker.class.js

@@ -1 +1 @@
-import{__decorate}from"tslib";import{property}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{normalizeSelectionValue,snapshotSelectionCatalog}from"../../../internal/selection-catalog.js";import{UNIT_CODES,resolveUnitNames}from"../../../units.js";import{LyraCatalogPickerBase}from"../catalog-picker-base.js";import{styles}from"./unit-picker.styles.js";import{LYRA_DEFAULT_fieldRequired,LYRA_DEFAULT_notInCatalog,LYRA_DEFAULT_select,LYRA_DEFAULT_unitPickerLabel}from"../../../internal/default-strings.generated.js";const defaultEntries=Object.freeze(UNIT_CODES.map(code=>Object.freeze({code})));class LyraUnitPicker extends LyraCatalogPickerBase{static{this.defaultStrings={...super.defaultStrings,fieldRequired:LYRA_DEFAULT_fieldRequired,notInCatalog:LYRA_DEFAULT_notInCatalog,select:LYRA_DEFAULT_select,unitPickerLabel:LYRA_DEFAULT_unitPickerLabel}}static{this.styles=[LyraElement.styles,styles]}get units(){return this._units}set units(value){const previous=this._units;this._units=snapshotSelectionCatalog(value,normalizeSelectionValue),this.updateValidity(),this.requestUpdate("units",previous)}get entries(){return this._units??defaultEntries}get pickerLabel(){return this.localize("unitPickerLabel")}resolveRows(){return resolveUnitNames(this.entries,this.effectiveLocale)}}__decorate([property({attribute:!1})],LyraUnitPicker.prototype,"units",null);export{LyraUnitPicker};
+import{__decorate}from"tslib";import{property}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{normalizeSelectionValue,snapshotSelectionCatalog}from"../../../internal/selection-catalog.js";import{UNIT_CODES,resolveUnitNames}from"../../../units.js";import{LyraCatalogPickerBase}from"../catalog-picker-base.js";import{styles}from"./unit-picker.styles.js";import{LYRA_DEFAULT_unitPickerLabel}from"../../../internal/default-strings/forms.generated.js";import{LYRA_DEFAULT_fieldRequired,LYRA_DEFAULT_notInCatalog,LYRA_DEFAULT_select}from"../../../internal/default-strings/shared.generated.js";const defaultEntries=Object.freeze(UNIT_CODES.map(code=>Object.freeze({code})));class LyraUnitPicker extends LyraCatalogPickerBase{static{this.defaultStrings={...super.defaultStrings,fieldRequired:LYRA_DEFAULT_fieldRequired,notInCatalog:LYRA_DEFAULT_notInCatalog,select:LYRA_DEFAULT_select,unitPickerLabel:LYRA_DEFAULT_unitPickerLabel}}static{this.styles=[LyraElement.styles,styles]}get units(){return this._units}set units(value){const previous=this._units;this._units=snapshotSelectionCatalog(value,normalizeSelectionValue),this.updateValidity(),this.requestUpdate("units",previous)}get entries(){return this._units??defaultEntries}get pickerLabel(){return this.localize("unitPickerLabel")}resolveRows(){return resolveUnitNames(this.entries,this.effectiveLocale)}}__decorate([property({attribute:!1})],LyraUnitPicker.prototype,"units",null);export{LyraUnitPicker};

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

@@ -1,4 +1,4 @@
-import{__decorate}from"tslib";import{html,nothing}from"lit";import{property,query,state}from"lit/decorators.js";import{activateNonmodalOverlay,composedContains,deepActiveElement}from"../../../internal/nonmodal-overlay-manager.js";import{activeElementIn}from"../../../internal/active-element.js";import{isKeyboardFocusEvent}from"../../../internal/focus-modality.js";import{hostAriaLabel,nextId}from"../../../internal/a11y.js";import{applyComposedFocusRepair,captureComposedFocusRepair,isComposedFocusAvailable,repairComposedFocus}from"../../../internal/focus-navigation.js";import{chevronIcon}from"../../../internal/icons.js";import{collectInitialSlotAssignment}from"../../../internal/initial-slot-collection.js";import{resolveGuardedRel}from"../../../internal/link-rel.js";import{LyraElement}from"../../../internal/lyra-element.js";import{AccessibleTextController}from"../../../internal/accessible-text-controller.js";import{renderInertPresentation}from"../../../internal/inert-presentation.js";import{tag}from"../../../internal/prefix.js";import{requestThenCommit}from"../../../internal/request-commit.js";import{safeLinkHref}from"../../../internal/safe-url.js";import{deferredPlace as place,syncTopLayerRelease,topLayerPlacement}from"../../../internal/anchored-overlay-runtime.js";import{resolveEffectivePositioningStrategy}from"../../../internal/positioning-strategy.js";import{rtlAwarePlacement}from"../../../internal/rtl.js";import{markVetoGuardWrite,VetoWriteGuard}from"../../../internal/veto-write-guard.js";import{styles}from"./app-rail-item.styles.js";import{LYRA_DEFAULT_appRailItemCollapse,LYRA_DEFAULT_appRailItemExpand}from"../../../internal/default-strings.generated.js";class LyraAppRailItem extends LyraElement{constructor(){super(...arguments),this.href="",this.target="",this.disabled=!1,this.current=!1,this.tooltip=!1,this.topLayer=!1,this.railTopLayer=!1,this._expanded=!1,this.toggleGuard=new VetoWriteGuard,this.showTooltip=!1,this.hasEndSlot=!1,this.hasMetaSlot=!1,this.labelTextObserver=new AccessibleTextController(this,[],()=>this.requestUpdate(),[],!1),this.recoverFocusAfterIconOnly=!1,this.childrenId=nextId("app-rail-item-children"),this.onToggleClick=event=>{event.stopPropagation();const next=!this._expanded;requestThenCommit({requestDetail:{expanded:next},emitRequest:(detail,init)=>this.emit("lr-toggle-request",detail,init),guard:this.toggleGuard,commit:()=>{this.expanded=next,this.emit("lr-toggle",{expanded:next})}})},this.onFocusShow=event=>{if(this.tooltip&&this.hasAttribute("icon-only")&&(event.type!=="focus"||isKeyboardFocusEvent(event))&&(this.showTooltip=!0),event.type!=="focus")return;const related=event.relatedTarget;related&&related.nodeType===1&&isComposedFocusAvailable(related)&&(this.focusReturnTarget=related)},this.onBlurHide=()=>{this.showTooltip=!1},this.onEndSlotChange=event=>{this.applyEndSlotPresence(event.target)},this.onMetaSlotChange=event=>{this.applyMetaSlotPresence(event.target)}}static{this.defaultStrings={...super.defaultStrings,appRailItemCollapse:LYRA_DEFAULT_appRailItemCollapse,appRailItemExpand:LYRA_DEFAULT_appRailItemExpand}}static{this.styles=[LyraElement.styles,styles]}static get observedAttributes(){return[...super.observedAttributes,"icon-only"]}syncRailTopLayer(){const rail=this.closest(tag("app-rail"));this.railTopLayer=rail?.topLayer===!0}get effectiveTopLayer(){return this.topLayer||this.railTopLayer}get expanded(){return this._expanded}set expanded(next){const old=this._expanded;this._expanded=next,markVetoGuardWrite(this.toggleGuard),this.requestUpdate("expanded",old)}get hasChildrenSlotted(){return Array.from(this.children).some(el=>el.getAttribute("slot")==="children")}connectedCallback(){super.connectedCallback(),this.syncRailTopLayer(),this.armChildrenObserver(),this.syncOwnedChildren()}armChildrenObserver(){this.childrenObserver?.disconnect();const MutationObserverCtor=this.ownerDocument.defaultView?.MutationObserver;MutationObserverCtor&&(this.childrenObserver=new MutationObserverCtor(()=>{this.syncOwnedChildren(),this.requestUpdate()}),this.childrenObserver.observe(this,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["slot"]}))}syncOwnedChildren(){if(!this.isConnected)return;const iconOnly=this.hasAttribute("icon-only"),itemTag=tag("app-rail-item");for(const node of this.querySelectorAll(itemTag))(node.parentElement?.closest(itemTag)??null)===this&&node.toggleAttribute("icon-only",iconOnly)}get labelText(){return Array.from(this.childNodes).filter(node=>node.nodeType===3||node.nodeType===1&&!node.getAttribute("slot")).map(n=>n.textContent??"").join("").trim()}get tooltipText(){return hostAriaLabel(this)??(this.labelText||"")}applyEndSlotPresence(slot){this.hasEndSlot=slot.assignedNodes({flatten:!0}).some(node=>node.nodeType!==3||(node.textContent??"").trim()!=="")}applyMetaSlotPresence(slot){this.hasMetaSlot=slot.assignedNodes({flatten:!0}).some(node=>node.nodeType!==3||(node.textContent??"").trim()!=="")}attributeChangedCallback(name,oldValue,newValue){if(super.attributeChangedCallback(name,oldValue,newValue),!(name!=="icon-only"||oldValue===newValue)){if(newValue===null)this.showTooltip=!1;else{const active=deepActiveElement(this.ownerDocument),toggle=this.renderRoot?.querySelector('[part="toggle"]');this.recoverFocusAfterIconOnly=active===toggle||Array.from(this.children).some(child=>child.getAttribute("slot")==="children"&&composedContains(child,active))}this.syncOwnedChildren(),this.requestUpdate()}}firstUpdated(changed){super.firstUpdated(changed);const metaSlot=this.metaSlot,endSlot=this.endSlot;queueMicrotask(()=>{collectInitialSlotAssignment(metaSlot,s=>this.applyMetaSlotPresence(s)),collectInitialSlotAssignment(endSlot,s=>this.applyEndSlotPresence(s))})}willUpdate(changed){super.willUpdate(changed),changed.has("tooltip")&&!this.tooltip&&(this.showTooltip=!1),this.labelTextObserver.setEnabled(this.showTooltip);const children=this.renderRoot?.querySelector('[part="children"]');if(changed.has("expanded")&&!this._expanded&&children&&repairComposedFocus(children,()=>this.renderRoot.querySelector('[part="toggle"]')),changed.has("href")||changed.has("disabled")){const previous=this.renderRoot?.querySelector('[part="base"]')??null,nextIsLink=!!safeLinkHref(this.href)&&!this.disabled,ownerReplaced=previous!==null&&previous.localName==="a"!==nextIsLink;this.semanticFocusRepair=ownerReplaced&&activeElementIn(this.shadowRoot)===previous?captureComposedFocusRepair(this,this.focusFallback()??previous)??void 0:void 0}}updated(changed){super.updated(changed),this.recoverFocusAfterIconOnly&&(this.recoverFocusAfterIconOnly=!1,this.scheduleAfterUpdate(()=>{const base=this.renderRoot.querySelector('[part="base"]');base&&isComposedFocusAvailable(base)&&!composedContains(base,deepActiveElement(this.ownerDocument))&&base.focus()},"app-rail-item-icon-only-focus"));const focusRepair=this.semanticFocusRepair;this.semanticFocusRepair=void 0,focusRepair&&this.scheduleAfterUpdate(()=>{const replacement=this.renderRoot.querySelector('[part="base"]'),target=replacement&&isComposedFocusAvailable(replacement)?replacement:this.focusFallback();applyComposedFocusRepair(focusRepair,target)},"app-rail-item-owner-focus");const popup=this.renderRoot.querySelector('[part="tooltip"]');if(!popup){this.stopPositioning?.(),this.stopPositioning=void 0,this.tooltipOverlay?.deactivate({restoreFocus:!1}),this.tooltipOverlay=void 0;return}if(this.tooltipOverlay?.isActive()||(this.tooltipOverlay=activateNonmodalOverlay({host:this,panel:()=>this.renderRoot.querySelector('[part="tooltip"]'),onEscape:()=>{this.showTooltip=!1},restoreFocusTo:null})),changed.has("showTooltip")||changed.has("topLayer")||changed.has("railTopLayer")||!this.stopPositioning){this.stopPositioning?.();const anchor=this.renderRoot.querySelector('[part="base"]'),topLayer=this.effectiveTopLayer;this.placedTopLayer=syncTopLayerRelease(popup,this.placedTopLayer,topLayer),this.stopPositioning=place(anchor,popup,{placement:rtlAwarePlacement("right",this),...topLayerPlacement(topLayer,resolveEffectivePositioningStrategy(this,void 0,"fixed"))})}}disconnectedCallback(){super.disconnectedCallback(),this.semanticFocusRepair=void 0,this.focusReturnTarget=void 0,this.childrenObserver?.disconnect(),this.childrenObserver=void 0,this.stopPositioning?.(),this.stopPositioning=void 0,this.tooltipOverlay?.deactivate({restoreFocus:!1}),this.tooltipOverlay=void 0,this.showTooltip=!1}adoptedCallback(){super.adoptedCallback(),this.labelTextObserver.adopted()}focusFallback(){if(this.focusReturnTarget&&isComposedFocusAvailable(this.focusReturnTarget))return this.focusReturnTarget;const owner=this.closest(tag("app-rail"))?.shadowRoot?.querySelector('[part~="base"], [part~="panel"]')??null;return owner&&isComposedFocusAvailable(owner)?owner:null}click(){this.disabled||this.renderRoot.querySelector('[part~="base"]')?.click()}render(){const label=hostAriaLabel(this),href=safeLinkHref(this.href),content=html`
+import{__decorate}from"tslib";import{html,nothing}from"lit";import{property,query,state}from"lit/decorators.js";import{activateNonmodalOverlay,composedContains,deepActiveElement}from"../../../internal/nonmodal-overlay-manager.js";import{shadowFocusTarget}from"../../../internal/active-element.js";import{isKeyboardFocusEvent}from"../../../internal/focus-modality.js";import{hostAriaLabel,nextId}from"../../../internal/a11y.js";import{applyComposedFocusRepair,captureComposedFocusRepair,isComposedFocusAvailable,repairComposedFocus}from"../../../internal/focus-navigation.js";import{chevronIcon}from"../../../internal/icons.js";import{collectInitialSlotAssignment}from"../../../internal/initial-slot-collection.js";import{resolveGuardedRel}from"../../../internal/link-rel.js";import{LyraElement}from"../../../internal/lyra-element.js";import{AccessibleTextController}from"../../../internal/accessible-text-controller.js";import{renderInertPresentation}from"../../../internal/inert-presentation.js";import{tag}from"../../../internal/prefix.js";import{requestThenCommit}from"../../../internal/request-commit.js";import{safeLinkHref}from"../../../internal/safe-url.js";import{deferredPlace as place,syncTopLayerRelease,topLayerPlacement}from"../../../internal/anchored-overlay-runtime.js";import{resolveEffectivePositioningStrategy}from"../../../internal/positioning-strategy.js";import{rtlAwarePlacement}from"../../../internal/rtl.js";import{markVetoGuardWrite,VetoWriteGuard}from"../../../internal/veto-write-guard.js";import{styles}from"./app-rail-item.styles.js";import{LYRA_DEFAULT_appRailItemCollapse,LYRA_DEFAULT_appRailItemExpand}from"../../../internal/default-strings/layout.generated.js";class LyraAppRailItem extends LyraElement{constructor(){super(...arguments),this.href="",this.target="",this.disabled=!1,this.current=!1,this.tooltip=!1,this.topLayer=!1,this.railTopLayer=!1,this._expanded=!1,this.toggleGuard=new VetoWriteGuard,this.showTooltip=!1,this.hasEndSlot=!1,this.hasMetaSlot=!1,this.labelTextObserver=new AccessibleTextController(this,[],()=>this.requestUpdate(),[],!1),this.recoverFocusAfterIconOnly=!1,this.childrenId=nextId("app-rail-item-children"),this.onToggleClick=event=>{event.stopPropagation();const next=!this._expanded;requestThenCommit({requestDetail:{expanded:next},emitRequest:(detail,init)=>this.emit("lr-toggle-request",detail,init),guard:this.toggleGuard,commit:()=>{this.expanded=next,this.emit("lr-toggle",{expanded:next})}})},this.onFocusShow=event=>{if(this.tooltip&&this.hasAttribute("icon-only")&&(event.type!=="focus"||isKeyboardFocusEvent(event))&&(this.showTooltip=!0),event.type!=="focus")return;const related=event.relatedTarget;related&&related.nodeType===1&&isComposedFocusAvailable(related)&&(this.focusReturnTarget=related)},this.onBlurHide=()=>{this.showTooltip=!1},this.onEndSlotChange=event=>{this.applyEndSlotPresence(event.target)},this.onMetaSlotChange=event=>{this.applyMetaSlotPresence(event.target)}}static{this.defaultStrings={...super.defaultStrings,appRailItemCollapse:LYRA_DEFAULT_appRailItemCollapse,appRailItemExpand:LYRA_DEFAULT_appRailItemExpand}}static{this.styles=[LyraElement.styles,styles]}static get observedAttributes(){return[...super.observedAttributes,"icon-only"]}syncRailTopLayer(){const rail=this.closest(tag("app-rail"));this.railTopLayer=rail?.topLayer===!0}get effectiveTopLayer(){return this.topLayer||this.railTopLayer}get expanded(){return this._expanded}set expanded(next){const old=this._expanded;this._expanded=next,markVetoGuardWrite(this.toggleGuard),this.requestUpdate("expanded",old)}get hasChildrenSlotted(){return Array.from(this.children).some(el=>el.getAttribute("slot")==="children")}connectedCallback(){super.connectedCallback(),this.syncRailTopLayer(),this.armChildrenObserver(),this.syncOwnedChildren()}armChildrenObserver(){this.childrenObserver?.disconnect();const MutationObserverCtor=this.ownerDocument.defaultView?.MutationObserver;MutationObserverCtor&&(this.childrenObserver=new MutationObserverCtor(()=>{this.syncOwnedChildren(),this.requestUpdate()}),this.childrenObserver.observe(this,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["slot"]}))}syncOwnedChildren(){if(!this.isConnected)return;const iconOnly=this.hasAttribute("icon-only"),itemTag=tag("app-rail-item");for(const node of this.querySelectorAll(itemTag))(node.parentElement?.closest(itemTag)??null)===this&&node.toggleAttribute("icon-only",iconOnly)}get labelText(){return Array.from(this.childNodes).filter(node=>node.nodeType===3||node.nodeType===1&&!node.getAttribute("slot")).map(n=>n.textContent??"").join("").trim()}get tooltipText(){return hostAriaLabel(this)??(this.labelText||"")}applyEndSlotPresence(slot){this.hasEndSlot=slot.assignedNodes({flatten:!0}).some(node=>node.nodeType!==3||(node.textContent??"").trim()!=="")}applyMetaSlotPresence(slot){this.hasMetaSlot=slot.assignedNodes({flatten:!0}).some(node=>node.nodeType!==3||(node.textContent??"").trim()!=="")}attributeChangedCallback(name,oldValue,newValue){if(super.attributeChangedCallback(name,oldValue,newValue),!(name!=="icon-only"||oldValue===newValue)){if(newValue===null)this.showTooltip=!1;else{const active=deepActiveElement(this.ownerDocument),toggle=this.renderRoot?.querySelector('[part="toggle"]');this.recoverFocusAfterIconOnly=active===toggle||Array.from(this.children).some(child=>child.getAttribute("slot")==="children"&&composedContains(child,active))}this.syncOwnedChildren(),this.requestUpdate()}}firstUpdated(changed){super.firstUpdated(changed);const metaSlot=this.metaSlot,endSlot=this.endSlot;queueMicrotask(()=>{collectInitialSlotAssignment(metaSlot,s=>this.applyMetaSlotPresence(s)),collectInitialSlotAssignment(endSlot,s=>this.applyEndSlotPresence(s))})}willUpdate(changed){super.willUpdate(changed),changed.has("tooltip")&&!this.tooltip&&(this.showTooltip=!1),this.labelTextObserver.setEnabled(this.showTooltip);const children=this.renderRoot?.querySelector('[part="children"]');if(changed.has("expanded")&&!this._expanded&&children&&repairComposedFocus(children,()=>this.renderRoot.querySelector('[part="toggle"]')),changed.has("href")||changed.has("disabled")){const previous=this.renderRoot?.querySelector('[part="base"]')??null,nextIsLink=!!safeLinkHref(this.href)&&!this.disabled,ownerReplaced=previous!==null&&previous.localName==="a"!==nextIsLink;this.semanticFocusRepair=ownerReplaced&&shadowFocusTarget(this)===previous?captureComposedFocusRepair(this,this.focusFallback()??previous)??void 0:void 0}}updated(changed){super.updated(changed),this.recoverFocusAfterIconOnly&&(this.recoverFocusAfterIconOnly=!1,this.scheduleAfterUpdate(()=>{const base=this.renderRoot.querySelector('[part="base"]');base&&isComposedFocusAvailable(base)&&!composedContains(base,deepActiveElement(this.ownerDocument))&&base.focus()},"app-rail-item-icon-only-focus"));const focusRepair=this.semanticFocusRepair;this.semanticFocusRepair=void 0,focusRepair&&this.scheduleAfterUpdate(()=>{const replacement=this.renderRoot.querySelector('[part="base"]'),target=replacement&&isComposedFocusAvailable(replacement)?replacement:this.focusFallback();applyComposedFocusRepair(focusRepair,target)},"app-rail-item-owner-focus");const popup=this.renderRoot.querySelector('[part="tooltip"]');if(!popup){this.stopPositioning?.(),this.stopPositioning=void 0,this.tooltipOverlay?.deactivate({restoreFocus:!1}),this.tooltipOverlay=void 0;return}if(this.tooltipOverlay?.isActive()||(this.tooltipOverlay=activateNonmodalOverlay({host:this,panel:()=>this.renderRoot.querySelector('[part="tooltip"]'),onEscape:()=>{this.showTooltip=!1},restoreFocusTo:null})),changed.has("showTooltip")||changed.has("topLayer")||changed.has("railTopLayer")||!this.stopPositioning){this.stopPositioning?.();const anchor=this.renderRoot.querySelector('[part="base"]'),topLayer=this.effectiveTopLayer;this.placedTopLayer=syncTopLayerRelease(popup,this.placedTopLayer,topLayer),this.stopPositioning=place(anchor,popup,{placement:rtlAwarePlacement("right",this),...topLayerPlacement(topLayer,resolveEffectivePositioningStrategy(this,void 0,"fixed"))})}}disconnectedCallback(){super.disconnectedCallback(),this.semanticFocusRepair=void 0,this.focusReturnTarget=void 0,this.childrenObserver?.disconnect(),this.childrenObserver=void 0,this.stopPositioning?.(),this.stopPositioning=void 0,this.tooltipOverlay?.deactivate({restoreFocus:!1}),this.tooltipOverlay=void 0,this.showTooltip=!1}adoptedCallback(){super.adoptedCallback(),this.labelTextObserver.adopted()}focusFallback(){if(this.focusReturnTarget&&isComposedFocusAvailable(this.focusReturnTarget))return this.focusReturnTarget;const owner=this.closest(tag("app-rail"))?.shadowRoot?.querySelector('[part~="base"], [part~="panel"]')??null;return owner&&isComposedFocusAvailable(owner)?owner:null}click(){this.disabled||this.renderRoot.querySelector('[part~="base"]')?.click()}render(){const label=hostAriaLabel(this),href=safeLinkHref(this.href),content=html`
       ${this.current?html`<span part="current-indicator" aria-hidden="true"></span>`:nothing}
       ${renderInertPresentation(html`<slot name="start"><slot name="icon"></slot></slot>`,{part:"icon"})}
       <span part="label"><slot></slot></span>

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

@@ -2,7 +2,9 @@ import{type TemplateResult,type PropertyValues}from'lit';import{LyraElement}from
 /** Whitespace-separated tokens accepted by the `persist` attribute. */
 export type LyraAppRailPersistField='open'|'width'|'preferred-mode';export interface LyraAppRailModeChangeDetail{mode:LyraAppRailMode;}export interface LyraAppRailToggleDetail{
 /** Whether the mobile overlay is (or, on a cancelable proposal, would be) open. */
-expanded:boolean;}export interface LyraAppRailResizeDetail{widthPx:number;}
+expanded:boolean;}export interface LyraAppRailPeekChangeDetail{
+/** Whether the auto-hide rail is now expanded as a temporary overlay. */
+peeking:boolean;}export interface LyraAppRailResizeDetail{widthPx:number;}
 /**
 * Pure breakpoint-to-mode resolver, kept separate from the `matchMedia`
 * wiring below so it's directly unit-testable without resizing a real
@@ -12,7 +14,7 @@ expanded:boolean;}export interface LyraAppRailResizeDetail{widthPx:number;}
 * preference for the full/icon-only axis specifically, while the mobile
 * breakpoint continues to be tracked automatically regardless.
 */
-export{computeAppRailMode}from'./app-rail-mode.js';export interface LyraAppRailEventMap{'lr-mode-change':CustomEvent<LyraAppRailModeChangeDetail>;'lr-toggle-request':CustomEvent<LyraAppRailToggleDetail>;'lr-toggle':CustomEvent<LyraAppRailToggleDetail>;'lr-rail-resize-request':CustomEvent<LyraAppRailResizeDetail>;'lr-rail-resize':CustomEvent<LyraAppRailResizeDetail>;}
+export{computeAppRailMode}from'./app-rail-mode.js';export interface LyraAppRailEventMap{'lr-mode-change':CustomEvent<LyraAppRailModeChangeDetail>;'lr-toggle-request':CustomEvent<LyraAppRailToggleDetail>;'lr-toggle':CustomEvent<LyraAppRailToggleDetail>;'lr-rail-resize-request':CustomEvent<LyraAppRailResizeDetail>;'lr-rail-resize':CustomEvent<LyraAppRailResizeDetail>;'lr-peek-change':CustomEvent<LyraAppRailPeekChangeDetail>;}
 /**
 * `<lr-app-rail>` — the library's application sidebar, a responsive navigation rail across three
 * presentations as the *viewport* narrows (not this element's own inline
@@ -46,6 +48,14 @@ export{computeAppRailMode}from'./app-rail-mode.js';export interface LyraAppRailE
 * @cssprop [--lr-app-rail-frame-radius=var(--lr-radius)] - Card-frame corner radius.
 * @cssprop [--lr-app-rail-frame-shadow=var(--lr-shadow-s)] - Card-frame elevation.
 * @customElement lr-app-rail
+* Opt in to `auto-hide` for a desktop sidebar that rests as the `'icon-only'` strip, temporarily
+* expands to the full rail as an overlay (the strip's footprint stays in the layout, so the content
+* never reflows) while the pointer or keyboard focus is inside, and docks at full width only once
+* the user pins it with the built-in `[part="pin-button"]`. Pinning writes `preferredMode`, so it
+* persists through `storage-key` with `persist="preferred-mode"` like every other mode preference.
+* The `mode` stays `'icon-only'` while peeking -- peeking is a presentation of the strip, observable
+* through `peeking`, not a mode change.
+*
 * @slot - Nav items. Use `<lr-app-rail-item>` for the explicit icon/label
 *   contract that automatically hides labels in `'icon-only'` mode, and
 *   `<lr-app-rail-group>` to title and optionally collapse a section of them --
@@ -80,7 +90,16 @@ export{computeAppRailMode}from'./app-rail-mode.js';export interface LyraAppRailE
 *   keyboard step, or once on pointerup after a genuine drag. Non-cancelable; no event is emitted
 *   for clamped no-ops, canceled/lost gestures, or direct `railWidth` writes.
 *   `detail: LyraAppRailResizeDetail`.
+* @event lr-peek-change - The `auto-hide` rail started or stopped peeking (expanding as a temporary
+*   overlay). Non-cancelable. Not fired for the reset a disconnect performs.
+*   `detail: LyraAppRailPeekChangeDetail`.
 * @csspart base - The rail root while inline (`'full'`/`'icon-only'` modes).
+* @csspart pin-button - The `auto-hide` pin control, rendered inside `[part="header"]` while the rail
+*   is peeking or pinned (docked at full width), never in the resting strip. Renders `aria-pressed`
+*   as `"true"` while pinned and `"false"` otherwise, with the localized pin/unpin name; it takes
+*   the shared `--lr-icon-button-size` hit area. Replaces `[part="collapse-toggle"]` while
+*   `auto-hide` is set.
+* @csspart pin-icon - The wrapper around `[part="pin-button"]`'s glyph.
 * @csspart header - The wrapper around the `header` slot.
 * @csspart nav - The wrapper around the default (nav items) slot.
 * @csspart footer - The wrapper around the `footer` slot.
@@ -135,6 +154,12 @@ export{computeAppRailMode}from'./app-rail-mode.js';export interface LyraAppRailE
 *   capped at `85vw`.
 * @cssprop [--lr-app-rail-overlay-color=var(--lr-color-overlay)] - The mobile overlay scrim's
 *   background.
+* @cssprop [--lr-app-rail-peek-shadow=var(--lr-shadow-l)] - Elevation of the `auto-hide` rail while it
+*   peeks as an overlay over the content.
+* @cssprop [--lr-app-rail-peek-bg=var(--lr-color-surface-overlay)] - Background of the `auto-hide`
+*   rail while peeking, kept opaque-leaning like the mobile panel because it overlays content.
+* @cssprop [--lr-app-rail-pin-hover-bg=var(--lr-color-brand-quiet)] - Pin-control hover background.
+* @cssprop [--lr-app-rail-pin-hover-color=var(--lr-color-brand)] - Pin-control hover foreground.
 * @cssprop [--lr-app-rail-panel-inset-block-start=0] - Block-start (top) inset shared by
 *   `[part="panel"]` and `[part="backdrop"]` -- raise it to leave room for a fixed app bar/status
 *   area above the drawer instead of the panel/scrim starting flush with the viewport top.
@@ -217,6 +242,17 @@ export{computeAppRailMode}from'./app-rail-mode.js';export interface LyraAppRailE
 * </lr-app-rail>
 * ```
 * @example
+* An auto-hide sidebar: the icon-only strip peeks open over the content on hover or keyboard
+* focus, and a pin docks it, remembered across reloads:
+* ```html
+* <lr-app-rail auto-hide label="Workspace" storage-key="app" persist="preferred-mode"
+*   peek-open-delay="150" peek-close-delay="300">
+*   <lr-app-rail-item href="/inbox" current>
+*     <svg slot="icon" aria-hidden="true">...</svg>Inbox
+*   </lr-app-rail-item>
+* </lr-app-rail>
+* ```
+* @example
 * A standalone app sidebar: a card-framed rail collapsed to icons by an external trigger or
 * the Mod+B chord, remembering the reader's choice. Below `mobile-breakpoint` it becomes the
 * off-canvas overlay and the same trigger opens it:
@@ -248,10 +284,10 @@ export{computeAppRailMode}from'./app-rail-mode.js';export interface LyraAppRailE
 * @since 4.0.0
 */
 export declare class LyraAppRail extends LyraElement<LyraAppRailEventMap>{constructor();
-/** Both are host state this component writes itself -- `mode` is the derived effective mode
-*  (authors set `preferred-mode`), `dragging` tracks a live resize gesture. Neither is settable
-*  from markup, so neither is observed; declaring them keeps the rail from reporting its own
-*  output as an unknown attribute. */
+/** All are host state this component writes itself -- `mode` is the derived effective mode
+*  (authors set `preferred-mode`), `dragging` tracks a live resize gesture, `peeking` the open
+*  state of an `auto-hide` peek. None is settable from markup, so none is observed; declaring
+*  them keeps the rail from reporting its own output as an unknown attribute. */
 protected static readonly knownUnobservedAttributes:readonly string[];static styles:import("lit").CSSResultGroup[];
 /** Below this viewport width, the rail switches from `'full'` to
 *  `'icon-only'`. Any valid CSS length, used directly in a `max-width`
@@ -314,6 +350,27 @@ get forceMode():LyraAppRailPreferredMode|'auto'|undefined;set forceMode(next:Lyr
 *  `toggle` csspart doc) as the panel's only in-panel dismiss control, and hiding it there too
 *  would leave the open panel with no in-panel way to close it at all -- only Escape/backdrop. */
 withoutToggle:boolean;
+/** Opts the desktop rail into auto-hide ("peek") mode: it rests as the `'icon-only'` strip and,
+*  while the pointer moves inside it or keyboard focus enters it, expands to the full rail as an
+*  overlay -- the strip's footprint stays in the layout, so nothing reflows -- and collapses back
+*  after `peekCloseDelay`. Escape closes the peek. Touch pointers and boundary events with no
+*  movement never open it. The rail docks at full width only while pinned: the built-in
+*  `[part="pin-button"]` writes `preferredMode`, so the pin persists through `storage-key` with
+*  `persist="preferred-mode"`. `preferredMode` and `forceMode` keep their meaning; an unset
+*  `preferredMode` rests as `'icon-only'` instead of following `icon-only-breakpoint`. The mobile
+*  presentation is unchanged, and `[part="collapse-toggle"]` is not rendered while this is set
+*  (the pin control replaces it). `false` (the default) reproduces today's exact behavior.
+*  @default false */
+autoHide:boolean;
+/** Milliseconds a moving pointer must stay inside the `auto-hide` strip before it peeks open.
+*  Keyboard focus opens it at once. A non-finite value uses the default and a negative one is
+*  clamped to `0`.
+*  @default 150 */
+peekOpenDelay:number;
+/** Milliseconds the `auto-hide` rail stays open after the pointer has left and keyboard focus is
+*  no longer inside it. A non-finite value uses the default and a negative one is clamped to `0`.
+*  @default 300 */
+peekCloseDelay:number;
 /** Opts in the desktop collapse control: a `[part="collapse-toggle"]` button rendered inside
 *  `[part="header"]` that flips the rail between its `'full'` and `'icon-only'` presentations,
 *  the same flip `toggleCollapse()` performs. It writes `preferredMode`, so the collapse survives
@@ -442,7 +499,13 @@ maxRailWidth:number|string;private pixelsOf;private get railWidthInPixels();
 *  `transition: inline-size` during the drag, which otherwise visibly "chases" the pointer
 *  instead of tracking it 1:1. Read-only -- this component owns the transitions entirely; there
 *  is no public setter. */
-get dragging():boolean;private _dragging;private setDragging;private hasHeaderSlot;private hasFooterSlot;private persistReady;private _mode;private _lastReflectedMode?;private pendingInitialModeAnnouncement?;private forced;private hotkeyWindow?;private iconOnlyMatches;private mobileMatches;private mqIconOnly?;private mqMobile?;private mqIconOnlyListener?;private mqMobileListener?;private overlayActive;private justOpened;private overlayHandle?;private readonly nativeModal;private explicitTrigger?;private overlayReturnTarget;private overlayOpener;private overlayReturnIsExplicit;private readonly deferredFocusReturn;private restoreFallbackTabIndex?;private triggerAria?;private recoverInlineFocusAfterResponsiveClose;private readonly navId;private readonly navRegionId;private baseEl?;private toggleEl?;private resizePointerId?;private readonly resizeController;private resizeStartX;private resizeRtl;private resizeStartWidth;private resizeGestureChanged;private managedItems;private syncSlottedItems;
+get dragging():boolean;private _dragging;private setDragging;
+/** Whether the `auto-hide` rail is currently expanded as a temporary overlay. Read-only: the
+*  pointer, keyboard focus, Escape and the pin control own it. Reflected to the `peeking`
+*  attribute for styling, and announced through `lr-peek-change`. `mode` stays `'icon-only'`
+*  while this is `true` -- peeking presents the strip expanded, it does not change the mode.
+*  Always `false` while `auto-hide` is unset or the rail is `'full'` (pinned) or `'mobile'`. */
+get peeking():boolean;private _peeking;private peekOpenTimer?;private peekCloseTimer?;private peekPointerInside;private peekKeyboardFocusInside;private peekPointerSeen?;private peekDismissed;private peekAfterUnpin;private peekHandle?;private get peekEligible();private get modePreference();private clearPeekOpen;private clearPeekClose;private setPeeking;private resetPeek;private dismissPeek;private startPeekOpen;private startPeekClose;private onPeekPointerEnter;private onPeekPointerMove;private onPeekPointerLeave;private onPeekFocusIn;private onPeekFocusOut;private onPinClick;private hasHeaderSlot;private hasFooterSlot;private persistReady;private _mode;private _lastReflectedMode?;private pendingInitialModeAnnouncement?;private forced;private hotkeyWindow?;private iconOnlyMatches;private mobileMatches;private mqIconOnly?;private mqMobile?;private mqIconOnlyListener?;private mqMobileListener?;private overlayActive;private justOpened;private overlayHandle?;private readonly nativeModal;private explicitTrigger?;private overlayReturnTarget;private overlayOpener;private overlayReturnIsExplicit;private restoreFallbackTabIndex?;private triggerAria?;private recoverInlineFocusAfterResponsiveClose;private readonly navId;private readonly navRegionId;private baseEl?;private toggleEl?;private resizePointerId?;private readonly resizeController;private resizeStartX;private resizeRtl;private resizeStartWidth;private resizeGestureChanged;private managedItems;private syncSlottedItems;
 /**
 * The rail's current effective presentation. Always one of the three real
 * modes — never `'auto'` — reflecting either the live breakpoint match or,
@@ -458,7 +521,7 @@ get dragging():boolean;private _dragging;private setDragging;private hasHeaderSl
 * manually, via `updated()`, since this property has no Lit-managed
 * accessor to reflect through (see `setEffectiveMode()`).
 */
-get mode():LyraAppRailMode;private get safeMinRailWidthPx();private get safeMaxRailWidthPx();private get effectiveRailWidthPx();private resizeValueText;private get storageFullKey();private get persistFields();private loadPersisted;private persistState;protected willUpdate(changed:PropertyValues):void;protected updated(changed:PropertyValues):void;connectedCallback():void;disconnectedCallback():void;adoptedCallback():void;private resolveExternalTrigger;private resolveFocusFallback;private activateMobileOverlay;private deactivateMobileOverlay;private scheduleDeferredFocusReturn;private focusHostFallback;private placeToggle;private setupMediaQueries;private teardownMediaQueries;private onIconOnlyChange;private onMobileChange;private applyComputedMode;private setEffectiveMode;private setOpen;private onToggleClick;private onBackdropClick;
+get mode():LyraAppRailMode;private get safeMinRailWidthPx();private get safeMaxRailWidthPx();private get effectiveRailWidthPx();private resizeValueText;private get storageFullKey();private get persistFields();private loadPersisted;private persistState;protected willUpdate(changed:PropertyValues):void;protected updated(changed:PropertyValues):void;connectedCallback():void;disconnectedCallback():void;adoptedCallback():void;private resolveExternalTrigger;private resolveFocusFallback;private activateMobileOverlay;private deactivateMobileOverlay;private readonly deferredReturnPass;private focusHostFallback;private placeToggle;private setupMediaQueries;private teardownMediaQueries;private onIconOnlyChange;private onMobileChange;private applyComputedMode;private setEffectiveMode;private setOpen;private onToggleClick;private onBackdropClick;
 /**
 * Flips the rail between its `'full'` and `'icon-only'` presentations by writing
 * `preferredMode` -- the same action `[part="collapse-toggle"]` performs, exposed for a consumer

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

@@ -1,4 +1,4 @@
-import{__decorate}from"tslib";import{NativeModalCarrier}from"../../../internal/native-modal-carrier.js";import{nativeModalCarrierStyles}from"../../../internal/native-modal-carrier.styles.js";import{GlassScrollLayer}from"../../../internal/glass-scroll-layer.js";import{html,nothing}from"lit";import{property,query,state}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{activateOverlay,collectFocusableElements,composedContains,deepActiveElement}from"../../../internal/overlay-manager.js";import{optionalLiteralSetConverter}from"../../../internal/converters.js";import{DeferredFocusReturn}from"../../../internal/deferred-focus-return.js";import{resolveCssLength}from"../../../internal/css-length.js";import{focusFirstAvailable}from"../../../internal/focus-navigation.js";import{isHtmlElement}from"../../../internal/dom-guards.js";import{detectPlatform}from"../../../internal/platform.js";import{parseHotkey,hasNonShiftModifier,matchesHotkey,hotkeyAriaKeyShortcuts,isIgnorableKeyEvent,isEditableKeyEventTarget,registerHotkeyOwner,unregisterHotkeyOwner,resolveHotkeyOwner}from"../../../internal/hotkey.js";import{nextId,isAccessibilityVisible}from"../../../internal/a11y.js";import{acquireAriaOwnership}from"../../../internal/aria-ownership.js";import{chevronIcon,closeIcon,menuIcon}from"../../../internal/icons.js";import{tag}from"../../../internal/prefix.js";import{isRtl}from"../../../internal/rtl.js";import{prefersReducedMotion}from"../../../internal/motion.js";import{finiteRange}from"../../../internal/numbers.js";import{SeparatorDragController,separatorArrowDirection,separatorDelta}from"../../../internal/separator-drag.js";import{getNumberFormat}from"../../../internal/intl-cache.js";import{computeAppRailMode}from"./app-rail-mode.js";import{readPersistedState,writePersistedState}from"../../../internal/persisted-state.js";import{definePersistedProperty,isPersistedPropertyExplicitlySet}from"../../../internal/persisted-restore.js";import{styles}from"./app-rail.styles.js";import"./app-rail-item.class.js";import{LYRA_DEFAULT_appRailCollapse,LYRA_DEFAULT_appRailExpand,LYRA_DEFAULT_closeNavigation,LYRA_DEFAULT_navigation,LYRA_DEFAULT_openNavigation,LYRA_DEFAULT_resizeNavigation,LYRA_DEFAULT_resizeValuePixels}from"../../../internal/default-strings.generated.js";const NON_NAVIGATION_CLICK='[part~="toggle"], [part~="header-actions"], [part~="meta"], [part~="end"]',APP_RAIL_FRAME=optionalLiteralSetConverter(["card","plain"]),RAIL_WIDTH_CONVERTER={fromAttribute:value=>{if(value===null)return value;const number=Number(value);return Number.isNaN(number)?value:number}},APP_RAIL_PERSIST_FIELDS=new Set(["open","width","preferred-mode"]);import{computeAppRailMode as computeAppRailMode2}from"./app-rail-mode.js";class LyraAppRail extends LyraElement{static{this.defaultStrings={...super.defaultStrings,appRailCollapse:LYRA_DEFAULT_appRailCollapse,appRailExpand:LYRA_DEFAULT_appRailExpand,closeNavigation:LYRA_DEFAULT_closeNavigation,navigation:LYRA_DEFAULT_navigation,openNavigation:LYRA_DEFAULT_openNavigation,resizeNavigation:LYRA_DEFAULT_resizeNavigation,resizeValuePixels:LYRA_DEFAULT_resizeValuePixels}}constructor(){super(),this.iconOnlyBreakpoint="960px",this.mobileBreakpoint="600px",this.triggerCollapses=!1,this.hotkey="",this.accessibleLabel=null,this.withoutToggle=!1,this.collapsible=!1,this.topLayer=!1,this.trigger=null,this.for="",this.focusFallback=null,this.resizable=!1,this.persist="open width",this.minRailWidth=190,this.maxRailWidth=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.nativeModal=new NativeModalCarrier(this,{onCancel:()=>{this.overlayHandle?.isTopmost()&&this.setOpen(!1)},onUnexpectedClose:()=>{this.overlayHandle?.isTopmost()&&this.setOpen(!1),this.overlayActive&&this.nativeModal.show()}}),this.overlayReturnTarget=null,this.overlayOpener=null,this.overlayReturnIsExplicit=!1,this.deferredFocusReturn=new DeferredFocusReturn,this.recoverInlineFocusAfterResponsiveClose=!1,this.navId=nextId("app-rail-nav"),this.navRegionId=nextId("app-rail-nav-region"),this.resizeController=new SeparatorDragController(this,event=>this.onResizerPointerMove(event),event=>this.onResizerPointerUp(event)),this.resizeStartX=0,this.resizeRtl=!1,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.acceptsHotkey=event=>{const parsed=parseHotkey(this.hotkey);return this.isConnected&&!this.forced&&parsed!==null&&hasNonShiftModifier(parsed)&&matchesHotkey(parsed,event,detectPlatform(this.hotkeyWindow?.navigator)==="mac")&&!isEditableKeyEventTarget(event)&&isAccessibilityVisible(this)},this.onHotkeyKeyDown=event=>{if(event.defaultPrevented||isIgnorableKeyEvent(event)||!this.hotkeyWindow)return;const keyboard=event;!this.acceptsHotkey(keyboard)||resolveHotkeyOwner(this.hotkeyWindow,keyboard)!==this||(event.preventDefault(),this.toggle())},this.onPanelTransition=event=>{event.target===event.currentTarget&&event.propertyName==="transform"&&this.baseEl?.removeAttribute("data-sliding")},this.onCollapseToggleClick=()=>{this.toggleCollapse()},this.onNavItemClick=event=>{this.overlayActive&&(event.composedPath().some(node=>isHtmlElement(node)&&node.matches(NON_NAVIGATION_CLICK))||this.setOpen(!1))},this.onHeaderSlotChange=()=>{this.hasHeaderSlot=Array.from(this.children).some(el=>el.getAttribute("slot")==="header")},this.onFooterSlotChange=()=>{this.hasFooterSlot=Array.from(this.children).some(el=>el.getAttribute("slot")==="footer")},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;this.resizeController.start(e,resizer)&&(this.resizePointerId=e.pointerId,this.resizeStartX=e.clientX,this.resizeRtl=isRtl(this),this.resizeStartWidth=this.effectiveRailWidthPx,this.resizeGestureChanged=!1,this.setDragging(!0))},this.onResizerPointerMove=e=>{if(e.pointerId!==this.resizePointerId)return;if(!this.resizable||this._mode!=="full"||isRtl(this)!==this.resizeRtl){this.endResizerGesture();return}const delta=separatorDelta(this.resizeStartX,e,"inline",this.resizeRtl),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=>{if(e.altKey||e.ctrlKey||e.metaKey||e.isComposing)return;const rtl=this.getAttribute("dir")==="rtl"||isRtl(this),direction=separatorArrowDirection(e,"inline",rtl),step=8,width=this.effectiveRailWidthPx,next=direction===1?Math.min(this.safeMaxRailWidthPx,width+step):direction===-1?Math.max(this.safeMinRailWidthPx,width-step):e.key==="Home"?this.safeMinRailWidthPx:e.key==="End"?this.safeMaxRailWidthPx:width;next!==width&&(e.preventDefault(),this.requestRailResize(next))},new GlassScrollLayer(this,'[part="base"], [part="panel"]')}static{this.knownUnobservedAttributes=["mode","dragging"]}static{this.styles=[LyraElement.styles,nativeModalCarrierStyles,styles]}get frame(){return this._frame}set frame(next){const value=APP_RAIL_FRAME.normalizeReflected(this,"frame",next),old=this._frame;value!==old&&(this._frame=value,this.requestUpdate("frame",old))}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)}static{definePersistedProperty(this.prototype,"open",{initial:!1,attribute:!0,type:Boolean,reflect:!0}),definePersistedProperty(this.prototype,"preferredMode",{initial:void 0,attribute:"preferred-mode"}),definePersistedProperty(this.prototype,"railWidth",{initial:void 0,attribute:"rail-width",converter:RAIL_WIDTH_CONVERTER})}pixelsOf(value){return typeof value=="number"?value:typeof value=="string"?resolveCssLength(value,{host:this}):void 0}get railWidthInPixels(){const width=this.railWidth;return typeof width=="string"?this.pixelsOf(width):width}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"),groupTag=tag("app-rail-group"),railTag=tag("app-rail"),next=new Set((slot?.assignedElements({flatten:!0})??[]).filter(item=>item.localName===itemTag||item.localName===groupTag));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.pixelsOf(this.minRailWidth)??Number.NaN,190,0)}get safeMaxRailWidthPx(){return Math.max(this.safeMinRailWidthPx,finiteRange(this.pixelsOf(this.maxRailWidth)??Number.NaN,440,0))}get effectiveRailWidthPx(){return this.railWidth!=null?finiteRange(this.railWidthInPixels??Number.NaN,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 restored={open:!1,preferredMode:!1},parsed=readPersistedState(this.storageFullKey,v=>typeof v=="object"&&v!==null);if(!parsed)return restored;const fields=this.persistFields;return fields.has("open")&&!isPersistedPropertyExplicitlySet(this,"open")&&typeof parsed.open=="boolean"&&(this.open=parsed.open,restored.open=!0),fields.has("width")&&!isPersistedPropertyExplicitlySet(this,"railWidth")&&typeof parsed.railWidthPx=="number"&&Number.isFinite(parsed.railWidthPx)&&(this.railWidth=parsed.railWidthPx),fields.has("preferred-mode")&&!isPersistedPropertyExplicitlySet(this,"preferredMode")&&(parsed.preferredMode==="full"||parsed.preferredMode==="icon-only")&&(this.preferredMode=parsed.preferredMode,restored.preferredMode=!0),restored}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.railWidthInPixels),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");const restored=this.loadPersisted();if(restored.preferredMode&&!this.forced){const restoredMode=computeAppRailMode(this.iconOnlyMatches,this.mobileMatches,this.preferredMode);restoredMode!==this._mode&&(this._mode=restoredMode,this.pendingInitialModeAnnouncement=restoredMode)}restored.open&&this.open&&this._mode!=="mobile"&&(this.open=!1)}if(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.hasUpdated&&this._mode==="mobile"&&!prefersReducedMotion(this)&&this.baseEl?.toggleAttribute("data-sliding",!0),this.overlayActive=next,this.placeToggle(next),next?(this.justOpened=!0,this.activateMobileOverlay()):this.deactivateMobileOverlay(this._mode==="mobile"))}}updated(changed){if(super.updated(changed),this.overlayActive&&this.nativeModal.show(),changed.has("topLayer"))for(const item of this.querySelectorAll(tag("app-rail-item")))item.syncRailTopLayer?.();if(this._lastReflectedMode!==this._mode&&(this._lastReflectedMode=this._mode,this.setAttribute("mode",this._mode)),this.pendingInitialModeAnnouncement!==void 0){const mode=this.pendingInitialModeAnnouncement;this.pendingInitialModeAnnouncement=void 0,this.emit("lr-mode-change",{mode})}if(this.syncSlottedItems(),this.placeToggle(this.overlayActive),this.syncExternalTriggerA11y(),this.syncBuiltInKeyShortcuts(),this.baseEl&&(this._mode!=="mobile"||!this.baseEl.getAnimations().some(animation=>"transitionProperty"in animation&&animation.transitionProperty==="transform"))&&this.baseEl.removeAttribute("data-sliding"),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("railWidth")&&!this.dragging||changed.has("preferredMode")||changed.has("persist"))&&this.persistState(),this.persistReady=!0,this.baseEl&&(this.resizable&&this.railWidth!=null&&this._mode==="full"?this.baseEl.style.setProperty("inline-size",`${this.effectiveRailWidthPx}px`):this.baseEl.style.removeProperty("inline-size")),this.observeResizerPosition(),this.syncResizerPosition()}connectedCallback(){super.connectedCallback(),this.hotkeyWindow=this.ownerDocument.defaultView??void 0,this.hotkeyWindow&&(registerHotkeyOwner(this.hotkeyWindow,this,this.acceptsHotkey),this.hotkeyWindow.addEventListener("keydown",this.onHotkeyKeyDown)),this.setupMediaQueries(),this.hasUpdated&&this._mode==="mobile"&&this.open&&(this.overlayHandle?.isActive()?this.overlayHandle.resume():this.activateMobileOverlay(),queueMicrotask(()=>{this.nativeModal.show(),this.overlayHandle?.focusInitial()})),this.hasUpdated&&queueMicrotask(()=>{this.isConnected&&(this.syncSlottedItems(),this.observeResizerPosition(),this.syncResizerPosition(),this.syncExternalTriggerA11y())})}disconnectedCallback(){this.disconnectResizerPosition(),this.nativeModal.hide(),this.hotkeyWindow&&(this.hotkeyWindow.removeEventListener("keydown",this.onHotkeyKeyDown),unregisterHotkeyOwner(this.hotkeyWindow,this),this.hotkeyWindow=void 0),this.baseEl?.removeAttribute("data-sliding"),this.deferredFocusReturn.cancel(),super.disconnectedCallback(),this.restoreFallbackTabIndex?.(),this.teardownMediaQueries(),this.overlayHandle?.suspend(),this.endResizerGesture(),this.releaseExternalTriggerA11y()}adoptedCallback(){this.disconnectResizerPosition(),super.adoptedCallback(),this.teardownMediaQueries(),this.endResizerGesture()}resolveExternalTrigger(){if(this.trigger)return this.trigger;if(!this.for)return null;const found=this.getRootNode().getElementById?.(this.for);return found instanceof HTMLElement?found:null}resolveFocusFallback(){const value=this.focusFallback;if(!value)return null;const target=typeof value=="string"?this.getRootNode().getElementById?.(value)??null:value;return isHtmlElement(target)&&target.ownerDocument===this.ownerDocument?target:null}activateMobileOverlay(){this.nativeModal.prepare();const explicitTrigger=this.explicitTrigger;this.explicitTrigger=void 0;const restoreFocusTo=explicitTrigger??this.resolveExternalTrigger()??void 0;this.overlayReturnIsExplicit=explicitTrigger!==void 0,this.deferredFocusReturn.cancel();const active=deepActiveElement(this.ownerDocument);this.overlayOpener=active&&typeof active.focus=="function"&&!composedContains(this,active)?active:null,this.overlayReturnTarget=restoreFocusTo??this.overlayOpener,this.overlayHandle=activateOverlay({host:this,panel:()=>this.shadowRoot?.querySelector('[part="panel"]')??null,onEscape:()=>this.setOpen(!1),onBackdrop:()=>this.setOpen(!1),restoreFocusTo,preferredInitialFocus:()=>{const panel=this.shadowRoot?.querySelector('[part="panel"]')??null;if(!panel)return null;const toggle=this.toggleEl??null;return collectFocusableElements(panel).filter(stop=>stop!==toggle)[0]??panel},lockScroll:!0,suspendWhenUnrendered:!0})}deactivateMobileOverlay(restoreFocus=!0){this.nativeModal.hide(),this.nativeModal.prepare(!1);const handle=this.overlayHandle;if(this.overlayHandle=void 0,this.deferredFocusReturn.cancel(),handle&&restoreFocus&&!this.overlayReturnIsExplicit){const external=this.resolveExternalTrigger();external&&external!==this.overlayReturnTarget&&(this.overlayReturnTarget=external,handle.updateRestoreFocusTo(external))}handle?.deactivate({restoreFocus}),handle&&restoreFocus&&this.scheduleDeferredFocusReturn()}scheduleDeferredFocusReturn(){const candidates=[this.overlayReturnTarget,this.overlayOpener];this.deferredFocusReturn.schedule({host:this,candidates:()=>[...candidates,this.toggleEl],isCurrent:()=>!this.overlayActive,fallback:()=>{this.focusHostFallback()||focusFirstAvailable([this.resolveFocusFallback()])}})}focusHostFallback(){if(!this.hasAttribute("tabindex")){this.setAttribute("tabindex","-1");const view=this.ownerDocument.defaultView,onFocusChange=()=>{deepActiveElement(this.ownerDocument)!==this&&restore()},restore=()=>{this.removeEventListener("blur",onFocusChange),view?.removeEventListener("focus",onFocusChange),this.getAttribute("tabindex")==="-1"&&this.removeAttribute("tabindex"),this.restoreFallbackTabIndex=void 0};this.restoreFallbackTabIndex=restore,this.addEventListener("blur",onFocusChange),view?.addEventListener("focus",onFocusChange)}return focusFirstAvailable(this)?!0:(this.restoreFallbackTabIndex?.(),!1)}placeToggle(insidePanel){const toggle=this.toggleEl,panel=this.baseEl;if(!(!toggle||!panel)){if(insidePanel){panel.firstChild!==toggle&&panel.insertBefore(toggle,panel.firstChild);return}toggle.nextSibling!==panel&&panel.parentNode?.insertBefore(toggle,panel)}}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(this.hasUpdated?void 0:{silent:!0})}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(options){this.setEffectiveMode(computeAppRailMode(this.iconOnlyMatches,this.mobileMatches,this.preferredMode),options)}setEffectiveMode(next,options){if(this._mode===next)return;const old=this._mode,resizer=this.renderRoot?.querySelector('[part="resizer"]');old==="full"&&next==="icon-only"&&resizer&&composedContains(resizer,deepActiveElement(this.ownerDocument))&&(this.recoverInlineFocusAfterResponsiveClose=!0),next!=="mobile"&&this.baseEl?.removeAttribute("data-sliding"),old==="mobile"&&next!=="mobile"&&this.open&&(this.recoverInlineFocusAfterResponsiveClose=!0),this._mode=next,this.baseEl&&(this.resizable&&this.railWidth!=null&&next==="full"||this.baseEl.style.removeProperty("inline-size")),this.requestUpdate("mode",old),options?.silent?this.pendingInitialModeAnnouncement=next: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",{expanded:next});return}const mode=this._mode,open=this.open;this.emit("lr-toggle-request",{expanded:next},{cancelable:!0}).defaultPrevented||this._mode!==mode||this.open!==open||(this.open=next,this.emit("lr-toggle",{expanded:next}))}toggleCollapse(){this._mode!=="mobile"&&(this.preferredMode=(this.preferredMode??this._mode)==="icon-only"?"full":"icon-only")}toggle(){this.isConnected&&(this._mode==="mobile"?this.setOpen(!this.open):this.toggleCollapse())}get resolvedHotkeyShortcuts(){const parsed=parseHotkey(this.hotkey);return hotkeyAriaKeyShortcuts(parsed&&hasNonShiftModifier(parsed)?parsed:null,detectPlatform(this.ownerDocument.defaultView?.navigator)==="mac")}syncBuiltInKeyShortcuts(){const value=this.resolvedHotkeyShortcuts;for(const control of[this.toggleEl,this.renderRoot.querySelector('[part="collapse-toggle"]')])!control||control.getAttribute("aria-keyshortcuts")===value||(value===null?control.removeAttribute("aria-keyshortcuts"):control.setAttribute("aria-keyshortcuts",value))}syncExternalTriggerA11y(){if(!this.isConnected){this.releaseExternalTriggerA11y();return}const mobile=this._mode==="mobile",trigger=mobile||this.triggerCollapses?this.resolveExternalTrigger():null;if(!trigger){this.releaseExternalTriggerA11y();return}const panel=this.baseEl??null,contribution={attributes:{"aria-expanded":(mobile?this.open:this._mode==="full")?"true":"false","aria-keyshortcuts":this.resolvedHotkeyShortcuts},controls:panel?[panel]:[]};this.triggerAria?this.triggerAria.update(trigger,contribution):this.triggerAria=acquireAriaOwnership(trigger,contribution)}releaseExternalTriggerA11y(){this.triggerAria?.release(),this.triggerAria=void 0}endResizerGesture(commit=!1){const pointerId=this.resizePointerId,changed=this.resizeGestureChanged,widthPx=this.effectiveRailWidthPx;this.resizePointerId=void 0,this.resizeGestureChanged=!1,this.setDragging(!1),pointerId!==void 0&&this.resizeController.end(pointerId),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.railWidth=next,commit?this.emit("lr-rail-resize",{widthPx:next}):this.resizeGestureChanged=!0,!0)}observeResizerPosition(){const resizer=this.renderRoot.querySelector('[part="resizer"]');if(!this.isConnected||!resizer||!this.baseEl||this._mode!=="full"||!this.resizable){this.disconnectResizerPosition();return}if(this.observedResizer===resizer)return;this.disconnectResizerPosition();const ResizeObserverConstructor=this.ownerDocument.defaultView?.ResizeObserver;ResizeObserverConstructor&&(this.resizerPositionObserver=new ResizeObserverConstructor(()=>this.syncResizerPosition()),this.resizerPositionObserver.observe(this,{box:"border-box"}),this.resizerPositionObserver.observe(this.baseEl,{box:"border-box"}),this.resizerPositionObserver.observe(resizer,{box:"border-box"}),this.observedResizer=resizer)}disconnectResizerPosition(){this.resizerPositionObserver?.disconnect(),this.resizerPositionObserver=void 0,this.observedResizer=void 0}syncResizerPosition(){const resizer=this.renderRoot.querySelector('[part="resizer"]');if(!resizer||!this.baseEl||this._mode!=="full"||!this.resizable)return;const hostRect=this.getBoundingClientRect(),baseRect=this.baseEl.getBoundingClientRect(),half=resizer.getBoundingClientRect().width/2,offset=this.getAttribute("dir")==="rtl"||isRtl(this)?hostRect.right-baseRect.left:baseRect.right-hostRect.left;resizer.style.setProperty("inset-inline-start",`${offset-half}px`),resizer.style.setProperty("inset-inline-end","auto")}renderResizer(){const railWidthPx=this.effectiveRailWidthPx;return html`<div
+import{__decorate}from"tslib";import{NativeModalCarrier}from"../../../internal/native-modal-carrier.js";import{nativeModalCarrierStyles}from"../../../internal/native-modal-carrier.styles.js";import{GlassScrollLayer}from"../../../internal/glass-scroll-layer.js";import{html,nothing}from"lit";import{property,query,state}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{activateOverlay,collectFocusableElements,composedContains,deepActiveElement}from"../../../internal/overlay-manager.js";import{optionalLiteralSetConverter}from"../../../internal/converters.js";import{cancelDeferredFocusReturn}from"../../../internal/deferred-focus-return.js";import{resolveCssLength}from"../../../internal/css-length.js";import{focusFirstAvailable}from"../../../internal/focus-navigation.js";import{isHtmlElement}from"../../../internal/dom-guards.js";import{detectPlatform}from"../../../internal/platform.js";import{parseHotkey,hasNonShiftModifier,matchesHotkey,hotkeyAriaKeyShortcuts,isIgnorableKeyEvent,isEditableKeyEventTarget,registerHotkeyOwner,unregisterHotkeyOwner,resolveHotkeyOwner}from"../../../internal/hotkey.js";import{nextId,isAccessibilityVisible}from"../../../internal/a11y.js";import{acquireAriaOwnership}from"../../../internal/aria-ownership.js";import{chevronIcon,closeIcon,menuIcon,pinIcon}from"../../../internal/icons.js";import{tag}from"../../../internal/prefix.js";import{isRtl}from"../../../internal/rtl.js";import{prefersReducedMotion}from"../../../internal/motion.js";import{finiteDuration,finiteRange}from"../../../internal/numbers.js";import{isKeyboardFocusEvent}from"../../../internal/focus-modality.js";import{SeparatorDragController,separatorArrowDirection,separatorDelta}from"../../../internal/separator-drag.js";import{getNumberFormat}from"../../../internal/intl-cache.js";import{computeAppRailMode}from"./app-rail-mode.js";import{readPersistedState,writePersistedState}from"../../../internal/persisted-state.js";import{definePersistedProperty,isPersistedPropertyExplicitlySet}from"../../../internal/persisted-restore.js";import{styles}from"./app-rail.styles.js";import"./app-rail-item.class.js";import{LYRA_DEFAULT_appRailCollapse,LYRA_DEFAULT_appRailExpand,LYRA_DEFAULT_appRailPin,LYRA_DEFAULT_appRailUnpin,LYRA_DEFAULT_closeNavigation,LYRA_DEFAULT_openNavigation,LYRA_DEFAULT_resizeNavigation}from"../../../internal/default-strings/layout.generated.js";import{LYRA_DEFAULT_navigation,LYRA_DEFAULT_resizeValuePixels}from"../../../internal/default-strings/shared.generated.js";const NON_NAVIGATION_CLICK='[part~="toggle"], [part~="header-actions"], [part~="meta"], [part~="end"]',APP_RAIL_FRAME=optionalLiteralSetConverter(["card","plain"]),RAIL_WIDTH_CONVERTER={fromAttribute:value=>{if(value===null)return value;const number=Number(value);return Number.isNaN(number)?value:number}},APP_RAIL_PERSIST_FIELDS=new Set(["open","width","preferred-mode"]);import{computeAppRailMode as computeAppRailMode2}from"./app-rail-mode.js";class LyraAppRail extends LyraElement{static{this.defaultStrings={...super.defaultStrings,appRailCollapse:LYRA_DEFAULT_appRailCollapse,appRailExpand:LYRA_DEFAULT_appRailExpand,appRailPin:LYRA_DEFAULT_appRailPin,appRailUnpin:LYRA_DEFAULT_appRailUnpin,closeNavigation:LYRA_DEFAULT_closeNavigation,navigation:LYRA_DEFAULT_navigation,openNavigation:LYRA_DEFAULT_openNavigation,resizeNavigation:LYRA_DEFAULT_resizeNavigation,resizeValuePixels:LYRA_DEFAULT_resizeValuePixels}}constructor(){super(),this.iconOnlyBreakpoint="960px",this.mobileBreakpoint="600px",this.triggerCollapses=!1,this.hotkey="",this.accessibleLabel=null,this.withoutToggle=!1,this.autoHide=!1,this.peekOpenDelay=150,this.peekCloseDelay=300,this.collapsible=!1,this.topLayer=!1,this.trigger=null,this.for="",this.focusFallback=null,this.resizable=!1,this.persist="open width",this.minRailWidth=190,this.maxRailWidth=440,this._dragging=!1,this._peeking=!1,this.peekPointerInside=!1,this.peekKeyboardFocusInside=!1,this.peekDismissed=!1,this.peekAfterUnpin=!1,this.onPeekPointerEnter=event=>{event.pointerType!=="touch"&&(this.peekPointerInside=!0,this.peekPointerSeen={x:event.clientX,y:event.clientY},this.clearPeekClose())},this.onPeekPointerMove=event=>{if(event.pointerType==="touch")return;const seen=this.peekPointerSeen,moved=(event.movementX||0)!==0||(event.movementY||0)!==0||seen!==void 0&&(seen.x!==event.clientX||seen.y!==event.clientY);this.peekPointerSeen={x:event.clientX,y:event.clientY},this.peekPointerInside=!0,this.clearPeekClose(),moved&&this.startPeekOpen()},this.onPeekPointerLeave=event=>{event.pointerType!=="touch"&&(this.peekPointerInside=!1,this.peekPointerSeen=void 0,this.clearPeekOpen(),this.peekKeyboardFocusInside||(this.peekDismissed=!1),this.startPeekClose())},this.onPeekFocusIn=event=>{const keyboard=isKeyboardFocusEvent(event);this.peekKeyboardFocusInside=keyboard,keyboard&&(this.clearPeekClose(),this.startPeekOpen(!0))},this.onPeekFocusOut=event=>{const next=event.relatedTarget;isHtmlElement(next)&&composedContains(this,next)||(this.peekKeyboardFocusInside=!1,this.peekPointerInside||(this.peekDismissed=!1),this.startPeekClose())},this.onPinClick=()=>{this.peekAfterUnpin=this._mode==="full"&&(this.peekPointerInside||this.peekKeyboardFocusInside),this.toggleCollapse()},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.nativeModal=new NativeModalCarrier(this,{onCancel:()=>{this.overlayHandle?.isTopmost()&&this.setOpen(!1)},onUnexpectedClose:()=>{this.overlayHandle?.isTopmost()&&this.setOpen(!1),this.overlayActive&&this.nativeModal.show()}}),this.overlayReturnTarget=null,this.overlayOpener=null,this.overlayReturnIsExplicit=!1,this.recoverInlineFocusAfterResponsiveClose=!1,this.navId=nextId("app-rail-nav"),this.navRegionId=nextId("app-rail-nav-region"),this.resizeController=new SeparatorDragController(this,event=>this.onResizerPointerMove(event),event=>this.onResizerPointerUp(event)),this.resizeStartX=0,this.resizeRtl=!1,this.resizeStartWidth=0,this.resizeGestureChanged=!1,this.managedItems=new Set,this.deferredReturnPass=()=>{const candidates=[this.overlayReturnTarget,this.overlayOpener];return{candidates:()=>[...candidates,this.toggleEl],isCurrent:()=>!this.overlayActive,fallback:()=>{this.focusHostFallback()||focusFirstAvailable([this.resolveFocusFallback()])}}},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.acceptsHotkey=event=>{const parsed=parseHotkey(this.hotkey);return this.isConnected&&!this.forced&&parsed!==null&&hasNonShiftModifier(parsed)&&matchesHotkey(parsed,event,detectPlatform(this.hotkeyWindow?.navigator)==="mac")&&!isEditableKeyEventTarget(event)&&isAccessibilityVisible(this)},this.onHotkeyKeyDown=event=>{if(event.defaultPrevented||isIgnorableKeyEvent(event)||!this.hotkeyWindow)return;const keyboard=event;!this.acceptsHotkey(keyboard)||resolveHotkeyOwner(this.hotkeyWindow,keyboard)!==this||(event.preventDefault(),this.toggle())},this.onPanelTransition=event=>{event.target===event.currentTarget&&event.propertyName==="transform"&&this.baseEl?.removeAttribute("data-sliding")},this.onCollapseToggleClick=()=>{this.toggleCollapse()},this.onNavItemClick=event=>{this.overlayActive&&(event.composedPath().some(node=>isHtmlElement(node)&&node.matches(NON_NAVIGATION_CLICK))||this.setOpen(!1))},this.onHeaderSlotChange=()=>{this.hasHeaderSlot=Array.from(this.children).some(el=>el.getAttribute("slot")==="header")},this.onFooterSlotChange=()=>{this.hasFooterSlot=Array.from(this.children).some(el=>el.getAttribute("slot")==="footer")},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;this.resizeController.start(e,resizer)&&(this.resizePointerId=e.pointerId,this.resizeStartX=e.clientX,this.resizeRtl=isRtl(this),this.resizeStartWidth=this.effectiveRailWidthPx,this.resizeGestureChanged=!1,this.setDragging(!0))},this.onResizerPointerMove=e=>{if(e.pointerId!==this.resizePointerId)return;if(!this.resizable||this._mode!=="full"||isRtl(this)!==this.resizeRtl){this.endResizerGesture();return}const delta=separatorDelta(this.resizeStartX,e,"inline",this.resizeRtl),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=>{if(e.altKey||e.ctrlKey||e.metaKey||e.isComposing)return;const rtl=this.getAttribute("dir")==="rtl"||isRtl(this),direction=separatorArrowDirection(e,"inline",rtl),step=8,width=this.effectiveRailWidthPx,next=direction===1?Math.min(this.safeMaxRailWidthPx,width+step):direction===-1?Math.max(this.safeMinRailWidthPx,width-step):e.key==="Home"?this.safeMinRailWidthPx:e.key==="End"?this.safeMaxRailWidthPx:width;next!==width&&(e.preventDefault(),this.requestRailResize(next))},new GlassScrollLayer(this,'[part="base"], [part="panel"]')}static{this.knownUnobservedAttributes=["mode","dragging","peeking"]}static{this.styles=[LyraElement.styles,nativeModalCarrierStyles,styles]}get frame(){return this._frame}set frame(next){const value=APP_RAIL_FRAME.normalizeReflected(this,"frame",next),old=this._frame;value!==old&&(this._frame=value,this.requestUpdate("frame",old))}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)}static{definePersistedProperty(this.prototype,"open",{initial:!1,attribute:!0,type:Boolean,reflect:!0}),definePersistedProperty(this.prototype,"preferredMode",{initial:void 0,attribute:"preferred-mode"}),definePersistedProperty(this.prototype,"railWidth",{initial:void 0,attribute:"rail-width",converter:RAIL_WIDTH_CONVERTER})}pixelsOf(value){return typeof value=="number"?value:typeof value=="string"?resolveCssLength(value,{host:this}):void 0}get railWidthInPixels(){const width=this.railWidth;return typeof width=="string"?this.pixelsOf(width):width}get dragging(){return this._dragging}setDragging(next){this._dragging=next,this.toggleAttribute("dragging",next)}get peeking(){return this._peeking}get peekEligible(){return this.autoHide&&this._mode==="icon-only"&&this.isConnected}get modePreference(){return this.autoHide?this.preferredMode??"icon-only":this.preferredMode}clearPeekOpen(){this.peekOpenTimer!==void 0&&(clearTimeout(this.peekOpenTimer),this.peekOpenTimer=void 0)}clearPeekClose(){this.peekCloseTimer!==void 0&&(clearTimeout(this.peekCloseTimer),this.peekCloseTimer=void 0)}setPeeking(next,options){this._peeking===next||next&&!this.peekEligible||(this._peeking=next,this.toggleAttribute("peeking",next),next?this.peekHandle=activateOverlay({host:this,panel:()=>this.baseEl??null,modal:!1,trapFocus:!1,onEscape:()=>this.dismissPeek()}):(this.peekHandle?.deactivate({restoreFocus:!1}),this.peekHandle=void 0),options?.silent||this.emit("lr-peek-change",{peeking:next}))}resetPeek(options){this.clearPeekOpen(),this.clearPeekClose(),this.peekPointerInside=!1,this.peekKeyboardFocusInside=!1,this.peekPointerSeen=void 0,this.peekDismissed=!1,this.peekAfterUnpin=!1,this.setPeeking(!1,options)}dismissPeek(){this.peekDismissed=!0,this.clearPeekOpen(),this.clearPeekClose(),this.setPeeking(!1)}startPeekOpen(immediate=!1){if(this.clearPeekClose(),this._peeking||this.peekOpenTimer!==void 0||this.peekDismissed||!this.peekEligible)return;const delay=immediate?0:finiteDuration(this.peekOpenDelay,150),open=()=>{(this.peekPointerInside||this.peekKeyboardFocusInside)&&this.setPeeking(!0)};if(delay===0){open();return}this.peekOpenTimer=setTimeout(()=>{this.peekOpenTimer=void 0,open()},delay)}startPeekClose(){this.clearPeekOpen(),!(!this._peeking||this.peekCloseTimer!==void 0)&&(this.peekPointerInside||this.peekKeyboardFocusInside||(this.peekCloseTimer=setTimeout(()=>{this.peekCloseTimer=void 0,!this.peekPointerInside&&!this.peekKeyboardFocusInside&&this.setPeeking(!1)},finiteDuration(this.peekCloseDelay,300))))}syncSlottedItems(){const slot=this.shadowRoot?.querySelector('[part="nav"] > slot'),itemTag=tag("app-rail-item"),groupTag=tag("app-rail-group"),railTag=tag("app-rail"),next=new Set((slot?.assignedElements({flatten:!0})??[]).filter(item=>item.localName===itemTag||item.localName===groupTag));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._peeking);this.managedItems=next}get mode(){return this._mode}get safeMinRailWidthPx(){return finiteRange(this.pixelsOf(this.minRailWidth)??Number.NaN,190,0)}get safeMaxRailWidthPx(){return Math.max(this.safeMinRailWidthPx,finiteRange(this.pixelsOf(this.maxRailWidth)??Number.NaN,440,0))}get effectiveRailWidthPx(){return this.railWidth!=null?finiteRange(this.railWidthInPixels??Number.NaN,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 restored={open:!1,preferredMode:!1},parsed=readPersistedState(this.storageFullKey,v=>typeof v=="object"&&v!==null);if(!parsed)return restored;const fields=this.persistFields;return fields.has("open")&&!isPersistedPropertyExplicitlySet(this,"open")&&typeof parsed.open=="boolean"&&(this.open=parsed.open,restored.open=!0),fields.has("width")&&!isPersistedPropertyExplicitlySet(this,"railWidth")&&typeof parsed.railWidthPx=="number"&&Number.isFinite(parsed.railWidthPx)&&(this.railWidth=parsed.railWidthPx),fields.has("preferred-mode")&&!isPersistedPropertyExplicitlySet(this,"preferredMode")&&(parsed.preferredMode==="full"||parsed.preferredMode==="icon-only")&&(this.preferredMode=parsed.preferredMode,restored.preferredMode=!0),restored}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.railWidthInPixels),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");const restored=this.loadPersisted();if(restored.preferredMode&&!this.forced){const restoredMode=computeAppRailMode(this.iconOnlyMatches,this.mobileMatches,this.modePreference);restoredMode!==this._mode&&(this._mode=restoredMode,this.pendingInitialModeAnnouncement=restoredMode)}restored.open&&this.open&&this._mode!=="mobile"&&(this.open=!1)}if(this.hasUpdated&&(changed.has("iconOnlyBreakpoint")||changed.has("mobileBreakpoint"))&&(this.teardownMediaQueries(),this.setupMediaQueries()),changed.has("autoHide")&&!this.forced&&(this.hasUpdated||this.autoHide)&&this.applyComputedMode(this.hasUpdated?void 0:{silent:!0}),this.hasUpdated&&changed.has("preferredMode")&&!this.forced&&this.applyComputedMode(),changed.has("autoHide")&&!this.autoHide&&this.resetPeek(),this.peekAfterUnpin&&(this.peekAfterUnpin=!1,changed.has("preferredMode")&&this.setPeeking(!0)),changed.has("open")||changed.has("mode")){const next=this._mode==="mobile"&&this.open;next!==this.overlayActive&&(this.hasUpdated&&this._mode==="mobile"&&!prefersReducedMotion(this)&&this.baseEl?.toggleAttribute("data-sliding",!0),this.overlayActive=next,this.placeToggle(next),next?(this.justOpened=!0,this.activateMobileOverlay()):this.deactivateMobileOverlay(this._mode==="mobile"))}}updated(changed){if(super.updated(changed),this.overlayActive&&this.nativeModal.show(),changed.has("topLayer"))for(const item of this.querySelectorAll(tag("app-rail-item")))item.syncRailTopLayer?.();if(this._lastReflectedMode!==this._mode&&(this._lastReflectedMode=this._mode,this.setAttribute("mode",this._mode)),this.pendingInitialModeAnnouncement!==void 0){const mode=this.pendingInitialModeAnnouncement;this.pendingInitialModeAnnouncement=void 0,this.emit("lr-mode-change",{mode})}if(this.syncSlottedItems(),this.placeToggle(this.overlayActive),this.syncExternalTriggerA11y(),this.syncBuiltInKeyShortcuts(),this.baseEl&&(this._mode!=="mobile"||!this.baseEl.getAnimations().some(animation=>"transitionProperty"in animation&&animation.transitionProperty==="transform"))&&this.baseEl.removeAttribute("data-sliding"),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("railWidth")&&!this.dragging||changed.has("preferredMode")||changed.has("persist"))&&this.persistState(),this.persistReady=!0,this.baseEl&&(this.resizable&&this.railWidth!=null&&this._mode==="full"?this.baseEl.style.setProperty("inline-size",`${this.effectiveRailWidthPx}px`):this.baseEl.style.removeProperty("inline-size"),this._peeking&&this.resizable&&this.railWidth!=null?this.baseEl.style.setProperty("--_lr-app-rail-peek-width",`${this.effectiveRailWidthPx}px`):this.baseEl.style.removeProperty("--_lr-app-rail-peek-width")),this.observeResizerPosition(),this.syncResizerPosition()}connectedCallback(){super.connectedCallback(),this.hotkeyWindow=this.ownerDocument.defaultView??void 0,this.hotkeyWindow&&(registerHotkeyOwner(this.hotkeyWindow,this,this.acceptsHotkey),this.hotkeyWindow.addEventListener("keydown",this.onHotkeyKeyDown)),this.setupMediaQueries(),this.hasUpdated&&this._mode==="mobile"&&this.open&&(this.overlayHandle?.isActive()?this.overlayHandle.resume():this.activateMobileOverlay(),queueMicrotask(()=>{this.nativeModal.show(),this.overlayHandle?.focusInitial()})),this.hasUpdated&&queueMicrotask(()=>{this.isConnected&&(this.syncSlottedItems(),this.observeResizerPosition(),this.syncResizerPosition(),this.syncExternalTriggerA11y())})}disconnectedCallback(){this.resetPeek({silent:!0}),this.disconnectResizerPosition(),this.nativeModal.hide(),this.hotkeyWindow&&(this.hotkeyWindow.removeEventListener("keydown",this.onHotkeyKeyDown),unregisterHotkeyOwner(this.hotkeyWindow,this),this.hotkeyWindow=void 0),this.baseEl?.removeAttribute("data-sliding"),cancelDeferredFocusReturn(this),super.disconnectedCallback(),this.restoreFallbackTabIndex?.(),this.teardownMediaQueries(),this.overlayHandle?.suspend(),this.endResizerGesture(),this.releaseExternalTriggerA11y()}adoptedCallback(){this.resetPeek({silent:!0}),this.disconnectResizerPosition(),super.adoptedCallback(),this.teardownMediaQueries(),this.endResizerGesture()}resolveExternalTrigger(){if(this.trigger)return this.trigger;if(!this.for)return null;const found=this.getRootNode().getElementById?.(this.for);return found instanceof HTMLElement?found:null}resolveFocusFallback(){const value=this.focusFallback;if(!value)return null;const target=typeof value=="string"?this.getRootNode().getElementById?.(value)??null:value;return isHtmlElement(target)&&target.ownerDocument===this.ownerDocument?target:null}activateMobileOverlay(){this.nativeModal.prepare();const explicitTrigger=this.explicitTrigger;this.explicitTrigger=void 0;const restoreFocusTo=explicitTrigger??this.resolveExternalTrigger()??void 0;this.overlayReturnIsExplicit=explicitTrigger!==void 0;const active=deepActiveElement(this.ownerDocument);this.overlayOpener=active&&typeof active.focus=="function"&&!composedContains(this,active)?active:null,this.overlayReturnTarget=restoreFocusTo??this.overlayOpener,this.overlayHandle=activateOverlay({host:this,panel:()=>this.shadowRoot?.querySelector('[part="panel"]')??null,onEscape:()=>this.setOpen(!1),onBackdrop:()=>this.setOpen(!1),restoreFocusTo,preferredInitialFocus:()=>{const panel=this.shadowRoot?.querySelector('[part="panel"]')??null;if(!panel)return null;const toggle=this.toggleEl??null;return collectFocusableElements(panel).filter(stop=>stop!==toggle)[0]??panel},lockScroll:!0,suspendWhenUnrendered:!0,deferredReturn:this.deferredReturnPass})}deactivateMobileOverlay(restoreFocus=!0){this.nativeModal.hide(),this.nativeModal.prepare(!1);const handle=this.overlayHandle;if(this.overlayHandle=void 0,handle&&restoreFocus&&!this.overlayReturnIsExplicit){const external=this.resolveExternalTrigger();external&&external!==this.overlayReturnTarget&&(this.overlayReturnTarget=external,handle.updateRestoreFocusTo(external))}handle?.deactivate({restoreFocus})}focusHostFallback(){if(!this.hasAttribute("tabindex")){this.setAttribute("tabindex","-1");const view=this.ownerDocument.defaultView,onFocusChange=()=>{deepActiveElement(this.ownerDocument)!==this&&restore()},restore=()=>{this.removeEventListener("blur",onFocusChange),view?.removeEventListener("focus",onFocusChange),this.getAttribute("tabindex")==="-1"&&this.removeAttribute("tabindex"),this.restoreFallbackTabIndex=void 0};this.restoreFallbackTabIndex=restore,this.addEventListener("blur",onFocusChange),view?.addEventListener("focus",onFocusChange)}return focusFirstAvailable(this)?!0:(this.restoreFallbackTabIndex?.(),!1)}placeToggle(insidePanel){const toggle=this.toggleEl,panel=this.baseEl;if(!(!toggle||!panel)){if(insidePanel){panel.firstChild!==toggle&&panel.insertBefore(toggle,panel.firstChild);return}toggle.nextSibling!==panel&&panel.parentNode?.insertBefore(toggle,panel)}}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(this.hasUpdated?void 0:{silent:!0})}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(options){this.setEffectiveMode(computeAppRailMode(this.iconOnlyMatches,this.mobileMatches,this.modePreference),options)}setEffectiveMode(next,options){if(this._mode===next)return;const old=this._mode,resizer=this.renderRoot?.querySelector('[part="resizer"]');old==="full"&&next==="icon-only"&&resizer&&composedContains(resizer,deepActiveElement(this.ownerDocument))&&(this.recoverInlineFocusAfterResponsiveClose=!0),next!=="mobile"&&this.baseEl?.removeAttribute("data-sliding"),old==="mobile"&&next!=="mobile"&&this.open&&(this.recoverInlineFocusAfterResponsiveClose=!0),this._mode=next,next!=="icon-only"&&(this.clearPeekOpen(),this.clearPeekClose(),this.setPeeking(!1)),this.baseEl&&(this.resizable&&this.railWidth!=null&&next==="full"||this.baseEl.style.removeProperty("inline-size")),this.requestUpdate("mode",old),options?.silent?this.pendingInitialModeAnnouncement=next: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",{expanded:next});return}const mode=this._mode,open=this.open;this.emit("lr-toggle-request",{expanded:next},{cancelable:!0}).defaultPrevented||this._mode!==mode||this.open!==open||(this.open=next,this.emit("lr-toggle",{expanded:next}))}toggleCollapse(){this._mode!=="mobile"&&(this.preferredMode=(this.preferredMode??this._mode)==="icon-only"?"full":"icon-only")}toggle(){this.isConnected&&(this._mode==="mobile"?this.setOpen(!this.open):this.toggleCollapse())}get resolvedHotkeyShortcuts(){const parsed=parseHotkey(this.hotkey);return hotkeyAriaKeyShortcuts(parsed&&hasNonShiftModifier(parsed)?parsed:null,detectPlatform(this.ownerDocument.defaultView?.navigator)==="mac")}syncBuiltInKeyShortcuts(){const value=this.resolvedHotkeyShortcuts;for(const control of[this.toggleEl,this.renderRoot.querySelector('[part="collapse-toggle"]'),this.renderRoot.querySelector('[part="pin-button"]')])!control||control.getAttribute("aria-keyshortcuts")===value||(value===null?control.removeAttribute("aria-keyshortcuts"):control.setAttribute("aria-keyshortcuts",value))}syncExternalTriggerA11y(){if(!this.isConnected){this.releaseExternalTriggerA11y();return}const mobile=this._mode==="mobile",trigger=mobile||this.triggerCollapses?this.resolveExternalTrigger():null;if(!trigger){this.releaseExternalTriggerA11y();return}const panel=this.baseEl??null,contribution={attributes:{"aria-expanded":(mobile?this.open:this._mode==="full")?"true":"false","aria-keyshortcuts":this.resolvedHotkeyShortcuts},controls:panel?[panel]:[]};this.triggerAria?this.triggerAria.update(trigger,contribution):this.triggerAria=acquireAriaOwnership(trigger,contribution)}releaseExternalTriggerA11y(){this.triggerAria?.release(),this.triggerAria=void 0}endResizerGesture(commit=!1){const pointerId=this.resizePointerId,changed=this.resizeGestureChanged,widthPx=this.effectiveRailWidthPx;this.resizePointerId=void 0,this.resizeGestureChanged=!1,this.setDragging(!1),pointerId!==void 0&&this.resizeController.end(pointerId),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.railWidth=next,commit?this.emit("lr-rail-resize",{widthPx:next}):this.resizeGestureChanged=!0,!0)}observeResizerPosition(){const resizer=this.renderRoot.querySelector('[part="resizer"]');if(!this.isConnected||!resizer||!this.baseEl||this._mode!=="full"||!this.resizable){this.disconnectResizerPosition();return}if(this.observedResizer===resizer)return;this.disconnectResizerPosition();const ResizeObserverConstructor=this.ownerDocument.defaultView?.ResizeObserver;ResizeObserverConstructor&&(this.resizerPositionObserver=new ResizeObserverConstructor(()=>this.syncResizerPosition()),this.resizerPositionObserver.observe(this,{box:"border-box"}),this.resizerPositionObserver.observe(this.baseEl,{box:"border-box"}),this.resizerPositionObserver.observe(resizer,{box:"border-box"}),this.observedResizer=resizer)}disconnectResizerPosition(){this.resizerPositionObserver?.disconnect(),this.resizerPositionObserver=void 0,this.observedResizer=void 0}syncResizerPosition(){const resizer=this.renderRoot.querySelector('[part="resizer"]');if(!resizer||!this.baseEl||this._mode!=="full"||!this.resizable)return;const hostRect=this.getBoundingClientRect(),baseRect=this.baseEl.getBoundingClientRect(),half=resizer.getBoundingClientRect().width/2,offset=this.getAttribute("dir")==="rtl"||isRtl(this)?hostRect.right-baseRect.left:baseRect.right-hostRect.left;resizer.style.setProperty("inset-inline-start",`${offset-half}px`),resizer.style.setProperty("inset-inline-end","auto")}renderResizer(){const railWidthPx=this.effectiveRailWidthPx;return html`<div
       part="resizer"
       role="separator"
       aria-orientation="vertical"
@@ -10,7 +10,7 @@ import{__decorate}from"tslib";import{NativeModalCarrier}from"../../../internal/n
       tabindex="0"
       @pointerdown=${this.onResizerPointerDown}
       @keydown=${this.onResizerKeyDown}
-    ><span part="resizer-track"></span></div>`}render(){const mobile=this._mode==="mobile",showCollapse=this.collapsible&&!mobile,expanded=this._mode!=="icon-only";return this.nativeModal.render(html`
+    ><span part="resizer-track"></span></div>`}render(){const mobile=this._mode==="mobile",showCollapse=this.collapsible&&!mobile&&!this.autoHide,pinned=this._mode==="full",showPin=this.autoHide&&!mobile&&(this._peeking||pinned),expanded=this._mode!=="icon-only",peekEvents=this.autoHide;return this.nativeModal.render(html`
       <button
         part="toggle"
         type="button"
@@ -30,11 +30,16 @@ import{__decorate}from"tslib";import{NativeModalCarrier}from"../../../internal/n
         aria-modal=${this.overlayActive&&!this.nativeModal.requested?"true":nothing}
         tabindex=${this.overlayActive||!mobile?"-1":nothing}
         ?inert=${mobile&&!this.open}
+        @pointerenter=${peekEvents?this.onPeekPointerEnter:nothing}
+        @pointermove=${peekEvents?this.onPeekPointerMove:nothing}
+        @pointerleave=${peekEvents?this.onPeekPointerLeave:nothing}
+        @focusin=${peekEvents?this.onPeekFocusIn:nothing}
+        @focusout=${peekEvents?this.onPeekFocusOut:nothing}
         @transitionend=${this.onPanelTransition}
         @transitioncancel=${this.onPanelTransition}
       >
         <span class="glass-scroll-layer" aria-hidden="true"></span>
-        <div part="header" ?hidden=${!this.hasHeaderSlot&&!showCollapse}>
+        <div part="header" ?hidden=${!this.hasHeaderSlot&&!showCollapse&&!showPin}>
           <slot name="header" @slotchange=${this.onHeaderSlotChange}></slot>
           ${showCollapse?html`<button
                 part="collapse-toggle"
@@ -44,6 +49,13 @@ import{__decorate}from"tslib";import{NativeModalCarrier}from"../../../internal/n
                 aria-label=${expanded?this.localize("appRailCollapse"):this.localize("appRailExpand")}
                 @click=${this.onCollapseToggleClick}
               ><span part="collapse-icon" aria-hidden="true">${chevronIcon()}</span></button>`:nothing}
+          ${showPin?html`<button
+                part="pin-button"
+                type="button"
+                aria-pressed=${pinned?"true":"false"}
+                aria-label=${pinned?this.localize("appRailUnpin"):this.localize("appRailPin")}
+                @click=${this.onPinClick}
+              ><span part="pin-icon" aria-hidden="true">${pinIcon()}</span></button>`:nothing}
         </div>
         <div part="nav" id=${this.navRegionId}>
           <slot @slotchange=${this.onNavSlotChange} @click=${this.onNavItemClick}></slot>
@@ -54,4 +66,4 @@ import{__decorate}from"tslib";import{NativeModalCarrier}from"../../../internal/n
         ${this.nativeModal.renderHelperSlot()}
       </div>
       ${this.resizable&&this._mode==="full"?this.renderResizer():nothing}
-    `,{label:this.accessibleLabel??this.label??this.localize("navigation")})}}__decorate([property({attribute:"icon-only-breakpoint",useDefault:!0})],LyraAppRail.prototype,"iconOnlyBreakpoint",void 0),__decorate([property({attribute:"mobile-breakpoint",useDefault:!0})],LyraAppRail.prototype,"mobileBreakpoint",void 0),__decorate([property({type:Boolean,reflect:!0,noAccessor:!0})],LyraAppRail.prototype,"open",void 0),__decorate([property({reflect:!0,converter:APP_RAIL_FRAME})],LyraAppRail.prototype,"frame",null),__decorate([property({type:Boolean,reflect:!0,attribute:"trigger-collapses"})],LyraAppRail.prototype,"triggerCollapses",void 0),__decorate([property({useDefault:!0})],LyraAppRail.prototype,"hotkey",void 0),__decorate([property()],LyraAppRail.prototype,"label",void 0),__decorate([property({attribute:"aria-label"})],LyraAppRail.prototype,"accessibleLabel",void 0),__decorate([property({attribute:"preferred-mode",noAccessor:!0})],LyraAppRail.prototype,"preferredMode",void 0),__decorate([property({attribute:"force-mode"})],LyraAppRail.prototype,"forceMode",null),__decorate([property({type:Boolean,reflect:!0,attribute:"without-toggle"})],LyraAppRail.prototype,"withoutToggle",void 0),__decorate([property({type:Boolean,reflect:!0})],LyraAppRail.prototype,"collapsible",void 0),__decorate([property({type:Boolean,reflect:!0,attribute:"top-layer"})],LyraAppRail.prototype,"topLayer",void 0),__decorate([property({attribute:!1})],LyraAppRail.prototype,"trigger",void 0),__decorate([property()],LyraAppRail.prototype,"for",void 0),__decorate([property({attribute:"focus-fallback"})],LyraAppRail.prototype,"focusFallback",void 0),__decorate([property({type:Boolean,reflect:!0})],LyraAppRail.prototype,"resizable",void 0),__decorate([property({attribute:"storage-key"})],LyraAppRail.prototype,"storageKey",void 0),__decorate([property({useDefault:!0})],LyraAppRail.prototype,"persist",void 0),__decorate([property({attribute:"rail-width",converter:RAIL_WIDTH_CONVERTER,noAccessor:!0})],LyraAppRail.prototype,"railWidth",void 0),__decorate([property({attribute:"min-rail-width",converter:RAIL_WIDTH_CONVERTER,useDefault:!0})],LyraAppRail.prototype,"minRailWidth",void 0),__decorate([property({attribute:"max-rail-width",converter:RAIL_WIDTH_CONVERTER,useDefault:!0})],LyraAppRail.prototype,"maxRailWidth",void 0),__decorate([state()],LyraAppRail.prototype,"hasHeaderSlot",void 0),__decorate([state()],LyraAppRail.prototype,"hasFooterSlot",void 0),__decorate([query('[part="base"], [part="panel"]')],LyraAppRail.prototype,"baseEl",void 0),__decorate([query('[part="toggle"]')],LyraAppRail.prototype,"toggleEl",void 0);export{LyraAppRail,computeAppRailMode2 as computeAppRailMode};
+    `,{label:this.accessibleLabel??this.label??this.localize("navigation")})}}__decorate([property({attribute:"icon-only-breakpoint",useDefault:!0})],LyraAppRail.prototype,"iconOnlyBreakpoint",void 0),__decorate([property({attribute:"mobile-breakpoint",useDefault:!0})],LyraAppRail.prototype,"mobileBreakpoint",void 0),__decorate([property({type:Boolean,reflect:!0,noAccessor:!0})],LyraAppRail.prototype,"open",void 0),__decorate([property({reflect:!0,converter:APP_RAIL_FRAME})],LyraAppRail.prototype,"frame",null),__decorate([property({type:Boolean,reflect:!0,attribute:"trigger-collapses"})],LyraAppRail.prototype,"triggerCollapses",void 0),__decorate([property({useDefault:!0})],LyraAppRail.prototype,"hotkey",void 0),__decorate([property()],LyraAppRail.prototype,"label",void 0),__decorate([property({attribute:"aria-label"})],LyraAppRail.prototype,"accessibleLabel",void 0),__decorate([property({attribute:"preferred-mode",noAccessor:!0})],LyraAppRail.prototype,"preferredMode",void 0),__decorate([property({attribute:"force-mode"})],LyraAppRail.prototype,"forceMode",null),__decorate([property({type:Boolean,reflect:!0,attribute:"without-toggle"})],LyraAppRail.prototype,"withoutToggle",void 0),__decorate([property({type:Boolean,reflect:!0,attribute:"auto-hide"})],LyraAppRail.prototype,"autoHide",void 0),__decorate([property({type:Number,attribute:"peek-open-delay",useDefault:!0})],LyraAppRail.prototype,"peekOpenDelay",void 0),__decorate([property({type:Number,attribute:"peek-close-delay",useDefault:!0})],LyraAppRail.prototype,"peekCloseDelay",void 0),__decorate([property({type:Boolean,reflect:!0})],LyraAppRail.prototype,"collapsible",void 0),__decorate([property({type:Boolean,reflect:!0,attribute:"top-layer"})],LyraAppRail.prototype,"topLayer",void 0),__decorate([property({attribute:!1})],LyraAppRail.prototype,"trigger",void 0),__decorate([property()],LyraAppRail.prototype,"for",void 0),__decorate([property({attribute:"focus-fallback"})],LyraAppRail.prototype,"focusFallback",void 0),__decorate([property({type:Boolean,reflect:!0})],LyraAppRail.prototype,"resizable",void 0),__decorate([property({attribute:"storage-key"})],LyraAppRail.prototype,"storageKey",void 0),__decorate([property({useDefault:!0})],LyraAppRail.prototype,"persist",void 0),__decorate([property({attribute:"rail-width",converter:RAIL_WIDTH_CONVERTER,noAccessor:!0})],LyraAppRail.prototype,"railWidth",void 0),__decorate([property({attribute:"min-rail-width",converter:RAIL_WIDTH_CONVERTER,useDefault:!0})],LyraAppRail.prototype,"minRailWidth",void 0),__decorate([property({attribute:"max-rail-width",converter:RAIL_WIDTH_CONVERTER,useDefault:!0})],LyraAppRail.prototype,"maxRailWidth",void 0),__decorate([state()],LyraAppRail.prototype,"_peeking",void 0),__decorate([state()],LyraAppRail.prototype,"hasHeaderSlot",void 0),__decorate([state()],LyraAppRail.prototype,"hasFooterSlot",void 0),__decorate([query('[part="base"], [part="panel"]')],LyraAppRail.prototype,"baseEl",void 0),__decorate([query('[part="toggle"]')],LyraAppRail.prototype,"toggleEl",void 0);export{LyraAppRail,computeAppRailMode2 as computeAppRailMode};

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

@@ -1 +1 @@
-import{iconHitTarget,focusRing}from"../../../internal/interactive-control.styles.js";import{css}from"lit";import{glassSurface}from"../../../internal/glass-surface.styles.js";import{glassScrollLayerStyles}from"../../../internal/glass-scroll-layer.styles.js";const styles=css` :host { display: block; position: relative; --_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); } [part="toggle"] { display: none; align-items: center; justify-content: center; font: inherit; ${iconHitTarget} 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; transition: var(--lr-transition-interactive); } :host([mode="mobile"]) [part="toggle"] { display: inline-flex; } :host([without-toggle][mode="mobile"]) [part="toggle"] { display: none; } :host([mode="mobile"][open]) [part="toggle"] { position: relative; z-index: calc(var(--lr-overlay-stack-index, var(--lr-layer-modal)) + 2); } [part="panel"] > [part="toggle"] { align-self: flex-end; flex: 0 0 auto; margin-block-start: var(--lr-space-s); margin-inline-end: var(--lr-space-s); } :host([without-toggle][mode="mobile"]) [part="panel"] > [part="toggle"] { display: inline-flex; } [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-glass-brand-text, 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-glass-brand-text, var(--lr-color-brand))); } [part="toggle"]:focus-visible { ${focusRing} } [part="backdrop"] { position: fixed; inset-block-start: var(--lr-app-rail-panel-inset-block-start, 0); inset-block-end: 0; inset-inline: 0; z-index: var(--lr-overlay-stack-index, var(--lr-layer-modal)); background: var( --lr-app-rail-overlay-color, var(--_lr-app-rail-overlay-color) ); } [part="base"] { position: relative; display: flex; flex-direction: column; inline-size: var(--lr-app-rail-width, var(--_lr-app-rail-width)); block-size: 100%; border-inline-end: var(--lr-border-width-thin) solid var(--lr-color-border-subtle); background: var( --lr-app-rail-bg, var(--lr-color-surface) ); padding-block-end: var(--lr-safe-area-bottom); overflow-y: auto; overflow-x: clip; transition: inline-size var(--lr-transition-base); } :host([resizable][mode="full"]) [part="base"] { border-inline-end-color: var(--lr-color-border); } :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"] { position: absolute; inset-block: 0; inset-inline-end: calc(var(--lr-icon-button-size) * -0.5); inline-size: var(--lr-icon-button-size); ${iconHitTarget} display: flex; align-items: stretch; justify-content: center; background: transparent; cursor: col-resize; touch-action: none; } [part="resizer-track"] { inline-size: var(--lr-size-3px); background: transparent; transition: background-color var(--lr-transition-fast); } [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 { ${focusRing} } [part="panel"] { position: fixed; inset-block-start: var(--lr-app-rail-panel-inset-block-start, 0); inset-block-end: 0; inset-inline-start: 0; z-index: calc(var(--lr-overlay-stack-index, var(--lr-layer-modal)) + 1); display: flex; flex-direction: column; inline-size: min( var(--lr-app-rail-mobile-width, var(--_lr-app-rail-mobile-width)), 85vw ); border-start-start-radius: var( --lr-app-rail-panel-radius-start-start, var(--lr-app-rail-panel-radius, 0) ); border-start-end-radius: var( --lr-app-rail-panel-radius-start-end, var(--lr-app-rail-panel-radius, 0) ); border-end-start-radius: var( --lr-app-rail-panel-radius-end-start, var(--lr-app-rail-panel-radius, 0) ); border-end-end-radius: var( --lr-app-rail-panel-radius-end-end, var(--lr-app-rail-panel-radius, 0) ); background: var( --lr-app-rail-panel-bg, var(--lr-color-surface-overlay) ); padding-block-end: var(--lr-safe-area-bottom); overflow-block: var(--lr-app-rail-panel-overflow-block, auto); overflow-inline: var(--lr-app-rail-panel-overflow-inline, clip); transform: translateX(calc(-100% - var(--lr-size-1px))); } [part="panel"][data-sliding] { transition: transform var(--lr-transition-base); } :host(:dir(rtl)) [part="panel"] { transform: translateX(calc(100% + var(--lr-size-1px))); } :host([mode="mobile"][open]) [part="panel"] { transform: none; box-shadow: var(--lr-app-rail-panel-shadow, var(--lr-shadow-l)); } [part="header"] { padding: var(--lr-app-rail-header-padding, var(--lr-space-m)); min-block-size: var(--lr-app-rail-header-min-block-size, auto); border-block-end: var(--lr-border-width-thin) solid var(--lr-color-border-subtle); } [part="header"][hidden] { display: none; } :host([collapsible]:not([mode="mobile"])) [part="header"] { display: flex; align-items: center; gap: var(--lr-space-s); } :host([collapsible][mode="icon-only"]) [part="header"] { justify-content: center; } [part="collapse-toggle"] { display: inline-flex; flex: 0 0 auto; margin-inline-start: auto; align-items: center; justify-content: center; font: inherit; ${iconHitTarget} padding: 0; border: 0; border-radius: var(--lr-radius); background: transparent; color: var(--lr-color-text); cursor: pointer; transition: var(--lr-transition-interactive); } :host([collapsible][mode="icon-only"]) [part="collapse-toggle"] { margin-inline-start: 0; } [part="collapse-toggle"]:hover { background: var(--lr-app-rail-collapse-toggle-hover-bg, var(--lr-color-brand-quiet)); color: var(--lr-app-rail-collapse-toggle-hover-color, var(--_lr-glass-brand-text, var(--lr-color-brand))); } [part="collapse-toggle"]:active { background: var( --lr-app-rail-collapse-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-collapse-toggle-active-color, var(--_lr-glass-brand-text, var(--lr-color-brand))); } [part="collapse-toggle"]:focus-visible { ${focusRing} } [part="collapse-icon"] { display: inline-flex; transform: rotate(180deg); } [part="collapse-toggle"]:where([aria-expanded="false"]) [part="collapse-icon"] { transform: none; } :host(:dir(rtl)) [part="collapse-icon"] { transform: none; } :host(:dir(rtl)) [part="collapse-toggle"]:where([aria-expanded="false"]) [part="collapse-icon"] { transform: rotate(180deg); } [part="footer"] { padding: var(--lr-app-rail-footer-padding, var(--lr-space-m)); border-block-start: var(--lr-border-width-thin) solid var(--lr-color-border-subtle); } [part="footer"][hidden] { display: none; } [part="nav"] { flex: 1 1 auto; overflow-y: auto; overflow-x: clip; padding: var(--lr-app-rail-nav-padding, var(--lr-space-s)); display: flex; flex-direction: column; gap: var(--lr-app-rail-nav-gap, var(--lr-space-xs)); } :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="collapse-toggle"], [part="resizer-track"] { transition: none !important; } } :host([frame="card"]:not([mode="mobile"])) { display: flow-root; --_lr-app-rail-frame-gap: var(--lr-app-rail-frame-gap, var(--lr-space-s)); } :host([frame="card"]) [part="base"] { margin: var(--_lr-app-rail-frame-gap); block-size: calc(100% - 2 * var(--_lr-app-rail-frame-gap)); border: var(--lr-border-width-thin) solid var(--lr-color-border-subtle); border-radius: var(--lr-app-rail-frame-radius, var(--lr-radius)); box-shadow: var(--lr-app-rail-frame-shadow, var(--lr-shadow-s)); } :host([frame="card"]) [part="resizer"] { inset-block: var(--_lr-app-rail-frame-gap); inset-inline-end: calc(var(--_lr-app-rail-frame-gap) - var(--lr-icon-button-size) * 0.5); } :host([frame="plain"]) [part="base"] { border-inline-end: 0; background: var(--lr-app-rail-bg, transparent); } @media (forced-colors: active) { :host([frame="plain"]) [part="base"] { border-inline-end: var(--lr-border-width-thin) solid var(--lr-color-border); } } ${glassScrollLayerStyles} ${glassSurface(':host(:not([frame="plain"])) [part="base"]',css`var(--lr-app-rail-bg, var(--lr-color-surface))`,void 0,!0)} ${glassSurface('[part="panel"]',css`var(--lr-app-rail-panel-bg, var(--lr-color-surface-overlay))`,void 0,!0)} `;export{styles};
+import{iconHitTarget,focusRing}from"../../../internal/interactive-control.styles.js";import{css}from"lit";import{glassSurface}from"../../../internal/glass-surface.styles.js";import{glassScrollLayerStyles}from"../../../internal/glass-scroll-layer.styles.js";const styles=css` :host { display: block; position: relative; --_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); } [part="toggle"] { display: none; align-items: center; justify-content: center; font: inherit; ${iconHitTarget} 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; transition: var(--lr-transition-interactive); } :host([mode="mobile"]) [part="toggle"] { display: inline-flex; } :host([without-toggle][mode="mobile"]) [part="toggle"] { display: none; } :host([mode="mobile"][open]) [part="toggle"] { position: relative; z-index: calc(var(--lr-overlay-stack-index, var(--lr-layer-modal)) + 2); } [part="panel"] > [part="toggle"] { align-self: flex-end; flex: 0 0 auto; margin-block-start: var(--lr-space-s); margin-inline-end: var(--lr-space-s); } :host([without-toggle][mode="mobile"]) [part="panel"] > [part="toggle"] { display: inline-flex; } [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-glass-brand-text, 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-glass-brand-text, var(--lr-color-brand))); } [part="toggle"]:focus-visible { ${focusRing} } [part="backdrop"] { position: fixed; inset-block-start: var(--lr-app-rail-panel-inset-block-start, 0); inset-block-end: 0; inset-inline: 0; z-index: var(--lr-overlay-stack-index, var(--lr-layer-modal)); background: var( --lr-app-rail-overlay-color, var(--_lr-app-rail-overlay-color) ); } [part="base"] { position: relative; display: flex; flex-direction: column; inline-size: var(--lr-app-rail-width, var(--_lr-app-rail-width)); block-size: 100%; border-inline-end: var(--lr-border-width-thin) solid var(--lr-color-border-subtle); background: var( --lr-app-rail-bg, var(--lr-color-surface) ); padding-block-end: var(--lr-safe-area-bottom); overflow-y: auto; overflow-x: clip; transition: inline-size var(--lr-transition-base); } :host([resizable][mode="full"]) [part="base"] { border-inline-end-color: var(--lr-color-border); } :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; } :host([auto-hide]:not([mode="mobile"])) [part="base"] { transition: inline-size var(--lr-transition-base), margin-inline-end var(--lr-transition-base); } :host([auto-hide][peeking]) [part="base"] { --_lr-app-rail-peek-full: var( --_lr-app-rail-peek-width, var(--lr-app-rail-width, var(--_lr-app-rail-width)) ); inline-size: var(--_lr-app-rail-peek-full); margin-inline-end: calc( var(--lr-app-rail-icon-width, var(--_lr-app-rail-icon-width)) - var(--_lr-app-rail-peek-full) ); z-index: var(--lr-layer-dropdown); background: var(--lr-app-rail-peek-bg, var(--lr-color-surface-overlay)); box-shadow: var(--lr-app-rail-peek-shadow, var(--lr-shadow-l)); } :host([auto-hide][peeking][frame="card"]) [part="base"] { margin-inline-end: calc( var(--_lr-app-rail-frame-gap) + var(--lr-app-rail-icon-width, var(--_lr-app-rail-icon-width)) - var(--_lr-app-rail-peek-full) ); } [part="resizer"] { position: absolute; inset-block: 0; inset-inline-end: calc(var(--lr-icon-button-size) * -0.5); inline-size: var(--lr-icon-button-size); ${iconHitTarget} display: flex; align-items: stretch; justify-content: center; background: transparent; cursor: col-resize; touch-action: none; } [part="resizer-track"] { inline-size: var(--lr-size-3px); background: transparent; transition: background-color var(--lr-transition-fast); } [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 { ${focusRing} } [part="panel"] { position: fixed; inset-block-start: var(--lr-app-rail-panel-inset-block-start, 0); inset-block-end: 0; inset-inline-start: 0; z-index: calc(var(--lr-overlay-stack-index, var(--lr-layer-modal)) + 1); display: flex; flex-direction: column; inline-size: min( var(--lr-app-rail-mobile-width, var(--_lr-app-rail-mobile-width)), 85vw ); border-start-start-radius: var( --lr-app-rail-panel-radius-start-start, var(--lr-app-rail-panel-radius, 0) ); border-start-end-radius: var( --lr-app-rail-panel-radius-start-end, var(--lr-app-rail-panel-radius, 0) ); border-end-start-radius: var( --lr-app-rail-panel-radius-end-start, var(--lr-app-rail-panel-radius, 0) ); border-end-end-radius: var( --lr-app-rail-panel-radius-end-end, var(--lr-app-rail-panel-radius, 0) ); background: var( --lr-app-rail-panel-bg, var(--lr-color-surface-overlay) ); padding-block-end: var(--lr-safe-area-bottom); overflow-block: var(--lr-app-rail-panel-overflow-block, auto); overflow-inline: var(--lr-app-rail-panel-overflow-inline, clip); transform: translateX(calc(-100% - var(--lr-size-1px))); } [part="panel"][data-sliding] { transition: transform var(--lr-transition-base); } :host(:dir(rtl)) [part="panel"] { transform: translateX(calc(100% + var(--lr-size-1px))); } :host([mode="mobile"][open]) [part="panel"] { transform: none; box-shadow: var(--lr-app-rail-panel-shadow, var(--lr-shadow-l)); } [part="header"] { padding: var(--lr-app-rail-header-padding, var(--lr-space-m)); min-block-size: var(--lr-app-rail-header-min-block-size, auto); border-block-end: var(--lr-border-width-thin) solid var(--lr-color-border-subtle); } [part="header"][hidden] { display: none; } :host([collapsible]:not([mode="mobile"])) [part="header"] { display: flex; align-items: center; gap: var(--lr-space-s); } :host([collapsible][mode="icon-only"]) [part="header"] { justify-content: center; } [part="collapse-toggle"] { display: inline-flex; flex: 0 0 auto; margin-inline-start: auto; align-items: center; justify-content: center; font: inherit; ${iconHitTarget} padding: 0; border: 0; border-radius: var(--lr-radius); background: transparent; color: var(--lr-color-text); cursor: pointer; transition: var(--lr-transition-interactive); } :host([collapsible][mode="icon-only"]) [part="collapse-toggle"] { margin-inline-start: 0; } [part="collapse-toggle"]:hover { background: var(--lr-app-rail-collapse-toggle-hover-bg, var(--lr-color-brand-quiet)); color: var(--lr-app-rail-collapse-toggle-hover-color, var(--_lr-glass-brand-text, var(--lr-color-brand))); } [part="collapse-toggle"]:active { background: var( --lr-app-rail-collapse-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-collapse-toggle-active-color, var(--_lr-glass-brand-text, var(--lr-color-brand))); } [part="collapse-toggle"]:focus-visible { ${focusRing} } [part="collapse-icon"] { display: inline-flex; transform: rotate(180deg); } [part="collapse-toggle"]:where([aria-expanded="false"]) [part="collapse-icon"] { transform: none; } :host(:dir(rtl)) [part="collapse-icon"] { transform: none; } :host(:dir(rtl)) [part="collapse-toggle"]:where([aria-expanded="false"]) [part="collapse-icon"] { transform: rotate(180deg); } :host([auto-hide]:not([mode="mobile"])) [part="header"]:not([hidden]) { display: flex; align-items: center; gap: var(--lr-space-s); } :host([auto-hide][mode="icon-only"]:not([peeking])) [part="header"] { justify-content: center; } [part="pin-button"] { display: inline-flex; flex: 0 0 auto; margin-inline-start: auto; align-items: center; justify-content: center; font: inherit; ${iconHitTarget} padding: 0; border: 0; border-radius: var(--lr-radius); background: transparent; color: var(--lr-color-text); cursor: pointer; transition: var(--lr-transition-interactive); } [part="pin-button"]:where([aria-pressed="true"]) { color: var(--lr-color-brand); } [part="pin-button"]:hover { background: var(--lr-app-rail-pin-hover-bg, var(--lr-color-brand-quiet)); color: var(--lr-app-rail-pin-hover-color, var(--_lr-glass-brand-text, var(--lr-color-brand))); } [part="pin-button"]:active { background: color-mix( in oklab, var(--lr-app-rail-pin-hover-bg, var(--lr-color-brand-quiet)), var(--lr-color-mix-partner) var(--lr-color-mix-active) ); } [part="pin-button"]:focus-visible { ${focusRing} } [part="pin-icon"] { display: inline-flex; } [part="footer"] { padding: var(--lr-app-rail-footer-padding, var(--lr-space-m)); border-block-start: var(--lr-border-width-thin) solid var(--lr-color-border-subtle); } [part="footer"][hidden] { display: none; } [part="nav"] { flex: 1 1 auto; overflow-y: auto; overflow-x: clip; padding: var(--lr-app-rail-nav-padding, var(--lr-space-s)); display: flex; flex-direction: column; gap: var(--lr-app-rail-nav-gap, var(--lr-space-xs)); } :host([mode="icon-only"]:not([peeking])) [part="nav"] { align-items: center; } :host([mode="icon-only"]:not([peeking])) ::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="collapse-toggle"], [part="pin-button"], [part="resizer-track"] { transition: none !important; } } :host([frame="card"]:not([mode="mobile"])) { display: flow-root; --_lr-app-rail-frame-gap: var(--lr-app-rail-frame-gap, var(--lr-space-s)); } :host([frame="card"]) [part="base"] { margin: var(--_lr-app-rail-frame-gap); block-size: calc(100% - 2 * var(--_lr-app-rail-frame-gap)); border: var(--lr-border-width-thin) solid var(--lr-color-border-subtle); border-radius: var(--lr-app-rail-frame-radius, var(--lr-radius)); box-shadow: var(--lr-app-rail-frame-shadow, var(--lr-shadow-s)); } :host([frame="card"]) [part="resizer"] { inset-block: var(--_lr-app-rail-frame-gap); inset-inline-end: calc(var(--_lr-app-rail-frame-gap) - var(--lr-icon-button-size) * 0.5); } :host([frame="plain"]) [part="base"] { border-inline-end: 0; background: var(--lr-app-rail-bg, transparent); } @media (forced-colors: active) { :host([frame="plain"]) [part="base"] { border-inline-end: var(--lr-border-width-thin) solid var(--lr-color-border); } } ${glassScrollLayerStyles} ${glassSurface(':host(:not([frame="plain"])) [part="base"]',css`var(--lr-app-rail-bg, var(--lr-color-surface))`,void 0,!0)} ${glassSurface('[part="panel"]',css`var(--lr-app-rail-panel-bg, var(--lr-color-surface-overlay))`,void 0,!0)} `;export{styles};