@aceshooting/lyra-ui 2.0.0 → 2.1.0

package/dist/components/switch/switch.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, state } from 'lit/decorators.js';
+import { state } from 'lit/decorators.js';
 import { LyraElement } from '../../internal/lyra-element.js';
 import { defineElement } from '../../internal/prefix.js';
+import { AnchoredValidityController, VALIDITY_ANCHOR } from '../../internal/anchored-validity.js';
 import { styles } from './switch.styles.js';
 /**
  * `<lyra-switch>` — a boolean toggle-switch form control. Structurally the
@@ -36,13 +37,71 @@ import { styles } from './switch.styles.js';
 export class LyraSwitch extends LyraElement {
     static { this.styles = [LyraElement.styles, styles]; }
     static { this.formAssociated = true; }
+    static { this.properties = {
+        checked: { type: Boolean, reflect: true, noAccessor: true },
+        disabled: { type: Boolean, reflect: true, noAccessor: true },
+        name: { reflect: true, noAccessor: true },
+        required: { type: Boolean, reflect: true, noAccessor: true },
+        value: { noAccessor: true },
+    }; }
+    /** Whether the control is disabled explicitly or by an ancestor fieldset. */
+    get effectiveDisabled() {
+        return this.disabled || this._fieldsetDisabled;
+    }
+    get checked() {
+        return this._checked;
+    }
+    set checked(next) {
+        const old = this._checked;
+        this._checked = Boolean(next);
+        this.syncFormState();
+        this.requestUpdate('checked', old);
+    }
+    get disabled() {
+        return this._disabled;
+    }
+    set disabled(next) {
+        const old = this._disabled;
+        this._disabled = Boolean(next);
+        this.toggleAttribute('disabled', this._disabled);
+        this.requestUpdate('disabled', old);
+    }
+    /** The form submission key, reflected synchronously for native form APIs. */
+    get name() {
+        return this._name;
+    }
+    set name(next) {
+        const old = this._name;
+        this._name = next ?? '';
+        if (this._name) {
+            this.setAttribute('name', this._name);
+        }
+        else {
+            this.removeAttribute('name');
+        }
+        this.requestUpdate('name', old);
+    }
+    get required() {
+        return this._required;
+    }
+    set required(next) {
+        const old = this._required;
+        this._required = Boolean(next);
+        this.toggleAttribute('required', this._required);
+        this.updateValidity();
+        this.requestUpdate('required', old);
+    }
+    get value() {
+        return this._value;
+    }
+    set value(next) {
+        const old = this._value;
+        this._value = next ?? 'on';
+        this.syncFormState();
+        this.requestUpdate('value', old);
+    }
     constructor() {
         super();
-        this.checked = false;
-        this.disabled = false;
-        this.required = false;
-        this.name = '';
-        this.value = 'on';
         // Tracks whether the default slot carries any real (non-whitespace)
         // content, so the label wrapper — and the `gap` next to the track — can
         // collapse to nothing for an icon-only/aria-label-only switch instead of
@@ -52,10 +111,10 @@ export class LyraSwitch extends LyraElement {
         // common case here, e.g. `<lyra-switch>Enable notifications</lyra-switch>`)
         // is a text node, which `assignedElements` would silently ignore.
         this.hasLabelSlot = false;
-        // What `form.reset()` restores to — captured once, from whatever the
-        // `checked` property reads at first connect (i.e. whatever the declarative
-        // `checked` attribute parsed to, since attribute parsing happens before
-        // `connectedCallback`). `checked` reflects, so unlike
+        // What `form.reset()` restores to — captured once from the declarative
+        // `checked` content attribute at first connect. A pre-connect `.checked`
+        // property assignment changes live state but not the reset default, matching
+        // native `checked`/`defaultChecked` semantics. `checked` reflects, so unlike
         // `FormAssociated`'s non-reflecting `value` this can't be captured from
         // `attributeChangedCallback` alone — that would also fire (and wrongly
         // redefine the default) every time the property setter itself reflects a
@@ -63,11 +122,17 @@ export class LyraSwitch extends LyraElement {
         // instead mirrors `<lyra-combobox>`'s `_defaultCaptured`/`_defaultSelected`.
         this._defaultChecked = false;
         this._defaultCaptured = false;
+        this._fieldsetDisabled = false;
+        this._name = '';
+        this._checked = false;
+        this._disabled = false;
+        this._required = false;
+        this._value = 'on';
         this.onClick = () => {
             this.toggle();
         };
         this.onKeyDown = (e) => {
-            if (this.disabled)
+            if (this.effectiveDisabled)
                 return;
             // Space/Enter both activate, matching `<lyra-table>`'s sortable
             // header/row convention (`table.ts`'s `onHeaderKeyDown`/`onRowKeyDown`)
@@ -83,12 +148,33 @@ export class LyraSwitch extends LyraElement {
             this.hasLabelSlot = nodes.some((n) => (n.textContent ?? '').trim().length > 0);
         };
         this.internals = this.attachInternals();
+        this.validityController = new AnchoredValidityController(this, this.internals, () => this[VALIDITY_ANCHOR]());
+        this.syncFormState();
+    }
+    get form() {
+        return this.internals.form;
+    }
+    get labels() {
+        return this.internals.labels;
+    }
+    get validity() {
+        return this.internals.validity;
+    }
+    get validationMessage() {
+        return this.internals.validationMessage;
+    }
+    get willValidate() {
+        return this.internals.willValidate;
+    }
+    /** @internal */
+    [VALIDITY_ANCHOR]() {
+        return this.renderRoot?.querySelector('[part="base"]') ?? null;
     }
     connectedCallback() {
         super.connectedCallback();
         if (!this._defaultCaptured) {
             this._defaultCaptured = true;
-            this._defaultChecked = this.checked;
+            this._defaultChecked = this.hasAttribute('checked');
         }
         this.updateValidity();
     }
@@ -103,25 +189,25 @@ export class LyraSwitch extends LyraElement {
     }
     updateValidity() {
         if (this.required && !this.checked) {
-            this.internals.setValidity({ valueMissing: true }, 'Please turn this on.');
+            this.validityController.setValidity({ valueMissing: true }, 'Please turn this on.');
         }
         else {
-            this.internals.setValidity({});
+            this.validityController.setValidity({});
         }
     }
-    updated(changed) {
-        if (changed.has('checked') || changed.has('value')) {
-            this.internals.setFormValue(this.checked ? this.value : null);
-        }
-        if (changed.has('checked') || changed.has('required')) {
-            this.updateValidity();
-        }
+    syncFormState() {
+        this.internals.setFormValue(this.checked ? this.value : null, this.checked ? 'checked' : 'unchecked');
+        this.updateValidity();
     }
     formResetCallback() {
         this.checked = this._defaultChecked;
     }
+    formStateRestoreCallback(state, _mode) {
+        this.checked = state === 'checked';
+    }
     formDisabledCallback(disabled) {
-        this.disabled = disabled;
+        this._fieldsetDisabled = disabled;
+        this.requestUpdate();
     }
     checkValidity() {
         return this.internals.checkValidity();
@@ -130,7 +216,7 @@ export class LyraSwitch extends LyraElement {
         return this.internals.reportValidity();
     }
     toggle() {
-        if (this.disabled)
+        if (this.effectiveDisabled)
             return;
         this.checked = !this.checked;
         this.emit('lyra-change', { checked: this.checked });
@@ -140,10 +226,10 @@ export class LyraSwitch extends LyraElement {
       <span
         part="base"
         role="switch"
-        tabindex=${this.disabled ? '-1' : '0'}
+        tabindex=${this.effectiveDisabled ? '-1' : '0'}
         aria-checked=${this.checked ? 'true' : 'false'}
         aria-required=${this.required ? 'true' : nothing}
-        aria-disabled=${this.disabled ? 'true' : nothing}
+        aria-disabled=${this.effectiveDisabled ? 'true' : nothing}
         aria-label=${this.getAttribute('aria-label') || nothing}
         @click=${this.onClick}
         @keydown=${this.onKeyDown}
@@ -158,21 +244,6 @@ export class LyraSwitch extends LyraElement {
     `;
     }
 }
-__decorate([
-    property({ type: Boolean, reflect: true })
-], LyraSwitch.prototype, "checked", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], LyraSwitch.prototype, "disabled", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], LyraSwitch.prototype, "required", void 0);
-__decorate([
-    property()
-], LyraSwitch.prototype, "name", void 0);
-__decorate([
-    property()
-], LyraSwitch.prototype, "value", void 0);
 __decorate([
     state()
 ], LyraSwitch.prototype, "hasLabelSlot", void 0);

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

@@ -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);
   }

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

@@ -37,6 +37,9 @@ export interface TableColumn<T> {
  * 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
@@ -56,7 +59,15 @@ export interface TableColumn<T> {
  *   (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, table, head, header-cell, row, cell, more-button, sort-icon, reveal-columns-button
+ * @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 declare class LyraTable<T = unknown> extends LyraElement {
     static styles: import("lit").CSSResultGroup[];
@@ -119,9 +130,11 @@ export declare class LyraTable<T = unknown> extends LyraElement {
      *  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
@@ -130,19 +143,21 @@ export declare class LyraTable<T = unknown> extends LyraElement {
      *  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 left offset — the sum of the *rendered
+    /** 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`
@@ -158,7 +173,7 @@ export declare class LyraTable<T = unknown> extends LyraElement {
      *  when `hasSticky` is true (opt-in) and simply recomputes on every
      *  update; a future optimization pass could cache column widths instead of
      *  re-querying every time — out of scope for this correctness fix. */
-    protected updated(): void;
+    protected updated(changed: PropertyValues): void;
     private activateColumn;
     private activateRow;
     /** Header cells currently in the tab sequence — excludes columns hidden by

package/dist/components/table/table.js

@@ -16,7 +16,7 @@ import '../empty/empty.js';
  *  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"], [role="combobox"], [role="listbox"], [role="slider"]';
+const INTERACTIVE_SELECTOR = 'button, a[href], input, select, textarea, summary, audio[controls], video[controls], [contenteditable]:not([contenteditable="false"]), [tabindex]:not([tabindex="-1"]), [role="button"], [role="checkbox"], [role="combobox"], [role="listbox"], [role="menu"], [role="menuitem"], [role="option"], [role="radio"], [role="slider"], [role="spinbutton"], [role="switch"], [role="tab"], [role="textbox"]';
 /** Encodes a row/column identity key for use as a Map key or a DOM
  *  `data-row-key` attribute value, preserving the distinction between a
  *  numeric key and a string key that happen to stringify the same way
@@ -34,7 +34,8 @@ function encodeKey(key) {
 function closestInteractive(target, boundary) {
     let el = target;
     while (el && el !== boundary) {
-        if (el.matches(INTERACTIVE_SELECTOR) || el.tagName.includes('-'))
+        if ((el.matches(INTERACTIVE_SELECTOR) && !el.matches('[data-row-key], th[data-col-key]')) ||
+            el.tagName.includes('-'))
             return el;
         el = el.parentElement;
     }
@@ -60,6 +61,9 @@ function closestInteractive(target, boundary) {
  * 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
@@ -79,7 +83,15 @@ function closestInteractive(target, boundary) {
  *   (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, table, head, header-cell, row, cell, more-button, sort-icon, reveal-columns-button
+ * @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 class LyraTable extends LyraElement {
     constructor() {
@@ -121,6 +133,7 @@ export class LyraTable extends LyraElement {
         this.activeRowKey = null;
         this.rowsByKey = new Map();
         this.columnsByKey = new Map();
+        this.observedHeaders = new Set();
         this.toggleColumns = () => {
             this.showAllColumns = !this.showAllColumns;
         };
@@ -164,7 +177,10 @@ export class LyraTable extends LyraElement {
     static { this.styles = [LyraElement.styles, styles]; }
     connectedCallback() {
         super.connectedCallback();
-        this.resizeObserver = new ResizeObserver(() => this.recomputeColumnsHidden());
+        this.resizeObserver = new ResizeObserver(() => {
+            this.recomputeColumnsHidden();
+            this.applyStickyOffsets();
+        });
         // A reconnect re-creates the observer above but the shadow root content
         // survives across disconnect/reconnect (Lit doesn't tear down the shadow
         // root) — re-observe [part='base'] here if it already exists from before
@@ -180,6 +196,7 @@ export class LyraTable extends LyraElement {
         super.disconnectedCallback();
         this.resizeObserver?.disconnect();
         this.observedBase = undefined;
+        this.observedHeaders.clear();
     }
     observeBase(base) {
         if (this.observedBase === base)
@@ -189,6 +206,23 @@ export class LyraTable extends LyraElement {
         this.resizeObserver?.observe(base);
         this.observedBase = base;
     }
+    observeHeaders() {
+        const headers = new Set(this.columns.some((column) => column.sticky)
+            ? this.renderRoot.querySelectorAll('th[data-col-key]')
+            : []);
+        for (const header of this.observedHeaders) {
+            if (!headers.has(header)) {
+                this.resizeObserver?.unobserve(header);
+                this.observedHeaders.delete(header);
+            }
+        }
+        for (const header of headers) {
+            if (!this.observedHeaders.has(header)) {
+                this.observedHeaders.add(header);
+                this.resizeObserver?.observe(header);
+            }
+        }
+    }
     /** 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
@@ -201,20 +235,32 @@ export class LyraTable extends LyraElement {
         const anyPriorityHidden = hasPriorityColumns &&
             [...this.renderRoot.querySelectorAll('th[data-priority]')].some((el) => el.offsetParent === null);
         const next = anyPriorityHidden || (hasPriorityColumns && this.showAllColumns);
+        this.rehomeFocusedColumn();
         if (this.columnsHidden === next)
             return;
         this.columnsHidden = next;
         this.emit('lyra-columns-hidden-change', { hidden: next });
     }
+    rehomeFocusedColumn() {
+        const visible = this.visibleHeaders();
+        if (visible.length === 0 || this.activeColKey === null)
+            return;
+        if (!visible.some((header) => header.dataset.colKey === this.activeColKey)) {
+            this.activeColKey = visible[0].dataset.colKey ?? null;
+        }
+    }
     keyOf(row, index) {
         return this.rowKey ? this.rowKey(row) : index;
     }
     /** The header cell that currently owns `tabindex="0"`. */
     focusedColKey() {
+        const visible = this.visibleHeaders();
+        const visibleKeys = new Set(visible.map((el) => el.dataset.colKey).filter((key) => key !== undefined && this.columnsByKey.has(key)));
         if (this.activeColKey !== null && this.columnsByKey.has(this.activeColKey)) {
-            return this.activeColKey;
+            if (visibleKeys.size === 0 || visibleKeys.has(this.activeColKey))
+                return this.activeColKey;
         }
-        return this.columns[0]?.key ?? null;
+        return visible.find((el) => el.dataset.colKey !== undefined && this.columnsByKey.has(el.dataset.colKey))?.dataset.colKey ?? this.columns[0]?.key ?? null;
     }
     /** The body row that currently owns `tabindex="0"`. */
     focusedRowKey() {
@@ -236,7 +282,7 @@ export class LyraTable extends LyraElement {
             this.columnsByKey = new Map(this.columns.map((c) => [c.key, c]));
         }
     }
-    /** Each sticky column's cumulative left offset — the sum of the *rendered
+    /** 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
@@ -248,12 +294,23 @@ export class LyraTable extends LyraElement {
         for (const col of this.columns) {
             if (!col.sticky)
                 continue;
+            const headerEl = [...this.renderRoot.querySelectorAll('th[data-col-key]')].find((el) => el.dataset.colKey === col.key);
             offsets.set(col.key, running);
-            const headerEl = this.renderRoot.querySelector(`th[data-col-key="${col.key}"]`);
             running += headerEl?.offsetWidth ?? 0;
         }
         return offsets;
     }
+    applyStickyOffsets() {
+        if (!this.columns.some((c) => c.sticky))
+            return;
+        const offsets = this.stickyOffsets();
+        this.renderRoot.querySelectorAll('[data-col-key]').forEach((el) => {
+            const key = el.dataset.colKey;
+            if (key !== undefined && offsets.has(key)) {
+                el.style.setProperty('--lyra-table-sticky-offset', `${offsets.get(key)}px`);
+            }
+        });
+    }
     /** 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`
@@ -269,14 +326,9 @@ export class LyraTable extends LyraElement {
      *  when `hasSticky` is true (opt-in) and simply recomputes on every
      *  update; a future optimization pass could cache column widths instead of
      *  re-querying every time — out of scope for this correctness fix. */
-    updated() {
-        if (this.columns.some((c) => c.sticky)) {
-            for (const [key, offset] of this.stickyOffsets()) {
-                this.renderRoot
-                    .querySelectorAll(`[data-col-key="${key}"]`)
-                    .forEach((el) => el.style.setProperty('--lyra-table-sticky-offset', `${offset}px`));
-            }
-        }
+    updated(changed) {
+        if (changed.has('columns') || changed.has('rows') || changed.has('rowKey'))
+            this.applyStickyOffsets();
         // Re-observe [part='base'] whenever this update's render() produced a
         // fresh one (first mount, or a swap to/from the <lyra-empty> template
         // shape) — observeBase() itself no-ops when it's the same element as
@@ -284,7 +336,16 @@ export class LyraTable extends LyraElement {
         const base = this.renderRoot.querySelector('[part="base"]');
         if (base)
             this.observeBase(base);
-        this.recomputeColumnsHidden();
+        this.observeHeaders();
+        // Deferred to a microtask rather than called synchronously here: a real
+        // priority-hidden transition mutates the reactive `columnsHidden`
+        // property, and doing that from inside this same updated() call stack
+        // schedules a second update from within the first update's own lifecycle
+        // callback -- Lit's dev-mode "scheduled an update ... after an update
+        // completed" warning. Pushing the write out to a microtask lets this
+        // update finish first, so the follow-up update is a normal externally
+        // triggered one instead.
+        queueMicrotask(() => this.recomputeColumnsHidden());
     }
     activateColumn(key) {
         this.activeColKey = key;
@@ -329,14 +390,15 @@ export class LyraTable extends LyraElement {
         const index = headers.indexOf(th);
         if (index < 0)
             return;
+        const rtl = getComputedStyle(this).direction === 'rtl';
         switch (e.key) {
             case 'ArrowLeft':
                 e.preventDefault();
-                this.focusHeader(headers[Math.max(0, index - 1)]);
+                this.focusHeader(headers[rtl ? Math.min(headers.length - 1, index + 1) : Math.max(0, index - 1)]);
                 return;
             case 'ArrowRight':
                 e.preventDefault();
-                this.focusHeader(headers[Math.min(headers.length - 1, index + 1)]);
+                this.focusHeader(headers[rtl ? Math.max(0, index - 1) : Math.min(headers.length - 1, index + 1)]);
                 return;
             case 'Home':
                 e.preventDefault();
@@ -412,7 +474,13 @@ export class LyraTable extends LyraElement {
         const focusedRow = this.focusedRowKey();
         return html `
       <div part="base" ?data-force-visible=${this.showAllColumns}>
-        <table part="table" role="grid" @click=${this.onTableClick} @keydown=${this.onTableKeyDown}>
+        <table
+          part="table"
+          role="grid"
+          aria-label=${this.getAttribute('aria-label') || nothing}
+          @click=${this.onTableClick}
+          @keydown=${this.onTableKeyDown}
+        >
           <thead part="head">
             <tr role="row">
               ${this.columns.map((col) => {

package/dist/components/tabs/tabs.d.ts

@@ -7,6 +7,22 @@ import { LyraElement } from '../../internal/lyra-element.js';
  * `slot` name found among the current children — a child with no `label`,
  * or a name with no matching child, simply never produces a tab.
  *
+ * A tab button's *visible* content can carry a leading icon without ever
+ * changing its *accessible name* (which always stays exactly `label`'s
+ * text, nothing else): give a tab an extra direct-child sibling of
+ * `<lyra-tabs>` carrying `slot="<id>-icon"` (that sibling's own content --
+ * an inline SVG, an emoji span, a custom icon element, anything -- is
+ * entirely up to the consumer). It's rendered ahead of the label inside
+ * that tab's button, wrapped in an `aria-hidden="true"` part so it's
+ * excluded from accessible-name computation no matter what it contains. A
+ * tab with no matching `<id>-icon` sibling renders no icon wrapper at all,
+ * so existing text-only tabs are completely unaffected. (A named slot,
+ * rather than a second attribute holding an icon-name lookup, was chosen
+ * because this library's `internal/icons.ts` is a small closed set of
+ * chrome glyphs for this library's *own* components, not a public
+ * name-keyed registry -- a slot lets a consumer supply an arbitrary,
+ * domain-specific icon instead of being limited to that internal set.)
+ *
  * Implements the WAI-ARIA APG tabs pattern with automatic activation:
  * Left/Right (swapped under RTL) move focus *and* selection together,
  * Home/End jump to the first/last enabled tab, and a roving `tabindex`
@@ -14,10 +30,12 @@ import { LyraElement } from '../../internal/lyra-element.js';
  *
  * @customElement lyra-tabs
  * @slot - Direct children with `slot="<id>" label="<text>"` (and optionally `disabled`); one becomes each tab's panel.
+ * @slot <id>-icon - Optional sibling direct child supplying a tab's leading icon content; excluded from the tab button's accessible name.
  * @event lyra-tabs-change - `detail: { tabId }`, fired when the active tab changes via click or keyboard.
  * @csspart base - The root wrapper around the tablist and panels.
  * @csspart tablist - The `role="tablist"` row of tab buttons.
  * @csspart tab - A single tab button.
+ * @csspart tab-icon - The optional leading-icon wrapper inside a tab button; only rendered when that tab has a matching `<id>-icon` sibling.
  * @csspart panel - A single `role="tabpanel"` wrapper (one per tab, hidden unless active).
  */
 export declare class LyraTabs extends LyraElement {
@@ -26,6 +44,8 @@ export declare class LyraTabs extends LyraElement {
     active: string;
     private tabs;
     private baseId;
+    private nextOpaqueId;
+    private readonly idsBySlot;
     private mutationObserver?;
     connectedCallback(): void;
     disconnectedCallback(): void;
@@ -40,6 +60,9 @@ export declare class LyraTabs extends LyraElement {
     private onTabListKeyDown;
     private tabId;
     private panelId;
+    private idsFor;
+    /** Derives a tab's optional icon-sibling `slot` name from its own `slotName` -- see the class doc. */
+    private iconSlotName;
     private renderTab;
     private renderPanel;
     render(): TemplateResult;