@aceshooting/lyra-ui 0.1.0 → 0.1.2

package/dist/components/stat/stat.js

@@ -0,0 +1,117 @@
+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 } from 'lit/decorators.js';
+import { LyraElement } from '../../internal/lyra-element.js';
+import { defineElement } from '../../internal/prefix.js';
+import { chevronIcon } from '../../internal/icons.js';
+import { styles } from './stat.styles.js';
+/**
+ * `<lyra-stat>` — a KPI/stat card. First-party invention consolidating the
+ * "metric row" / "KPI card" pattern reinvented in every surveyed repo.
+ *
+ * @customElement lyra-stat
+ * @slot - Leading icon.
+ * @slot caption - Rich caption content (overrides the `caption` attribute).
+ * @csspart base, icon, label, value, unit, trend, caption
+ */
+export class LyraStat extends LyraElement {
+    constructor() {
+        super(...arguments);
+        this.label = '';
+        this.value = '';
+        this.unit = '';
+        this.variant = 'neutral';
+        this.trend = NaN;
+        this.caption = '';
+        /** Which trend direction counts as "good" — inverts arrow/color polarity for
+         *  cost/latency/error-rate-style metrics where a decrease is the win. */
+        this.goodDirection = 'up';
+        // Same fix `lyra-empty` already established: `[part]:empty` never matches
+        // because the part always contains a literal `<slot>` child. Track real
+        // slot assignment in JS instead (2026-07-10 audit, "dashboard-atoms"
+        // §lyra-stat, High).
+        this.hasIcon = false;
+        this.hasCaptionSlot = false;
+        this.onIconSlotChange = (e) => {
+            this.hasIcon = e.target.assignedElements({ flatten: true }).length > 0;
+        };
+        this.onCaptionSlotChange = (e) => {
+            this.hasCaptionSlot = e.target.assignedElements({ flatten: true }).length > 0;
+        };
+    }
+    static { this.styles = [LyraElement.styles, styles]; }
+    willUpdate() {
+        if (!this.hasUpdated) {
+            this.hasIcon = Array.from(this.children).some((el) => !el.hasAttribute('slot'));
+            this.hasCaptionSlot = Array.from(this.children).some((el) => el.getAttribute('slot') === 'caption');
+        }
+    }
+    render() {
+        const hasTrend = !isNaN(this.trend);
+        const rawDirection = this.trend > 0 ? 'up' : this.trend < 0 ? 'down' : 'flat';
+        const isGood = rawDirection === 'flat' ? null : rawDirection === this.goodDirection;
+        // 2026-07-10 design review, "dashboard-atoms" §lyra-stat: the trend
+        // pill rendered literal ▲/▼ glyphs — font-dependent and inconsistent
+        // with the rest of the icon set — swapped for the shared chevronIcon(),
+        // rotated per direction via CSS on the wrapping [part='trend'].
+        const arrow = rawDirection === 'flat' ? '–' : chevronIcon();
+        const hasCaption = this.hasCaptionSlot || this.caption.length > 0;
+        return html `
+      <div part="base">
+        <span part="icon" ?hidden=${!this.hasIcon}
+          ><slot @slotchange=${this.onIconSlotChange}></slot
+        ></span>
+        <span part="label">${this.label}</span>
+        <div part="value-row">
+          <span part="value">${this.value}</span>
+          <span part="unit">${this.unit}</span>
+        </div>
+        ${hasTrend
+            ? html `<span
+              part="trend"
+              data-direction=${rawDirection}
+              data-polarity=${isGood == null ? nothing : isGood ? 'good' : 'bad'}
+            >
+              <span aria-hidden="true">${arrow}</span> ${Math.abs(this.trend)}%
+            </span>`
+            : nothing}
+        <div part="caption" ?hidden=${!hasCaption}>
+          <slot name="caption" @slotchange=${this.onCaptionSlotChange}>${this.caption}</slot>
+        </div>
+      </div>
+    `;
+    }
+}
+__decorate([
+    property()
+], LyraStat.prototype, "label", void 0);
+__decorate([
+    property()
+], LyraStat.prototype, "value", void 0);
+__decorate([
+    property()
+], LyraStat.prototype, "unit", void 0);
+__decorate([
+    property({ reflect: true })
+], LyraStat.prototype, "variant", void 0);
+__decorate([
+    property({ type: Number })
+], LyraStat.prototype, "trend", void 0);
+__decorate([
+    property()
+], LyraStat.prototype, "caption", void 0);
+__decorate([
+    property({ attribute: 'good-direction' })
+], LyraStat.prototype, "goodDirection", void 0);
+__decorate([
+    state()
+], LyraStat.prototype, "hasIcon", void 0);
+__decorate([
+    state()
+], LyraStat.prototype, "hasCaptionSlot", void 0);
+defineElement('stat', LyraStat);

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

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/dist/components/stat/stat.styles.js

@@ -0,0 +1,86 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: block;
+  }
+  [part='base'] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--lyra-space-xs);
+    padding: var(--lyra-space-m);
+    border: 1px solid var(--lyra-color-border);
+    border-radius: var(--lyra-radius);
+    background: var(--lyra-color-surface);
+  }
+  [part='icon'] {
+    color: var(--lyra-color-text-quiet);
+  }
+  [part='icon'][hidden] {
+    display: none;
+  }
+  [part='label'] {
+    font-size: 0.75rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    color: var(--lyra-color-text-quiet);
+  }
+  [part='value-row'] {
+    display: flex;
+    align-items: baseline;
+    gap: var(--lyra-space-xs);
+  }
+  [part='value'] {
+    font-size: 1.75rem;
+    font-weight: 700;
+    font-family: ui-monospace, SFMono-Regular, monospace;
+  }
+  [part='unit'] {
+    font-size: 0.875rem;
+    color: var(--lyra-color-text-quiet);
+  }
+  [part='trend'] {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--lyra-space-xs);
+    font-size: 0.8125rem;
+    font-weight: 600;
+    border-radius: var(--lyra-radius);
+    /* 0.05rem/0.4rem don't cleanly map to any --lyra-space-* step (the
+       smallest, --lyra-space-xs, is 0.25rem): rounding the vertical value
+       up to xs would 5x this chip's padding and blow out the compact
+       trend-chip look, so both stay literal here. */
+    padding: 0.05rem 0.4rem;
+    align-self: flex-start;
+  }
+  [part='trend'][data-direction='up'] svg {
+    transform: rotate(-90deg);
+  }
+  [part='trend'][data-direction='down'] svg {
+    transform: rotate(90deg);
+  }
+  [part='trend'][data-polarity='good'] {
+    color: var(--lyra-color-success);
+    background: color-mix(in srgb, var(--lyra-color-success) 8%, transparent);
+  }
+  [part='trend'][data-polarity='bad'] {
+    color: var(--lyra-color-danger);
+    background: color-mix(in srgb, var(--lyra-color-danger) 8%, transparent);
+  }
+  :host([variant='success']) [part='value'] {
+    color: var(--lyra-color-success);
+  }
+  :host([variant='warning']) [part='value'] {
+    color: var(--lyra-color-warning);
+  }
+  :host([variant='danger']) [part='value'] {
+    color: var(--lyra-color-danger);
+  }
+  [part='caption'] {
+    font-size: 0.8125rem;
+    color: var(--lyra-color-text-quiet);
+  }
+  [part='caption'][hidden] {
+    display: none;
+  }
+`;

package/dist/components/table/table.d.ts

@@ -0,0 +1,54 @@
+import { type TemplateResult, type PropertyValues } from 'lit';
+import { LyraElement } from '../../internal/lyra-element.js';
+import '../empty/empty.js';
+export interface TableColumn<T> {
+    key: string;
+    label: string;
+    sortable?: boolean;
+    align?: 'start' | 'end';
+    cell: (row: T) => unknown;
+}
+/**
+ * `<lyra-table>` — a presentational, sort/select-aware data table.
+ *
+ * Header/row activation is delegated: one `click` and one `keydown`
+ * listener on `<table>` resolve the target via `closest('[data-col-key]'
+ * | '[data-row-key]')` and a key→object lookup map, instead of allocating
+ * fresh per-column/per-row closures on every render (2026-07-10 audit,
+ * "dashboard-atoms" §lyra-table, Medium).
+ *
+ * @customElement lyra-table
+ * @event lyra-sort - A sortable header was activated. `detail: { key }`.
+ * @event lyra-row-click - A row was activated. `detail: { row }`.
+ * @event lyra-load-more - The "load more" control was activated.
+ * @csspart base, table, head, header-cell, row, cell, more-button, sort-icon
+ */
+export declare class LyraTable<T = unknown> extends LyraElement {
+    static styles: import("lit").CSSResultGroup[];
+    columns: TableColumn<T>[];
+    rows: T[];
+    sortKey: string;
+    sortDir: 'asc' | 'desc';
+    rowKey?: (row: T) => string | number;
+    selectedKey: string | number | null;
+    hasMore: boolean;
+    moreLabel: string;
+    emptyHeading: string;
+    emptyDescription: string;
+    noColumnsHeading: string;
+    noColumnsDescription: string;
+    private rowsByKey;
+    private columnsByKey;
+    private keyOf;
+    protected willUpdate(changed: PropertyValues): void;
+    private activateColumn;
+    private activateRow;
+    private onTableClick;
+    private onTableKeyDown;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-table': LyraTable;
+    }
+}

package/dist/components/table/table.js

@@ -0,0 +1,201 @@
+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 } from 'lit/decorators.js';
+import { repeat } from 'lit/directives/repeat.js';
+import { LyraElement } from '../../internal/lyra-element.js';
+import { defineElement } from '../../internal/prefix.js';
+import { styles } from './table.styles.js';
+import { chevronIcon } from '../../internal/icons.js';
+import '../empty/empty.js';
+/**
+ * `<lyra-table>` — a presentational, sort/select-aware data table.
+ *
+ * Header/row activation is delegated: one `click` and one `keydown`
+ * listener on `<table>` resolve the target via `closest('[data-col-key]'
+ * | '[data-row-key]')` and a key→object lookup map, instead of allocating
+ * fresh per-column/per-row closures on every render (2026-07-10 audit,
+ * "dashboard-atoms" §lyra-table, Medium).
+ *
+ * @customElement lyra-table
+ * @event lyra-sort - A sortable header was activated. `detail: { key }`.
+ * @event lyra-row-click - A row was activated. `detail: { row }`.
+ * @event lyra-load-more - The "load more" control was activated.
+ * @csspart base, table, head, header-cell, row, cell, more-button, sort-icon
+ */
+export class LyraTable extends LyraElement {
+    constructor() {
+        super(...arguments);
+        this.columns = [];
+        this.rows = [];
+        this.sortKey = '';
+        this.sortDir = 'asc';
+        this.selectedKey = null;
+        this.hasMore = false;
+        this.moreLabel = 'Load more';
+        this.emptyHeading = 'No data';
+        this.emptyDescription = '';
+        this.noColumnsHeading = 'No columns configured';
+        this.noColumnsDescription = '';
+        this.rowsByKey = new Map();
+        this.columnsByKey = new Map();
+        this.onTableClick = (e) => {
+            const target = e.target;
+            const th = target.closest('[data-col-key]');
+            if (th)
+                return this.activateColumn(th.dataset.colKey);
+            const tr = target.closest('[data-row-key]');
+            if (tr)
+                this.activateRow(tr.dataset.rowKey);
+        };
+        this.onTableKeyDown = (e) => {
+            if (e.key !== 'Enter' && e.key !== ' ')
+                return;
+            const target = e.target;
+            const th = target.closest('[data-col-key]');
+            if (th) {
+                e.preventDefault();
+                return this.activateColumn(th.dataset.colKey);
+            }
+            const tr = target.closest('[data-row-key]');
+            if (tr) {
+                e.preventDefault();
+                this.activateRow(tr.dataset.rowKey);
+            }
+        };
+    }
+    static { this.styles = [LyraElement.styles, styles]; }
+    keyOf(row, index) {
+        return this.rowKey ? this.rowKey(row) : index;
+    }
+    willUpdate(changed) {
+        if (changed.has('rows') || changed.has('rowKey')) {
+            this.rowsByKey = new Map(this.rows.map((row, i) => [String(this.keyOf(row, i)), row]));
+        }
+        if (changed.has('columns')) {
+            this.columnsByKey = new Map(this.columns.map((c) => [c.key, c]));
+        }
+    }
+    activateColumn(key) {
+        const col = this.columnsByKey.get(key);
+        if (col?.sortable)
+            this.emit('lyra-sort', { key: col.key });
+    }
+    activateRow(key) {
+        const row = this.rowsByKey.get(key);
+        if (row !== undefined)
+            this.emit('lyra-row-click', { row });
+    }
+    render() {
+        if (this.columns.length === 0) {
+            return html `<lyra-empty
+        heading=${this.noColumnsHeading}
+        description=${this.noColumnsDescription}
+      ></lyra-empty>`;
+        }
+        if (this.rows.length === 0) {
+            return html `<lyra-empty
+        heading=${this.emptyHeading}
+        description=${this.emptyDescription}
+      ></lyra-empty>`;
+        }
+        return html `
+      <div part="base">
+        <table part="table" role="grid" @click=${this.onTableClick} @keydown=${this.onTableKeyDown}>
+          <thead part="head">
+            <tr role="row">
+              ${this.columns.map((col) => {
+            const active = Boolean(col.sortable) && this.sortKey === col.key;
+            const ariaSort = active ? (this.sortDir === 'asc' ? 'ascending' : 'descending') : 'none';
+            return html `<th
+                  part="header-cell"
+                  role="columnheader"
+                  scope="col"
+                  data-col-key=${col.key}
+                  data-align=${col.align ?? 'start'}
+                  ?data-sortable=${col.sortable}
+                  aria-sort=${col.sortable ? ariaSort : nothing}
+                  tabindex=${col.sortable ? '0' : '-1'}
+                >
+                  ${col.label}
+                  ${active
+                ? html `<span part="sort-icon" data-dir=${this.sortDir} aria-hidden="true"
+                        >${chevronIcon()}</span
+                      >`
+                : nothing}
+                </th>`;
+        })}
+            </tr>
+          </thead>
+          <tbody>
+            ${repeat(this.rows, (row, i) => this.keyOf(row, i), (row, i) => {
+            const key = this.keyOf(row, i);
+            const selected = this.selectedKey !== null && this.selectedKey === key;
+            return html `<tr
+                  part="row"
+                  role="row"
+                  data-row-key=${String(key)}
+                  aria-selected=${selected ? 'true' : 'false'}
+                  tabindex="0"
+                >
+                  ${this.columns.map((col) => html `<td part="cell" role="gridcell" data-align=${col.align ?? 'start'}>
+                        ${col.cell(row)}
+                      </td>`)}
+                </tr>`;
+        })}
+          </tbody>
+        </table>
+        ${this.hasMore
+            ? html `<button
+              part="more-button"
+              type="button"
+              @click=${() => this.emit('lyra-load-more')}
+            >
+              ${this.moreLabel}
+            </button>`
+            : nothing}
+      </div>
+    `;
+    }
+}
+__decorate([
+    property({ attribute: false })
+], LyraTable.prototype, "columns", void 0);
+__decorate([
+    property({ attribute: false })
+], LyraTable.prototype, "rows", void 0);
+__decorate([
+    property({ attribute: 'sort-key' })
+], LyraTable.prototype, "sortKey", void 0);
+__decorate([
+    property({ attribute: 'sort-dir' })
+], LyraTable.prototype, "sortDir", void 0);
+__decorate([
+    property({ attribute: false })
+], LyraTable.prototype, "rowKey", void 0);
+__decorate([
+    property({ attribute: false })
+], LyraTable.prototype, "selectedKey", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'has-more', reflect: true })
+], LyraTable.prototype, "hasMore", void 0);
+__decorate([
+    property({ attribute: 'more-label' })
+], LyraTable.prototype, "moreLabel", void 0);
+__decorate([
+    property({ attribute: 'empty-heading' })
+], LyraTable.prototype, "emptyHeading", void 0);
+__decorate([
+    property({ attribute: 'empty-description' })
+], LyraTable.prototype, "emptyDescription", void 0);
+__decorate([
+    property({ attribute: 'no-columns-heading' })
+], LyraTable.prototype, "noColumnsHeading", void 0);
+__decorate([
+    property({ attribute: 'no-columns-description' })
+], LyraTable.prototype, "noColumnsDescription", void 0);
+defineElement('table', LyraTable);

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

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/dist/components/table/table.styles.js

@@ -0,0 +1,98 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: block;
+    inline-size: 100%;
+  }
+  [part='base'] {
+    overflow: auto;
+    max-block-size: var(--lyra-table-max-height, none);
+    border: 1px solid var(--lyra-color-border);
+    border-radius: var(--lyra-radius);
+  }
+  [part='table'] {
+    inline-size: 100%;
+    border-collapse: collapse;
+    font-size: 0.875rem;
+  }
+  [part='header-cell'] {
+    position: sticky;
+    inset-block-start: 0;
+    background: var(--lyra-color-surface);
+    text-align: start;
+    font-weight: 600;
+    padding: var(--lyra-space-s);
+    border-block-end: 1px solid var(--lyra-color-border);
+    cursor: default;
+    white-space: nowrap;
+  }
+  [part='header-cell'][aria-sort]:not([aria-sort='none']),
+  [part='header-cell'][data-sortable] {
+    cursor: pointer;
+  }
+  [part='header-cell'][data-sortable]:hover {
+    background: var(--lyra-color-brand-quiet);
+  }
+  [part='header-cell'][data-sortable]:focus-visible {
+    outline: var(--lyra-focus-ring-width) solid var(--lyra-focus-ring-color);
+    outline-offset: var(--lyra-focus-ring-offset);
+  }
+  [part='header-cell'][data-align='end'] {
+    text-align: end;
+  }
+  [part='sort-icon'] {
+    display: inline-block;
+    margin-inline-start: var(--lyra-space-xs);
+    vertical-align: middle;
+    transition: transform var(--lyra-transition-fast);
+  }
+  [part='sort-icon'] svg {
+    display: block;
+  }
+  /* Rotate the wrapping part element, not the svg — internal/icons.ts's
+     documented contract ("callers ... rotate the wrapping part element via
+     CSS transform: rotate(...), not the svg"). Design-review finding on
+     Task 3 (lyra-table sort indicator): this previously rotated the inner
+     <svg> directly. */
+  [part='sort-icon'][data-dir='asc'] {
+    transform: rotate(-90deg);
+  }
+  [part='sort-icon'][data-dir='desc'] {
+    transform: rotate(90deg);
+  }
+  [part='row']:hover {
+    background: var(--lyra-color-brand-quiet);
+  }
+  [part='row'][aria-selected='true'] {
+    background: var(--lyra-color-brand-quiet);
+  }
+  [part='row']:focus-visible {
+    outline: var(--lyra-focus-ring-width) solid var(--lyra-focus-ring-color);
+    outline-offset: var(--lyra-focus-ring-offset);
+  }
+  [part='cell'] {
+    padding: var(--lyra-space-s);
+    border-block-end: 1px solid var(--lyra-color-border);
+  }
+  [part='cell'][data-align='end'] {
+    text-align: end;
+  }
+  [part='more-button'] {
+    display: block;
+    inline-size: 100%;
+    padding: var(--lyra-space-s);
+    border: none;
+    background: none;
+    color: var(--lyra-color-brand);
+    font: inherit;
+    cursor: pointer;
+    border-block-start: 1px solid var(--lyra-color-border);
+  }
+  [part='more-button']:hover {
+    background: var(--lyra-color-brand-quiet);
+  }
+  [part='more-button']:focus-visible {
+    outline: var(--lyra-focus-ring-width) solid var(--lyra-focus-ring-color);
+    outline-offset: var(--lyra-focus-ring-offset);
+  }
+`;

package/dist/components/time-range/time-range.d.ts

@@ -0,0 +1,40 @@
+import { type TemplateResult, type PropertyValues } from 'lit';
+import { LyraElement } from '../../internal/lyra-element.js';
+/**
+ * `<lyra-time-range>` — a two-handle brush/scrubber over a numeric domain.
+ * Callers map their own time axis to `[min, max]`; no date logic lives here
+ * (matches the no-date-library constraint used elsewhere in this library).
+ *
+ * @customElement lyra-time-range
+ * @event lyra-input - Fired continuously while dragging. `detail: { start, end }`.
+ * @event lyra-change - Fired on release / keyup-commit. `detail: { start, end }`.
+ * @csspart base, track, range, handle-start, handle-end
+ */
+export declare class LyraTimeRange extends LyraElement {
+    static styles: import("lit").CSSResultGroup[];
+    min: number;
+    max: number;
+    start: number;
+    end: number;
+    step: number;
+    disabled: boolean;
+    private dragging;
+    disconnectedCallback(): void;
+    private percentOf;
+    private clamp;
+    private setValue;
+    private onKeyDown;
+    private onKeyUp;
+    private onPointerDown;
+    private onPointerMove;
+    private onPointerUp;
+    /** Stop an in-progress drag, optionally committing a final lyra-change. */
+    private endDrag;
+    protected willUpdate(changed: PropertyValues): void;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-time-range': LyraTimeRange;
+    }
+}