@aceshooting/lyra-ui 2.0.0 → 2.1.0

package/dist/components/tabs/tabs.js

@@ -4,8 +4,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { html } from 'lit';
+import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
+import { repeat } from 'lit/directives/repeat.js';
 import { LyraElement } from '../../internal/lyra-element.js';
 import { defineElement } from '../../internal/prefix.js';
 import { isRtl } from '../../internal/rtl.js';
@@ -18,6 +19,22 @@ import { styles } from './tabs.styles.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`
@@ -25,10 +42,12 @@ import { styles } from './tabs.styles.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 class LyraTabs extends LyraElement {
@@ -38,17 +57,27 @@ export class LyraTabs extends LyraElement {
         this.active = '';
         this.tabs = [];
         this.baseId = nextId('tabs');
+        this.nextOpaqueId = 0;
+        this.idsBySlot = new Map();
         /** Rebuilds `tabs` from the current direct children. First child wins when two share a `slot` name (matches native slot assignment: both would render into the one panel, but only one label can back the button). */
         this.syncTabs = () => {
             const seen = new Set();
             const next = [];
-            for (const child of Array.from(this.children)) {
+            const children = Array.from(this.children);
+            for (const child of children) {
                 const slotName = child.getAttribute('slot');
                 const label = child.getAttribute('label');
                 if (!slotName || !label || seen.has(slotName))
                     continue;
                 seen.add(slotName);
-                next.push({ slotName, label, disabled: child.hasAttribute('disabled') });
+                const iconSlot = this.iconSlotName(slotName);
+                const hasIcon = children.some((c) => c.getAttribute('slot') === iconSlot);
+                next.push({ slotName, label, disabled: child.hasAttribute('disabled'), hasIcon });
+            }
+            const liveSlots = new Set(next.map((tab) => tab.slotName));
+            for (const slotName of this.idsBySlot.keys()) {
+                if (!liveSlots.has(slotName))
+                    this.idsBySlot.delete(slotName);
             }
             this.tabs = next;
         };
@@ -95,10 +124,24 @@ export class LyraTabs extends LyraElement {
         // until *this* component has already rendered one for it, and neither
         // `slotchange` nor any Lit lifecycle hook observes a plain attribute
         // edit (label/disabled) on a light-DOM child at all. A mutation observer
-        // on the host is the only thing that sees either case.
-        this.mutationObserver = new MutationObserver(this.syncTabs);
+        // on the host is the only thing that sees either case. `attributes: true`
+        // alone only reports mutations on the observed node itself (`this`), never
+        // on its children, so `subtree: true` is required too -- but that widens
+        // `childList`/`attributeFilter` to the *entire* descendant tree, including
+        // each panel's own projected content. A panel can legitimately churn its
+        // own children/attributes fast (a streaming log, a live JSON preview), so
+        // every record is filtered down to direct-child mutations only before
+        // triggering a resync, keeping panel-internal churn from forcing a tabs
+        // recompute and re-render on every unrelated mutation.
+        this.mutationObserver = new MutationObserver((records) => {
+            const isDirectChild = (node) => node.parentNode === this;
+            const relevant = records.some((r) => (r.type === 'childList' ? r.target === this : isDirectChild(r.target)));
+            if (relevant)
+                this.syncTabs();
+        });
         this.mutationObserver.observe(this, {
             childList: true,
+            subtree: true,
             attributes: true,
             attributeFilter: ['slot', 'label', 'disabled'],
         });
@@ -135,10 +178,23 @@ export class LyraTabs extends LyraElement {
         }
     }
     tabId(slotName) {
-        return `${this.baseId}-tab-${slotName}`;
+        return this.idsFor(slotName).tab;
     }
     panelId(slotName) {
-        return `${this.baseId}-panel-${slotName}`;
+        return this.idsFor(slotName).panel;
+    }
+    idsFor(slotName) {
+        const existing = this.idsBySlot.get(slotName);
+        if (existing)
+            return existing;
+        const token = `${this.baseId}-${this.nextOpaqueId++}`;
+        const ids = { tab: `${token}-tab`, panel: `${token}-panel` };
+        this.idsBySlot.set(slotName, ids);
+        return ids;
+    }
+    /** Derives a tab's optional icon-sibling `slot` name from its own `slotName` -- see the class doc. */
+    iconSlotName(slotName) {
+        return `${slotName}-icon`;
     }
     renderTab(tab) {
         const selected = tab.slotName === this.active;
@@ -153,9 +209,9 @@ export class LyraTabs extends LyraElement {
       aria-controls=${this.panelId(tab.slotName)}
       tabindex=${selected ? '0' : '-1'}
       @click=${() => this.selectTab(tab)}
-    >
-      ${tab.label}
-    </button>`;
+    >${tab.hasIcon
+            ? html `<span part="tab-icon" aria-hidden="true"><slot name=${this.iconSlotName(tab.slotName)}></slot></span>`
+            : nothing}${tab.label}</button>`;
     }
     renderPanel(tab) {
         const selected = tab.slotName === this.active;
@@ -171,12 +227,20 @@ export class LyraTabs extends LyraElement {
     </div>`;
     }
     render() {
+        // Keyed by `slotName`, not a plain `.map()`: a plain array binding reuses
+        // each rendered DOM node by *position*, so removing e.g. the first tab
+        // would silently relabel the still-focused second button's DOM node into
+        // the (unfocused) third tab's button, leaving real keyboard focus stuck
+        // on a tabindex="-1"/aria-selected="false" button instead of following
+        // the tab it used to represent. Keying by identity keeps each tab's own
+        // DOM node (and any focus on it) attached to that same tab across
+        // additions/removals anywhere in the list.
         return html `
       <div part="base">
         <div part="tablist" role="tablist" aria-orientation="horizontal" @keydown=${this.onTabListKeyDown}>
-          ${this.tabs.map((tab) => this.renderTab(tab))}
+          ${repeat(this.tabs, (tab) => tab.slotName, (tab) => this.renderTab(tab))}
         </div>
-        ${this.tabs.map((tab) => this.renderPanel(tab))}
+        ${repeat(this.tabs, (tab) => tab.slotName, (tab) => this.renderPanel(tab))}
       </div>
     `;
     }

package/dist/components/tabs/tabs.styles.js

@@ -29,10 +29,21 @@ export const styles = css `
     color: var(--lyra-color-text-quiet);
     cursor: pointer;
     white-space: nowrap;
+    /* inline-flex only matters once a tab-icon part is also present (gap
+       has no effect with a single child) -- a text-only tab lays out
+       identically to the previous plain inline-block button. */
+    display: inline-flex;
+    align-items: center;
+    gap: var(--lyra-space-xs);
     transition:
       color var(--lyra-transition-fast),
       border-color var(--lyra-transition-fast);
   }
+  [part='tab-icon'] {
+    display: inline-flex;
+    flex: 0 0 auto;
+    align-items: center;
+  }
   [part='tab']:hover:not([aria-disabled='true']) {
     color: var(--lyra-color-text);
   }

package/dist/components/thinking-panel/thinking-panel.d.ts

@@ -77,7 +77,9 @@ export interface ThinkingPanelToggleDetail {
  * @csspart label - The `label` text.
  * @csspart duration - The formatted duration / "Thinking…" placeholder, when shown.
  * @csspart toggle - The chevron indicator inside the header.
- * @csspart body - The wrapper around the default slot, `hidden` while collapsed.
+ * @csspart body - The wrapper around the default slot, `hidden` while
+ * collapsed. Independently keyboard-focusable (`tabindex="0"`, `role="group"`
+ * named from `label`) since it's its own capped-height scrollable region.
  */
 export declare class LyraThinkingPanel extends LyraElement {
     static styles: import("lit").CSSResultGroup[];

package/dist/components/thinking-panel/thinking-panel.js

@@ -102,7 +102,9 @@ function formatDuration(ms) {
  * @csspart label - The `label` text.
  * @csspart duration - The formatted duration / "Thinking…" placeholder, when shown.
  * @csspart toggle - The chevron indicator inside the header.
- * @csspart body - The wrapper around the default slot, `hidden` while collapsed.
+ * @csspart body - The wrapper around the default slot, `hidden` while
+ * collapsed. Independently keyboard-focusable (`tabindex="0"`, `role="group"`
+ * named from `label`) since it's its own capped-height scrollable region.
  */
 export class LyraThinkingPanel extends LyraElement {
     constructor() {
@@ -139,7 +141,13 @@ export class LyraThinkingPanel extends LyraElement {
                 return;
             this.scrollRafId = requestAnimationFrame(() => {
                 this.scrollRafId = undefined;
-                this.scrollToBottom();
+                // Re-check the same guard here, not just in the caller: mode/expanded/
+                // stickToBottom can all change in the ~1-frame window between this
+                // mutation being observed and this callback actually firing (e.g. the
+                // reader scrolling away mid-frame), and this is the only place that
+                // reflects state as of the moment the scroll would actually happen.
+                if (this.mode === 'live' && this.expanded && this.stickToBottom)
+                    this.scrollToBottom();
             });
         };
         this.toggle = () => {
@@ -167,12 +175,12 @@ export class LyraThinkingPanel extends LyraElement {
         }
     }
     updated(changed) {
-        if (changed.has('expanded') && this.expanded && this.mode === 'live') {
-            // Opening a live panel always jumps straight to the newest content and
-            // resets the sticky-bottom flag, so it starts following again
-            // regardless of wherever the body happened to be scrolled the last
-            // time it was collapsed. `'post-hoc'` deliberately skips this -- see
-            // the class doc's Auto-scroll section.
+        if ((changed.has('expanded') || changed.has('mode')) && this.expanded && this.mode === 'live') {
+            // Opening a live panel -- or a still-expanded panel later becoming
+            // `'live'` -- always jumps straight to the newest content and resets
+            // the sticky-bottom flag, so it starts following again regardless of
+            // wherever the body happened to be scrolled beforehand. `'post-hoc'`
+            // deliberately skips this -- see the class doc's Auto-scroll section.
             this.stickToBottom = true;
             this.scrollToBottom();
         }
@@ -194,6 +202,15 @@ export class LyraThinkingPanel extends LyraElement {
         }
         return this.mode === 'live' ? { text: 'Thinking…', pending: true } : null;
     }
+    // `[part="body"]` is `tabindex="0"` because it's a capped-height,
+    // independently-scrollable region -- with no other focusable content of
+    // its own (e.g. plain text, or a non-interactive `<lyra-streaming-text>`),
+    // it would otherwise be unreachable by keyboard, same reasoning
+    // code-block.ts's and virtual-list.ts's own identical `[part="body"]`/
+    // `[part="base"]` tabindex document. `role="group"` (rather than a page
+    // landmark role) plus `aria-label` gives it an accessible name without
+    // claiming navigation significance for what is, structurally, just one
+    // part of a larger message.
     render() {
         const duration = this.durationDisplay;
         return html `
@@ -213,7 +230,15 @@ export class LyraThinkingPanel extends LyraElement {
               >`
             : nothing}
         </button>
-        <div part="body" id=${this.bodyId} ?hidden=${!this.expanded} @scroll=${this.onScroll}>
+        <div
+          part="body"
+          id=${this.bodyId}
+          role="group"
+          aria-label=${this.label}
+          tabindex="0"
+          ?hidden=${!this.expanded}
+          @scroll=${this.onScroll}
+        >
           <slot></slot>
         </div>
       </div>

package/dist/components/thinking-panel/thinking-panel.styles.js

@@ -95,6 +95,12 @@ export const styles = css `
   [part='body'] {
     max-block-size: var(--lyra-thinking-panel-max-block-size);
     overflow-y: auto;
+    /* Reaching this region's own top/bottom edge stops there instead of
+       chaining the scroll into the host page -- this is precisely the
+       component that tracks and respects the reader scrolling within it, so
+       it shouldn't hand that scroll off to the page underneath it. Same
+       convention as virtual-list.styles.ts's own auto-scrolling region. */
+    overscroll-behavior: contain;
     padding: var(--lyra-space-m);
     border-block-start: 1px solid var(--lyra-color-border);
     color: var(--lyra-color-text-quiet);

package/dist/components/time-range/time-range.d.ts

@@ -16,26 +16,72 @@ export interface TimeRangePreset {
  * shortcut that sets both handles at once, the continuous brush underneath
  * is unaffected and both interaction modes coexist.
  *
+ * Form-associated (via a directly-attached `ElementInternals`, mirroring
+ * `<lyra-combobox>`'s minimal pattern rather than the single-string-value
+ * `FormAssociated` mixin, which doesn't fit a two-handle range): an ancestor
+ * `<fieldset disabled>` disables both handles and every preset button
+ * through `effectiveDisabled`, the same way it would a native `<input>`,
+ * without touching the consumer-facing `disabled` property/attribute itself.
+ *
  * @customElement lyra-time-range
  * @event lyra-input - Fired continuously while dragging or on each arrow-key press. `detail: { start, end }`.
  * @event lyra-change - Fired on release / keyup-commit, or when a preset button is clicked. `detail: { start, end }`.
- * @csspart base, track, range, handle-start, handle-end, presets, preset-button
+ * @csspart base - The time-range wrapper.
+ * @csspart track - The complete range track.
+ * @csspart range - The selected range.
+ * @csspart handle-start - The start handle.
+ * @csspart handle-end - The end handle.
+ * @csspart presets - The preset controls wrapper.
+ * @csspart preset-button - A preset button.
  */
 export declare class LyraTimeRange extends LyraElement {
+    static formAssociated: boolean;
     static styles: import("lit").CSSResultGroup[];
+    static properties: {
+        disabled: {
+            type: BooleanConstructor;
+            reflect: boolean;
+            noAccessor: boolean;
+        };
+    };
     min: number;
     max: number;
     start: number;
     end: number;
     step: number;
-    disabled: boolean;
+    /** Accessible name for the start handle, used as its `aria-label`.
+     *  Overridable for i18n/custom copy; defaults to the same literal text
+     *  this component always rendered before the property existed. */
+    startLabel: string;
+    /** Accessible name for the end handle, used as its `aria-label`.
+     *  Overridable for i18n/custom copy; defaults to the same literal text
+     *  this component always rendered before the property existed. */
+    endLabel: string;
     /**
      * Optional discrete presets rendered as a `[part="presets"]` button row
      * above the track. Purely additive: leaving this empty (the default)
      * renders nothing extra and leaves the continuous brush untouched.
      */
     presets: TimeRangePreset[];
+    private internals;
+    private _disabled;
+    private _fieldsetDisabled;
     private drags;
+    constructor();
+    get disabled(): boolean;
+    set disabled(next: boolean);
+    /** Effective disabled state: this element's own `disabled` OR an ancestor
+     *  `<fieldset disabled>`'s inherited state -- mirrors native `<input>`,
+     *  whose own `disabled` IDL property/attribute is never mutated by a
+     *  fieldset. */
+    get effectiveDisabled(): boolean;
+    /**
+     * Called by the browser when an ancestor `<fieldset disabled>` toggles.
+     * Tracked separately from the consumer's own `disabled` (see
+     * `effectiveDisabled`) so a consumer's explicit `disabled` survives the
+     * fieldset re-enabling instead of being permanently overwritten.
+     */
+    formDisabledCallback(disabled: boolean): void;
     disconnectedCallback(): void;
     private domain;
     private percentOf;
@@ -50,6 +96,17 @@ export declare class LyraTimeRange extends LyraElement {
     /**
      * Apply a discrete preset: sets both handles and emits the same
      * lyra-input/lyra-change pair a committed drag or keyboard step would.
+     *
+     * Deliberately bypasses `setValue()`/`clamp()` — a preset is an explicit
+     * discrete jump to the caller's own exact numbers, not a stepped nudge, so
+     * routing it through `clamp()`'s step-grid rounding would silently round
+     * a preset's values away from what the caller specified (and desync the
+     * active-button match in render(), which compares against these exact
+     * numbers). Only the domain bounds and the start<=end invariant apply
+     * here, not `step`. Both handles are also assigned before either event
+     * fires — routing them through two sequential `setValue()` calls instead
+     * would emit an extra lyra-input whose detail still held the stale
+     * pre-preset value for whichever handle hadn't been assigned yet.
      */
     private applyPreset;
     private onKeyDown;