@aceshooting/lyra-ui 9.1.0 → 10.0.1

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

@@ -1,4 +1,4 @@
-var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html,nothing}from"lit";import{property,query}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{activateOverlay}from"../../../internal/overlay-manager.js";import{isRtl}from"../../../internal/rtl.js";import{finiteRange}from"../../../internal/numbers.js";import{getNumberFormat}from"../../../internal/intl-cache.js";import{CollapseBreakpointController,OrientationBreakpointController}from"../../../internal/orientation-breakpoint.js";import{readPersistedState,writePersistedState}from"../../../internal/persisted-state.js";import{resolveCssLength}from"../../../internal/css-length.js";import{styles}from"./multi-split.styles.js";import{LYRA_DEFAULT_resizeDivider}from"../../../internal/default-strings.generated.js";const KEYBOARD_STEP=2;function isPersistedPanelLayout(value){if(typeof value!="object"||value===null)return!1;const candidate=value;return candidate.version!==1||!Array.isArray(candidate.panels)?!1:candidate.panels.every(panel=>{if(typeof panel!="object"||panel===null)return!1;const record=panel;return typeof record.panelId=="string"&&record.panelId!==""&&record.panelId.trim()===record.panelId&&typeof record.size=="number"&&Number.isFinite(record.size)&&record.size>=0})}const NO_MIN_PX=0,NO_MAX_PX=1e6,OWNED_PANEL_STYLE_PROPERTIES=["flex","order","position","inset-block","inset-inline-start","inset-inline-end","inline-size"];class LyraMultiSplit extends LyraElement{constructor(){super(...arguments),this.sizes=[],this.defaultSizes=[],this.min=10,this.orientation="horizontal",this.orientationBreakpointBasis="container",this.narrowOrientation="vertical",this.panelConstraints=[],this.collapse="none",this.railWidth="3.5rem",this.railBreakpoint=640,this.floatBreakpoint=400,this.collapseBreakpointBasis="container",this.open=!1,this.panelCount=0,this.sizesReconciledForMembership=!1,this._collapseState="wide",this._forced=!1,this.overlayActive=!1,this.justOpened=!1,this.drags=new Map,this.ownedPanels=[],this.panelOwnership=new Map,this.panelOwnershipObserverGeneration=0,this.constraintIssueKey="",this.initializedSizes=!1,this.measuredInlineSize=Number.POSITIVE_INFINITY,this._effectiveOrientation="horizontal",this.collapseObserverGeneration=0,this.orientationBreakpoints=new OrientationBreakpointController(this,()=>this.updateEffectiveOrientation(this.measuredInlineSize,!0)),this.collapseBreakpoints=new CollapseBreakpointController(this,()=>this.updateCollapseState(this.measuredInlineSize,!0)),this.onSlotChange=()=>{this.updateBrowserDerivedState(()=>this.syncPanelMembership())},this.onBackdropClick=()=>{this.overlayHandle?.dismissBackdrop()},this.onPointerDown=(e,index)=>{if(e.button!==0||this.isDividerDisabled(index))return;const divider=e.currentTarget,ownerWindow=divider.ownerDocument.defaultView;ownerWindow&&(this.drags.size>0&&this.dragOwnerWindow!==ownerWindow||(this.drags.set(e.pointerId,{index,startPos:this.effectiveOrientation==="vertical"?e.clientY:e.clientX,base:this.baseEl,appliedDelta:0,acceptedResize:!1}),divider.setPointerCapture(e.pointerId),this.drags.size===1&&(this.dragOwnerWindow=ownerWindow,ownerWindow.addEventListener("pointermove",this.onPointerMove),ownerWindow.addEventListener("pointerup",this.onPointerUp),ownerWindow.addEventListener("pointercancel",this.onPointerUp),ownerWindow.addEventListener("lostpointercapture",this.onPointerUp))))},this.onPointerMove=e=>{const drag=this.drags.get(e.pointerId);if(!drag)return;if(this.isDividerDisabled(drag.index)){this.endDragGestures();return}const total=this.effectiveOrientation==="vertical"?drag.base.clientHeight:drag.base.clientWidth;if(!Number.isFinite(total)||total<=0){this.endDragGestures();return}let cumulativeDelta=((this.effectiveOrientation==="vertical"?e.clientY:e.clientX)-drag.startPos)/total*100;this.effectiveOrientation==="horizontal"&&isRtl(this)&&(cumulativeDelta=-cumulativeDelta);const incremental=cumulativeDelta-drag.appliedDelta,priorValue=this.sizes[drag.index];if(priorValue===void 0)return;const paired=this.clampPair(this.sizes,drag.index,incremental,total),pairedA=paired[drag.index],pairedB=paired[drag.index+1];if(pairedA===void 0||pairedB===void 0)return;const next=[...this.sizes];next[drag.index]=pairedA,next[drag.index+1]=pairedB,this.requestResize(next,!1)&&(drag.appliedDelta+=pairedA-priorValue,drag.acceptedResize=!0)},this.onPointerUp=e=>{const drag=this.drags.get(e.pointerId);drag&&(this.drags.delete(e.pointerId),e.type==="pointerup"&&drag.acceptedResize&&this.persist(),this.drags.size===0&&this.removeDragListeners())},this.onDividerKeyDown=(e,index)=>{if(this.isDividerDisabled(index))return;const rtl=this.effectiveOrientation==="horizontal"&&isRtl(this),forwardKey=this.effectiveOrientation==="vertical"?"ArrowDown":rtl?"ArrowLeft":"ArrowRight",backwardKey=this.effectiveOrientation==="vertical"?"ArrowUp":rtl?"ArrowRight":"ArrowLeft";e.key===forwardKey?this.applyDelta(index,KEYBOARD_STEP,!0)&&e.preventDefault():e.key===backwardKey&&this.applyDelta(index,-KEYBOARD_STEP,!0)&&e.preventDefault()}}static{this.defaultStrings={...super.defaultStrings,resizeDivider:LYRA_DEFAULT_resizeDivider}}static{this.ownedCollectionProperties=Object.freeze(["sizes","defaultSizes","panelConstraints"])}static{this.styles=[LyraElement.styles,styles]}static{this.immutableEventDetails=Object.freeze(["lr-resize-request","lr-resize"])}static{this.properties={collapseState:{reflect:!0,attribute:"collapse-state",noAccessor:!0}}}connectedCallback(){super.connectedCallback();const hostWidth=this.getBoundingClientRect().width;hostWidth>0&&(this.measuredInlineSize=hostWidth),this.seedFirstRenderState(()=>this.syncPanelMembership(!1)),this.hasUpdated&&this.syncPanelMembership(!1),this.initializedSizes&&this.ensureSizes(),this.responsiveObservationEnabled&&this.armCollapseObserver(),this.hasUpdated&&this.overlayActive&&(this.overlayHandle?.isActive()?this.overlayHandle.resume():this.activateFloatingOverlay(),queueMicrotask(()=>this.overlayHandle?.focusInitial()))}disconnectedCallback(){super.disconnectedCallback(),this.endDragGestures(),this.resetCollapseObserver(),this.overlayHandle?.suspend(),this.releaseOwnedPanels()}adoptedCallback(){super.adoptedCallback(),this.endDragGestures(),this.resetCollapseObserver(),this.releaseOwnedPanels()}firstUpdated(changed){super.firstUpdated(changed),this.responsiveObservationEnabled&&this.armCollapseObserver()}willUpdate(changed){if(super.willUpdate(changed),!this.ownerDocument&&this.panelCount===0&&(this.panelCount=Math.max(this.sizes.length,this.defaultSizes.length,this.panelConstraints.length)),!this.initializedSizes)this.initializeSizes(),this.initializedSizes=!0;else if(changed.has("sizes")){const previous=changed.get("sizes");this.sizesReconciledForMembership?this.sizesReconciledForMembership=!1:this.validLiveSizes(this.sizes)||(Array.isArray(previous)&&this.validLiveSizes(previous)?this.sizes=[...previous]:(this.sizes=[],this.ensureSizes()))}else this.sizes.length===0&&this.ensureSizes();if((changed.has("orientationBreakpoint")||changed.has("orientationBreakpointBasis"))&&this.orientationBreakpoints.configure(this.orientationBreakpoint,this.orientationBreakpointBasis),(changed.has("orientation")||changed.has("narrowOrientation")||changed.has("orientationBreakpoint")||changed.has("orientationBreakpointBasis"))&&this.updateEffectiveOrientation(this.measuredInlineSize,this.hasUpdated&&this.orientationBreakpointBasis==="viewport"),changed.has("collapse")||changed.has("railBreakpoint")||changed.has("floatBreakpoint")||changed.has("collapseBreakpointBasis")){const previousEffective=changed.has("collapse")?this.effectiveCollapseStateFor(changed.get("collapse")??"none"):this.collapseState;changed.has("collapse")&&previousEffective!=="wide"&&this.endDragGestures(),this.collapseBreakpoints.configure(this.railBreakpoint,this.floatBreakpoint,this.collapseBreakpointBasis),this.collapsingIndex!==-1&&!this._forced&&(this._collapseState=this.collapseBreakpoints.classify(this.measuredInlineSize)),this.applyEffectiveCollapseTransition(previousEffective,this.collapseState,this.hasUpdated)}if(changed.has("open")||changed.has("collapseState")||changed.has("collapse")||changed.has("panelCount")){const next=this.collapseState==="floating"&&this.open;next!==this.overlayActive&&(this.overlayActive=next,next?(this.justOpened=!0,this.activateFloatingOverlay()):this.deactivateFloatingOverlay())}}get collapseState(){return this.effectiveCollapseStateFor(this.collapse)}set collapseState(next){if(next==="auto"){this._forced=!1,this.updateCollapseState(this.currentMeasuredWidth());return}this._forced=!0,this.setRequestedCollapseState(next)}get effectiveOrientation(){return this._effectiveOrientation}get responsiveObservationEnabled(){return this.collapse!=="none"||this.orientationBreakpoints.containerObservationEnabled}updateEffectiveOrientation(width,shouldEmit){const next=this.orientationBreakpoints.isBelow(width)?this.narrowOrientation:this.orientation;next!==this._effectiveOrientation&&(this.endDragGestures(),this._effectiveOrientation=next,this.requestUpdate(),shouldEmit&&this.emit("lr-multi-split-orientation-change",{orientation:next}))}currentMeasuredWidth(){return this.baseEl?.clientWidth??0}effectiveCollapseStateFor(collapse){return collapse!=="none"&&this.panelCount>=2?this._collapseState:"wide"}applyEffectiveCollapseTransition(previous,next,shouldEmit=!0){previous!==next&&(this.endDragGestures(),this.requestUpdate("collapseState",previous),shouldEmit&&this.emit("lr-multi-split-collapse-change",{state:next}),next!=="floating"&&this.open&&(this.open=!1))}setRequestedCollapseState(next,shouldEmit=!0){const previousEffective=this.collapseState;if(next===this._collapseState)return;this._collapseState=next;const nextEffective=this.collapseState;this.applyEffectiveCollapseTransition(previousEffective,nextEffective,shouldEmit),previousEffective===nextEffective&&next!==nextEffective&&this.requestUpdate("collapseState",next)}get storageFullKey(){return this.storageKey?`lr-multi-split:${this.storageKey}:panels`:void 0}panelIdsFor(panels){const ids=[],seen=new Set;for(const panel of panels){const panelId=panel.getAttribute("panel-id")??"";if(!panelId||panelId.trim()!==panelId||seen.has(panelId))return null;seen.add(panelId),ids.push(panelId)}return ids}reconcileIdentitySizes(previousIds,previousValues,nextIds){if(previousIds.length!==previousValues.length||nextIds.length===0)return null;const previousSizes=new Map;previousIds.forEach((panelId,index)=>{previousSizes.set(panelId,previousValues[index])});const retainedTotal=nextIds.reduce((total,panelId)=>total+(previousSizes.get(panelId)??0),0),missingCount=nextIds.filter(panelId=>!previousSizes.has(panelId)).length;if(!(retainedTotal>0)){const equal=100/nextIds.length;return nextIds.map(()=>equal)}const newShare=100/nextIds.length,retainedScale=(100-newShare*missingCount)/retainedTotal;return nextIds.map(panelId=>{const previous=previousSizes.get(panelId);return previous===void 0?newShare:previous*retainedScale})}reconcileSizesByPanelId(previousPanels,nextPanels){if(previousPanels.length!==this.sizes.length||nextPanels.length===0)return null;const previousIds=this.panelIdsFor(previousPanels),nextIds=this.panelIdsFor(nextPanels);return!previousIds||!nextIds?null:this.reconcileIdentitySizes(previousIds,this.sizes,nextIds)}validInitialSizes(value){return!Array.isArray(value)||value.length!==this.panelCount||!value.every(size=>Number.isFinite(size)&&size>=this.safeMin)?!1:Math.abs(value.reduce((sum,size)=>sum+size,0)-100)<.01}validLiveSizes(value){if(!Array.isArray(value)||value.length!==this.panelCount)return!1;const floor=this.normalizedDefaultMin();return value.every(size=>Number.isFinite(size)&&size>=floor)?Math.abs(value.reduce((sum,size)=>sum+size,0)-100)<.01:!1}resolveDefaultSizes(){if(this.defaultSizes.length===0)return null;if(!this.defaultSizes.some(entry=>typeof entry=="string")){const numbers=this.defaultSizes;return this.validInitialSizes(numbers)?[...numbers]:null}const containerSize=this.currentMeasuredWidth()||this.getBoundingClientRect().width;if(!(containerSize>0))return null;const resolvedPx=[];for(const entry of this.defaultSizes){if(typeof entry=="number"){if(!Number.isFinite(entry))return null;resolvedPx.push(entry/100*containerSize);continue}const px=resolveCssLength(entry,{host:this,percentBase:containerSize,viewportBasis:this.ownerDocument.defaultView??void 0});if(px==null||!(px>=0))return null;resolvedPx.push(px)}const sum=resolvedPx.reduce((total,size)=>total+size,0);if(!(sum>0))return null;const normalized=resolvedPx.map(size=>size/sum*100);return this.validInitialSizes(normalized)?normalized:null}initializeSizes(){if(this.loadPersisted()||this.validInitialSizes(this.sizes))return;const resolved=this.resolveDefaultSizes();if(resolved){this.sizes=resolved;return}this.sizes=[],this.ensureSizes()}loadPersisted(){const panelIds=this.panelIdsFor(this.ownedPanels);if(!panelIds)return!1;const parsed=readPersistedState(this.storageFullKey,isPersistedPanelLayout);if(!parsed||parsed.panels.length===0)return!1;const persistedIds=[],persistedSizes=[],seen=new Set;for(const panel of parsed.panels){if(seen.has(panel.panelId))return!1;seen.add(panel.panelId),persistedIds.push(panel.panelId),persistedSizes.push(panel.size)}if(Math.abs(persistedSizes.reduce((sum,size)=>sum+size,0)-100)>=.01)return!1;const normalized=this.reconcileIdentitySizes(persistedIds,persistedSizes,panelIds);return normalized&&this.validInitialSizes(normalized)?(this.sizes=normalized,!0):!1}persist(){const panelIds=this.panelIdsFor(this.ownedPanels);if(!panelIds||panelIds.length!==this.sizes.length)return;const layout={version:1,panels:panelIds.map((panelId,index)=>({panelId,size:this.sizes[index]}))};writePersistedState(this.storageFullKey,layout)}ensureSizes(){if(this.panelCount===this.sizes.length)return;if(this.panelCount<=0){this.sizes=[];return}if(this.sizes.length===0){const equal=100/this.panelCount;this.sizes=Array.from({length:this.panelCount},()=>equal);return}const diff=this.panelCount-this.sizes.length;if(diff>0){const newShare=100/this.panelCount,scale=(100-newShare*diff)/100;this.sizes=[...this.sizes.map(s=>s*scale),...Array.from({length:diff},()=>newShare)]}else{const kept=this.sizes.slice(0,this.panelCount),removedTotal=this.sizes.slice(this.panelCount).reduce((sum,s)=>sum+s,0),keptTotal=kept.reduce((sum,s)=>sum+s,0)||1;this.sizes=kept.map(s=>s+s/keptTotal*removedTotal)}}readPanelStyle(panel,property2){return{value:panel.style.getPropertyValue(property2),priority:panel.style.getPropertyPriority(property2)}}samePanelStyle(left,right){return left.value===right.value&&left.priority===right.priority}snapshotPanelOwnership(panel){const styles2=new Map;for(const property2 of OWNED_PANEL_STYLE_PROPERTIES)styles2.set(property2,this.readPanelStyle(panel,property2));return{styles:styles2,appliedStyles:new Map,hidden:panel.hidden,collapseState:panel.getAttribute("data-collapse-state")}}adoptPanelOwnership(panel,snapshot){for(const property2 of OWNED_PANEL_STYLE_PROPERTIES){const current=this.readPanelStyle(panel,property2),applied=snapshot.appliedStyles.get(property2);(applied&&!this.samePanelStyle(current,applied)||!applied&&!this.samePanelStyle(current,snapshot.styles.get(property2)))&&snapshot.styles.set(property2,current)}(snapshot.appliedHidden!==void 0&&panel.hidden!==snapshot.appliedHidden||snapshot.appliedHidden===void 0&&panel.hidden!==snapshot.hidden)&&(snapshot.hidden=panel.hidden);const collapseState=panel.getAttribute("data-collapse-state");(snapshot.appliedCollapseState!==void 0&&collapseState!==snapshot.appliedCollapseState||snapshot.appliedCollapseState===void 0&&collapseState!==snapshot.collapseState)&&(snapshot.collapseState=collapseState)}applyOwnedPanelStyle(panel,snapshot,property2,value){value.value===""?panel.style.removeProperty(property2):panel.style.setProperty(property2,value.value,value.priority),snapshot.appliedStyles.set(property2,this.readPanelStyle(panel,property2))}applyOwnedPanelStyleValue(panel,snapshot,property2,value){this.applyOwnedPanelStyle(panel,snapshot,property2,{value,priority:""})}applyOwnedPanelHidden(panel,snapshot,hidden){panel.hidden=hidden,snapshot.appliedHidden=panel.hidden}applyOwnedPanelCollapseState(panel,snapshot,state){state===null?panel.removeAttribute("data-collapse-state"):panel.setAttribute("data-collapse-state",state),snapshot.appliedCollapseState=panel.getAttribute("data-collapse-state")}restorePanelOwnership(panel,snapshot){this.adoptPanelOwnership(panel,snapshot);for(const property2 of OWNED_PANEL_STYLE_PROPERTIES){const value=snapshot.styles.get(property2);value.value===""?panel.style.removeProperty(property2):panel.style.setProperty(property2,value.value,value.priority)}panel.hidden=snapshot.hidden,snapshot.collapseState===null?panel.removeAttribute("data-collapse-state"):panel.setAttribute("data-collapse-state",snapshot.collapseState)}panelProjectionDiverged(panel,snapshot){for(const property2 of OWNED_PANEL_STYLE_PROPERTIES){const current=this.readPanelStyle(panel,property2),expected=snapshot.appliedStyles.get(property2)??snapshot.styles.get(property2);if(!this.samePanelStyle(current,expected))return!0}if(panel.hidden!==(snapshot.appliedHidden??snapshot.hidden))return!0;const expectedCollapseState=snapshot.appliedCollapseState!==void 0?snapshot.appliedCollapseState:snapshot.collapseState;return panel.getAttribute("data-collapse-state")!==expectedCollapseState}resetPanelOwnershipObserver(){this.panelOwnershipObserverGeneration+=1,this.panelOwnershipObserver?.disconnect(),this.panelOwnershipObserver=void 0,this.panelOwnershipObserverDocument=void 0}observeOwnedPanels(){this.resetPanelOwnershipObserver();const ownerDocument=this.ownerDocument,MutationObserverConstructor=ownerDocument.defaultView?.MutationObserver;if(!MutationObserverConstructor||!this.isConnected||this.ownedPanels.length===0)return;const generation=this.panelOwnershipObserverGeneration,observer=new MutationObserverConstructor(records=>{if(this.panelOwnershipObserver!==observer||this.panelOwnershipObserverDocument!==this.ownerDocument||this.panelOwnershipObserverGeneration!==generation||!this.isConnected)return;records.some(record=>{const panel=record.target,snapshot=this.panelOwnership.get(panel);return snapshot?this.panelProjectionDiverged(panel,snapshot):!1})&&this.requestUpdate()});this.panelOwnershipObserver=observer,this.panelOwnershipObserverDocument=ownerDocument;for(const panel of this.ownedPanels)observer.observe(panel,{attributes:!0,attributeFilter:["style","hidden","data-collapse-state"]})}samePanelSequence(next){return next.length===this.ownedPanels.length&&next.every((panel,index)=>panel===this.ownedPanels[index])}syncPanelMembership(reconcileSizes=!0){const next=[...this.children];if(this.samePanelSequence(next))return;const previousPanels=this.ownedPanels,identitySizes=reconcileSizes?this.reconcileSizesByPanelId(previousPanels,next):null,previousEffective=this.collapseState,nextSet=new Set(next);for(const panel of this.ownedPanels){if(nextSet.has(panel))continue;const snapshot=this.panelOwnership.get(panel);snapshot&&this.restorePanelOwnership(panel,snapshot),this.panelOwnership.delete(panel)}for(const panel of next)this.panelOwnership.has(panel)||this.panelOwnership.set(panel,this.snapshotPanelOwnership(panel));const countChanged=next.length!==this.panelCount;this.ownedPanels=next,this.panelCount=next.length,this.collapsingIndex!==-1&&!this._forced&&(this._collapseState=this.collapseBreakpoints.classify(this.currentMeasuredWidth())),this.applyEffectiveCollapseTransition(previousEffective,this.collapseState,this.hasUpdated),identitySizes?(this.sizesReconciledForMembership=!0,this.sizes=identitySizes):countChanged&&reconcileSizes&&(this.sizesReconciledForMembership=!0,this.ensureSizes()),this.observeOwnedPanels(),this.hasUpdated&&this.requestUpdate()}releaseOwnedPanels(){this.resetPanelOwnershipObserver();for(const panel of this.ownedPanels){const snapshot=this.panelOwnership.get(panel);snapshot&&this.restorePanelOwnership(panel,snapshot)}this.ownedPanels=[],this.panelOwnership.clear()}getContainerSize(){return this.baseEl?this.effectiveOrientation==="vertical"?this.baseEl.clientHeight:this.baseEl.clientWidth:0}get collapsingIndex(){return this.collapse==="none"||this.panelCount<2?-1:this.collapse==="start"?0:this.panelCount-1}get collapseActive(){return this.collapsingIndex!==-1&&this.collapseState!=="wide"}isDividerDisabled(index){if(!this.collapseActive)return!1;const adjacent=this.collapsingIndex===0?0:this.panelCount-2;return index===adjacent}updateCollapseState(width,shouldEmit=!0){this.collapse!=="none"&&(this._forced||this.setRequestedCollapseState(this.collapseBreakpoints.classify(width),shouldEmit))}armCollapseObserver(){const observedElement=this.baseEl;if(!this.isConnected||!observedElement)return;const ownerDocument=this.ownerDocument;if(this.collapseResizeObserver&&this.collapseObservedElement===observedElement&&this.collapseObserverOwnerDocument===ownerDocument)return;this.resetCollapseObserver();const ResizeObserverConstructor=ownerDocument.defaultView?.ResizeObserver;if(!ResizeObserverConstructor)return;const generation=this.collapseObserverGeneration,observer=new ResizeObserverConstructor(entries=>{if(this.collapseResizeObserver!==observer||this.collapseObserverGeneration!==generation||!this.isConnected||this.ownerDocument!==ownerDocument||this.baseEl!==observedElement)return;const box=entries[0]?.contentBoxSize?.[0],width=box?box.inlineSize:observedElement.getBoundingClientRect().width;this.measuredInlineSize=width,this.updateCollapseState(width),this.updateEffectiveOrientation(width,!0)});this.collapseResizeObserver=observer,this.collapseObservedElement=observedElement,this.collapseObserverOwnerDocument=ownerDocument,observer.observe(observedElement)}resetCollapseObserver(){this.collapseObserverGeneration+=1,this.collapseResizeObserver?.disconnect(),this.collapseResizeObserver=void 0,this.collapseObservedElement=void 0,this.collapseObserverOwnerDocument=void 0}syncCollapseObserver(){if(!this.responsiveObservationEnabled){this.resetCollapseObserver();return}this.armCollapseObserver()}get safeMin(){return finiteRange(this.min,10,0)}normalizedDefaultMin(){if(this.panelCount<=0)return 0;const requested=this.safeMin,available=Math.max(0,100-KEYBOARD_STEP);return Math.min(requested,available/this.panelCount)}resolveConstraintBounds(containerSize){const fallbackMin=this.normalizedDefaultMin(),fallback=Array.from({length:this.panelCount},()=>({min:fallbackMin,max:1/0}));if(this.panelCount<=0)return{bounds:[],usePanelConstraints:!0};const bounds=[];let minimumTotal=0,maximumTotal=0,hasUnboundedMaximum=!1,issueReason;for(let index=0;index<this.panelCount;index++){const constraint=this.panelConstraints[index];let min=this.safeMin,max=1/0,minSet=!1,maxSet=!1;constraint&&(constraint.minPx!=null&&Number.isFinite(constraint.minPx)&&constraint.minPx>=0&&containerSize>0&&(min=constraint.minPx/containerSize*100,minSet=!0),constraint.minPercent!=null&&Number.isFinite(constraint.minPercent)&&constraint.minPercent>=0&&(min=minSet?Math.max(min,constraint.minPercent):constraint.minPercent,minSet=!0),constraint.maxPx!=null&&Number.isFinite(constraint.maxPx)&&constraint.maxPx>=0&&containerSize>0&&(max=constraint.maxPx/containerSize*100,maxSet=!0),constraint.maxPercent!=null&&Number.isFinite(constraint.maxPercent)&&constraint.maxPercent>=0&&(max=maxSet?Math.min(max,constraint.maxPercent):constraint.maxPercent,maxSet=!0),(constraint.minPx!=null&&(!Number.isFinite(constraint.minPx)||constraint.minPx<0)||constraint.maxPx!=null&&(!Number.isFinite(constraint.maxPx)||constraint.maxPx<0)||constraint.minPercent!=null&&(!Number.isFinite(constraint.minPercent)||constraint.minPercent<0)||constraint.maxPercent!=null&&(!Number.isFinite(constraint.maxPercent)||constraint.maxPercent<0))&&(issueReason??="minimum-exceeds-maximum")),min>max&&(issueReason??="minimum-exceeds-maximum"),bounds.push({min,max}),minimumTotal+=min,Number.isFinite(max)?maximumTotal+=max:hasUnboundedMaximum=!0}return issueReason==null&&minimumTotal>100+1e-9&&(issueReason="minimum-total"),issueReason==null&&!hasUnboundedMaximum&&maximumTotal<100-1e-9&&(issueReason="maximum-total"),issueReason==null?{bounds,usePanelConstraints:!0}:{bounds:fallback,usePanelConstraints:!1,issue:{reason:issueReason,panelCount:this.panelCount,minimumTotal,maximumTotal:hasUnboundedMaximum?null:maximumTotal,containerSize}}}percentBounds(index,containerSize){return this.resolveConstraintBounds(containerSize).bounds[index]??{min:0,max:1/0}}hasClampConstraint(constraint){return!!constraint&&(constraint.minPx!=null||constraint.maxPx!=null||constraint.minPercent!=null||constraint.maxPercent!=null)}minSideExpr(constraint){const terms=[];return constraint?.minPx!=null&&Number.isFinite(constraint.minPx)&&constraint.minPx>=0&&terms.push(`${constraint.minPx}px`),constraint?.minPercent!=null&&Number.isFinite(constraint.minPercent)&&constraint.minPercent>=0&&terms.push(`${constraint.minPercent}%`),terms.length===0?`${NO_MIN_PX}px`:terms.length===1?terms[0]:`max(${this.safeMin}%, ${terms.join(", ")})`}maxSideExpr(constraint){const terms=[];return constraint?.maxPx!=null&&Number.isFinite(constraint.maxPx)&&constraint.maxPx>=0&&terms.push(`${constraint.maxPx}px`),constraint?.maxPercent!=null&&Number.isFinite(constraint.maxPercent)&&constraint.maxPercent>=0&&terms.push(`${constraint.maxPercent}%`),terms.length===0?`${NO_MAX_PX}px`:terms.length===1?terms[0]:`min(${terms.join(", ")})`}clampPair(sizes,i,delta,containerSize=0){const next=[...sizes],currentA=next[i],currentB=next[i+1];if(currentA===void 0||currentB===void 0)return next;const pairTotal=currentA+currentB,a=this.percentBounds(i,containerSize),b=this.percentBounds(i+1,containerSize),loRaw=Math.max(a.min,pairTotal-b.max),hiRaw=Math.min(a.max,pairTotal-b.min),lo=Math.min(loRaw,pairTotal),hi=Math.max(hiRaw,lo),clampedA=Math.min(Math.max(currentA+delta,lo),hi);return next[i]=clampedA,next[i+1]=pairTotal-clampedA,next}requestResize(next,commit){return next.length===this.sizes.length&&next.every((size,index)=>Math.abs(size-this.sizes[index])<=1e-9)||this.emit("lr-resize-request",{sizes:[...next]},{cancelable:!0}).defaultPrevented?!1:(this.sizes=next,this.emit("lr-resize",{sizes:[...this.sizes]}),commit&&this.persist(),!0)}applyDelta(index,delta,commit){const next=this.clampPair(this.sizes,index,delta,this.getContainerSize());return next.length!==this.sizes.length||next.some((size,currentIndex)=>Math.abs(size-this.sizes[currentIndex])>1e-9)?(this.requestResize(next,commit),!0):!1}get floatingPanelEl(){const index=this.collapsingIndex;return index===-1?null:this.ownedPanels[index]??null}activateFloatingOverlay(){this.overlayHandle=activateOverlay({host:this,panel:()=>this.floatingPanelEl,onEscape:()=>this.open=!1,onBackdrop:()=>this.open=!1,lockScroll:!0,suspendWhenUnrendered:!0})}deactivateFloatingOverlay(){this.overlayHandle?.deactivate(),this.overlayHandle=void 0}removeDragListeners(){const ownerWindow=this.dragOwnerWindow;this.dragOwnerWindow=void 0,ownerWindow?.removeEventListener("pointermove",this.onPointerMove),ownerWindow?.removeEventListener("pointerup",this.onPointerUp),ownerWindow?.removeEventListener("pointercancel",this.onPointerUp),ownerWindow?.removeEventListener("lostpointercapture",this.onPointerUp)}endDragGestures(){this.drags.clear(),this.removeDragListeners()}updated(changed){super.updated(changed),(changed.has("collapse")||changed.has("orientationBreakpoint")||changed.has("orientationBreakpointBasis"))&&this.syncCollapseObserver(),this.orientationBreakpoints.active?this.setAttribute("data-effective-orientation",this._effectiveOrientation):this.removeAttribute("data-effective-orientation");const constraintResolution=this.resolveConstraintBounds(this.getContainerSize()),issue=constraintResolution.issue,issueKey=issue?`${issue.reason}:${issue.panelCount}:${issue.minimumTotal}:${issue.maximumTotal??"unbounded"}`:"";issueKey!==this.constraintIssueKey&&(this.constraintIssueKey=issueKey,issue&&this.emit("lr-multi-split-constraints-invalid",issue));const panels=this.ownedPanels;for(const panel of panels){const snapshot=this.panelOwnership.get(panel);snapshot&&this.adoptPanelOwnership(panel,snapshot)}const collapsingIndex=this.collapseActive?this.collapsingIndex:-1,redistributedShare=new Array(panels.length).fill(0);if(collapsingIndex===-1){let freedPercent=0;const growableIndexes=[];let growableTotal=0;for(let i=0;i<panels.length;i++){const percent=this.sizes[i]??0,constraint=constraintResolution.usePanelConstraints?this.panelConstraints[i]:void 0;if(this.hasClampConstraint(constraint)){const bounds=constraintResolution.bounds[i],clamped=bounds?Math.min(Math.max(percent,bounds.min),bounds.max):percent;clamped<percent&&(freedPercent+=percent-clamped)}else growableIndexes.push(i),growableTotal+=percent}if(freedPercent>0&&growableTotal>0)for(const i of growableIndexes)redistributedShare[i]=freedPercent*((this.sizes[i]??0)/growableTotal)}panels.forEach((panel,i)=>{const snapshot=this.panelOwnership.get(panel);if(!snapshot)return;const percent=this.sizes[i]??0,constraint=constraintResolution.usePanelConstraints?this.panelConstraints[i]:void 0;for(const property2 of["position","inset-block","inset-inline-start","inset-inline-end","inline-size"])this.applyOwnedPanelStyle(panel,snapshot,property2,snapshot.styles.get(property2));if(this.applyOwnedPanelHidden(panel,snapshot,snapshot.hidden),collapsingIndex===i&&this.collapseState==="rail")this.applyOwnedPanelStyleValue(panel,snapshot,"flex",`0 0 ${this.railWidth}`);else if(collapsingIndex===i&&this.collapseState==="floating"&&!this.open)this.applyOwnedPanelStyleValue(panel,snapshot,"flex","none"),this.applyOwnedPanelHidden(panel,snapshot,!0);else if(collapsingIndex===i&&this.collapseState==="floating")this.applyOwnedPanelStyleValue(panel,snapshot,"flex","none"),this.applyOwnedPanelStyleValue(panel,snapshot,"position","absolute"),this.applyOwnedPanelStyleValue(panel,snapshot,"inset-block","0"),this.applyOwnedPanelStyleValue(panel,snapshot,collapsingIndex===0?"inset-inline-start":"inset-inline-end","0"),this.applyOwnedPanelStyleValue(panel,snapshot,"inline-size",`${percent}%`);else if(collapsingIndex!==-1&&i!==collapsingIndex)this.applyOwnedPanelStyleValue(panel,snapshot,"flex",this.hasClampConstraint(constraint)?`0 1 clamp(${this.minSideExpr(constraint)}, ${percent}%, ${this.maxSideExpr(constraint)})`:`${percent} 1 0%`);else{const adjustedPercent=percent+(redistributedShare[i]??0);this.applyOwnedPanelStyleValue(panel,snapshot,"flex",this.hasClampConstraint(constraint)?`0 1 clamp(${this.minSideExpr(constraint)}, ${percent}%, ${this.maxSideExpr(constraint)})`:`0 1 ${adjustedPercent}%`)}this.applyOwnedPanelStyleValue(panel,snapshot,"order",String(i*2)),collapsingIndex===i?this.applyOwnedPanelCollapseState(panel,snapshot,this.collapseState):this.applyOwnedPanelCollapseState(panel,snapshot,null)}),collapsingIndex!==-1?this.setAttribute("data-collapse-state",this.collapseState):this.removeAttribute("data-collapse-state"),this.justOpened&&(this.justOpened=!1,this.overlayHandle?.focusInitial())}render(){const dividers=[],bounds=this.resolveConstraintBounds(this.getContainerSize()).bounds;for(let i=0;i<this.panelCount-1;i++){const pairTotal=(this.sizes[i]??0)+(this.sizes[i+1]??0),a=bounds[i],b=bounds[i+1],valueMin=Math.max(a.min,pairTotal-b.max),valueMax=Math.max(valueMin,Math.min(a.max,pairTotal-b.min)),disabled=this.isDividerDisabled(i);dividers.push(html`<div
+var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html,nothing}from"lit";import{property,query}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{activateOverlay}from"../../../internal/overlay-manager.js";import{isRtl}from"../../../internal/rtl.js";import{finiteRange}from"../../../internal/numbers.js";import{getNumberFormat}from"../../../internal/intl-cache.js";import{CollapseBreakpointController,OrientationBreakpointController}from"../../../internal/orientation-breakpoint.js";import{readPersistedState,writePersistedState}from"../../../internal/persisted-state.js";import{resolveCssLength}from"../../../internal/css-length.js";import{styles}from"./multi-split.styles.js";import{LYRA_DEFAULT_resizeDivider}from"../../../internal/default-strings.generated.js";const KEYBOARD_STEP=2;function isPersistedPanelLayout(value){if(typeof value!="object"||value===null)return!1;const candidate=value;return candidate.version!==1||!Array.isArray(candidate.panels)?!1:candidate.panels.every(panel=>{if(typeof panel!="object"||panel===null)return!1;const record=panel;return typeof record.panelId=="string"&&record.panelId!==""&&record.panelId.trim()===record.panelId&&typeof record.size=="number"&&Number.isFinite(record.size)&&record.size>=0})}const NO_MIN_PX=0,NO_MAX_PX=1e6,OWNED_PANEL_STYLE_PROPERTIES=["flex","order","inline-size"];class LyraMultiSplit extends LyraElement{constructor(){super(...arguments),this.sizes=[],this.defaultSizes=[],this.min=10,this.orientation="horizontal",this.orientationBreakpointBasis="container",this.narrowOrientation="vertical",this.panelConstraints=[],this.collapse="none",this.railWidth="3.5rem",this.railBreakpoint=640,this.floatBreakpoint=400,this.collapseBreakpointBasis="container",this.open=!1,this.panelCount=0,this.sizesReconciledForMembership=!1,this._collapseState="wide",this._forced=!1,this.overlayActive=!1,this.justOpened=!1,this.drags=new Map,this.ownedPanels=[],this.panelOwnership=new Map,this.panelOwnershipObserverGeneration=0,this.constraintIssueKey="",this.initializedSizes=!1,this.measuredInlineSize=Number.POSITIVE_INFINITY,this._effectiveOrientation="horizontal",this.collapseObserverGeneration=0,this.orientationBreakpoints=new OrientationBreakpointController(this,()=>this.updateEffectiveOrientation(this.measuredInlineSize,!0)),this.collapseBreakpoints=new CollapseBreakpointController(this,()=>this.updateCollapseState(this.measuredInlineSize,!0)),this.onSlotChange=()=>{this.updateBrowserDerivedState(()=>this.syncPanelMembership())},this.onBackdropClick=()=>{this.overlayHandle?.dismissBackdrop()},this.onPointerDown=(e,index)=>{if(e.button!==0||this.isDividerDisabled(index))return;const divider=e.currentTarget,ownerWindow=divider.ownerDocument.defaultView;ownerWindow&&(this.drags.size>0&&this.dragOwnerWindow!==ownerWindow||(this.drags.set(e.pointerId,{index,startPos:this.effectiveOrientation==="vertical"?e.clientY:e.clientX,base:this.baseEl,appliedDelta:0,acceptedResize:!1}),divider.setPointerCapture(e.pointerId),this.drags.size===1&&(this.dragOwnerWindow=ownerWindow,ownerWindow.addEventListener("pointermove",this.onPointerMove),ownerWindow.addEventListener("pointerup",this.onPointerUp),ownerWindow.addEventListener("pointercancel",this.onPointerUp),ownerWindow.addEventListener("lostpointercapture",this.onPointerUp))))},this.onPointerMove=e=>{const drag=this.drags.get(e.pointerId);if(!drag)return;if(this.isDividerDisabled(drag.index)){this.endDragGestures();return}const total=this.effectiveOrientation==="vertical"?drag.base.clientHeight:drag.base.clientWidth;if(!Number.isFinite(total)||total<=0){this.endDragGestures();return}let cumulativeDelta=((this.effectiveOrientation==="vertical"?e.clientY:e.clientX)-drag.startPos)/total*100;this.effectiveOrientation==="horizontal"&&isRtl(this)&&(cumulativeDelta=-cumulativeDelta);const incremental=cumulativeDelta-drag.appliedDelta,priorValue=this.sizes[drag.index];if(priorValue===void 0)return;const paired=this.clampPair(this.sizes,drag.index,incremental,total),pairedA=paired[drag.index],pairedB=paired[drag.index+1];if(pairedA===void 0||pairedB===void 0)return;const next=[...this.sizes];next[drag.index]=pairedA,next[drag.index+1]=pairedB,this.requestResize(next,!1)&&(drag.appliedDelta+=pairedA-priorValue,drag.acceptedResize=!0)},this.onPointerUp=e=>{const drag=this.drags.get(e.pointerId);drag&&(this.drags.delete(e.pointerId),e.type==="pointerup"&&drag.acceptedResize&&this.persist(),this.drags.size===0&&this.removeDragListeners())},this.onDividerKeyDown=(e,index)=>{if(this.isDividerDisabled(index))return;const rtl=this.effectiveOrientation==="horizontal"&&isRtl(this),forwardKey=this.effectiveOrientation==="vertical"?"ArrowDown":rtl?"ArrowLeft":"ArrowRight",backwardKey=this.effectiveOrientation==="vertical"?"ArrowUp":rtl?"ArrowRight":"ArrowLeft";e.key===forwardKey?this.applyDelta(index,KEYBOARD_STEP,!0)&&e.preventDefault():e.key===backwardKey&&this.applyDelta(index,-KEYBOARD_STEP,!0)&&e.preventDefault()}}static{this.defaultStrings={...super.defaultStrings,resizeDivider:LYRA_DEFAULT_resizeDivider}}static{this.ownedCollectionProperties=Object.freeze(["sizes","defaultSizes","panelConstraints"])}static{this.styles=[LyraElement.styles,styles]}static{this.immutableEventDetails=Object.freeze(["lr-resize-request","lr-resize"])}static{this.properties={collapseState:{reflect:!0,attribute:"collapse-state",noAccessor:!0}}}connectedCallback(){super.connectedCallback();const hostWidth=this.getBoundingClientRect().width;hostWidth>0&&(this.measuredInlineSize=hostWidth),this.seedFirstRenderState(()=>this.syncPanelMembership(!1)),this.hasUpdated&&this.syncPanelMembership(!1),this.initializedSizes&&this.ensureSizes(),this.responsiveObservationEnabled&&this.armCollapseObserver(),this.hasUpdated&&this.overlayActive&&(this.overlayHandle?.isActive()?this.overlayHandle.resume():this.activateFloatingOverlay(),queueMicrotask(()=>this.overlayHandle?.focusInitial()))}disconnectedCallback(){super.disconnectedCallback(),this.endDragGestures(),this.resetCollapseObserver(),this.overlayHandle?.suspend(),this.releaseOwnedPanels()}adoptedCallback(){super.adoptedCallback(),this.endDragGestures(),this.resetCollapseObserver(),this.releaseOwnedPanels()}firstUpdated(changed){super.firstUpdated(changed),this.responsiveObservationEnabled&&this.armCollapseObserver()}willUpdate(changed){if(super.willUpdate(changed),!this.ownerDocument&&this.panelCount===0&&(this.panelCount=Math.max(this.sizes.length,this.defaultSizes.length,this.panelConstraints.length)),!this.initializedSizes)this.initializeSizes(),this.initializedSizes=!0;else if(changed.has("sizes")){const previous=changed.get("sizes");this.sizesReconciledForMembership?this.sizesReconciledForMembership=!1:this.validLiveSizes(this.sizes)||(Array.isArray(previous)&&this.validLiveSizes(previous)?this.sizes=[...previous]:(this.sizes=[],this.ensureSizes()))}else this.sizes.length===0&&this.ensureSizes();if((changed.has("orientationBreakpoint")||changed.has("orientationBreakpointBasis"))&&this.orientationBreakpoints.configure(this.orientationBreakpoint,this.orientationBreakpointBasis),(changed.has("orientation")||changed.has("narrowOrientation")||changed.has("orientationBreakpoint")||changed.has("orientationBreakpointBasis"))&&this.updateEffectiveOrientation(this.measuredInlineSize,this.hasUpdated&&this.orientationBreakpointBasis==="viewport"),changed.has("collapse")||changed.has("railBreakpoint")||changed.has("floatBreakpoint")||changed.has("collapseBreakpointBasis")){const previousEffective=changed.has("collapse")?this.effectiveCollapseStateFor(changed.get("collapse")??"none"):this.collapseState;changed.has("collapse")&&previousEffective!=="wide"&&this.endDragGestures(),this.collapseBreakpoints.configure(this.railBreakpoint,this.floatBreakpoint,this.collapseBreakpointBasis),this.collapsingIndex!==-1&&!this._forced&&(this._collapseState=this.collapseBreakpoints.classify(this.measuredInlineSize)),this.applyEffectiveCollapseTransition(previousEffective,this.collapseState,this.hasUpdated)}if(changed.has("open")||changed.has("collapseState")||changed.has("collapse")||changed.has("panelCount")){const next=this.collapseState==="floating"&&this.open;next!==this.overlayActive&&(this.overlayActive=next,next?(this.justOpened=!0,this.activateFloatingOverlay()):this.deactivateFloatingOverlay())}}get collapseState(){return this.effectiveCollapseStateFor(this.collapse)}set collapseState(next){if(next==="auto"){this._forced=!1,this.updateCollapseState(this.currentMeasuredWidth());return}this._forced=!0,this.setRequestedCollapseState(next)}get effectiveOrientation(){return this._effectiveOrientation}get responsiveObservationEnabled(){return this.collapse!=="none"||this.orientationBreakpoints.containerObservationEnabled}updateEffectiveOrientation(width,shouldEmit){const next=this.orientationBreakpoints.isBelow(width)?this.narrowOrientation:this.orientation;next!==this._effectiveOrientation&&(this.endDragGestures(),this._effectiveOrientation=next,this.requestUpdate(),shouldEmit&&this.emit("lr-multi-split-orientation-change",{orientation:next}))}currentMeasuredWidth(){return this.baseEl?.clientWidth??0}effectiveCollapseStateFor(collapse){return collapse!=="none"&&this.panelCount>=2?this._collapseState:"wide"}applyEffectiveCollapseTransition(previous,next,shouldEmit=!0){previous!==next&&(this.endDragGestures(),this.requestUpdate("collapseState",previous),shouldEmit&&this.emit("lr-multi-split-collapse-change",{state:next}),next!=="floating"&&this.open&&(this.open=!1))}setRequestedCollapseState(next,shouldEmit=!0){const previousEffective=this.collapseState;if(next===this._collapseState)return;this._collapseState=next;const nextEffective=this.collapseState;this.applyEffectiveCollapseTransition(previousEffective,nextEffective,shouldEmit),previousEffective===nextEffective&&next!==nextEffective&&this.requestUpdate("collapseState",next)}get storageFullKey(){return this.storageKey?`lr-multi-split:${this.storageKey}:panels`:void 0}panelIdsFor(panels){const ids=[],seen=new Set;for(const panel of panels){const panelId=panel.getAttribute("panel-id")??"";if(!panelId||panelId.trim()!==panelId||seen.has(panelId))return null;seen.add(panelId),ids.push(panelId)}return ids}reconcileIdentitySizes(previousIds,previousValues,nextIds){if(previousIds.length!==previousValues.length||nextIds.length===0)return null;const previousSizes=new Map;previousIds.forEach((panelId,index)=>{previousSizes.set(panelId,previousValues[index])});const retainedTotal=nextIds.reduce((total,panelId)=>total+(previousSizes.get(panelId)??0),0),missingCount=nextIds.filter(panelId=>!previousSizes.has(panelId)).length;if(!(retainedTotal>0)){const equal=100/nextIds.length;return nextIds.map(()=>equal)}const newShare=100/nextIds.length,retainedScale=(100-newShare*missingCount)/retainedTotal;return nextIds.map(panelId=>{const previous=previousSizes.get(panelId);return previous===void 0?newShare:previous*retainedScale})}reconcileSizesByPanelId(previousPanels,nextPanels){if(previousPanels.length!==this.sizes.length||nextPanels.length===0)return null;const previousIds=this.panelIdsFor(previousPanels),nextIds=this.panelIdsFor(nextPanels);return!previousIds||!nextIds?null:this.reconcileIdentitySizes(previousIds,this.sizes,nextIds)}validInitialSizes(value){return!Array.isArray(value)||value.length!==this.panelCount||!value.every(size=>Number.isFinite(size)&&size>=this.safeMin)?!1:Math.abs(value.reduce((sum,size)=>sum+size,0)-100)<.01}validLiveSizes(value){if(!Array.isArray(value)||value.length!==this.panelCount)return!1;const floor=this.normalizedDefaultMin();return value.every(size=>Number.isFinite(size)&&size>=floor)?Math.abs(value.reduce((sum,size)=>sum+size,0)-100)<.01:!1}resolveDefaultSizes(){if(this.defaultSizes.length===0)return null;if(!this.defaultSizes.some(entry=>typeof entry=="string")){const numbers=this.defaultSizes;return this.validInitialSizes(numbers)?[...numbers]:null}const containerSize=this.currentMeasuredWidth()||this.getBoundingClientRect().width;if(!(containerSize>0))return null;const resolvedPx=[];for(const entry of this.defaultSizes){if(typeof entry=="number"){if(!Number.isFinite(entry))return null;resolvedPx.push(entry/100*containerSize);continue}const px=resolveCssLength(entry,{host:this,percentBase:containerSize,viewportBasis:this.ownerDocument.defaultView??void 0});if(px==null||!(px>=0))return null;resolvedPx.push(px)}const sum=resolvedPx.reduce((total,size)=>total+size,0);if(!(sum>0))return null;const normalized=resolvedPx.map(size=>size/sum*100);return this.validInitialSizes(normalized)?normalized:null}initializeSizes(){if(this.loadPersisted()||this.validInitialSizes(this.sizes))return;const resolved=this.resolveDefaultSizes();if(resolved){this.sizes=resolved;return}this.sizes=[],this.ensureSizes()}loadPersisted(){const panelIds=this.panelIdsFor(this.ownedPanels);if(!panelIds)return!1;const parsed=readPersistedState(this.storageFullKey,isPersistedPanelLayout);if(!parsed||parsed.panels.length===0)return!1;const persistedIds=[],persistedSizes=[],seen=new Set;for(const panel of parsed.panels){if(seen.has(panel.panelId))return!1;seen.add(panel.panelId),persistedIds.push(panel.panelId),persistedSizes.push(panel.size)}if(Math.abs(persistedSizes.reduce((sum,size)=>sum+size,0)-100)>=.01)return!1;const normalized=this.reconcileIdentitySizes(persistedIds,persistedSizes,panelIds);return normalized&&this.validInitialSizes(normalized)?(this.sizes=normalized,!0):!1}persist(){const panelIds=this.panelIdsFor(this.ownedPanels);if(!panelIds||panelIds.length!==this.sizes.length)return;const layout={version:1,panels:panelIds.map((panelId,index)=>({panelId,size:this.sizes[index]}))};writePersistedState(this.storageFullKey,layout)}ensureSizes(){if(this.panelCount===this.sizes.length)return;if(this.panelCount<=0){this.sizes=[];return}if(this.sizes.length===0){const equal=100/this.panelCount;this.sizes=Array.from({length:this.panelCount},()=>equal);return}const diff=this.panelCount-this.sizes.length;if(diff>0){const newShare=100/this.panelCount,scale=(100-newShare*diff)/100;this.sizes=[...this.sizes.map(s=>s*scale),...Array.from({length:diff},()=>newShare)]}else{const kept=this.sizes.slice(0,this.panelCount),removedTotal=this.sizes.slice(this.panelCount).reduce((sum,s)=>sum+s,0),keptTotal=kept.reduce((sum,s)=>sum+s,0)||1;this.sizes=kept.map(s=>s+s/keptTotal*removedTotal)}}readPanelStyle(panel,property2){return{value:panel.style.getPropertyValue(property2),priority:panel.style.getPropertyPriority(property2)}}samePanelStyle(left,right){return left.value===right.value&&left.priority===right.priority}snapshotPanelOwnership(panel){const styles2=new Map;for(const property2 of OWNED_PANEL_STYLE_PROPERTIES)styles2.set(property2,this.readPanelStyle(panel,property2));return{styles:styles2,appliedStyles:new Map,hidden:panel.hidden,collapseState:panel.getAttribute("data-collapse-state")}}adoptPanelOwnership(panel,snapshot){for(const property2 of OWNED_PANEL_STYLE_PROPERTIES){const current=this.readPanelStyle(panel,property2),applied=snapshot.appliedStyles.get(property2);(applied&&!this.samePanelStyle(current,applied)||!applied&&!this.samePanelStyle(current,snapshot.styles.get(property2)))&&snapshot.styles.set(property2,current)}(snapshot.appliedHidden!==void 0&&panel.hidden!==snapshot.appliedHidden||snapshot.appliedHidden===void 0&&panel.hidden!==snapshot.hidden)&&(snapshot.hidden=panel.hidden);const collapseState=panel.getAttribute("data-collapse-state");(snapshot.appliedCollapseState!==void 0&&collapseState!==snapshot.appliedCollapseState||snapshot.appliedCollapseState===void 0&&collapseState!==snapshot.collapseState)&&(snapshot.collapseState=collapseState)}applyOwnedPanelStyle(panel,snapshot,property2,value){value.value===""?panel.style.removeProperty(property2):panel.style.setProperty(property2,value.value,value.priority),snapshot.appliedStyles.set(property2,this.readPanelStyle(panel,property2))}applyOwnedPanelStyleValue(panel,snapshot,property2,value){this.applyOwnedPanelStyle(panel,snapshot,property2,{value,priority:""})}applyOwnedPanelHidden(panel,snapshot,hidden){panel.hidden=hidden,snapshot.appliedHidden=panel.hidden}applyOwnedPanelCollapseState(panel,snapshot,state){state===null?panel.removeAttribute("data-collapse-state"):panel.setAttribute("data-collapse-state",state),snapshot.appliedCollapseState=panel.getAttribute("data-collapse-state")}restorePanelOwnership(panel,snapshot){this.adoptPanelOwnership(panel,snapshot);for(const property2 of OWNED_PANEL_STYLE_PROPERTIES){const value=snapshot.styles.get(property2);value.value===""?panel.style.removeProperty(property2):panel.style.setProperty(property2,value.value,value.priority)}panel.hidden=snapshot.hidden,snapshot.collapseState===null?panel.removeAttribute("data-collapse-state"):panel.setAttribute("data-collapse-state",snapshot.collapseState)}panelProjectionDiverged(panel,snapshot){for(const property2 of OWNED_PANEL_STYLE_PROPERTIES){const current=this.readPanelStyle(panel,property2),expected=snapshot.appliedStyles.get(property2)??snapshot.styles.get(property2);if(!this.samePanelStyle(current,expected))return!0}if(panel.hidden!==(snapshot.appliedHidden??snapshot.hidden))return!0;const expectedCollapseState=snapshot.appliedCollapseState!==void 0?snapshot.appliedCollapseState:snapshot.collapseState;return panel.getAttribute("data-collapse-state")!==expectedCollapseState}resetPanelOwnershipObserver(){this.panelOwnershipObserverGeneration+=1,this.panelOwnershipObserver?.disconnect(),this.panelOwnershipObserver=void 0,this.panelOwnershipObserverDocument=void 0}observeOwnedPanels(){this.resetPanelOwnershipObserver();const ownerDocument=this.ownerDocument,MutationObserverConstructor=ownerDocument.defaultView?.MutationObserver;if(!MutationObserverConstructor||!this.isConnected||this.ownedPanels.length===0)return;const generation=this.panelOwnershipObserverGeneration,observer=new MutationObserverConstructor(records=>{if(this.panelOwnershipObserver!==observer||this.panelOwnershipObserverDocument!==this.ownerDocument||this.panelOwnershipObserverGeneration!==generation||!this.isConnected)return;records.some(record=>{const panel=record.target,snapshot=this.panelOwnership.get(panel);return snapshot?this.panelProjectionDiverged(panel,snapshot):!1})&&this.requestUpdate()});this.panelOwnershipObserver=observer,this.panelOwnershipObserverDocument=ownerDocument;for(const panel of this.ownedPanels)observer.observe(panel,{attributes:!0,attributeFilter:["style","hidden","data-collapse-state"]})}samePanelSequence(next){return next.length===this.ownedPanels.length&&next.every((panel,index)=>panel===this.ownedPanels[index])}syncPanelMembership(reconcileSizes=!0){const next=[...this.children];if(this.samePanelSequence(next))return;const previousPanels=this.ownedPanels,identitySizes=reconcileSizes?this.reconcileSizesByPanelId(previousPanels,next):null,previousEffective=this.collapseState,nextSet=new Set(next);for(const panel of this.ownedPanels){if(nextSet.has(panel))continue;const snapshot=this.panelOwnership.get(panel);snapshot&&this.restorePanelOwnership(panel,snapshot),this.panelOwnership.delete(panel)}for(const panel of next)this.panelOwnership.has(panel)||this.panelOwnership.set(panel,this.snapshotPanelOwnership(panel));const countChanged=next.length!==this.panelCount;this.ownedPanels=next,this.panelCount=next.length,this.collapsingIndex!==-1&&!this._forced&&(this._collapseState=this.collapseBreakpoints.classify(this.currentMeasuredWidth())),this.applyEffectiveCollapseTransition(previousEffective,this.collapseState,this.hasUpdated),identitySizes?(this.sizesReconciledForMembership=!0,this.sizes=identitySizes):countChanged&&reconcileSizes&&(this.sizesReconciledForMembership=!0,this.ensureSizes()),this.observeOwnedPanels(),this.hasUpdated&&this.requestUpdate()}releaseOwnedPanels(){this.resetPanelOwnershipObserver();for(const panel of this.ownedPanels){const snapshot=this.panelOwnership.get(panel);snapshot&&this.restorePanelOwnership(panel,snapshot)}this.ownedPanels=[],this.panelOwnership.clear()}getContainerSize(){return this.baseEl?this.effectiveOrientation==="vertical"?this.baseEl.clientHeight:this.baseEl.clientWidth:0}get collapsingIndex(){return this.collapse==="none"||this.panelCount<2?-1:this.collapse==="start"?0:this.panelCount-1}get collapseActive(){return this.collapsingIndex!==-1&&this.collapseState!=="wide"}isDividerDisabled(index){if(!this.collapseActive)return!1;const adjacent=this.collapsingIndex===0?0:this.panelCount-2;return index===adjacent}updateCollapseState(width,shouldEmit=!0){this.collapse!=="none"&&(this._forced||this.setRequestedCollapseState(this.collapseBreakpoints.classify(width),shouldEmit))}armCollapseObserver(){const observedElement=this.baseEl;if(!this.isConnected||!observedElement)return;const ownerDocument=this.ownerDocument;if(this.collapseResizeObserver&&this.collapseObservedElement===observedElement&&this.collapseObserverOwnerDocument===ownerDocument)return;this.resetCollapseObserver();const ResizeObserverConstructor=ownerDocument.defaultView?.ResizeObserver;if(!ResizeObserverConstructor)return;const generation=this.collapseObserverGeneration,observer=new ResizeObserverConstructor(entries=>{if(this.collapseResizeObserver!==observer||this.collapseObserverGeneration!==generation||!this.isConnected||this.ownerDocument!==ownerDocument||this.baseEl!==observedElement)return;const box=entries[0]?.contentBoxSize?.[0],width=box?box.inlineSize:observedElement.getBoundingClientRect().width;this.measuredInlineSize=width,this.updateCollapseState(width),this.updateEffectiveOrientation(width,!0)});this.collapseResizeObserver=observer,this.collapseObservedElement=observedElement,this.collapseObserverOwnerDocument=ownerDocument,observer.observe(observedElement)}resetCollapseObserver(){this.collapseObserverGeneration+=1,this.collapseResizeObserver?.disconnect(),this.collapseResizeObserver=void 0,this.collapseObservedElement=void 0,this.collapseObserverOwnerDocument=void 0}syncCollapseObserver(){if(!this.responsiveObservationEnabled){this.resetCollapseObserver();return}this.armCollapseObserver()}get safeMin(){return finiteRange(this.min,10,0)}normalizedDefaultMin(){if(this.panelCount<=0)return 0;const requested=this.safeMin,available=Math.max(0,100-KEYBOARD_STEP);return Math.min(requested,available/this.panelCount)}resolveConstraintBounds(containerSize){const fallbackMin=this.normalizedDefaultMin(),fallback=Array.from({length:this.panelCount},()=>({min:fallbackMin,max:1/0}));if(this.panelCount<=0)return{bounds:[],usePanelConstraints:!0};const bounds=[];let minimumTotal=0,maximumTotal=0,hasUnboundedMaximum=!1,issueReason;for(let index=0;index<this.panelCount;index++){const constraint=this.panelConstraints[index];let min=this.safeMin,max=1/0,minSet=!1,maxSet=!1;constraint&&(constraint.minPx!=null&&Number.isFinite(constraint.minPx)&&constraint.minPx>=0&&containerSize>0&&(min=constraint.minPx/containerSize*100,minSet=!0),constraint.minPercent!=null&&Number.isFinite(constraint.minPercent)&&constraint.minPercent>=0&&(min=minSet?Math.max(min,constraint.minPercent):constraint.minPercent,minSet=!0),constraint.maxPx!=null&&Number.isFinite(constraint.maxPx)&&constraint.maxPx>=0&&containerSize>0&&(max=constraint.maxPx/containerSize*100,maxSet=!0),constraint.maxPercent!=null&&Number.isFinite(constraint.maxPercent)&&constraint.maxPercent>=0&&(max=maxSet?Math.min(max,constraint.maxPercent):constraint.maxPercent,maxSet=!0),(constraint.minPx!=null&&(!Number.isFinite(constraint.minPx)||constraint.minPx<0)||constraint.maxPx!=null&&(!Number.isFinite(constraint.maxPx)||constraint.maxPx<0)||constraint.minPercent!=null&&(!Number.isFinite(constraint.minPercent)||constraint.minPercent<0)||constraint.maxPercent!=null&&(!Number.isFinite(constraint.maxPercent)||constraint.maxPercent<0))&&(issueReason??="minimum-exceeds-maximum")),min>max&&(issueReason??="minimum-exceeds-maximum"),bounds.push({min,max}),minimumTotal+=min,Number.isFinite(max)?maximumTotal+=max:hasUnboundedMaximum=!0}return issueReason==null&&minimumTotal>100+1e-9&&(issueReason="minimum-total"),issueReason==null&&!hasUnboundedMaximum&&maximumTotal<100-1e-9&&(issueReason="maximum-total"),issueReason==null?{bounds,usePanelConstraints:!0}:{bounds:fallback,usePanelConstraints:!1,issue:{reason:issueReason,panelCount:this.panelCount,minimumTotal,maximumTotal:hasUnboundedMaximum?null:maximumTotal,containerSize}}}percentBounds(index,containerSize){return this.resolveConstraintBounds(containerSize).bounds[index]??{min:0,max:1/0}}hasClampConstraint(constraint){return!!constraint&&(constraint.minPx!=null||constraint.maxPx!=null||constraint.minPercent!=null||constraint.maxPercent!=null)}minSideExpr(constraint){const terms=[];return constraint?.minPx!=null&&Number.isFinite(constraint.minPx)&&constraint.minPx>=0&&terms.push(`${constraint.minPx}px`),constraint?.minPercent!=null&&Number.isFinite(constraint.minPercent)&&constraint.minPercent>=0&&terms.push(`${constraint.minPercent}%`),terms.length===0?`${NO_MIN_PX}px`:terms.length===1?terms[0]:`max(${this.safeMin}%, ${terms.join(", ")})`}maxSideExpr(constraint){const terms=[];return constraint?.maxPx!=null&&Number.isFinite(constraint.maxPx)&&constraint.maxPx>=0&&terms.push(`${constraint.maxPx}px`),constraint?.maxPercent!=null&&Number.isFinite(constraint.maxPercent)&&constraint.maxPercent>=0&&terms.push(`${constraint.maxPercent}%`),terms.length===0?`${NO_MAX_PX}px`:terms.length===1?terms[0]:`min(${terms.join(", ")})`}clampPair(sizes,i,delta,containerSize=0){const next=[...sizes],currentA=next[i],currentB=next[i+1];if(currentA===void 0||currentB===void 0)return next;const pairTotal=currentA+currentB,a=this.percentBounds(i,containerSize),b=this.percentBounds(i+1,containerSize),loRaw=Math.max(a.min,pairTotal-b.max),hiRaw=Math.min(a.max,pairTotal-b.min),lo=Math.min(loRaw,pairTotal),hi=Math.max(hiRaw,lo),clampedA=Math.min(Math.max(currentA+delta,lo),hi);return next[i]=clampedA,next[i+1]=pairTotal-clampedA,next}requestResize(next,commit){return next.length===this.sizes.length&&next.every((size,index)=>Math.abs(size-this.sizes[index])<=1e-9)||this.emit("lr-resize-request",{sizes:[...next]},{cancelable:!0}).defaultPrevented?!1:(this.sizes=next,this.emit("lr-resize",{sizes:[...this.sizes]}),commit&&this.persist(),!0)}applyDelta(index,delta,commit){const next=this.clampPair(this.sizes,index,delta,this.getContainerSize());return next.length!==this.sizes.length||next.some((size,currentIndex)=>Math.abs(size-this.sizes[currentIndex])>1e-9)?(this.requestResize(next,commit),!0):!1}get floatingPanelEl(){const index=this.collapsingIndex;return index===-1?null:this.ownedPanels[index]??null}activateFloatingOverlay(){this.overlayHandle=activateOverlay({host:this,panel:()=>this.floatingPanelEl,onEscape:()=>this.open=!1,onBackdrop:()=>this.open=!1,lockScroll:!0,suspendWhenUnrendered:!0})}deactivateFloatingOverlay(){this.overlayHandle?.deactivate(),this.overlayHandle=void 0}removeDragListeners(){const ownerWindow=this.dragOwnerWindow;this.dragOwnerWindow=void 0,ownerWindow?.removeEventListener("pointermove",this.onPointerMove),ownerWindow?.removeEventListener("pointerup",this.onPointerUp),ownerWindow?.removeEventListener("pointercancel",this.onPointerUp),ownerWindow?.removeEventListener("lostpointercapture",this.onPointerUp)}endDragGestures(){this.drags.clear(),this.removeDragListeners()}updated(changed){super.updated(changed),(changed.has("collapse")||changed.has("orientationBreakpoint")||changed.has("orientationBreakpointBasis"))&&this.syncCollapseObserver(),this.orientationBreakpoints.active?this.setAttribute("data-effective-orientation",this._effectiveOrientation):this.removeAttribute("data-effective-orientation");const constraintResolution=this.resolveConstraintBounds(this.getContainerSize()),issue=constraintResolution.issue,issueKey=issue?`${issue.reason}:${issue.panelCount}:${issue.minimumTotal}:${issue.maximumTotal??"unbounded"}`:"";issueKey!==this.constraintIssueKey&&(this.constraintIssueKey=issueKey,issue&&this.emit("lr-multi-split-constraints-invalid",issue));const panels=this.ownedPanels;for(const panel of panels){const snapshot=this.panelOwnership.get(panel);snapshot&&this.adoptPanelOwnership(panel,snapshot)}const collapsingIndex=this.collapseActive?this.collapsingIndex:-1,redistributedShare=new Array(panels.length).fill(0);if(collapsingIndex===-1){let freedPercent=0;const growableIndexes=[];let growableTotal=0;for(let i=0;i<panels.length;i++){const percent=this.sizes[i]??0,constraint=constraintResolution.usePanelConstraints?this.panelConstraints[i]:void 0;if(this.hasClampConstraint(constraint)){const bounds=constraintResolution.bounds[i],clamped=bounds?Math.min(Math.max(percent,bounds.min),bounds.max):percent;clamped<percent&&(freedPercent+=percent-clamped)}else growableIndexes.push(i),growableTotal+=percent}if(freedPercent>0&&growableTotal>0)for(const i of growableIndexes)redistributedShare[i]=freedPercent*((this.sizes[i]??0)/growableTotal)}panels.forEach((panel,i)=>{const snapshot=this.panelOwnership.get(panel);if(!snapshot)return;const percent=this.sizes[i]??0,constraint=constraintResolution.usePanelConstraints?this.panelConstraints[i]:void 0;if(this.applyOwnedPanelStyle(panel,snapshot,"inline-size",snapshot.styles.get("inline-size")),this.applyOwnedPanelHidden(panel,snapshot,snapshot.hidden),collapsingIndex===i&&this.collapseState==="rail")this.applyOwnedPanelStyleValue(panel,snapshot,"flex",`0 0 ${this.railWidth}`);else if(collapsingIndex===i&&this.collapseState==="floating"&&!this.open)this.applyOwnedPanelStyleValue(panel,snapshot,"flex","none"),this.applyOwnedPanelHidden(panel,snapshot,!0);else if(collapsingIndex===i&&this.collapseState==="floating")this.applyOwnedPanelStyleValue(panel,snapshot,"flex","none"),this.applyOwnedPanelStyleValue(panel,snapshot,"inline-size",`${percent}%`);else if(collapsingIndex!==-1&&i!==collapsingIndex)this.applyOwnedPanelStyleValue(panel,snapshot,"flex",this.hasClampConstraint(constraint)?`0 1 clamp(${this.minSideExpr(constraint)}, ${percent}%, ${this.maxSideExpr(constraint)})`:`${percent} 1 0%`);else{const adjustedPercent=percent+(redistributedShare[i]??0);this.applyOwnedPanelStyleValue(panel,snapshot,"flex",this.hasClampConstraint(constraint)?`0 1 clamp(${this.minSideExpr(constraint)}, ${percent}%, ${this.maxSideExpr(constraint)})`:`0 1 ${adjustedPercent}%`)}this.applyOwnedPanelStyleValue(panel,snapshot,"order",String(i*2)),collapsingIndex===i?this.applyOwnedPanelCollapseState(panel,snapshot,this.collapseState):this.applyOwnedPanelCollapseState(panel,snapshot,null)}),collapsingIndex!==-1?this.setAttribute("data-collapse-state",this.collapseState):this.removeAttribute("data-collapse-state"),this.justOpened&&(this.justOpened=!1,this.overlayHandle?.focusInitial())}render(){const dividers=[],bounds=this.resolveConstraintBounds(this.getContainerSize()).bounds;for(let i=0;i<this.panelCount-1;i++){const pairTotal=(this.sizes[i]??0)+(this.sizes[i+1]??0),a=bounds[i],b=bounds[i+1],valueMin=Math.max(a.min,pairTotal-b.max),valueMax=Math.max(valueMin,Math.min(a.max,pairTotal-b.min)),disabled=this.isDividerDisabled(i);dividers.push(html`<div
         part="divider"
         role="separator"
         aria-label=${this.dividerLabel?this.dividerLabel(i,this.panelCount):this.localize("resizeDivider",void 0,{a:getNumberFormat(this.effectiveLocale).format(i+1),b:getNumberFormat(this.effectiveLocale).format(i+2)})}

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,35 +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()) — geometry (position/inset/inline-size) for the
-     collapsing panel itself is set inline by updated(), same as the
-     pre-existing flex/order styling; 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 -- geometry
-     (position, the inset-* longhands, inline-size) is set inline by multi-split.class.ts's updated(),
-     matching how the ordinary flex/order styling is applied; only the
-     visual/stacking treatment lives here. 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);
   }
-  /* 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. */
+  :host([collapse="start"]) ::slotted([data-collapse-state="floating"]) {
+    inset-inline-start: 0;
+  }
+  :host([collapse="end"]) ::slotted([data-collapse-state="floating"]) {
+    inset-inline-end: 0;
+  }
   [part="backdrop"] {
     position: absolute;
     inset: 0;
@@ -208,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(

package/dist/components/layout/responsive-panel/responsive-panel.styles.js

@@ -5,10 +5,6 @@ import{css}from"lit";const styles=css`
     max-inline-size: 100%;
   }
 
-  /* [part="base"] is display:none whenever the panel isn't open, in both
-     presentations -- a docked (inline) panel can be toggled closed just like
-     an overlay one, it just doesn't need backdrop/focus-trap/scroll-lock
-     mechanics to do it. */
   [part='base'] {
     display: none;
     min-inline-size: 0;
@@ -23,8 +19,6 @@ import{css}from"lit";const styles=css`
     inset: 0;
     z-index: var(--lr-overlay-stack-index, var(--lr-layer-modal));
   }
-  /* Bottom-sheet anchors its panel to the block-end edge instead of
-     stretching it full-height like fullscreen does. */
   :host([variant='bottom-sheet'][open]) [part='base'].overlay {
     align-items: flex-end;
   }
@@ -45,18 +39,12 @@ import{css}from"lit";const styles=css`
     background: var(--lr-color-surface);
   }
 
-  /* Inline (docked) presentation: a normal panel in the page's layout flow,
-     bordered like a card so it reads as a distinct region. */
   [part='base']:not(.overlay) [part='panel'] {
     border: var(--lr-border-width-thin) solid var(--lr-color-border);
     border-radius: var(--lr-radius);
     overflow: auto;
   }
 
-  /* Overlay/fullscreen (default variant): the panel fills the entire
-     viewport edge-to-edge -- no backdrop is visible around it, but the
-     backdrop element still renders/still matters for the shared
-     Escape/backdrop-click dismissal wiring described on the class. */
   [part='base'].overlay [part='panel'] {
     inline-size: 100%;
     block-size: 100%;
@@ -65,16 +53,10 @@ import{css}from"lit";const styles=css`
     padding-block-end: var(--lr-safe-area-bottom);
     padding-inline-start: var(--lr-safe-area-inline-start);
     padding-inline-end: var(--lr-safe-area-inline-end);
-    /* Only the OVERLAY presentations repaint the panel: docked/inline is resting chrome in the
-       page's own flow and must keep the page surface, while an overlay sits over a scrim and in
-       dark mode would otherwise be the same near-black as the page behind it. The bottom-sheet
-       rule below narrows this same selector, so it inherits both declarations. */
     background: var(
       --lr-responsive-panel-overlay-panel-bg,
       var(--lr-color-surface-overlay)
     );
-    /* Modal layer, lower step: the panel is flush with every viewport edge (bottom-sheet with all
-       but one), so there is no free edge for a deeper shadow to read against. */
     box-shadow: var(
       --lr-responsive-panel-overlay-panel-shadow,
       var(--lr-shadow-l)
@@ -82,21 +64,12 @@ import{css}from"lit";const styles=css`
     overflow: auto;
   }
 
-  /* Overlay/bottom-sheet: a partial-height sheet, rounded only on the top
-     edge, that leaves the backdrop (and whatever page content sits behind
-     it) visible above it. */
   :host([variant='bottom-sheet']) [part='base'].overlay [part='panel'] {
     block-size: auto;
     max-block-size: var(--lr-responsive-panel-sheet-max-block-size, 85vh);
     border-start-start-radius: var(--lr-radius);
     border-start-end-radius: var(--lr-radius);
   }
-  /* Dynamic-viewport refinement of the clamp above, so a mobile browser's
-     collapsing address bar doesn't leave the sheet taller than the visible
-     viewport. Guarded by @supports rather than written as a second plain
-     declaration: once the value comes from a custom property, an unsupported
-     dvh unit fails at computed-value time and resets max-block-size to none
-     instead of falling back to the preceding vh declaration. */
   @supports (max-block-size: 1dvh) {
     :host([variant='bottom-sheet']) [part='base'].overlay [part='panel'] {
       max-block-size: var(--lr-responsive-panel-sheet-max-block-size, 85dvh);

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

@@ -3,11 +3,6 @@ import{css}from"lit";const styles=css`
     display: block;
     min-inline-size: 0;
     max-inline-size: 100%;
-    /* --lr-scroller-shadow-color/-size are the Lyra-prefixed aliases of the upstream
-       --shadow-color/--shadow-size cssprops (see the class JSDoc) -- resolved once here so every
-       edge-shadow rule below reads one effective value instead of repeating the full three-level
-       fallback chain at each use site, same indirection lr-split-panel/lr-dock-panel already use
-       for their own component-scoped tokens. */
     --_lr-scroller-effective-shadow-color: var(
       --lr-scroller-shadow-color,
       var(--shadow-color, var(--lr-color-surface))
@@ -113,11 +108,6 @@ import{css}from"lit";const styles=css`
   }
 
   [part~="control"] {
-    /* Keep the glyph-sized control compact by default (--lr-scroller-control-size
-       is a consumer-tunable custom property, not this floor) while still giving the
-       interactive box the shared minimum target size -- same "small glyph, padded hit
-       box" pattern as lr-code-block's/lr-json-viewer's [part='toggle']. Covers
-       both previous and next (the shared part on both, per csspart doc above). */
     display: inline-grid;
     place-items: center;
     inline-size: var(--lr-scroller-control-size, var(--lr-size-2rem));
@@ -136,8 +126,6 @@ import{css}from"lit";const styles=css`
     background: var(--lr-color-brand-quiet);
   }
 
-  /* Held down, the control scrolls repeatedly, so the press is the long-lived state here rather
-     than an instant -- the deeper mix of the same brand-quiet fill marks it for its duration. */
   [part~="control"]:active:not(:disabled) {
     background: color-mix(
       in oklab,
@@ -146,19 +134,11 @@ import{css}from"lit";const styles=css`
     );
   }
 
-  /* no-pressed-state: the viewport is a scroll port, not a target -- pressing it activates
-     nothing, and :active matches the ancestors of whatever was pressed, so clicking any slotted
-     item would flash this outline around the whole strip. */
   [part="viewport"]:hover {
     outline: var(--lr-border-width-thin) solid var(--lr-color-border);
     outline-offset: var(--lr-focus-ring-offset);
   }
 
-  /* previous/next are the same rendered button as [part='control'] above (each
-     button's part attribute carries both tokens, e.g. part="control previous", so
-     this needs the token-matching ~= form, not =, to actually hit it) -- this
-     restates the identical floor directly against each individual part name too,
-     since a shadow-part guard lookup is per-name, not per-rendered-element. */
   [part~="previous"],
   [part~="next"] {
     min-inline-size: var(--lr-icon-button-size);

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

@@ -98,7 +98,13 @@ export declare class LyraSegmented extends LyraElement<LyraSegmentedEventMap> {
     size: LyraSize;
     private selectedItem?;
     private rehomeSegmentFocus;
-    constructor();
+    /** Gates the [part="base"] edge fade on the track genuinely overflowing, with one-sided/RTL-aware
+     *  logical-edge state -- see --lr-scroll-fade-size and segmented.styles.ts. Stored (rather than a
+     *  bare statement-expression call) so `updated()` can register each segment on the controller's
+     *  own `ResizeObserver` via `observeExtra()` below -- a segment's own intrinsic content (a longer
+     *  localized label, an icon loading in) can grow scrollWidth without [part="base"]'s own border
+     *  box changing at all, which the plain per-track observation alone cannot see. */
+    private scrollOverflow;
     private select;
     private segmentButtonAt;
     private focusItem;

package/dist/components/layout/segmented/segmented.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{repeat}from"lit/directives/repeat.js";import{LyraElement}from"../../../internal/lyra-element.js";import{sizes}from"../../../internal/sizes.styles.js";import{isRtl}from"../../../internal/rtl.js";import{prefersReducedMotion}from"../../../internal/motion.js";import{observeScrollOverflow}from"../../../internal/scroll-overflow.js";import{hostAriaLabel}from"../../../internal/a11y.js";import{styles}from"./segmented.styles.js";import{activeElementIn}from"../../../internal/active-element.js";const MAX_SEGMENTED_ITEMS=256;function snapshotSegmentedItems(value){try{if(!Array.isArray(value))return Object.freeze([])}catch{return Object.freeze([])}const seenValues=new Set,normalized=[];let length=0;try{length=Math.min(value.length,MAX_SEGMENTED_ITEMS)}catch{return Object.freeze(normalized)}for(let index=0;index<length;index+=1)try{const candidate=value[index];if(!candidate||typeof candidate!="object")continue;const record=candidate,itemValue=record.value,label=record.label,disabled=record.disabled,icon=record.icon;if(typeof itemValue!="string"||itemValue.length===0||itemValue!==itemValue.trim()||seenValues.has(itemValue)||typeof label!="string"||disabled!==void 0&&typeof disabled!="boolean")continue;seenValues.add(itemValue),normalized.push(Object.freeze({value:itemValue,label,...icon!==void 0?{icon}:{},...disabled!==void 0?{disabled}:{}}))}catch{}return Object.freeze(normalized)}class LyraSegmented extends LyraElement{static{this.styles=[LyraElement.styles,sizes,styles]}get items(){return this.effectiveItems}set items(value){const previous=this.effectiveItems;this.effectiveItems=snapshotSegmentedItems(value),this.requestUpdate("items",previous)}constructor(){super(),this.effectiveItems=Object.freeze([]),this.value="",this.label="",this.size="m",this.rehomeSegmentFocus=!1,this.onKeyDown=e=>{const navigable=this.items.map((item,index)=>({item,index})).filter(({item})=>!item.disabled);if(navigable.length===0)return;const focusedIndex=this.keyboardOriginIndex(e),selectedIndex=this.items.indexOf(this.selectedItem),originIndex=focusedIndex>=0?focusedIndex:selectedIndex,currentIndex=selectedIndex<0&&this.segmentButtonAt(originIndex)?.tabIndex===0?-1:navigable.findIndex(({index})=>index===originIndex),rtl=isRtl(this),forwardKey=rtl?"ArrowLeft":"ArrowRight",backwardKey=rtl?"ArrowRight":"ArrowLeft";let targetIndex;switch(e.key){case forwardKey:targetIndex=currentIndex<0?0:(currentIndex+1)%navigable.length;break;case backwardKey:targetIndex=currentIndex<0?navigable.length-1:(currentIndex-1+navigable.length)%navigable.length;break;case"Home":targetIndex=0;break;case"End":targetIndex=navigable.length-1;break;default:return}e.preventDefault();const target=navigable[targetIndex];this.select(target.item),this.focusItem(target.index)},observeScrollOverflow(this,()=>this.renderRoot.querySelector('[part="base"]'))}select(item){if(item.disabled||item===this.selectedItem)return;const valueChanged=item.value!==this.value;this.selectedItem=item,valueChanged&&(this.value=item.value,this.emit("lr-change",{value:item.value}))}segmentButtonAt(index){return this.renderRoot.querySelector(`[part="segment"][data-index="${index}"]`)}focusItem(index){this.segmentButtonAt(index)?.focus()}scrollToValue(value){const index=this.items.findIndex(item=>item.value===value);this.segmentButtonAt(index)?.scrollIntoView({block:"nearest",inline:"nearest",behavior:prefersReducedMotion(this.ownerDocument.defaultView)?"auto":"smooth"})}updated(changed){super.updated(changed),this.rehomeSegmentFocus&&(this.rehomeSegmentFocus=!1,this.renderRoot.querySelector('[part="segment"][tabindex="0"]')?.focus()),changed.has("value")&&changed.get("value")!==void 0&&this.value&&this.scrollToValue(this.value)}willUpdate(changed){super.willUpdate(changed),changed.has("items")&&activeElementIn(this.renderRoot)?.getAttribute("part")==="segment"&&(this.rehomeSegmentFocus=!0),(changed.has("value")||changed.has("items")&&(!this.selectedItem||!this.items.includes(this.selectedItem)||this.selectedItem.value!==this.value||this.selectedItem.disabled))&&(this.selectedItem=this.items.find(item=>item.value===this.value&&!item.disabled))}keyboardOriginIndex(event){const fromEvent=event.composedPath().find(candidate2=>candidate2.nodeType===1&&candidate2.getAttribute?.("part")==="segment"&&candidate2.getRootNode()===this.renderRoot),focused=activeElementIn(this.renderRoot),candidate=fromEvent??(focused?.getAttribute("part")==="segment"?focused:void 0),index=Number(candidate?.dataset.index);return Number.isInteger(index)&&index>=0&&index<this.items.length?index:-1}render(){const ariaLabel=hostAriaLabel(this)??(this.label||nothing),selectedIndex=this.items.indexOf(this.selectedItem),fallbackSelectedIndex=selectedIndex>=0?selectedIndex:this.items.findIndex(item=>item.value===this.value&&!item.disabled),tabbableIndex=fallbackSelectedIndex!==-1?fallbackSelectedIndex:this.items.findIndex(item=>!item.disabled);return html`
+var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html,nothing}from"lit";import{property,state}from"lit/decorators.js";import{repeat}from"lit/directives/repeat.js";import{LyraElement}from"../../../internal/lyra-element.js";import{sizes}from"../../../internal/sizes.styles.js";import{isRtl}from"../../../internal/rtl.js";import{prefersReducedMotion}from"../../../internal/motion.js";import{observeScrollOverflow}from"../../../internal/scroll-overflow.js";import{hostAriaLabel}from"../../../internal/a11y.js";import{styles}from"./segmented.styles.js";import{activeElementIn}from"../../../internal/active-element.js";const MAX_SEGMENTED_ITEMS=256;function snapshotSegmentedItems(value){try{if(!Array.isArray(value))return Object.freeze([])}catch{return Object.freeze([])}const seenValues=new Set,normalized=[];let length=0;try{length=Math.min(value.length,MAX_SEGMENTED_ITEMS)}catch{return Object.freeze(normalized)}for(let index=0;index<length;index+=1)try{const candidate=value[index];if(!candidate||typeof candidate!="object")continue;const record=candidate,itemValue=record.value,label=record.label,disabled=record.disabled,icon=record.icon;if(typeof itemValue!="string"||itemValue.length===0||itemValue!==itemValue.trim()||seenValues.has(itemValue)||typeof label!="string"||disabled!==void 0&&typeof disabled!="boolean")continue;seenValues.add(itemValue),normalized.push(Object.freeze({value:itemValue,label,...icon!==void 0?{icon}:{},...disabled!==void 0?{disabled}:{}}))}catch{}return Object.freeze(normalized)}class LyraSegmented extends LyraElement{constructor(){super(...arguments),this.effectiveItems=Object.freeze([]),this.value="",this.label="",this.size="m",this.rehomeSegmentFocus=!1,this.scrollOverflow=observeScrollOverflow(this,()=>this.renderRoot.querySelector('[part="base"]')),this.onKeyDown=e=>{const navigable=this.items.map((item,index)=>({item,index})).filter(({item})=>!item.disabled);if(navigable.length===0)return;const focusedIndex=this.keyboardOriginIndex(e),selectedIndex=this.items.indexOf(this.selectedItem),originIndex=focusedIndex>=0?focusedIndex:selectedIndex,currentIndex=selectedIndex<0&&this.segmentButtonAt(originIndex)?.tabIndex===0?-1:navigable.findIndex(({index})=>index===originIndex),rtl=isRtl(this),forwardKey=rtl?"ArrowLeft":"ArrowRight",backwardKey=rtl?"ArrowRight":"ArrowLeft";let targetIndex;switch(e.key){case forwardKey:targetIndex=currentIndex<0?0:(currentIndex+1)%navigable.length;break;case backwardKey:targetIndex=currentIndex<0?navigable.length-1:(currentIndex-1+navigable.length)%navigable.length;break;case"Home":targetIndex=0;break;case"End":targetIndex=navigable.length-1;break;default:return}e.preventDefault();const target=navigable[targetIndex];this.select(target.item),this.focusItem(target.index)}}static{this.styles=[LyraElement.styles,sizes,styles]}get items(){return this.effectiveItems}set items(value){const previous=this.effectiveItems;this.effectiveItems=snapshotSegmentedItems(value),this.requestUpdate("items",previous)}select(item){if(item.disabled||item===this.selectedItem)return;const valueChanged=item.value!==this.value;this.selectedItem=item,valueChanged&&(this.value=item.value,this.emit("lr-change",{value:item.value}))}segmentButtonAt(index){return this.renderRoot.querySelector(`[part="segment"][data-index="${index}"]`)}focusItem(index){this.segmentButtonAt(index)?.focus()}scrollToValue(value){const index=this.items.findIndex(item=>item.value===value);this.segmentButtonAt(index)?.scrollIntoView({block:"nearest",inline:"nearest",behavior:prefersReducedMotion(this.ownerDocument.defaultView)?"auto":"smooth"})}updated(changed){super.updated(changed),this.scrollOverflow.observeExtra(this.renderRoot.querySelectorAll('[part="segment"]')),this.rehomeSegmentFocus&&(this.rehomeSegmentFocus=!1,this.renderRoot.querySelector('[part="segment"][tabindex="0"]')?.focus()),changed.has("value")&&changed.get("value")!==void 0&&this.value&&this.scrollToValue(this.value)}willUpdate(changed){super.willUpdate(changed),changed.has("items")&&activeElementIn(this.renderRoot)?.getAttribute("part")==="segment"&&(this.rehomeSegmentFocus=!0),(changed.has("value")||changed.has("items")&&(!this.selectedItem||!this.items.includes(this.selectedItem)||this.selectedItem.value!==this.value||this.selectedItem.disabled))&&(this.selectedItem=this.items.find(item=>item.value===this.value&&!item.disabled))}keyboardOriginIndex(event){const fromEvent=event.composedPath().find(candidate2=>candidate2.nodeType===1&&candidate2.getAttribute?.("part")==="segment"&&candidate2.getRootNode()===this.renderRoot),focused=activeElementIn(this.renderRoot),candidate=fromEvent??(focused?.getAttribute("part")==="segment"?focused:void 0),index=Number(candidate?.dataset.index);return Number.isInteger(index)&&index>=0&&index<this.items.length?index:-1}render(){const ariaLabel=hostAriaLabel(this)??(this.label||nothing),selectedIndex=this.items.indexOf(this.selectedItem),fallbackSelectedIndex=selectedIndex>=0?selectedIndex:this.items.findIndex(item=>item.value===this.value&&!item.disabled),tabbableIndex=fallbackSelectedIndex!==-1?fallbackSelectedIndex:this.items.findIndex(item=>!item.disabled);return html`
       <div
         part="base"
         role="radiogroup"