@aceshooting/lyra-ui 0.1.1 → 0.1.3

package/dist/components/split/split.js

@@ -0,0 +1,171 @@
+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 './split.styles.js';
+const KEYBOARD_STEP = 2;
+/**
+ * `<lyra-split>` — resizable panels for dashboard layouts. Direct light-DOM
+ * children are the panels; a divider is auto-inserted between each pair.
+ *
+ * @customElement lyra-split
+ * @event lyra-resize - `detail: { sizes }`, fired on every drag step/release
+ *   and every keyboard step.
+ * @csspart base, divider
+ */
+export class LyraSplit extends LyraElement {
+    constructor() {
+        super(...arguments);
+        this.sizes = [];
+        this.min = 10;
+        this.orientation = 'horizontal';
+        this.panelCount = 0;
+        this.dragIndex = -1;
+        this.dragStartPos = 0;
+        this.dragStartSizes = [];
+        this.onPointerDown = (e, index) => {
+            this.dragIndex = index;
+            this.dragStartPos = this.orientation === 'vertical' ? e.clientY : e.clientX;
+            this.dragStartSizes = [...this.sizes];
+            e.target.setPointerCapture(e.pointerId);
+            window.addEventListener('pointermove', this.onPointerMove);
+            window.addEventListener('pointerup', this.onPointerUp);
+        };
+        this.onPointerMove = (e) => {
+            if (this.dragIndex < 0)
+                return;
+            const base = this.renderRoot.querySelector('[part="base"]');
+            const total = this.orientation === 'vertical' ? base.clientHeight : base.clientWidth;
+            const pos = this.orientation === 'vertical' ? e.clientY : e.clientX;
+            const deltaPercent = ((pos - this.dragStartPos) / total) * 100;
+            this.sizes = this.clampPair(this.dragStartSizes, this.dragIndex, deltaPercent);
+            this.emit('lyra-resize', { sizes: [...this.sizes] });
+        };
+        this.onPointerUp = () => {
+            this.dragIndex = -1;
+            this.persist();
+            window.removeEventListener('pointermove', this.onPointerMove);
+            window.removeEventListener('pointerup', this.onPointerUp);
+        };
+        this.onDividerKeyDown = (e, index) => {
+            const forwardKey = this.orientation === 'vertical' ? 'ArrowDown' : 'ArrowRight';
+            const backwardKey = this.orientation === 'vertical' ? 'ArrowUp' : 'ArrowLeft';
+            if (e.key === forwardKey) {
+                e.preventDefault();
+                this.applyDelta(index, KEYBOARD_STEP, true);
+            }
+            else if (e.key === backwardKey) {
+                e.preventDefault();
+                this.applyDelta(index, -KEYBOARD_STEP, true);
+            }
+        };
+    }
+    static { this.styles = [LyraElement.styles, styles]; }
+    connectedCallback() {
+        super.connectedCallback();
+        this.panelCount = this.children.length;
+        this.ensureSizes();
+        this.loadPersisted();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        // Clean up any remaining event listeners
+        window.removeEventListener('pointermove', this.onPointerMove);
+        window.removeEventListener('pointerup', this.onPointerUp);
+    }
+    get storageFullKey() {
+        return this.storageKey ? `lyra-split:${this.storageKey}:${this.panelCount}` : undefined;
+    }
+    loadPersisted() {
+        const key = this.storageFullKey;
+        if (!key)
+            return;
+        const raw = localStorage.getItem(key);
+        if (!raw)
+            return;
+        try {
+            const parsed = JSON.parse(raw);
+            if (Array.isArray(parsed) && parsed.length === this.panelCount)
+                this.sizes = parsed;
+        }
+        catch {
+            /* ignore malformed persisted state */
+        }
+    }
+    persist() {
+        const key = this.storageFullKey;
+        if (key)
+            localStorage.setItem(key, JSON.stringify(this.sizes));
+    }
+    ensureSizes() {
+        if (this.sizes.length === this.panelCount && this.panelCount > 0)
+            return;
+        const equal = 100 / Math.max(1, this.panelCount);
+        this.sizes = Array.from({ length: this.panelCount }, () => equal);
+    }
+    clampPair(sizes, i, delta) {
+        const next = [...sizes];
+        const a = next[i] + delta;
+        const b = next[i + 1] - delta;
+        if (a < this.min || b < this.min)
+            return sizes;
+        next[i] = a;
+        next[i + 1] = b;
+        return next;
+    }
+    applyDelta(index, delta, commit) {
+        this.sizes = this.clampPair(this.sizes, index, delta);
+        this.emit('lyra-resize', { sizes: [...this.sizes] });
+        if (commit)
+            this.persist();
+    }
+    updated(changed) {
+        if (changed.has('sizes') || this.sizes.length === 0)
+            this.ensureSizes();
+        const panels = [...this.children];
+        panels.forEach((panel, i) => {
+            panel.style.flex = `0 0 ${this.sizes[i] ?? 0}%`;
+            panel.style.order = String(i * 2);
+        });
+    }
+    render() {
+        const dividers = [];
+        for (let i = 0; i < this.panelCount - 1; i++) {
+            dividers.push(html `<div
+        part="divider"
+        role="separator"
+        aria-orientation=${this.orientation === 'vertical' ? 'horizontal' : 'vertical'}
+        aria-valuenow=${Math.round(this.sizes[i] ?? 0)}
+        aria-valuemin=${this.min}
+        aria-valuemax=${100 - this.min}
+        tabindex="0"
+        style=${`order:${i * 2 + 1}`}
+        @pointerdown=${(e) => this.onPointerDown(e, i)}
+        @keydown=${(e) => this.onDividerKeyDown(e, i)}
+      ></div>`);
+        }
+        return html `<div part="base"><slot></slot>${dividers}</div>`;
+    }
+}
+__decorate([
+    property({ attribute: false })
+], LyraSplit.prototype, "sizes", void 0);
+__decorate([
+    property({ type: Number })
+], LyraSplit.prototype, "min", void 0);
+__decorate([
+    property({ reflect: true })
+], LyraSplit.prototype, "orientation", void 0);
+__decorate([
+    property({ attribute: 'storage-key' })
+], LyraSplit.prototype, "storageKey", void 0);
+__decorate([
+    state()
+], LyraSplit.prototype, "panelCount", void 0);
+defineElement('split', LyraSplit);

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

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

package/dist/components/split/split.styles.js

@@ -0,0 +1,51 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: block;
+    inline-size: 100%;
+    block-size: 100%;
+  }
+  [part='base'] {
+    display: flex;
+    inline-size: 100%;
+    block-size: 100%;
+  }
+  :host([orientation='vertical']) [part='base'] {
+    flex-direction: column;
+  }
+  [part='divider'] {
+    position: relative;
+    flex: 0 0 auto;
+    inline-size: 3px;
+    block-size: auto;
+    background: var(--lyra-color-border);
+    cursor: col-resize;
+    touch-action: none;
+  }
+  /* Transparent hit-slop: widens the draggable/tappable box along the resize
+     axis only, without changing the divider's visible 3px width. Generated
+     content is part of the originating element's hit-test box, so pointer
+     events here still resolve e.target to [part="divider"] itself. */
+  [part='divider']::before {
+    content: '';
+    position: absolute;
+    inset-block: 0;
+    inset-inline: -6px;
+  }
+  :host([orientation='vertical']) [part='divider'] {
+    inline-size: auto;
+    block-size: 3px;
+    cursor: row-resize;
+  }
+  :host([orientation='vertical']) [part='divider']::before {
+    inset-block: -6px;
+    inset-inline: 0;
+  }
+  [part='divider']:hover {
+    background: var(--lyra-color-brand);
+  }
+  [part='divider']:focus-visible {
+    outline: var(--lyra-focus-ring-width) solid var(--lyra-focus-ring-color);
+    outline-offset: var(--lyra-focus-ring-offset);
+  }
+`;

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

@@ -1,6 +1,7 @@
 import { type TemplateResult } from 'lit';
 import { LyraElement } from '../../internal/lyra-element.js';
 export type StatVariant = 'neutral' | 'success' | 'warning' | 'danger';
+export type StatGoodDirection = 'up' | 'down';
 /**
  * `<lyra-stat>` — a KPI/stat card. First-party invention consolidating the
  * "metric row" / "KPI card" pattern reinvented in every surveyed repo.
@@ -18,6 +19,14 @@ export declare class LyraStat extends LyraElement {
     variant: StatVariant;
     trend: number;
     caption: string;
+    /** Which trend direction counts as "good" — inverts arrow/color polarity for
+     *  cost/latency/error-rate-style metrics where a decrease is the win. */
+    goodDirection: StatGoodDirection;
+    private hasIcon;
+    private hasCaptionSlot;
+    protected willUpdate(): void;
+    private onIconSlotChange;
+    private onCaptionSlotChange;
     render(): TemplateResult;
 }
 declare global {

package/dist/components/stat/stat.js

@@ -5,9 +5,10 @@ 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 { 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
@@ -27,26 +28,61 @@ export class LyraStat extends LyraElement {
         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 direction = this.trend > 0 ? 'up' : this.trend < 0 ? 'down' : 'flat';
-        const arrow = direction === 'up' ? '▲' : direction === 'down' ? '▼' : '–';
+        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"><slot></slot></span>
+        <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=${direction}>
-              ${arrow} ${Math.abs(this.trend)}%
+            ? 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">${this.caption}<slot name="caption"></slot></div>
+        <div part="caption" ?hidden=${!hasCaption}>
+          <slot name="caption" @slotchange=${this.onCaptionSlotChange}>${this.caption}</slot>
+        </div>
       </div>
     `;
     }
@@ -69,4 +105,13 @@ __decorate([
 __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.js

@@ -15,7 +15,7 @@ export const styles = css `
   [part='icon'] {
     color: var(--lyra-color-text-quiet);
   }
-  [part='icon']:empty {
+  [part='icon'][hidden] {
     display: none;
   }
   [part='label'] {
@@ -42,18 +42,28 @@ export const styles = css `
   [part='trend'] {
     display: inline-flex;
     align-items: center;
-    gap: 0.2rem;
+    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'] {
+  [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-direction='down'] {
+  [part='trend'][data-polarity='bad'] {
     color: var(--lyra-color-danger);
     background: color-mix(in srgb, var(--lyra-color-danger) 8%, transparent);
   }
@@ -70,7 +80,7 @@ export const styles = css `
     font-size: 0.8125rem;
     color: var(--lyra-color-text-quiet);
   }
-  [part='caption']:empty {
+  [part='caption'][hidden] {
     display: none;
   }
 `;

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

@@ -1,4 +1,4 @@
-import { type TemplateResult } from 'lit';
+import { type TemplateResult, type PropertyValues } from 'lit';
 import { LyraElement } from '../../internal/lyra-element.js';
 import '../empty/empty.js';
 export interface TableColumn<T> {
@@ -9,15 +9,19 @@ export interface TableColumn<T> {
     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`).
+ * `<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
+ * @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[];
@@ -31,8 +35,16 @@ export declare class LyraTable<T = unknown> extends LyraElement {
     moreLabel: string;
     emptyHeading: string;
     emptyDescription: string;
+    noColumnsHeading: string;
+    noColumnsDescription: string;
+    private rowsByKey;
+    private columnsByKey;
     private keyOf;
-    private onHeaderClick;
+    protected willUpdate(changed: PropertyValues): void;
+    private activateColumn;
+    private activateRow;
+    private onTableClick;
+    private onTableKeyDown;
     render(): TemplateResult;
 }
 declare global {

package/dist/components/table/table.js

@@ -10,17 +10,22 @@ 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. The host
- * owns actual sorting/filtering/pagination of `rows`; this component renders
- * and emits intents (`lyra-sort`, `lyra-row-click`, `lyra-load-more`).
+ * `<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
+ * @csspart base, table, head, header-cell, row, cell, more-button, sort-icon
  */
 export class LyraTable extends LyraElement {
     constructor() {
@@ -34,17 +39,64 @@ export class LyraTable extends LyraElement {
         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;
     }
-    onHeaderClick(col) {
-        if (!col.sortable)
-            return;
-        this.emit('lyra-sort', { key: col.key });
+    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}
@@ -53,28 +105,28 @@ export class LyraTable extends LyraElement {
         }
         return html `
       <div part="base">
-        <table part="table" role="grid">
+        <table part="table" role="grid" @click=${this.onTableClick} @keydown=${this.onTableKeyDown}>
           <thead part="head">
             <tr role="row">
               ${this.columns.map((col) => {
-            const ariaSort = this.sortKey === col.key ? (this.sortDir === 'asc' ? 'ascending' : 'descending') : 'none';
+            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'}
-                  @click=${() => this.onHeaderClick(col)}
-                  @keydown=${(e) => {
-                if (e.key === 'Enter' || e.key === ' ') {
-                    e.preventDefault();
-                    this.onHeaderClick(col);
-                }
-            }}
                 >
                   ${col.label}
+                  ${active
+                ? html `<span part="sort-icon" data-dir=${this.sortDir} aria-hidden="true"
+                        >${chevronIcon()}</span
+                      >`
+                : nothing}
                 </th>`;
         })}
             </tr>
@@ -86,15 +138,9 @@ export class LyraTable extends LyraElement {
             return html `<tr
                   part="row"
                   role="row"
+                  data-row-key=${String(key)}
                   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)}
@@ -146,4 +192,10 @@ __decorate([
 __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.js

@@ -33,15 +33,43 @@ export const styles = css `
   [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);
@@ -63,4 +91,8 @@ export const styles = css `
   [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);
+  }
 `;