@aceshooting/lyra-ui 16.0.0 → 18.0.0

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

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

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

@@ -1,4 +1,4 @@
-import{type TemplateResult,type PropertyValues}from'lit';import{LyraElement}from'../../../internal/lyra-element.js';
+import{type TemplateResult,type PropertyValues}from'lit';import{LyraElement}from'../../../internal/lyra-element.js';export interface LyraAppRailItemToggleDetail{open:boolean;}export interface LyraAppRailItemEventMap{'lr-toggle-request':CustomEvent<LyraAppRailItemToggleDetail>;'lr-toggle':CustomEvent<LyraAppRailItemToggleDetail>;}
 /**
 * `<lr-app-rail-item>` — an explicit icon/label navigation item for
 * `<lr-app-rail>`. The rail sets its `icon-only` attribute as the viewport
@@ -13,6 +13,30 @@ import{type TemplateResult,type PropertyValues}from'lit';import{LyraElement}from
 * to the stable owning rail surface when there is no return target; a newer external focus move
 * always wins.
 *
+* An item may own its own expandable child list -- the treeitem-with-link pattern used by
+* repository trees, Notion-style page trees and IDE explorers, where the row itself is a
+* destination and a SEPARATE disclosure expands that one item's own nested rows beneath it.
+* `<lr-app-rail-group>` cannot express this: its collapsible heading IS the toggle, so nesting a
+* navigable link inside it would put an interactive element inside a button. Slotting one or more
+* `<lr-app-rail-item>`s into `children` instead renders a built-in disclosure -- a SIBLING of
+* `[part="base"]`, never nested inside it, so the link keeps navigating on its own and the
+* disclosure keeps toggling on its own; clicking one never triggers the other. The disclosure
+* carries `aria-expanded`/`aria-controls` and a localized accessible name interpolating this
+* item's own label, mirroring `<lr-app-rail-group>`'s collapsible contract for event name, detail
+* shape and cancelable request/commit semantics exactly (see `lr-toggle-request`/`lr-toggle`
+* below). An item with nothing slotted into `children` renders no disclosure and no extra
+* wrapper -- byte-identical to an item with no children slot at all.
+*
+* `icon-only` forwards onto every `<lr-app-rail-item>` this item DIRECTLY owns through `children`,
+* exactly how `<lr-app-rail-group>` forwards onto the items and nested groups it owns -- so a
+* nested item's own icon/label presentation tracks the rail's presentation without the rail
+* reaching through two hosts. The disclosure itself never changes shape between presentations: it
+* is always a fixed icon-button-sized square beside `[part="base"]`, the same footprint `end` and
+* icon-only `[part="base"]` already use, so it needs no icon-only-specific styling of its own.
+* There is no ancestor-current treatment: `<lr-app-rail-group>` has no equivalent concept for a
+* group containing the current item, so none is invented here either -- a current descendant
+* stays perceivable only through its own `current` property, exactly as an unnested item would.
+*
 * @customElement lr-app-rail-item
 * @slot - The visible navigation label.
 * @slot icon - The leading decorative icon. Its flattened subtree is inert and hidden from
@@ -26,6 +50,19 @@ import{type TemplateResult,type PropertyValues}from'lit';import{LyraElement}from
 *   `header-actions`), so a slotted control keeps its own click, keyboard activation and focus
 *   order instead of being swallowed by the item's own activation target. Unlike `meta` it stays
 *   visible in `icon-only` mode, where it shares the narrow rail's width with the icon.
+* @slot children - Nested `<lr-app-rail-item>`s disclosed beneath this item. Rendering anything
+*   into this slot grows a built-in disclosure button (`[part="toggle"]`) as a sibling of
+*   `[part="base"]`; leaving it empty renders neither the disclosure nor `[part="children"]`.
+* @event lr-toggle-request - Cancelable proposal emitted before `expanded` changes from the
+*   built-in disclosure. Call `preventDefault()` to keep the current state, or assign `expanded`
+*   from the listener to resolve it yourself -- a write during the dispatch suppresses the default
+*   commit even when it assigns the value the property already held. Not emitted for a direct
+*   `expanded` write. `detail: LyraAppRailItemToggleDetail` (`{ open: boolean }` -- the field is
+*   named `open`, matching `<lr-app-rail-group>`'s identical event name and detail shape exactly,
+*   so a listener bound to both components' `lr-toggle-request` need not branch on which fired).
+* @event lr-toggle - The item finished expanding or collapsing its `children`. Non-cancelable,
+*   emitted after `expanded` is written, and never emitted for a vetoed or listener-resolved
+*   request. `detail: LyraAppRailItemToggleDetail`.
 * @csspart base - The link or button receiving focus and activation.
 * @csspart icon - The icon wrapper.
 * @csspart label - The label wrapper; visually clipped in icon-only mode.
@@ -36,6 +73,17 @@ import{type TemplateResult,type PropertyValues}from'lit';import{LyraElement}from
 *   an item without secondary text renders exactly as before the slot existed.
 * @csspart end - The wrapper around the `end` slot, following `[part="meta"]`. Hidden while empty
 *   for the same reason.
+* @csspart toggle - The disclosure control, rendered only while something is slotted into
+*   `children`. A sibling of `[part="base"]`, never nested inside it, so activating one never
+*   triggers the other. Carries `aria-expanded` in both states and `aria-controls` pointing at
+*   `[part="children"]`'s id; its accessible name is a localized `this.localize()` template
+*   interpolating this item's own label, with no literal fallback.
+* @csspart toggle-icon - The wrapper around the disclosure chevron. Direction-aware through this
+*   wrapper's own `transform`, never a second mirrored glyph -- mirrors
+*   `<lr-app-rail-group>`'s `[part="toggle-icon"]`.
+* @csspart children - The wrapper around the `children` slot. Rendered only while something is
+*   slotted into `children`; hidden (but present, so `aria-controls` keeps resolving) while
+*   `expanded` is `false`.
 * @csspart tooltip - The hover/focus label flyout, only rendered while `tooltip` is set, the item
 *   is `icon-only`, and it is hovered or focused.
 * @cssprop [--lr-app-rail-item-current-bg=var(--lr-color-brand-quiet)] - Background of the
@@ -55,6 +103,17 @@ import{type TemplateResult,type PropertyValues}from'lit';import{LyraElement}from
 *   `[part="current-indicator"]` while current.
 * @cssprop [--lr-app-rail-item-current-indicator-inset-inline=0 auto] - Logical inline-start and
 *   inline-end insets for `[part="current-indicator"]`; set `auto 0` to place it at inline-end.
+* @cssprop [--lr-app-rail-item-current-indicator-display] - `[part="current-indicator"]`'s
+*   `display` while `icon-only`. Unset (the default), the indicator is suppressed there -- a
+*   full-height edge bar on the square icon-only tile reads as a rendering glitch. Set to `block`
+*   (or any non-`none` display) to restore it. Full presentation is unaffected either way; its own
+*   `[part="current-indicator"]` rule declares no `display` at all.
+* @cssprop [--lr-app-rail-item-current-ring] - `box-shadow` on `[part="base"]` while
+*   `current`/`aria-current="page"`. Unset, icon-only gets an inset ring by default -- the
+*   non-color-only signal that replaces the indicator bar suppressed there (WCAG 1.4.1); full
+*   presentation, which already conveys current state through the indicator bar and
+*   `--lr-app-rail-item-current-font-weight`, stays ring-free (`none`) by default. Setting this
+*   token explicitly applies the same value in both presentations.
 * @cssprop [--lr-app-rail-item-hover-bg=var(--lr-color-brand-quiet)] - Hover background.
 * @cssprop [--lr-app-rail-item-hover-color=var(--lr-color-brand)] - Hover text/icon color.
 * @cssprop --lr-app-rail-item-active-bg - Pressed background; defaults to the former brand-quiet
@@ -73,12 +132,25 @@ import{type TemplateResult,type PropertyValues}from'lit';import{LyraElement}from
 *   font size.
 * @cssprop [--lr-app-rail-item-icon-size=var(--lr-icon-button-size)] - `[part="icon"]`'s inline
 *   size. Not floor-clamped -- the icon is decorative, not itself a pointer target.
+* @cssprop [--lr-app-rail-item-icon-only-size] - When set, sizes `[part="base"]`'s icon-only
+*   square (`inline-size` and `block-size` alike) directly, independent of the row's own
+*   `--lr-app-rail-item-min-block-size`. Unset (the default), the square is still derived via
+*   `aspect-ratio: 1` against the row's block size, exactly as before. Still floor-clamped to
+*   `--lr-icon-button-size` by `[part="base"]`'s shared `min-block-size` rule.
 * @cssprop [--lr-app-rail-item-font-size=inherit] - `[part="base"]`'s font size, set after the
 *   `font` shorthand so it alone can be retuned while family/weight/line-height stay inherited.
+* @cssprop --lr-positioning-strategy - Cascading `absolute`/`fixed` override for the icon-only
+*   flyout tooltip's `fixed` default, read from computed style when it is (re)positioned. Set it
+*   once on `:root`, a theme, or one clipping ancestor to change every unset rail item beneath it;
+*   an unrecognized value falls back to `fixed`.
+* @cssprop [--lr-app-rail-item-indent=var(--lr-space-l)] - `[part="children"]`'s
+*   `padding-inline-start`. Applied once per nesting level -- a doubly-nested `children` list
+*   compounds two insets automatically, since each level's own `[part="children"]` applies the
+*   token again. Logical, so it mirrors under `dir="rtl"` with no separate rule.
 * @status stable
 * @since 4.0.0
 */
-export declare class LyraAppRailItem extends LyraElement{static styles:import("lit").CSSResultGroup[];static get observedAttributes():string[];
+export declare class LyraAppRailItem extends LyraElement<LyraAppRailItemEventMap>{static styles:import("lit").CSSResultGroup[];static get observedAttributes():string[];
 /** Optional destination. Without `href`, the item renders as a button. */
 href:string;
 /** Optional link target. */
@@ -95,10 +167,43 @@ current:boolean;
 *  documented property instead of an unverified cross-browser `::part()` + `::after` + `attr()`
 *  composition. No effect outside icon-only mode, since the label is already visible there.
 *  `false` (the default) reproduces today's exact output. */
-tooltip:boolean;private showTooltip;
+tooltip:boolean;
+/** Whether this item's `children` are shown. `false` by default -- a nested list expanding
+*  itself on first paint would be a surprising default, and it reproduces exactly what an item
+*  with no `expanded` property rendered before this feature existed. Mirrors
+*  `<lr-app-rail-group>`'s `open` accessor: every write, including one that assigns the value
+*  already held, marks the veto guard so a synchronous `lr-toggle-request` listener resolving
+*  this itself is observed correctly (see {@link VetoWriteGuard}). */
+get expanded():boolean;set expanded(next:boolean);private _expanded;private readonly toggleGuard;private showTooltip;
 /** `:empty` cannot see slotted light-DOM content (the wrapper always holds a `<slot>` element),
 *  so emptiness is tracked from `slotchange` the same way `<lr-details>` tracks its own
 *  `header-actions` wrapper. */
-private hasEndSlot;private hasMetaSlot;private stopPositioning?;private labelObserver?;private semanticFocusRepair?;private focusReturnTarget?;connectedCallback():void;private armLabelObserver;private get labelText();private get tooltipText();private onFocusShow;private onBlurHide;private onEndSlotChange;private onMetaSlotChange;attributeChangedCallback(name:string,oldValue:string|null,newValue:string|null):void;protected willUpdate(changed:PropertyValues):void;protected updated(changed:PropertyValues):void;disconnectedCallback():void;private focusFallback;
+private hasEndSlot;private hasMetaSlot;private metaSlot?;private endSlot?;private stopPositioning?;private labelObserver?;private childrenObserver?;private semanticFocusRepair?;private focusReturnTarget?;private readonly childrenId;
+/** Reads the light-DOM `slot` attribute directly rather than a live `assignedNodes()` snapshot
+*  -- the same WebKit-safe pattern `<lr-app-rail>`'s own `onHeaderSlotChange`/`onFooterSlotChange`
+*  use -- so the very first render (before any mutation has ever fired) already renders the
+*  disclosure and `[part="children"]` when the item was authored with children in markup,
+*  with no flash of the childless state. Only ELEMENT children can carry a `slot` attribute, so
+*  reading `this.children` (not `this.childNodes`) already excludes stray text nodes. */
+private get hasChildrenSlotted();connectedCallback():void;private armLabelObserver;
+/** Watches the light DOM for a `children`-slotted node being added, removed, or re-slotted, so
+*  `hasChildrenSlotted` (read fresh from `render()`, never cached) triggers a re-render at the
+*  moment the disclosure/`[part="children"]` should appear or disappear -- including the very
+*  first time a consumer appends a nested item after construction. `childList` catches
+*  add/remove; the `subtree`-scoped `slot`-only `attributes` filter catches an existing child
+*  being re-slotted into or out of `children`, mirroring what a real `slotchange` listener would
+*  see for an always-rendered slot (this slot is instead rendered on demand, so there is no
+*  `<slot>` element to listen on while it does not exist). Also re-syncs this item's own
+*  `icon-only` forwarding onto whatever it owns, since either kind of mutation can change which
+*  nodes this item owns. */
+private armChildrenObserver;
+/** Mirrors this item's own `icon-only` state onto every `<lr-app-rail-item>` it DIRECTLY owns
+*  through `children` -- exactly how `<lr-app-rail-group>`'s `syncOwnedItems()` forwards onto the
+*  items and nested groups it owns. One owner per node: ownership is resolved from the node's
+*  PARENT, never the node itself, so a grandchild's own next sync does not immediately undo a
+*  grandparent's write, and a nested item's own `attributeChangedCallback` cascades the same
+*  forwarding one level further down in turn. Gated on `isConnected` so a detached item stops
+*  claiming ownership of nodes appended to it afterwards. */
+private syncOwnedChildren;private onToggleClick;private get labelText();private get tooltipText();private onFocusShow;private onBlurHide;private onEndSlotChange;private applyEndSlotPresence;private onMetaSlotChange;private applyMetaSlotPresence;attributeChangedCallback(name:string,oldValue:string|null,newValue:string|null):void;protected firstUpdated(changed:PropertyValues):void;protected willUpdate(changed:PropertyValues):void;protected updated(changed:PropertyValues):void;disconnectedCallback():void;private focusFallback;
 /** Activates the internal link or button. Disabled items remain inert. */
 click():void;render():TemplateResult;}declare global{interface HTMLElementTagNameMap{'lr-app-rail-item':LyraAppRailItem;}}

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

@@ -1,4 +1,4 @@
-var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html,nothing}from"lit";import{property,state}from"lit/decorators.js";import{activeElementIn}from"../../../internal/active-element.js";import{hostAriaLabel}from"../../../internal/a11y.js";import{applyComposedFocusRepair,captureComposedFocusRepair,isComposedFocusAvailable}from"../../../internal/focus-navigation.js";import{LyraElement}from"../../../internal/lyra-element.js";import{renderInertPresentation}from"../../../internal/inert-presentation.js";import{safeLinkHref}from"../../../internal/safe-url.js";import{deferredPlace as place}from"../../../internal/anchored-overlay-runtime.js";import{rtlAwarePlacement}from"../../../internal/rtl.js";import{styles}from"./app-rail-item.styles.js";class LyraAppRailItem extends LyraElement{constructor(){super(...arguments),this.href="",this.target="",this.disabled=!1,this.current=!1,this.tooltip=!1,this.showTooltip=!1,this.hasEndSlot=!1,this.hasMetaSlot=!1,this.onFocusShow=event=>{if(this.tooltip&&this.hasAttribute("icon-only")&&(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.hasEndSlot=event.target.assignedNodes({flatten:!0}).some(node=>node.nodeType!==3||(node.textContent??"").trim()!=="")},this.onMetaSlotChange=event=>{this.hasMetaSlot=event.target.assignedNodes({flatten:!0}).some(node=>node.nodeType!==3||(node.textContent??"").trim()!=="")}}static{this.styles=[LyraElement.styles,styles]}static get observedAttributes(){return[...super.observedAttributes,"icon-only"]}connectedCallback(){super.connectedCallback(),this.armLabelObserver()}armLabelObserver(){this.labelObserver?.disconnect();const MutationObserverCtor=this.ownerDocument.defaultView?.MutationObserver;MutationObserverCtor&&(this.labelObserver=new MutationObserverCtor(()=>{this.showTooltip&&this.requestUpdate()}),this.labelObserver.observe(this,{childList:!0,characterData:!0,subtree:!0}))}get labelText(){return Array.from(this.childNodes).filter(node=>node.nodeType===3?!0:node.nodeType!==1?!1:node.getAttribute("slot")!=="icon").map(n=>n.textContent??"").join("").trim()}get tooltipText(){return hostAriaLabel(this)??(this.labelText||"")}attributeChangedCallback(name,oldValue,newValue){super.attributeChangedCallback(name,oldValue,newValue),!(name!=="icon-only"||oldValue===newValue)&&(newValue===null&&(this.showTooltip=!1),this.requestUpdate())}willUpdate(changed){if(super.willUpdate(changed),changed.has("tooltip")&&!this.tooltip&&(this.showTooltip=!1),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);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;return}if(changed.has("showTooltip")||!this.stopPositioning){this.stopPositioning?.();const anchor=this.renderRoot.querySelector('[part="base"]');this.stopPositioning=place(anchor,popup,{placement:rtlAwarePlacement("right",this)})}}disconnectedCallback(){super.disconnectedCallback(),this.semanticFocusRepair=void 0,this.focusReturnTarget=void 0,this.labelObserver?.disconnect(),this.labelObserver=void 0,this.stopPositioning?.(),this.stopPositioning=void 0,this.showTooltip=!1}focusFallback(){if(this.focusReturnTarget&&isComposedFocusAvailable(this.focusReturnTarget))return this.focusReturnTarget;const owner=this.closest("lr-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`
+var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html,nothing}from"lit";import{property,query,state}from"lit/decorators.js";import{activeElementIn}from"../../../internal/active-element.js";import{hostAriaLabel,nextId}from"../../../internal/a11y.js";import{applyComposedFocusRepair,captureComposedFocusRepair,isComposedFocusAvailable}from"../../../internal/focus-navigation.js";import{chevronIcon}from"../../../internal/icons.js";import{collectInitialSlotAssignment}from"../../../internal/initial-slot-collection.js";import{LyraElement}from"../../../internal/lyra-element.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}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._expanded=!1,this.toggleGuard=new VetoWriteGuard,this.showTooltip=!1,this.hasEndSlot=!1,this.hasMetaSlot=!1,this.childrenId=nextId("app-rail-item-children"),this.onToggleClick=event=>{event.stopPropagation();const next=!this._expanded;requestThenCommit({requestDetail:{open:next},emitRequest:(detail,init)=>this.emit("lr-toggle-request",detail,init),guard:this.toggleGuard,commit:()=>{this.expanded=next,this.emit("lr-toggle",{open:next})}})},this.onFocusShow=event=>{if(this.tooltip&&this.hasAttribute("icon-only")&&(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"]}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.armLabelObserver(),this.armChildrenObserver(),this.syncOwnedChildren()}armLabelObserver(){this.labelObserver?.disconnect();const MutationObserverCtor=this.ownerDocument.defaultView?.MutationObserver;MutationObserverCtor&&(this.labelObserver=new MutationObserverCtor(()=>{this.showTooltip&&this.requestUpdate()}),this.labelObserver.observe(this,{childList:!0,characterData:!0,subtree:!0}))}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=>{if(node.nodeType===3)return!0;if(node.nodeType!==1)return!1;const slot=node.getAttribute("slot");return slot!=="icon"&&slot!=="children"}).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){super.attributeChangedCallback(name,oldValue,newValue),!(name!=="icon-only"||oldValue===newValue)&&(newValue===null&&(this.showTooltip=!1),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){if(super.willUpdate(changed),changed.has("tooltip")&&!this.tooltip&&(this.showTooltip=!1),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);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;return}if(changed.has("showTooltip")||!this.stopPositioning){this.stopPositioning?.();const anchor=this.renderRoot.querySelector('[part="base"]');this.stopPositioning=place(anchor,popup,{placement:rtlAwarePlacement("right",this),strategy:resolveEffectivePositioningStrategy(this,void 0,"fixed")})}}disconnectedCallback(){super.disconnectedCallback(),this.semanticFocusRepair=void 0,this.focusReturnTarget=void 0,this.labelObserver?.disconnect(),this.labelObserver=void 0,this.childrenObserver?.disconnect(),this.childrenObserver=void 0,this.stopPositioning?.(),this.stopPositioning=void 0,this.showTooltip=!1}focusFallback(){if(this.focusReturnTarget&&isComposedFocusAvailable(this.focusReturnTarget))return this.focusReturnTarget;const owner=this.closest("lr-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="icon"></slot>`,{part:"icon"})}
       <span part="label"><slot></slot></span>
@@ -6,31 +6,36 @@ var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3
         ><slot name="meta" @slotchange=${this.onMetaSlotChange}></slot></span
       ><span part="end" ?hidden=${!this.hasEndSlot}
         ><slot name="end" @slotchange=${this.onEndSlotChange}></slot></span
-      >`;return href&&!this.disabled?html`
-        <a
-          part="base"
-          href=${href}
-          target=${this.target||nothing}
-          rel=${this.target?"noopener noreferrer":nothing}
-          aria-label=${label??nothing}
-          aria-disabled="false"
-          aria-current=${this.current?"page":"false"}
-          @mouseenter=${this.onFocusShow}
-          @mouseleave=${this.onBlurHide}
-          @focus=${this.onFocusShow}
-          @blur=${this.onBlurHide}
-        >${content}</a>${adornments}${tooltip}
-      `:html`
-      <button
-        part="base"
-        type="button"
-        ?disabled=${this.disabled}
-        aria-disabled=${this.disabled?"true":"false"}
-        aria-label=${label??nothing}
-        aria-current=${this.current?"page":"false"}
-        @mouseenter=${this.onFocusShow}
-        @mouseleave=${this.onBlurHide}
-        @focus=${this.onFocusShow}
-        @blur=${this.onBlurHide}
-      >${content}</button>${adornments}${tooltip}
-    `}}__decorate([property()],LyraAppRailItem.prototype,"href",void 0),__decorate([property()],LyraAppRailItem.prototype,"target",void 0),__decorate([property({type:Boolean,reflect:!0})],LyraAppRailItem.prototype,"disabled",void 0),__decorate([property({type:Boolean,reflect:!0})],LyraAppRailItem.prototype,"current",void 0),__decorate([property({type:Boolean,reflect:!0})],LyraAppRailItem.prototype,"tooltip",void 0),__decorate([state()],LyraAppRailItem.prototype,"showTooltip",void 0),__decorate([state()],LyraAppRailItem.prototype,"hasEndSlot",void 0),__decorate([state()],LyraAppRailItem.prototype,"hasMetaSlot",void 0);export{LyraAppRailItem};
+      >`,hasChildren=this.hasChildrenSlotted,toggle=hasChildren?html`<button
+          part="toggle"
+          type="button"
+          aria-expanded=${this._expanded?"true":"false"}
+          aria-controls=${this.childrenId}
+          aria-label=${this.localize(this._expanded?"appRailItemCollapse":"appRailItemExpand",void 0,{label:this.tooltipText})}
+          @click=${this.onToggleClick}
+        ><span part="toggle-icon" aria-hidden="true">${chevronIcon()}</span></button>`:nothing,childrenList=hasChildren?html`<span part="children" id=${this.childrenId} ?hidden=${!this._expanded}
+          ><slot name="children"></slot
+        ></span>`:nothing,row=href&&!this.disabled?html`<a
+            part="base"
+            href=${href}
+            target=${this.target||nothing}
+            rel=${this.target?"noopener noreferrer":nothing}
+            aria-label=${label??nothing}
+            aria-disabled="false"
+            aria-current=${this.current?"page":"false"}
+            @mouseenter=${this.onFocusShow}
+            @mouseleave=${this.onBlurHide}
+            @focus=${this.onFocusShow}
+            @blur=${this.onBlurHide}
+          >${content}</a>${adornments}${toggle}${tooltip}`:html`<button
+            part="base"
+            type="button"
+            ?disabled=${this.disabled}
+            aria-disabled=${this.disabled?"true":"false"}
+            aria-label=${label??nothing}
+            aria-current=${this.current?"page":"false"}
+            @mouseenter=${this.onFocusShow}
+            @mouseleave=${this.onBlurHide}
+            @focus=${this.onFocusShow}
+            @blur=${this.onBlurHide}
+          >${content}</button>${adornments}${toggle}${tooltip}`;return html`<div class="row">${row}</div>${childrenList}`}}__decorate([property()],LyraAppRailItem.prototype,"href",void 0),__decorate([property()],LyraAppRailItem.prototype,"target",void 0),__decorate([property({type:Boolean,reflect:!0})],LyraAppRailItem.prototype,"disabled",void 0),__decorate([property({type:Boolean,reflect:!0})],LyraAppRailItem.prototype,"current",void 0),__decorate([property({type:Boolean,reflect:!0})],LyraAppRailItem.prototype,"tooltip",void 0),__decorate([property({type:Boolean,reflect:!0})],LyraAppRailItem.prototype,"expanded",null),__decorate([state()],LyraAppRailItem.prototype,"showTooltip",void 0),__decorate([state()],LyraAppRailItem.prototype,"hasEndSlot",void 0),__decorate([state()],LyraAppRailItem.prototype,"hasMetaSlot",void 0),__decorate([query('slot[name="meta"]')],LyraAppRailItem.prototype,"metaSlot",void 0),__decorate([query('slot[name="end"]')],LyraAppRailItem.prototype,"endSlot",void 0);export{LyraAppRailItem};

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

@@ -1 +1 @@
-import{css}from"lit";const styles=css`:host{align-items:center;gap:var(--lr-app-rail-item-gap,var(--lr-space-s));inline-size:100%;display:flex}[part=base]{justify-content:flex-start;align-items:center;gap:var(--lr-app-rail-item-gap,var(--lr-space-s));inline-size:100%;min-inline-size:0;min-block-size:max(var(--lr-icon-button-size), var(--lr-app-rail-item-min-block-size,var(--lr-icon-button-size)));padding:var(--lr-app-rail-item-padding,var(--lr-space-s));border-radius:var(--lr-radius);color:var(--lr-color-text);font:inherit;font-size:var(--lr-app-rail-item-font-size,inherit);text-align:start;cursor:pointer;transition:background-color var(--lr-transition-fast), color var(--lr-transition-fast);background:0 0;border:0;flex:auto;text-decoration:none;display:flex;position:relative}[part=base]:not([aria-disabled=true]):hover{background:var(--lr-app-rail-item-hover-bg,var(--lr-color-brand-quiet));color:var(--lr-app-rail-item-hover-color,var(--lr-color-brand))}[part=base]:not([aria-disabled=true]):active{background:var(--lr-app-rail-item-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-item-active-color,var(--lr-color-brand))}[part=base]:focus-visible{outline:var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);outline-offset:var(--lr-focus-ring-offset)}[part=base][aria-disabled=true]{opacity:var(--lr-opacity-disabled);cursor:not-allowed}[part=base][aria-current=page]{background:var(--lr-app-rail-item-current-bg,var(--lr-color-brand-quiet));color:var(--lr-app-rail-item-current-color,var(--lr-color-brand));font-weight:var(--lr-app-rail-item-current-font-weight,var(--lr-font-weight-semibold))}[part=current-indicator]{inset-block:0;inset-inline:var(--lr-app-rail-item-current-indicator-inset-inline,0 auto);inline-size:var(--lr-app-rail-item-current-indicator-width,var(--lr-size-2px));box-sizing:border-box;border-radius:var(--lr-radius-xs);background:var(--lr-app-rail-item-current-indicator-color,var(--lr-color-brand));pointer-events:none;z-index:var(--lr-layer-content);position:absolute}[part=icon]{inline-size:var(--lr-app-rail-item-icon-size,var(--lr-icon-button-size));min-inline-size:var(--lr-app-rail-item-icon-size,var(--lr-icon-button-size));flex:none;justify-content:center;align-items:center;display:inline-flex}[part=meta],[part=end]{flex:none;align-items:center;display:inline-flex}[part=meta][hidden],[part=end][hidden]{display:none}[part=meta]{color:var(--lr-app-rail-item-meta-color,var(--lr-color-text-quiet));font-size:var(--lr-app-rail-item-meta-font-size,var(--lr-font-size-sm))}[part=label]{text-overflow:ellipsis;white-space:nowrap;min-inline-size:0;overflow:hidden}:host([icon-only]) [part=label]{inline-size:var(--lr-size-1px);block-size:var(--lr-size-1px);margin:var(--lr-size-neg-1px);clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;padding:0;position:absolute;overflow:hidden}:host([icon-only]) [part=base]{aspect-ratio:1;flex:none;justify-content:center;inline-size:auto;padding-inline:0}:host([icon-only]){justify-content:center}:host([icon-only]) [part=meta]{inline-size:var(--lr-size-1px);block-size:var(--lr-size-1px);clip-path:inset(50%);white-space:nowrap;border:0;padding:0;overflow:hidden}[part=tooltip]{z-index:var(--lr-layer-dropdown);padding:var(--lr-size-0-25rem) var(--lr-space-s);border-radius:var(--lr-radius);background:var(--lr-color-text);color:var(--lr-color-surface);font-size:var(--lr-font-size-sm);box-sizing:border-box;max-inline-size:var(--lr-positioner-available-inline-size,calc(100vw - 2 * var(--lr-space-s)));overflow-wrap:anywhere;white-space:normal;pointer-events:none;position:fixed}`;export{styles};
+import{css}from"lit";const styles=css`:host{gap:var(--lr-app-rail-item-gap,var(--lr-space-s));flex-direction:column;inline-size:100%;display:flex}.row{align-items:center;gap:var(--lr-app-rail-item-gap,var(--lr-space-s));inline-size:100%;display:flex}[part=base]{justify-content:flex-start;align-items:center;gap:var(--lr-app-rail-item-gap,var(--lr-space-s));inline-size:100%;min-inline-size:0;min-block-size:max(var(--lr-icon-button-size), var(--lr-app-rail-item-min-block-size,var(--lr-icon-button-size)));padding:var(--lr-app-rail-item-padding,var(--lr-space-s));border-radius:var(--lr-radius);color:var(--lr-color-text);font:inherit;font-size:var(--lr-app-rail-item-font-size,inherit);text-align:start;cursor:pointer;transition:background-color var(--lr-transition-fast), color var(--lr-transition-fast);background:0 0;border:0;flex:auto;text-decoration:none;display:flex;position:relative}[part=base]:not([aria-disabled=true]):hover{background:var(--lr-app-rail-item-hover-bg,var(--lr-color-brand-quiet));color:var(--lr-app-rail-item-hover-color,var(--lr-color-brand))}[part=base]:not([aria-disabled=true]):active{background:var(--lr-app-rail-item-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-item-active-color,var(--lr-color-brand))}[part=base]:focus-visible{outline:var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);outline-offset:var(--lr-focus-ring-offset)}[part=base][aria-disabled=true]{opacity:var(--lr-opacity-disabled);cursor:not-allowed}[part=base][aria-current=page]{background:var(--lr-app-rail-item-current-bg,var(--lr-color-brand-quiet));color:var(--lr-app-rail-item-current-color,var(--lr-color-brand));font-weight:var(--lr-app-rail-item-current-font-weight,var(--lr-font-weight-semibold));box-shadow:var(--lr-app-rail-item-current-ring,none)}[part=current-indicator]{inset-block:0;inset-inline:var(--lr-app-rail-item-current-indicator-inset-inline,0 auto);inline-size:var(--lr-app-rail-item-current-indicator-width,var(--lr-size-2px));box-sizing:border-box;border-radius:var(--lr-radius-xs);background:var(--lr-app-rail-item-current-indicator-color,var(--lr-color-brand));pointer-events:none;z-index:var(--lr-layer-content);position:absolute}[part=icon]{inline-size:var(--lr-app-rail-item-icon-size,var(--lr-icon-button-size));min-inline-size:var(--lr-app-rail-item-icon-size,var(--lr-icon-button-size));flex:none;justify-content:center;align-items:center;display:inline-flex}[part=meta],[part=end]{flex:none;align-items:center;display:inline-flex}[part=meta][hidden],[part=end][hidden]{display:none}[part=meta]{color:var(--lr-app-rail-item-meta-color,var(--lr-color-text-quiet));font-size:var(--lr-app-rail-item-meta-font-size,var(--lr-font-size-sm))}[part=label]{text-overflow:ellipsis;white-space:nowrap;min-inline-size:0;overflow:hidden}:host([icon-only]) [part=label]{inline-size:var(--lr-size-1px);block-size:var(--lr-size-1px);margin:var(--lr-size-neg-1px);clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;padding:0;position:absolute;overflow:hidden}:host([icon-only]) [part=base]{inline-size:var(--lr-app-rail-item-icon-only-size,auto);block-size:var(--lr-app-rail-item-icon-only-size,auto);min-block-size:var(--lr-app-rail-item-icon-only-size,max(var(--lr-icon-button-size), var(--lr-app-rail-item-min-block-size,var(--lr-icon-button-size))));aspect-ratio:1;flex:none;justify-content:center;padding-inline:0}:host([icon-only]) .row{justify-content:center}:host([icon-only]) [part=current-indicator]{display:var(--lr-app-rail-item-current-indicator-display,none)}:host([icon-only]) [part=base][aria-current=page]{box-shadow:var(--lr-app-rail-item-current-ring,inset 0 0 0 var(--lr-border-width-thin) var(--lr-app-rail-item-current-indicator-color,var(--lr-color-brand)))}:host([icon-only]) [part=meta]{inline-size:var(--lr-size-1px);block-size:var(--lr-size-1px);clip-path:inset(50%);white-space:nowrap;border:0;padding:0;overflow:hidden}[part=toggle]{min-inline-size:var(--lr-icon-button-size);min-block-size:var(--lr-icon-button-size);aspect-ratio:1;border-radius:var(--lr-radius);color:inherit;font:inherit;cursor:pointer;transition:background-color var(--lr-transition-fast), color var(--lr-transition-fast);background:0 0;border:0;flex:none;justify-content:center;align-items:center;padding:0;display:flex}[part=toggle]:hover{background:var(--lr-app-rail-item-hover-bg,var(--lr-color-brand-quiet));color:var(--lr-app-rail-item-hover-color,var(--lr-color-brand))}[part=toggle]:active{background:var(--lr-app-rail-item-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-item-active-color,var(--lr-color-brand))}[part=toggle]:focus-visible{outline:var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);outline-offset:var(--lr-focus-ring-offset)}[part=toggle-icon]{transition:transform var(--lr-transition-fast);flex:none;display:inline-flex;transform:rotate(90deg)}[part=toggle]:where([aria-expanded=false]) [part=toggle-icon]{transform:none}:host(:dir(rtl)) [part=toggle]:where([aria-expanded=false]) [part=toggle-icon]{transform:rotate(180deg)}[part=children]{gap:var(--lr-app-rail-item-gap,var(--lr-space-s));flex-direction:column;inline-size:100%;padding-inline-start:var(--lr-app-rail-item-indent,var(--lr-space-l));display:flex}[part=children][hidden]{display:none}@media (prefers-reduced-motion:reduce){[part=toggle],[part=toggle-icon]{transition:none!important}}[part=tooltip]{z-index:var(--lr-layer-dropdown);padding:var(--lr-size-0-25rem) var(--lr-space-s);border-radius:var(--lr-radius);background:var(--lr-color-text);color:var(--lr-color-surface);font-size:var(--lr-font-size-sm);box-sizing:border-box;max-inline-size:var(--lr-positioner-available-inline-size,calc(100vw - 2 * var(--lr-space-s)));overflow-wrap:anywhere;white-space:normal;pointer-events:none;position:fixed}`;export{styles};

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

@@ -140,9 +140,27 @@ export declare function computeAppRailMode(iconOnlyMatches:boolean,mobileMatches
 * @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.
-* @cssprop [--lr-app-rail-panel-radius=0] - Corner radius of `[part="panel"]`. `0` (the default)
-*   reproduces today's flush-edged drawer; pairs naturally with a nonzero
-*   `--lr-app-rail-panel-inset-block-start`, which exposes the panel's top corners.
+* @cssprop [--lr-app-rail-panel-radius=0] - Uniform corner radius of `[part="panel"]`. `0` (the
+*   default) reproduces today's flush-edged drawer; pairs naturally with a nonzero
+*   `--lr-app-rail-panel-inset-block-start`, which exposes the panel's top corners. Each per-corner
+*   token below defaults to this one, so setting only this token still rounds all four corners
+*   uniformly, exactly as before the per-corner tokens existed.
+* @cssprop [--lr-app-rail-panel-radius-start-start=var(--lr-app-rail-panel-radius)] - Logical
+*   `border-start-start-radius` of `[part="panel"]` -- the corner at the drawer's own flush
+*   inline-start edge, block-start side.
+* @cssprop [--lr-app-rail-panel-radius-start-end=var(--lr-app-rail-panel-radius)] - Logical
+*   `border-start-end-radius` of `[part="panel"]` -- the corner away from the flush inline-start
+*   edge, block-start side. One of the two corners a flush-against-one-edge drawer typically
+*   rounds.
+* @cssprop [--lr-app-rail-panel-radius-end-start=var(--lr-app-rail-panel-radius)] - Logical
+*   `border-end-start-radius` of `[part="panel"]` -- the corner at the drawer's own flush
+*   inline-start edge, block-end side.
+* @cssprop [--lr-app-rail-panel-radius-end-end=var(--lr-app-rail-panel-radius)] - Logical
+*   `border-end-end-radius` of `[part="panel"]` -- the corner away from the flush inline-start
+*   edge, block-end side. The other corner a flush-against-one-edge drawer typically rounds. All
+*   four per-corner tokens are logical, so which physical corner each one paints swaps under
+*   `dir="rtl"` with no second consumer rule -- the panel's own flush edge stays its logical
+*   inline-start regardless of direction.
 * @cssprop [--lr-app-rail-panel-overflow-block=auto] - `[part="panel"]`'s logical
 *   `overflow-block`, paired with `--lr-app-rail-panel-overflow-inline` below.
 * @cssprop [--lr-app-rail-panel-overflow-inline=clip] - `[part="panel"]`'s logical
@@ -163,6 +181,10 @@ export declare function computeAppRailMode(iconOnlyMatches:boolean,mobileMatches
 *   is deliberately themed as a modal surface, not the docked rail chrome.
 * @cssprop [--lr-app-rail-header-padding=var(--lr-space-m)] - `[part="header"]`'s padding.
 * @cssprop [--lr-app-rail-footer-padding=var(--lr-space-m)] - `[part="footer"]`'s padding.
+* @cssprop [--lr-app-rail-nav-padding=var(--lr-space-s)] - `[part="nav"]`'s padding, unset
+*   reproducing the value this rule hard-coded before the token existed.
+* @cssprop [--lr-app-rail-nav-gap=var(--lr-space-xs)] - Gap between slotted items inside
+*   `[part="nav"]`, unset reproducing the value this rule hard-coded before the token existed.
 * @cssprop [--lr-app-rail-header-min-block-size=auto] - `[part="header"]`'s minimum block size.
 *   `auto` (the default) is the property's own initial value, so unset reproduces today's exact
 *   height; set it to reserve room for header content that mounts or resizes asynchronously.

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

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

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

@@ -98,7 +98,7 @@ collapsible:boolean;
 *  `trueDefaultBooleanConverter`: Lit's presence-based boolean converter cannot parse
 *  `open="false"`, so without it the property would be unsettable from markup.
 *  @default true */
-get open():boolean;set open(next:boolean);private _open;private readonly toggleGuard;private hasHeadingSlot;private hasHeaderActionsSlot;private readonly headingId;private readonly contentId;private get safeHeadingLevel();connectedCallback():void;attributeChangedCallback(name:string,oldValue:string|null,newValue:string|null):void;protected updated(changed:PropertyValues):void;
+get open():boolean;set open(next:boolean);private _open;private readonly toggleGuard;private hasHeadingSlot;private hasHeaderActionsSlot;private headingSlot?;private headerActionsSlot?;private readonly headingId;private readonly contentId;private get safeHeadingLevel();connectedCallback():void;attributeChangedCallback(name:string,oldValue:string|null,newValue:string|null):void;protected updated(changed:PropertyValues):void;protected firstUpdated(changed:PropertyValues):void;
 /** Mirrors this group's `icon-only` state onto every `<lr-app-rail-item>` and nested
 *  `<lr-app-rail-group>` it DIRECTLY owns. The rail cannot reach these itself:
 *  `assignedElements({ flatten: true })` expands nested `<slot>` elements, not element children,
@@ -125,4 +125,4 @@ private syncOwnedItems;
 *  ran again). Gate on the UNFLATTENED list first -- it never contains fallback -- and flatten
 *  only once something really is assigned, which still resolves a consumer's forwarding
 *  `<slot>` down to its own (possibly empty) content. */
-private onHeadingSlotChange;private onHeaderActionsSlotChange;private onContentSlotChange;private onToggleClick;render():TemplateResult;}declare global{interface HTMLElementTagNameMap{'lr-app-rail-group':LyraAppRailGroup;}}
+private onHeadingSlotChange;private applyHeadingSlotPresence;private onHeaderActionsSlotChange;private applyHeaderActionsSlotPresence;private onContentSlotChange;private onToggleClick;render():TemplateResult;}declare global{interface HTMLElementTagNameMap{'lr-app-rail-group':LyraAppRailGroup;}}

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

@@ -1,4 +1,4 @@
-var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html,nothing}from"lit";import{property,state}from"lit/decorators.js";import{nextId}from"../../../internal/a11y.js";import{chevronIcon}from"../../../internal/icons.js";import{LyraElement}from"../../../internal/lyra-element.js";import{finiteRange}from"../../../internal/numbers.js";import{tag}from"../../../internal/prefix.js";import{requestThenCommit}from"../../../internal/request-commit.js";import{trueDefaultBooleanConverter}from"../../../internal/converters.js";import{markVetoGuardWrite,VetoWriteGuard}from"../../../internal/veto-write-guard.js";import{styles}from"./app-rail-group.styles.js";import{LYRA_DEFAULT_collapse,LYRA_DEFAULT_expand}from"../../../internal/default-strings.generated.js";class LyraAppRailGroup extends LyraElement{constructor(){super(...arguments),this.heading="",this.headingLevel=3,this.collapsible=!1,this._open=!0,this.toggleGuard=new VetoWriteGuard,this.hasHeadingSlot=!1,this.hasHeaderActionsSlot=!1,this.headingId=nextId("app-rail-group-heading"),this.contentId=nextId("app-rail-group-content"),this.onHeadingSlotChange=event=>{const slot=event.target;this.hasHeadingSlot=slot.assignedNodes().length>0&&slot.assignedNodes({flatten:!0}).length>0},this.onHeaderActionsSlotChange=event=>{this.hasHeaderActionsSlot=event.target.assignedNodes({flatten:!0}).some(node=>node.nodeType!==3||(node.textContent??"").trim()!=="")},this.onContentSlotChange=()=>{this.syncOwnedItems()},this.onToggleClick=()=>{const next=!this._open;requestThenCommit({requestDetail:{open:next},emitRequest:(detail,init)=>this.emit("lr-toggle-request",detail,init),guard:this.toggleGuard,commit:()=>{this.open=next,this.emit("lr-toggle",{open:next})}})}}static{this.defaultStrings={...super.defaultStrings,collapse:LYRA_DEFAULT_collapse,expand:LYRA_DEFAULT_expand}}static{this.styles=[LyraElement.styles,styles]}static get observedAttributes(){return[...super.observedAttributes,"icon-only"]}get open(){return this._open}set open(next){const old=this._open;this._open=next,markVetoGuardWrite(this.toggleGuard),this.requestUpdate("open",old)}get safeHeadingLevel(){return Math.round(finiteRange(this.headingLevel,3,1,6))}connectedCallback(){super.connectedCallback(),this.syncOwnedItems()}attributeChangedCallback(name,oldValue,newValue){super.attributeChangedCallback(name,oldValue,newValue),!(name!=="icon-only"||oldValue===newValue)&&(this.syncOwnedItems(),this.requestUpdate())}updated(changed){super.updated(changed),this.syncOwnedItems()}syncOwnedItems(){if(!this.isConnected)return;const iconOnly=this.hasAttribute("icon-only"),groupTag=tag("app-rail-group");for(const node of this.querySelectorAll(`${tag("app-rail-item")}, ${groupTag}`))(node.parentElement?.closest(groupTag)??null)===this&&node.toggleAttribute("icon-only",iconOnly)}render(){const named=this.hasHeadingSlot||this.heading.trim()!=="",headingContent=html`<span part="heading-text"
+var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html,nothing}from"lit";import{property,query,state}from"lit/decorators.js";import{nextId}from"../../../internal/a11y.js";import{chevronIcon}from"../../../internal/icons.js";import{collectInitialSlotAssignment}from"../../../internal/initial-slot-collection.js";import{LyraElement}from"../../../internal/lyra-element.js";import{finiteRange}from"../../../internal/numbers.js";import{tag}from"../../../internal/prefix.js";import{requestThenCommit}from"../../../internal/request-commit.js";import{trueDefaultBooleanConverter}from"../../../internal/converters.js";import{markVetoGuardWrite,VetoWriteGuard}from"../../../internal/veto-write-guard.js";import{styles}from"./app-rail-group.styles.js";import{LYRA_DEFAULT_collapse,LYRA_DEFAULT_expand}from"../../../internal/default-strings.generated.js";class LyraAppRailGroup extends LyraElement{constructor(){super(...arguments),this.heading="",this.headingLevel=3,this.collapsible=!1,this._open=!0,this.toggleGuard=new VetoWriteGuard,this.hasHeadingSlot=!1,this.hasHeaderActionsSlot=!1,this.headingId=nextId("app-rail-group-heading"),this.contentId=nextId("app-rail-group-content"),this.onHeadingSlotChange=event=>{this.applyHeadingSlotPresence(event.target)},this.onHeaderActionsSlotChange=event=>{this.applyHeaderActionsSlotPresence(event.target)},this.onContentSlotChange=()=>{this.syncOwnedItems()},this.onToggleClick=()=>{const next=!this._open;requestThenCommit({requestDetail:{open:next},emitRequest:(detail,init)=>this.emit("lr-toggle-request",detail,init),guard:this.toggleGuard,commit:()=>{this.open=next,this.emit("lr-toggle",{open:next})}})}}static{this.defaultStrings={...super.defaultStrings,collapse:LYRA_DEFAULT_collapse,expand:LYRA_DEFAULT_expand}}static{this.styles=[LyraElement.styles,styles]}static get observedAttributes(){return[...super.observedAttributes,"icon-only"]}get open(){return this._open}set open(next){const old=this._open;this._open=next,markVetoGuardWrite(this.toggleGuard),this.requestUpdate("open",old)}get safeHeadingLevel(){return Math.round(finiteRange(this.headingLevel,3,1,6))}connectedCallback(){super.connectedCallback(),this.syncOwnedItems()}attributeChangedCallback(name,oldValue,newValue){super.attributeChangedCallback(name,oldValue,newValue),!(name!=="icon-only"||oldValue===newValue)&&(this.syncOwnedItems(),this.requestUpdate())}updated(changed){super.updated(changed),this.syncOwnedItems()}firstUpdated(changed){super.firstUpdated(changed);const headingSlot=this.headingSlot,headerActionsSlot=this.headerActionsSlot;queueMicrotask(()=>{collectInitialSlotAssignment(headingSlot,s=>this.applyHeadingSlotPresence(s)),collectInitialSlotAssignment(headerActionsSlot,s=>this.applyHeaderActionsSlotPresence(s))})}syncOwnedItems(){if(!this.isConnected)return;const iconOnly=this.hasAttribute("icon-only"),groupTag=tag("app-rail-group");for(const node of this.querySelectorAll(`${tag("app-rail-item")}, ${groupTag}`))(node.parentElement?.closest(groupTag)??null)===this&&node.toggleAttribute("icon-only",iconOnly)}applyHeadingSlotPresence(slot){this.hasHeadingSlot=slot.assignedNodes().length>0&&slot.assignedNodes({flatten:!0}).length>0}applyHeaderActionsSlotPresence(slot){this.hasHeaderActionsSlot=slot.assignedNodes({flatten:!0}).some(node=>node.nodeType!==3||(node.textContent??"").trim()!=="")}render(){const named=this.hasHeadingSlot||this.heading.trim()!=="",headingContent=html`<span part="heading-text"
       ><slot name="heading" @slotchange=${this.onHeadingSlotChange}
         >${this.hasHeadingSlot?nothing:this.heading}</slot
       ></span
@@ -33,4 +33,4 @@ var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3
           <slot @slotchange=${this.onContentSlotChange}></slot>
         </div>
       </div>
-    `}}__decorate([property()],LyraAppRailGroup.prototype,"heading",void 0),__decorate([property({type:Number,attribute:"heading-level"})],LyraAppRailGroup.prototype,"headingLevel",void 0),__decorate([property({type:Boolean,reflect:!0})],LyraAppRailGroup.prototype,"collapsible",void 0),__decorate([property({type:Boolean,reflect:!0,converter:trueDefaultBooleanConverter})],LyraAppRailGroup.prototype,"open",null),__decorate([state()],LyraAppRailGroup.prototype,"hasHeadingSlot",void 0),__decorate([state()],LyraAppRailGroup.prototype,"hasHeaderActionsSlot",void 0);export{LyraAppRailGroup};
+    `}}__decorate([property()],LyraAppRailGroup.prototype,"heading",void 0),__decorate([property({type:Number,attribute:"heading-level"})],LyraAppRailGroup.prototype,"headingLevel",void 0),__decorate([property({type:Boolean,reflect:!0})],LyraAppRailGroup.prototype,"collapsible",void 0),__decorate([property({type:Boolean,reflect:!0,converter:trueDefaultBooleanConverter})],LyraAppRailGroup.prototype,"open",null),__decorate([state()],LyraAppRailGroup.prototype,"hasHeadingSlot",void 0),__decorate([state()],LyraAppRailGroup.prototype,"hasHeaderActionsSlot",void 0),__decorate([query('slot[name="heading"]')],LyraAppRailGroup.prototype,"headingSlot",void 0),__decorate([query('slot[name="header-actions"]')],LyraAppRailGroup.prototype,"headerActionsSlot",void 0);export{LyraAppRailGroup};

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

@@ -95,7 +95,7 @@ accessibleLabel?:string;private hostAccessibleLabel;private slideSlot?;private v
 *  to rest on is published once the stream goes quiet. Scheduled on -- and cancelled through --
 *  the realm this carousel lives in at the time, so one adopted into another document neither
 *  leaves a task behind on the old realm nor loses the ability to cancel the new one. */
-private readonly scrollSettle;private adoptingScrolledSlide;private hasAlignedOnce;private alignIndex?;private alignTarget?;private requestedBehavior?;private loopSide?;private loopClonesDirty;private pointerInteracting;private focusInteracting;private dragPointerId?;private dragStartCoordinate;private dragStartScroll;private dragMoved;private suppressClick;private clickTimer?;private clickTimerWindow?;private announcementSink?;private announcementsArmed;private changeOrigin;private manualPending;private observer?;private observerDocument?;private observerGeneration;private lastFocusedSlide?;constructor();attributeChangedCallback(name:string,oldValue:string|null,newValue:string|null):void;connectedCallback():void;disconnectedCallback():void;private armSlideContentObserver;private resetSlideContentObserver;protected willUpdate(changed:PropertyValues):void;protected updated(changed:PropertyValues):void;private setCurrentSlideState;private setPaginationState;private onMotionPreferenceChange;private onVisibilityChange;private queueOwnerMicrotask;private effectiveOrientation;private slideElements;private pageSize;private moveSize;private maxStartIndex;private normalizedIndex;private pageTargets;private visibleIndices;private announceActivePage;private restoreAttribute;private snapshotSlide;private adoptChanges;private restoreSlide;private restoreSlides;private syncSlides;
+private readonly scrollSettle;private adoptingScrolledSlide;private hasAlignedOnce;private alignIndex?;private alignTarget?;private requestedBehavior?;private loopSide?;private loopClonesDirty;private pointerInteracting;private focusInteracting;private dragPointerId?;private dragStartCoordinate;private dragStartScroll;private dragMoved;private suppressClick;private clickTimer?;private clickTimerWindow?;private announcementSink?;private announcementsArmed;private changeOrigin;private manualPending;private observer?;private observerDocument?;private observerGeneration;private lastFocusedSlide?;constructor();attributeChangedCallback(name:string,oldValue:string|null,newValue:string|null):void;connectedCallback():void;disconnectedCallback():void;private armSlideContentObserver;private resetSlideContentObserver;protected willUpdate(changed:PropertyValues):void;protected firstUpdated(changed:PropertyValues):void;protected updated(changed:PropertyValues):void;private setCurrentSlideState;private setPaginationState;private onMotionPreferenceChange;private onVisibilityChange;private queueOwnerMicrotask;private effectiveOrientation;private slideElements;private pageSize;private moveSize;private maxStartIndex;private normalizedIndex;private pageTargets;private visibleIndices;private announceActivePage;private restoreAttribute;private snapshotSlide;private adoptChanges;private restoreSlide;private restoreSlides;private syncSlides;
 /** Moves focus while the outgoing slide is still operable. Setting `inert` first lets the
 * platform strand focus on the document body, outside this carousel's keyboard handler. The
 * remembered-slide branch covers direct light-DOM removal, where slotchange necessarily runs