@aceshooting/lyra-ui 1.2.0 → 2.1.0

package/dist/components/slider/slider.styles.js

@@ -0,0 +1,87 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: flex;
+    align-items: center;
+    gap: var(--lyra-space-s);
+    inline-size: 100%;
+  }
+  [part='base'] {
+    position: relative;
+    flex: 1 1 auto;
+    block-size: 1.5rem;
+  }
+  [part='track'] {
+    position: absolute;
+    inset-inline: 0;
+    inset-block-start: 50%;
+    block-size: 4px;
+    transform: translateY(-50%);
+    border-radius: 2px;
+    background: var(--lyra-color-border);
+  }
+  [part='fill'] {
+    position: absolute;
+    inset-inline-start: 0;
+    inset-block-start: 50%;
+    block-size: 4px;
+    transform: translateY(-50%);
+    border-radius: 2px;
+    background: var(--lyra-color-brand);
+  }
+  [part='thumb'] {
+    position: absolute;
+    inset-block-start: 50%;
+    inline-size: 16px;
+    block-size: 16px;
+    border-radius: 50%;
+    background: var(--lyra-color-brand);
+    border: 2px solid var(--lyra-color-surface);
+    box-shadow: var(--lyra-shadow);
+    transform: translate(-50%, -50%);
+    cursor: grab;
+    touch-action: none;
+  }
+  /* The visible dot is 16px, under the ~24px touch-target minimum. Widen the
+     hit/drag area with a transparent ::before instead of growing the thumb
+     itself — onPointerMove never reads the thumb's own
+     getBoundingClientRect() (only [part="track"]'s rect and e.clientX), and a
+     pointerdown inside the ::before still reports e.target as the thumb
+     element (pseudo-elements have no separate DOM node/event target), so
+     this is purely additive and cannot change the drag math. Mirrors
+     lyra-time-range's identical handle::before. */
+  [part='thumb']::before {
+    content: '';
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline-start: 50%;
+    inline-size: 28px;
+    block-size: 28px;
+    transform: translate(-50%, -50%);
+    border-radius: 50%;
+  }
+  [part='thumb']:focus-visible {
+    outline: var(--lyra-focus-ring-width) solid var(--lyra-focus-ring-color);
+    outline-offset: var(--lyra-focus-ring-offset);
+  }
+  [part='thumb']:active {
+    cursor: grabbing;
+  }
+  [part='value'] {
+    flex: 0 0 auto;
+    font-size: 0.8125rem;
+    color: var(--lyra-color-text-quiet);
+    /* Numeric readout ticks as the thumb moves; tabular-nums keeps its own
+       inline-size stable instead of jittering the layout next to it. */
+    font-variant-numeric: tabular-nums;
+    min-inline-size: 2.5ch;
+    text-align: end;
+  }
+  :host([disabled]) {
+    opacity: var(--lyra-opacity-disabled);
+    cursor: not-allowed;
+  }
+  :host([disabled]) [part='thumb'] {
+    cursor: not-allowed;
+  }
+`;

package/dist/components/source-card/source-card.d.ts

@@ -0,0 +1,104 @@
+import { type PropertyValues, type TemplateResult } from 'lit';
+import { LyraElement } from '../../internal/lyra-element.js';
+export interface SourceCardExpandDetail {
+    sourceId: string;
+    expanded: boolean;
+}
+export interface SourceCardOpenDetail {
+    sourceId: string;
+    href?: string;
+}
+/**
+ * `<lyra-source-card>` — one citation/source entry, meant to be a direct
+ * light-DOM child of `<lyra-source-list>` (though it renders and functions
+ * fine standalone). Shows a title/page heading, an always-visible `excerpt`
+ * slot, and an optional `full` slot revealed behind its own independent
+ * "Show more" toggle — unrelated to the parent `<lyra-source-list>`'s own
+ * expand/collapse, which only ever hides/shows the *set* of cards, never a
+ * single card's own content.
+ *
+ * `source-id` is this card's stable identity, meant to match a
+ * `<lyra-citation-badge>` (a sibling component) elsewhere on the page. This
+ * component doesn't implement any scroll-to/highlight behavior itself — that
+ * lives at the app level, wiring a citation badge's activation event to this
+ * card's `id`/`source-id`. See the `@example` below.
+ *
+ * @customElement lyra-source-card
+ * @slot excerpt - A short preview. When left empty, the `excerpt` part
+ * collapses away entirely rather than leaving an empty gap in the card.
+ * @slot full - The complete source text/chunk, hidden behind the "Show
+ * more"/"Show less" toggle. When left empty, no toggle renders at all — a
+ * card with no `full` content simply has no expand affordance. Removing all
+ * `full`-slotted content while expanded automatically collapses it back.
+ * @event lyra-expand - The per-card "Show more"/"Show less" toggle was
+ * activated. `detail: { sourceId, expanded }`.
+ * @event lyra-open - The title was activated. `detail: { sourceId, href }` —
+ * `href` may be `undefined`. This component never navigates on its own
+ * (staying a controlled component, the same convention
+ * `<lyra-tool-call-chip>`'s `lyra-tool-chip-select` follows); a listener
+ * decides what "open" means (open `href` in a new tab, open an in-app
+ * viewer, etc).
+ * @csspart base - The outer container.
+ * @csspart title - The clickable title/page heading (`<button>`).
+ * @csspart excerpt - The wrapper around the `excerpt` slot, `hidden` when the slot has no assigned content.
+ * @csspart full - The wrapper around the `full` slot, `hidden` while collapsed.
+ * @csspart toggle - The "Show more"/"Show less" button. Only rendered when the `full` slot has content.
+ *
+ * @example
+ * ```html
+ * <lyra-source-list label-plural="2 sources">
+ *   <lyra-source-card source-id="doc-1" title="annual_report.pdf" page="12">
+ *     <span slot="excerpt">Revenue grew 12% year over year...</span>
+ *     <span slot="full">Revenue grew 12% year over year, driven primarily by...</span>
+ *   </lyra-source-card>
+ * </lyra-source-list>
+ * ```
+ * ```js
+ * // Elsewhere, a <lyra-citation-badge>'s activation handler can scroll to
+ * // and highlight the matching card -- this component needs no extra API
+ * // surface for that, only its existing source-id to be targeted by:
+ * document.addEventListener('lyra-citation-activate', (e) => {
+ *   const card = document.querySelector(`lyra-source-card[source-id="${e.detail.sourceId}"]`);
+ *   card?.scrollIntoView({ behavior: 'smooth', block: 'center' });
+ *   card?.classList.add('is-highlighted'); // consumer-defined CSS, e.g. a brief background flash
+ *   setTimeout(() => card?.classList.remove('is-highlighted'), 2000);
+ * });
+ * ```
+ */
+export declare class LyraSourceCard extends LyraElement {
+    static styles: import("lit").CSSResultGroup[];
+    /** Stable identifier matching a `<lyra-citation-badge>` elsewhere on the page. */
+    sourceId: string;
+    /** The source's display title, e.g. a filename. Rendered only as the
+     *  title button's own text -- a bare host-level `title` attribute (the
+     *  browser's global tooltip attribute) is actively stripped once Lit has
+     *  synced it into this property, so the card never grows an unsolicited
+     *  native tooltip repeating the same text. See `attributeChangedCallback`
+     *  and `updated` below. */
+    title: string;
+    /** Optional page reference, e.g. `12` or `"iv"` — rendered as-is (never
+     *  parsed/validated as a number), so a non-numeric page label works too. */
+    page?: string | number;
+    /** Optional URL, echoed back (unopened) in `lyra-open`'s detail. */
+    href?: string;
+    private hasFullSlot;
+    private hasExcerptSlot;
+    private fullExpanded;
+    private readonly fullId;
+    private stripHostTitleAttr;
+    protected willUpdate(): void;
+    firstUpdated(): void;
+    attributeChangedCallback(name: string, old: string | null, value: string | null): void;
+    protected updated(changed: PropertyValues<this>): void;
+    private onFullSlotChange;
+    private onExcerptSlotChange;
+    private get titleText();
+    private onTitleClick;
+    private toggleFull;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-source-card': LyraSourceCard;
+    }
+}

package/dist/components/source-card/source-card.js

@@ -0,0 +1,195 @@
+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 { nextId } from '../../internal/a11y.js';
+import { styles } from './source-card.styles.js';
+/**
+ * `<lyra-source-card>` — one citation/source entry, meant to be a direct
+ * light-DOM child of `<lyra-source-list>` (though it renders and functions
+ * fine standalone). Shows a title/page heading, an always-visible `excerpt`
+ * slot, and an optional `full` slot revealed behind its own independent
+ * "Show more" toggle — unrelated to the parent `<lyra-source-list>`'s own
+ * expand/collapse, which only ever hides/shows the *set* of cards, never a
+ * single card's own content.
+ *
+ * `source-id` is this card's stable identity, meant to match a
+ * `<lyra-citation-badge>` (a sibling component) elsewhere on the page. This
+ * component doesn't implement any scroll-to/highlight behavior itself — that
+ * lives at the app level, wiring a citation badge's activation event to this
+ * card's `id`/`source-id`. See the `@example` below.
+ *
+ * @customElement lyra-source-card
+ * @slot excerpt - A short preview. When left empty, the `excerpt` part
+ * collapses away entirely rather than leaving an empty gap in the card.
+ * @slot full - The complete source text/chunk, hidden behind the "Show
+ * more"/"Show less" toggle. When left empty, no toggle renders at all — a
+ * card with no `full` content simply has no expand affordance. Removing all
+ * `full`-slotted content while expanded automatically collapses it back.
+ * @event lyra-expand - The per-card "Show more"/"Show less" toggle was
+ * activated. `detail: { sourceId, expanded }`.
+ * @event lyra-open - The title was activated. `detail: { sourceId, href }` —
+ * `href` may be `undefined`. This component never navigates on its own
+ * (staying a controlled component, the same convention
+ * `<lyra-tool-call-chip>`'s `lyra-tool-chip-select` follows); a listener
+ * decides what "open" means (open `href` in a new tab, open an in-app
+ * viewer, etc).
+ * @csspart base - The outer container.
+ * @csspart title - The clickable title/page heading (`<button>`).
+ * @csspart excerpt - The wrapper around the `excerpt` slot, `hidden` when the slot has no assigned content.
+ * @csspart full - The wrapper around the `full` slot, `hidden` while collapsed.
+ * @csspart toggle - The "Show more"/"Show less" button. Only rendered when the `full` slot has content.
+ *
+ * @example
+ * ```html
+ * <lyra-source-list label-plural="2 sources">
+ *   <lyra-source-card source-id="doc-1" title="annual_report.pdf" page="12">
+ *     <span slot="excerpt">Revenue grew 12% year over year...</span>
+ *     <span slot="full">Revenue grew 12% year over year, driven primarily by...</span>
+ *   </lyra-source-card>
+ * </lyra-source-list>
+ * ```
+ * ```js
+ * // Elsewhere, a <lyra-citation-badge>'s activation handler can scroll to
+ * // and highlight the matching card -- this component needs no extra API
+ * // surface for that, only its existing source-id to be targeted by:
+ * document.addEventListener('lyra-citation-activate', (e) => {
+ *   const card = document.querySelector(`lyra-source-card[source-id="${e.detail.sourceId}"]`);
+ *   card?.scrollIntoView({ behavior: 'smooth', block: 'center' });
+ *   card?.classList.add('is-highlighted'); // consumer-defined CSS, e.g. a brief background flash
+ *   setTimeout(() => card?.classList.remove('is-highlighted'), 2000);
+ * });
+ * ```
+ */
+export class LyraSourceCard extends LyraElement {
+    constructor() {
+        super(...arguments);
+        /** Stable identifier matching a `<lyra-citation-badge>` elsewhere on the page. */
+        this.sourceId = '';
+        /** The source's display title, e.g. a filename. Rendered only as the
+         *  title button's own text -- a bare host-level `title` attribute (the
+         *  browser's global tooltip attribute) is actively stripped once Lit has
+         *  synced it into this property, so the card never grows an unsolicited
+         *  native tooltip repeating the same text. See `attributeChangedCallback`
+         *  and `updated` below. */
+        this.title = '';
+        // See `<lyra-widget>`'s `hasActionsSlot` for the identical
+        // presence-tracking convention -- a `[part]` always contains a literal
+        // `<slot>` child regardless of assigned content, so CSS `:empty` never
+        // matches; real emptiness is tracked in JS instead.
+        this.hasFullSlot = false;
+        this.hasExcerptSlot = false;
+        this.fullExpanded = false;
+        this.fullId = nextId('source-card-full');
+        // Guards the `removeAttribute('title')` call in `updated()` below: removing
+        // an observed attribute fires `attributeChangedCallback` synchronously just
+        // like setting one does, and without this flag Lit would treat the removal
+        // as a fresh (empty) attribute value and reset the `title` property right
+        // back to `null`, losing the value it just finished syncing in.
+        this.stripHostTitleAttr = false;
+        this.onFullSlotChange = (e) => {
+            const count = e.target.assignedElements({ flatten: true }).length;
+            this.hasFullSlot = count > 0;
+            if (count === 0)
+                this.fullExpanded = false;
+        };
+        this.onExcerptSlotChange = (e) => {
+            this.hasExcerptSlot = e.target.assignedElements({ flatten: true }).length > 0;
+        };
+        this.onTitleClick = () => {
+            this.emit('lyra-open', { sourceId: this.sourceId, href: this.href });
+        };
+        this.toggleFull = () => {
+            this.fullExpanded = !this.fullExpanded;
+            this.emit('lyra-expand', { sourceId: this.sourceId, expanded: this.fullExpanded });
+        };
+    }
+    static { this.styles = [LyraElement.styles, styles]; }
+    willUpdate() {
+        if (!this.hasUpdated) {
+            this.hasFullSlot = Array.from(this.children).some((el) => el.getAttribute('slot') === 'full');
+            this.hasExcerptSlot = Array.from(this.children).some((el) => el.getAttribute('slot') === 'excerpt');
+        }
+    }
+    firstUpdated() {
+        const fullSlot = this.shadowRoot.querySelector('slot[name="full"]');
+        const fullCount = fullSlot.assignedElements({ flatten: true }).length;
+        this.hasFullSlot = fullCount > 0;
+        if (fullCount === 0)
+            this.fullExpanded = false;
+        const excerptSlot = this.shadowRoot.querySelector('slot[name="excerpt"]');
+        this.hasExcerptSlot = excerptSlot.assignedElements({ flatten: true }).length > 0;
+    }
+    attributeChangedCallback(name, old, value) {
+        if (name === 'title' && this.stripHostTitleAttr)
+            return;
+        super.attributeChangedCallback(name, old, value);
+    }
+    updated(changed) {
+        if (changed.has('title') && this.hasAttribute('title')) {
+            // The attribute has already been converted into the `title` property
+            // by this point (that's how it got here), so the DOM attribute itself
+            // is now redundant -- and, left in place, would make the whole card
+            // show a native tooltip repeating the title text on hover.
+            this.stripHostTitleAttr = true;
+            this.removeAttribute('title');
+            this.stripHostTitleAttr = false;
+        }
+    }
+    get titleText() {
+        const base = this.title || 'Untitled source';
+        return this.page == null || this.page === '' ? base : `${base} — p. ${this.page}`;
+    }
+    render() {
+        return html `
+      <div part="base">
+        <button part="title" type="button" @click=${this.onTitleClick}>${this.titleText}</button>
+        <div part="excerpt" ?hidden=${!this.hasExcerptSlot}>
+          <slot name="excerpt" @slotchange=${this.onExcerptSlotChange}></slot>
+        </div>
+        ${this.hasFullSlot
+            ? html `<button
+              part="toggle"
+              type="button"
+              aria-expanded=${this.fullExpanded ? 'true' : 'false'}
+              aria-controls=${this.fullId}
+              @click=${this.toggleFull}
+            >
+              ${this.fullExpanded ? 'Show less' : 'Show more'}
+            </button>`
+            : nothing}
+        <div part="full" id=${this.fullId} ?hidden=${!this.fullExpanded}>
+          <slot name="full" @slotchange=${this.onFullSlotChange}></slot>
+        </div>
+      </div>
+    `;
+    }
+}
+__decorate([
+    property({ attribute: 'source-id' })
+], LyraSourceCard.prototype, "sourceId", void 0);
+__decorate([
+    property()
+], LyraSourceCard.prototype, "title", void 0);
+__decorate([
+    property()
+], LyraSourceCard.prototype, "page", void 0);
+__decorate([
+    property()
+], LyraSourceCard.prototype, "href", void 0);
+__decorate([
+    state()
+], LyraSourceCard.prototype, "hasFullSlot", void 0);
+__decorate([
+    state()
+], LyraSourceCard.prototype, "hasExcerptSlot", void 0);
+__decorate([
+    state()
+], LyraSourceCard.prototype, "fullExpanded", void 0);
+defineElement('source-card', LyraSourceCard);

package/dist/components/source-card/source-card.styles.d.ts

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

package/dist/components/source-card/source-card.styles.js

@@ -0,0 +1,69 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: block;
+  }
+  [part='base'] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--lyra-space-xs);
+    padding: var(--lyra-space-s);
+    border: 1px solid var(--lyra-color-border);
+    border-radius: var(--lyra-radius);
+    background: var(--lyra-color-surface);
+  }
+  [part='title'] {
+    align-self: flex-start;
+    border: none;
+    background: none;
+    padding: 0;
+    margin: 0;
+    color: var(--lyra-color-brand);
+    font: inherit;
+    font-weight: 600;
+    font-size: 0.875rem;
+    text-align: start;
+    cursor: pointer;
+  }
+  [part='title']:hover {
+    text-decoration: underline;
+  }
+  [part='title']:focus-visible,
+  [part='toggle']:focus-visible {
+    outline: var(--lyra-focus-ring-width) solid var(--lyra-focus-ring-color);
+    outline-offset: var(--lyra-focus-ring-offset);
+  }
+  [part='excerpt'] {
+    color: var(--lyra-color-text-quiet);
+    font-size: 0.8125rem;
+    line-height: 1.4;
+  }
+  [part='excerpt'][hidden] {
+    display: none;
+  }
+  [part='toggle'] {
+    align-self: flex-start;
+    border: none;
+    background: none;
+    padding: 0;
+    margin: 0;
+    color: var(--lyra-color-brand);
+    font: inherit;
+    font-size: 0.75rem;
+    font-weight: 600;
+    cursor: pointer;
+  }
+  [part='toggle']:hover {
+    text-decoration: underline;
+  }
+  [part='full'] {
+    padding-block-start: var(--lyra-space-xs);
+    border-block-start: 1px solid var(--lyra-color-border);
+    color: var(--lyra-color-text);
+    font-size: 0.8125rem;
+    line-height: 1.4;
+  }
+  [part='full'][hidden] {
+    display: none;
+  }
+`;

package/dist/components/source-list/source-list.d.ts

@@ -0,0 +1,63 @@
+import { type TemplateResult } from 'lit';
+import { LyraElement } from '../../internal/lyra-element.js';
+export interface SourceListToggleDetail {
+    expanded: boolean;
+}
+/**
+ * `<lyra-source-list>` — a collapsible "Sources" panel for one chat message,
+ * grouping a set of `<lyra-source-card>` children (its default-slot light-DOM
+ * children, plain composition — no `.items` array prop, the same shape
+ * `<lyra-split>`'s panels take) behind a single clickable header.
+ *
+ * This library has no built-in i18n/pluralization (see `<lyra-empty>`'s plain
+ * `description` prop for the same stance), so the header text is entirely
+ * consumer-supplied: `label-plural` (e.g. `"3 sources"`) wins when set,
+ * falling back to `label`, falling back to the literal word `"Sources"` — see
+ * each property's own doc. `sourceCount` (a read-only, live-updated count of
+ * the currently-slotted children) is exposed for a consumer who wants to
+ * build that string reactively instead of hand-counting DOM children.
+ *
+ * The card list is removed from the accessibility tree (not just visually
+ * hidden) while collapsed, via the native `hidden` attribute on
+ * `[part="list"]` — a screen reader user tabbing past the header never lands
+ * on off-screen source cards they can't currently see.
+ *
+ * @customElement lyra-source-list
+ * @slot - `<lyra-source-card>` elements (or any content, though the card
+ * pairing is the intended usage).
+ * @event lyra-toggle - The header was activated, expanding or collapsing the
+ * list. `detail: { expanded }`.
+ * @csspart base - The outer container.
+ * @csspart header - The clickable header (`<button>`) toggling `expanded`.
+ * @csspart toggle - The chevron indicator inside the header.
+ * @csspart list - The wrapper around the default slot, `hidden` while collapsed.
+ */
+export declare class LyraSourceList extends LyraElement {
+    static styles: import("lit").CSSResultGroup[];
+    /** Whether the card list is currently shown. Starts collapsed by default
+     *  so a message's sources don't eat vertical space until asked for. */
+    expanded: boolean;
+    /** Header text used when `label-plural` isn't set, e.g. `"Sources"`. */
+    label: string;
+    /** Fully consumer-built, already-pluralized header summary, e.g. `"3 sources"`
+     *  or `"1 source"` — this component never counts or pluralizes on its own
+     *  (see the class doc). Takes precedence over `label` when both are set. */
+    labelPlural: string;
+    private slottedCount;
+    private readonly listId;
+    protected willUpdate(): void;
+    firstUpdated(): void;
+    /** Read-only, live-updated count of the currently-slotted children —
+     *  handy for building a `label-plural` string that stays in sync with
+     *  what's actually slotted without hand-counting DOM children, e.g.
+     *  `list.labelPlural = \`${list.sourceCount} sources\`;`. */
+    get sourceCount(): number;
+    private onSlotChange;
+    private toggle;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-source-list': LyraSourceList;
+    }
+}

package/dist/components/source-list/source-list.js

@@ -0,0 +1,130 @@
+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 } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { LyraElement } from '../../internal/lyra-element.js';
+import { defineElement } from '../../internal/prefix.js';
+import { nextId } from '../../internal/a11y.js';
+import { chevronIcon } from '../../internal/icons.js';
+import { styles } from './source-list.styles.js';
+/**
+ * `<lyra-source-list>` — a collapsible "Sources" panel for one chat message,
+ * grouping a set of `<lyra-source-card>` children (its default-slot light-DOM
+ * children, plain composition — no `.items` array prop, the same shape
+ * `<lyra-split>`'s panels take) behind a single clickable header.
+ *
+ * This library has no built-in i18n/pluralization (see `<lyra-empty>`'s plain
+ * `description` prop for the same stance), so the header text is entirely
+ * consumer-supplied: `label-plural` (e.g. `"3 sources"`) wins when set,
+ * falling back to `label`, falling back to the literal word `"Sources"` — see
+ * each property's own doc. `sourceCount` (a read-only, live-updated count of
+ * the currently-slotted children) is exposed for a consumer who wants to
+ * build that string reactively instead of hand-counting DOM children.
+ *
+ * The card list is removed from the accessibility tree (not just visually
+ * hidden) while collapsed, via the native `hidden` attribute on
+ * `[part="list"]` — a screen reader user tabbing past the header never lands
+ * on off-screen source cards they can't currently see.
+ *
+ * @customElement lyra-source-list
+ * @slot - `<lyra-source-card>` elements (or any content, though the card
+ * pairing is the intended usage).
+ * @event lyra-toggle - The header was activated, expanding or collapsing the
+ * list. `detail: { expanded }`.
+ * @csspart base - The outer container.
+ * @csspart header - The clickable header (`<button>`) toggling `expanded`.
+ * @csspart toggle - The chevron indicator inside the header.
+ * @csspart list - The wrapper around the default slot, `hidden` while collapsed.
+ */
+export class LyraSourceList extends LyraElement {
+    constructor() {
+        super(...arguments);
+        /** Whether the card list is currently shown. Starts collapsed by default
+         *  so a message's sources don't eat vertical space until asked for. */
+        this.expanded = false;
+        /** Header text used when `label-plural` isn't set, e.g. `"Sources"`. */
+        this.label = '';
+        /** Fully consumer-built, already-pluralized header summary, e.g. `"3 sources"`
+         *  or `"1 source"` — this component never counts or pluralizes on its own
+         *  (see the class doc). Takes precedence over `label` when both are set. */
+        this.labelPlural = '';
+        // Tracks the default slot's assigned-element count purely for the
+        // `sourceCount` convenience getter below -- unlike `<lyra-split>`'s
+        // `panelCount` this never drives layout math, so it's plain @state rather
+        // than something read back out of `updated()`.
+        this.slottedCount = 0;
+        this.listId = nextId('source-list-region');
+        this.onSlotChange = (e) => {
+            this.slottedCount = e.target.assignedElements({ flatten: true }).length;
+        };
+        this.toggle = () => {
+            this.expanded = !this.expanded;
+            this.emit('lyra-toggle', { expanded: this.expanded });
+        };
+    }
+    static { this.styles = [LyraElement.styles, styles]; }
+    willUpdate() {
+        if (!this.hasUpdated) {
+            // Must count only children assigned to the *default* slot -- same rule
+            // `firstUpdated`/`onSlotChange` apply via `assignedElements()` below --
+            // otherwise a direct child carrying a foreign `slot` attribute makes
+            // this pre-count disagree with the authoritative one, which schedules
+            // a wasted second update (and Lit's dev-mode change-in-update warning).
+            // An explicit `slot=""` still assigns to the default slot per the HTML
+            // slot algorithm, so check the attribute's value rather than its mere
+            // presence.
+            this.slottedCount = Array.from(this.children).filter((el) => !el.getAttribute('slot')).length;
+        }
+    }
+    firstUpdated() {
+        // Fallback reconciliation for slot-forwarding / engines that don't fire
+        // `slotchange` for content present at parse time -- same idiom as
+        // `<lyra-empty>`'s `firstUpdated`.
+        const slot = this.shadowRoot.querySelector('slot');
+        this.slottedCount = slot.assignedElements({ flatten: true }).length;
+    }
+    /** Read-only, live-updated count of the currently-slotted children —
+     *  handy for building a `label-plural` string that stays in sync with
+     *  what's actually slotted without hand-counting DOM children, e.g.
+     *  `list.labelPlural = \`${list.sourceCount} sources\`;`. */
+    get sourceCount() {
+        return this.slottedCount;
+    }
+    render() {
+        const headerText = this.labelPlural || this.label || 'Sources';
+        return html `
+      <div part="base">
+        <button
+          part="header"
+          type="button"
+          aria-expanded=${this.expanded ? 'true' : 'false'}
+          aria-controls=${this.listId}
+          @click=${this.toggle}
+        >
+          <span part="toggle" aria-hidden="true">${chevronIcon()}</span>
+          <span>${headerText}</span>
+        </button>
+        <div part="list" id=${this.listId} ?hidden=${!this.expanded}>
+          <slot @slotchange=${this.onSlotChange}></slot>
+        </div>
+      </div>
+    `;
+    }
+}
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LyraSourceList.prototype, "expanded", void 0);
+__decorate([
+    property()
+], LyraSourceList.prototype, "label", void 0);
+__decorate([
+    property({ attribute: 'label-plural' })
+], LyraSourceList.prototype, "labelPlural", void 0);
+__decorate([
+    state()
+], LyraSourceList.prototype, "slottedCount", void 0);
+defineElement('source-list', LyraSourceList);

package/dist/components/source-list/source-list.styles.d.ts

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