@aceshooting/lyra-ui 1.2.0 → 2.1.0

package/dist/components/source-list/source-list.styles.js

@@ -0,0 +1,59 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: block;
+  }
+  [part='base'] {
+    border: 1px solid var(--lyra-color-border);
+    border-radius: var(--lyra-radius);
+    background: var(--lyra-color-surface);
+    overflow: hidden;
+  }
+  [part='header'] {
+    display: flex;
+    align-items: center;
+    gap: var(--lyra-space-xs);
+    inline-size: 100%;
+    padding: var(--lyra-space-s) var(--lyra-space-m);
+    border: none;
+    background: none;
+    color: var(--lyra-color-text);
+    font: inherit;
+    font-weight: 600;
+    font-size: 0.875rem;
+    text-align: start;
+    cursor: pointer;
+  }
+  [part='header']:hover {
+    background: var(--lyra-color-brand-quiet);
+    color: var(--lyra-color-brand);
+  }
+  [part='header']:focus-visible {
+    outline: var(--lyra-focus-ring-width) solid var(--lyra-focus-ring-color);
+    outline-offset: calc(-1 * var(--lyra-focus-ring-offset));
+  }
+  [part='toggle'] {
+    display: inline-flex;
+    flex: 0 0 auto;
+    transition: transform var(--lyra-transition-fast);
+  }
+  :host([expanded]) [part='toggle'] {
+    transform: rotate(90deg);
+  }
+  [part='list'] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--lyra-space-s);
+    padding: 0 var(--lyra-space-m) var(--lyra-space-m);
+    border-block-start: 1px solid var(--lyra-color-border);
+    padding-block-start: var(--lyra-space-m);
+  }
+  [part='list'][hidden] {
+    display: none;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    [part='toggle'] {
+      transition: none !important;
+    }
+  }
+`;

package/dist/components/sparkline/sparkline.js

@@ -11,13 +11,16 @@ import { defineElement } from '../../internal/prefix.js';
 import { styles } from './sparkline.styles.js';
 const VIEW = 100;
 // A <rect> per bar doesn't collapse into one path the way line/area do, so an
-// unbounded `values` array turns directly into that many shadow-DOM nodes.
-// Capping it keeps worst-case DOM size bounded without affecting any
-// realistically-sized bar chart.
-const MAX_BARS = 500;
+// unbounded `values` array turns directly into that many shadow-DOM nodes --
+// and an uncapped line/area path string grows without bound too. Capping the
+// point count up front (shared by every render type) keeps worst-case
+// DOM/compute bounded without affecting any realistically-sized chart.
+const MAX_POINTS = 500; // shared point-count cap for every render type (line/area/bar)
 function decimate(arr, max) {
-    const step = arr.length / max;
-    return Array.from({ length: max }, (_, i) => arr[Math.floor(i * step)]);
+    if (arr.length <= max)
+        return [...arr];
+    const step = (arr.length - 1) / (max - 1); // anchors both the first AND last sample exactly
+    return Array.from({ length: max }, (_, i) => arr[Math.round(i * step)]);
 }
 /**
  * `<lyra-sparkline>` — a zero-dependency inline SVG trend chart.
@@ -38,17 +41,30 @@ export class LyraSparkline extends LyraElement {
     }
     static { this.styles = [LyraElement.styles, styles]; }
     points() {
-        const v = this.values;
-        let autoLo = v[0];
-        let autoHi = v[0];
-        for (const n of v) {
-            if (n < autoLo)
-                autoLo = n;
-            if (n > autoHi)
-                autoHi = n;
+        // 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. 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];
+        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;
+        const v = raw.length > MAX_POINTS ? decimate(raw, MAX_POINTS) : raw;
         const span = hi - lo;
         return v.map((n, i) => {
             const x = v.length > 1 ? (i / (v.length - 1)) * VIEW : VIEW / 2;
@@ -59,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;
@@ -68,18 +91,33 @@ export class LyraSparkline extends LyraElement {
         }
         const pts = this.points();
         if (this.type === 'bar') {
-            const barPts = pts.length > MAX_BARS ? decimate(pts, MAX_BARS) : pts;
-            const bars = barPts.map(([x, y]) => {
-                const barY = Math.min(y, VIEW);
-                return svg `<rect part="bar" x="${x - 2}" y="${barY}" width="4" height="${VIEW - barY}"></rect>`;
+            // Narrow the bar width as the (already decimated-to-MAX_POINTS) point
+            // count grows, so bars stop overlapping once there are more than a
+            // handful -- VIEW / pts.length is each bar's full "slot" width; keep a
+            // small gap between slots by drawing at 70% of it, floored at 1px and
+            // capped at the original fixed 4px for small point counts.
+            const slot = VIEW / pts.length;
+            const barWidth = Math.min(4, Math.max(1, slot * 0.7));
+            const bars = pts.map(([x, y]) => {
+                // 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,18 +7,95 @@ 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
+ *  drag-resizable percent layout (identical to `collapse="none"`); `'rail'`
+ *  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;
+}
 /**
  * `<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).
+ *
+ * `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'` — 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, divider
+ * @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';
@@ -29,10 +106,92 @@ export declare class LyraSplit extends LyraElement {
      *  localStorage persistence stay percent-based regardless — only the
      *  effective clamp bounds change for a constrained panel. */
     panelConstraints: (PanelConstraint | null)[];
+    /** 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. */
+    collapse: SplitCollapseMode;
+    /** Fixed CSS length the collapsing pane clamps to in the `'rail'` state. */
+    railWidth: string;
+    /** 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`. */
+    railBreakpoint: number;
+    /** 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;
+    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;
@@ -42,13 +201,73 @@ export declare class LyraSplit extends LyraElement {
      *  container resize between calls is always picked up — same live read
      *  `onPointerMove` already does via `drag.base.clientWidth/clientHeight`. */
     private getContainerSize;
-    /** 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 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.
+     */
+    private get collapsingIndex();
+    /** Whether a pane is actually collapsed (rail or floating) right now —
+     *  `false` whenever `collapse === 'none'`, since `collapseState` then
+     *  never leaves its `'wide'` default. */
+    private get collapseActive();
+    /** 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). */
+    private isDividerDisabled;
+    /** Classifies a measured container width into the collapsing pane's
+     *  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
+     *  `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. */
+    private armCollapseObserver;
+    /** Reacts to a live `collapse` property change (as opposed to the
+     *  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;
+    /** 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;