@aceshooting/lyra-ui 9.1.1 → 11.0.0

package/dist/components/layout/filter-bar/filter-bar.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{LyraElement}from"../../../internal/lyra-element.js";import{collectFocusableElements,deepActiveElement}from"../../../internal/overlay-manager.js";import{getDateTimeFormat,getListFormat}from"../../../internal/intl-cache.js";import{styles}from"./filter-bar.styles.js";import"../../forms/select/select.class.js";import"../../forms/combobox/combobox.class.js";import"../../forms/combobox/option.class.js";import"../../forms/date-picker/date-input.class.js";import"../../forms/input/input.class.js";import"../../overlays/chip/chip.class.js";import"../../overlays/chip/chip-group.class.js";import"../../forms/button/button.class.js";import"../../overlays/spinner/spinner.class.js";import{LYRA_DEFAULT_collapse,LYRA_DEFAULT_date,LYRA_DEFAULT_details,LYRA_DEFAULT_fieldRequired,LYRA_DEFAULT_filterBarActiveFilters,LYRA_DEFAULT_filterBarReset,LYRA_DEFAULT_map,LYRA_DEFAULT_navigation,LYRA_DEFAULT_open,LYRA_DEFAULT_popover,LYRA_DEFAULT_progress,LYRA_DEFAULT_restore,LYRA_DEFAULT_search,LYRA_DEFAULT_select}from"../../../internal/default-strings.generated.js";const MAX_FILTER_COLLECTION_ENTRIES=1e4,MAX_FILTER_COLLECTION_NODES=5e4,MAX_FILTER_COLLECTION_DEPTH=16,OMIT_FILTER_VALUE=Symbol("omit-filter-value"),EMPTY_FILTERS=Object.freeze([]),EMPTY_VALUE=Object.freeze({});function isPlainFilterRecord(value){try{const prototype=Object.getPrototypeOf(value);return prototype===null||Object.getPrototypeOf(prototype)===null}catch{return!1}}function snapshotFilterEntry(value,budget,depth){if(value===null||typeof value!="object"&&typeof value!="function"||typeof value=="function")return value;if(depth>MAX_FILTER_COLLECTION_DEPTH||budget.remaining<=0)return OMIT_FILTER_VALUE;const existing=budget.seen.get(value);if(existing!==void 0)return existing;let isArray=!1;try{isArray=Array.isArray(value)}catch{return OMIT_FILTER_VALUE}if(isArray){const output2=[];budget.seen.set(value,output2);let length=0;try{const descriptor=Object.getOwnPropertyDescriptor(value,"length");descriptor&&"value"in descriptor&&typeof descriptor.value=="number"&&Number.isSafeInteger(descriptor.value)&&descriptor.value>=0&&(length=Math.min(descriptor.value,MAX_FILTER_COLLECTION_ENTRIES))}catch{return Object.freeze(output2)}for(let index=0;index<length&&budget.remaining>0;index+=1){let descriptor;try{descriptor=Object.getOwnPropertyDescriptor(value,String(index))}catch{continue}if(!descriptor||!("value"in descriptor))continue;budget.remaining-=1;const entry=snapshotFilterEntry(descriptor.value,budget,depth+1);entry!==OMIT_FILTER_VALUE&&output2.push(entry)}return Object.freeze(output2)}if(!isPlainFilterRecord(value))return value;const output={};budget.seen.set(value,output);let descriptors;try{descriptors=Object.getOwnPropertyDescriptors(value)}catch{return OMIT_FILTER_VALUE}let retained=0;for(const key of Reflect.ownKeys(descriptors)){if(retained>=MAX_FILTER_COLLECTION_ENTRIES||budget.remaining<=0)break;const descriptor=descriptors[key];if(!descriptor?.enumerable||!("value"in descriptor))continue;retained+=1,budget.remaining-=1;const entry=key==="icon"?descriptor.value:snapshotFilterEntry(descriptor.value,budget,depth+1);entry!==OMIT_FILTER_VALUE&&Object.defineProperty(output,key,{value:entry,enumerable:!0,configurable:!1,writable:!1})}return Object.freeze(output)}function snapshotFilterDefinitions(value){let isArray=!1;try{isArray=Array.isArray(value)}catch{return EMPTY_FILTERS}if(!isArray)return EMPTY_FILTERS;const snapshot=snapshotFilterEntry(value,{remaining:MAX_FILTER_COLLECTION_NODES,seen:new WeakMap},0);return Array.isArray(snapshot)?snapshot:EMPTY_FILTERS}function snapshotFilterFieldValue(value){let isArray=!1;try{isArray=Array.isArray(value)}catch{return}if(!isArray)return typeof value=="string"||typeof value=="boolean"||value===void 0?value:void 0;const output=[];let sourceLength=0;try{const descriptor=Object.getOwnPropertyDescriptor(value,"length");descriptor&&"value"in descriptor&&typeof descriptor.value=="number"&&Number.isSafeInteger(descriptor.value)&&descriptor.value>=0&&(sourceLength=descriptor.value)}catch{return Object.freeze(output)}const length=Math.min(sourceLength,MAX_FILTER_COLLECTION_ENTRIES);for(let index=0;index<length;index+=1){let descriptor;try{descriptor=Object.getOwnPropertyDescriptor(value,String(index))}catch{continue}descriptor&&"value"in descriptor&&typeof descriptor.value=="string"&&output.push(descriptor.value)}return Object.freeze(output)}const SELECT_EXPORT_PARTS=["form-control-label: filter-control-label","trigger: filter-control-field","display-input: filter-control-input","start: filter-control-start","end: filter-control-end","listbox: filter-control-listbox","option: filter-control-option","clear-button: filter-control-clear-button","expand-icon: filter-control-expand-icon","error: filter-control-error","hint: filter-control-hint"].join(", "),COMBOBOX_EXPORT_PARTS=["form-control-label: filter-control-label","combobox: filter-control-field","combobox-input: filter-control-input","start: filter-control-start","end: filter-control-end","listbox: filter-control-listbox","option: filter-control-option","clear-button: filter-control-clear-button","expand-icon: filter-control-expand-icon","error: filter-control-error","hint: filter-control-hint"].join(", "),INPUT_EXPORT_PARTS=["form-control-label: filter-control-label","input-wrapper: filter-control-field","input: filter-control-input","start: filter-control-start","end: filter-control-end","clear-button: filter-control-clear-button","error: filter-control-error","hint: filter-control-hint"].join(", "),DATE_INPUT_EXPORT_PARTS=["form-control-label: filter-control-label","input-wrapper: filter-control-field","input: filter-control-input","start: filter-control-start","end: filter-control-end","clear-button: filter-control-clear-button","expand-button: filter-control-expand-button","expand-icon: filter-control-expand-icon","popup: filter-control-popup","error: filter-control-error","hint: filter-control-hint"].join(", ");function isBuiltInSet(value){return value==null?!1:typeof value=="boolean"?value:Array.isArray(value)?value.length>0:value!==""}function cloneFilterValue(value){const clone={};let descriptors;try{descriptors=Object.getOwnPropertyDescriptors(value??{})}catch{return EMPTY_VALUE}let retained=0;for(const key of Reflect.ownKeys(descriptors)){if(retained>=MAX_FILTER_COLLECTION_ENTRIES)break;const descriptor=descriptors[key];if(typeof key!="string"||!descriptor?.enumerable||!("value"in descriptor))continue;retained+=1;const fieldValue=snapshotFilterFieldValue(descriptor.value);fieldValue!==void 0&&(clone[key]=fieldValue)}return Object.freeze(clone)}class LyraFilterBar extends LyraElement{constructor(){super(...arguments),this.label="",this.disabled=!1,this.loading=!1,this.touchedFilters=new Set,this._filters=EMPTY_FILTERS,this._value=EMPTY_VALUE,this.debounceTimers=new Map,this.pendingText=new Map,this.chipFocusGeneration=0,this.schemaGeneration=0,this.onControlChange=(id,e)=>{this.setFilterValue(id,e.target.value)},this.stopControlAlias=event=>{event.stopPropagation()},this.onCustomControlChange=(def,generation,e)=>{e.stopPropagation(),this.setCustomContextValue(def,generation,def.custom.adapter.valueFromEvent(e))}}static{this.defaultStrings={...super.defaultStrings,collapse:LYRA_DEFAULT_collapse,date:LYRA_DEFAULT_date,details:LYRA_DEFAULT_details,fieldRequired:LYRA_DEFAULT_fieldRequired,filterBarActiveFilters:LYRA_DEFAULT_filterBarActiveFilters,filterBarReset:LYRA_DEFAULT_filterBarReset,map:LYRA_DEFAULT_map,navigation:LYRA_DEFAULT_navigation,open:LYRA_DEFAULT_open,popover:LYRA_DEFAULT_popover,progress:LYRA_DEFAULT_progress,restore:LYRA_DEFAULT_restore,search:LYRA_DEFAULT_search,select:LYRA_DEFAULT_select}}static{this.styles=[LyraElement.styles,styles]}static{this.immutableEventDetails=Object.freeze(["lr-validity-change"])}static{this.properties={filters:{attribute:!1,noAccessor:!0},value:{attribute:!1,noAccessor:!0}}}get filters(){return this._filters}set filters(next){const old=this._filters;this.cancelDebounce(),this.renewSchemaContext();const seen=new Set;this._filters=Object.freeze(snapshotFilterDefinitions(next).filter(definition=>{try{return!(!definition||typeof definition.filterId!="string"||definition.filterId.length===0||definition.filterId!==definition.filterId.trim()||seen.has(definition.filterId)||(seen.add(definition.filterId),(definition.type==="select"||definition.type==="combobox")&&!Array.isArray(definition.options))||definition.type==="custom"&&!definition.custom?.adapter)}catch{return!1}}));const ids=new Set(this._filters.map(definition=>definition.filterId));this.touchedFilters=new Set([...this.touchedFilters].filter(id=>ids.has(id)));const oldValue=this._value;this._value=this.normalizeValue(this._value),this.requestUpdate("filters",old),this._value!==oldValue&&this.requestUpdate("value",oldValue)}get value(){return cloneFilterValue(this._value)}set value(next){const old=this._value;this._value=this.normalizeValue(next),this.requestUpdate("value",old)}renewSchemaContext(){this.schemaAbortController?.abort();const AbortControllerCtor=this.ownerDocument.defaultView?.AbortController??AbortController;this.schemaAbortController=new AbortControllerCtor,this.schemaGeneration+=1}get schemaSignal(){return this.schemaAbortController||this.renewSchemaContext(),this.schemaAbortController.signal}isEmpty(def,value){if(def.type!=="custom")return!isBuiltInSet(value);const{adapter}=def.custom;if(adapter.isEmpty)return adapter.isEmpty(value);const clear=adapter.clearValue;return Array.isArray(value)&&Array.isArray(clear)?value.length===clear.length&&value.every((entry,index)=>entry===clear[index]):Object.is(value,clear)}valueFor(def){return Object.prototype.hasOwnProperty.call(this._value,def.filterId)?this._value[def.filterId]:def.type==="custom"?def.custom.adapter.clearValue:void 0}normalizeValue(value){const normalized={};for(const def of this._filters){let descriptor;try{descriptor=Object.getOwnPropertyDescriptor(value??{},def.filterId)}catch{continue}if(!descriptor||!("value"in descriptor))continue;const fieldValue=snapshotFilterFieldValue(descriptor.value);this.isEmpty(def,fieldValue)||(normalized[def.filterId]=fieldValue)}return Object.freeze(normalized)}get hasActiveFilters(){return this._filters.some(def=>!this.isEmpty(def,this.valueFor(def)))}get invalidFilterIds(){return Object.freeze(this._filters.filter(def=>def.required&&this.isEmpty(def,this.valueFor(def))).map(def=>def.filterId))}checkValidity(){return this.invalidFilterIds.length===0}reportValidity(){const invalid=this.invalidFilterIds;return invalid.length&&(this.touchedFilters=new Set([...this.touchedFilters,...invalid])),invalid.length===0}reset(){this.disabled||(this.cancelDebounce(),this.touchedFilters=new Set,this.value=this.resetValue,this.emit("lr-input",Object.freeze({value:this.value,filterId:void 0})),this.emit("lr-reset",Object.freeze({value:this.value})))}get resetValue(){const out={};for(const def of this._filters)def.defaultValue!==void 0&&!this.isEmpty(def,def.defaultValue)&&(out[def.filterId]=Array.isArray(def.defaultValue)?Object.freeze([...def.defaultValue]):def.defaultValue);return Object.freeze(out)}setFilterValue(id,value){const definition=this._filters.find(candidate=>candidate.filterId===id);if(this.disabled||!definition)return;const next={...this._value};this.isEmpty(definition,value)?delete next[id]:next[id]=value,this.value=next,this.emit("lr-input",Object.freeze({value:this.value,filterId:id}))}setCustomContextValue(definition,generation,value){generation!==this.schemaGeneration||this.schemaSignal.aborted||!this.isConnected||!this._filters.includes(definition)||this.setFilterValue(definition.filterId,value)}markTouched(id){this.disabled||this.touchedFilters.has(id)||(this.touchedFilters=new Set(this.touchedFilters).add(id))}onTextInput(def,e){if(this.disabled)return;const next=e.target.value??"",delay=def.debounce;if(typeof delay!="number"||!Number.isFinite(delay)||delay<=0){this.cancelDebounce(def.filterId),this.setFilterValue(def.filterId,next);return}this.pendingText.set(def.filterId,next);const existing=this.debounceTimers.get(def.filterId);existing!==void 0&&clearTimeout(existing),this.debounceTimers.set(def.filterId,setTimeout(()=>this.flushDebounce(def.filterId),delay))}flushDebounce(id){const timer=this.debounceTimers.get(id);if(timer===void 0)return;clearTimeout(timer),this.debounceTimers.delete(id);const pending=this.pendingText.get(id);this.pendingText.delete(id),pending!==void 0&&this.setFilterValue(id,pending)}cancelDebounce(id){for(const[key,timer]of this.debounceTimers)id!==void 0&&key!==id||(clearTimeout(timer),this.debounceTimers.delete(key),this.pendingText.delete(key))}onTextFocusout(id){this.flushDebounce(id),this.markTouched(id)}repairFocusAfterChipRemoval(index,filterId,shouldRepairFocus){const generation=++this.chipFocusGeneration;shouldRepairFocus&&this.updateComplete.then(()=>{if(!this.isConnected||this.disabled||generation!==this.chipFocusGeneration||deepActiveElement(this.ownerDocument)!==this.ownerDocument.body)return;const chips=this.renderRoot.querySelectorAll('[part="chip"]'),chip=chips[Math.min(index,chips.length-1)],target=chip?collectFocusableElements(chip)[0]:void 0;if(target){target.focus();return}for(const control of this.renderRoot.querySelectorAll("[data-filter-id]"))if(control.dataset.filterId===filterId){collectFocusableElements(control)[0]?.focus();return}})}clearFilter(id,shouldRepairFocus=!1){if(this.disabled)return;this.cancelDebounce(id);const index=this.activeEntries.findIndex(entry=>entry.def.filterId===id),def=this._filters.find(f=>f.filterId===id);if(!def)return;const clearValue=def.type==="custom"?def.custom.adapter.clearValue:def.type==="combobox"&&def.multiple?[]:"";this.setFilterValue(id,clearValue),this.repairFocusAfterChipRemoval(Math.max(0,index),id,shouldRepairFocus)}displayValueFor(def,value){if(def.type==="custom"){const formatted=def.custom?.adapter.formatValue?.(value);return formatted!==void 0?formatted:Array.isArray(value)?getListFormat(this.effectiveLocale,{style:"long",type:"conjunction"}).format(value):value===void 0?"":String(value)}if(def.type==="select"||def.type==="combobox"){const labels=(Array.isArray(value)?value.filter(entry=>typeof entry=="string"):typeof value=="string"?[value]:[]).map(v=>def.options?.find(o=>o.value===v)?.label??v);return labels.length>1?getListFormat(this.effectiveLocale,{style:"long",type:"conjunction"}).format(labels):labels[0]??""}if(def.type==="text")return typeof value=="string"?value:"";if(typeof value!="string")return"";const formatter=getDateTimeFormat(this.effectiveLocale,{year:"numeric",month:"short",day:"numeric",timeZone:"UTC"}),parseIso=input=>{const match=/^(\d{4})-(\d{2})-(\d{2})$/.exec(input);if(!match)return;const year=Number(match[1]),month=Number(match[2]),day=Number(match[3]),date=new Date(0);return date.setUTCHours(0,0,0,0),date.setUTCFullYear(year,month-1,day),date.getUTCFullYear()===year&&date.getUTCMonth()===month-1&&date.getUTCDate()===day?date:void 0},segments=value.split("/");if(def.type==="date"&&segments.length!==1||def.type==="date-range"&&segments.length!==2)return value;const[startText,endText]=segments,start=parseIso(startText??""),end=endText===void 0?void 0:parseIso(endText);return!start||endText!==void 0&&(!end||end.getTime()<start.getTime())?value:end?formatter.formatRange(start,end):formatter.format(start)}get activeEntries(){return this._filters.filter(def=>!this.isEmpty(def,this.valueFor(def))).map(def=>({def,display:this.displayValueFor(def,this.valueFor(def))}))}disconnectedCallback(){super.disconnectedCallback(),this.cancelDebounce(),this.schemaAbortController?.abort(),this.schemaAbortController=void 0,this.schemaGeneration+=1}connectedCallback(){super.connectedCallback(),(!this.schemaAbortController||this.schemaAbortController.signal.aborted)&&(this.renewSchemaContext(),this.hasUpdated&&this.requestUpdate()),this.hasUpdated&&queueMicrotask(()=>{this.isConnected&&this.syncTextControls()})}syncTextControls(){if(!this._filters.some(def=>def.type==="text"))return;const fields=new Map;for(const node of this.renderRoot.querySelectorAll("lr-input[data-filter-id]")){const element=node,id=element.dataset.filterId;id!==void 0&&fields.set(id,element)}for(const def of this._filters){if(def.type!=="text"||this.debounceTimers.has(def.filterId))continue;const field=fields.get(def.filterId);if(!field)continue;const raw=this._value[def.filterId],next=typeof raw=="string"?raw:"";field.value!==next&&(field.value=next)}}willUpdate(changed){super.willUpdate(changed),changed.has("disabled")&&this.disabled&&this.cancelDebounce()}updated(changed){if(super.updated(changed),this.syncTextControls(),changed.has("value")||changed.has("filters")){const invalidFilterIds=this.invalidFilterIds,valid=invalidFilterIds.length===0,key=JSON.stringify({valid,invalidFilterIds});key!==this.lastValidityKey&&(this.lastValidityKey=key,this.emit("lr-validity-change",Object.freeze({valid,invalidFilterIds:Object.freeze([...invalidFilterIds])})))}}renderOption(option){return html`<lr-option value=${option.value}
+var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html,nothing}from"lit";import{property,state}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{collectFocusableElements,deepActiveElement}from"../../../internal/overlay-manager.js";import{getDateTimeFormat,getListFormat}from"../../../internal/intl-cache.js";import{styles}from"./filter-bar.styles.js";import"../../forms/select/select.class.js";import"../../forms/combobox/combobox.class.js";import"../../forms/combobox/option.class.js";import"../../forms/date-picker/date-input.class.js";import"../../forms/input/input.class.js";import"../../overlays/chip/chip.class.js";import"../../overlays/chip/chip-group.class.js";import"../../forms/button/button.class.js";import"../../overlays/spinner/spinner.class.js";import{LYRA_DEFAULT_fieldRequired,LYRA_DEFAULT_filterBarActiveFilters,LYRA_DEFAULT_filterBarReset}from"../../../internal/default-strings.generated.js";const MAX_FILTER_COLLECTION_ENTRIES=1e4,MAX_FILTER_COLLECTION_NODES=5e4,MAX_FILTER_COLLECTION_DEPTH=16,OMIT_FILTER_VALUE=Symbol("omit-filter-value"),EMPTY_FILTERS=Object.freeze([]),EMPTY_VALUE=Object.freeze({});function isPlainFilterRecord(value){try{const prototype=Object.getPrototypeOf(value);return prototype===null||Object.getPrototypeOf(prototype)===null}catch{return!1}}function snapshotFilterEntry(value,budget,depth){if(value===null||typeof value!="object"&&typeof value!="function"||typeof value=="function")return value;if(depth>MAX_FILTER_COLLECTION_DEPTH||budget.remaining<=0)return OMIT_FILTER_VALUE;const existing=budget.seen.get(value);if(existing!==void 0)return existing;let isArray=!1;try{isArray=Array.isArray(value)}catch{return OMIT_FILTER_VALUE}if(isArray){const output2=[];budget.seen.set(value,output2);let length=0;try{const descriptor=Object.getOwnPropertyDescriptor(value,"length");descriptor&&"value"in descriptor&&typeof descriptor.value=="number"&&Number.isSafeInteger(descriptor.value)&&descriptor.value>=0&&(length=Math.min(descriptor.value,MAX_FILTER_COLLECTION_ENTRIES))}catch{return Object.freeze(output2)}for(let index=0;index<length&&budget.remaining>0;index+=1){let descriptor;try{descriptor=Object.getOwnPropertyDescriptor(value,String(index))}catch{continue}if(!descriptor||!("value"in descriptor))continue;budget.remaining-=1;const entry=snapshotFilterEntry(descriptor.value,budget,depth+1);entry!==OMIT_FILTER_VALUE&&output2.push(entry)}return Object.freeze(output2)}if(!isPlainFilterRecord(value))return value;const output={};budget.seen.set(value,output);let descriptors;try{descriptors=Object.getOwnPropertyDescriptors(value)}catch{return OMIT_FILTER_VALUE}let retained=0;for(const key of Reflect.ownKeys(descriptors)){if(retained>=MAX_FILTER_COLLECTION_ENTRIES||budget.remaining<=0)break;const descriptor=descriptors[key];if(!descriptor?.enumerable||!("value"in descriptor))continue;retained+=1,budget.remaining-=1;const entry=key==="icon"?descriptor.value:snapshotFilterEntry(descriptor.value,budget,depth+1);entry!==OMIT_FILTER_VALUE&&Object.defineProperty(output,key,{value:entry,enumerable:!0,configurable:!1,writable:!1})}return Object.freeze(output)}function snapshotFilterDefinitions(value){let isArray=!1;try{isArray=Array.isArray(value)}catch{return EMPTY_FILTERS}if(!isArray)return EMPTY_FILTERS;const snapshot=snapshotFilterEntry(value,{remaining:MAX_FILTER_COLLECTION_NODES,seen:new WeakMap},0);return Array.isArray(snapshot)?snapshot:EMPTY_FILTERS}function snapshotFilterFieldValue(value){let isArray=!1;try{isArray=Array.isArray(value)}catch{return}if(!isArray)return typeof value=="string"||typeof value=="boolean"||value===void 0?value:void 0;const output=[];let sourceLength=0;try{const descriptor=Object.getOwnPropertyDescriptor(value,"length");descriptor&&"value"in descriptor&&typeof descriptor.value=="number"&&Number.isSafeInteger(descriptor.value)&&descriptor.value>=0&&(sourceLength=descriptor.value)}catch{return Object.freeze(output)}const length=Math.min(sourceLength,MAX_FILTER_COLLECTION_ENTRIES);for(let index=0;index<length;index+=1){let descriptor;try{descriptor=Object.getOwnPropertyDescriptor(value,String(index))}catch{continue}descriptor&&"value"in descriptor&&typeof descriptor.value=="string"&&output.push(descriptor.value)}return Object.freeze(output)}const SELECT_EXPORT_PARTS=["form-control-label: filter-control-label","trigger: filter-control-field","display-input: filter-control-input","start: filter-control-start","end: filter-control-end","listbox: filter-control-listbox","option: filter-control-option","clear-button: filter-control-clear-button","expand-icon: filter-control-expand-icon","error: filter-control-error","hint: filter-control-hint"].join(", "),COMBOBOX_EXPORT_PARTS=["form-control-label: filter-control-label","combobox: filter-control-field","combobox-input: filter-control-input","start: filter-control-start","end: filter-control-end","listbox: filter-control-listbox","option: filter-control-option","clear-button: filter-control-clear-button","expand-icon: filter-control-expand-icon","error: filter-control-error","hint: filter-control-hint"].join(", "),INPUT_EXPORT_PARTS=["form-control-label: filter-control-label","input-wrapper: filter-control-field","input: filter-control-input","start: filter-control-start","end: filter-control-end","clear-button: filter-control-clear-button","error: filter-control-error","hint: filter-control-hint"].join(", "),DATE_INPUT_EXPORT_PARTS=["form-control-label: filter-control-label","input-wrapper: filter-control-field","input: filter-control-input","start: filter-control-start","end: filter-control-end","clear-button: filter-control-clear-button","expand-button: filter-control-expand-button","expand-icon: filter-control-expand-icon","popup: filter-control-popup","error: filter-control-error","hint: filter-control-hint"].join(", ");function isBuiltInSet(value){return value==null?!1:typeof value=="boolean"?value:Array.isArray(value)?value.length>0:value!==""}function cloneFilterValue(value){const clone={};let descriptors;try{descriptors=Object.getOwnPropertyDescriptors(value??{})}catch{return EMPTY_VALUE}let retained=0;for(const key of Reflect.ownKeys(descriptors)){if(retained>=MAX_FILTER_COLLECTION_ENTRIES)break;const descriptor=descriptors[key];if(typeof key!="string"||!descriptor?.enumerable||!("value"in descriptor))continue;retained+=1;const fieldValue=snapshotFilterFieldValue(descriptor.value);fieldValue!==void 0&&(clone[key]=fieldValue)}return Object.freeze(clone)}class LyraFilterBar extends LyraElement{constructor(){super(...arguments),this.label="",this.disabled=!1,this.loading=!1,this.touchedFilters=new Set,this._filters=EMPTY_FILTERS,this._value=EMPTY_VALUE,this.debounceTimers=new Map,this.pendingText=new Map,this.chipFocusGeneration=0,this.schemaGeneration=0,this.onControlChange=(id,e)=>{this.setFilterValue(id,e.target.value)},this.stopControlAlias=event=>{event.stopPropagation()},this.onCustomControlChange=(def,generation,e)=>{e.stopPropagation(),this.setCustomContextValue(def,generation,def.custom.adapter.valueFromEvent(e))}}static{this.defaultStrings={...super.defaultStrings,fieldRequired:LYRA_DEFAULT_fieldRequired,filterBarActiveFilters:LYRA_DEFAULT_filterBarActiveFilters,filterBarReset:LYRA_DEFAULT_filterBarReset}}static{this.styles=[LyraElement.styles,styles]}static{this.immutableEventDetails=Object.freeze(["lr-validity-change"])}static{this.properties={filters:{attribute:!1,noAccessor:!0},value:{attribute:!1,noAccessor:!0}}}get filters(){return this._filters}set filters(next){const old=this._filters;this.cancelDebounce(),this.renewSchemaContext();const seen=new Set;this._filters=Object.freeze(snapshotFilterDefinitions(next).filter(definition=>{try{return!(!definition||typeof definition.filterId!="string"||definition.filterId.length===0||definition.filterId!==definition.filterId.trim()||seen.has(definition.filterId)||(seen.add(definition.filterId),(definition.type==="select"||definition.type==="combobox")&&!Array.isArray(definition.options))||definition.type==="custom"&&!definition.custom?.adapter)}catch{return!1}}));const ids=new Set(this._filters.map(definition=>definition.filterId));this.touchedFilters=new Set([...this.touchedFilters].filter(id=>ids.has(id)));const oldValue=this._value;this._value=this.normalizeValue(this._value),this.requestUpdate("filters",old),this._value!==oldValue&&this.requestUpdate("value",oldValue)}get value(){return cloneFilterValue(this._value)}set value(next){const old=this._value;this._value=this.normalizeValue(next),this.requestUpdate("value",old)}renewSchemaContext(){this.schemaAbortController?.abort();const AbortControllerCtor=this.ownerDocument.defaultView?.AbortController??AbortController;this.schemaAbortController=new AbortControllerCtor,this.schemaGeneration+=1}get schemaSignal(){return this.schemaAbortController||this.renewSchemaContext(),this.schemaAbortController.signal}isEmpty(def,value){if(def.type!=="custom")return!isBuiltInSet(value);const{adapter}=def.custom;if(adapter.isEmpty)return adapter.isEmpty(value);const clear=adapter.clearValue;return Array.isArray(value)&&Array.isArray(clear)?value.length===clear.length&&value.every((entry,index)=>entry===clear[index]):Object.is(value,clear)}valueFor(def){return Object.prototype.hasOwnProperty.call(this._value,def.filterId)?this._value[def.filterId]:def.type==="custom"?def.custom.adapter.clearValue:void 0}normalizeValue(value){const normalized={};for(const def of this._filters){let descriptor;try{descriptor=Object.getOwnPropertyDescriptor(value??{},def.filterId)}catch{continue}if(!descriptor||!("value"in descriptor))continue;const fieldValue=snapshotFilterFieldValue(descriptor.value);this.isEmpty(def,fieldValue)||(normalized[def.filterId]=fieldValue)}return Object.freeze(normalized)}get hasActiveFilters(){return this._filters.some(def=>!this.isEmpty(def,this.valueFor(def)))}get invalidFilterIds(){return Object.freeze(this._filters.filter(def=>def.required&&this.isEmpty(def,this.valueFor(def))).map(def=>def.filterId))}checkValidity(){return this.invalidFilterIds.length===0}reportValidity(){const invalid=this.invalidFilterIds;return invalid.length&&(this.touchedFilters=new Set([...this.touchedFilters,...invalid])),invalid.length===0}reset(){this.disabled||(this.cancelDebounce(),this.touchedFilters=new Set,this.value=this.resetValue,this.emit("lr-input",Object.freeze({value:this.value,filterId:void 0})),this.emit("lr-reset",Object.freeze({value:this.value})))}get resetValue(){const out={};for(const def of this._filters)def.defaultValue!==void 0&&!this.isEmpty(def,def.defaultValue)&&(out[def.filterId]=Array.isArray(def.defaultValue)?Object.freeze([...def.defaultValue]):def.defaultValue);return Object.freeze(out)}setFilterValue(id,value){const definition=this._filters.find(candidate=>candidate.filterId===id);if(this.disabled||!definition)return;const next={...this._value};this.isEmpty(definition,value)?delete next[id]:next[id]=value,this.value=next,this.emit("lr-input",Object.freeze({value:this.value,filterId:id}))}setCustomContextValue(definition,generation,value){generation!==this.schemaGeneration||this.schemaSignal.aborted||!this.isConnected||!this._filters.includes(definition)||this.setFilterValue(definition.filterId,value)}markTouched(id){this.disabled||this.touchedFilters.has(id)||(this.touchedFilters=new Set(this.touchedFilters).add(id))}onTextInput(def,e){if(this.disabled)return;const next=e.target.value??"",delay=def.debounce;if(typeof delay!="number"||!Number.isFinite(delay)||delay<=0){this.cancelDebounce(def.filterId),this.setFilterValue(def.filterId,next);return}this.pendingText.set(def.filterId,next);const existing=this.debounceTimers.get(def.filterId);existing!==void 0&&clearTimeout(existing),this.debounceTimers.set(def.filterId,setTimeout(()=>this.flushDebounce(def.filterId),delay))}flushDebounce(id){const timer=this.debounceTimers.get(id);if(timer===void 0)return;clearTimeout(timer),this.debounceTimers.delete(id);const pending=this.pendingText.get(id);this.pendingText.delete(id),pending!==void 0&&this.setFilterValue(id,pending)}cancelDebounce(id){for(const[key,timer]of this.debounceTimers)id!==void 0&&key!==id||(clearTimeout(timer),this.debounceTimers.delete(key),this.pendingText.delete(key))}onTextFocusout(id){this.flushDebounce(id),this.markTouched(id)}repairFocusAfterChipRemoval(index,filterId,shouldRepairFocus){const generation=++this.chipFocusGeneration;shouldRepairFocus&&this.updateComplete.then(()=>{if(!this.isConnected||this.disabled||generation!==this.chipFocusGeneration||deepActiveElement(this.ownerDocument)!==this.ownerDocument.body)return;const chips=this.renderRoot.querySelectorAll('[part="chip"]'),chip=chips[Math.min(index,chips.length-1)],target=chip?collectFocusableElements(chip)[0]:void 0;if(target){target.focus();return}for(const control of this.renderRoot.querySelectorAll("[data-filter-id]"))if(control.dataset.filterId===filterId){collectFocusableElements(control)[0]?.focus();return}})}clearFilter(id,shouldRepairFocus=!1){if(this.disabled)return;this.cancelDebounce(id);const index=this.activeEntries.findIndex(entry=>entry.def.filterId===id),def=this._filters.find(f=>f.filterId===id);if(!def)return;const clearValue=def.type==="custom"?def.custom.adapter.clearValue:def.type==="combobox"&&def.multiple?[]:"";this.setFilterValue(id,clearValue),this.repairFocusAfterChipRemoval(Math.max(0,index),id,shouldRepairFocus)}displayValueFor(def,value){if(def.type==="custom"){const formatted=def.custom?.adapter.formatValue?.(value);return formatted!==void 0?formatted:Array.isArray(value)?getListFormat(this.effectiveLocale,{style:"long",type:"conjunction"}).format(value):value===void 0?"":String(value)}if(def.type==="select"||def.type==="combobox"){const labels=(Array.isArray(value)?value.filter(entry=>typeof entry=="string"):typeof value=="string"?[value]:[]).map(v=>def.options?.find(o=>o.value===v)?.label??v);return labels.length>1?getListFormat(this.effectiveLocale,{style:"long",type:"conjunction"}).format(labels):labels[0]??""}if(def.type==="text")return typeof value=="string"?value:"";if(typeof value!="string")return"";const formatter=getDateTimeFormat(this.effectiveLocale,{year:"numeric",month:"short",day:"numeric",timeZone:"UTC"}),parseIso=input=>{const match=/^(\d{4})-(\d{2})-(\d{2})$/.exec(input);if(!match)return;const year=Number(match[1]),month=Number(match[2]),day=Number(match[3]),date=new Date(0);return date.setUTCHours(0,0,0,0),date.setUTCFullYear(year,month-1,day),date.getUTCFullYear()===year&&date.getUTCMonth()===month-1&&date.getUTCDate()===day?date:void 0},segments=value.split("/");if(def.type==="date"&&segments.length!==1||def.type==="date-range"&&segments.length!==2)return value;const[startText,endText]=segments,start=parseIso(startText??""),end=endText===void 0?void 0:parseIso(endText);return!start||endText!==void 0&&(!end||end.getTime()<start.getTime())?value:end?formatter.formatRange(start,end):formatter.format(start)}get activeEntries(){return this._filters.filter(def=>!this.isEmpty(def,this.valueFor(def))).map(def=>({def,display:this.displayValueFor(def,this.valueFor(def))}))}disconnectedCallback(){super.disconnectedCallback(),this.cancelDebounce(),this.schemaAbortController?.abort(),this.schemaAbortController=void 0,this.schemaGeneration+=1}connectedCallback(){super.connectedCallback(),(!this.schemaAbortController||this.schemaAbortController.signal.aborted)&&(this.renewSchemaContext(),this.hasUpdated&&this.requestUpdate()),this.hasUpdated&&queueMicrotask(()=>{this.isConnected&&this.syncTextControls()})}syncTextControls(){if(!this._filters.some(def=>def.type==="text"))return;const fields=new Map;for(const node of this.renderRoot.querySelectorAll("lr-input[data-filter-id]")){const element=node,id=element.dataset.filterId;id!==void 0&&fields.set(id,element)}for(const def of this._filters){if(def.type!=="text"||this.debounceTimers.has(def.filterId))continue;const field=fields.get(def.filterId);if(!field)continue;const raw=this._value[def.filterId],next=typeof raw=="string"?raw:"";field.value!==next&&(field.value=next)}}willUpdate(changed){super.willUpdate(changed),changed.has("disabled")&&this.disabled&&this.cancelDebounce()}updated(changed){if(super.updated(changed),this.syncTextControls(),changed.has("value")||changed.has("filters")){const invalidFilterIds=this.invalidFilterIds,valid=invalidFilterIds.length===0,key=JSON.stringify({valid,invalidFilterIds});key!==this.lastValidityKey&&(this.lastValidityKey=key,this.emit("lr-validity-change",Object.freeze({valid,invalidFilterIds:Object.freeze([...invalidFilterIds])})))}}renderOption(option){return html`<lr-option value=${option.value}
       >${option.icon===void 0||option.icon===null?nothing:html`<span slot="start" aria-hidden="true" inert>${option.icon}</span>`}${option.label}</lr-option
     >`}renderControl(def){const value=this.valueFor(def),missing=!!def.required&&this.isEmpty(def,value),errorText=this.touchedFilters.has(def.filterId)&&missing?this.localize("fieldRequired"):"",onChange=e=>this.onControlChange(def.filterId,e),onFocusout=()=>this.markTouched(def.filterId);if(def.type==="custom"){const custom=def.custom,generation=this.schemaGeneration,signal=this.schemaSignal,onCustomValueChange=e=>this.onCustomControlChange(def,generation,e),context={filterId:def.filterId,label:def.label,definition:def,value,disabled:this.disabled,required:!!def.required,errorText,signal,generation,setValue:next=>this.setCustomContextValue(def,generation,next),onValueChange:onCustomValueChange,onInput:onCustomValueChange,onChange:onCustomValueChange,onFocusout:()=>{generation===this.schemaGeneration&&!signal.aborted&&this._filters.includes(def)&&onFocusout()}};return html`<div
         part="filter-control"

package/dist/components/layout/filter-bar/filter-bar.styles.js

@@ -14,10 +14,6 @@ import{css}from"lit";const styles=css`
   [part='controls'] {
     display: flex;
     flex-wrap: wrap;
-    /* end (not center/stretch): every composed control (lr-select/lr-combobox/lr-date-input/
-       lr-input) renders its own label above its own field, so aligning to the field row's own
-       baseline keeps the reset button (no label above it) sitting flush with the fields beside
-       it. */
     align-items: flex-end;
     gap: var(--lr-space-s);
     min-inline-size: 0;
@@ -64,11 +60,6 @@ import{css}from"lit";const styles=css`
     min-inline-size: 0;
     max-inline-size: 100%;
   }
-  /* lr-chip has no disabled property of its own to bind ?disabled to (unlike every other
-     composed control in this component) -- the chip itself is un-rendered as \`removable\` while
-     the filter bar is disabled (see render()), so there is no clickable remove affordance left to
-     gate; this only supplies the same dimmed visual treatment every other disabled sub-control
-     gets. Shared library-wide disabled-state token -- see lr-checkbox/lr-select/lr-menu-item. */
   :host([disabled]) [part='chip'] {
     opacity: var(--lr-opacity-disabled);
   }

package/dist/components/layout/menu/menu-item.class.d.ts

@@ -144,6 +144,11 @@ export interface LyraMenuItemEventMap {
  * @since 4.0.0
  */
 export declare class LyraMenuItem extends LyraElement<LyraMenuItemEventMap> {
+    /** Reflected from `submenuExpanded` as a styling hook. The parent `<lr-menu>` owns submenu
+     *  state through `openSubmenu()`/`closeSubmenu()`, so this is output rather than input and is
+     *  not observed. `<lr-dropdown-item>` inherits this and adds the `submenuopen` spelling to its
+     *  own `observedAttributes`, where it genuinely is settable. */
+    protected static readonly knownUnobservedAttributes: readonly string[];
     static styles: import("lit").CSSResultGroup[];
     /** An id/value available on the item carried by the parent `<lr-menu>`'s `lr-select` detail. */
     value: string;

package/dist/components/layout/menu/menu-item.class.js

@@ -12,7 +12,7 @@ var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3
       aria-hidden="true"
       focusable="false"
     ><polyline points="5 12.5 10 17.5 19 6.5"></polyline></svg>
-  `}class LyraMenuItem extends LyraElement{constructor(){super(...arguments),this.value="",this.size="m",this.disabled=!1,this.variant="default",this.type="normal",this.checked=!1,this.loading=!1,this.hasIconSlot=!1,this.hasDetailsSlot=!1,this.hasSuffixSlot=!1,this.submenuAssigned=!1,this.submenuExpanded=!1,this.slottedLabel="",this.submenuPanel=null,this.submenuPanelAttached=!1,this.submenuPanelGeneration=0,this.labelObservationGeneration=0,this.announcedNativeState="",this.owningMenu=null,this.ownsAriaLabel=!1,this.ownedAriaLabelValue=null,this.ownsPanelAriaLabel=!1,this.ownedPanelAriaLabelValue=null,this.onNativeStateMutation=()=>{const signature=this.nativeStateSignature();signature!==this.announcedNativeState&&(this.announcedNativeState=signature,this.emitStateChange())},this.onIconSlotChange=()=>{this.hasIconSlot=[...this.renderRoot.querySelectorAll('slot[name="icon"], slot[name="prefix"]')].some(slot=>slot.assignedElements({flatten:!0}).length>0)},this.onDetailsSlotChange=e=>{this.hasDetailsSlot=e.target.assignedNodes({flatten:!0}).some(node=>(node.textContent??"").trim()!=="")},this.onSuffixSlotChange=e=>{this.hasSuffixSlot=e.target.assignedElements({flatten:!0}).length>0},this.onLabelSlotChange=event=>{this.observeLabelContent(),this.syncSlottedLabel(event.target)},this.onForwardedLabelSlotChange=event=>{const slot=event.target;this.labelForwardingSlots().includes(slot)&&(this.observeLabelContent(),this.syncSlottedLabel())},this.onSubmenuSlotChange=e=>{this.syncSubmenuSlot(e.target)},this.onPanelStateChange=open=>{this.submenuExpanded=open}}static{this.styles=[LyraElement.styles,sizes,styles]}get hasSubmenu(){return this.submenuAssigned}get submenuOpen(){return this.submenuExpanded}[menuItemOwner](owner,expectedOwner){owner===null&&expectedOwner&&this.owningMenu!==expectedOwner||(this.owningMenu=owner)}set submenuOpen(next){!!next!==this.submenuExpanded&&(next?this.openSubmenu("none"):this.closeSubmenu())}get interactionDisabled(){return this.disabled||this.loading}connectedCallback(){super.connectedCallback();const initialLabel=this.readSlottedLabel(null);initialLabel!==this.slottedLabel&&(this.slottedLabel=initialLabel),this.tabIndex!==0&&(this.tabIndex=-1),this.announcedNativeState=this.nativeStateSignature();const MutationObserverCtor=this.ownerDocument.defaultView?.MutationObserver;MutationObserverCtor&&(this.nativeStateObserver=new MutationObserverCtor(this.onNativeStateMutation),this.nativeStateObserver.observe(this,{attributes:!0,attributeFilter:["hidden","inert","aria-hidden"]}),this.labelObserver=new MutationObserverCtor(()=>{this.observeLabelContent(),this.syncSlottedLabel()}),this.observeLabelContent()),this.addEventListener("slotchange",this.onForwardedLabelSlotChange);const labelGeneration=++this.labelObservationGeneration;this.updateComplete.then(()=>{if(!this.isConnected||labelGeneration!==this.labelObservationGeneration)return;this.observeLabelContent(),this.syncSlottedLabel();const submenuSlot=this.renderRoot.querySelector('slot[name="submenu"]');submenuSlot&&this.syncSubmenuSlot(submenuSlot)})}disconnectedCallback(){super.disconnectedCallback(),this.submenuPanelGeneration+=1,this.submenuExpanded=!1,this.nativeStateObserver?.disconnect(),this.nativeStateObserver=void 0,this.labelObservationGeneration+=1,this.removeEventListener("slotchange",this.onForwardedLabelSlotChange),this.labelObserver?.disconnect(),this.labelObserver=void 0,this.submenuPanel&&this.submenuPanelAttached&&(this.submenuPanel[submenuPanelController].detach(this),this.submenuPanelAttached=!1)}nativeStateSignature(){return`${this.hidden}|${this.inert}|${this.getAttribute("aria-hidden")}`}emitStateChange(){this.emit("lr-menu-item-state-change",{disabled:this.interactionDisabled,hidden:!!this.hidden,inert:this.inert})}willUpdate(changed){super.willUpdate(changed);const isCheckbox=this.type==="checkbox"&&!this.submenuAssigned;this.setAttribute("role",isCheckbox?"menuitemcheckbox":"menuitem"),isCheckbox?this.setAttribute("aria-checked",this.checked?"true":"false"):this.removeAttribute("aria-checked"),this.submenuAssigned?(this.setAttribute("aria-haspopup","menu"),this.setAttribute("aria-expanded",this.submenuExpanded?"true":"false")):(this.removeAttribute("aria-haspopup"),this.removeAttribute("aria-expanded")),this.applyComputedName(),this.toggleAttribute("submenu-open",this.submenuExpanded),this.setAttribute("aria-disabled",String(this.interactionDisabled)),this.interactionDisabled&&(changed.has("disabled")||changed.has("loading"))&&(this.tabIndex=-1,this.ownerDocument?.activeElement===this&&this.blur()),(changed.has("disabled")||changed.has("loading"))&&this.emitStateChange()}click(){this.interactionDisabled||this.renderRoot.querySelector('[part~="base"]')?.click()}select(){if(!this.interactionDisabled){if(this.submenuPanel){this.openSubmenu("none");return}if(this.type==="checkbox"){const checked=!this.checked;this.emit("lr-menu-item-change",{value:this.value,checked},{cancelable:!0}).defaultPrevented||(this.checked=checked)}this.owningMenu?.activate(this)}}async openSubmenu(focus="first"){const panel=this.submenuPanel,generation=this.submenuPanelGeneration;if(!panel||this.interactionDisabled||!this.isCurrentSubmenuPanel(panel,generation))return;const controller=panel[submenuPanelController],shown=controller.show(focus);this.isCurrentSubmenuPanel(panel,generation)&&(this.submenuExpanded=controller.open,await shown,this.isCurrentSubmenuPanel(panel,generation)&&(panel.updateComplete&&await panel.updateComplete,this.isCurrentSubmenuPanel(panel,generation)&&(this.submenuExpanded=controller.open,await this.updateComplete)))}async closeSubmenu(){const panel=this.submenuPanel,generation=this.submenuPanelGeneration;if(!panel||!this.isCurrentSubmenuPanel(panel,generation))return;const controller=panel[submenuPanelController],hidden=controller.hide();this.isCurrentSubmenuPanel(panel,generation)&&(this.submenuExpanded=controller.open,await hidden,this.isCurrentSubmenuPanel(panel,generation)&&(panel.updateComplete&&await panel.updateComplete,this.isCurrentSubmenuPanel(panel,generation)&&(this.submenuExpanded=controller.open,await this.updateComplete)))}defaultLabelSlot(){return this.renderRoot?.querySelector("slot:not([name])")??null}isDefaultLabelBranch(node){let top=node;for(;top.parentNode&&top.parentNode!==this;)top=top.parentNode;return top.parentNode!==this?!1:top.nodeType!==1||(top.getAttribute("slot")??"")===""}labelForwardingSlots(){return Array.from(this.querySelectorAll("slot")).filter(slot=>this.isDefaultLabelBranch(slot))}composedParentForNode(node){const assignedSlot=node.assignedSlot;if(assignedSlot)return assignedSlot;if(node.parentElement)return node.parentElement;const root=node.getRootNode();return"host"in root&&root.host.nodeType===1?root.host:null}isLabelSubtreeExcluded(element){return!(element.getRootNode()===this.renderRoot&&element.matches('[part~="label"][aria-hidden="true"][inert]:not([hidden])'))&&isAccessibilitySubtreeExcluded(element)}readSlottedLabel(slot=this.defaultLabelSlot()){const nodes=slot?slot.assignedNodes({flatten:!0}):Array.from(this.childNodes).filter(node=>this.isDefaultLabelBranch(node));return composedAccessibilityText(nodes,{ancestorBoundary:this,isSubtreeExcluded:element=>this.isLabelSubtreeExcluded(element)}).replace(/\s+/g," ").trim()}observeLabelAncestors(node,options){const observer=this.labelObserver;if(!observer)return;let current=this.composedParentForNode(node);for(;current;)current!==this&&!this.contains(current)&&observer.observe(current,options),current=composedParentElement(current)}observeLabelContent(){const observer=this.labelObserver;if(!observer)return;observer.disconnect();const options={attributes:!0,attributeFilter:["aria-hidden","aria-label","aria-labelledby","alt","class","hidden","inert","id","label","open","slot","style"],characterData:!0,childList:!0,subtree:!0};observer.observe(this,options);const slot=this.defaultLabelSlot();for(const assigned of slot?.assignedNodes({flatten:!0})??[])this.contains(assigned)||observer.observe(assigned,options),this.observeLabelAncestors(assigned,{attributes:!0,attributeFilter:options.attributeFilter})}syncSlottedLabel(slot=this.defaultLabelSlot()){const next=this.readSlottedLabel(slot);next!==this.slottedLabel&&(this.slottedLabel=next),this.applyComputedName(),this.applyPanelName()}syncSubmenuSlot(submenuSlot){if(!submenuSlot.isConnected||submenuSlot.getRootNode()!==this.renderRoot)return;const assigned=submenuSlot.assignedElements({flatten:!0}),authoredPanel=assigned.find(element=>element.localName===tag("menu")),hasDirectItems=assigned.some(element=>element.localName===tag("menu-item")||element.localName===tag("dropdown-item")),kind=authoredPanel?"panel":hasDirectItems?"items":void 0;if(this.submenuKind=kind,this.submenuAssigned=kind!==void 0,kind==="items"){const generated=this.renderRoot.querySelector("[data-generated-submenu]");generated&&this.connectSubmenuPanel(generated);return}this.connectSubmenuPanel(authoredPanel??null)}connectSubmenuPanel(next){const samePanel=next===this.submenuPanel;if(samePanel&&(next===null||this.submenuPanelAttached))return;const previous=this.submenuPanel;if(++this.submenuPanelGeneration,previous&&this.submenuPanelAttached&&previous[submenuPanelController].detach(this),this.submenuPanelAttached=!1,samePanel||(this.submenuPanel=next,this.ownsPanelAriaLabel=!1,this.ownedPanelAriaLabelValue=null),!this.submenuPanel){this.submenuExpanded=!1;return}const controller=this.submenuPanel[submenuPanelController];controller.attach(this,this.onPanelStateChange),this.submenuPanelAttached=!0,this.submenuExpanded=controller.open,this.applyPanelName()}isCurrentSubmenuPanel(panel,generation){return this.isConnected&&this.submenuPanel===panel&&this.submenuPanelGeneration===generation}updated(changed){if(super.updated(changed),changed.has("submenuKind")&&this.submenuKind==="items"){const generated=this.renderRoot.querySelector("[data-generated-submenu]");this.connectSubmenuPanel(generated)}}applyComputedName(){if(this.ownsAriaLabel&&this.getAttribute("aria-label")!==this.ownedAriaLabelValue&&(this.ownsAriaLabel=!1,this.ownedAriaLabelValue=null),this.hasAttribute("aria-labelledby")){this.ownsAriaLabel&&this.removeAttribute("aria-label"),this.ownsAriaLabel=!1,this.ownedAriaLabelValue=null;return}this.hasAttribute("aria-label")&&!this.ownsAriaLabel||(this.ownsAriaLabel=!0,this.ownedAriaLabelValue=this.slottedLabel,this.getAttribute("aria-label")!==this.slottedLabel&&this.setAttribute("aria-label",this.slottedLabel))}applyPanelName(){const panel=this.submenuPanel;if(panel){if(this.ownsPanelAriaLabel&&panel.getAttribute("aria-label")!==this.ownedPanelAriaLabelValue&&(this.ownsPanelAriaLabel=!1,this.ownedPanelAriaLabelValue=null),panel.hasAttribute("label")){this.ownsPanelAriaLabel&&(panel.removeAttribute("aria-label"),this.ownsPanelAriaLabel=!1,this.ownedPanelAriaLabelValue=null);return}panel.hasAttribute("aria-label")&&!this.ownsPanelAriaLabel||(this.ownsPanelAriaLabel=!0,this.ownedPanelAriaLabelValue=this.slottedLabel,panel.getAttribute("aria-label")!==this.slottedLabel&&panel.setAttribute("aria-label",this.slottedLabel))}}getTextLabel(){return this.readSlottedLabel()}render(){return html`
+  `}class LyraMenuItem extends LyraElement{constructor(){super(...arguments),this.value="",this.size="m",this.disabled=!1,this.variant="default",this.type="normal",this.checked=!1,this.loading=!1,this.hasIconSlot=!1,this.hasDetailsSlot=!1,this.hasSuffixSlot=!1,this.submenuAssigned=!1,this.submenuExpanded=!1,this.slottedLabel="",this.submenuPanel=null,this.submenuPanelAttached=!1,this.submenuPanelGeneration=0,this.labelObservationGeneration=0,this.announcedNativeState="",this.owningMenu=null,this.ownsAriaLabel=!1,this.ownedAriaLabelValue=null,this.ownsPanelAriaLabel=!1,this.ownedPanelAriaLabelValue=null,this.onNativeStateMutation=()=>{const signature=this.nativeStateSignature();signature!==this.announcedNativeState&&(this.announcedNativeState=signature,this.emitStateChange())},this.onIconSlotChange=()=>{this.hasIconSlot=[...this.renderRoot.querySelectorAll('slot[name="icon"], slot[name="prefix"]')].some(slot=>slot.assignedElements({flatten:!0}).length>0)},this.onDetailsSlotChange=e=>{this.hasDetailsSlot=e.target.assignedNodes({flatten:!0}).some(node=>(node.textContent??"").trim()!=="")},this.onSuffixSlotChange=e=>{this.hasSuffixSlot=e.target.assignedElements({flatten:!0}).length>0},this.onLabelSlotChange=event=>{this.observeLabelContent(),this.syncSlottedLabel(event.target)},this.onForwardedLabelSlotChange=event=>{const slot=event.target;this.labelForwardingSlots().includes(slot)&&(this.observeLabelContent(),this.syncSlottedLabel())},this.onSubmenuSlotChange=e=>{this.syncSubmenuSlot(e.target)},this.onPanelStateChange=open=>{this.submenuExpanded=open}}static{this.knownUnobservedAttributes=["submenu-open"]}static{this.styles=[LyraElement.styles,sizes,styles]}get hasSubmenu(){return this.submenuAssigned}get submenuOpen(){return this.submenuExpanded}[menuItemOwner](owner,expectedOwner){owner===null&&expectedOwner&&this.owningMenu!==expectedOwner||(this.owningMenu=owner)}set submenuOpen(next){!!next!==this.submenuExpanded&&(next?this.openSubmenu("none"):this.closeSubmenu())}get interactionDisabled(){return this.disabled||this.loading}connectedCallback(){super.connectedCallback();const initialLabel=this.readSlottedLabel(null);initialLabel!==this.slottedLabel&&(this.slottedLabel=initialLabel),this.tabIndex!==0&&(this.tabIndex=-1),this.announcedNativeState=this.nativeStateSignature();const MutationObserverCtor=this.ownerDocument.defaultView?.MutationObserver;MutationObserverCtor&&(this.nativeStateObserver=new MutationObserverCtor(this.onNativeStateMutation),this.nativeStateObserver.observe(this,{attributes:!0,attributeFilter:["hidden","inert","aria-hidden"]}),this.labelObserver=new MutationObserverCtor(()=>{this.observeLabelContent(),this.syncSlottedLabel()}),this.observeLabelContent()),this.addEventListener("slotchange",this.onForwardedLabelSlotChange);const labelGeneration=++this.labelObservationGeneration;this.updateComplete.then(()=>{if(!this.isConnected||labelGeneration!==this.labelObservationGeneration)return;this.observeLabelContent(),this.syncSlottedLabel();const submenuSlot=this.renderRoot.querySelector('slot[name="submenu"]');submenuSlot&&this.syncSubmenuSlot(submenuSlot)})}disconnectedCallback(){super.disconnectedCallback(),this.submenuPanelGeneration+=1,this.submenuExpanded=!1,this.nativeStateObserver?.disconnect(),this.nativeStateObserver=void 0,this.labelObservationGeneration+=1,this.removeEventListener("slotchange",this.onForwardedLabelSlotChange),this.labelObserver?.disconnect(),this.labelObserver=void 0,this.submenuPanel&&this.submenuPanelAttached&&(this.submenuPanel[submenuPanelController].detach(this),this.submenuPanelAttached=!1)}nativeStateSignature(){return`${this.hidden}|${this.inert}|${this.getAttribute("aria-hidden")}`}emitStateChange(){this.emit("lr-menu-item-state-change",{disabled:this.interactionDisabled,hidden:!!this.hidden,inert:this.inert})}willUpdate(changed){super.willUpdate(changed);const isCheckbox=this.type==="checkbox"&&!this.submenuAssigned;this.setAttribute("role",isCheckbox?"menuitemcheckbox":"menuitem"),isCheckbox?this.setAttribute("aria-checked",this.checked?"true":"false"):this.removeAttribute("aria-checked"),this.submenuAssigned?(this.setAttribute("aria-haspopup","menu"),this.setAttribute("aria-expanded",this.submenuExpanded?"true":"false")):(this.removeAttribute("aria-haspopup"),this.removeAttribute("aria-expanded")),this.applyComputedName(),this.toggleAttribute("submenu-open",this.submenuExpanded),this.setAttribute("aria-disabled",String(this.interactionDisabled)),this.interactionDisabled&&(changed.has("disabled")||changed.has("loading"))&&(this.tabIndex=-1,this.ownerDocument?.activeElement===this&&this.blur()),(changed.has("disabled")||changed.has("loading"))&&this.emitStateChange()}click(){this.interactionDisabled||this.renderRoot.querySelector('[part~="base"]')?.click()}select(){if(!this.interactionDisabled){if(this.submenuPanel){this.openSubmenu("none");return}if(this.type==="checkbox"){const checked=!this.checked;this.emit("lr-menu-item-change",{value:this.value,checked},{cancelable:!0}).defaultPrevented||(this.checked=checked)}this.owningMenu?.activate(this)}}async openSubmenu(focus="first"){const panel=this.submenuPanel,generation=this.submenuPanelGeneration;if(!panel||this.interactionDisabled||!this.isCurrentSubmenuPanel(panel,generation))return;const controller=panel[submenuPanelController],shown=controller.show(focus);this.isCurrentSubmenuPanel(panel,generation)&&(this.submenuExpanded=controller.open,await shown,this.isCurrentSubmenuPanel(panel,generation)&&(panel.updateComplete&&await panel.updateComplete,this.isCurrentSubmenuPanel(panel,generation)&&(this.submenuExpanded=controller.open,await this.updateComplete)))}async closeSubmenu(){const panel=this.submenuPanel,generation=this.submenuPanelGeneration;if(!panel||!this.isCurrentSubmenuPanel(panel,generation))return;const controller=panel[submenuPanelController],hidden=controller.hide();this.isCurrentSubmenuPanel(panel,generation)&&(this.submenuExpanded=controller.open,await hidden,this.isCurrentSubmenuPanel(panel,generation)&&(panel.updateComplete&&await panel.updateComplete,this.isCurrentSubmenuPanel(panel,generation)&&(this.submenuExpanded=controller.open,await this.updateComplete)))}defaultLabelSlot(){return this.renderRoot?.querySelector("slot:not([name])")??null}isDefaultLabelBranch(node){let top=node;for(;top.parentNode&&top.parentNode!==this;)top=top.parentNode;return top.parentNode!==this?!1:top.nodeType!==1||(top.getAttribute("slot")??"")===""}labelForwardingSlots(){return Array.from(this.querySelectorAll("slot")).filter(slot=>this.isDefaultLabelBranch(slot))}composedParentForNode(node){const assignedSlot=node.assignedSlot;if(assignedSlot)return assignedSlot;if(node.parentElement)return node.parentElement;const root=node.getRootNode();return"host"in root&&root.host.nodeType===1?root.host:null}isLabelSubtreeExcluded(element){return!(element.getRootNode()===this.renderRoot&&element.matches('[part~="label"][aria-hidden="true"][inert]:not([hidden])'))&&isAccessibilitySubtreeExcluded(element)}readSlottedLabel(slot=this.defaultLabelSlot()){const nodes=slot?slot.assignedNodes({flatten:!0}):Array.from(this.childNodes).filter(node=>this.isDefaultLabelBranch(node));return composedAccessibilityText(nodes,{ancestorBoundary:this,isSubtreeExcluded:element=>this.isLabelSubtreeExcluded(element)}).replace(/\s+/g," ").trim()}observeLabelAncestors(node,options){const observer=this.labelObserver;if(!observer)return;let current=this.composedParentForNode(node);for(;current;)current!==this&&!this.contains(current)&&observer.observe(current,options),current=composedParentElement(current)}observeLabelContent(){const observer=this.labelObserver;if(!observer)return;observer.disconnect();const options={attributes:!0,attributeFilter:["aria-hidden","aria-label","aria-labelledby","alt","class","hidden","inert","id","label","open","slot","style"],characterData:!0,childList:!0,subtree:!0};observer.observe(this,options);const slot=this.defaultLabelSlot();for(const assigned of slot?.assignedNodes({flatten:!0})??[])this.contains(assigned)||observer.observe(assigned,options),this.observeLabelAncestors(assigned,{attributes:!0,attributeFilter:options.attributeFilter})}syncSlottedLabel(slot=this.defaultLabelSlot()){const next=this.readSlottedLabel(slot);next!==this.slottedLabel&&(this.slottedLabel=next),this.applyComputedName(),this.applyPanelName()}syncSubmenuSlot(submenuSlot){if(!submenuSlot.isConnected||submenuSlot.getRootNode()!==this.renderRoot)return;const assigned=submenuSlot.assignedElements({flatten:!0}),authoredPanel=assigned.find(element=>element.localName===tag("menu")),hasDirectItems=assigned.some(element=>element.localName===tag("menu-item")||element.localName===tag("dropdown-item")),kind=authoredPanel?"panel":hasDirectItems?"items":void 0;if(this.submenuKind=kind,this.submenuAssigned=kind!==void 0,kind==="items"){const generated=this.renderRoot.querySelector("[data-generated-submenu]");generated&&this.connectSubmenuPanel(generated);return}this.connectSubmenuPanel(authoredPanel??null)}connectSubmenuPanel(next){const samePanel=next===this.submenuPanel;if(samePanel&&(next===null||this.submenuPanelAttached))return;const previous=this.submenuPanel;if(++this.submenuPanelGeneration,previous&&this.submenuPanelAttached&&previous[submenuPanelController].detach(this),this.submenuPanelAttached=!1,samePanel||(this.submenuPanel=next,this.ownsPanelAriaLabel=!1,this.ownedPanelAriaLabelValue=null),!this.submenuPanel){this.submenuExpanded=!1;return}const controller=this.submenuPanel[submenuPanelController];controller.attach(this,this.onPanelStateChange),this.submenuPanelAttached=!0,this.submenuExpanded=controller.open,this.applyPanelName()}isCurrentSubmenuPanel(panel,generation){return this.isConnected&&this.submenuPanel===panel&&this.submenuPanelGeneration===generation}updated(changed){if(super.updated(changed),changed.has("submenuKind")&&this.submenuKind==="items"){const generated=this.renderRoot.querySelector("[data-generated-submenu]");this.connectSubmenuPanel(generated)}}applyComputedName(){if(this.ownsAriaLabel&&this.getAttribute("aria-label")!==this.ownedAriaLabelValue&&(this.ownsAriaLabel=!1,this.ownedAriaLabelValue=null),this.hasAttribute("aria-labelledby")){this.ownsAriaLabel&&this.removeAttribute("aria-label"),this.ownsAriaLabel=!1,this.ownedAriaLabelValue=null;return}this.hasAttribute("aria-label")&&!this.ownsAriaLabel||(this.ownsAriaLabel=!0,this.ownedAriaLabelValue=this.slottedLabel,this.getAttribute("aria-label")!==this.slottedLabel&&this.setAttribute("aria-label",this.slottedLabel))}applyPanelName(){const panel=this.submenuPanel;if(panel){if(this.ownsPanelAriaLabel&&panel.getAttribute("aria-label")!==this.ownedPanelAriaLabelValue&&(this.ownsPanelAriaLabel=!1,this.ownedPanelAriaLabelValue=null),panel.hasAttribute("label")){this.ownsPanelAriaLabel&&(panel.removeAttribute("aria-label"),this.ownsPanelAriaLabel=!1,this.ownedPanelAriaLabelValue=null);return}panel.hasAttribute("aria-label")&&!this.ownsPanelAriaLabel||(this.ownsPanelAriaLabel=!0,this.ownedPanelAriaLabelValue=this.slottedLabel,panel.getAttribute("aria-label")!==this.slottedLabel&&panel.setAttribute("aria-label",this.slottedLabel))}}getTextLabel(){return this.readSlottedLabel()}render(){return html`
       <span part="base" @click=${()=>this.select()}>
         <span part="icon" aria-hidden="true" inert ?hidden=${!this.hasIconSlot}>
           <slot name="icon" @slotchange=${this.onIconSlotChange}></slot>

package/dist/components/layout/menu/menu-item.styles.js

@@ -1,22 +1,9 @@
 import{css}from"lit";const styles=css`
-  /* These row-chrome hooks use inline var() fallbacks rather than :host declarations, so an
-     application can set them once on a menu or another ancestor and each item inherits the value.
-     Unset, they resolve to the exact spacing and size-ladder radius this row used before. */
   :host {
     display: block;
-    /* place() gives every floating panel a 4px main-axis gap. Shoelace's public
-       --submenu-offset is the *final* signed distance instead: its -2px default
-       overlaps the parent menu by 2px. Keep that exact compatibility default,
-       but resolve both literals through design tokens before the class forwards
-       this internal translation to the nested menu's popup. */
     --_lr-menu-item-submenu-translation: calc(
       var(--submenu-offset, calc(-1 * var(--lr-size-2px))) - var(--lr-size-4px)
     );
-    /* The host itself is the focusable role="menuitem" target (see the class
-       doc) -- the ring paints on [part='base'] instead of the host's own
-       box, matching lr-tree-item's identical :host(:focus-visible)
-       delegation, so it always hugs the visible row rather than any
-       host-level margin/inline layout quirks. */
     outline: none;
     border-radius: var(--lr-menu-item-radius, var(--lr-form-control-radius));
   }
@@ -28,13 +15,7 @@ import{css}from"lit";const styles=css`
     box-sizing: border-box;
     display: flex;
     align-items: center;
-    /* Deliberately NOT --lr-form-control-gap: that knob is the 2px rhythm between an input's own
-       inline affordances, and at this size it collides the leading icon with the label of a menu
-       row. The icon/label/chevron rhythm is constant across tiers here; only the box scales. */
     gap: var(--lr-menu-item-gap, var(--lr-space-xs));
-    /* max() rather than the bare ladder value: the ladder's bottom two tiers resolve to 20px/24px,
-       and a menu row is a pointer target, so it floors at the WCAG 2.2 SC 2.5.8 minimum. Above
-       that floor the row tracks the same heights every other control in a toolbar row uses. */
     min-block-size: max(var(--lr-form-control-height), var(--lr-size-24px));
     padding-block: var(--lr-form-control-padding-block);
     padding-inline: var(--lr-form-control-padding-inline);
@@ -48,8 +29,6 @@ import{css}from"lit";const styles=css`
   [part='base']:hover {
     background: var(--lr-color-brand-quiet);
   }
-  /* The same fill hover uses, mixed further toward --lr-color-mix-partner (the text colour), so a
-     row that is being pressed is always a visible step past the row the pointer merely rests on. */
   [part='base']:active {
     background: color-mix(
       in oklab,
@@ -59,7 +38,6 @@ import{css}from"lit";const styles=css`
   }
   :host([disabled]) [part='base'],
   :host([loading]) [part='base'] {
-    /* Shared library-wide disabled-state token -- see lr-checkbox/lr-select. */
     opacity: var(--lr-opacity-disabled);
     cursor: not-allowed;
   }
@@ -67,9 +45,6 @@ import{css}from"lit";const styles=css`
   :host([loading]) [part='base']:hover {
     background: none;
   }
-  /* Suppression, not a treatment: the host is the role="menuitem" target and stays in the DOM as a
-     pressable box while disabled, so without this the pressed mix above would still paint under a
-     pointer that a disabled row must not respond to. */
   :host([disabled]) [part='base']:active,
   :host([loading]) [part='base']:active {
     background: none;
@@ -83,8 +58,6 @@ import{css}from"lit";const styles=css`
       var(--lr-color-danger-quiet)
     );
   }
-  /* Same step past hover as the ordinary row above, taken on the danger fill this variant hovers
-     with. Disabled/loading rows never regain enabled paint through this later danger rule. */
   :host([variant='danger']:not([disabled]):not([loading]))
     [part='base']:active {
     background: var(
@@ -103,11 +76,6 @@ import{css}from"lit";const styles=css`
     justify-content: center;
     line-height: var(--lr-line-height-none);
   }
-  /* [part='icon'][hidden] rather than a bare :empty selector -- the part
-     always contains a literal <slot> child element regardless of assigned
-     content, so :empty never matches (same fix as lr-select's
-     [part='hint']/[part='error']). Real emptiness is tracked in JS
-     (hasIconSlot) and reflected via the hidden attribute instead. */
   [part~='icon'][hidden] {
     display: none;
   }
@@ -128,12 +96,6 @@ import{css}from"lit";const styles=css`
     white-space: nowrap;
     color: var(--lr-color-text-quiet);
     font-size: var(--lr-font-size-sm);
-    /* Resolve each slotted fragment from its own first strong character (e.g. a keyboard-
-       shortcut hint like '⌘D', whose leading glyph is bidi-neutral) instead of inheriting the
-       row's ambient direction. Only the *position* of these trailing parts should mirror under
-       RTL -- the flex row above already handles that -- their own internal glyph order must stay
-       fixed, matching how the OS itself displays the shortcut. Same mechanism as
-       toast-item.styles.ts's/alert.styles.ts's identical [part="content"]/[part="message"] rules. */
     unicode-bidi: plaintext;
   }
   [part='details'] ::slotted(*),
@@ -158,16 +120,10 @@ import{css}from"lit";const styles=css`
       transform: rotate(360deg);
     }
   }
-  /* Only ever present in the DOM at all for a checked type="checkbox" item
-     (see menu-item.ts's render()) -- no [hidden]-toggling needed, unlike
-     [part='icon'] above, since there's no always-present <slot> child here
-     to keep visually empty in between. */
   [part='checkmark'] {
     flex: 0 0 auto;
     color: var(--lr-color-brand);
   }
-  /* Only in the DOM at all for a submenu parent (see menu-item.ts's render()),
-     so it needs no [hidden] bookkeeping either. */
   [part='submenu-icon'] {
     display: inline-flex;
     flex: 0 0 auto;
@@ -178,15 +134,10 @@ import{css}from"lit";const styles=css`
     font-size: var(--lr-font-size-sm);
     line-height: var(--lr-line-height-none);
   }
-  /* The chevron points at the submenu, which opens on the inline-end side --
-     mirrored through this wrapping part rather than by swapping the glyph, so
-     the shared icon set stays direction-free. */
   :host(:dir(rtl)) [part='submenu-icon'] {
     transform: scaleX(-1);
   }
   :host(:dir(rtl)) {
-    /* A positive distance moves away from the parent and a negative distance
-       overlaps it, regardless of which inline edge owns the submenu. */
     --_lr-menu-item-submenu-translation: calc(
       var(--lr-size-4px) - var(--submenu-offset, calc(-1 * var(--lr-size-2px)))
     );

package/dist/components/layout/menu/menu-label.styles.js

@@ -8,8 +8,6 @@ import{css}from"lit";const styles=css`
     font-weight: var(--lr-font-weight-semibold);
     line-height: var(--lr-line-height-snug);
     color: var(--lr-color-text-quiet);
-    /* A group heading is not an action: no pointer cursor, no hover/active feedback, and it is
-       skipped by <lr-menu>'s roving tabindex because it is not a LyraMenuItem. */
     cursor: default;
     user-select: none;
   }

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

@@ -13,7 +13,6 @@ import{css}from"lit";const styles=css`
     border: var(--lr-border-width-thin) solid var(--lr-color-border);
     border-radius: var(--lr-radius);
   }
-  /* A dropdown supplies the visible surface; a submenu supplies the private surface below. */
   :host([data-contained]),
   :host([data-submenu]) {
     display: contents;
@@ -61,15 +60,6 @@ import{css}from"lit";const styles=css`
       transition: none !important;
     }
   }
-  /* Composed content that is deliberately NOT a menu item, rendered outside
-     the role="menu" list (arbitrary content inside role="menu" is an
-     aria-required-children violation). Both wrappers collapse to no box at
-     all while their slot is unfilled, which is what keeps a menu that uses
-     neither slot rendering exactly as it did before they existed.
-     An :empty selector cannot drive that: Chromium's :empty does not ignore
-     the whitespace-only text nodes Lit leaves inside a part, so the rule
-     would silently never match -- the host attributes below are set from the
-     slots' own slotchange instead. */
   [part='header'],
   [part='footer'] {
     flex: 0 0 auto;
@@ -79,8 +69,6 @@ import{css}from"lit";const styles=css`
   :host(:not([data-has-footer])) [part='footer'] {
     display: none;
   }
-  /* The divider only earns its keep when there are items on the other side of
-     it -- a header above an empty list would otherwise draw a stray rule. */
   :host(:not([data-list-empty])) [part='header'] {
     border-block-end: var(--lr-border-width-thin) solid var(--lr-color-border);
   }
@@ -90,9 +78,6 @@ import{css}from"lit";const styles=css`
   [part='list'] {
     display: flex;
     flex-direction: column;
-    /* The list, not a filled header/footer, is what scrolls when the popup
-       runs out of room -- min-block-size:0 is what lets it shrink below its
-       content height inside the popup's own column. */
     flex: 0 1 auto;
     min-block-size: 0;
     max-block-size: min(
@@ -104,9 +89,6 @@ import{css}from"lit";const styles=css`
     padding: var(--lr-space-xs);
     outline: none;
   }
-  /* A plain <hr> divider between item groups -- native <hr> already carries
-     an implicit ARIA role of "separator", exactly what role="menu" expects
-     between groups of menuitem children, so no role attribute needs adding. */
   ::slotted(hr) {
     border: none;
     border-block-start: var(--lr-border-width-thin) solid var(--lr-color-border);

package/dist/components/layout/multi-split/multi-split.styles.js

@@ -5,13 +5,7 @@ import{css}from"lit";const styles=css`
     min-inline-size: 0;
     max-inline-size: 100%;
     block-size: 100%;
-    /* Component-specific -- not a shared design token, so a consumer can
-       retheme it without a raw literal leaking into the public API (same
-       rationale as lr-app-rail's --lr-app-rail-overlay-color). */
     --_lr-multi-split-overlay-color: var(--lr-color-overlay);
-    /* The divider owns a real target gutter instead of extending a pseudo
-       element over either neighboring panel. Only the centered line is
-       painted; the full track remains available for pointer/keyboard input. */
     --_lr-multi-split-divider-target-size: max(
       var(--lr-icon-button-size),
       var(--lr-size-3px)
@@ -19,8 +13,6 @@ import{css}from"lit";const styles=css`
   }
   [part="base"] {
     display: flex;
-    /* Anchor for the 'floating' collapse state's absolutely-positioned
-       overlay panel (set inline by multi-split.class.ts's updated()). */
     position: relative;
     inline-size: 100%;
     min-inline-size: 0;
@@ -28,14 +20,9 @@ import{css}from"lit";const styles=css`
     block-size: 100%;
   }
   ::slotted(*) {
-    /* Honest no-JS/first-hydration fallback before child count and live sizes can be observed.
-       Browser reconciliation writes a more specific inline flex value once available. */
     flex: 1 1 0;
     min-inline-size: 0;
     max-inline-size: 100%;
-    /* Direct panels own their overflow. The zero minimum lets a fixed-height
-       split shrink each flex item along the block axis instead of letting
-       long content expand the base and escape into following content. */
     min-block-size: 0;
     max-block-size: 100%;
     overflow: auto;
@@ -63,7 +50,6 @@ import{css}from"lit";const styles=css`
     cursor: col-resize;
     touch-action: none;
   }
-  /* Paint the narrow visual rule inside the allocated target track. */
   [part="divider"]::before {
     content: "";
     position: absolute;
@@ -72,9 +58,6 @@ import{css}from"lit";const styles=css`
     background: var(--lr-color-border);
     pointer-events: none;
   }
-  /* :where() zeroes the [orientation='vertical'] qualifier's specificity contribution -- otherwise
-     this (0,3,0) rule would beat a consumer's own ::part(divider) inline-size/cursor override
-     whenever orientation="vertical" is set. */
   :host(:where([orientation="vertical"])) [part="divider"] {
     inline-size: 100%;
     min-inline-size: min(
@@ -96,20 +79,12 @@ import{css}from"lit";const styles=css`
     inset-block: calc((100% - var(--lr-size-3px)) / 2);
     inset-inline: 0;
   }
-  /* orientationBreakpoint's live axis -- only present while that feature is opted into (see
-     multi-split.class.ts's updated()), so it can override the authored orientation rules above by source
-     order alone (equal specificity) whenever the effective axis diverges from it. */
   :host([data-effective-orientation="vertical"]) [part="base"] {
     flex-direction: column;
   }
   :host([data-effective-orientation="horizontal"]) [part="base"] {
     flex-direction: row;
   }
-  /* Same :where() treatment as [orientation='vertical'] above, applied to both effective-axis
-     variants -- these are the higher-specificity rules orientationBreakpoint's live axis relies on
-     to override the authored orientation by source order (see the comment above), so without
-     :where() they'd beat a consumer's ::part(divider) override even more readily than the
-     authored-orientation rules do. */
   :host(:where([data-effective-orientation="vertical"])) [part="divider"] {
     inline-size: 100%;
     min-inline-size: min(
@@ -156,9 +131,6 @@ import{css}from"lit";const styles=css`
   [part="divider"]:hover::before {
     background: var(--lr-color-brand);
   }
-  /* The drag itself. Pointer capture holds :active for the whole gesture, so the divider stays at
-     the deeper mix from mousedown until release -- and a divider adjacent to a collapsed pane
-     never reaches it, since [aria-disabled='true'] below takes its pointer events away. */
   [part="divider"]:active::before {
     background: color-mix(
       in oklab,
@@ -170,55 +142,24 @@ import{css}from"lit";const styles=css`
     outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);
     outline-offset: var(--lr-focus-ring-offset);
   }
-  /* The divider adjacent to a rail/floating-collapsed pane (see multi-split.class.ts's
-     isDividerDisabled()) — the collapsing panel's own live flex/order/inline-size
-     are set inline by updated() (see the floating rule below for why); this only
-     covers the divider's own drag/hover affordance and the floating panel's
-     elevation, which read more naturally as stylesheet rules than one-off inline
-     styles. */
   [part="divider"][aria-disabled="true"] {
     cursor: default;
     pointer-events: none;
   }
-  /* The 'floating' collapse state's overlay "card" look. inline-size (and
-     flex/order) stay inline, set by multi-split.class.ts's updated(): it's the
-     panel's own live, draggable sizes[i] percent -- the exact value it renders at
-     in the 'wide' state too, by design (see updated()'s comment), so there's no
-     visual size jump the moment it un-floats. position/inset-block/the
-     inset-inline-* edge below are a fixed, config-driven default -- always the
-     same literal values, never per-render computed data -- so they live here
-     instead, as ordinary stylesheet rules a consumer's own CSS can override at
-     normal specificity, no !important fight required. (Only inline-size is
-     genuinely live; a consumer wanting a different floating width should set
-     .sizes instead of overriding this rule -- overriding it here would fight
-     the live sync back on every drag/resize.) z-index is above [part="backdrop"]
-     (below), so the drawer renders on top of its own scrim. */
   ::slotted([data-collapse-state="floating"]) {
     position: absolute;
     inset-block: 0;
     z-index: var(--lr-layer-content);
     background: var(--lr-color-surface);
     border-radius: var(--lr-radius);
-    /* Modal step: this is a drawer rendered above its own scrim (see [part='backdrop'] below), not
-       an anchored popup, so it takes the modal tier. */
     box-shadow: var(--lr-shadow-l);
   }
-  /* Which edge the floating drawer anchors to mirrors collapse ('start'/'end'
-     LOGICAL positions -- see the collapse property doc), already reflected onto
-     the host, so it needs no separate per-panel marker. Exactly one of these two
-     ever matches at a time (collapse is never both). */
   :host([collapse="start"]) ::slotted([data-collapse-state="floating"]) {
     inset-inline-start: 0;
   }
   :host([collapse="end"]) ::slotted([data-collapse-state="floating"]) {
     inset-inline-end: 0;
   }
-  /* The 'floating' drawer's scrim -- only rendered while collapseState is
-     'floating' and open (see multi-split.class.ts's render()). Scoped to [part="base"]
-     (position: absolute against its position: relative ancestor) rather than
-     a viewport-fixed overlay like lr-app-rail's mobile backdrop: the
-     floating panel itself is only ever positioned relative to this
-     component's own box, never the full page. */
   [part="backdrop"] {
     position: absolute;
     inset: 0;
@@ -228,10 +169,6 @@ import{css}from"lit";const styles=css`
       var(--_lr-multi-split-overlay-color)
     );
   }
-  /* Rail-clamped content can easily overflow the fixed rail-width — clip it
-     rather than letting it blow out the layout; the panel's own content is
-     expected to adapt to the narrower width itself (e.g. via a container
-     query), this is just a safety net. */
   ::slotted([data-collapse-state="rail"]) {
     overflow: hidden;
   }

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

@@ -118,6 +118,10 @@ export interface LyraPageEventMap {
  * @since 8.0.0
  */
 export declare class LyraPage extends LyraElement<LyraPageEventMap> {
+    /** `disable-sticky` is read only by `:host([disable-sticky~="..."])` rules in page.styles.ts,
+     *  so it is deliberately not a reactive property. Declared here so authoring the documented
+     *  attribute does not draw an "unknown attribute" dev warning. */
+    protected static readonly knownUnobservedAttributes: readonly string[];
     static styles: import("lit").CSSResultGroup[];
     /** Presentation derived from the Page's allocated inline size. It begins at `desktop` so server
      * output is deterministic, then reflects the first live allocation measurement. */

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

@@ -14,7 +14,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>
-  `}class LyraPage extends LyraElement{constructor(){super(...arguments),this.view="desktop",this.navOpen=!1,this.mobileBreakpoint="768px",this.navigationPlacement="start",this.disableNavigationToggle=!1,this.accessibleLabel=null,this.mainId=nextId("page-main"),this.navigationId=nextId("page-navigation"),this.drawerId=nextId("page-drawer"),this.skipTargetId=nextId("page-skip-target"),this.skipLabelId=nextId("page-skip-label"),this.fragmentTargetId=this.getAttribute("id")||this.skipTargetId,this.fragmentTabIndex=this.getAttribute("tabindex")??"-1",this.customToggles=[],this.customToggleOwnership=new Map,this.onWindowResize=()=>this.measureAllocation(),this.resolveNavigationRestoreTarget=()=>{const owner=this.navigationTriggerOwner;if(owner?.isConnected){const accessible=resolveAccessibleTrigger(owner);if(isComposedFocusAvailable(accessible))return accessible}const builtIn=this.disableNavigationToggle?null:this.renderRoot.querySelector('[part~="navigation-toggle"]');return builtIn&&isComposedFocusAvailable(builtIn)?builtIn:this.mainElement&&isComposedFocusAvailable(this.mainElement)?this.mainElement:null},this.onDefaultToggleClick=event=>{this.rememberTriggerAndToggle(event.currentTarget)},this.onToggleSlotClick=event=>{const trigger=event.composedPath().find(candidate=>candidate?.nodeType===1&&candidate.getAttribute("slot")==="navigation-toggle");trigger&&this.customToggles.includes(trigger)&&!this.isUnavailableCustomToggle(trigger)&&this.rememberTriggerAndToggle(trigger)},this.onPageClick=event=>{const path=event.composedPath();if(path.some(candidate=>candidate?.nodeType===1&&candidate.getAttribute("slot")==="navigation-toggle"))return;const trigger=path.find(candidate=>candidate?.nodeType===1&&candidate.hasAttribute("data-toggle-nav"));trigger&&this.rememberTriggerAndToggle(trigger)},this.onBackdropClick=event=>{event.target===event.currentTarget&&this.overlayHandle?.dismissBackdrop()},this.onSkipClick=event=>{event.preventDefault(),this.mainElement?.focus(),this.mainElement?.scrollIntoView({block:"start"})}}static{this.defaultStrings={...super.defaultStrings,closeNavigation:LYRA_DEFAULT_closeNavigation,navigation:LYRA_DEFAULT_navigation,openNavigation:LYRA_DEFAULT_openNavigation,skipToContent:LYRA_DEFAULT_skipToContent}}static{this.styles=[LyraElement.styles,styles]}connectedCallback(){super.connectedCallback(),this.measureAllocation(),this.observeAllocation(),this.hasUpdated&&this.view==="mobile"&&this.navOpen&&(this.overlayHandle?.isActive()?this.overlayHandle.resume():this.syncOverlay(),queueMicrotask(()=>this.overlayHandle?.focusInitial())),this.hasUpdated&&queueMicrotask(()=>this.isConnected&&this.syncCustomToggle())}disconnectedCallback(){this.resizeObserver?.disconnect(),this.resizeObserver=void 0,this.resizeView?.removeEventListener("resize",this.onWindowResize),this.resizeView=void 0,this.overlayHandle?.suspend(),this.releaseCustomToggleA11y(),super.disconnectedCallback()}firstUpdated(changed){super.firstUpdated(changed),this.measureAllocation(),this.observeAllocation()}willUpdate(changed){super.willUpdate(changed),changed.has("fragmentTargetId")&&!this.fragmentTargetId&&(this.fragmentTargetId=this.skipTargetId),changed.has("fragmentTabIndex")&&this.fragmentTabIndex===null&&(this.fragmentTabIndex="-1")}updated(changed){super.updated(changed),changed.has("mobileBreakpoint")&&changed.get("mobileBreakpoint")!==void 0&&this.measureAllocation(),this.overlayHandle!==void 0&&(!this.isConnected||this.view!=="mobile"||!this.navOpen)?(this.syncOverlay(changed),this.syncCustomToggle()):(this.syncCustomToggle(),this.syncOverlay(changed))}observeAllocation(){if(!this.isConnected)return;this.resizeView?.removeEventListener("resize",this.onWindowResize),this.resizeView=void 0;const view=this.ownerDocument.defaultView,ResizeObserverConstructor=view?.ResizeObserver;if(ResizeObserverConstructor){this.resizeObserver??=new ResizeObserverConstructor(entries=>{const entry=entries.find(candidate=>candidate.target===this)??entries[0],inlineSize=entry?.contentBoxSize?.[0]?.inlineSize??entry?.contentRect.width;inlineSize!==void 0&&this.applyMeasuredInlineSize(inlineSize)}),this.resizeObserver.observe(this);return}view&&(this.resizeView=view,view.addEventListener("resize",this.onWindowResize))}measureAllocation(){const width=this.getBoundingClientRect().width;width>0&&this.applyMeasuredInlineSize(width)}applyMeasuredInlineSize(width){if(!Number.isFinite(width)||width<0)return;const resolved=resolveCssLength(this.mobileBreakpoint,{host:this}),fallback=resolveCssLength(DEFAULT_MOBILE_BREAKPOINT,{host:this})??768,breakpoint=Math.max(0,resolved!==void 0&&Number.isFinite(resolved)?resolved:fallback),next=width<=breakpoint?"mobile":"desktop";next!==this.view&&(this.view=next)}syncOverlay(changed){if(this.isConnected&&this.view==="mobile"&&this.navOpen){if(this.overlayHandle?.isActive()){this.overlayHandle.resume(),this.navigationTriggerOwner&&this.overlayHandle.updateRestoreFocusTo(this.resolveNavigationRestoreTarget);return}this.overlayHandle=activateOverlay({host:this,panel:()=>this.drawerElement??null,modalRoot:()=>this.drawerElement??null,onEscape:()=>this.hideNavigation(),onBackdrop:()=>this.hideNavigation(),...this.navigationTriggerOwner?{restoreFocusTo:this.resolveNavigationRestoreTarget}:{},lockScroll:!0,suspendWhenUnrendered:!0}),this.overlayHandle.focusInitial();return}if(this.overlayHandle){const restoreFocus=!!(changed?.has("navOpen")&&!this.navOpen);this.overlayHandle.deactivate({restoreFocus}),this.overlayHandle=void 0}this.navOpen||(this.navigationTriggerOwner=void 0)}syncCustomToggle(){const nextToggles=(this.shadowRoot?.querySelector('slot[name="navigation-toggle"]')?.assignedElements({flatten:!0})??[]).filter(candidate=>candidate.nodeType===1&&candidate.getRootNode()!==this.shadowRoot),previous=this.customToggle;this.customToggles=nextToggles,this.customToggle=nextToggles[0];for(const[host,ownership]of this.customToggleOwnership)nextToggles.includes(host)||(ownership.accessibleAria?.release(),ownership.hostAria.release(),this.customToggleOwnership.delete(host));const localizedLabel=this.localize(this.navOpen?"closeNavigation":"openNavigation"),drawer=this.drawerElement;for(const host of nextToggles){const accessible=resolveAccessibleTrigger(host);let ownership=this.customToggleOwnership.get(host);ownership?accessible!==ownership.accessible&&(ownership.accessibleAria?.release(),ownership.accessibleAria=void 0,ownership.accessible=accessible,ownership.accessibleAuthoredLabel=accessible.hasAttribute("aria-label")?accessible.getAttribute("aria-label")??"":null):(ownership={accessible,accessibleAuthoredLabel:accessible.hasAttribute("aria-label")?accessible.getAttribute("aria-label")??"":null,hostAria:acquireAriaOwnership(null,{}),hostAuthoredLabel:host.hasAttribute("aria-label")?host.getAttribute("aria-label")??"":null},this.customToggleOwnership.set(host,ownership)),ownership.hostAria.update(host,{attributes:{"aria-haspopup":"dialog","aria-expanded":this.navOpen?"true":"false","aria-label":ownership.hostAuthoredLabel??localizedLabel},controls:drawer?[drawer]:[]});const distinctAccessible=accessible===host?null:accessible,accessibleContribution={attributes:{"aria-haspopup":"dialog","aria-expanded":this.navOpen?"true":"false","aria-label":ownership.accessibleAuthoredLabel??ownership.hostAuthoredLabel??localizedLabel},controls:drawer?[drawer]:[]};ownership.accessibleAria?ownership.accessibleAria.update(distinctAccessible,accessibleContribution):ownership.accessibleAria=acquireAriaOwnership(distinctAccessible,accessibleContribution)}this.navOpen&&this.navigationTriggerOwner&&!nextToggles.includes(this.navigationTriggerOwner)?(this.navigationTriggerOwner=this.customToggle,this.overlayHandle?.updateRestoreFocusTo(this.resolveNavigationRestoreTarget)):this.navOpen&&previous&&this.navigationTriggerOwner===previous&&this.overlayHandle?.updateRestoreFocusTo(this.resolveNavigationRestoreTarget)}releaseCustomToggleA11y(){for(const ownership of this.customToggleOwnership.values())ownership.accessibleAria?.release(),ownership.hostAria.release();this.customToggleOwnership.clear(),this.customToggle=void 0,this.customToggles=[]}isUnavailableCustomToggle(trigger){const accessible=resolveAccessibleTrigger(trigger);return[trigger,accessible].some(candidate=>candidate.hasAttribute("hidden")||candidate.hasAttribute("inert")||candidate.matches(":disabled")||isAriaTrue(candidate.getAttribute("aria-hidden"))||isAriaTrue(candidate.getAttribute("aria-disabled")))}rememberTriggerAndToggle(trigger){this.syncCustomToggle(),this.navOpen||(this.navigationTriggerOwner=trigger),this.toggleNavigation()}requestNavOpen(next){this.navOpen!==next&&(this.emit("lr-nav-toggle",{open:next},{cancelable:!0}).defaultPrevented||(this.navOpen=next))}showNavigation(){this.requestNavOpen(!0)}hideNavigation(){this.requestNavOpen(!1)}toggleNavigation(){this.requestNavOpen(!this.navOpen)}visiblePixelsInViewport(element){if(!element)return 0;const rect=element.getBoundingClientRect();if(!Number.isFinite(rect.top)||!Number.isFinite(rect.bottom))return 0;const candidateHeight=element.ownerDocument.defaultView?.innerHeight??element.ownerDocument.documentElement.clientHeight;if(!Number.isFinite(candidateHeight)||candidateHeight<=0)return 0;const viewportHeight=finiteRange(candidateHeight,0,0),visible=Math.min(rect.bottom,viewportHeight)-Math.max(rect.top,0);return finiteRange(visible,0,0,viewportHeight)}render(){const mobile=this.view==="mobile",overlayOpen=mobile&&this.navOpen,navigationLabel=this.accessibleLabel??this.localize("navigation");return html`
+  `}class LyraPage extends LyraElement{constructor(){super(...arguments),this.view="desktop",this.navOpen=!1,this.mobileBreakpoint="768px",this.navigationPlacement="start",this.disableNavigationToggle=!1,this.accessibleLabel=null,this.mainId=nextId("page-main"),this.navigationId=nextId("page-navigation"),this.drawerId=nextId("page-drawer"),this.skipTargetId=nextId("page-skip-target"),this.skipLabelId=nextId("page-skip-label"),this.fragmentTargetId=this.getAttribute("id")||this.skipTargetId,this.fragmentTabIndex=this.getAttribute("tabindex")??"-1",this.customToggles=[],this.customToggleOwnership=new Map,this.onWindowResize=()=>this.measureAllocation(),this.resolveNavigationRestoreTarget=()=>{const owner=this.navigationTriggerOwner;if(owner?.isConnected){const accessible=resolveAccessibleTrigger(owner);if(isComposedFocusAvailable(accessible))return accessible}const builtIn=this.disableNavigationToggle?null:this.renderRoot.querySelector('[part~="navigation-toggle"]');return builtIn&&isComposedFocusAvailable(builtIn)?builtIn:this.mainElement&&isComposedFocusAvailable(this.mainElement)?this.mainElement:null},this.onDefaultToggleClick=event=>{this.rememberTriggerAndToggle(event.currentTarget)},this.onToggleSlotClick=event=>{const trigger=event.composedPath().find(candidate=>candidate?.nodeType===1&&candidate.getAttribute("slot")==="navigation-toggle");trigger&&this.customToggles.includes(trigger)&&!this.isUnavailableCustomToggle(trigger)&&this.rememberTriggerAndToggle(trigger)},this.onPageClick=event=>{const path=event.composedPath();if(path.some(candidate=>candidate?.nodeType===1&&candidate.getAttribute("slot")==="navigation-toggle"))return;const trigger=path.find(candidate=>candidate?.nodeType===1&&candidate.hasAttribute("data-toggle-nav"));trigger&&this.rememberTriggerAndToggle(trigger)},this.onBackdropClick=event=>{event.target===event.currentTarget&&this.overlayHandle?.dismissBackdrop()},this.onSkipClick=event=>{event.preventDefault(),this.mainElement?.focus(),this.mainElement?.scrollIntoView({block:"start"})}}static{this.defaultStrings={...super.defaultStrings,closeNavigation:LYRA_DEFAULT_closeNavigation,navigation:LYRA_DEFAULT_navigation,openNavigation:LYRA_DEFAULT_openNavigation,skipToContent:LYRA_DEFAULT_skipToContent}}static{this.knownUnobservedAttributes=["disable-sticky"]}static{this.styles=[LyraElement.styles,styles]}connectedCallback(){super.connectedCallback(),this.measureAllocation(),this.observeAllocation(),this.hasUpdated&&this.view==="mobile"&&this.navOpen&&(this.overlayHandle?.isActive()?this.overlayHandle.resume():this.syncOverlay(),queueMicrotask(()=>this.overlayHandle?.focusInitial())),this.hasUpdated&&queueMicrotask(()=>this.isConnected&&this.syncCustomToggle())}disconnectedCallback(){this.resizeObserver?.disconnect(),this.resizeObserver=void 0,this.resizeView?.removeEventListener("resize",this.onWindowResize),this.resizeView=void 0,this.overlayHandle?.suspend(),this.releaseCustomToggleA11y(),super.disconnectedCallback()}firstUpdated(changed){super.firstUpdated(changed),this.measureAllocation(),this.observeAllocation()}willUpdate(changed){super.willUpdate(changed),changed.has("fragmentTargetId")&&!this.fragmentTargetId&&(this.fragmentTargetId=this.skipTargetId),changed.has("fragmentTabIndex")&&this.fragmentTabIndex===null&&(this.fragmentTabIndex="-1")}updated(changed){super.updated(changed),changed.has("mobileBreakpoint")&&changed.get("mobileBreakpoint")!==void 0&&this.measureAllocation(),this.overlayHandle!==void 0&&(!this.isConnected||this.view!=="mobile"||!this.navOpen)?(this.syncOverlay(changed),this.syncCustomToggle()):(this.syncCustomToggle(),this.syncOverlay(changed))}observeAllocation(){if(!this.isConnected)return;this.resizeView?.removeEventListener("resize",this.onWindowResize),this.resizeView=void 0;const view=this.ownerDocument.defaultView,ResizeObserverConstructor=view?.ResizeObserver;if(ResizeObserverConstructor){this.resizeObserver??=new ResizeObserverConstructor(entries=>{const entry=entries.find(candidate=>candidate.target===this)??entries[0],inlineSize=entry?.contentBoxSize?.[0]?.inlineSize??entry?.contentRect.width;inlineSize!==void 0&&this.applyMeasuredInlineSize(inlineSize)}),this.resizeObserver.observe(this);return}view&&(this.resizeView=view,view.addEventListener("resize",this.onWindowResize))}measureAllocation(){const width=this.getBoundingClientRect().width;width>0&&this.applyMeasuredInlineSize(width)}applyMeasuredInlineSize(width){if(!Number.isFinite(width)||width<0)return;const resolved=resolveCssLength(this.mobileBreakpoint,{host:this}),fallback=resolveCssLength(DEFAULT_MOBILE_BREAKPOINT,{host:this})??768,breakpoint=Math.max(0,resolved!==void 0&&Number.isFinite(resolved)?resolved:fallback),next=width<=breakpoint?"mobile":"desktop";next!==this.view&&(this.view=next)}syncOverlay(changed){if(this.isConnected&&this.view==="mobile"&&this.navOpen){if(this.overlayHandle?.isActive()){this.overlayHandle.resume(),this.navigationTriggerOwner&&this.overlayHandle.updateRestoreFocusTo(this.resolveNavigationRestoreTarget);return}this.overlayHandle=activateOverlay({host:this,panel:()=>this.drawerElement??null,modalRoot:()=>this.drawerElement??null,onEscape:()=>this.hideNavigation(),onBackdrop:()=>this.hideNavigation(),...this.navigationTriggerOwner?{restoreFocusTo:this.resolveNavigationRestoreTarget}:{},lockScroll:!0,suspendWhenUnrendered:!0}),this.overlayHandle.focusInitial();return}if(this.overlayHandle){const restoreFocus=!!(changed?.has("navOpen")&&!this.navOpen);this.overlayHandle.deactivate({restoreFocus}),this.overlayHandle=void 0}this.navOpen||(this.navigationTriggerOwner=void 0)}syncCustomToggle(){const nextToggles=(this.shadowRoot?.querySelector('slot[name="navigation-toggle"]')?.assignedElements({flatten:!0})??[]).filter(candidate=>candidate.nodeType===1&&candidate.getRootNode()!==this.shadowRoot),previous=this.customToggle;this.customToggles=nextToggles,this.customToggle=nextToggles[0];for(const[host,ownership]of this.customToggleOwnership)nextToggles.includes(host)||(ownership.accessibleAria?.release(),ownership.hostAria.release(),this.customToggleOwnership.delete(host));const localizedLabel=this.localize(this.navOpen?"closeNavigation":"openNavigation"),drawer=this.drawerElement;for(const host of nextToggles){const accessible=resolveAccessibleTrigger(host);let ownership=this.customToggleOwnership.get(host);ownership?accessible!==ownership.accessible&&(ownership.accessibleAria?.release(),ownership.accessibleAria=void 0,ownership.accessible=accessible,ownership.accessibleAuthoredLabel=accessible.hasAttribute("aria-label")?accessible.getAttribute("aria-label")??"":null):(ownership={accessible,accessibleAuthoredLabel:accessible.hasAttribute("aria-label")?accessible.getAttribute("aria-label")??"":null,hostAria:acquireAriaOwnership(null,{}),hostAuthoredLabel:host.hasAttribute("aria-label")?host.getAttribute("aria-label")??"":null},this.customToggleOwnership.set(host,ownership)),ownership.hostAria.update(host,{attributes:{"aria-haspopup":"dialog","aria-expanded":this.navOpen?"true":"false","aria-label":ownership.hostAuthoredLabel??localizedLabel},controls:drawer?[drawer]:[]});const distinctAccessible=accessible===host?null:accessible,accessibleContribution={attributes:{"aria-haspopup":"dialog","aria-expanded":this.navOpen?"true":"false","aria-label":ownership.accessibleAuthoredLabel??ownership.hostAuthoredLabel??localizedLabel},controls:drawer?[drawer]:[]};ownership.accessibleAria?ownership.accessibleAria.update(distinctAccessible,accessibleContribution):ownership.accessibleAria=acquireAriaOwnership(distinctAccessible,accessibleContribution)}this.navOpen&&this.navigationTriggerOwner&&!nextToggles.includes(this.navigationTriggerOwner)?(this.navigationTriggerOwner=this.customToggle,this.overlayHandle?.updateRestoreFocusTo(this.resolveNavigationRestoreTarget)):this.navOpen&&previous&&this.navigationTriggerOwner===previous&&this.overlayHandle?.updateRestoreFocusTo(this.resolveNavigationRestoreTarget)}releaseCustomToggleA11y(){for(const ownership of this.customToggleOwnership.values())ownership.accessibleAria?.release(),ownership.hostAria.release();this.customToggleOwnership.clear(),this.customToggle=void 0,this.customToggles=[]}isUnavailableCustomToggle(trigger){const accessible=resolveAccessibleTrigger(trigger);return[trigger,accessible].some(candidate=>candidate.hasAttribute("hidden")||candidate.hasAttribute("inert")||candidate.matches(":disabled")||isAriaTrue(candidate.getAttribute("aria-hidden"))||isAriaTrue(candidate.getAttribute("aria-disabled")))}rememberTriggerAndToggle(trigger){this.syncCustomToggle(),this.navOpen||(this.navigationTriggerOwner=trigger),this.toggleNavigation()}requestNavOpen(next){this.navOpen!==next&&(this.emit("lr-nav-toggle",{open:next},{cancelable:!0}).defaultPrevented||(this.navOpen=next))}showNavigation(){this.requestNavOpen(!0)}hideNavigation(){this.requestNavOpen(!1)}toggleNavigation(){this.requestNavOpen(!this.navOpen)}visiblePixelsInViewport(element){if(!element)return 0;const rect=element.getBoundingClientRect();if(!Number.isFinite(rect.top)||!Number.isFinite(rect.bottom))return 0;const candidateHeight=element.ownerDocument.defaultView?.innerHeight??element.ownerDocument.documentElement.clientHeight;if(!Number.isFinite(candidateHeight)||candidateHeight<=0)return 0;const viewportHeight=finiteRange(candidateHeight,0,0),visible=Math.min(rect.bottom,viewportHeight)-Math.max(rect.top,0);return finiteRange(visible,0,0,viewportHeight)}render(){const mobile=this.view==="mobile",overlayOpen=mobile&&this.navOpen,navigationLabel=this.accessibleLabel??this.localize("navigation");return html`
       <div part="base page" @click=${this.onPageClick}>
         <a
           part="skip-to-content"

package/dist/components/layout/reorder-list/reorder-item.styles.js

@@ -26,8 +26,6 @@ import{css}from"lit";const styles=css`
     cursor: pointer;
     border-radius: var(--lr-radius);
   }
-  /* chevronIcon() renders a right-pointing chevron with no baked-in rotation (see icons.ts) --
-     rotate the whole button, matching lr-tree-item's identical [part='toggle'] rotation approach. */
   [part='move-up-button'] {
     transform: rotate(-90deg);
   }
@@ -45,8 +43,6 @@ import{css}from"lit";const styles=css`
       var(--lr-color-brand)
     );
   }
-  /* Declared before the :disabled rule below, which restates background/color at equal
-     specificity, so a disabled arrow stays flat whatever the pointer does to it. */
   [part='move-up-button']:active,
   [part='move-down-button']:active {
     background: var(