@aceshooting/lyra-ui 0.1.0 → 0.1.1

package/dist/components/empty/empty.d.ts

@@ -0,0 +1,31 @@
+import { type TemplateResult } from 'lit';
+import { LyraElement } from '../../internal/lyra-element.js';
+/**
+ * `<lyra-empty>` — a generic empty/no-data state. First-party invention (no
+ * Web Awesome equivalent); fills the gap identified across ~30 surveyed repos.
+ *
+ * @customElement lyra-empty
+ * @slot - Custom icon or illustration (defaults to none).
+ * @slot actions - Buttons/links shown below the description.
+ * @csspart base, icon, heading, description, actions
+ */
+export declare class LyraEmpty extends LyraElement {
+    static styles: import("lit").CSSResultGroup[];
+    /** Short heading, e.g. "No results". */
+    heading: string;
+    /** Supporting copy, e.g. "Try a different search." */
+    description: string;
+    private hasIcon;
+    private hasActions;
+    firstUpdated(): void;
+    private checkIconSlot;
+    private checkActionsSlot;
+    private onIconSlotChange;
+    private onActionsSlotChange;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-empty': LyraEmpty;
+    }
+}

package/dist/components/empty/empty.js

@@ -0,0 +1,78 @@
+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 } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { LyraElement } from '../../internal/lyra-element.js';
+import { defineElement } from '../../internal/prefix.js';
+import { styles } from './empty.styles.js';
+/**
+ * `<lyra-empty>` — a generic empty/no-data state. First-party invention (no
+ * Web Awesome equivalent); fills the gap identified across ~30 surveyed repos.
+ *
+ * @customElement lyra-empty
+ * @slot - Custom icon or illustration (defaults to none).
+ * @slot actions - Buttons/links shown below the description.
+ * @csspart base, icon, heading, description, actions
+ */
+export class LyraEmpty extends LyraElement {
+    constructor() {
+        super(...arguments);
+        /** Short heading, e.g. "No results". */
+        this.heading = '';
+        /** Supporting copy, e.g. "Try a different search." */
+        this.description = '';
+        // `[part='icon']:empty` never matches because the part always contains a
+        // `<slot>` element (CSS `:empty` only ignores text/comment nodes). Track
+        // real slot assignment in JS instead and key the CSS off these instead.
+        this.hasIcon = false;
+        this.hasActions = false;
+        this.onIconSlotChange = (e) => {
+            this.checkIconSlot(e.target);
+        };
+        this.onActionsSlotChange = (e) => {
+            this.checkActionsSlot(e.target);
+        };
+    }
+    static { this.styles = [LyraElement.styles, styles]; }
+    firstUpdated() {
+        // `slotchange` isn't guaranteed to fire for content already present at
+        // parse/upgrade time in every browser, so do an initial check here too.
+        this.checkIconSlot(this.shadowRoot.querySelector('slot:not([name])'));
+        this.checkActionsSlot(this.shadowRoot.querySelector('slot[name="actions"]'));
+    }
+    checkIconSlot(slot) {
+        this.hasIcon = slot.assignedElements({ flatten: true }).length > 0;
+    }
+    checkActionsSlot(slot) {
+        this.hasActions = slot.assignedElements({ flatten: true }).length > 0;
+    }
+    render() {
+        return html `
+      <div part="base">
+        <div part="icon" ?hidden=${!this.hasIcon}><slot @slotchange=${this.onIconSlotChange}></slot></div>
+        <p part="heading">${this.heading}</p>
+        <p part="description">${this.description}</p>
+        <div part="actions" ?hidden=${!this.hasActions}>
+          <slot name="actions" @slotchange=${this.onActionsSlotChange}></slot>
+        </div>
+      </div>
+    `;
+    }
+}
+__decorate([
+    property()
+], LyraEmpty.prototype, "heading", void 0);
+__decorate([
+    property()
+], LyraEmpty.prototype, "description", void 0);
+__decorate([
+    state()
+], LyraEmpty.prototype, "hasIcon", void 0);
+__decorate([
+    state()
+], LyraEmpty.prototype, "hasActions", void 0);
+defineElement('empty', LyraEmpty);

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

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

package/dist/components/empty/empty.styles.js

@@ -0,0 +1,42 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: flex;
+  }
+  [part='base'] {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    gap: var(--lyra-space-s);
+    padding: var(--lyra-space-l);
+    color: var(--lyra-color-text-quiet);
+    inline-size: 100%;
+  }
+  [part='icon'] {
+    font-size: 2rem;
+    line-height: 1;
+    color: var(--lyra-color-border);
+  }
+  [part='icon'][hidden] {
+    display: none;
+  }
+  [part='heading'] {
+    font-weight: 600;
+    color: var(--lyra-color-text);
+    margin: 0;
+  }
+  [part='description'] {
+    font-size: 0.875rem;
+    margin: 0;
+  }
+  [part='description']:empty {
+    display: none;
+  }
+  [part='actions'] {
+    margin-block-start: var(--lyra-space-s);
+  }
+  [part='actions'][hidden] {
+    display: none;
+  }
+`;

package/dist/components/skeleton/skeleton.d.ts

@@ -0,0 +1,26 @@
+import { type TemplateResult, type PropertyValues } from 'lit';
+import { LyraElement } from '../../internal/lyra-element.js';
+export type SkeletonVariant = 'text' | 'circle' | 'rect';
+export type SkeletonEffect = 'pulse' | 'sheen';
+/**
+ * `<lyra-skeleton>` — a loading placeholder. First-party invention; every
+ * surveyed repo reinvents this as a bespoke `animate-pulse` div.
+ *
+ * @customElement lyra-skeleton
+ * @csspart base - The placeholder shape.
+ */
+export declare class LyraSkeleton extends LyraElement {
+    static styles: import("lit").CSSResultGroup[];
+    variant: SkeletonVariant;
+    effect: SkeletonEffect;
+    width?: string;
+    height?: string;
+    protected willUpdate(): void;
+    protected updated(changed: PropertyValues): void;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-skeleton': LyraSkeleton;
+    }
+}

package/dist/components/skeleton/skeleton.js

@@ -0,0 +1,65 @@
+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 } from 'lit';
+import { property } from 'lit/decorators.js';
+import { LyraElement } from '../../internal/lyra-element.js';
+import { defineElement } from '../../internal/prefix.js';
+import { srOnly } from '../../internal/a11y.js';
+import { styles } from './skeleton.styles.js';
+/**
+ * `<lyra-skeleton>` — a loading placeholder. First-party invention; every
+ * surveyed repo reinvents this as a bespoke `animate-pulse` div.
+ *
+ * @customElement lyra-skeleton
+ * @csspart base - The placeholder shape.
+ */
+export class LyraSkeleton extends LyraElement {
+    constructor() {
+        super(...arguments);
+        this.variant = 'text';
+        this.effect = 'pulse';
+    }
+    static { this.styles = [LyraElement.styles, styles, srOnly]; }
+    willUpdate() {
+        this.setAttribute('role', 'status');
+    }
+    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);
+            }
+            else {
+                base.style.removeProperty('--lyra-skeleton-w');
+            }
+            if (this.height) {
+                base.style.setProperty('--lyra-skeleton-h', this.height);
+            }
+            else {
+                base.style.removeProperty('--lyra-skeleton-h');
+            }
+        }
+    }
+    render() {
+        return html `<span part="base"><span class="sr-only">Loading…</span></span>`;
+    }
+}
+__decorate([
+    property({ reflect: true })
+], LyraSkeleton.prototype, "variant", void 0);
+__decorate([
+    property({ reflect: true })
+], LyraSkeleton.prototype, "effect", void 0);
+__decorate([
+    property()
+], LyraSkeleton.prototype, "width", void 0);
+__decorate([
+    property()
+], LyraSkeleton.prototype, "height", void 0);
+defineElement('skeleton', LyraSkeleton);

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

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

package/dist/components/skeleton/skeleton.styles.js

@@ -0,0 +1,57 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: inline-block;
+    inline-size: var(--lyra-skeleton-w, 100%);
+    block-size: var(--lyra-skeleton-h, 1em);
+  }
+  [part='base'] {
+    inline-size: 100%;
+    block-size: 100%;
+    background: var(--lyra-color-border);
+  }
+  :host([variant='text']) [part='base'] {
+    border-radius: var(--lyra-radius);
+  }
+  :host([variant='circle']) [part='base'] {
+    border-radius: 50%;
+  }
+  :host([variant='rect']) [part='base'] {
+    border-radius: var(--lyra-radius);
+  }
+  :host([effect='pulse']) [part='base'] {
+    animation: lyra-skeleton-pulse 1.5s ease-in-out infinite;
+  }
+  :host([effect='sheen']) [part='base'] {
+    background-image: linear-gradient(
+      90deg,
+      var(--lyra-color-border) 0%,
+      var(--lyra-color-surface) 50%,
+      var(--lyra-color-border) 100%
+    );
+    background-size: 200% 100%;
+    animation: lyra-skeleton-sheen 1.5s ease-in-out infinite;
+  }
+  @keyframes lyra-skeleton-pulse {
+    0%,
+    100% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.4;
+    }
+  }
+  @keyframes lyra-skeleton-sheen {
+    0% {
+      background-position: 200% 0;
+    }
+    100% {
+      background-position: -200% 0;
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    [part='base'] {
+      animation: none !important;
+    }
+  }
+`;

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

@@ -0,0 +1,27 @@
+import { type TemplateResult } from 'lit';
+import { LyraElement } from '../../internal/lyra-element.js';
+export type StatVariant = 'neutral' | 'success' | 'warning' | 'danger';
+/**
+ * `<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 declare class LyraStat extends LyraElement {
+    static styles: import("lit").CSSResultGroup[];
+    label: string;
+    value: string;
+    unit: string;
+    variant: StatVariant;
+    trend: number;
+    caption: string;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-stat': LyraStat;
+    }
+}

package/dist/components/stat/stat.js

@@ -0,0 +1,72 @@
+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 { LyraElement } from '../../internal/lyra-element.js';
+import { defineElement } from '../../internal/prefix.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 = '';
+    }
+    static { this.styles = [LyraElement.styles, styles]; }
+    render() {
+        const hasTrend = !isNaN(this.trend);
+        const direction = this.trend > 0 ? 'up' : this.trend < 0 ? 'down' : 'flat';
+        const arrow = direction === 'up' ? '▲' : direction === 'down' ? '▼' : '–';
+        return html `
+      <div part="base">
+        <span part="icon"><slot></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=${direction}>
+              ${arrow} ${Math.abs(this.trend)}%
+            </span>`
+            : nothing}
+        <div part="caption">${this.caption}<slot name="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);
+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,76 @@
+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']:empty {
+    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: 0.2rem;
+    font-size: 0.8125rem;
+    font-weight: 600;
+    border-radius: var(--lyra-radius);
+    padding: 0.05rem 0.4rem;
+    align-self: flex-start;
+  }
+  [part='trend'][data-direction='up'] {
+    color: var(--lyra-color-success);
+    background: color-mix(in srgb, var(--lyra-color-success) 8%, transparent);
+  }
+  [part='trend'][data-direction='down'] {
+    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']:empty {
+    display: none;
+  }
+`;

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

@@ -0,0 +1,42 @@
+import { type TemplateResult } 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. The host
+ * owns actual sorting/filtering/pagination of `rows`; this component renders
+ * and emits intents (`lyra-sort`, `lyra-row-click`, `lyra-load-more`).
+ *
+ * @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
+ */
+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;
+    private keyOf;
+    private onHeaderClick;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-table': LyraTable;
+    }
+}

package/dist/components/table/table.js

@@ -0,0 +1,149 @@
+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 '../empty/empty.js';
+/**
+ * `<lyra-table>` — a presentational, sort/select-aware data table. The host
+ * owns actual sorting/filtering/pagination of `rows`; this component renders
+ * and emits intents (`lyra-sort`, `lyra-row-click`, `lyra-load-more`).
+ *
+ * @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
+ */
+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 = '';
+    }
+    static { this.styles = [LyraElement.styles, styles]; }
+    keyOf(row, index) {
+        return this.rowKey ? this.rowKey(row) : index;
+    }
+    onHeaderClick(col) {
+        if (!col.sortable)
+            return;
+        this.emit('lyra-sort', { key: col.key });
+    }
+    render() {
+        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">
+          <thead part="head">
+            <tr role="row">
+              ${this.columns.map((col) => {
+            const ariaSort = this.sortKey === col.key ? (this.sortDir === 'asc' ? 'ascending' : 'descending') : 'none';
+            return html `<th
+                  part="header-cell"
+                  role="columnheader"
+                  scope="col"
+                  data-align=${col.align ?? 'start'}
+                  ?data-sortable=${col.sortable}
+                  aria-sort=${col.sortable ? ariaSort : nothing}
+                  tabindex=${col.sortable ? '0' : '-1'}
+                  @click=${() => this.onHeaderClick(col)}
+                  @keydown=${(e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    this.onHeaderClick(col);
+                }
+            }}
+                >
+                  ${col.label}
+                </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"
+                  aria-selected=${selected ? 'true' : 'false'}
+                  tabindex="0"
+                  @click=${() => this.emit('lyra-row-click', { row })}
+                  @keydown=${(e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    this.emit('lyra-row-click', { row });
+                }
+            }}
+                >
+                  ${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);
+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,66 @@
+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-align='end'] {
+    text-align: end;
+  }
+  [part='row']:hover {
+    background: var(--lyra-color-brand-quiet);
+  }
+  [part='row'][aria-selected='true'] {
+    background: var(--lyra-color-brand-quiet);
+  }
+  [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);
+  }
+`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aceshooting/lyra-ui",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Free, clean-room Lit web components — a companion to Web Awesome.",
   "license": "MIT",
   "type": "module",
@@ -33,8 +33,8 @@
     "./dist/lyra.js"
   ],
   "dependencies": {
-    "lit": "^3.2.0",
-    "@floating-ui/dom": "^1.6.0"
+    "@floating-ui/dom": "^1.7.6",
+    "lit": "^3.3.3"
   },
   "peerDependencies": {
     "@aceshooting/lyra-flags": "^0.1.0"
@@ -45,13 +45,13 @@
     }
   },
   "devDependencies": {
-    "typescript": "^5.6.0",
-    "@web/test-runner": "^0.19.0",
-    "@web/test-runner-playwright": "^0.11.0",
-    "@web/dev-server-esbuild": "^1.0.2",
+    "@aceshooting/lyra-flags": "^0.1.0",
+    "@custom-elements-manifest/analyzer": "^0.11.0",
     "@open-wc/testing": "^4.0.0",
-    "@custom-elements-manifest/analyzer": "^0.10.0",
-    "@aceshooting/lyra-flags": "0.1.0"
+    "@web/dev-server-esbuild": "^2.0.0",
+    "@web/test-runner": "^1.0.0",
+    "@web/test-runner-playwright": "^1.0.0",
+    "typescript": "^6.0.3"
   },
   "customElements": "custom-elements.json",
   "scripts": {