@aceshooting/lyra-ui 1.0.0 → 1.1.0

package/dist/components/select/select.styles.js

@@ -0,0 +1,188 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: block;
+  }
+  [part='form-control-label'] {
+    display: block;
+    margin-block-end: var(--lyra-space-xs);
+    font-size: 0.875rem;
+    font-weight: 600;
+  }
+  /* :empty never matches here -- the part always contains a literal slot
+     child element regardless of assigned/text content -- so real emptiness
+     is tracked in JS (hasLabelSlot) and reflected via the hidden attribute
+     instead (same fix as [part='hint']/[part='error'] below, and as
+     lyra-combobox). Without this, the required-asterisk ::after below
+     (which attaches to this box) renders a stray ' *' with nothing before
+     it whenever label is unset. */
+  [part='form-control-label'][hidden] {
+    display: none;
+  }
+  :host([required]) [part='form-control-label']::after {
+    content: ' *';
+    color: var(--lyra-color-danger);
+  }
+
+  [part='trigger'] {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--lyra-space-xs);
+    inline-size: 100%;
+    min-block-size: 2.5rem;
+    padding: var(--lyra-space-xs) var(--lyra-space-s);
+    border: 1px solid var(--lyra-color-border);
+    border-radius: var(--lyra-radius);
+    background: var(--lyra-color-surface);
+    color: inherit;
+    font: inherit;
+    text-align: start;
+    cursor: pointer;
+  }
+  [part='trigger']:focus-visible {
+    outline: var(--lyra-focus-ring-width) solid var(--lyra-focus-ring-color);
+    outline-offset: var(--lyra-focus-ring-offset);
+  }
+  :host([open]) [part='trigger'] {
+    border-color: var(--lyra-color-brand);
+  }
+  :host([disabled]) [part='trigger'] {
+    /* Shared library-wide disabled-state token -- see lyra-combobox. */
+    opacity: var(--lyra-opacity-disabled);
+    cursor: not-allowed;
+  }
+
+  .trigger-label {
+    flex: 1 1 auto;
+    min-inline-size: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  /* Placeholder text (no value selected yet) renders quieter, matching a
+     native <select>'s empty-option / combobox's placeholder styling. */
+  .trigger-label[data-placeholder] {
+    color: var(--lyra-color-text-quiet);
+  }
+
+  [part='expand-icon'] {
+    flex: 0 0 auto;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--lyra-color-text-quiet);
+    /* Same real-touch-target reasoning as lyra-combobox's expand-icon. */
+    min-inline-size: min(var(--lyra-icon-button-size), 1.75rem);
+    min-block-size: min(var(--lyra-icon-button-size), 1.75rem);
+    line-height: 1;
+  }
+  [part='expand-icon'] svg {
+    transform: rotate(90deg);
+  }
+
+  [part='listbox'] {
+    position: fixed;
+    z-index: 900;
+    box-sizing: border-box;
+    max-block-size: 18rem;
+    overflow-y: auto;
+    inline-size: max-content;
+    min-inline-size: 12rem;
+    max-inline-size: min(92vw, 28rem);
+    padding: var(--lyra-space-xs);
+    background: var(--lyra-color-surface);
+    border: 1px solid var(--lyra-color-border);
+    border-radius: var(--lyra-radius);
+    box-shadow: var(--lyra-shadow);
+    /* Closed state: invisible + slightly raised. visibility (not
+       display:none) so opacity/transform can actually transition; hit-testing
+       and a11y exposure stay off since this part is already position:fixed. */
+    visibility: hidden;
+    opacity: 0;
+    transform: translateY(-0.25rem);
+    transition:
+      opacity var(--lyra-transition-fast),
+      transform var(--lyra-transition-fast),
+      visibility var(--lyra-transition-fast);
+  }
+  :host([open]) [part='listbox'] {
+    visibility: visible;
+    opacity: 1;
+    transform: translateY(0);
+  }
+  @media (prefers-reduced-motion: reduce) {
+    [part='listbox'] {
+      transition: none !important;
+    }
+  }
+
+  [part='option'] {
+    display: flex;
+    flex-direction: column;
+    align-items: start;
+    inline-size: 100%;
+    padding: var(--lyra-space-xs) var(--lyra-space-s);
+    border: 1px solid transparent;
+    border-radius: var(--lyra-radius);
+    background: none;
+    color: inherit;
+    font: inherit;
+    text-align: start;
+    cursor: pointer;
+  }
+  [part='option']:hover,
+  [part='option'][data-active] {
+    background: var(--lyra-color-brand-quiet);
+  }
+  [part='option'][aria-selected='true'] {
+    border-color: var(--lyra-color-brand);
+    color: var(--lyra-color-brand);
+    font-weight: 600;
+  }
+  [part='option'][aria-disabled='true'] {
+    opacity: var(--lyra-opacity-disabled);
+    cursor: not-allowed;
+  }
+  [part='option-dot'] {
+    inline-size: 0.5rem;
+    block-size: 0.5rem;
+    border-radius: 50%;
+    flex: 0 0 auto;
+  }
+  [part='option-label'] {
+    display: flex;
+    flex-direction: column;
+    min-inline-size: 0;
+  }
+  [part='option-sub'] {
+    font-size: 0.75rem;
+    color: var(--lyra-color-text-quiet);
+  }
+
+  .group-label {
+    padding: var(--lyra-space-xs) var(--lyra-space-s) 0;
+    font-size: 0.6875rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    color: var(--lyra-color-text-quiet);
+  }
+  [part='hint'] {
+    margin-block-start: var(--lyra-space-xs);
+    font-size: 0.8125rem;
+    color: var(--lyra-color-text-quiet);
+  }
+  /* :empty never matches here either -- same fix as lyra-combobox's hint/error. */
+  [part='hint'][hidden] {
+    display: none;
+  }
+  [part='error'] {
+    margin-block-start: var(--lyra-space-xs);
+    font-size: 0.8125rem;
+    color: var(--lyra-color-danger);
+  }
+  [part='error'][hidden] {
+    display: none;
+  }
+`;

package/dist/components/skeleton/skeleton.js

@@ -29,20 +29,17 @@ export class LyraSkeleton extends LyraElement {
     }
     updated(changed) {
         if (changed.has('width') || changed.has('height')) {
-            const base = this.renderRoot.querySelector('[part="base"]');
-            if (!base)
-                return;
             if (this.width) {
-                base.style.setProperty('--lyra-skeleton-w', this.width);
+                this.style.setProperty('--lyra-skeleton-w', this.width);
             }
             else {
-                base.style.removeProperty('--lyra-skeleton-w');
+                this.style.removeProperty('--lyra-skeleton-w');
             }
             if (this.height) {
-                base.style.setProperty('--lyra-skeleton-h', this.height);
+                this.style.setProperty('--lyra-skeleton-h', this.height);
             }
             else {
-                base.style.removeProperty('--lyra-skeleton-h');
+                this.style.removeProperty('--lyra-skeleton-h');
             }
         }
     }

package/dist/components/sparkline/sparkline.d.ts

@@ -5,7 +5,7 @@ import { LyraElement } from '../../internal/lyra-element.js';
  * Mirrors the Web Awesome `<wa-sparkline>` API under the `lyra-` prefix.
  *
  * @customElement lyra-sparkline
- * @csspart line - The line path (type="line").
+ * @csspart line - The stroked line path (type="line" and type="area").
  * @csspart area - The filled area under the line (type="area").
  * @csspart bar - Each bar rectangle (type="bar").
  */

package/dist/components/sparkline/sparkline.js

@@ -10,12 +10,21 @@ import { LyraElement } from '../../internal/lyra-element.js';
 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;
+function decimate(arr, max) {
+    const step = arr.length / max;
+    return Array.from({ length: max }, (_, i) => arr[Math.floor(i * step)]);
+}
 /**
  * `<lyra-sparkline>` — a zero-dependency inline SVG trend chart.
  * Mirrors the Web Awesome `<wa-sparkline>` API under the `lyra-` prefix.
  *
  * @customElement lyra-sparkline
- * @csspart line - The line path (type="line").
+ * @csspart line - The stroked line path (type="line" and type="area").
  * @csspart area - The filled area under the line (type="area").
  * @csspart bar - Each bar rectangle (type="bar").
  */
@@ -30,12 +39,20 @@ export class LyraSparkline extends LyraElement {
     static { this.styles = [LyraElement.styles, styles]; }
     points() {
         const v = this.values;
-        const lo = this.min ?? Math.min(...v);
-        const hi = this.max ?? Math.max(...v);
-        const span = hi - lo || 1;
+        let autoLo = v[0];
+        let autoHi = v[0];
+        for (const n of v) {
+            if (n < autoLo)
+                autoLo = n;
+            if (n > autoHi)
+                autoHi = n;
+        }
+        const lo = this.min ?? autoLo;
+        const hi = this.max ?? autoHi;
+        const span = hi - lo;
         return v.map((n, i) => {
             const x = v.length > 1 ? (i / (v.length - 1)) * VIEW : VIEW / 2;
-            const y = VIEW - ((n - lo) / span) * VIEW;
+            const y = span === 0 ? VIEW / 2 : VIEW - ((n - lo) / span) * VIEW;
             return [x, y];
         });
     }
@@ -46,16 +63,26 @@ export class LyraSparkline extends LyraElement {
     }
     render() {
         const v = this.values;
-        if (!v.length)
-            return html `<svg viewBox="0 0 ${VIEW} ${VIEW}"></svg>`;
+        if (!v.length) {
+            return html `<svg viewBox="0 0 ${VIEW} ${VIEW}" aria-hidden="true"></svg>`;
+        }
         const pts = this.points();
-        const d = pts.map(([x, y], i) => `${i ? 'L' : 'M'}${x},${y}`).join(' ');
-        const shape = this.type === 'bar'
-            ? pts.map(([x, y]) => svg `<rect part="bar" x="${x - 2}" y="${y}" width="4" height="${VIEW - y}"></rect>`)
-            : svg `<path part="line" d="${d}"></path>`;
-        return html `<svg viewBox="0 0 ${VIEW} ${VIEW}" preserveAspectRatio="none">
+        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>`;
+            });
+            return html `<svg viewBox="0 0 ${VIEW} ${VIEW}" preserveAspectRatio="none" aria-hidden="true">
+        ${bars}
+      </svg>`;
+        }
+        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]}`;
+        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>` : ''}
-      ${shape}
+      <path part="line" d="${d}"></path>
     </svg>`;
     }
 }

package/dist/components/sparkline/sparkline.stories.d.ts

@@ -5,3 +5,7 @@ type Story = StoryObj;
 export declare const Line: Story;
 export declare const Area: Story;
 export declare const Bar: Story;
+export declare const ExplicitRange: Story;
+export declare const NoData: Story;
+export declare const FlatData: Story;
+export declare const SingleValue: Story;

package/dist/components/sparkline/sparkline.stories.js

@@ -15,3 +15,25 @@ export const Area = {
 export const Bar = {
     render: () => html `<lyra-sparkline type="bar" .values=${DATA}></lyra-sparkline>`,
 };
+export const ExplicitRange = {
+    render: () => html `
+    <lyra-sparkline type="bar" .values=${[20, 40, 30]} min="0" max="100"></lyra-sparkline>
+    <lyra-sparkline type="bar" .values=${[70, 90, 80]} min="0" max="100"></lyra-sparkline>
+  `,
+};
+export const NoData = {
+    render: () => html `<lyra-sparkline></lyra-sparkline>`,
+};
+export const FlatData = {
+    render: () => html `
+    <lyra-sparkline type="line" .values=${[5, 5, 5, 5]}></lyra-sparkline>
+    <lyra-sparkline type="area" .values=${[5, 5, 5, 5]}></lyra-sparkline>
+    <lyra-sparkline type="bar" .values=${[5, 5, 5, 5]}></lyra-sparkline>
+  `,
+};
+export const SingleValue = {
+    render: () => html `
+    <lyra-sparkline type="line" .values=${[5]}></lyra-sparkline>
+    <lyra-sparkline type="bar" .values=${[5]}></lyra-sparkline>
+  `,
+};

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

@@ -1,5 +1,12 @@
 import { type TemplateResult, type PropertyValues } from 'lit';
 import { LyraElement } from '../../internal/lyra-element.js';
+/** A fixed-pixel-range constraint for one panel; index-aligned with `sizes`/
+ *  `panelConstraints`. Either bound may be omitted to leave that side
+ *  unconstrained (falls back to the component's percent-based `min`). */
+export interface PanelConstraint {
+    minPx?: number;
+    maxPx?: number;
+}
 /**
  * `<lyra-split>` — resizable panels for dashboard layouts. Direct light-DOM
  * children are the panels; a divider is auto-inserted between each pair.
@@ -7,6 +14,7 @@ import { LyraElement } from '../../internal/lyra-element.js';
  * @customElement lyra-split
  * @event lyra-resize - `detail: { sizes }`, fired on every drag step/release
  *   and every keyboard step.
+ * @slot - Panels to arrange side by side (or stacked, when `orientation="vertical"`); each direct child becomes one resizable panel.
  * @csspart base, divider
  */
 export declare class LyraSplit extends LyraElement {
@@ -15,10 +23,14 @@ export declare class LyraSplit extends LyraElement {
     min: number;
     orientation: 'horizontal' | 'vertical';
     storageKey?: string;
+    /** 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. */
+    panelConstraints: (PanelConstraint | null)[];
     private panelCount;
-    private dragIndex;
-    private dragStartPos;
-    private dragStartSizes;
+    private drags;
     connectedCallback(): void;
     disconnectedCallback(): void;
     private get storageFullKey();
@@ -26,6 +38,15 @@ export declare class LyraSplit extends LyraElement {
     private persist;
     private ensureSizes;
     private onSlotChange;
+    /** 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`. */
+    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. */
+    private percentBounds;
     private clampPair;
     private applyDelta;
     private onPointerDown;