@aceshooting/lyra-ui 9.1.0 → 10.0.1

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

@@ -54,13 +54,20 @@ export interface LyraTokenInputEventMap {
  * @event lr-change - Lyra commit alias; detail is `{ value }` with the current token list.
  * @event focus - Native `FocusEvent` relayed from the draft input or inline token editor.
  * @event blur - Native `FocusEvent` relayed from the draft input or inline token editor.
- * @event lr-add - One or more tokens were added in a single commit. Detail is
+ * @event lr-add - One or more tokens are about to be added in a single commit. Detail is
  *   `{ value, values }`, where `value` is the final added token for compatibility and `values` is
- *   the complete ordered batch.
+ *   the complete ordered batch. Cancelable -- call `preventDefault()` to veto the add (e.g. a
+ *   server-side validation check) and the tokens stay out of `value`; the typed draft text is left
+ *   in the input unchanged so the user can correct it, rather than being silently cleared.
  * @event lr-remove - A token is about to be removed; detail is `{ value, index }`. Cancelable --
  *   call `preventDefault()` to veto the removal (e.g. pending an async confirmation or a
  *   protected-token check) and the token stays in `value` unchanged.
- * @event lr-token-edit - An existing token was edited in place and committed; detail is `{ value, previousValue, index }`. Not emitted for a reverted, unchanged, emptied, or duplicate-colliding edit.
+ * @event lr-token-edit - An existing token is about to be edited in place; detail is
+ *   `{ value, previousValue, index }`. Not emitted for a reverted, unchanged, emptied, or
+ *   duplicate-colliding edit -- those close the editor with no event. Cancelable -- call
+ *   `preventDefault()` to veto the edit and the token stays in `value` unchanged; the inline
+ *   editor stays open with the user's edited text intact so they can correct it, rather than
+ *   closing and discarding it.
  * @event lr-invalid - The token list failed a validity check. Cancelable: calling
  * `preventDefault()` also cancels the native `invalid` event behind it, suppressing the
  * browser's own validation bubble so an app can present the failure its own way.
@@ -340,12 +347,19 @@ export declare class LyraTokenInput extends LyraElement<LyraTokenInputEventMap>
     /** Close the editor discarding its contents, returning focus to the token it was opened from. */
     private cancelEdit;
     /**
-     * Close the editor, applying its contents when they are a usable change. The editor is closed
-     * first so the teardown blur it triggers re-enters this method as a no-op rather than committing
-     * (and emitting `change`) a second time. An emptied editor cancels rather than removing the
-     * token -- removal stays the explicit job of the remove button -- and an edit colliding with an
-     * existing token under `allowDuplicates = false` is discarded, mirroring how `addDraft()` skips a
-     * duplicate candidate instead of rejecting the whole entry.
+     * Close the editor, applying its contents when they are a usable change. An emptied editor
+     * cancels rather than removing the token -- removal stays the explicit job of the remove button
+     * -- and an edit colliding with an existing token under `allowDuplicates = false` is discarded,
+     * mirroring how `addDraft()` skips a duplicate candidate instead of rejecting the whole entry.
+     * None of those "no usable change" cases fire `lr-token-edit`, so the editor closes for them
+     * unconditionally.
+     *
+     * A genuine change emits `lr-token-edit` as cancelable and checks `defaultPrevented` *before*
+     * closing the editor or mutating `value` -- the same emit-then-check-then-mutate shape
+     * `removeToken()` uses for `lr-remove`. A vetoed edit leaves the editor open with the user's
+     * edited (uncommitted) text intact, so they can correct it, rather than closing and discarding
+     * it. Only past that veto check does the editor close first, so the teardown blur it triggers
+     * re-enters this method as a no-op rather than committing (and emitting `change`) a second time.
      */
     private commitEdit;
     private moveRovingFocus;

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

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

@@ -5,10 +5,6 @@ import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/for
     max-inline-size: 100%;
     box-sizing: border-box;
     --_lr-token-input-min-input-inline-size: var(--lr-size-4rem);
-    /* Two-value shorthand, block axis first: the INLINE half stays this component's own denser
-       ladder (see the per-tier blocks below), while the BLOCK half is taken from the shared
-       form-control ladder so it can never outgrow the height floor declared beside it. See the
-       [part='input-wrapper'] comment for why the block axis is not free to differ. */
     --_lr-token-input-padding: var(--lr-form-control-padding-block)
       var(--lr-space-xs);
     --_lr-token-input-font-size: var(--lr-font-size-md-sm);
@@ -16,27 +12,11 @@ import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/for
     --_lr-token-input-gap: var(--lr-space-xs);
     --_lr-token-input-token-gap: var(--lr-space-2xs);
     --_lr-token-input-radius: var(--lr-radius);
-    /* The row's height floor comes from the ONE shared form-control ladder
-       (internal/sizes.styles.ts) rather than a private copy of the same six values, so retuning
-       --lr-theme-form-control-height-* moves this control and every sibling field together. That
-       ladder matches both spellings of every tier, which is what makes size="small" resolve here
-       without a per-component alias rule. */
     --_lr-token-input-control-min-height: var(--lr-form-control-height);
-    /* --lr-token-input-control-height is intentionally NOT declared here -- same convention as
-       lr-input/lr-select/lr-combobox: a consumer-facing exact-height escape hatch consumed only
-       through the var() fallback on [part='input-wrapper'] below. */
   }
   :host([pill]) {
     --_lr-token-input-radius: var(--lr-radius-pill);
   }
-  /* Inline padding, text size and chip padding stay this component's own ladder: its m tier is
-     denser than the shared one (0.25rem of inline padding and --lr-font-size-md-sm text, against the
-     ladder's 0.75rem and --lr-font-size-m). The BLOCK half of --lr-token-input-padding is the shared
-     ladder's --lr-form-control-padding-block at every tier instead, because that axis is the one the
-     row's height floor has to pay for -- see the [part='input-wrapper'] comment. Each tier matches
-     both spellings for the same reason sizes.styles.ts does -- the height ladder accepts
-     size="small", so a row whose padding silently ignored it would be worse than one that never
-     accepted it. */
   :host([size="2xs"]) {
     --_lr-token-input-padding: var(--lr-form-control-padding-block)
       var(--lr-size-0-0625rem);
@@ -79,24 +59,10 @@ import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/for
     color: var(--lr-color-text);
     font-weight: var(--lr-font-weight-semibold);
   }
-  /* The required marker comes from the one shared sheet (internal/form-control.styles.ts) like
-     every other labelled control's, so its glyph, colour and spacing are consumer-settable. The
-     rule below suppresses this component's older hand-rolled glyph -- a literal <span> the label
-     template still renders -- so the two never double up; it is dead the moment that span is
-     dropped from token-input.class.ts's render(). */
   :host([required]) [part="form-control-label"] > span[aria-hidden="true"] {
     display: none;
   }
   ${formControlRequiredMarker}
-  /* min-block-size is a FLOOR, and this box is border-box, so the floor only decides the rendered
-     height while the row's own content stays under it. Its content is the draft input, whose text
-     box is line-height: normal -- a metric of whatever the ambient font family resolves to, which
-     differs between machines. That is why the block padding here comes from the shared ladder rather
-     than this component's denser inline ladder: with the ladder's block padding and the zeroed
-     input padding below, the content is <= lr-input's own content at every tier (this component's
-     per-tier font-size never exceeds the ladder's), so wherever lr-input's floor wins this row's
-     floor wins too, and the two line up in a toolbar on every machine. Widen the block padding past
-     the ladder and the font's metrics -- not the ladder -- start deciding the height. */
   [part='input-wrapper'] {
     display: flex;
     flex-wrap: wrap;
@@ -131,10 +97,6 @@ import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/for
     outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);
     outline-offset: var(--lr-focus-ring-offset);
   }
-  /* padding-block: 0 rather than the UA's own 1px default -- same neutralisation lr-input applies
-     to its [part='input']. The wrapper above already owns this row's block padding; leaving the
-     UA's on as well spent two more pixels of the height floor's budget at every tier, which is what
-     used to push the dense tiers over their floor and hand the rendered height to the font. */
   [part="input"] {
     flex: 1 1 var(--lr-token-input-input-inline-size, var(--lr-size-8rem));
     min-inline-size: var(
@@ -151,10 +113,6 @@ import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/for
   [part="input"]::placeholder {
     color: var(--lr-color-text-quiet);
   }
-  /* Mirrors lr-combobox's identical [part='start']/[part='end'] wrappers: the wrapper span is
-     always present so JS can toggle its hidden attribute -- an author display rule always beats
-     the UA's own [hidden] rule regardless of specificity, so the explicit override below is
-     required once this selector declares its own display. */
   [part="start"],
   [part="end"] {
     flex: 0 0 auto;
@@ -187,14 +145,9 @@ import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/for
   [part="token"] > span:first-child,
   [part="token-label"] {
     overflow: hidden;
-    overflow-wrap: anywhere;
     text-overflow: ellipsis;
+    white-space: nowrap;
   }
-  /* The interactive hit target meets the shared minimum tappable size (same --lr-icon-button-size
-     floor as lr-swatch-picker's [part='swatch']), while the visible glyph (closeIcon(), rendered at
-     1em -- already compact at this control's font size) stays centered inside via flex rather than
-     growing itself, so the dense token row keeps its own compact glyph even though the button's own
-     hit-target box grows. */
   [part="remove"] {
     display: inline-flex;
     flex: 0 0 auto;
@@ -231,8 +184,6 @@ import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/for
     outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);
     outline-offset: var(--lr-focus-ring-offset);
   }
-  /* Only rendered while [editable] is set, so the non-editable token row keeps its plain,
-     non-focusable text span and its exact current metrics. */
   [part="token-label"] {
     min-inline-size: var(--lr-icon-button-size);
     min-block-size: var(--lr-icon-button-size);
@@ -292,10 +243,6 @@ import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/for
       var(--lr-color-danger)
     );
   }
-  /* :host(:disabled), not :host([disabled]) -- the native FACE pseudo-class also matches an
-     ancestor <fieldset disabled> cascade (see effectiveDisabled in token-input.class.ts), which
-     the bracket-attribute selector would miss entirely (mirrors lr-select's/lr-combobox's
-     identical fix). */
   :host(:disabled) {
     opacity: var(--lr-opacity-disabled);
   }

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

@@ -9,7 +9,7 @@ var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3
           rel=${this.target?"noopener noreferrer":nothing}
           aria-label=${label??nothing}
           aria-disabled="false"
-          aria-current=${this.current?"page":nothing}
+          aria-current=${this.current?"page":"false"}
           @mouseenter=${this.onFocusShow}
           @mouseleave=${this.onBlurHide}
           @focus=${this.onFocusShow}
@@ -23,7 +23,7 @@ var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3
         ?disabled=${this.disabled}
         aria-disabled=${this.disabled?"true":"false"}
         aria-label=${label??nothing}
-        aria-current=${this.current?"page":nothing}
+        aria-current=${this.current?"page":"false"}
         @mouseenter=${this.onFocusShow}
         @mouseleave=${this.onBlurHide}
         @focus=${this.onFocusShow}

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

@@ -24,10 +24,6 @@ import{css}from"lit";const styles=css`
     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));
   }
-  /* Pressed travels further along the same axis hover moved on: the identical brand-quiet fill,
-     mixed toward --lr-color-mix-partner (which follows the text colour), so it deepens on a light
-     theme and lightens on a dark one rather than depending on which way a brightness multiplier
-     happens to push this particular fill. */
   [part="base"]:not([aria-disabled="true"]):active {
     background: var(
       --lr-app-rail-item-active-bg,
@@ -47,12 +43,6 @@ import{css}from"lit";const styles=css`
     opacity: var(--lr-opacity-disabled);
     cursor: not-allowed;
   }
-  /* Inline var() fallbacks rather than :host-declared properties, so a consumer can set them on any
-     ancestor and a :host declaration can never shadow that. ::part(base)[aria-current='page'] is
-     invalid CSS (an attribute selector cannot follow ::part), so hijacking the shared
-     --lr-color-brand-quiet/--lr-color-brand tokens used to be the only route -- which repainted every
-     other element reading those tokens. Unset, each falls back to the token the rule used before,
-     so the rendering is unchanged. */
   [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));
@@ -63,9 +53,6 @@ import{css}from"lit";const styles=css`
     flex: 0 0 auto;
     align-items: center;
     justify-content: center;
-    /* Deliberately floors only the inline axis. The row's tappable height is already guaranteed by
-       [part='base']'s own min-block-size above, so flooring the icon's block axis too would add
-       nothing for target size while forcing every row to --lr-icon-button-size + 2x --lr-space-s. */
     inline-size: var(--lr-icon-button-size);
     min-inline-size: var(--lr-icon-button-size);
   }

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

@@ -141,6 +141,11 @@ export interface LyraAppRailEventMap {
  * @since 4.0.0
  */
 export declare class LyraAppRail extends LyraElement<LyraAppRailEventMap> {
+    /** Both are host state this component writes itself -- `mode` is the derived effective mode
+     *  (authors set `preferred-mode`), `dragging` tracks a live resize gesture. Neither is settable
+     *  from markup, so neither is observed; declaring them keeps the rail from reporting its own
+     *  output as an unknown attribute. */
+    protected static readonly knownUnobservedAttributes: readonly string[];
     static styles: import("lit").CSSResultGroup[];
     /** Below this viewport width, the rail switches from `'full'` to
      *  `'icon-only'`. Any valid CSS length, used directly in a `max-width`

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

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

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

@@ -1,15 +1,7 @@
 import{css}from"lit";const styles=css`
   :host {
     display: block;
-    /* Establishes the containing block for [part="resizer"], which is a SIBLING of [part="base"]
-       (not a child), so [part="base"]'s own position: relative cannot anchor it. Without this the
-       absolutely-positioned resizer resolves inset-block:0 against the initial containing block
-       (the viewport), spanning full viewport height and sitting offscreen. */
     position: relative;
-    /* Component-specific sizing -- not shared design tokens, so a consumer
-       can retheme any of them without a raw literal leaking into the public
-       API (same rationale as lr-dialog's --lr-dialog-overlay-color and
-       lr-widget's --lr-widget-overlay-color). */
     --_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);
@@ -42,8 +34,6 @@ import{css}from"lit";const styles=css`
     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));
   }
-  /* The fill hover already uses, mixed further toward --lr-color-mix-partner (the text colour), so
-     the pressed step is always deeper than the hover step whichever way the theme runs. */
   [part="toggle"]:active {
     background: var(
       --lr-app-rail-toggle-active-bg,
@@ -70,15 +60,7 @@ import{css}from"lit";const styles=css`
     );
   }
 
-  /* [part="base"]/[part="panel"] are the SAME element -- this
-     component promotes it in place for the mobile overlay (mirrors
-     lr-widget's fullscreen mode) rather than duplicating the slotted nav
-     content into a second element, which slot projection can't do anyway
-     (a light-DOM node can only be assigned to one <slot> at a time). Its
-     part attribute switches between the two names per render, so the two
-     rulesets below are always mutually exclusive on it. */
   [part="base"] {
-    /* The resizer is anchored by :host (a sibling relationship), not by this element. */
     position: relative;
     display: flex;
     flex-direction: column;
@@ -88,8 +70,6 @@ import{css}from"lit";const styles=css`
     background: var(--lr-color-surface);
     padding-block-end: var(--lr-safe-area-bottom);
     overflow-y: auto;
-    /* Pin the cross axis explicitly: with only overflow-y set, overflow-x computes from visible to
-       auto and can add a spurious horizontal scrollbar when slotted header/footer content is wide. */
     overflow-x: clip;
     transition: inline-size var(--lr-transition-base);
   }
@@ -100,11 +80,6 @@ import{css}from"lit";const styles=css`
     transition: none;
   }
 
-  /* The interactive hit target meets the shared minimum tappable size (same --lr-icon-button-size
-     floor as lr-code-block's/lr-json-viewer's [part='toggle'] and lr-swatch-picker's
-     [part='swatch']), centered on the same inset-inline-end edge the old 3px-wide box occupied --
-     while the *visible* drag line stays a slim 3px bar, rendered on the separate [part='resizer-track']
-     child below and centered via flex, not by resizing this element itself. */
   [part="resizer"] {
     position: absolute;
     inset-block: 0;
@@ -127,8 +102,6 @@ import{css}from"lit";const styles=css`
   [part="resizer"]:hover [part="resizer-track"] {
     background: var(--lr-app-rail-resizer-hover-bg, var(--lr-color-brand));
   }
-  /* The drag itself: pointer capture keeps :active on the resizer for the whole gesture, so the
-     track stays at the deeper mix until the pointer is released. */
   [part="resizer"]:active [part="resizer-track"] {
     background: var(
       --lr-app-rail-resizer-active-bg,
@@ -155,35 +128,17 @@ import{css}from"lit";const styles=css`
       var(--lr-app-rail-mobile-width, var(--_lr-app-rail-mobile-width)),
       85vw
     );
-    /* [part="panel"] is the mobile OVERLAY promotion of this element (see the note above the
-       [part="base"] rule) -- a modal drawer over a scrim, so it takes the modal-panel surface.
-       [part="base"], the docked rail in the page's own layout flow, deliberately keeps
-       --lr-color-surface: it is resting chrome, not an overlay. */
     background: var(--lr-color-surface-overlay);
     padding-block-end: var(--lr-safe-area-bottom);
-    /* Modal layer, lower step: an edge-anchored drawer flush with three viewport edges, matching
-       lr-drawer rather than a free-floating centered dialog. */
     box-shadow: var(--lr-shadow-l);
     overflow-y: auto;
-    /* Pin the cross axis (see [part="base"]): overflow-y alone forces overflow-x to auto. */
     overflow-x: clip;
     transform: translateX(-100%);
     transition: transform var(--lr-transition-base);
   }
-  /* translateX is a physical transform -- CSS logical properties don't cover
-     it -- so the offscreen direction is flipped explicitly for RTL via
-     :dir() rather than needing internal/rtl.ts's JS helper (that helper is
-     for pointer/keyboard math that can't be expressed in CSS at all; this
-     can). */
   :host(:dir(rtl)) [part="panel"] {
     transform: translateX(100%);
   }
-  /* Settled-open state is transform: none, NOT translateX(0): a non-none transform (even the
-     identity) establishes a containing block for position: fixed descendants, which would trap and
-     clip consumer-slotted dropdowns/tooltips inside the open mobile panel (lyra-ui positions popups
-     with position: fixed via Floating UI, not the top layer). Transitions between translateX(-100%)
-     and none are well-defined (none interpolates as the identity matrix), so the slide-in still
-     animates. */
   :host([mode="mobile"][open]) [part="panel"] {
     transform: none;
   }
@@ -205,7 +160,6 @@ import{css}from"lit";const styles=css`
   [part="nav"] {
     flex: 1 1 auto;
     overflow-y: auto;
-    /* Pin the cross axis (see [part="base"]): overflow-y alone forces overflow-x to auto. */
     overflow-x: clip;
     padding: var(--lr-space-s);
     display: flex;

package/dist/components/layout/button-group/button-group.styles.js

@@ -1,13 +1,7 @@
 import{css}from"lit";const styles=css`
   :host {
     display: inline-flex;
-    /* Makes the host a query container so the @container rule below reacts to the
-       group's own allocated width (a sidebar, a split pane, a dialog) instead of the
-       viewport's — a group can be narrow on a wide screen and vice versa. */
     container-type: inline-size;
-    /* Size containment removes content-based intrinsic sizing. This compact fallback keeps an
-       unallocated group wide enough to lay out ordinary actions and lets its narrow query wrap
-       longer sets; the hit-area minimum remains the hard lower bound under tighter allocation. */
     contain-intrinsic-inline-size: var(--lr-size-12rem);
     min-inline-size: var(--lr-icon-button-size);
     max-inline-size: 100%;

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

@@ -14,6 +14,18 @@ export interface LyraCardEventMap {
  * The header is allocation-responsive: long or translated header content can shrink and wrap,
  * and the actions group moves onto another line when both no longer fit side by side.
  *
+ * **Overflow is clipped, deliberately, and the card never picks a scroll owner for you.**
+ * `[part='base']` stretches to the host's allocated block-size and clips its overflow — that clip
+ * is what keeps a full-bleed `media`/`image` child inside the rounded border. So a card given a
+ * *definite* allocation (a fixed grid row, an explicit `block-size`) clips body content taller
+ * than that allocation rather than growing or scrolling; in an auto-sized row it simply grows and
+ * nothing is clipped. Neither upstream card exposes an overflow, block-size, or scroll hook, and
+ * this one deliberately adds none either: the public `body` part already carries the whole
+ * decision, and a `::part()` rule from the consumer's tree wins over the shadow stylesheet
+ * regardless of specificity. A fixed-height tile whose body must hold more content therefore says
+ * so itself — `lr-card::part(body) { overflow: auto; }` — which also leaves `max-block-size`,
+ * `scrollbar-gutter`, and `overscroll-behavior` in the consumer's hands.
+ *
  * @customElement lr-card
  * @slot - The card body.
  * @slot header - Header row content, rendered above the body.

package/dist/components/layout/card/card.styles.js

@@ -13,12 +13,6 @@ import{css}from"lit";const styles=css`
       var(--border-color, var(--lr-color-border));
     border-radius: var(--border-radius, var(--lr-radius));
     background: var(--lr-color-surface);
-    /* Stretches to fill the host's own allocated block-size -- e.g. a CSS Grid row with the
-       default align-items: stretch -- so a shorter card's visible border/background reaches the
-       row's full height instead of shrink-wrapping to its own content (mirrors lyra-stat's/
-       word-cloud's/context-meter's identical fix; card.class.ts's own doc advertises "clickable
-       grid tiles" as an intended use case). box-sizing keeps the border inside that measured
-       height rather than growing past it. */
     block-size: 100%;
     box-sizing: border-box;
     color: inherit;
@@ -78,11 +72,6 @@ import{css}from"lit";const styles=css`
   .linked-shell:hover > [part="base"][data-actionable="true"] {
     border-color: var(--lr-card-interactive-hover-border-color, var(--lr-color-brand));
   }
-  /* Pressed keeps the hover border and adds a tint of the whole tile, so it reads as a step past
-     hover rather than a different colour of the same step. The tint is a background-IMAGE layer,
-     not a background colour: the appearance variants own background-color (filled and
-     filled-outlined set brand-quiet), and a colour here would replace theirs instead of deepening
-     it, so a filled card would flash back to plain surface on mousedown. */
   [part="base"][data-actionable="true"]:active,
   .linked-shell:active > [part="base"][data-actionable="true"] {
     border-color: var(--lr-card-interactive-active-border-color, var(--lr-color-brand));
@@ -134,6 +123,9 @@ import{css}from"lit";const styles=css`
     display: block;
     inline-size: 100%;
   }
+  [part~="media"] ::slotted([hidden]:not([hidden="until-found" i])) {
+    display: none;
+  }
   [part="header"] {
     display: flex;
     flex-wrap: wrap;
@@ -147,7 +139,7 @@ import{css}from"lit";const styles=css`
   ::slotted([slot="header"]) {
     flex: 1 1 auto;
     min-inline-size: 0;
-    overflow-wrap: anywhere;
+    overflow-wrap: break-word;
   }
   [part="actions"] {
     display: flex;
@@ -163,7 +155,7 @@ import{css}from"lit";const styles=css`
     padding: var(--spacing, var(--padding, var(--lr-space-m)));
     flex: 1 1 auto;
     min-inline-size: 0;
-    overflow-wrap: anywhere;
+    overflow-wrap: break-word;
   }
   [part="footer"] {
     display: flex;

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

@@ -58,7 +58,6 @@ import{css}from"lit";const styles=css`
     outline-offset: var(--lr-focus-ring-offset);
   }
 
-  /* no-pressed-state: no action. */
   [part~="scroll-container"]:hover {
     outline: var(--lr-border-width-thin) solid var(--lr-color-border-strong);
     outline-offset: var(--lr-focus-ring-offset);