@aceshooting/lyra-ui 2.0.0 → 2.2.0

package/dist/components/split/split.js

@@ -1,585 +1,5 @@
-var __decorate = (this && this.__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--) 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';
+export * from './split.class.js';
+import { LyraSplit } from './split.class.js';
 import { defineElement } from '../../internal/prefix.js';
-import { isRtl } from '../../internal/rtl.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
-// static layout, instead of needing two different flex-basis shapes.
-const NO_MIN_PX = 0;
-const NO_MAX_PX = 1_000_000;
-/**
- * `<lyra-split>` — resizable panels for dashboard layouts. Direct light-DOM
- * children are the panels; a divider is auto-inserted between each pair.
- *
- * Optionally, one pane can opt in to responsive collapse via `collapse`
- * (`"start"`/`"end"`, default `"none"` — no behavior change when unset): as
- * the split's own container narrows past `railBreakpoint` that pane clamps
- * to a fixed `railWidth`, and past the narrower `floatBreakpoint` it instead
- * becomes an absolutely-positioned overlay "floating card" above the other
- * pane. This component only handles the width-collapse mechanics and
- * signals the current state — via the `collapseState`-derived
- * `data-collapse-state` attribute (set on both the host and the collapsing
- * panel itself) and the `lyra-split-collapse-change` event — it renders no
- * icon-only/collapsed UI of its own; slotted content is expected to adapt to
- * its own clamped width (e.g. via its own container query).
- *
- * @customElement lyra-split
- * @event lyra-resize - `detail: { sizes }`, fired on every drag step/release
- *   and every keyboard step.
- * @event lyra-split-collapse-change - `detail: { state }` (`SplitCollapseChangeDetail`),
- *   fired whenever the responsive `collapseState` actually transitions between
- *   `'wide'`/`'rail'`/`'floating'`. Only relevant when `collapse` isn't `"none"`;
- *   never fires otherwise.
- * @slot - Panels to arrange side by side (or stacked, when `orientation="vertical"`); each direct child becomes one resizable panel.
- * @csspart base - The flex layout wrapper (`position: relative`, so the `'floating'` collapse state can anchor to it).
- * @csspart divider - Each divider between two panels; carries `aria-disabled="true"` and is drag/keyboard-inert while its adjacent panel is collapsed (`'rail'`/`'floating'`).
- */
-export class LyraSplit extends LyraElement {
-    constructor() {
-        super(...arguments);
-        this.sizes = [];
-        this.min = 10;
-        this.orientation = 'horizontal';
-        /** 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 `lyra-resize` payload, and
-         *  localStorage persistence stay percent-based regardless — only the
-         *  effective clamp bounds change for a constrained panel. */
-        this.panelConstraints = [];
-        /** Opts a pane in to responsive collapse: `'start'` is the first light-DOM
-         *  panel (index 0), `'end'` is the last. Both are LOGICAL positions, same
-         *  as CSS `inset-inline-start`/`-end` — see the `collapsingIndex` getter
-         *  for why that already resolves to the same physical index under RTL for
-         *  this component (panels are never re-`order`ed for RTL, only the drag
-         *  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';
-        /** Fixed CSS length the collapsing pane clamps to in the `'rail'` state. */
-        this.railWidth = '3.5rem';
-        /** Container width (px, measured on `[part="base"]`) below which the
-         *  collapsing pane switches from its normal percent width to the fixed
-         *  `railWidth` (`'rail'` state). Must stay above `floatBreakpoint`. */
-        this.railBreakpoint = 640;
-        /** Container width (px) below which the collapsing pane instead becomes an
-         *  absolutely-positioned overlay above the other pane (`'floating'` state). */
-        this.floatBreakpoint = 400;
-        this.panelCount = 0;
-        /** The collapsing pane's current responsive state; always `'wide'` (a
-         *  no-op) while `collapse === 'none'`. */
-        this.collapseState = 'wide';
-        // Keyed by pointerId so an interrupted or concurrent (multi-touch) drag on
-        // one divider never reads or clobbers another pointer's drag state.
-        this.drags = new Map();
-        // Panels `updated()` last applied inline flex/order (and, while collapsing,
-        // position/inset/inline-size) styles to — tracked so a panel removed from
-        // the slot (e.g. a DOM node later reused elsewhere) gets those
-        // lyra-split-authored styles cleared instead of carrying them around stale
-        // forever.
-        this.stylizedPanels = new Set();
-        this.onSlotChange = () => {
-            this.panelCount = this.children.length;
-            this.ensureSizes();
-        };
-        this.onPointerDown = (e, index) => {
-            // The divider adjacent to a currently rail/floating-collapsed pane isn't
-            // draggable — mirrors the `[part="divider"][aria-disabled="true"]`
-            // `pointer-events: none` in split.styles.ts (belt-and-suspenders: this
-            // guard also covers a synthetic/programmatic pointerdown that CSS
-            // wouldn't stop).
-            if (this.isDividerDisabled(index))
-                return;
-            const base = this.renderRoot.querySelector('[part="base"]');
-            this.drags.set(e.pointerId, {
-                index,
-                startPos: this.orientation === 'vertical' ? e.clientY : e.clientX,
-                base,
-                appliedDelta: 0,
-            });
-            e.target.setPointerCapture(e.pointerId);
-            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);
-        };
-        this.onPointerMove = (e) => {
-            const drag = this.drags.get(e.pointerId);
-            if (!drag)
-                return;
-            const total = this.orientation === 'vertical' ? drag.base.clientHeight : drag.base.clientWidth;
-            const pos = this.orientation === '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.orientation === '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
-            // between them, and each clamp pass must see whatever the other pointer's
-            // move has *just* written, or the two independently-clamped pairs can each
-            // stay individually valid while their shared panel drifts past what either
-            // pair alone would allow, letting the total exceed 100%. Since the clamp
-            // basis is now the live, already-partially-applied `this.sizes` instead of
-            // a fixed drag-start snapshot, only the *incremental* delta since the last
-            // move may be applied here (not the cumulative-since-drag-start delta a
-            // snapshot-based clamp would use).
-            const incremental = cumulativeDelta - drag.appliedDelta;
-            const priorValue = this.sizes[drag.index];
-            const paired = this.clampPair(this.sizes, drag.index, incremental, total);
-            // Accumulate this move's own *realized* increment (post-clamp) onto the
-            // running total, rather than recomputing an absolute "total since
-            // drag-start" diff against a fixed startSizes snapshot. clampPair can
-            // cap the actual move short of what was requested (e.g. a drag
-            // saturating a panel's min/panelConstraints bound), so the realized
-            // portion still has to be tracked instead of the raw request -- that
-            // part of round 1's fix stands. But an absolute since-start diff also
-            // silently absorbs any change a DIFFERENT concurrent pointer's drag
-            // makes to this same shared panel between this pointer's own moves
-            // (adjacent dividers share one panel: divider i's index+1 panel is
-            // divider i+1's index panel), corrupting this pointer's next incremental
-            // calculation. Summing only this move's own delta (paired vs. the value
-            // immediately prior to *this* clamp) avoids both bugs at once.
-            drag.appliedDelta += paired[drag.index] - priorValue;
-            // Merge only this drag's pair into the live sizes so a concurrent drag
-            // on another divider (different pointerId) isn't clobbered.
-            const next = [...this.sizes];
-            next[drag.index] = paired[drag.index];
-            next[drag.index + 1] = paired[drag.index + 1];
-            this.sizes = next;
-            this.emit('lyra-resize', { sizes: [...this.sizes] });
-        };
-        this.onPointerUp = (e) => {
-            if (!this.drags.has(e.pointerId))
-                return;
-            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);
-            }
-        };
-        this.onDividerKeyDown = (e, index) => {
-            // Same rail/floating-adjacent guard as onPointerDown.
-            if (this.isDividerDisabled(index))
-                return;
-            // Mirror the same swap as onPointerMove for horizontal+RTL.
-            const rtl = this.orientation === 'horizontal' && isRtl(this);
-            const forwardKey = this.orientation === 'vertical' ? 'ArrowDown' : rtl ? 'ArrowLeft' : 'ArrowRight';
-            const backwardKey = this.orientation === 'vertical' ? 'ArrowUp' : rtl ? 'ArrowRight' : 'ArrowLeft';
-            if (e.key === forwardKey) {
-                e.preventDefault();
-                this.applyDelta(index, KEYBOARD_STEP, true);
-            }
-            else if (e.key === backwardKey) {
-                e.preventDefault();
-                this.applyDelta(index, -KEYBOARD_STEP, true);
-            }
-        };
-    }
-    static { this.styles = [LyraElement.styles, styles]; }
-    connectedCallback() {
-        super.connectedCallback();
-        this.panelCount = this.children.length;
-        this.ensureSizes();
-        this.loadPersisted();
-        // 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
-        // lite-chart.ts's identical connectedCallback/firstUpdated split for its
-        // own ResizeObserver.
-        if (this.collapse !== 'none')
-            this.armCollapseObserver();
-    }
-    disconnectedCallback() {
-        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);
-        this.collapseResizeObserver?.disconnect();
-    }
-    firstUpdated() {
-        if (this.collapse !== 'none')
-            this.armCollapseObserver();
-    }
-    get storageFullKey() {
-        return this.storageKey ? `lyra-split:${this.storageKey}:${this.panelCount}` : undefined;
-    }
-    loadPersisted() {
-        const key = this.storageFullKey;
-        if (!key)
-            return;
-        let raw;
-        try {
-            raw = localStorage.getItem(key);
-        }
-        catch {
-            /* localStorage unavailable (private browsing, sandboxed iframe, etc.) */
-            return;
-        }
-        if (!raw)
-            return;
-        try {
-            const parsed = JSON.parse(raw);
-            // A persisted layout can predate a since-raised `min`; reject it rather
-            // than restoring sizes that are already stuck below the current floor.
-            const isValid = Array.isArray(parsed) &&
-                parsed.length === this.panelCount &&
-                parsed.every((n) => typeof n === 'number' && Number.isFinite(n) && n >= this.min);
-            if (isValid)
-                this.sizes = parsed;
-        }
-        catch {
-            /* ignore malformed persisted state */
-        }
-    }
-    persist() {
-        const key = this.storageFullKey;
-        if (!key)
-            return;
-        try {
-            localStorage.setItem(key, JSON.stringify(this.sizes));
-        }
-        catch {
-            /* ignore persistence failures (e.g. quota exceeded, private browsing) */
-        }
-    }
-    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;
-        }
-        // A panel was added or removed: rebalance the existing sizes
-        // proportionally instead of discarding every panel's customized size,
-        // so an unrelated panel-count change doesn't wipe the whole layout.
-        const diff = this.panelCount - this.sizes.length;
-        if (diff > 0) {
-            const newShare = 100 / this.panelCount;
-            const 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);
-            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);
-        }
-    }
-    /** The container extent (px) along the resize axis, read live so a
-     *  container resize between calls is always picked up — same live read
-     *  `onPointerMove` already does via `drag.base.clientWidth/clientHeight`. */
-    getContainerSize() {
-        const base = this.renderRoot.querySelector('[part="base"]');
-        if (!base)
-            return 0;
-        return this.orientation === 'vertical' ? base.clientHeight : base.clientWidth;
-    }
-    /** The physical panel index `collapse: 'start' | 'end'` resolves to, or
-     *  `-1` when collapse is off (`'none'`) or there are fewer than 2 panels
-     *  to collapse one of. Panels are laid out via ascending inline `order`
-     *  (see `updated()`) and that ordering is never re-swapped for RTL — only
-     *  the drag/keyboard *delta sign* mirrors for RTL, exactly like
-     *  `onPointerMove`/`onDividerKeyDown` — so panel index 0 already renders
-     *  at the logical inline-start edge under both LTR and RTL (confirmed by
-     *  the pointer-drag RTL test elsewhere in this file: panel 0 renders on
-     *  the visual *right*, i.e. the RTL inline-start side). `'start'` therefore
-     *  always resolves to index 0 and `'end'` to `panelCount - 1`, regardless
-     *  of `isRtl(this)` — consulting it here would swap collapse onto the
-     *  panel that visually sits at the *other* logical edge, which would be a
-     *  bug against this component's own RTL rendering, not a fix for one.
-     */
-    get collapsingIndex() {
-        if (this.collapse === 'none' || this.panelCount < 2)
-            return -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';
-    }
-    /** Dragging/keyboard-resizing is disabled on the one divider immediately
-     *  adjacent to the currently-collapsed pane (its other side has nothing
-     *  meaningful to resize against while the pane is rail/floating-width). */
-    isDividerDisabled(index) {
-        if (!this.collapseActive)
-            return false;
-        const adjacent = this.collapsingIndex === 0 ? 0 : this.panelCount - 2;
-        return index === adjacent;
-    }
-    /** Classifies a measured container width into the collapsing pane's
-     *  responsive state and, only on an actual transition, updates
-     *  `collapseState` and fires `lyra-split-collapse-change`. */
-    updateCollapseState(width) {
-        if (this.collapse === 'none')
-            return;
-        const next = width < this.floatBreakpoint ? 'floating' : width < this.railBreakpoint ? 'rail' : 'wide';
-        if (next === this.collapseState)
-            return;
-        this.collapseState = next;
-        this.emit('lyra-split-collapse-change', { state: next });
-    }
-    /** Creates (idempotently) and (re-)observes `[part="base"]` with the
-     *  collapse-state `ResizeObserver` — a no-op until `baseEl` exists (see
-     *  `firstUpdated()`/`connectedCallback()`). Mirrors lite-chart.ts's own
-     *  ResizeObserver setup, including reading the box size synchronously
-     *  once so the very first render doesn't sit at the stale `'wide'` default
-     *  until the (async) first callback fires — same rationale as
-     *  lyra-virtual-list's `containerResizeObserver` synchronous initial read. */
-    armCollapseObserver() {
-        if (!this.collapseResizeObserver) {
-            this.collapseResizeObserver = new ResizeObserver((entries) => {
-                const box = entries[0]?.contentBoxSize?.[0];
-                const width = box ? box.inlineSize : (this.baseEl?.getBoundingClientRect().width ?? 0);
-                this.updateCollapseState(width);
-            });
-        }
-        if (this.baseEl) {
-            this.collapseResizeObserver.observe(this.baseEl);
-            this.updateCollapseState(this.baseEl.clientWidth);
-        }
-    }
-    /** Reacts to a live `collapse` property change (as opposed to the
-     *  connect/first-render arming above): turns the observer on/off, and
-     *  resets `collapseState` back to its `'wide'` default when collapse is
-     *  switched off so no stale rail/floating styling survives it. */
-    syncCollapseObserver() {
-        if (this.collapse === 'none') {
-            this.collapseResizeObserver?.disconnect();
-            this.collapseState = 'wide';
-            return;
-        }
-        this.armCollapseObserver();
-    }
-    /** Resolves panel `index`'s effective percent min/max for this clamp pass:
-     *  a `panelConstraints` entry's px bound converted against the live
-     *  `containerSize`, or the component's plain percent `min` (no upper
-     *  bound) when the panel carries no constraint for that side. */
-    percentBounds(index, containerSize) {
-        const constraint = this.panelConstraints[index];
-        let min = this.min;
-        let max = Infinity;
-        if (constraint && containerSize > 0) {
-            if (constraint.minPx != null)
-                min = (constraint.minPx / containerSize) * 100;
-            if (constraint.maxPx != null)
-                max = (constraint.maxPx / containerSize) * 100;
-        }
-        return { min, max };
-    }
-    clampPair(sizes, i, delta, containerSize = 0) {
-        const next = [...sizes];
-        const pairTotal = next[i] + next[i + 1];
-        const a = this.percentBounds(i, containerSize);
-        const b = this.percentBounds(i + 1, containerSize);
-        // Panel i's own bounds, further narrowed by panel i+1's bounds (its
-        // partner's min/max caps how much i can grow/shrink within the pair).
-        const loRaw = Math.max(a.min, pairTotal - b.max);
-        const hiRaw = Math.min(a.max, pairTotal - b.min);
-        // Clamp *toward* the bound instead of rejecting the whole move when the
-        // result is still outside it — otherwise a pair that starts under its
-        // combined min (e.g. an equal split across many panels) can never be
-        // moved at all, since every step recomputes the same rejected delta from
-        // the same untouched starting sizes.
-        const lo = Math.min(loRaw, pairTotal);
-        const hi = Math.max(hiRaw, lo);
-        const clampedA = Math.min(Math.max(next[i] + delta, lo), hi);
-        next[i] = clampedA;
-        next[i + 1] = pairTotal - clampedA;
-        return next;
-    }
-    applyDelta(index, delta, commit) {
-        this.sizes = this.clampPair(this.sizes, index, delta, this.getContainerSize());
-        this.emit('lyra-resize', { sizes: [...this.sizes] });
-        if (commit)
-            this.persist();
-    }
-    updated(changed) {
-        if (changed.has('sizes') || this.sizes.length === 0)
-            this.ensureSizes();
-        if (changed.has('collapse'))
-            this.syncCollapseObserver();
-        const panels = [...this.children];
-        const current = new Set(panels);
-        // A panel that dropped out of the slot (removed from the light DOM)
-        // still carries whatever inline flex/order (and, while collapsing,
-        // position/inset/inline-size) this method last applied to it — clear
-        // those before that DOM node potentially gets reused elsewhere (e.g.
-        // 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');
-                delete stale.dataset.collapseState;
-            }
-        }
-        // Resolved once per pass rather than per panel: which physical index (if
-        // any) is actually collapsed right now — `-1` covers both `collapse ===
-        // 'none'` (the default) and a `collapse !== 'none'` pane that's still in
-        // its normal `'wide'` state, so every panel below falls straight through
-        // to the exact pre-existing (non-collapse) styling in either case.
-        const collapsingIndex = this.collapseActive ? this.collapsingIndex : -1;
-        panels.forEach((panel, i) => {
-            const percent = this.sizes[i] ?? 0;
-            const constraint = this.panelConstraints[i];
-            // 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');
-            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') {
-                // 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 `position: relative` for this to
-                // anchor against (see 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}%`);
-            }
-            else if (collapsingIndex !== -1 && i !== collapsingIndex) {
-                // The pane(s) sharing the split with a currently rail/floating
-                // collapsed pane: grow to fill whatever space that pane no longer
-                // occupies (its full percent-basis space while floating, or
-                // percent-basis-minus-railWidth while railed), proportionally to
-                // their own relative `sizes` share for a 3+-panel split.
-                panel.style.flex = `${percent} 1 0%`;
-            }
-            else {
-                // clamp() mixes units natively, so a constrained panel stays pinned
-                // between its px bounds across container resizes with no extra
-                // ResizeObserver — the browser re-evaluates it on every layout pass.
-                panel.style.flex =
-                    constraint && (constraint.minPx != null || constraint.maxPx != null)
-                        ? `0 0 clamp(${constraint.minPx ?? NO_MIN_PX}px, ${percent}%, ${constraint.maxPx ?? NO_MAX_PX}px)`
-                        : `0 0 ${percent}%`;
-            }
-            panel.style.order = String(i * 2);
-            if (collapsingIndex === i) {
-                panel.dataset.collapseState = this.collapseState;
-            }
-            else {
-                delete panel.dataset.collapseState;
-            }
-        });
-        this.stylizedPanels = current;
-        // Host-level marker (mirrors the per-panel `dataset.collapseState`
-        // above) for simple external CSS targeting of the whole component's
-        // current state, e.g. `lyra-split[data-collapse-state="rail"] + aside`.
-        // 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);
-        }
-        else {
-            this.removeAttribute('data-collapse-state');
-        }
-    }
-    render() {
-        const dividers = [];
-        for (let i = 0; i < this.panelCount - 1; i++) {
-            // The achievable max for this divider is bounded by its two adjacent
-            // panels, not the whole track — pushing past it would starve a panel
-            // further down the line even though this pair still has room.
-            const valueMax = (this.sizes[i] ?? 0) + (this.sizes[i + 1] ?? 0) - this.min;
-            const disabled = this.isDividerDisabled(i);
-            dividers.push(html `<div
-        part="divider"
-        role="separator"
-        aria-label="Resize divider between panel ${i + 1} and panel ${i + 2}"
-        aria-orientation=${this.orientation === 'vertical' ? 'horizontal' : 'vertical'}
-        aria-valuenow=${Math.round(this.sizes[i] ?? 0)}
-        aria-valuemin=${this.min}
-        aria-valuemax=${Math.round(valueMax)}
-        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>`);
-        }
-        return html `<div part="base"><slot @slotchange=${this.onSlotChange}></slot>${dividers}</div>`;
-    }
-}
-__decorate([
-    property({ attribute: false })
-], LyraSplit.prototype, "sizes", void 0);
-__decorate([
-    property({ type: Number })
-], LyraSplit.prototype, "min", void 0);
-__decorate([
-    property({ reflect: true })
-], LyraSplit.prototype, "orientation", void 0);
-__decorate([
-    property({ attribute: 'storage-key' })
-], LyraSplit.prototype, "storageKey", void 0);
-__decorate([
-    property({ attribute: false })
-], LyraSplit.prototype, "panelConstraints", void 0);
-__decorate([
-    property({ reflect: true })
-], LyraSplit.prototype, "collapse", void 0);
-__decorate([
-    property({ attribute: 'rail-width' })
-], LyraSplit.prototype, "railWidth", void 0);
-__decorate([
-    property({ type: Number, attribute: 'rail-breakpoint' })
-], LyraSplit.prototype, "railBreakpoint", void 0);
-__decorate([
-    property({ type: Number, attribute: 'float-breakpoint' })
-], LyraSplit.prototype, "floatBreakpoint", void 0);
-__decorate([
-    state()
-], LyraSplit.prototype, "panelCount", void 0);
-__decorate([
-    state()
-], LyraSplit.prototype, "collapseState", void 0);
-__decorate([
-    query('[part="base"]')
-], LyraSplit.prototype, "baseEl", void 0);
 defineElement('split', LyraSplit);
+//# sourceMappingURL=split.js.map

package/dist/components/split/split.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"split.js","sourceRoot":"","sources":["../../../src/components/split/split.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,aAAa,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC"}

package/dist/components/split/split.styles.d.ts

@@ -1 +1,2 @@
 export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=split.styles.d.ts.map

package/dist/components/split/split.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"split.styles.d.ts","sourceRoot":"","sources":["../../../src/components/split/split.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAgGlB,CAAC"}

package/dist/components/split/split.styles.js

@@ -4,6 +4,10 @@ export const styles = css `
     display: block;
     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 lyra-app-rail's --lyra-app-rail-overlay-color). */
+    --lyra-split-overlay-color: var(--lyra-color-overlay);
   }
   [part='base'] {
     display: flex;
@@ -19,7 +23,7 @@ export const styles = css `
   [part='divider'] {
     position: relative;
     flex: 0 0 auto;
-    inline-size: 3px;
+    inline-size: var(--lyra-size-3px);
     block-size: auto;
     background: var(--lyra-color-border);
     cursor: col-resize;
@@ -33,15 +37,15 @@ export const styles = css `
     content: '';
     position: absolute;
     inset-block: 0;
-    inset-inline: -6px;
+    inset-inline: var(--lyra-size-neg-6px);
   }
   :host([orientation='vertical']) [part='divider'] {
     inline-size: auto;
-    block-size: 3px;
+    block-size: var(--lyra-size-3px);
     cursor: row-resize;
   }
   :host([orientation='vertical']) [part='divider']::before {
-    inset-block: -6px;
+    inset-block: var(--lyra-size-neg-6px);
     inset-inline: 0;
   }
   [part='divider']:hover {
@@ -64,13 +68,26 @@ export const styles = css `
   /* The 'floating' collapse state's overlay "card" look -- geometry
      (position/inset-*/inline-size) is set inline by split.ts's updated(),
      matching how the ordinary flex/order styling is applied; only the
-     visual/stacking treatment lives here. */
+     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']) {
-    z-index: 1;
+    z-index: var(--lyra-layer-content);
     background: var(--lyra-color-surface);
     border-radius: var(--lyra-radius);
     box-shadow: var(--lyra-shadow);
   }
+  /* The 'floating' drawer's scrim -- only rendered while collapseState is
+     'floating' and open (see split.ts's render()). Scoped to [part="base"]
+     (position: absolute against its position: relative ancestor) rather than
+     a viewport-fixed overlay like lyra-app-rail's mobile backdrop: the
+     floating panel itself is only ever positioned relative to this
+     component's own box, never the full page. */
+  [part='backdrop'] {
+    position: absolute;
+    inset: 0;
+    z-index: var(--lyra-layer-base);
+    background: var(--lyra-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
@@ -79,3 +96,4 @@ export const styles = css `
     overflow: hidden;
   }
 `;
+//# sourceMappingURL=split.styles.js.map