@aceshooting/lyra-ui 1.2.0 → 2.0.0

package/dist/components/streaming-text/streaming-text.styles.js

@@ -0,0 +1,62 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: block;
+    overflow-wrap: break-word;
+    /* Not derived from any --lyra-* token in tokens.styles.ts -- there's no
+       shared "inline cursor bar" token to resolve through, so this component
+       defines its own scoped custom property, exactly the way
+       lyra-typing-indicator's --lyra-typing-cursor-width/-height do for its
+       own (near-identical) blinking cursor. */
+    --lyra-streaming-text-cursor-width: 0.125rem;
+  }
+
+  [part='base'] {
+    line-height: 1.6;
+  }
+
+  /* Plain-text path only (Markdown mode never renders this element) -- see
+     the class doc for why Markdown content can't share this same
+     white-space treatment. */
+  .plain {
+    white-space: pre-wrap;
+  }
+
+  /* inline-block (not inline) so it participates in text layout on the same
+     line as the preceding content while still accepting a fixed block-size
+     for the bar -- in plain-text mode this sits at the visual tail of the
+     final wrapped line, immediately after the last character. */
+  [part='cursor'] {
+    display: inline-block;
+    vertical-align: text-bottom;
+    inline-size: var(--lyra-streaming-text-cursor-width);
+    block-size: 1em;
+    margin-inline-start: var(--lyra-space-xs);
+    background: currentColor;
+    border-radius: var(--lyra-streaming-text-cursor-width);
+    animation: lyra-streaming-text-cursor-blink var(--lyra-transition-base) infinite;
+  }
+
+  /* Two adjacent keyframe stops (49% / 50%) either side of an instant flip,
+     same shape as lyra-typing-indicator's cursor variant, so the blink still
+     reads as a sharp on/off even under the token's own ease-out timing. */
+  @keyframes lyra-streaming-text-cursor-blink {
+    0%,
+    49% {
+      opacity: 1;
+    }
+    50%,
+    100% {
+      opacity: 0;
+    }
+  }
+
+  /* Degrades to a static, fully-visible bar -- never a frozen mid-blink
+     (invisible) frame. */
+  @media (prefers-reduced-motion: reduce) {
+    [part='cursor'] {
+      animation: none !important;
+      opacity: 1;
+    }
+  }
+`;

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

@@ -0,0 +1,58 @@
+import { type TemplateResult, type PropertyValues } 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;
+    checked: boolean;
+    disabled: boolean;
+    required: boolean;
+    name: string;
+    value: string;
+    private hasLabelSlot;
+    private internals;
+    private _defaultChecked;
+    private _defaultCaptured;
+    constructor();
+    connectedCallback(): void;
+    protected willUpdate(): void;
+    private updateValidity;
+    protected updated(changed: PropertyValues): void;
+    formResetCallback(): 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;
+    }
+}

package/dist/components/switch/switch.js

@@ -0,0 +1,179 @@
+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 { property, state } from 'lit/decorators.js';
+import { LyraElement } from '../../internal/lyra-element.js';
+import { defineElement } from '../../internal/prefix.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; }
+    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
+        // 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 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
+        // `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.onClick = () => {
+            this.toggle();
+        };
+        this.onKeyDown = (e) => {
+            if (this.disabled)
+                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();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (!this._defaultCaptured) {
+            this._defaultCaptured = true;
+            this._defaultChecked = this.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.internals.setValidity({ valueMissing: true }, 'Please turn this on.');
+        }
+        else {
+            this.internals.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();
+        }
+    }
+    formResetCallback() {
+        this.checked = this._defaultChecked;
+    }
+    formDisabledCallback(disabled) {
+        this.disabled = disabled;
+    }
+    checkValidity() {
+        return this.internals.checkValidity();
+    }
+    reportValidity() {
+        return this.internals.reportValidity();
+    }
+    toggle() {
+        if (this.disabled)
+            return;
+        this.checked = !this.checked;
+        this.emit('lyra-change', { checked: this.checked });
+    }
+    render() {
+        return html `
+      <span
+        part="base"
+        role="switch"
+        tabindex=${this.disabled ? '-1' : '0'}
+        aria-checked=${this.checked ? 'true' : 'false'}
+        aria-required=${this.required ? 'true' : nothing}
+        aria-disabled=${this.disabled ? '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([
+    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);
+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

@@ -39,14 +39,23 @@ export interface TableColumn<T> {
  *
  * `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.
+ * @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, table, head, header-cell, row, cell, more-button, sort-icon, reveal-columns-button
  */
 export declare class LyraTable<T = unknown> extends LyraElement {
@@ -72,6 +81,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 +105,68 @@ 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?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private observeBase;
+    /** 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 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
+     *  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;
+    /** 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(): 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;