@aceshooting/lyra-ui 2.0.0 → 2.1.0

package/dist/components/sparkline/sparkline.js

@@ -41,18 +41,26 @@ export class LyraSparkline extends LyraElement {
     }
     static { this.styles = [LyraElement.styles, styles]; }
     points() {
+        // Non-finite samples (NaN/undefined/null from upstream computed data)
+        // can't be plotted or compared -- drop them up front so one bad point
+        // can't inject a literal "NaN" into the path `d` string and truncate
+        // every point that follows it.
+        const raw = this.values.filter((n) => Number.isFinite(n));
         // Auto min/max is scanned from the full, pre-decimation `values` -- doing
         // this after decimating would silently narrow the scale to whatever the
         // sampled subset happens to contain, which can clip or misproportion a
-        // real extreme value that decimation happened to drop.
-        const raw = this.values;
+        // real extreme value that decimation happened to drop. Skip the scan
+        // entirely when both bounds are already given explicitly -- its result
+        // would just be discarded.
         let autoLo = raw[0];
         let autoHi = raw[0];
-        for (const n of raw) {
-            if (n < autoLo)
-                autoLo = n;
-            if (n > autoHi)
-                autoHi = n;
+        if (this.min === undefined || this.max === undefined) {
+            for (const n of raw) {
+                if (n < autoLo)
+                    autoLo = n;
+                if (n > autoHi)
+                    autoHi = n;
+            }
         }
         const lo = this.min ?? autoLo;
         const hi = this.max ?? autoHi;
@@ -67,7 +75,14 @@ export class LyraSparkline extends LyraElement {
     willUpdate() {
         const v = this.values;
         this.setAttribute('role', 'img');
-        this.setAttribute('aria-label', v.length ? `Trend of ${v.length} values, last ${v.at(-1)}` : 'No data');
+        const last = v.at(-1);
+        // Real-world computed data (ratios, averages, percentages) carries
+        // floating-point noise that isn't meaningful to announce -- round it for
+        // the label the same way a human-facing value would be formatted.
+        const formattedLast = typeof last === 'number' && Number.isFinite(last)
+            ? last.toLocaleString(undefined, { maximumFractionDigits: 2 })
+            : last;
+        this.setAttribute('aria-label', v.length ? `Trend of ${v.length} values, last ${formattedLast}` : 'No data');
     }
     render() {
         const v = this.values;
@@ -84,16 +99,25 @@ export class LyraSparkline extends LyraElement {
             const slot = VIEW / pts.length;
             const barWidth = Math.min(4, Math.max(1, slot * 0.7));
             const bars = pts.map(([x, y]) => {
-                const barY = Math.min(y, VIEW);
+                // Clamp symmetrically: a value below an explicit `min` pushes `y`
+                // above VIEW, and a value above an explicit `max` pushes it below 0 --
+                // only clamping one side left the other free to draw a negative-y,
+                // oversized rect that bled outside the sparkline's box.
+                const barY = Math.min(VIEW, Math.max(0, y));
                 return svg `<rect part="bar" x="${x - barWidth / 2}" y="${barY}" width="${barWidth}" height="${VIEW - barY}"></rect>`;
             });
             return html `<svg viewBox="0 0 ${VIEW} ${VIEW}" preserveAspectRatio="none" aria-hidden="true">
         ${bars}
       </svg>`;
         }
+        // pts can end up empty even though `values` itself isn't -- e.g. every
+        // entry was non-finite and got filtered out -- so the single-point
+        // fallback below can't assume pts[0] exists.
         const d = pts.length > 1
             ? pts.map(([x, y], i) => `${i ? 'L' : 'M'}${x},${y}`).join(' ')
-            : `M${pts[0][0]},${pts[0][1]} L${pts[0][0]},${pts[0][1]}`;
+            : pts.length === 1
+                ? `M${pts[0][0]},${pts[0][1]} L${pts[0][0]},${pts[0][1]}`
+                : '';
         return html `<svg viewBox="0 0 ${VIEW} ${VIEW}" preserveAspectRatio="none" aria-hidden="true">
       ${this.type === 'area' ? svg `<path part="area" d="${d} L${VIEW},${VIEW} L0,${VIEW} Z"></path>` : ''}
       <path part="line" d="${d}"></path>

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

@@ -7,6 +7,14 @@ export interface PanelConstraint {
     minPx?: number;
     maxPx?: number;
 }
+export type SplitConstraintIssueReason = 'minimum-total' | 'maximum-total' | 'minimum-exceeds-maximum';
+export interface SplitConstraintIssueDetail {
+    reason: SplitConstraintIssueReason;
+    panelCount: number;
+    minimumTotal: number;
+    maximumTotal: number | null;
+    containerSize: number;
+}
 /** Which pane (if any) participates in responsive collapse (see `collapse`). */
 export type SplitCollapseMode = 'start' | 'end' | 'none';
 /** The collapsing pane's current responsive state — `'wide'` is the normal
@@ -14,6 +22,9 @@ export type SplitCollapseMode = 'start' | 'end' | 'none';
  *  clamps it to `railWidth`; `'floating'` lifts it out of the flex flow as an
  *  overlay above the other pane. */
 export type SplitCollapseState = 'wide' | 'rail' | 'floating';
+/** What can be *assigned* to `collapseState` -- `'auto'` is a write-only
+ *  sentinel; see the `collapseState` accessor doc. */
+export type SplitCollapseStateInput = SplitCollapseState | 'auto';
 export interface SplitCollapseChangeDetail {
     state: SplitCollapseState;
 }
@@ -33,19 +44,58 @@ export interface SplitCollapseChangeDetail {
  * 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).
  *
+ * `collapseState` is a public accessor with force/auto semantics mirroring
+ * `<lyra-app-rail>`'s `mode`: it's normally derived automatically from the
+ * measured container width (via a `ResizeObserver` on `[part="base"]`)
+ * whenever it crosses `railBreakpoint`/`floatBreakpoint`, but assigning it a
+ * concrete `'wide'`/`'rail'`/`'floating'` value pins it there and stops that
+ * automatic tracking — useful for a consumer-driven toggle (e.g. a button
+ * that forces `'floating'` regardless of width). Assigning the write-only
+ * `'auto'` sentinel releases the pin and immediately re-derives the state
+ * from the current measured width, resuming automatic tracking. `'auto'` is
+ * never a value this getter returns.
+ *
+ * The `'floating'` state is a hidden-by-default drawer, gated by `open`
+ * (mirrors `<lyra-app-rail>`'s mobile overlay): while `collapseState` is
+ * `'floating'` and `open` is `false` (the default), the collapsing panel
+ * renders nothing — `hidden`, out of the accessibility tree, not just
+ * visually hidden — instead of the always-visible overlay card this state
+ * rendered before `open` existed. Setting `open = true` reveals it as a
+ * focus-trapped floating panel with a `[part="backdrop"]` scrim; Escape or a
+ * backdrop click set `open` back to `false`. `open` is preserved (not reset)
+ * while `collapseState` isn't `'floating'`, but no drawer chrome renders
+ * until it is again — except that leaving `'floating'` while `open` is
+ * `true` (a breakpoint crossing back to `'wide'`/`'rail'`, or a forced
+ * reassignment) also closes it, the same way `<lyra-app-rail>` closes its
+ * mobile overlay when leaving `'mobile'` while open.
+ *
  * @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.
+ *   `'wide'`/`'rail'`/`'floating'` — whether from a breakpoint crossing or an
+ *   explicit `collapseState` assignment. Only relevant when `collapse` isn't
+ *   `"none"`; never fires otherwise. Not fired for a redundant reassignment
+ *   to the state already in effect.
+ * @event lyra-split-constraints-invalid - `detail: SplitConstraintIssueDetail`,
+ *   fired once when the configured panel minimums/maximums cannot describe a
+ *   layout that fits the track. The splitter rejects that infeasible set for
+ *   interaction and falls back to a normalized percent minimum.
  * @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'`).
+ * @csspart backdrop - The `'floating'` drawer's scrim. Only rendered while `collapseState === 'floating'` and `open`.
  */
 export declare class LyraSplit extends LyraElement {
     static styles: import("lit").CSSResultGroup[];
+    static properties: {
+        collapseState: {
+            reflect: boolean;
+            attribute: string;
+            noAccessor: boolean;
+        };
+    };
     sizes: number[];
     min: number;
     orientation: 'horizontal' | 'vertical';
@@ -74,17 +124,74 @@ export declare class LyraSplit extends LyraElement {
     /** Container width (px) below which the collapsing pane instead becomes an
      *  absolutely-positioned overlay above the other pane (`'floating'` state). */
     floatBreakpoint: number;
+    /** 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
+     *  chrome renders until `collapseState` is `'floating'` again. Defaults to
+     *  `false`: the collapsing pane renders nothing while floating until a
+     *  consumer opts in by setting this (or it's forced open programmatically)
+     *  — see the class doc. */
+    open: boolean;
     private panelCount;
-    /** The collapsing pane's current responsive state; always `'wide'` (a
-     *  no-op) while `collapse === 'none'`. */
-    private collapseState;
+    private _collapseState;
+    private _forced;
+    private overlayActive;
+    private justOpened;
+    private releaseScrollLock?;
+    private overlayHandle?;
     private drags;
     private stylizedPanels;
+    private constraintIssueKey;
     private baseEl?;
     private collapseResizeObserver?;
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected firstUpdated(): void;
+    /** Both branches here derive one reactive property from another with no
+     *  DOM measurement involved, so they belong in `willUpdate()` rather than
+     *  `updated()`: setting a reactive property from `updated()`/
+     *  `firstUpdated()` schedules a *second* update on top of the one that
+     *  just finished, which Lit's dev-mode console flags ("scheduled an
+     *  update ... after an update completed"). Both of these were real and
+     *  reproducible in normal usage, not just test artifacts --
+     *  `ensureSizes()` on any direct `sizes` assignment whose length doesn't
+     *  match `panelCount` (e.g. a consumer correcting a stale layout), and the
+     *  `collapseState` reset on every `collapse` -> `'none'` transition. The
+     *  `collapse !== 'none'` re-arm path in `syncCollapseObserver()` still
+     *  needs a freshly measured container width and stays in `updated()` --
+     *  see `armCollapseObserver()`'s own doc comment for why *that* one is the
+     *  documented exception instead (mirrors virtual-list.ts's
+     *  `attachContainerListeners()`). */
+    protected willUpdate(changed: PropertyValues): void;
+    /**
+     * The collapsing pane's current responsive state. Always one of the three
+     * real states — never `'auto'` — reflecting either the live measured
+     * width or, once forced, whatever was last assigned. See the class doc for
+     * the full force/auto contract (mirrors `<lyra-app-rail>`'s `mode`).
+     */
+    get collapseState(): SplitCollapseState;
+    set collapseState(next: SplitCollapseStateInput);
+    /** The container width (px) `[part="base"]` is measured at right now --
+     *  used to re-derive `collapseState` immediately when a forced value is
+     *  released back to `'auto'`, outside of the `ResizeObserver`'s own
+     *  (async, entry-driven) callback. Mirrors the synchronous initial read
+     *  `armCollapseObserver()` already does when it (re-)arms. */
+    private currentMeasuredWidth;
+    /** Resets `collapseState` back to its `'wide'` default and releases any
+     *  force, bypassing the public accessor's pin/event-emit side effects --
+     *  used only for the `collapse -> 'none'` housekeeping reset in
+     *  `willUpdate()`, which is purely internal bookkeeping (the feature is
+     *  off entirely), not a state transition a consumer forced or observed. */
+    private resetCollapseState;
+    /** Applies an actual `collapseState` transition (no-op if `next` matches
+     *  the current value): updates the field, triggers Lit's reflect/re-render
+     *  via `requestUpdate`, and fires `lyra-split-collapse-change`. Shared by
+     *  both the `ResizeObserver`-driven measurement path (`updateCollapseState`)
+     *  and the accessor's forced-value assignment, so the two never duplicate
+     *  this logic. Leaving `'floating'` while `open` is still `true` also
+     *  closes the drawer -- mirrors `<lyra-app-rail>` closing its mobile
+     *  overlay when `mode` leaves `'mobile'` while open. */
+    private applyCollapseStateChange;
     private get storageFullKey();
     private loadPersisted;
     private persist;
@@ -118,8 +225,12 @@ export declare class LyraSplit extends LyraElement {
      *  meaningful to resize against while the pane is rail/floating-width). */
     private isDividerDisabled;
     /** 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`. */
+     *  responsive state and, only on an actual transition, applies it (via the
+     *  same `applyCollapseStateChange()` the accessor's forced-value path
+     *  uses). Gated behind `_forced` so a pinned `collapseState` is never
+     *  silently overwritten by a subsequent resize — this is also what the
+     *  accessor's `'auto'` release calls (with the current measured width) to
+     *  re-derive the state without duplicating the width-vs-breakpoint logic. */
     private updateCollapseState;
     /** Creates (idempotently) and (re-)observes `[part="base"]` with the
      *  collapse-state `ResizeObserver` — a no-op until `baseEl` exists (see
@@ -130,17 +241,33 @@ export declare class LyraSplit extends LyraElement {
      *  lyra-virtual-list's `containerResizeObserver` synchronous initial read. */
     private armCollapseObserver;
     /** 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. */
+     *  connect/first-render arming above): turns the observer on/off. The
+     *  `collapseState` reset for the `'none'` case lives in `willUpdate()`
+     *  instead (see its doc comment) so no stale rail/floating styling
+     *  survives switching collapse off, without the extra render pass a
+     *  property set here would cost. */
     private syncCollapseObserver;
-    /** 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. */
+    /** The safe fallback for a shared percent minimum. A value above the
+     *  available share is still useful as a consumer intent, but it cannot be
+     *  honored for every panel at once, so reduce it proportionally. */
+    private normalizedDefaultMin;
+    /** Resolves all panel bounds together so aggregate feasibility is checked
+     *  before an individual divider is asked to clamp a pair. An invalid set is
+     *  rejected as a whole: interaction uses the safe shared minimum instead of
+     *  exposing a divider whose minimum is greater than its maximum. */
+    private resolveConstraintBounds;
     private percentBounds;
     private clampPair;
     private applyDelta;
+    /** The collapsing pane's light-DOM element itself — the `'floating'`
+     *  drawer's focus-trap/backdrop target. There's no separate shadow-DOM
+     *  panel to trap focus within (unlike `<lyra-app-rail>`'s `[part="panel"]`):
+     *  the slotted panel *is* the floating drawer, just repositioned via
+     *  inline styles in `updated()`. */
+    private get floatingPanelEl();
+    private activateFloatingOverlay;
+    private deactivateFloatingOverlay;
+    private onBackdropClick;
     private onPointerDown;
     private onPointerMove;
     private onPointerUp;