@aceshooting/lyra-ui 1.2.0 → 2.0.0

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

@@ -0,0 +1,148 @@
+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, always visible.
+ * @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.
+ * @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.
+ * @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. */
+        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.fullExpanded = false;
+        this.fullId = nextId('source-card-full');
+        this.onFullSlotChange = (e) => {
+            this.hasFullSlot = 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');
+        }
+    }
+    firstUpdated() {
+        const slot = this.shadowRoot.querySelector('slot[name="full"]');
+        this.hasFullSlot = slot.assignedElements({ flatten: true }).length > 0;
+    }
+    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"><slot name="excerpt"></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, "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']:empty {
+    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,122 @@
+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) {
+            this.slottedCount = this.children.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;

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

@@ -0,0 +1,59 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: block;
+  }
+  [part='base'] {
+    border: 1px solid var(--lyra-color-border);
+    border-radius: var(--lyra-radius);
+    background: var(--lyra-color-surface);
+    overflow: hidden;
+  }
+  [part='header'] {
+    display: flex;
+    align-items: center;
+    gap: var(--lyra-space-xs);
+    inline-size: 100%;
+    padding: var(--lyra-space-s) var(--lyra-space-m);
+    border: none;
+    background: none;
+    color: var(--lyra-color-text);
+    font: inherit;
+    font-weight: 600;
+    font-size: 0.875rem;
+    text-align: start;
+    cursor: pointer;
+  }
+  [part='header']:hover {
+    background: var(--lyra-color-brand-quiet);
+    color: var(--lyra-color-brand);
+  }
+  [part='header']:focus-visible {
+    outline: var(--lyra-focus-ring-width) solid var(--lyra-focus-ring-color);
+    outline-offset: calc(-1 * var(--lyra-focus-ring-offset));
+  }
+  [part='toggle'] {
+    display: inline-flex;
+    flex: 0 0 auto;
+    transition: transform var(--lyra-transition-fast);
+  }
+  :host([expanded]) [part='toggle'] {
+    transform: rotate(90deg);
+  }
+  [part='list'] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--lyra-space-s);
+    padding: 0 var(--lyra-space-m) var(--lyra-space-m);
+    border-block-start: 1px solid var(--lyra-color-border);
+    padding-block-start: var(--lyra-space-m);
+  }
+  [part='list'][hidden] {
+    display: none;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    [part='toggle'] {
+      transition: none !important;
+    }
+  }
+`;

package/dist/components/sparkline/sparkline.js

@@ -11,13 +11,16 @@ import { defineElement } from '../../internal/prefix.js';
 import { styles } from './sparkline.styles.js';
 const VIEW = 100;
 // A <rect> per bar doesn't collapse into one path the way line/area do, so an
-// unbounded `values` array turns directly into that many shadow-DOM nodes.
-// Capping it keeps worst-case DOM size bounded without affecting any
-// realistically-sized bar chart.
-const MAX_BARS = 500;
+// unbounded `values` array turns directly into that many shadow-DOM nodes --
+// and an uncapped line/area path string grows without bound too. Capping the
+// point count up front (shared by every render type) keeps worst-case
+// DOM/compute bounded without affecting any realistically-sized chart.
+const MAX_POINTS = 500; // shared point-count cap for every render type (line/area/bar)
 function decimate(arr, max) {
-    const step = arr.length / max;
-    return Array.from({ length: max }, (_, i) => arr[Math.floor(i * step)]);
+    if (arr.length <= max)
+        return [...arr];
+    const step = (arr.length - 1) / (max - 1); // anchors both the first AND last sample exactly
+    return Array.from({ length: max }, (_, i) => arr[Math.round(i * step)]);
 }
 /**
  * `<lyra-sparkline>` — a zero-dependency inline SVG trend chart.
@@ -38,10 +41,14 @@ export class LyraSparkline extends LyraElement {
     }
     static { this.styles = [LyraElement.styles, styles]; }
     points() {
-        const v = this.values;
-        let autoLo = v[0];
-        let autoHi = v[0];
-        for (const n of v) {
+        // Auto min/max is scanned from the full, pre-decimation `values` -- doing
+        // this after decimating would silently narrow the scale to whatever the
+        // sampled subset happens to contain, which can clip or misproportion a
+        // real extreme value that decimation happened to drop.
+        const raw = this.values;
+        let autoLo = raw[0];
+        let autoHi = raw[0];
+        for (const n of raw) {
             if (n < autoLo)
                 autoLo = n;
             if (n > autoHi)
@@ -49,6 +56,7 @@ export class LyraSparkline extends LyraElement {
         }
         const lo = this.min ?? autoLo;
         const hi = this.max ?? autoHi;
+        const v = raw.length > MAX_POINTS ? decimate(raw, MAX_POINTS) : raw;
         const span = hi - lo;
         return v.map((n, i) => {
             const x = v.length > 1 ? (i / (v.length - 1)) * VIEW : VIEW / 2;
@@ -68,10 +76,16 @@ export class LyraSparkline extends LyraElement {
         }
         const pts = this.points();
         if (this.type === 'bar') {
-            const barPts = pts.length > MAX_BARS ? decimate(pts, MAX_BARS) : pts;
-            const bars = barPts.map(([x, y]) => {
+            // Narrow the bar width as the (already decimated-to-MAX_POINTS) point
+            // count grows, so bars stop overlapping once there are more than a
+            // handful -- VIEW / pts.length is each bar's full "slot" width; keep a
+            // small gap between slots by drawing at 70% of it, floored at 1px and
+            // capped at the original fixed 4px for small point counts.
+            const slot = VIEW / pts.length;
+            const barWidth = Math.min(4, Math.max(1, slot * 0.7));
+            const bars = pts.map(([x, y]) => {
                 const barY = Math.min(y, VIEW);
-                return svg `<rect part="bar" x="${x - 2}" y="${barY}" width="4" height="${VIEW - barY}"></rect>`;
+                return svg `<rect part="bar" x="${x - barWidth / 2}" y="${barY}" width="${barWidth}" height="${VIEW - barY}"></rect>`;
             });
             return html `<svg viewBox="0 0 ${VIEW} ${VIEW}" preserveAspectRatio="none" aria-hidden="true">
         ${bars}

package/dist/components/split/split.d.ts

@@ -7,15 +7,42 @@ export interface PanelConstraint {
     minPx?: number;
     maxPx?: number;
 }
+/** Which pane (if any) participates in responsive collapse (see `collapse`). */
+export type SplitCollapseMode = 'start' | 'end' | 'none';
+/** The collapsing pane's current responsive state — `'wide'` is the normal
+ *  drag-resizable percent layout (identical to `collapse="none"`); `'rail'`
+ *  clamps it to `railWidth`; `'floating'` lifts it out of the flex flow as an
+ *  overlay above the other pane. */
+export type SplitCollapseState = 'wide' | 'rail' | 'floating';
+export interface SplitCollapseChangeDetail {
+    state: SplitCollapseState;
+}
 /**
  * `<lyra-split>` — resizable panels for dashboard layouts. Direct light-DOM
  * children are the panels; a divider is auto-inserted between each pair.
  *
+ * Optionally, one pane can opt in to responsive collapse via `collapse`
+ * (`"start"`/`"end"`, default `"none"` — no behavior change when unset): as
+ * the split's own container narrows past `railBreakpoint` that pane clamps
+ * to a fixed `railWidth`, and past the narrower `floatBreakpoint` it instead
+ * becomes an absolutely-positioned overlay "floating card" above the other
+ * pane. This component only handles the width-collapse mechanics and
+ * signals the current state — via the `collapseState`-derived
+ * `data-collapse-state` attribute (set on both the host and the collapsing
+ * panel itself) and the `lyra-split-collapse-change` event — it renders no
+ * icon-only/collapsed UI of its own; slotted content is expected to adapt to
+ * its own clamped width (e.g. via its own container query).
+ *
  * @customElement lyra-split
  * @event lyra-resize - `detail: { sizes }`, fired on every drag step/release
  *   and every keyboard step.
+ * @event lyra-split-collapse-change - `detail: { state }` (`SplitCollapseChangeDetail`),
+ *   fired whenever the responsive `collapseState` actually transitions between
+ *   `'wide'`/`'rail'`/`'floating'`. Only relevant when `collapse` isn't `"none"`;
+ *   never fires otherwise.
  * @slot - Panels to arrange side by side (or stacked, when `orientation="vertical"`); each direct child becomes one resizable panel.
- * @csspart base, divider
+ * @csspart base - The flex layout wrapper (`position: relative`, so the `'floating'` collapse state can anchor to it).
+ * @csspart divider - Each divider between two panels; carries `aria-disabled="true"` and is drag/keyboard-inert while its adjacent panel is collapsed (`'rail'`/`'floating'`).
  */
 export declare class LyraSplit extends LyraElement {
     static styles: import("lit").CSSResultGroup[];
@@ -29,10 +56,35 @@ export declare class LyraSplit extends LyraElement {
      *  localStorage persistence stay percent-based regardless — only the
      *  effective clamp bounds change for a constrained panel. */
     panelConstraints: (PanelConstraint | null)[];
+    /** Opts a pane in to responsive collapse: `'start'` is the first light-DOM
+     *  panel (index 0), `'end'` is the last. Both are LOGICAL positions, same
+     *  as CSS `inset-inline-start`/`-end` — see the `collapsingIndex` getter
+     *  for why that already resolves to the same physical index under RTL for
+     *  this component (panels are never re-`order`ed for RTL, only the drag
+     *  delta sign mirrors). Default `'none'`: none of the collapse behavior
+     *  below applies, and rendering/behavior is identical to before this
+     *  property existed. */
+    collapse: SplitCollapseMode;
+    /** Fixed CSS length the collapsing pane clamps to in the `'rail'` state. */
+    railWidth: string;
+    /** Container width (px, measured on `[part="base"]`) below which the
+     *  collapsing pane switches from its normal percent width to the fixed
+     *  `railWidth` (`'rail'` state). Must stay above `floatBreakpoint`. */
+    railBreakpoint: number;
+    /** Container width (px) below which the collapsing pane instead becomes an
+     *  absolutely-positioned overlay above the other pane (`'floating'` state). */
+    floatBreakpoint: number;
     private panelCount;
+    /** The collapsing pane's current responsive state; always `'wide'` (a
+     *  no-op) while `collapse === 'none'`. */
+    private collapseState;
     private drags;
+    private stylizedPanels;
+    private baseEl?;
+    private collapseResizeObserver?;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    protected firstUpdated(): void;
     private get storageFullKey();
     private loadPersisted;
     private persist;
@@ -42,6 +94,46 @@ export declare class LyraSplit extends LyraElement {
      *  container resize between calls is always picked up — same live read
      *  `onPointerMove` already does via `drag.base.clientWidth/clientHeight`. */
     private getContainerSize;
+    /** The physical panel index `collapse: 'start' | 'end'` resolves to, or
+     *  `-1` when collapse is off (`'none'`) or there are fewer than 2 panels
+     *  to collapse one of. Panels are laid out via ascending inline `order`
+     *  (see `updated()`) and that ordering is never re-swapped for RTL — only
+     *  the drag/keyboard *delta sign* mirrors for RTL, exactly like
+     *  `onPointerMove`/`onDividerKeyDown` — so panel index 0 already renders
+     *  at the logical inline-start edge under both LTR and RTL (confirmed by
+     *  the pointer-drag RTL test elsewhere in this file: panel 0 renders on
+     *  the visual *right*, i.e. the RTL inline-start side). `'start'` therefore
+     *  always resolves to index 0 and `'end'` to `panelCount - 1`, regardless
+     *  of `isRtl(this)` — consulting it here would swap collapse onto the
+     *  panel that visually sits at the *other* logical edge, which would be a
+     *  bug against this component's own RTL rendering, not a fix for one.
+     */
+    private get collapsingIndex();
+    /** Whether a pane is actually collapsed (rail or floating) right now —
+     *  `false` whenever `collapse === 'none'`, since `collapseState` then
+     *  never leaves its `'wide'` default. */
+    private get collapseActive();
+    /** Dragging/keyboard-resizing is disabled on the one divider immediately
+     *  adjacent to the currently-collapsed pane (its other side has nothing
+     *  meaningful to resize against while the pane is rail/floating-width). */
+    private isDividerDisabled;
+    /** Classifies a measured container width into the collapsing pane's
+     *  responsive state and, only on an actual transition, updates
+     *  `collapseState` and fires `lyra-split-collapse-change`. */
+    private updateCollapseState;
+    /** Creates (idempotently) and (re-)observes `[part="base"]` with the
+     *  collapse-state `ResizeObserver` — a no-op until `baseEl` exists (see
+     *  `firstUpdated()`/`connectedCallback()`). Mirrors lite-chart.ts's own
+     *  ResizeObserver setup, including reading the box size synchronously
+     *  once so the very first render doesn't sit at the stale `'wide'` default
+     *  until the (async) first callback fires — same rationale as
+     *  lyra-virtual-list's `containerResizeObserver` synchronous initial read. */
+    private armCollapseObserver;
+    /** Reacts to a live `collapse` property change (as opposed to the
+     *  connect/first-render arming above): turns the observer on/off, and
+     *  resets `collapseState` back to its `'wide'` default when collapse is
+     *  switched off so no stale rail/floating styling survives it. */
+    private syncCollapseObserver;
     /** Resolves panel `index`'s effective percent min/max for this clamp pass:
      *  a `panelConstraints` entry's px bound converted against the live
      *  `containerSize`, or the component's plain percent `min` (no upper