@aceshooting/lyra-ui 1.2.0 → 2.1.0

package/dist/components/switch/switch.js

@@ -0,0 +1,250 @@
+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';
+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);

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

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

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

@@ -0,0 +1,75 @@
+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
+       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;
+  }
+  [part='base'] {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--lyra-space-s);
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+  }
+  [part='base']:focus-visible {
+    outline: var(--lyra-focus-ring-width) solid var(--lyra-focus-ring-color);
+    outline-offset: var(--lyra-focus-ring-offset);
+  }
+  :host(:disabled) [part='base'] {
+    cursor: not-allowed;
+    opacity: var(--lyra-opacity-disabled);
+  }
+
+  [part='track'] {
+    position: relative;
+    flex: 0 0 auto;
+    inline-size: var(--track-inline-size);
+    block-size: var(--track-block-size);
+    border-radius: 999px;
+    background: var(--lyra-color-border);
+    transition: background-color var(--lyra-transition-fast);
+  }
+  :host([checked]) [part='track'] {
+    background: var(--lyra-color-brand);
+  }
+
+  [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));
+    border-radius: 50%;
+    background: var(--lyra-color-surface);
+    /* Animates the logical 'inset-inline-start' rather than a physical
+       'transform: translateX()' so the slide direction mirrors correctly
+       under dir="rtl" — consistent with this library's CSS-logical-
+       properties approach to RTL (see internal/lyra-element.ts). */
+    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));
+  }
+
+  /* No explicit "display" here (unlike e.g. lyra-combobox's
+     [part='form-control-label']), so the UA stylesheet's default
+     "[hidden] { display: none }" rule needs no author-side override to
+     take effect when hasLabelSlot is false. */
+  [part='label'] {
+    font-size: 0.875rem;
+    color: var(--lyra-color-text);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    [part='track'],
+    [part='thumb'] {
+      transition: none !important;
+    }
+  }
+`;

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

@@ -37,17 +37,37 @@ 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']`
- * (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.
+ * 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.
- * @csspart base, table, head, header-cell, row, cell, more-button, sort-icon, reveal-columns-button
+ * @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 declare class LyraTable<T = unknown> extends LyraElement {
     static styles: import("lit").CSSResultGroup[];
@@ -72,6 +92,16 @@ export declare class LyraTable<T = unknown> extends LyraElement {
     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']`. */
@@ -86,18 +116,72 @@ export declare class LyraTable<T = unknown> extends LyraElement {
     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; a future optimization pass could cache column widths instead of
+     *  re-querying every time — out of scope for this correctness fix. */
+    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. */
+     *  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;