@aceshooting/lyra-ui 6.2.0 → 7.0.0

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

@@ -4,17 +4,17 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (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, query } from 'lit/decorators.js';
-import { LyraElement } from '../../../internal/lyra-element.js';
-import { activateOverlay } from '../../../internal/overlay-manager.js';
-import { lockScroll } from '../../../internal/scroll-lock.js';
-import { isRtl } from '../../../internal/rtl.js';
-import { finiteRange } from '../../../internal/numbers.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 './split.styles.js';
+import { html, nothing } from "lit";
+import { property, state, query } from "lit/decorators.js";
+import { LyraElement } from "../../../internal/lyra-element.js";
+import { activateOverlay, } from "../../../internal/overlay-manager.js";
+import { lockScroll } from "../../../internal/scroll-lock.js";
+import { isRtl } from "../../../internal/rtl.js";
+import { finiteRange } from "../../../internal/numbers.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 "./split.styles.js";
 const KEYBOARD_STEP = 2;
 // Sentinel fallbacks so a one-sided constraint (only `minPx` or only
 // `maxPx`) can still be expressed as a 3-argument CSS `clamp()` in the
@@ -94,11 +94,13 @@ export class LyraSplit extends LyraElement {
          *  assignments never overwrite live resize state. Each entry is either a plain number (percent of
          *  the container, matching today's exact strict behavior) or a CSS length string (`'200px'`,
          *  `'20%'`, `'3rem'`) resolved against the measured container before percent-space validation --
-         *  see `resolveDefaultSizes()`. A pure-number array is validated unchanged (an array that does not
-         *  sum to ~100 is still rejected). */
+         *  see `resolveDefaultSizes()`. Initialization runs on the first update (not synchronously on
+         *  connection), so same-turn framework property bindings and `storageKey` persistence participate
+         *  before the layout becomes live. A pure-number array is validated unchanged (an array that does
+         *  not sum to ~100 is still rejected). */
         this.defaultSizes = [];
         this.min = 10;
-        this.orientation = 'horizontal';
+        this.orientation = "horizontal";
         /** Which box `orientationBreakpoint` measures. `'container'` (the default) observes this
          *  component's own `[part="base"]` inline size via `ResizeObserver`, comparing strictly `<`.
          *  `'viewport'` instead evaluates `matchMedia('(max-width: <breakpoint>)')`, which is inclusive
@@ -110,9 +112,9 @@ export class LyraSplit extends LyraElement {
          *  the transition, so no self-measured threshold can express it. `'viewport'` also lets the
          *  browser resolve a `rem` breakpoint with real `@media` semantics, keeping it in step with such
          *  a rule across browser zoom and user font-size preferences. */
-        this.orientationBreakpointBasis = 'container';
+        this.orientationBreakpointBasis = "container";
         /** Layout/resize axis used below `orientationBreakpoint`. */
-        this.narrowOrientation = 'vertical';
+        this.narrowOrientation = "vertical";
         /** Optional fixed-pixel min/max per panel, index-aligned with `sizes`. A
          *  `null`/missing entry leaves that panel purely percent-based (the
          *  existing `min`-only behavior). `sizes`, the `lr-resize` payload, and
@@ -127,9 +129,9 @@ export class LyraSplit extends LyraElement {
          *  delta sign mirrors). Default `'none'`: none of the collapse behavior
          *  below applies, and rendering/behavior is identical to before this
          *  property existed. */
-        this.collapse = 'none';
+        this.collapse = "none";
         /** Fixed CSS length the collapsing pane clamps to in the `'rail'` state. */
-        this.railWidth = '3.5rem';
+        this.railWidth = "3.5rem";
         /** Width below which the collapsing pane switches from its normal percent width to the fixed
          *  `railWidth` (`'rail'` state). Must stay above `floatBreakpoint` — an inverted pair is
          *  sanitized by raising this one to match, which collapses the `'rail'` band away rather than
@@ -176,7 +178,7 @@ export class LyraSplit extends LyraElement {
          *  no `ResizeObserver` round-trip — and the initial state is not announced as a transition.
          *
          *  Default: `'container'`. */
-        this.collapseBreakpointBasis = 'container';
+        this.collapseBreakpointBasis = "container";
         /** Whether the `'floating'` collapse state's drawer is shown. Only
          *  meaningful while `collapseState` is `'floating'` — the value is
          *  preserved (not reset) while another state is active, but no drawer
@@ -186,7 +188,8 @@ export class LyraSplit extends LyraElement {
          *  — see the class doc. */
         this.open = false;
         this.panelCount = 0;
-        this._collapseState = 'wide';
+        this.sizesReconciledForMembership = false;
+        this._collapseState = "wide";
         // Whether ResizeObserver-driven measurement is currently ignored because a
         // consumer forced a specific collapseState -- see the accessor doc.
         this._forced = false;
@@ -206,10 +209,10 @@ export class LyraSplit extends LyraElement {
         // lr-split-authored styles cleared instead of carrying them around stale
         // forever.
         this.stylizedPanels = new Set();
-        this.constraintIssueKey = '';
+        this.constraintIssueKey = "";
         this.initializedSizes = false;
         this.measuredInlineSize = Number.POSITIVE_INFINITY;
-        this._effectiveOrientation = 'horizontal';
+        this._effectiveOrientation = "horizontal";
         /** Owns breakpoint resolution, basis selection, and the viewport `MediaQueryList` lifecycle
          *  (including teardown on disconnect) — see `OrientationBreakpointController`. */
         this.orientationBreakpoints = new OrientationBreakpointController(this, () => this.updateEffectiveOrientation(this.measuredInlineSize, true));
@@ -218,7 +221,11 @@ export class LyraSplit extends LyraElement {
          *  be two independent single-threshold controllers. */
         this.collapseBreakpoints = new CollapseBreakpointController(this, () => this.updateCollapseState(this.measuredInlineSize, true));
         this.onSlotChange = () => {
-            this.panelCount = this.children.length;
+            const nextPanelCount = this.children.length;
+            if (nextPanelCount === this.panelCount)
+                return;
+            this.panelCount = nextPanelCount;
+            this.sizesReconciledForMembership = true;
             this.ensureSizes();
         };
         this.onBackdropClick = () => {
@@ -236,32 +243,34 @@ export class LyraSplit extends LyraElement {
             // so baseEl is guaranteed to be already rendered here.
             this.drags.set(e.pointerId, {
                 index,
-                startPos: this.effectiveOrientation === 'vertical' ? e.clientY : e.clientX,
+                startPos: this.effectiveOrientation === "vertical" ? e.clientY : e.clientX,
                 base: this.baseEl,
                 appliedDelta: 0,
             });
             e.target.setPointerCapture(e.pointerId);
-            window.addEventListener('pointermove', this.onPointerMove);
-            window.addEventListener('pointerup', this.onPointerUp);
+            window.addEventListener("pointermove", this.onPointerMove);
+            window.addEventListener("pointerup", this.onPointerUp);
             // A drag can end without a pointerup: a system gesture / palm rejection
             // can fire `pointercancel`, and losing capture (e.g. element removed)
             // fires `lostpointercapture` — both need the same teardown as pointerup
             // or the divider keeps "resizing" in response to unrelated movement.
-            window.addEventListener('pointercancel', this.onPointerUp);
-            window.addEventListener('lostpointercapture', this.onPointerUp);
+            window.addEventListener("pointercancel", this.onPointerUp);
+            window.addEventListener("lostpointercapture", this.onPointerUp);
         };
         this.onPointerMove = (e) => {
             const drag = this.drags.get(e.pointerId);
             if (!drag)
                 return;
-            const total = this.effectiveOrientation === 'vertical' ? drag.base.clientHeight : drag.base.clientWidth;
-            const pos = this.effectiveOrientation === 'vertical' ? e.clientY : e.clientX;
+            const total = this.effectiveOrientation === "vertical"
+                ? drag.base.clientHeight
+                : drag.base.clientWidth;
+            const pos = this.effectiveOrientation === "vertical" ? e.clientY : e.clientX;
             let cumulativeDelta = ((pos - drag.startPos) / total) * 100;
             // Panels are ordered along the inline axis via CSS `order`, so under RTL
             // `flex-direction: row` already renders panel[i] to the *right* of
             // panel[i+1] — a physically-rightward drag has to shrink index instead
             // of growing it to keep matching the visible panel under the pointer.
-            if (this.effectiveOrientation === 'horizontal' && isRtl(this))
+            if (this.effectiveOrientation === "horizontal" && isRtl(this))
                 cumulativeDelta = -cumulativeDelta;
             // Clamp against the *current* live sizes, not this pointer's own drag-start
             // snapshot -- two adjacent dividers dragged concurrently share one panel
@@ -302,7 +311,7 @@ export class LyraSplit extends LyraElement {
             next[drag.index] = pairedA;
             next[drag.index + 1] = pairedB;
             this.sizes = next;
-            this.emit('lr-resize', { sizes: [...this.sizes] });
+            this.emit("lr-resize", { sizes: [...this.sizes] });
         };
         this.onPointerUp = (e) => {
             if (!this.drags.has(e.pointerId))
@@ -310,10 +319,10 @@ export class LyraSplit extends LyraElement {
             this.drags.delete(e.pointerId);
             this.persist();
             if (this.drags.size === 0) {
-                window.removeEventListener('pointermove', this.onPointerMove);
-                window.removeEventListener('pointerup', this.onPointerUp);
-                window.removeEventListener('pointercancel', this.onPointerUp);
-                window.removeEventListener('lostpointercapture', this.onPointerUp);
+                window.removeEventListener("pointermove", this.onPointerMove);
+                window.removeEventListener("pointerup", this.onPointerUp);
+                window.removeEventListener("pointercancel", this.onPointerUp);
+                window.removeEventListener("lostpointercapture", this.onPointerUp);
             }
         };
         this.onDividerKeyDown = (e, index) => {
@@ -321,9 +330,17 @@ export class LyraSplit extends LyraElement {
             if (this.isDividerDisabled(index))
                 return;
             // Mirror the same swap as onPointerMove for horizontal+RTL.
-            const rtl = this.effectiveOrientation === 'horizontal' && isRtl(this);
-            const forwardKey = this.effectiveOrientation === 'vertical' ? 'ArrowDown' : rtl ? 'ArrowLeft' : 'ArrowRight';
-            const backwardKey = this.effectiveOrientation === 'vertical' ? 'ArrowUp' : rtl ? 'ArrowRight' : 'ArrowLeft';
+            const rtl = this.effectiveOrientation === "horizontal" && isRtl(this);
+            const forwardKey = this.effectiveOrientation === "vertical"
+                ? "ArrowDown"
+                : rtl
+                    ? "ArrowLeft"
+                    : "ArrowRight";
+            const backwardKey = this.effectiveOrientation === "vertical"
+                ? "ArrowUp"
+                : rtl
+                    ? "ArrowRight"
+                    : "ArrowLeft";
             if (e.key === forwardKey) {
                 e.preventDefault();
                 this.applyDelta(index, KEYBOARD_STEP, true);
@@ -346,7 +363,11 @@ export class LyraSplit extends LyraElement {
     // form already reads fine) so the reflected attribute stays kebab-case,
     // matching this file's other attribute-reflected properties.
     static { this.properties = {
-        collapseState: { reflect: true, attribute: 'collapse-state', noAccessor: true },
+        collapseState: {
+            reflect: true,
+            attribute: "collapse-state",
+            noAccessor: true,
+        },
     }; }
     connectedCallback() {
         super.connectedCallback();
@@ -363,13 +384,12 @@ export class LyraSplit extends LyraElement {
         if (hostWidth > 0)
             this.measuredInlineSize = hostWidth;
         this.panelCount = this.children.length;
-        if (!this.initializedSizes) {
-            this.initializeSizes();
-            this.initializedSizes = true;
-        }
-        else {
+        // Initialization waits for the first willUpdate() so property bindings committed later in
+        // this same connection turn (notably defaultSizes/storageKey) participate in the
+        // initialization-only precedence chain. Reconnects keep the already-live layout and only
+        // reconcile it with the current panel count.
+        if (this.initializedSizes)
             this.ensureSizes();
-        }
         // No-op on first mount (`baseEl` doesn't exist until the first render —
         // `firstUpdated()` below arms it then) but does the real work on a
         // reconnect, whose shadow DOM content survives disconnect. Mirrors
@@ -399,10 +419,10 @@ export class LyraSplit extends LyraElement {
         super.disconnectedCallback();
         // Clean up any remaining event listeners from an in-flight drag.
         this.drags.clear();
-        window.removeEventListener('pointermove', this.onPointerMove);
-        window.removeEventListener('pointerup', this.onPointerUp);
-        window.removeEventListener('pointercancel', this.onPointerUp);
-        window.removeEventListener('lostpointercapture', this.onPointerUp);
+        window.removeEventListener("pointermove", this.onPointerMove);
+        window.removeEventListener("pointerup", this.onPointerUp);
+        window.removeEventListener("pointercancel", this.onPointerUp);
+        window.removeEventListener("lostpointercapture", this.onPointerUp);
         this.collapseResizeObserver?.disconnect();
         this.releaseScrollLock?.();
         this.releaseScrollLock = undefined;
@@ -428,15 +448,36 @@ export class LyraSplit extends LyraElement {
      *  documented exception instead (mirrors virtual-list.ts's
      *  `attachContainerListeners()`). */
     willUpdate(changed) {
-        if (changed.has('sizes') || this.sizes.length === 0)
+        if (!this.initializedSizes) {
+            this.initializeSizes();
+            this.initializedSizes = true;
+        }
+        else if (changed.has("sizes")) {
+            const previous = changed.get("sizes");
+            if (this.sizesReconciledForMembership) {
+                this.sizesReconciledForMembership = false;
+            }
+            else if (!this.validLiveSizes(this.sizes)) {
+                if (Array.isArray(previous) && this.validLiveSizes(previous)) {
+                    this.sizes = [...previous];
+                }
+                else {
+                    this.sizes = [];
+                    this.ensureSizes();
+                }
+            }
+        }
+        else if (this.sizes.length === 0) {
             this.ensureSizes();
-        if (changed.has('orientationBreakpoint') || changed.has('orientationBreakpointBasis')) {
+        }
+        if (changed.has("orientationBreakpoint") ||
+            changed.has("orientationBreakpointBasis")) {
             this.orientationBreakpoints.configure(this.orientationBreakpoint, this.orientationBreakpointBasis);
         }
-        if (changed.has('orientation') ||
-            changed.has('narrowOrientation') ||
-            changed.has('orientationBreakpoint') ||
-            changed.has('orientationBreakpointBasis')) {
+        if (changed.has("orientation") ||
+            changed.has("narrowOrientation") ||
+            changed.has("orientationBreakpoint") ||
+            changed.has("orientationBreakpointBasis")) {
             // Under 'viewport' basis, `configure()` just above (re-)armed `matchMedia` synchronously,
             // so `isBelow()` here already reflects a live, authoritative read -- exactly the "fresh
             // measurement" condition that earns `shouldEmit: true` elsewhere (see this method's own
@@ -447,15 +488,15 @@ export class LyraSplit extends LyraElement {
             // `hasUpdated` additionally excludes the first render: Lit's initial `changed` map lists
             // every set property, so a viewport breakpoint that already matches at mount would
             // otherwise announce a transition that never happened. The initial axis is not a change.
-            this.updateEffectiveOrientation(this.measuredInlineSize, this.hasUpdated && this.orientationBreakpointBasis === 'viewport');
+            this.updateEffectiveOrientation(this.measuredInlineSize, this.hasUpdated && this.orientationBreakpointBasis === "viewport");
         }
-        if (changed.has('collapse') && this.collapse === 'none') {
+        if (changed.has("collapse") && this.collapse === "none") {
             this.resetCollapseState();
         }
-        if (changed.has('collapse') ||
-            changed.has('railBreakpoint') ||
-            changed.has('floatBreakpoint') ||
-            changed.has('collapseBreakpointBasis')) {
+        if (changed.has("collapse") ||
+            changed.has("railBreakpoint") ||
+            changed.has("floatBreakpoint") ||
+            changed.has("collapseBreakpointBasis")) {
             this.collapseBreakpoints.configure(this.railBreakpoint, this.floatBreakpoint, this.collapseBreakpointBasis);
             // Classifying here, rather than waiting for the shared `ResizeObserver`'s first callback, is
             // what makes `data-collapse-state` correct on the *first paint* under viewport basis --
@@ -472,8 +513,8 @@ export class LyraSplit extends LyraElement {
             // happened. The initial state is not a change.
             this.updateCollapseState(this.measuredInlineSize, this.hasUpdated);
         }
-        if (changed.has('open') || changed.has('collapseState')) {
-            const next = this._collapseState === 'floating' && this.open;
+        if (changed.has("open") || changed.has("collapseState")) {
+            const next = this._collapseState === "floating" && this.open;
             if (next !== this.overlayActive) {
                 this.overlayActive = next;
                 if (next) {
@@ -496,7 +537,7 @@ export class LyraSplit extends LyraElement {
         return this._collapseState;
     }
     set collapseState(next) {
-        if (next === 'auto') {
+        if (next === "auto") {
             this._forced = false;
             this.updateCollapseState(this.currentMeasuredWidth());
             return;
@@ -526,7 +567,8 @@ export class LyraSplit extends LyraElement {
      *  width. Collapse's basis therefore changes only which values `classify()` consults, never
      *  whether the split measures itself. */
     get responsiveObservationEnabled() {
-        return this.collapse !== 'none' || this.orientationBreakpoints.containerObservationEnabled;
+        return (this.collapse !== "none" ||
+            this.orientationBreakpoints.containerObservationEnabled);
     }
     /** Classifies a measured inline size into the effective resize/layout axis and, only on an
      *  actual transition, applies it — mirrors `updateCollapseState()`'s shape. `shouldEmit` is
@@ -550,7 +592,9 @@ export class LyraSplit extends LyraElement {
         this._effectiveOrientation = next;
         this.requestUpdate();
         if (shouldEmit) {
-            this.emit('lr-split-orientation-change', { orientation: next });
+            this.emit("lr-split-orientation-change", {
+                orientation: next,
+            });
         }
     }
     /** The container width (px) `[part="base"]` is measured at right now --
@@ -568,11 +612,11 @@ export class LyraSplit extends LyraElement {
      *  off entirely), not a state transition a consumer forced or observed. */
     resetCollapseState() {
         this._forced = false;
-        if (this._collapseState === 'wide')
+        if (this._collapseState === "wide")
             return;
         const old = this._collapseState;
-        this._collapseState = 'wide';
-        this.requestUpdate('collapseState', old);
+        this._collapseState = "wide";
+        this.requestUpdate("collapseState", old);
     }
     /** Applies an actual `collapseState` transition (no-op if `next` matches
      *  the current value): updates the field, triggers Lit's reflect/re-render
@@ -589,14 +633,18 @@ export class LyraSplit extends LyraElement {
             return;
         const old = this._collapseState;
         this._collapseState = next;
-        this.requestUpdate('collapseState', old);
+        this.requestUpdate("collapseState", old);
         if (shouldEmit)
-            this.emit('lr-split-collapse-change', { state: next });
-        if (next !== 'floating' && this.open)
+            this.emit("lr-split-collapse-change", {
+                state: next,
+            });
+        if (next !== "floating" && this.open)
             this.open = false;
     }
     get storageFullKey() {
-        return this.storageKey ? `lr-split:${this.storageKey}:${this.panelCount}` : undefined;
+        return this.storageKey
+            ? `lr-split:${this.storageKey}:${this.panelCount}`
+            : undefined;
     }
     validInitialSizes(value) {
         if (!Array.isArray(value) || value.length !== this.panelCount)
@@ -605,6 +653,17 @@ export class LyraSplit extends LyraElement {
             return false;
         return Math.abs(value.reduce((sum, size) => sum + size, 0) - 100) < 0.01;
     }
+    /** Post-mount assignments use the feasible shared floor. A configured `min` can exceed the
+     * aggregate available space, in which case interaction deliberately falls back to
+     * `normalizedDefaultMin()` rather than freezing every divider. */
+    validLiveSizes(value) {
+        if (!Array.isArray(value) || value.length !== this.panelCount)
+            return false;
+        const floor = this.normalizedDefaultMin();
+        if (!value.every((size) => Number.isFinite(size) && size >= floor))
+            return false;
+        return Math.abs(value.reduce((sum, size) => sum + size, 0) - 100) < 0.01;
+    }
     /** Resolves `defaultSizes` to a percent-space array for `initializeSizes()`, or `null` when it is
      *  empty/unusable. Per D2: a **pure-number** array keeps today's exact strict behavior -- it is
      *  passed straight to `validInitialSizes()` with no normalization, so `[30, 60]` is still rejected.
@@ -614,21 +673,21 @@ export class LyraSplit extends LyraElement {
     resolveDefaultSizes() {
         if (this.defaultSizes.length === 0)
             return null;
-        const hasLengthString = this.defaultSizes.some((entry) => typeof entry === 'string');
+        const hasLengthString = this.defaultSizes.some((entry) => typeof entry === "string");
         if (!hasLengthString) {
             const numbers = this.defaultSizes;
             return this.validInitialSizes(numbers) ? [...numbers] : null;
         }
         // At least one CSS length string. `currentMeasuredWidth()` (baseEl) is 0 before the first render,
-        // which is when `initializeSizes()` runs from `connectedCallback()`; fall back to the host's own
-        // box -- [part="base"] is `inline-size: 100%` of the host, so they are equal (same stand-in
+        // which is when `initializeSizes()` runs from `willUpdate()`; fall back to the host's own box --
+        // [part="base"] is `inline-size: 100%` of the host, so they are equal (the same stand-in
         // `connectedCallback()` uses to seed `measuredInlineSize`).
         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 (typeof entry === "number") {
                 if (!Number.isFinite(entry))
                     return null;
                 resolvedPx.push((entry / 100) * containerSize); // a bare number is percent-of-container
@@ -704,7 +763,9 @@ export class LyraSplit extends LyraElement {
         }
         else {
             const kept = this.sizes.slice(0, this.panelCount);
-            const removedTotal = this.sizes.slice(this.panelCount).reduce((sum, s) => sum + s, 0);
+            const removedTotal = this.sizes
+                .slice(this.panelCount)
+                .reduce((sum, s) => sum + s, 0);
             const keptTotal = kept.reduce((sum, s) => sum + s, 0) || 1;
             this.sizes = kept.map((s) => s + (s / keptTotal) * removedTotal);
         }
@@ -715,7 +776,9 @@ export class LyraSplit extends LyraElement {
     getContainerSize() {
         if (!this.baseEl)
             return 0;
-        return this.effectiveOrientation === 'vertical' ? this.baseEl.clientHeight : this.baseEl.clientWidth;
+        return this.effectiveOrientation === "vertical"
+            ? this.baseEl.clientHeight
+            : this.baseEl.clientWidth;
     }
     /** The physical panel index `collapse: 'start' | 'end'` resolves to, or
      *  `-1` when collapse is off (`'none'`) or there are fewer than 2 panels
@@ -732,15 +795,15 @@ export class LyraSplit extends LyraElement {
      *  bug against this component's own RTL rendering, not a fix for one.
      */
     get collapsingIndex() {
-        if (this.collapse === 'none' || this.panelCount < 2)
+        if (this.collapse === "none" || this.panelCount < 2)
             return -1;
-        return this.collapse === 'start' ? 0 : this.panelCount - 1;
+        return this.collapse === "start" ? 0 : this.panelCount - 1;
     }
     /** Whether a pane is actually collapsed (rail or floating) right now —
      *  `false` whenever `collapse === 'none'`, since `collapseState` then
      *  never leaves its `'wide'` default. */
     get collapseActive() {
-        return this.collapsingIndex !== -1 && this.collapseState !== 'wide';
+        return this.collapsingIndex !== -1 && this.collapseState !== "wide";
     }
     /** Dragging/keyboard-resizing is disabled on the one divider immediately
      *  adjacent to the currently-collapsed pane (its other side has nothing
@@ -763,7 +826,7 @@ export class LyraSplit extends LyraElement {
      *  `shouldEmit` is false only for the very first render's viewport-basis classification, which
      *  establishes the starting state rather than transitioning to it — see `willUpdate()`. */
     updateCollapseState(width, shouldEmit = true) {
-        if (this.collapse === 'none')
+        if (this.collapse === "none")
             return;
         if (this._forced)
             return;
@@ -780,7 +843,9 @@ export class LyraSplit extends LyraElement {
         if (!this.collapseResizeObserver) {
             this.collapseResizeObserver = new ResizeObserver((entries) => {
                 const box = entries[0]?.contentBoxSize?.[0];
-                const width = box ? box.inlineSize : (this.baseEl?.getBoundingClientRect().width ?? 0);
+                const width = box
+                    ? box.inlineSize
+                    : this.baseEl?.getBoundingClientRect().width ?? 0;
                 this.measuredInlineSize = width;
                 this.updateCollapseState(width);
                 this.updateEffectiveOrientation(width, true);
@@ -828,7 +893,10 @@ export class LyraSplit extends LyraElement {
      *  exposing a divider whose minimum is greater than its maximum. */
     resolveConstraintBounds(containerSize) {
         const fallbackMin = this.normalizedDefaultMin();
-        const fallback = Array.from({ length: this.panelCount }, () => ({ min: fallbackMin, max: Infinity }));
+        const fallback = Array.from({ length: this.panelCount }, () => ({
+            min: fallbackMin,
+            max: Infinity,
+        }));
         if (this.panelCount <= 0)
             return { bounds: [], usePanelConstraints: true };
         const bounds = [];
@@ -843,35 +911,55 @@ export class LyraSplit extends LyraElement {
             let minSet = false;
             let maxSet = false;
             if (constraint) {
-                if (constraint.minPx != null && Number.isFinite(constraint.minPx) && constraint.minPx >= 0 && containerSize > 0) {
+                if (constraint.minPx != null &&
+                    Number.isFinite(constraint.minPx) &&
+                    constraint.minPx >= 0 &&
+                    containerSize > 0) {
                     min = (constraint.minPx / containerSize) * 100;
                     minSet = true;
                 }
-                if (constraint.minPercent != null && Number.isFinite(constraint.minPercent) && constraint.minPercent >= 0) {
+                if (constraint.minPercent != null &&
+                    Number.isFinite(constraint.minPercent) &&
+                    constraint.minPercent >= 0) {
                     // The stricter (larger) of a px-derived and a directly-specified percent minimum —
                     // px alone still simply overwrites the component-wide safeMin floor, matching the
                     // pre-existing minPx-only behavior.
-                    min = minSet ? Math.max(min, constraint.minPercent) : constraint.minPercent;
+                    min = minSet
+                        ? Math.max(min, constraint.minPercent)
+                        : constraint.minPercent;
                     minSet = true;
                 }
-                if (constraint.maxPx != null && Number.isFinite(constraint.maxPx) && constraint.maxPx >= 0 && containerSize > 0) {
+                if (constraint.maxPx != null &&
+                    Number.isFinite(constraint.maxPx) &&
+                    constraint.maxPx >= 0 &&
+                    containerSize > 0) {
                     max = (constraint.maxPx / containerSize) * 100;
                     maxSet = true;
                 }
-                if (constraint.maxPercent != null && Number.isFinite(constraint.maxPercent) && constraint.maxPercent >= 0) {
+                if (constraint.maxPercent != null &&
+                    Number.isFinite(constraint.maxPercent) &&
+                    constraint.maxPercent >= 0) {
                     // The stricter (smaller) of a px-derived and a directly-specified percent maximum.
-                    max = maxSet ? Math.min(max, constraint.maxPercent) : constraint.maxPercent;
+                    max = maxSet
+                        ? Math.min(max, constraint.maxPercent)
+                        : constraint.maxPercent;
                     maxSet = true;
                 }
-                if ((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';
+                if ((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";
                 }
             }
             if (min > max)
-                issueReason ??= 'minimum-exceeds-maximum';
+                issueReason ??= "minimum-exceeds-maximum";
             bounds.push({ min, max });
             minimumTotal += min;
             if (Number.isFinite(max))
@@ -880,9 +968,11 @@ export class LyraSplit extends LyraElement {
                 hasUnboundedMaximum = true;
         }
         if (issueReason == null && minimumTotal > 100 + 1e-9)
-            issueReason = 'minimum-total';
-        if (issueReason == null && !hasUnboundedMaximum && maximumTotal < 100 - 1e-9)
-            issueReason = 'maximum-total';
+            issueReason = "minimum-total";
+        if (issueReason == null &&
+            !hasUnboundedMaximum &&
+            maximumTotal < 100 - 1e-9)
+            issueReason = "maximum-total";
         if (issueReason == null)
             return { bounds, usePanelConstraints: true };
         return {
@@ -898,12 +988,19 @@ export class LyraSplit extends LyraElement {
         };
     }
     percentBounds(index, containerSize) {
-        return this.resolveConstraintBounds(containerSize).bounds[index] ?? { min: 0, max: Infinity };
+        return (this.resolveConstraintBounds(containerSize).bounds[index] ?? {
+            min: 0,
+            max: Infinity,
+        });
     }
     /** Whether a panel's constraint needs the clamp()-based flex-basis branch at all (as opposed to
      *  the plain bare-percent branch) — true whenever any px or percent bound is set. */
     hasClampConstraint(constraint) {
-        return !!constraint && (constraint.minPx != null || constraint.maxPx != null || constraint.minPercent != null || constraint.maxPercent != null);
+        return (!!constraint &&
+            (constraint.minPx != null ||
+                constraint.maxPx != null ||
+                constraint.minPercent != null ||
+                constraint.maxPercent != null));
     }
     /** Builds the min side of a constrained panel's CSS `clamp()` flex-basis. A single specified
      *  bound (either unit) is used bare, preserving the exact pre-existing px-only shape; combining
@@ -914,33 +1011,41 @@ export class LyraSplit extends LyraElement {
      *  overwrite-vs-combine split for the JS-side percent bounds). */
     minSideExpr(constraint) {
         const terms = [];
-        if (constraint?.minPx != null && Number.isFinite(constraint.minPx) && constraint.minPx >= 0) {
+        if (constraint?.minPx != null &&
+            Number.isFinite(constraint.minPx) &&
+            constraint.minPx >= 0) {
             terms.push(`${constraint.minPx}px`);
         }
-        if (constraint?.minPercent != null && Number.isFinite(constraint.minPercent) && constraint.minPercent >= 0) {
+        if (constraint?.minPercent != null &&
+            Number.isFinite(constraint.minPercent) &&
+            constraint.minPercent >= 0) {
             terms.push(`${constraint.minPercent}%`);
         }
         if (terms.length === 0)
             return `${NO_MIN_PX}px`;
         if (terms.length === 1)
             return terms[0]; // safe: exactly one term
-        return `max(${this.safeMin}%, ${terms.join(', ')})`;
+        return `max(${this.safeMin}%, ${terms.join(", ")})`;
     }
     /** The max-side mirror of `minSideExpr()` — uses CSS `min()` (stricter = smaller) when combining
      *  both unit types; no equivalent shared floor exists to fold in for the max side. */
     maxSideExpr(constraint) {
         const terms = [];
-        if (constraint?.maxPx != null && Number.isFinite(constraint.maxPx) && constraint.maxPx >= 0) {
+        if (constraint?.maxPx != null &&
+            Number.isFinite(constraint.maxPx) &&
+            constraint.maxPx >= 0) {
             terms.push(`${constraint.maxPx}px`);
         }
-        if (constraint?.maxPercent != null && Number.isFinite(constraint.maxPercent) && constraint.maxPercent >= 0) {
+        if (constraint?.maxPercent != null &&
+            Number.isFinite(constraint.maxPercent) &&
+            constraint.maxPercent >= 0) {
             terms.push(`${constraint.maxPercent}%`);
         }
         if (terms.length === 0)
             return `${NO_MAX_PX}px`;
         if (terms.length === 1)
             return terms[0]; // safe: exactly one term
-        return `min(${terms.join(', ')})`;
+        return `min(${terms.join(", ")})`;
     }
     clampPair(sizes, i, delta, containerSize = 0) {
         const next = [...sizes];
@@ -969,7 +1074,7 @@ export class LyraSplit extends LyraElement {
     }
     applyDelta(index, delta, commit) {
         this.sizes = this.clampPair(this.sizes, index, delta, this.getContainerSize());
-        this.emit('lr-resize', { sizes: [...this.sizes] });
+        this.emit("lr-resize", { sizes: [...this.sizes] });
         if (commit)
             this.persist();
     }
@@ -980,7 +1085,9 @@ export class LyraSplit extends LyraElement {
      *  inline styles in `updated()`. */
     get floatingPanelEl() {
         const index = this.collapsingIndex;
-        return index === -1 ? null : (this.children[index] ?? null);
+        return index === -1
+            ? null
+            : this.children[index] ?? null;
     }
     activateFloatingOverlay() {
         this.releaseScrollLock ??= lockScroll(this.ownerDocument);
@@ -998,9 +1105,9 @@ export class LyraSplit extends LyraElement {
         this.overlayHandle = undefined;
     }
     updated(changed) {
-        if (changed.has('collapse') ||
-            changed.has('orientationBreakpoint') ||
-            changed.has('orientationBreakpointBasis')) {
+        if (changed.has("collapse") ||
+            changed.has("orientationBreakpoint") ||
+            changed.has("orientationBreakpointBasis")) {
             this.syncCollapseObserver();
         }
         // Host-level marker for external CSS targeting of the live resize/layout axis (mirrors
@@ -1009,20 +1116,20 @@ export class LyraSplit extends LyraElement {
         // so a viewport-basis breakpoint still publishes the marker even though `resolved` is
         // meaningless there -- see OrientationBreakpointController's class doc.
         if (this.orientationBreakpoints.active) {
-            this.setAttribute('data-effective-orientation', this._effectiveOrientation);
+            this.setAttribute("data-effective-orientation", this._effectiveOrientation);
         }
         else {
-            this.removeAttribute('data-effective-orientation');
+            this.removeAttribute("data-effective-orientation");
         }
         const constraintResolution = this.resolveConstraintBounds(this.getContainerSize());
         const issue = constraintResolution.issue;
         const issueKey = issue
-            ? `${issue.reason}:${issue.panelCount}:${issue.minimumTotal}:${issue.maximumTotal ?? 'unbounded'}`
-            : '';
+            ? `${issue.reason}:${issue.panelCount}:${issue.minimumTotal}:${issue.maximumTotal ?? "unbounded"}`
+            : "";
         if (issueKey !== this.constraintIssueKey) {
             this.constraintIssueKey = issueKey;
             if (issue)
-                this.emit('lr-split-constraints-invalid', issue);
+                this.emit("lr-split-constraints-invalid", issue);
         }
         const panels = [...this.children];
         const current = new Set(panels);
@@ -1033,15 +1140,15 @@ export class LyraSplit extends LyraElement {
         // re-slotted into another split/container).
         for (const stale of this.stylizedPanels) {
             if (!current.has(stale)) {
-                stale.style.removeProperty('flex');
-                stale.style.removeProperty('order');
-                stale.style.removeProperty('position');
-                stale.style.removeProperty('inset-block');
-                stale.style.removeProperty('inset-inline-start');
-                stale.style.removeProperty('inset-inline-end');
-                stale.style.removeProperty('inline-size');
+                stale.style.removeProperty("flex");
+                stale.style.removeProperty("order");
+                stale.style.removeProperty("position");
+                stale.style.removeProperty("inset-block");
+                stale.style.removeProperty("inset-inline-start");
+                stale.style.removeProperty("inset-inline-end");
+                stale.style.removeProperty("inline-size");
                 stale.hidden = false;
-                delete stale.dataset['collapseState'];
+                delete stale.dataset["collapseState"];
             }
         }
         // Resolved once per pass rather than per panel: which physical index (if
@@ -1069,10 +1176,14 @@ export class LyraSplit extends LyraElement {
             let growableTotal = 0;
             for (let i = 0; i < panels.length; i++) {
                 const percent = this.sizes[i] ?? 0;
-                const constraint = constraintResolution.usePanelConstraints ? this.panelConstraints[i] : undefined;
+                const constraint = constraintResolution.usePanelConstraints
+                    ? this.panelConstraints[i]
+                    : undefined;
                 if (this.hasClampConstraint(constraint)) {
                     const bounds = constraintResolution.bounds[i];
-                    const clamped = bounds ? Math.min(Math.max(percent, bounds.min), bounds.max) : percent;
+                    const clamped = bounds
+                        ? Math.min(Math.max(percent, bounds.min), bounds.max)
+                        : percent;
                     if (clamped < percent)
                         freedPercent += percent - clamped;
                 }
@@ -1083,27 +1194,32 @@ export class LyraSplit extends LyraElement {
             }
             if (freedPercent > 0 && growableTotal > 0) {
                 for (const i of growableIndexes) {
-                    redistributedShare[i] = freedPercent * ((this.sizes[i] ?? 0) / growableTotal);
+                    redistributedShare[i] =
+                        freedPercent * ((this.sizes[i] ?? 0) / growableTotal);
                 }
             }
         }
         panels.forEach((panel, i) => {
             const percent = this.sizes[i] ?? 0;
-            const constraint = constraintResolution.usePanelConstraints ? this.panelConstraints[i] : undefined;
+            const constraint = constraintResolution.usePanelConstraints
+                ? this.panelConstraints[i]
+                : undefined;
             // Collapse-only inline styles are always cleared first, then
             // re-applied below only for the panel(s) that need them this pass —
             // simpler than diffing which of the 5 properties changed.
-            panel.style.removeProperty('position');
-            panel.style.removeProperty('inset-block');
-            panel.style.removeProperty('inset-inline-start');
-            panel.style.removeProperty('inset-inline-end');
-            panel.style.removeProperty('inline-size');
+            panel.style.removeProperty("position");
+            panel.style.removeProperty("inset-block");
+            panel.style.removeProperty("inset-inline-start");
+            panel.style.removeProperty("inset-inline-end");
+            panel.style.removeProperty("inline-size");
             panel.hidden = false;
-            if (collapsingIndex === i && this.collapseState === 'rail') {
+            if (collapsingIndex === i && this.collapseState === "rail") {
                 // Fixed rail width instead of the normal clamp()/percent flex-basis.
                 panel.style.flex = `0 0 ${this.railWidth}`;
             }
-            else if (collapsingIndex === i && this.collapseState === 'floating' && !this.open) {
+            else if (collapsingIndex === i &&
+                this.collapseState === "floating" &&
+                !this.open) {
                 // Hidden-by-default drawer (see the class doc): rendering nothing
                 // (not just visually collapsed, so it's out of the accessibility
                 // tree too) until a consumer sets `open`. The pane still vacates the
@@ -1111,10 +1227,10 @@ export class LyraSplit extends LyraElement {
                 // `hidden`'s UA `display: none` rather than `position: absolute`, so
                 // the other pane below still grows to fill the space regardless of
                 // which of the two branches applied.
-                panel.style.flex = 'none';
+                panel.style.flex = "none";
                 panel.hidden = true;
             }
-            else if (collapsingIndex === i && this.collapseState === 'floating') {
+            else if (collapsingIndex === i && this.collapseState === "floating") {
                 // `this.open` is true here. Lifted out of the flex flow entirely as
                 // an overlay card, anchored to its own logical start/end edge,
                 // spanning the full cross-axis extent — [part="base"] carries
@@ -1122,11 +1238,11 @@ export class LyraSplit extends LyraElement {
                 // split.styles.ts). Sized at its own normal percent width (i.e. what
                 // it would render at in the `'wide'` state), so there's no visual
                 // size jump the moment it un-floats.
-                panel.style.flex = 'none';
-                panel.style.position = 'absolute';
-                panel.style.setProperty('inset-block', '0');
-                panel.style.setProperty(collapsingIndex === 0 ? 'inset-inline-start' : 'inset-inline-end', '0');
-                panel.style.setProperty('inline-size', `${percent}%`);
+                panel.style.flex = "none";
+                panel.style.position = "absolute";
+                panel.style.setProperty("inset-block", "0");
+                panel.style.setProperty(collapsingIndex === 0 ? "inset-inline-start" : "inset-inline-end", "0");
+                panel.style.setProperty("inline-size", `${percent}%`);
             }
             else if (collapsingIndex !== -1 && i !== collapsingIndex) {
                 // The pane(s) sharing the split with a currently rail/floating
@@ -1162,10 +1278,10 @@ export class LyraSplit extends LyraElement {
             }
             panel.style.order = String(i * 2);
             if (collapsingIndex === i) {
-                panel.dataset['collapseState'] = this.collapseState;
+                panel.dataset["collapseState"] = this.collapseState;
             }
             else {
-                delete panel.dataset['collapseState'];
+                delete panel.dataset["collapseState"];
             }
         });
         this.stylizedPanels = current;
@@ -1175,10 +1291,10 @@ export class LyraSplit extends LyraElement {
         // Absent whenever there's nothing collapsed to report (`collapse ===
         // 'none'` or still `'wide'`), same as the per-panel marker.
         if (collapsingIndex !== -1) {
-            this.setAttribute('data-collapse-state', this.collapseState);
+            this.setAttribute("data-collapse-state", this.collapseState);
         }
         else {
-            this.removeAttribute('data-collapse-state');
+            this.removeAttribute("data-collapse-state");
         }
         // Runs after this render (not willUpdate) so the floating panel's
         // repositioned geometry above has already landed before the focus call
@@ -1211,26 +1327,30 @@ export class LyraSplit extends LyraElement {
         role="separator"
         aria-label=${this.dividerLabel
                 ? this.dividerLabel(i, this.panelCount)
-                : this.localize('resizeDivider', undefined, {
+                : this.localize("resizeDivider", undefined, {
                     a: i + 1,
                     b: i + 2,
                 })}
-        aria-orientation=${this.effectiveOrientation === 'vertical' ? 'horizontal' : 'vertical'}
+        aria-orientation=${this.effectiveOrientation === "vertical"
+                ? "horizontal"
+                : "vertical"}
         aria-valuenow=${Math.round(this.sizes[i] ?? 0)}
         aria-valuemin=${Math.round(valueMin)}
         aria-valuemax=${Math.round(valueMax)}
-        aria-disabled=${disabled ? 'true' : nothing}
-        tabindex=${disabled ? '-1' : '0'}
+        aria-disabled=${disabled ? "true" : nothing}
+        tabindex=${disabled ? "-1" : "0"}
         style=${`order:${i * 2 + 1}`}
         @pointerdown=${(e) => this.onPointerDown(e, i)}
         @keydown=${(e) => this.onDividerKeyDown(e, i)}
       ></div>`);
         }
-        const showBackdrop = this.collapseState === 'floating' && this.open;
+        const showBackdrop = this.collapseState === "floating" && this.open;
         return html `<div part="base">
       <slot @slotchange=${this.onSlotChange}></slot>
       ${dividers}
-      ${showBackdrop ? html `<div part="backdrop" @click=${this.onBackdropClick}></div>` : nothing}
+      ${showBackdrop
+            ? html `<div part="backdrop" @click=${this.onBackdropClick}></div>`
+            : nothing}
     </div>`;
     }
 }
@@ -1247,16 +1367,16 @@ __decorate([
     property({ reflect: true })
 ], LyraSplit.prototype, "orientation", void 0);
 __decorate([
-    property({ attribute: 'orientation-breakpoint' })
+    property({ attribute: "orientation-breakpoint" })
 ], LyraSplit.prototype, "orientationBreakpoint", void 0);
 __decorate([
-    property({ reflect: true, attribute: 'orientation-breakpoint-basis' })
+    property({ reflect: true, attribute: "orientation-breakpoint-basis" })
 ], LyraSplit.prototype, "orientationBreakpointBasis", void 0);
 __decorate([
-    property({ reflect: true, attribute: 'narrow-orientation' })
+    property({ reflect: true, attribute: "narrow-orientation" })
 ], LyraSplit.prototype, "narrowOrientation", void 0);
 __decorate([
-    property({ attribute: 'storage-key' })
+    property({ attribute: "storage-key" })
 ], LyraSplit.prototype, "storageKey", void 0);
 __decorate([
     property({ attribute: false })
@@ -1265,16 +1385,16 @@ __decorate([
     property({ reflect: true })
 ], LyraSplit.prototype, "collapse", void 0);
 __decorate([
-    property({ attribute: 'rail-width' })
+    property({ attribute: "rail-width" })
 ], LyraSplit.prototype, "railWidth", void 0);
 __decorate([
-    property({ attribute: 'rail-breakpoint' })
+    property({ attribute: "rail-breakpoint" })
 ], LyraSplit.prototype, "railBreakpoint", void 0);
 __decorate([
-    property({ attribute: 'float-breakpoint' })
+    property({ attribute: "float-breakpoint" })
 ], LyraSplit.prototype, "floatBreakpoint", void 0);
 __decorate([
-    property({ reflect: true, attribute: 'collapse-breakpoint-basis' })
+    property({ reflect: true, attribute: "collapse-breakpoint-basis" })
 ], LyraSplit.prototype, "collapseBreakpointBasis", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })