@aceshooting/lyra-ui 1.2.0 → 2.0.0

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

@@ -0,0 +1,365 @@
+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 { lockScroll } from '../../internal/scroll-lock.js';
+import { styles } from './responsive-panel.styles.js';
+const FOCUSABLE_SELECTOR = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+// Shadow-piercing so a slotted custom element's real focusable target (e.g.
+// an <input> inside its own shadow root) is found even though the host tag
+// itself doesn't match FOCUSABLE_SELECTOR. Deliberately duplicated from
+// lyra-dialog's identical helper rather than imported/shared -- every
+// overlay-shaped component in this family (lyra-dialog, lyra-widget,
+// lyra-tool-result-dialog, lyra-tool-select-dialog) re-implements this
+// locally rather than nesting a previous overlay component inside its own
+// shadow DOM, because slot-forwarding would break the inner component's own
+// light-DOM scanning.
+function collectFocusable(el) {
+    const result = [];
+    if (el.matches(FOCUSABLE_SELECTOR)) {
+        result.push(el);
+    }
+    if (el instanceof HTMLSlotElement) {
+        for (const assigned of el.assignedElements({ flatten: true })) {
+            result.push(...collectFocusable(assigned));
+        }
+        return result;
+    }
+    const container = el.shadowRoot ?? el;
+    for (const child of Array.from(container.children)) {
+        result.push(...collectFocusable(child));
+    }
+    return result;
+}
+/** Whether `el` is actually laid out/paintable -- `checkVisibility()` (falling
+ *  back to `getClientRects().length` where unsupported) correctly follows
+ *  flattened-tree/slot assignment, unlike `offsetParent`. Mirrors
+ *  lyra-dialog's identical helper. */
+function isRendered(el) {
+    return el.checkVisibility ? el.checkVisibility() : el.getClientRects().length > 0;
+}
+/**
+ * Pure resolution of the `mode` prop + current viewport into the actual
+ * presentation. Kept separate from the `matchMedia` listener wiring below so
+ * it's independently unit-testable, and so the live-viewport-response logic
+ * can be exercised in tests by calling it (or the instance method that wraps
+ * it) directly instead of needing control over the real browser window,
+ * which `@web/test-runner` doesn't give.
+ */
+export function resolveEffectiveMode(mode, belowBreakpoint) {
+    if (mode === 'inline' || mode === 'overlay')
+        return mode;
+    return belowBreakpoint ? 'overlay' : 'inline';
+}
+/**
+ * `<lyra-responsive-panel>` — the same slotted content either docked inline
+ * in the page's normal layout flow (desktop) or presented as a full-screen/
+ * bottom-sheet overlay (mobile), depending on viewport width. Typical uses:
+ * a settings panel or a conversation-history sidebar that's a permanent
+ * docked pane on a wide screen but a modal on a phone.
+ *
+ * Breakpoint detection uses `matchMedia('(max-width: ' + mobileBreakpoint +
+ * ')')`, re-evaluated live while connected -- resizing/rotating a device
+ * that crosses the breakpoint while `mode="auto"` (the default) updates the
+ * effective presentation without unmounting or re-creating the slotted
+ * content: inline and overlay presentation share the exact same shadow DOM
+ * structure (only a css class, and the overlay-only `role`/`aria-modal`
+ * attributes and backdrop element, differ), so lit-html's diffing keeps
+ * `[part="body"]` and its `<slot>` as the same DOM node across the
+ * transition -- scroll position and focus inside the slotted content survive
+ * it for free, with no extra bookkeeping required. The one exception is
+ * focus: crossing the breakpoint while already open does *not* forcibly
+ * move focus into the panel (unlike an `open` transition, which does) --
+ * doing so on a resize could yank focus away from an input the user is
+ * actively typing into inside the now-newly-modal panel, which is worse UX
+ * than a modal that's very briefly missing its initial focus placement.
+ *
+ * The overlay presentation duplicates lyra-dialog's `role="dialog"` +
+ * focus-trap + Escape/backdrop-dismiss + scroll-lock mechanics locally
+ * rather than nesting a `<lyra-dialog>` inside this component's shadow DOM,
+ * per the established precedent for every overlay-shaped component in this
+ * family (see lyra-dialog's own module doc).
+ *
+ * @customElement lyra-responsive-panel
+ * @slot - The panel body.
+ * @slot header - Optional header content, rendered above the body.
+ * @slot footer - Optional footer content (e.g. action buttons), rendered below the body.
+ * @event lyra-close - `detail: ResponsivePanelCloseReason`. Fired by the overlay presentation's
+ *   built-in dismiss triggers (Escape, backdrop click) and by any `close()` call, in either
+ *   presentation -- a plain `open = false` property write does not fire it (matching
+ *   lyra-dialog's own precedent: only going through `close()` counts as a dismissal), and this
+ *   is deliberately the same event/semantics in both presentations, rather than only being
+ *   meaningful for the overlay case, so a consumer only has to wire up one listener regardless
+ *   of which presentation is currently active.
+ * @event lyra-mode-change - `detail: ResponsivePanelModeChangeDetail`. Fired whenever the
+ *   *effective* mode (not the `mode` prop's literal value, which may be `'auto'`) changes between
+ *   `'inline'` and `'overlay'` -- crossing the breakpoint while `mode="auto"`, or the host
+ *   reassigning `mode` to a value that changes the effective presentation. Never fired for the
+ *   initial render, only for a live change thereafter.
+ * @csspart base - The root wrapper; `display: none` while closed, positioned `fixed` while open
+ *   and in the overlay presentation.
+ * @csspart backdrop - The full-viewport scrim behind the panel -- only rendered in the overlay
+ *   presentation.
+ * @csspart panel - The panel surface itself (`role="dialog"` while open and in the overlay
+ *   presentation).
+ * @csspart header - The wrapper around the `header` slot.
+ * @csspart body - The wrapper around the default slot.
+ * @csspart footer - The wrapper around the `footer` slot.
+ */
+export class LyraResponsivePanel extends LyraElement {
+    constructor() {
+        super(...arguments);
+        /** Whether the panel is open. In the inline presentation this just means visible/mounted; in
+         *  the overlay presentation this is the actual modal open/closed state. */
+        this.open = false;
+        /** `'auto'` (default) tracks `mobile-breakpoint` live; `'inline'`/`'overlay'` force that
+         *  presentation regardless of viewport width. */
+        this.mode = 'auto';
+        /** Only affects the overlay presentation's visual treatment -- `'fullscreen'` (default) covers
+         *  the whole viewport; `'bottom-sheet'` slides up from the bottom and doesn't cover the full
+         *  height. */
+        this.variant = 'fullscreen';
+        /** Accessible name for the overlay presentation's `role="dialog"`. Unused in the inline
+         *  presentation, which has no dialog semantics to name. */
+        this.label = '';
+        /** CSS length passed to `matchMedia` as `(max-width: <this>)` to decide, in `mode="auto"`,
+         *  whether the effective presentation is `'overlay'` (below/at this width) or `'inline'`
+         *  (above it). */
+        this.mobileBreakpoint = '768px';
+        this.belowBreakpoint = false;
+        this.effectiveMode = 'inline';
+        this.hasHeaderSlot = false;
+        this.hasFooterSlot = false;
+        /** Whether the overlay-only mechanics (scroll-lock, document Escape/Tab trap) are currently
+         *  engaged -- derived from `effectiveMode === 'overlay' && open`, tracked separately from those
+         *  two properties so willUpdate can diff "was engaged" vs "should be engaged now" regardless of
+         *  which of the two changed. */
+        this.overlayChromeActive = false;
+        this.isFirstUpdate = true;
+        this.onMediaChange = (e) => {
+            this.handleBreakpointChange(e.matches);
+        };
+        this.onHeaderSlotChange = (e) => {
+            this.hasHeaderSlot = e.target.assignedElements({ flatten: true }).length > 0;
+        };
+        this.onFooterSlotChange = (e) => {
+            this.hasFooterSlot = e.target.assignedElements({ flatten: true }).length > 0;
+        };
+        this.onBackdropClick = () => {
+            this.close('backdrop');
+        };
+        this.onDocKeyDown = (e) => {
+            if (!this.overlayChromeActive)
+                return;
+            if (e.key === 'Escape') {
+                e.preventDefault();
+                this.close('escape');
+                return;
+            }
+            if (e.key !== 'Tab')
+                return;
+            const focusable = this.getFocusableElements();
+            if (focusable.length === 0) {
+                e.preventDefault();
+                return;
+            }
+            const first = focusable[0];
+            const last = focusable[focusable.length - 1];
+            const active = this.getActiveElement();
+            if (e.shiftKey && active === first) {
+                e.preventDefault();
+                last.focus();
+            }
+            else if (!e.shiftKey && active === last) {
+                e.preventDefault();
+                first.focus();
+            }
+        };
+    }
+    static { this.styles = [LyraElement.styles, styles]; }
+    willUpdate(changed) {
+        this.isFirstUpdate = !this.hasUpdated;
+        if (this.isFirstUpdate) {
+            this.hasHeaderSlot = Array.from(this.children).some((el) => el.getAttribute('slot') === 'header');
+            this.hasFooterSlot = Array.from(this.children).some((el) => el.getAttribute('slot') === 'footer');
+        }
+        if (this.isFirstUpdate || changed.has('mode') || changed.has('belowBreakpoint')) {
+            this.effectiveMode = resolveEffectiveMode(this.mode, this.belowBreakpoint);
+        }
+        if (changed.has('mobileBreakpoint') && this.isConnected) {
+            this.setupMediaQuery();
+        }
+        const overlayOpen = this.effectiveMode === 'overlay' && this.open;
+        if (overlayOpen !== this.overlayChromeActive) {
+            this.overlayChromeActive = overlayOpen;
+            if (overlayOpen) {
+                const active = this.getActiveElement();
+                this.lastTrigger = active instanceof HTMLElement ? active : undefined;
+                this.releaseScrollLock = lockScroll();
+                document.addEventListener('keydown', this.onDocKeyDown);
+            }
+            else {
+                this.releaseScrollLock?.();
+                this.releaseScrollLock = undefined;
+                document.removeEventListener('keydown', this.onDocKeyDown);
+            }
+        }
+    }
+    // Runs after render (not willUpdate) so [part="panel"] has already landed
+    // in the DOM before the fallback .focus() call below can rely on it --
+    // mirrors lyra-dialog's identical ordering rationale. Only a genuine `open`
+    // transition steals focus (see the class doc for why a breakpoint-crossing
+    // while already open deliberately does not).
+    updated(changed) {
+        if (!this.isFirstUpdate && changed.has('effectiveMode')) {
+            this.emit('lyra-mode-change', { mode: this.effectiveMode });
+        }
+        if (changed.has('open') && this.open && this.effectiveMode === 'overlay') {
+            const first = this.getFocusableElements()[0];
+            if (first) {
+                first.focus();
+            }
+            else {
+                this.shadowRoot?.querySelector('[part="panel"]')?.focus();
+            }
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.setupMediaQuery();
+        // A reconnect (e.g. a drag-and-drop reparent keeping this same element
+        // instance) fires disconnectedCallback then connectedCallback
+        // synchronously with no update in between, so willUpdate never reruns to
+        // notice overlay chrome is still supposed to be active -- restore it.
+        // Mirrors lyra-dialog's identical reconnect handling.
+        if (this.hasUpdated && this.overlayChromeActive && !this.releaseScrollLock) {
+            this.releaseScrollLock = lockScroll();
+            document.addEventListener('keydown', this.onDocKeyDown);
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.mediaQuery?.removeEventListener('change', this.onMediaChange);
+        this.mediaQuery = undefined;
+        this.releaseScrollLock?.();
+        this.releaseScrollLock = undefined;
+        document.removeEventListener('keydown', this.onDocKeyDown);
+    }
+    setupMediaQuery() {
+        this.mediaQuery?.removeEventListener('change', this.onMediaChange);
+        this.mediaQuery = window.matchMedia(`(max-width: ${this.mobileBreakpoint})`);
+        this.mediaQuery.addEventListener('change', this.onMediaChange);
+        this.handleBreakpointChange(this.mediaQuery.matches);
+    }
+    /** The breakpoint-response logic itself, kept callable independently of the
+     *  `matchMedia` listener that normally drives it -- tests invoke this
+     *  directly to simulate crossing the breakpoint. */
+    handleBreakpointChange(matches) {
+        this.belowBreakpoint = matches;
+    }
+    /**
+     * Close the panel. `reason` is forwarded as the `lyra-close` detail --
+     * built-in overlay triggers pass `'escape'`/`'backdrop'`; a consumer's own
+     * close affordance (e.g. a footer button, or a docked panel's own toggle)
+     * should call this directly with its own reason string. Fires in both
+     * presentations (see the class doc's `lyra-close` note) but only returns
+     * focus to the trigger that opened it when the overlay presentation is
+     * active, since the inline presentation never took focus away from
+     * anything to begin with.
+     */
+    close(reason = 'api') {
+        if (!this.open)
+            return;
+        this.open = false;
+        this.emit('lyra-close', reason);
+        if (this.effectiveMode === 'overlay') {
+            this.lastTrigger?.focus();
+        }
+    }
+    // Bounds Tab/Shift+Tab to the panel while overlay chrome is active. Order
+    // follows the header slot, then the body slot, then the footer slot -- the
+    // same order the flattened tree already tabs through.
+    getFocusableElements() {
+        const root = this.shadowRoot;
+        if (!root)
+            return [];
+        const fromSlot = (selector) => {
+            const slot = root.querySelector(selector);
+            return slot ? slot.assignedElements({ flatten: true }).flatMap(collectFocusable) : [];
+        };
+        return [
+            ...fromSlot('slot[name="header"]'),
+            ...fromSlot('slot:not([name])'),
+            ...fromSlot('slot[name="footer"]'),
+        ].filter(isRendered);
+    }
+    getActiveElement() {
+        let active = document.activeElement;
+        while (active) {
+            const inner = active.shadowRoot?.activeElement ?? null;
+            if (!inner)
+                break;
+            active = inner;
+        }
+        return active;
+    }
+    render() {
+        const overlay = this.effectiveMode === 'overlay';
+        return html `
+      <div part="base" class=${overlay ? 'overlay' : 'inline'}>
+        ${overlay ? html `<div part="backdrop" @click=${this.onBackdropClick}></div>` : nothing}
+        <div
+          part="panel"
+          role=${overlay ? 'dialog' : nothing}
+          aria-modal=${overlay ? 'true' : nothing}
+          aria-label=${overlay && this.label ? this.label : nothing}
+          tabindex=${overlay ? '-1' : nothing}
+        >
+          <div part="header" ?hidden=${!this.hasHeaderSlot}>
+            <slot name="header" @slotchange=${this.onHeaderSlotChange}></slot>
+          </div>
+          <div part="body">
+            <slot></slot>
+          </div>
+          <div part="footer" ?hidden=${!this.hasFooterSlot}>
+            <slot name="footer" @slotchange=${this.onFooterSlotChange}></slot>
+          </div>
+        </div>
+      </div>
+    `;
+    }
+}
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LyraResponsivePanel.prototype, "open", void 0);
+__decorate([
+    property({ reflect: true })
+], LyraResponsivePanel.prototype, "mode", void 0);
+__decorate([
+    property({ reflect: true })
+], LyraResponsivePanel.prototype, "variant", void 0);
+__decorate([
+    property()
+], LyraResponsivePanel.prototype, "label", void 0);
+__decorate([
+    property({ attribute: 'mobile-breakpoint' })
+], LyraResponsivePanel.prototype, "mobileBreakpoint", void 0);
+__decorate([
+    state()
+], LyraResponsivePanel.prototype, "belowBreakpoint", void 0);
+__decorate([
+    state()
+], LyraResponsivePanel.prototype, "effectiveMode", void 0);
+__decorate([
+    state()
+], LyraResponsivePanel.prototype, "hasHeaderSlot", void 0);
+__decorate([
+    state()
+], LyraResponsivePanel.prototype, "hasFooterSlot", void 0);
+defineElement('responsive-panel', LyraResponsivePanel);

package/dist/components/responsive-panel/responsive-panel.styles.d.ts

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

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

@@ -0,0 +1,103 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    /* Overlay scrim color -- component-specific so a host can retheme it
+       without a raw literal leaking into the public API (no shared
+       --wa-*-overlay token exists in the design system to resolve through,
+       same rationale as lyra-dialog's own --lyra-dialog-overlay-color and
+       lyra-widget's --lyra-widget-overlay-color). */
+    --lyra-responsive-panel-overlay-color: rgb(0 0 0 / 0.5);
+    display: block;
+  }
+
+  /* [part="base"] is display:none whenever the panel isn't open, in both
+     presentations -- a docked (inline) panel can be toggled closed just like
+     an overlay one, it just doesn't need backdrop/focus-trap/scroll-lock
+     mechanics to do it. */
+  [part='base'] {
+    display: none;
+  }
+  :host([open]) [part='base'] {
+    display: block;
+  }
+  :host([open]) [part='base'].overlay {
+    display: flex;
+    position: fixed;
+    inset: 0;
+    z-index: 1000;
+  }
+  /* Bottom-sheet anchors its panel to the block-end edge instead of
+     stretching it full-height like fullscreen does. */
+  :host([variant='bottom-sheet'][open]) [part='base'].overlay {
+    align-items: flex-end;
+  }
+
+  [part='backdrop'] {
+    position: absolute;
+    inset: 0;
+    background: var(--lyra-responsive-panel-overlay-color);
+  }
+
+  [part='panel'] {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    min-block-size: 0;
+    background: var(--lyra-color-surface);
+  }
+
+  /* Inline (docked) presentation: a normal panel in the page's layout flow,
+     bordered like a card so it reads as a distinct region. */
+  [part='base']:not(.overlay) [part='panel'] {
+    border: 1px solid var(--lyra-color-border);
+    border-radius: var(--lyra-radius);
+    overflow: auto;
+  }
+
+  /* Overlay/fullscreen (default variant): the panel fills the entire
+     viewport edge-to-edge -- no backdrop is visible around it, but the
+     backdrop element still renders/still matters for the shared
+     Escape/backdrop-click dismissal wiring described on the class. */
+  [part='base'].overlay [part='panel'] {
+    inline-size: 100%;
+    block-size: 100%;
+    box-shadow: var(--lyra-shadow);
+    overflow: auto;
+  }
+
+  /* Overlay/bottom-sheet: a partial-height sheet, rounded only on the top
+     edge, that leaves the backdrop (and whatever page content sits behind
+     it) visible above it. */
+  :host([variant='bottom-sheet']) [part='base'].overlay [part='panel'] {
+    block-size: auto;
+    max-block-size: 85vh;
+    border-start-start-radius: var(--lyra-radius);
+    border-start-end-radius: var(--lyra-radius);
+  }
+
+  [part='header'] {
+    padding: var(--lyra-space-m) var(--lyra-space-l);
+    border-block-end: 1px solid var(--lyra-color-border);
+  }
+  [part='header'][hidden] {
+    display: none;
+  }
+
+  [part='body'] {
+    flex: 1;
+    padding: var(--lyra-space-l);
+    overflow: auto;
+  }
+
+  [part='footer'] {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--lyra-space-s);
+    padding: var(--lyra-space-m) var(--lyra-space-l);
+    border-block-start: 1px solid var(--lyra-color-border);
+  }
+  [part='footer'][hidden] {
+    display: none;
+  }
+`;

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

@@ -0,0 +1,44 @@
+import { type TemplateResult } from 'lit';
+import { LyraElement } from '../../internal/lyra-element.js';
+/**
+ * `<lyra-result-card>` — a small bordered card shell for a custom tool-result
+ * renderer's body (see `<lyra-tool-result-view>`'s `registerToolRenderer()`
+ * in `../tool-result-view/registry.js`). Purely visual, with no state of its
+ * own beyond slot-presence tracking: it gives every custom renderer the same
+ * "small card" language (border, radius, optional title + header actions)
+ * without each one hand-rolling its own box.
+ *
+ * Pairs with `<lyra-result-field>` for the label/value rows that typically
+ * make up the body, though the default slot accepts any content — nothing
+ * here requires a `<lyra-result-field>` specifically.
+ *
+ * @customElement lyra-result-card
+ * @slot - The card body — typically one or more `<lyra-result-field>` rows.
+ * @slot actions - Small header controls (e.g. a copy button), rendered
+ * alongside the title.
+ * @csspart base - The outer bordered container.
+ * @csspart header - The header row wrapping the title and the `actions`
+ * slot. Present in the DOM at all times (so a later `slotchange` on
+ * `actions` is still observed) but `hidden` whenever there is no `title`
+ * and no `actions` content — an untitled, action-less card has no visible
+ * header bar at all.
+ * @csspart title - The title text.
+ * @csspart actions - The wrapper around the `actions` slot. `hidden`
+ * whenever the slot has no assigned content.
+ * @csspart body - The wrapper around the default slot.
+ */
+export declare class LyraResultCard extends LyraElement {
+    static styles: import("lit").CSSResultGroup[];
+    /** Small heading for the card. Leave unset for an untitled card (e.g. a
+     *  bare block of `<lyra-result-field>` rows with no natural heading). */
+    title: string;
+    private hasActionsSlot;
+    protected willUpdate(): void;
+    private onActionsSlotChange;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-result-card': LyraResultCard;
+    }
+}

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

@@ -0,0 +1,83 @@
+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 './result-card.styles.js';
+/**
+ * `<lyra-result-card>` — a small bordered card shell for a custom tool-result
+ * renderer's body (see `<lyra-tool-result-view>`'s `registerToolRenderer()`
+ * in `../tool-result-view/registry.js`). Purely visual, with no state of its
+ * own beyond slot-presence tracking: it gives every custom renderer the same
+ * "small card" language (border, radius, optional title + header actions)
+ * without each one hand-rolling its own box.
+ *
+ * Pairs with `<lyra-result-field>` for the label/value rows that typically
+ * make up the body, though the default slot accepts any content — nothing
+ * here requires a `<lyra-result-field>` specifically.
+ *
+ * @customElement lyra-result-card
+ * @slot - The card body — typically one or more `<lyra-result-field>` rows.
+ * @slot actions - Small header controls (e.g. a copy button), rendered
+ * alongside the title.
+ * @csspart base - The outer bordered container.
+ * @csspart header - The header row wrapping the title and the `actions`
+ * slot. Present in the DOM at all times (so a later `slotchange` on
+ * `actions` is still observed) but `hidden` whenever there is no `title`
+ * and no `actions` content — an untitled, action-less card has no visible
+ * header bar at all.
+ * @csspart title - The title text.
+ * @csspart actions - The wrapper around the `actions` slot. `hidden`
+ * whenever the slot has no assigned content.
+ * @csspart body - The wrapper around the default slot.
+ */
+export class LyraResultCard extends LyraElement {
+    constructor() {
+        super(...arguments);
+        /** Small heading for the card. Leave unset for an untitled card (e.g. a
+         *  bare block of `<lyra-result-field>` rows with no natural heading). */
+        this.title = '';
+        // See `<lyra-widget>`'s identical `hasActionsSlot` -- a `[part]` wrapper
+        // always contains a literal `<slot>` child regardless of assigned
+        // content, so CSS `:empty` never matches; real emptiness is tracked here
+        // in JS instead and used to both hide the actions wrapper and decide
+        // whether the header row itself has anything to show.
+        this.hasActionsSlot = false;
+        this.onActionsSlotChange = (e) => {
+            this.hasActionsSlot = e.target.assignedElements({ flatten: true }).length > 0;
+        };
+    }
+    static { this.styles = [LyraElement.styles, styles]; }
+    willUpdate() {
+        if (!this.hasUpdated) {
+            this.hasActionsSlot = Array.from(this.children).some((el) => el.getAttribute('slot') === 'actions');
+        }
+    }
+    render() {
+        const hasTitle = this.title.length > 0;
+        const hasHeader = hasTitle || this.hasActionsSlot;
+        return html `
+      <div part="base">
+        <div part="header" ?hidden=${!hasHeader}>
+          ${hasTitle ? html `<span part="title">${this.title}</span>` : nothing}
+          <div part="actions" ?hidden=${!this.hasActionsSlot}>
+            <slot name="actions" @slotchange=${this.onActionsSlotChange}></slot>
+          </div>
+        </div>
+        <div part="body"><slot></slot></div>
+      </div>
+    `;
+    }
+}
+__decorate([
+    property()
+], LyraResultCard.prototype, "title", void 0);
+__decorate([
+    state()
+], LyraResultCard.prototype, "hasActionsSlot", void 0);
+defineElement('result-card', LyraResultCard);

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

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

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

@@ -0,0 +1,50 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: block;
+  }
+  [part='base'] {
+    display: flex;
+    flex-direction: column;
+    border: 1px solid var(--lyra-color-border);
+    border-radius: var(--lyra-radius);
+    background: var(--lyra-color-surface);
+    overflow: hidden;
+    font-size: 0.8125rem;
+  }
+  [part='header'] {
+    display: flex;
+    align-items: center;
+    gap: var(--lyra-space-s);
+    padding: var(--lyra-space-xs) var(--lyra-space-s);
+    border-block-end: 1px solid var(--lyra-color-border);
+  }
+  [part='header'][hidden] {
+    display: none;
+  }
+  [part='title'] {
+    flex: 1 1 auto;
+    min-inline-size: 0;
+    color: var(--lyra-color-text);
+    font-weight: 600;
+    font-size: 0.8125rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  [part='actions'] {
+    display: flex;
+    align-items: center;
+    gap: var(--lyra-space-xs);
+    flex: 0 0 auto;
+  }
+  [part='actions'][hidden] {
+    display: none;
+  }
+  [part='body'] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--lyra-space-xs);
+    padding: var(--lyra-space-s);
+  }
+`;