@aceshooting/lyra-ui 1.0.0 → 1.1.0

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

@@ -6,6 +6,15 @@ export interface TableColumn<T> {
     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;
 }
 /**
@@ -14,13 +23,31 @@ export interface TableColumn<T> {
  * 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.
+ * 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()`).
+ *
+ * `columns[].priority` ('medium' | 'low') hides that column under
+ * `[part='base']`'s `@container` breakpoints; `[part='reveal-columns-button']`
+ * (rendered whenever any column has a priority) forces them all back into
+ * view. `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.
- * @csspart base, table, head, header-cell, row, cell, more-button, sort-icon
+ * @csspart base, table, head, header-cell, row, cell, more-button, sort-icon, reveal-columns-button
  */
 export declare class LyraTable<T = unknown> extends LyraElement {
     static styles: import("lit").CSSResultGroup[];
@@ -28,6 +55,13 @@ export declare class LyraTable<T = unknown> extends LyraElement {
     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;
@@ -36,14 +70,42 @@ export declare class LyraTable<T = unknown> extends LyraElement {
     emptyDescription: string;
     noColumnsHeading: string;
     noColumnsDescription: string;
+    revealColumnsLabel: string;
+    hideColumnsLabel: string;
+    /** 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;
     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;
     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. */
+    private visibleHeaders;
+    private focusHeader;
+    private focusRow;
+    private toggleColumns;
     private onTableClick;
     private onTableKeyDown;
+    private onHeaderKeyDown;
+    private onRowKeyDown;
     render(): TemplateResult;
 }
 declare global {

package/dist/components/table/table.js

@@ -5,26 +5,49 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { html, nothing } from 'lit';
-import { property } from 'lit/decorators.js';
+import { property, state } 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';
+/** Interactive elements a nested `cell()` template may render (e.g. an
+ *  actions-column button). Clicks/keydowns landing on one of these — or
+ *  bubbling up through one — must not be re-interpreted as row/column
+ *  activation by the table's own delegated listeners. */
+const INTERACTIVE_SELECTOR = 'button, a[href], input, select, textarea, [role="button"]';
 /**
  * `<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.
+ * 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()`).
+ *
+ * `columns[].priority` ('medium' | 'low') hides that column under
+ * `[part='base']`'s `@container` breakpoints; `[part='reveal-columns-button']`
+ * (rendered whenever any column has a priority) forces them all back into
+ * view. `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.
- * @csspart base, table, head, header-cell, row, cell, more-button, sort-icon
+ * @csspart base, table, head, header-cell, row, cell, more-button, sort-icon, reveal-columns-button
  */
 export class LyraTable extends LyraElement {
     constructor() {
@@ -40,10 +63,32 @@ export class LyraTable extends LyraElement {
         this.emptyDescription = '';
         this.noColumnsHeading = 'No columns configured';
         this.noColumnsDescription = '';
+        this.revealColumnsLabel = 'Show all columns';
+        this.hideColumnsLabel = 'Show fewer columns';
+        /** Forces `priority`-hidden columns back into view, overriding the
+         *  `@container` hide rules in table.styles.ts. Toggled by
+         *  `[part='reveal-columns-button']`. */
+        this.showAllColumns = false;
+        /** Roving-tabindex position among header cells; `null` until a header is
+         *  clicked/navigated to, at which point `focusedColKey()` falls back to
+         *  the first column. */
+        this.activeColKey = null;
+        /** 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. */
+        this.activeRowKey = null;
         this.rowsByKey = new Map();
         this.columnsByKey = new Map();
+        this.toggleColumns = () => {
+            this.showAllColumns = !this.showAllColumns;
+        };
         this.onTableClick = (e) => {
             const target = e.target;
+            // A cell()-rendered button/link/input etc. owns its own click — don't let
+            // the delegated row/column resolution below re-interpret it as row or
+            // header activation.
+            if (target.closest(INTERACTIVE_SELECTOR))
+                return;
             const th = target.closest('[data-col-key]');
             if (th)
                 return this.activateColumn(th.dataset.colKey);
@@ -52,25 +97,43 @@ export class LyraTable extends LyraElement {
                 this.activateRow(tr.dataset.rowKey);
         };
         this.onTableKeyDown = (e) => {
-            if (e.key !== 'Enter' && e.key !== ' ')
-                return;
             const target = e.target;
+            // Same guard as onTableClick — also skips the table's own
+            // preventDefault(), so a focused nested control keeps its native/own
+            // Enter or Space activation instead of having it swallowed.
+            if (target.closest(INTERACTIVE_SELECTOR))
+                return;
             const th = target.closest('[data-col-key]');
-            if (th) {
-                e.preventDefault();
-                return this.activateColumn(th.dataset.colKey);
-            }
+            if (th)
+                return this.onHeaderKeyDown(e, th);
             const tr = target.closest('[data-row-key]');
-            if (tr) {
-                e.preventDefault();
-                this.activateRow(tr.dataset.rowKey);
-            }
+            if (tr)
+                this.onRowKeyDown(e, tr);
         };
     }
     static { this.styles = [LyraElement.styles, styles]; }
     keyOf(row, index) {
         return this.rowKey ? this.rowKey(row) : index;
     }
+    /** The header cell that currently owns `tabindex="0"`. */
+    focusedColKey() {
+        if (this.activeColKey !== null && this.columnsByKey.has(this.activeColKey)) {
+            return this.activeColKey;
+        }
+        return this.columns[0]?.key ?? null;
+    }
+    /** The body row that currently owns `tabindex="0"`. */
+    focusedRowKey() {
+        if (this.activeRowKey !== null && this.rowsByKey.has(this.activeRowKey)) {
+            return this.activeRowKey;
+        }
+        if (this.selectedKey !== null) {
+            const selected = String(this.selectedKey);
+            if (this.rowsByKey.has(selected))
+                return selected;
+        }
+        return this.rows.length > 0 ? String(this.keyOf(this.rows[0], 0)) : null;
+    }
     willUpdate(changed) {
         if (changed.has('rows') || changed.has('rowKey')) {
             this.rowsByKey = new Map(this.rows.map((row, i) => [String(this.keyOf(row, i)), row]));
@@ -80,15 +143,112 @@ export class LyraTable extends LyraElement {
         }
     }
     activateColumn(key) {
+        this.activeColKey = key;
         const col = this.columnsByKey.get(key);
         if (col?.sortable)
             this.emit('lyra-sort', { key: col.key });
     }
     activateRow(key) {
+        this.activeRowKey = key;
         const row = this.rowsByKey.get(key);
         if (row !== undefined)
             this.emit('lyra-row-click', { row });
     }
+    /** 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. */
+    visibleHeaders() {
+        return [...this.renderRoot.querySelectorAll('[data-col-key]')].filter((el) => el.offsetParent !== null);
+    }
+    focusHeader(el) {
+        if (!el?.dataset.colKey)
+            return;
+        this.activeColKey = el.dataset.colKey;
+        el.focus();
+    }
+    focusRow(el) {
+        if (!el?.dataset.rowKey)
+            return;
+        this.activeRowKey = el.dataset.rowKey;
+        el.focus();
+    }
+    onHeaderKeyDown(e, th) {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            this.activateColumn(th.dataset.colKey);
+            return;
+        }
+        const headers = this.visibleHeaders();
+        const index = headers.indexOf(th);
+        if (index < 0)
+            return;
+        switch (e.key) {
+            case 'ArrowLeft':
+                e.preventDefault();
+                this.focusHeader(headers[Math.max(0, index - 1)]);
+                return;
+            case 'ArrowRight':
+                e.preventDefault();
+                this.focusHeader(headers[Math.min(headers.length - 1, index + 1)]);
+                return;
+            case 'Home':
+                e.preventDefault();
+                this.focusHeader(headers[0]);
+                return;
+            case 'End':
+                e.preventDefault();
+                this.focusHeader(headers[headers.length - 1]);
+                return;
+            case 'ArrowDown': {
+                e.preventDefault();
+                const rows = [...this.renderRoot.querySelectorAll('[data-row-key]')];
+                const key = this.focusedRowKey();
+                this.focusRow(rows.find((r) => r.dataset.rowKey === key) ?? rows[0] ?? null);
+                return;
+            }
+            default:
+                return;
+        }
+    }
+    onRowKeyDown(e, tr) {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            this.activateRow(tr.dataset.rowKey);
+            return;
+        }
+        const bodyRows = [...this.renderRoot.querySelectorAll('[data-row-key]')];
+        const index = bodyRows.indexOf(tr);
+        if (index < 0)
+            return;
+        switch (e.key) {
+            case 'ArrowDown':
+                e.preventDefault();
+                this.focusRow(bodyRows[Math.min(bodyRows.length - 1, index + 1)]);
+                return;
+            case 'ArrowUp':
+                e.preventDefault();
+                if (index === 0) {
+                    const headers = this.visibleHeaders();
+                    const key = this.focusedColKey();
+                    this.focusHeader(headers.find((h) => h.dataset.colKey === key) ?? headers[0] ?? null);
+                }
+                else {
+                    this.focusRow(bodyRows[index - 1]);
+                }
+                return;
+            case 'Home':
+                e.preventDefault();
+                this.focusRow(bodyRows[0]);
+                return;
+            case 'End':
+                e.preventDefault();
+                this.focusRow(bodyRows[bodyRows.length - 1]);
+                return;
+            default:
+                return;
+        }
+    }
     render() {
         if (this.columns.length === 0) {
             return html `<lyra-empty
@@ -102,8 +262,11 @@ export class LyraTable extends LyraElement {
         description=${this.emptyDescription}
       ></lyra-empty>`;
         }
+        const hasPriorityColumns = this.columns.some((col) => col.priority);
+        const focusedCol = this.focusedColKey();
+        const focusedRow = this.focusedRowKey();
         return html `
-      <div part="base">
+      <div part="base" ?data-force-visible=${this.showAllColumns}>
         <table part="table" role="grid" @click=${this.onTableClick} @keydown=${this.onTableKeyDown}>
           <thead part="head">
             <tr role="row">
@@ -116,9 +279,11 @@ export class LyraTable extends LyraElement {
                   scope="col"
                   data-col-key=${col.key}
                   data-align=${col.align ?? 'start'}
+                  data-priority=${col.priority ?? nothing}
+                  ?data-sticky=${col.sticky}
                   ?data-sortable=${col.sortable}
                   aria-sort=${col.sortable ? ariaSort : nothing}
-                  tabindex=${col.sortable ? '0' : '-1'}
+                  tabindex=${col.key === focusedCol ? '0' : '-1'}
                 >
                   ${col.label}
                   ${active
@@ -139,15 +304,31 @@ export class LyraTable extends LyraElement {
                   role="row"
                   data-row-key=${String(key)}
                   aria-selected=${selected ? 'true' : 'false'}
-                  tabindex="0"
+                  tabindex=${String(key) === focusedRow ? '0' : '-1'}
                 >
-                  ${this.columns.map((col) => html `<td part="cell" role="gridcell" data-align=${col.align ?? 'start'}>
+                  ${this.columns.map((col) => html `<td
+                        part="cell"
+                        role="gridcell"
+                        data-align=${col.align ?? 'start'}
+                        data-priority=${col.priority ?? nothing}
+                        ?data-sticky=${col.sticky}
+                      >
                         ${col.cell(row)}
                       </td>`)}
                 </tr>`;
         })}
           </tbody>
         </table>
+        ${hasPriorityColumns
+            ? html `<button
+              part="reveal-columns-button"
+              type="button"
+              aria-pressed=${this.showAllColumns ? 'true' : 'false'}
+              @click=${this.toggleColumns}
+            >
+              ${this.showAllColumns ? this.hideColumnsLabel : this.revealColumnsLabel}
+            </button>`
+            : nothing}
         ${this.hasMore
             ? html `<button
               part="more-button"
@@ -197,4 +378,19 @@ __decorate([
 __decorate([
     property({ attribute: 'no-columns-description' })
 ], LyraTable.prototype, "noColumnsDescription", void 0);
+__decorate([
+    property({ attribute: 'reveal-columns-label' })
+], LyraTable.prototype, "revealColumnsLabel", void 0);
+__decorate([
+    property({ attribute: 'hide-columns-label' })
+], LyraTable.prototype, "hideColumnsLabel", void 0);
+__decorate([
+    state()
+], LyraTable.prototype, "showAllColumns", void 0);
+__decorate([
+    state()
+], LyraTable.prototype, "activeColKey", void 0);
+__decorate([
+    state()
+], LyraTable.prototype, "activeRowKey", void 0);
 defineElement('table', LyraTable);

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

@@ -4,3 +4,9 @@ export default meta;
 type Story = StoryObj;
 export declare const Default: Story;
 export declare const Empty: Story;
+export declare const NoColumnsConfigured: Story;
+export declare const ActiveSort: Story;
+export declare const SelectedRow: Story;
+export declare const LoadMore: Story;
+export declare const PriorityAndSticky: Story;
+export declare const RowActions: Story;

package/dist/components/table/table.stories.js

@@ -20,3 +20,48 @@ export const Default = {
 export const Empty = {
     render: () => html `<lyra-table .columns=${columns} .rows=${[]}></lyra-table>`,
 };
+export const NoColumnsConfigured = {
+    render: () => html `<lyra-table .columns=${[]} .rows=${rows}></lyra-table>`,
+};
+export const ActiveSort = {
+    render: () => html `<lyra-table .columns=${columns} .rows=${rows} sort-key="score" sort-dir="desc"></lyra-table>`,
+};
+export const SelectedRow = {
+    render: () => html `<lyra-table .columns=${columns} .rows=${rows} .selectedKey=${'b'}></lyra-table>`,
+};
+export const LoadMore = {
+    render: () => html `<lyra-table .columns=${columns} .rows=${rows} has-more more-label="Load more rows"></lyra-table>`,
+};
+const detailRows = [
+    { id: 'a', name: 'Alpha', score: 92, region: 'EU-West', updated: '2 min ago' },
+    { id: 'b', name: 'Beta', score: 81, region: 'US-East', updated: '5 min ago' },
+    { id: 'c', name: 'Gamma', score: 76, region: 'AP-South', updated: '1 hr ago' },
+];
+// Narrow the story's own container, so the `priority`-hidden columns below
+// actually hide without needing to shrink the whole Storybook viewport.
+const priorityColumns = [
+    { key: 'name', label: 'Name', sortable: true, sticky: true, cell: (r) => r.name },
+    { key: 'score', label: 'Score', sortable: true, align: 'end', cell: (r) => r.score },
+    { key: 'region', label: 'Region', priority: 'medium', cell: (r) => r.region },
+    { key: 'updated', label: 'Updated', priority: 'low', cell: (r) => r.updated },
+];
+export const PriorityAndSticky = {
+    render: () => html `<div style="max-width: 420px;">
+      <lyra-table .columns=${priorityColumns} .rows=${detailRows}></lyra-table>
+    </div>`,
+};
+// A <button> inside cell() must own its own click/Enter activation — the
+// table's row-click delegation must not intercept it (see table.ts's
+// INTERACTIVE_SELECTOR guard).
+const actionColumns = [
+    { key: 'name', label: 'Name', cell: (r) => r.name },
+    { key: 'score', label: 'Score', align: 'end', cell: (r) => r.score },
+    {
+        key: 'actions',
+        label: 'Actions',
+        cell: (r) => html `<button type="button" @click=${() => alert(`Editing ${r.name}`)}>Edit</button>`,
+    },
+];
+export const RowActions = {
+    render: () => html `<lyra-table .columns=${actionColumns} .rows=${rows}></lyra-table>`,
+};

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

@@ -9,6 +9,29 @@ export const styles = css `
     max-block-size: var(--lyra-table-max-height, none);
     border: 1px solid var(--lyra-color-border);
     border-radius: var(--lyra-radius);
+    /* Makes [part='base'] a query container so the @container rules below can
+       react to the table's own available width instead of the viewport's. */
+    container-type: inline-size;
+  }
+  /*
+   * Column priority (columns[].priority) hides [data-priority='low']/
+   * ['medium'] header/cells as the container narrows. showAllColumns
+   * (toggled by [part='reveal-columns-button']) needs to override this, but
+   * a @container query can only condition on ancestor inline-size, not
+   * component state — so it's surfaced instead as the data-force-visible
+   * attribute on [part='base'] itself, and the hide rule's :not(...)
+   * selector excludes it. Toggling the attribute flips every hidden column
+   * back on without a second, state-aware container query.
+   */
+  @container (max-width: 899.98px) {
+    [part='base']:not([data-force-visible]) [data-priority='low'] {
+      display: none;
+    }
+  }
+  @container (max-width: 639.98px) {
+    [part='base']:not([data-force-visible]) [data-priority='medium'] {
+      display: none;
+    }
   }
   [part='table'] {
     inline-size: 100%;
@@ -33,7 +56,10 @@ export const styles = css `
   [part='header-cell'][data-sortable]:hover {
     background: var(--lyra-color-brand-quiet);
   }
-  [part='header-cell'][data-sortable]:focus-visible {
+  /* Not scoped to [data-sortable] — the roving-tabindex header stop (see
+     table.ts's focusedColKey()) can land on any column, sortable or not, so
+     every header cell needs its own visible focus indicator. */
+  [part='header-cell']:focus-visible {
     outline: var(--lyra-focus-ring-width) solid var(--lyra-focus-ring-color);
     outline-offset: var(--lyra-focus-ring-offset);
   }
@@ -59,6 +85,11 @@ export const styles = css `
   [part='sort-icon'][data-dir='desc'] {
     transform: rotate(90deg);
   }
+  @media (prefers-reduced-motion: reduce) {
+    [part='sort-icon'] {
+      transition: none !important;
+    }
+  }
   [part='row']:hover {
     background: var(--lyra-color-brand-quiet);
   }
@@ -76,7 +107,21 @@ export const styles = css `
   [part='cell'][data-align='end'] {
     text-align: end;
   }
-  [part='more-button'] {
+  /* columns[].sticky pins a column's header/cells to the inline-start edge
+     while the table scrolls horizontally — mirrors [part='header-cell']'s
+     existing inset-block-start vertical-scroll sticky pattern above, just on
+     the other axis. The box-shadow is the seam that separates it from
+     content scrolled underneath it. */
+  [part='header-cell'][data-sticky],
+  [part='cell'][data-sticky] {
+    position: sticky;
+    inset-inline-start: 0;
+    z-index: 1;
+    background: var(--lyra-color-surface);
+    box-shadow: 1px 0 0 0 var(--lyra-color-border);
+  }
+  [part='more-button'],
+  [part='reveal-columns-button'] {
     display: block;
     inline-size: 100%;
     padding: var(--lyra-space-s);
@@ -87,10 +132,12 @@ export const styles = css `
     cursor: pointer;
     border-block-start: 1px solid var(--lyra-color-border);
   }
-  [part='more-button']:hover {
+  [part='more-button']:hover,
+  [part='reveal-columns-button']:hover {
     background: var(--lyra-color-brand-quiet);
   }
-  [part='more-button']:focus-visible {
+  [part='more-button']:focus-visible,
+  [part='reveal-columns-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

@@ -1,14 +1,25 @@
 import { type TemplateResult, type PropertyValues } from 'lit';
 import { LyraElement } from '../../internal/lyra-element.js';
+/** A single discrete-preset option for the `presets` property. */
+export interface TimeRangePreset {
+    label: string;
+    start: number;
+    end: number;
+}
 /**
  * `<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).
  *
+ * Optionally paired with a row of discrete presets (`presets`) — e.g. "Last
+ * 7 days" / "Last 30 days" — rendered above the track; picking one is just a
+ * shortcut that sets both handles at once, the continuous brush underneath
+ * is unaffected and both interaction modes coexist.
+ *
  * @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
+ * @event lyra-input - Fired continuously while dragging or on each arrow-key press. `detail: { start, end }`.
+ * @event lyra-change - Fired on release / keyup-commit, or when a preset button is clicked. `detail: { start, end }`.
+ * @csspart base, track, range, handle-start, handle-end, presets, preset-button
  */
 export declare class LyraTimeRange extends LyraElement {
     static styles: import("lit").CSSResultGroup[];
@@ -18,17 +29,35 @@ export declare class LyraTimeRange extends LyraElement {
     end: number;
     step: number;
     disabled: boolean;
-    private dragging;
+    /**
+     * Optional discrete presets rendered as a `[part="presets"]` button row
+     * above the track. Purely additive: leaving this empty (the default)
+     * renders nothing extra and leaves the continuous brush untouched.
+     */
+    presets: TimeRangePreset[];
+    private drags;
     disconnectedCallback(): void;
+    private domain;
     private percentOf;
+    /** Each handle's actual reachable sub-range, bounded by its sibling
+     *  handle's current value the same way clamp() already enforces it — used
+     *  both for aria-valuemin/aria-valuemax and for Home/End's jump targets,
+     *  instead of reporting/jumping to the component's full [min, max] domain
+     *  which the sibling handle may make partially unreachable. */
+    private reachableBounds;
     private clamp;
     private setValue;
+    /**
+     * Apply a discrete preset: sets both handles and emits the same
+     * lyra-input/lyra-change pair a committed drag or keyboard step would.
+     */
+    private applyPreset;
     private onKeyDown;
     private onKeyUp;
     private onPointerDown;
     private onPointerMove;
     private onPointerUp;
-    /** Stop an in-progress drag, optionally committing a final lyra-change. */
+    /** Stop the drag owned by `pointerId`, optionally committing a final lyra-change. */
     private endDrag;
     protected willUpdate(changed: PropertyValues): void;
     render(): TemplateResult;