@aceshooting/lyra-ui 2.1.0 → 2.2.0

package/dist/components/switch/switch.d.ts

@@ -1,103 +1,2 @@
-import { type TemplateResult } from 'lit';
-import { LyraElement } from '../../internal/lyra-element.js';
-/**
- * `<lyra-switch>` — a boolean toggle-switch form control. Structurally the
- * same idea as a checkbox (form-associated via `ElementInternals`, click and
- * Space/Enter both toggle) but with switch semantics: `role="switch"` +
- * `aria-checked` read to assistive tech as an on/off state rather than a
- * checked/unchecked one, and there is no indeterminate state.
- *
- * `checked` is not a plain string, so this attaches `ElementInternals`
- * directly and implements its own `updateValidity()` rather than using the
- * `FormAssociated` mixin (that mixin's `value` accessor assumes a string —
- * see `<lyra-combobox>` for the same direct-`ElementInternals` shape with a
- * non-string value).
- *
- * @customElement lyra-switch
- * @slot - Label text, rendered next to the track. Clicking it toggles the
- * switch, the same as clicking a checkbox's associated `<label>`. If left
- * empty, set `aria-label` on the host so the control still has an
- * accessible name.
- * @event lyra-change - The user toggled the switch (click or Space/Enter). `detail: { checked }`.
- * @csspart base - The whole interactive control (`role="switch"`); wraps the track and label.
- * @csspart track - The pill-shaped background.
- * @csspart thumb - The circular knob that slides across the track.
- * @csspart label - The wrapper around the default slot.
- */
-export declare class LyraSwitch extends LyraElement {
-    static styles: import("lit").CSSResultGroup[];
-    static formAssociated: boolean;
-    static properties: {
-        checked: {
-            type: BooleanConstructor;
-            reflect: boolean;
-            noAccessor: boolean;
-        };
-        disabled: {
-            type: BooleanConstructor;
-            reflect: boolean;
-            noAccessor: boolean;
-        };
-        name: {
-            reflect: boolean;
-            noAccessor: boolean;
-        };
-        required: {
-            type: BooleanConstructor;
-            reflect: boolean;
-            noAccessor: boolean;
-        };
-        value: {
-            noAccessor: boolean;
-        };
-    };
-    private hasLabelSlot;
-    private internals;
-    private validityController;
-    private _defaultChecked;
-    private _defaultCaptured;
-    private _fieldsetDisabled;
-    private _name;
-    private _checked;
-    private _disabled;
-    private _required;
-    private _value;
-    /** Whether the control is disabled explicitly or by an ancestor fieldset. */
-    get effectiveDisabled(): boolean;
-    get checked(): boolean;
-    set checked(next: boolean);
-    get disabled(): boolean;
-    set disabled(next: boolean);
-    /** The form submission key, reflected synchronously for native form APIs. */
-    get name(): string;
-    set name(next: string);
-    get required(): boolean;
-    set required(next: boolean);
-    get value(): string;
-    set value(next: string);
-    constructor();
-    get form(): HTMLFormElement | null;
-    get labels(): NodeList;
-    get validity(): ValidityState;
-    get validationMessage(): string;
-    get willValidate(): boolean;
-    connectedCallback(): void;
-    protected willUpdate(): void;
-    private updateValidity;
-    private syncFormState;
-    formResetCallback(): void;
-    formStateRestoreCallback(state: string | File | FormData | null, _mode?: 'restore' | 'autocomplete'): void;
-    formDisabledCallback(disabled: boolean): void;
-    checkValidity(): boolean;
-    reportValidity(): boolean;
-    private toggle;
-    private onClick;
-    private onKeyDown;
-    private onSlotChange;
-    render(): TemplateResult;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'lyra-switch': LyraSwitch;
-    }
-}
+export * from './switch.class.js';
+//# sourceMappingURL=switch.d.ts.map

package/dist/components/switch/switch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../../src/components/switch/switch.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC"}

package/dist/components/switch/switch.js

@@ -1,250 +1,5 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { html, nothing } from 'lit';
-import { state } from 'lit/decorators.js';
-import { LyraElement } from '../../internal/lyra-element.js';
+export * from './switch.class.js';
+import { LyraSwitch } from './switch.class.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
- * same idea as a checkbox (form-associated via `ElementInternals`, click and
- * Space/Enter both toggle) but with switch semantics: `role="switch"` +
- * `aria-checked` read to assistive tech as an on/off state rather than a
- * checked/unchecked one, and there is no indeterminate state.
- *
- * `checked` is not a plain string, so this attaches `ElementInternals`
- * directly and implements its own `updateValidity()` rather than using the
- * `FormAssociated` mixin (that mixin's `value` accessor assumes a string —
- * see `<lyra-combobox>` for the same direct-`ElementInternals` shape with a
- * non-string value).
- *
- * @customElement lyra-switch
- * @slot - Label text, rendered next to the track. Clicking it toggles the
- * switch, the same as clicking a checkbox's associated `<label>`. If left
- * empty, set `aria-label` on the host so the control still has an
- * accessible name.
- * @event lyra-change - The user toggled the switch (click or Space/Enter). `detail: { checked }`.
- * @csspart base - The whole interactive control (`role="switch"`); wraps the track and label.
- * @csspart track - The pill-shaped background.
- * @csspart thumb - The circular knob that slides across the track.
- * @csspart label - The wrapper around the default slot.
- */
-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();
-        // 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
-        // leaving a stray empty gap. See combobox/date-input's `hasHintSlot`-style
-        // state fields; this one checks `assignedNodes` rather than
-        // `assignedElements` because a plain slotted text label (the expected
-        // 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 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
-        // later user toggle back into the attribute. Guarding with a one-shot flag
-        // 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.effectiveDisabled)
-                return;
-            // Space/Enter both activate, matching `<lyra-table>`'s sortable
-            // header/row convention (`table.ts`'s `onHeaderKeyDown`/`onRowKeyDown`)
-            // for role-based clickable elements — bound to `keydown` rather than
-            // `keyup`/native `click`-forwarding like the rest of this library.
-            if (e.key === ' ' || e.key === 'Spacebar' || e.key === 'Enter') {
-                e.preventDefault();
-                this.toggle();
-            }
-        };
-        this.onSlotChange = (e) => {
-            const nodes = e.target.assignedNodes({ flatten: true });
-            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.hasAttribute('checked');
-        }
-        this.updateValidity();
-    }
-    willUpdate() {
-        // Seed `hasLabelSlot` from the light-DOM children synchronously before
-        // the very first render (same `!hasUpdated` guard as combobox/date-input's
-        // `hasHintSlot` etc.) so declaratively-provided label text doesn't flash
-        // hidden for one frame while waiting on the first `slotchange` event.
-        if (!this.hasUpdated) {
-            this.hasLabelSlot = Array.from(this.childNodes).some((n) => (n.textContent ?? '').trim().length > 0);
-        }
-    }
-    updateValidity() {
-        if (this.required && !this.checked) {
-            this.validityController.setValidity({ valueMissing: true }, 'Please turn this on.');
-        }
-        else {
-            this.validityController.setValidity({});
-        }
-    }
-    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._fieldsetDisabled = disabled;
-        this.requestUpdate();
-    }
-    checkValidity() {
-        return this.internals.checkValidity();
-    }
-    reportValidity() {
-        return this.internals.reportValidity();
-    }
-    toggle() {
-        if (this.effectiveDisabled)
-            return;
-        this.checked = !this.checked;
-        this.emit('lyra-change', { checked: this.checked });
-    }
-    render() {
-        return html `
-      <span
-        part="base"
-        role="switch"
-        tabindex=${this.effectiveDisabled ? '-1' : '0'}
-        aria-checked=${this.checked ? 'true' : 'false'}
-        aria-required=${this.required ? 'true' : nothing}
-        aria-disabled=${this.effectiveDisabled ? 'true' : nothing}
-        aria-label=${this.getAttribute('aria-label') || nothing}
-        @click=${this.onClick}
-        @keydown=${this.onKeyDown}
-      >
-        <span part="track">
-          <span part="thumb"></span>
-        </span>
-        <span part="label" ?hidden=${!this.hasLabelSlot}>
-          <slot @slotchange=${this.onSlotChange}></slot>
-        </span>
-      </span>
-    `;
-    }
-}
-__decorate([
-    state()
-], LyraSwitch.prototype, "hasLabelSlot", void 0);
 defineElement('switch', LyraSwitch);
+//# sourceMappingURL=switch.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"switch.js","sourceRoot":"","sources":["../../../src/components/switch/switch.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,aAAa,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC"}

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

@@ -1 +1,2 @@
 export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=switch.styles.d.ts.map

package/dist/components/switch/switch.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch.styles.d.ts","sourceRoot":"","sources":["../../../src/components/switch/switch.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBA4ElB,CAAC"}

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