@aceshooting/lyra-ui 2.0.0 → 2.2.0

package/dist/components/switch/switch.styles.js

@@ -2,13 +2,13 @@ import { css } from 'lit';
 export const styles = css `
   :host {
     display: inline-block;
-    /* Component-local geometry knobs (same "define your own on :host"
-       pattern as lyra-toast's --gap/--width) — a fully-rounded pill/thumb
+    /* Component-local geometry knobs (defined on :host so each instance can
+       tune its own geometry) — a fully-rounded pill/thumb
        needs a radius well past --lyra-radius's small 0.375rem default, so
        it's expressed here rather than bent onto that shared token. */
-    --track-inline-size: 2.25rem;
-    --track-block-size: 1.25rem;
-    --thumb-offset: 2px;
+    --lyra-switch-track-inline-size: var(--lyra-size-2-25rem);
+    --lyra-switch-track-block-size: var(--lyra-size-1-25rem);
+    --lyra-switch-thumb-offset: var(--lyra-size-2px);
   }
   [part='base'] {
     display: inline-flex;
@@ -21,7 +21,7 @@ export const styles = css `
     outline: var(--lyra-focus-ring-width) solid var(--lyra-focus-ring-color);
     outline-offset: var(--lyra-focus-ring-offset);
   }
-  :host([disabled]) [part='base'] {
+  :host(:disabled) [part='base'] {
     cursor: not-allowed;
     opacity: var(--lyra-opacity-disabled);
   }
@@ -29,9 +29,9 @@ export const styles = css `
   [part='track'] {
     position: relative;
     flex: 0 0 auto;
-    inline-size: var(--track-inline-size);
-    block-size: var(--track-block-size);
-    border-radius: 999px;
+    inline-size: var(--lyra-switch-track-inline-size);
+    block-size: var(--lyra-switch-track-block-size);
+    border-radius: var(--lyra-radius-pill);
     background: var(--lyra-color-border);
     transition: background-color var(--lyra-transition-fast);
   }
@@ -41,10 +41,10 @@ export const styles = css `
 
   [part='thumb'] {
     position: absolute;
-    inset-block-start: var(--thumb-offset);
-    inset-inline-start: var(--thumb-offset);
-    inline-size: calc(var(--track-block-size) - (var(--thumb-offset) * 2));
-    block-size: calc(var(--track-block-size) - (var(--thumb-offset) * 2));
+    inset-block-start: var(--lyra-switch-thumb-offset);
+    inset-inline-start: var(--lyra-switch-thumb-offset);
+    inline-size: calc(var(--lyra-switch-track-block-size) - (var(--lyra-switch-thumb-offset) * 2));
+    block-size: calc(var(--lyra-switch-track-block-size) - (var(--lyra-switch-thumb-offset) * 2));
     border-radius: 50%;
     background: var(--lyra-color-surface);
     /* Animates the logical 'inset-inline-start' rather than a physical
@@ -54,7 +54,10 @@ export const styles = css `
     transition: inset-inline-start var(--lyra-transition-fast);
   }
   :host([checked]) [part='thumb'] {
-    inset-inline-start: calc(var(--track-inline-size) - var(--track-block-size) + var(--thumb-offset));
+    inset-inline-start: calc(
+      var(--lyra-switch-track-inline-size) - var(--lyra-switch-track-block-size) +
+        var(--lyra-switch-thumb-offset)
+    );
   }
 
   /* No explicit "display" here (unlike e.g. lyra-combobox's
@@ -62,7 +65,7 @@ export const styles = css `
      "[hidden] { display: none }" rule needs no author-side override to
      take effect when hasLabelSlot is false. */
   [part='label'] {
-    font-size: 0.875rem;
+    font-size: var(--lyra-font-size-md-sm);
     color: var(--lyra-color-text);
   }
 
@@ -73,3 +76,4 @@ export const styles = css `
     }
   }
 `;
+//# sourceMappingURL=switch.styles.js.map

package/dist/components/switch/switch.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch.styles.js","sourceRoot":"","sources":["../../../src/components/switch/switch.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4ExB,CAAC"}

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

@@ -0,0 +1,212 @@
+import { type TemplateResult, type PropertyValues } from 'lit';
+import { LyraElement } from '../../internal/lyra-element.js';
+import '../empty/empty.class.js';
+export interface TableColumn<T> {
+    key: string;
+    label: string;
+    sortable?: boolean;
+    align?: 'start' | 'end';
+    /** Responsive priority — `undefined` (the default) means "always visible".
+     *  `'low'` columns hide first (narrowest container), `'medium'` next, as
+     *  `[part='base']`'s container-query width shrinks; both can be forced back
+     *  on via `[part='reveal-columns-button']`. */
+    priority?: 'medium' | 'low';
+    /** Pins this column's header/cell to the inline-start edge with
+     *  `position: sticky` so it stays visible while the table scrolls
+     *  horizontally. */
+    sticky?: boolean;
+    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. Both listeners guard
+ * against nested interactive `cell()` content first (see
+ * `INTERACTIVE_SELECTOR`) so a button/link/input inside a cell owns its own
+ * activation instead of triggering `lyra-row-click`.
+ *
+ * Keyboard focus follows a roving-tabindex pattern (one `tabindex="0"` stop
+ * among the header cells, one among the body rows — see `focusedColKey()` /
+ * `focusedRowKey()`), matching this repo's other `role="grid"`/composite
+ * widgets. Left/Right/Home/End move within the header row; Up/Down/Home/End
+ * move within the body; Down from the header enters the body's roving stop,
+ * and Up from the body's first row returns to the header's roving stop.
+ * Enter/Space still only sort/activate (see `activateColumn()` /
+ * `activateRow()`).
+ *
+ * Set `aria-label` on the host to give the `role="grid"` element an
+ * accessible name; it's forwarded into the shadow DOM's `<table>`.
+ *
+ * `columns[].priority` ('medium' | 'low') hides that column under
+ * `[part='base']`'s `@container` breakpoints; `[part='reveal-columns-button']`
+ * forces them all back into view. Rather than a *static* check of whether any
+ * column merely declares a `priority`, the button (and the public
+ * `columnsHidden` property, see below) reflects whether a `priority` column
+ * is *actually* hidden right now — measured via `ResizeObserver` on
+ * `[part='base']` plus a post-render DOM check — or `showAllColumns`
+ * force-visible mode is currently active (so there's still a way to toggle
+ * it back off). `columns[].sticky` pins a column's header/cells to the
+ * inline-start edge while the table scrolls horizontally.
+ *
+ * @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.
+ * @event lyra-columns-hidden-change - `columnsHidden` actually changed value
+ *   (a `priority` column just became hidden/un-hidden by the `@container`
+ *   rules, or `showAllColumns` force-visible mode was toggled while a
+ *   `priority` column was hidden). `detail: { hidden: boolean }`.
+ * @csspart base - The root wrapper around the `<table>` and its footer controls.
+ * @csspart table - The `<table role="grid">` element.
+ * @csspart head - The `<thead>` element.
+ * @csspart header-cell - Each `<th>` header cell.
+ * @csspart row - Each body `<tr>`.
+ * @csspart cell - Each body `<td>`.
+ * @csspart more-button - The "load more" control, shown when `hasMore` is true.
+ * @csspart sort-icon - The chevron shown in the active sortable column's header cell.
+ * @csspart reveal-columns-button - The button that toggles `priority`-hidden columns back into view.
+ */
+export interface LyraTableEventMap<T = unknown> {
+    'lyra-columns-hidden-change': CustomEvent<{
+        hidden: boolean;
+    }>;
+    'lyra-sort': CustomEvent<{
+        key: string;
+    }>;
+    'lyra-row-click': CustomEvent<{
+        row: T;
+    }>;
+    'lyra-load-more': CustomEvent<undefined>;
+}
+export declare class LyraTable<T = unknown> extends LyraElement<LyraTableEventMap<T>> {
+    static styles: import("lit").CSSResultGroup[];
+    columns: TableColumn<T>[];
+    rows: T[];
+    sortKey: string;
+    sortDir: 'asc' | 'desc';
+    /** Derives each row's stable identity for `repeat()`'s DOM-reconciliation
+     *  key and the delegated click/keydown row lookup (`rowsByKey`,
+     *  `data-row-key`). When omitted, `keyOf()` falls back to the row's index
+     *  in `rows`, which is only a safe identity while `rows` never reorders —
+     *  provide `rowKey` whenever `rows` can be sorted, filtered, or otherwise
+     *  re-ordered across renders, or row identity (selection, focus, click
+     *  targets) can silently attach to the wrong row. */
+    rowKey?: (row: T) => string | number;
+    selectedKey: string | number | null;
+    hasMore: boolean;
+    moreLabel: string;
+    emptyHeading: string;
+    emptyDescription: string;
+    noColumnsHeading: string;
+    noColumnsDescription: string;
+    revealColumnsLabel: string;
+    hideColumnsLabel: string;
+    /** Whether a `priority` column is *actually* hidden right now by
+     *  table.styles.ts's `@container` rules, or `showAllColumns` force-visible
+     *  mode is currently active — the same computed value that gates whether
+     *  `[part='reveal-columns-button']` renders at all (see `render()`), kept
+     *  in sync by `recomputeColumnsHidden()`. Computed/read-only by
+     *  convention: consumers may read it (and listen for
+     *  `lyra-columns-hidden-change`), but setting it directly has no lasting
+     *  effect, since it's recomputed on the very next render or
+     *  `[part='base']` resize. */
+    columnsHidden: boolean;
+    /** Forces `priority`-hidden columns back into view, overriding the
+     *  `@container` hide rules in table.styles.ts. Toggled by
+     *  `[part='reveal-columns-button']`. */
+    private showAllColumns;
+    /** Roving-tabindex position among header cells; `null` until a header is
+     *  clicked/navigated to, at which point `focusedColKey()` falls back to
+     *  the first column. */
+    private activeColKey;
+    /** Roving-tabindex position among body rows; `null` until a row is
+     *  clicked/navigated to, at which point `focusedRowKey()` falls back to
+     *  `selectedKey` (if it matches a row) or the first row. */
+    private activeRowKey;
+    private rowsByKey;
+    private columnsByKey;
+    /** Watches `[part='base']`'s own inline-size — the `@container` query
+     *  container table.styles.ts's priority-hide rules react to — so a
+     *  `priority` column flipping hidden/visible from an *external* width
+     *  change (a window resize, an ancestor flex-layout reflow, ...) is caught
+     *  even though no Lit-tracked property changed. Mirrors
+     *  lite-chart.ts's connectedCallback()/disconnectedCallback() ResizeObserver
+     *  lifecycle. */
+    private resizeObserver?;
+    /** The `[part='base']` element `resizeObserver` is currently observing —
+     *  `render()`'s columns/rows-empty branches swap in `<lyra-empty>` instead,
+     *  a different template shape that gives `[part='base']` a fresh DOM
+     *  identity on the next non-empty render, so `updated()` re-observes
+     *  whenever this no longer matches the live element. */
+    private observedBase?;
+    private readonly observedHeaders;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private observeBase;
+    private observeHeaders;
+    /** Recomputes `columnsHidden` from the live DOM (mirrors `visibleHeaders()`'s
+     *  own `offsetParent !== null` technique for detecting `@container`-hidden
+     *  cells) and dispatches `lyra-columns-hidden-change` only on a real
+     *  transition. Called from `updated()` (covers a change driven by
+     *  `columns`/`rows`/`showAllColumns` rather than a container resize) and
+     *  from the `ResizeObserver` callback (covers a container resize with no
+     *  Lit-tracked property change at all). */
+    private recomputeColumnsHidden;
+    private rehomeFocusedColumn;
+    private keyOf;
+    /** The header cell that currently owns `tabindex="0"`. */
+    private focusedColKey;
+    /** The body row that currently owns `tabindex="0"`. */
+    private focusedRowKey;
+    protected willUpdate(changed: PropertyValues): void;
+    /** Each sticky column's cumulative inline-start offset — the sum of the *rendered
+     *  width* of every earlier sticky column — so multiple sticky columns
+     *  stack left-to-right instead of all pinning to inset-inline-start: 0 and
+     *  overlapping. Table columns are intrinsically sized (not fixed-width), so
+     *  this can't be computed in CSS alone; it requires measuring the actual
+     *  laid-out `offsetWidth` of each earlier sticky column's header cell. */
+    private stickyOffsets;
+    private applyStickyOffsets;
+    /** Applies stickyOffsets()'s measured per-column offsets as an inline
+     *  `--lyra-table-sticky-offset` custom property on every header cell and
+     *  body cell in that column (addressed by the shared `data-col-key`
+     *  attribute). This is a post-render DOM measurement — column widths
+     *  aren't known until after the browser has laid out this update's
+     *  render() output — so it runs from `updated()`, not `willUpdate()`,
+     *  intentionally kept as a separate pass from the rowsByKey/columnsByKey
+     *  rebuild above: those two must stay in `willUpdate()` so `render()`'s
+     *  own `focusedRowKey()` call sees the current update's identity maps
+     *  (e.g. a freshly-assigned `selectedKey` resolving to the correct
+     *  roving-tabindex row on the very first paint), whereas the sticky-offset
+     *  measurement can only run after that same paint has happened. Only runs
+     *  when `hasSticky` is true (opt-in) and simply recomputes on every
+     *  update; column widths are measured per update so the current layout
+     *  reflects the rendered columns. */
+    protected updated(changed: PropertyValues): void;
+    private activateColumn;
+    private activateRow;
+    /** Header cells currently in the tab sequence — excludes columns hidden by
+     *  a `priority`-driven `@container` rule (table.styles.ts), so Left/Right/
+     *  Home/End never strand the roving tab stop on a `display: none` cell
+     *  that `.focus()` would silently no-op on. Scoped to `th` — body `<td>`s
+     *  now carry the same `data-col-key` attribute (for the sticky-offset
+     *  measurement pass) but must never be treated as header cells here. */
+    private visibleHeaders;
+    private focusHeader;
+    private focusRow;
+    private toggleColumns;
+    private onTableClick;
+    private onTableKeyDown;
+    private onHeaderKeyDown;
+    private onRowKeyDown;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-table': LyraTable;
+    }
+}
+//# sourceMappingURL=table.class.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"table.class.d.ts","sourceRoot":"","sources":["../../../src/components/table/table.class.ts"],"names":[],"mappings":"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"}