@aceshooting/lyra-ui 1.2.0 → 2.0.0

package/dist/components/model-settings-panel/model-settings-panel.d.ts

@@ -0,0 +1,69 @@
+import { type TemplateResult } from 'lit';
+import { LyraElement } from '../../internal/lyra-element.js';
+import type { LyraModelCatalog } from '../model-select/model-select.js';
+import '../model-select/model-select.js';
+import '../slider/slider.js';
+export type ModelSettingsPanelLayout = 'vertical' | 'compact';
+/** The full current settings shape, re-emitted on every `lyra-change`
+ *  regardless of which child control actually triggered it. */
+export interface ModelSettingsChangeDetail {
+    modelValue: string;
+    inCatalog: boolean;
+    temperature: number;
+}
+/**
+ * `<lyra-model-settings-panel>` — a fixed composition of `<lyra-model-select>`
+ * and `<lyra-slider>` into one agent-configuration card: pick a provider's
+ * model, then tune its sampling temperature. Not a generic layout shell (no
+ * slots) — it exists so a consumer doesn't have to re-wire the same two
+ * child `lyra-change` events into one combined settings object by hand every
+ * time this pairing comes up.
+ *
+ * Every prop here is a plain pass-through to (or mirror of) the matching
+ * child control's own prop of the same/similar name; see the child
+ * components themselves for the exact semantics of `catalog`/`allowCustom`
+ * and `temperatureMin`/`temperatureMax`/`temperatureStep`.
+ *
+ * @customElement lyra-model-settings-panel
+ * @event lyra-change - Either child control changed. `detail: { modelValue: string; inCatalog: boolean; temperature: number }` — always the full current settings, not just whatever changed.
+ * @csspart base - The outermost wrapping container.
+ * @csspart model-row - The row wrapping the internal `lyra-model-select`.
+ * @csspart temperature-row - The row wrapping the temperature label/slider/value.
+ * @csspart temperature-label - The visible "Temperature" caption.
+ * @csspart temperature-value - The visible current temperature readout.
+ */
+export declare class LyraModelSettingsPanel extends LyraElement {
+    static styles: import("lit").CSSResultGroup[];
+    /** Informational provider badge, passed straight through to the internal `lyra-model-select`. */
+    provider: string;
+    /** The model list, passed straight through to the internal `lyra-model-select`. */
+    catalog?: LyraModelCatalog;
+    /** The current model id. */
+    modelValue: string;
+    /** Let the model control accept a value outside `catalog`; passed straight through. */
+    allowCustom: boolean;
+    /** The current sampling temperature. */
+    temperature: number;
+    temperatureMin: number;
+    temperatureMax: number;
+    temperatureStep: number;
+    /** `vertical` stacks full-width rows with visible labels; `compact` runs
+     *  the same two rows side by side with a smaller temperature caption, for
+     *  toolbars/sidebars where the vertical layout's height doesn't fit. */
+    layout: ModelSettingsPanelLayout;
+    /** Whether `modelValue` is present in `catalog` — recomputed fresh from
+     *  scratch (like `lyra-model-select`'s own `effectiveEntries`) rather than
+     *  cached from the last child event, so it's still correct when
+     *  `modelValue` was assigned directly instead of via the child's own
+     *  `lyra-change`. */
+    private get inCatalog();
+    private emitChange;
+    private onModelChange;
+    private onTemperatureChange;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-model-settings-panel': LyraModelSettingsPanel;
+    }
+}

package/dist/components/model-settings-panel/model-settings-panel.js

@@ -0,0 +1,145 @@
+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 } from 'lit/decorators.js';
+import { LyraElement } from '../../internal/lyra-element.js';
+import { defineElement } from '../../internal/prefix.js';
+import { styles } from './model-settings-panel.styles.js';
+import '../model-select/model-select.js';
+import '../slider/slider.js';
+const DEFAULT_TEMPERATURE_MIN = 0;
+const DEFAULT_TEMPERATURE_MAX = 2;
+const DEFAULT_TEMPERATURE_STEP = 0.1;
+// Midpoint of the default [0, 2] range -- a reasonable provider-agnostic
+// starting point. Reassign `temperature` yourself if your provider's own
+// default differs (OpenAI and Anthropic both default to 1, which this matches).
+const DEFAULT_TEMPERATURE = 1;
+/**
+ * `<lyra-model-settings-panel>` — a fixed composition of `<lyra-model-select>`
+ * and `<lyra-slider>` into one agent-configuration card: pick a provider's
+ * model, then tune its sampling temperature. Not a generic layout shell (no
+ * slots) — it exists so a consumer doesn't have to re-wire the same two
+ * child `lyra-change` events into one combined settings object by hand every
+ * time this pairing comes up.
+ *
+ * Every prop here is a plain pass-through to (or mirror of) the matching
+ * child control's own prop of the same/similar name; see the child
+ * components themselves for the exact semantics of `catalog`/`allowCustom`
+ * and `temperatureMin`/`temperatureMax`/`temperatureStep`.
+ *
+ * @customElement lyra-model-settings-panel
+ * @event lyra-change - Either child control changed. `detail: { modelValue: string; inCatalog: boolean; temperature: number }` — always the full current settings, not just whatever changed.
+ * @csspart base - The outermost wrapping container.
+ * @csspart model-row - The row wrapping the internal `lyra-model-select`.
+ * @csspart temperature-row - The row wrapping the temperature label/slider/value.
+ * @csspart temperature-label - The visible "Temperature" caption.
+ * @csspart temperature-value - The visible current temperature readout.
+ */
+export class LyraModelSettingsPanel extends LyraElement {
+    constructor() {
+        super(...arguments);
+        /** Informational provider badge, passed straight through to the internal `lyra-model-select`. */
+        this.provider = '';
+        /** The current model id. */
+        this.modelValue = '';
+        /** Let the model control accept a value outside `catalog`; passed straight through. */
+        this.allowCustom = false;
+        /** The current sampling temperature. */
+        this.temperature = DEFAULT_TEMPERATURE;
+        this.temperatureMin = DEFAULT_TEMPERATURE_MIN;
+        this.temperatureMax = DEFAULT_TEMPERATURE_MAX;
+        this.temperatureStep = DEFAULT_TEMPERATURE_STEP;
+        /** `vertical` stacks full-width rows with visible labels; `compact` runs
+         *  the same two rows side by side with a smaller temperature caption, for
+         *  toolbars/sidebars where the vertical layout's height doesn't fit. */
+        this.layout = 'vertical';
+        this.onModelChange = (e) => {
+            this.modelValue = e.detail.value;
+            this.emitChange();
+        };
+        this.onTemperatureChange = (e) => {
+            this.temperature = e.detail.value;
+            this.emitChange();
+        };
+    }
+    static { this.styles = [LyraElement.styles, styles]; }
+    /** Whether `modelValue` is present in `catalog` — recomputed fresh from
+     *  scratch (like `lyra-model-select`'s own `effectiveEntries`) rather than
+     *  cached from the last child event, so it's still correct when
+     *  `modelValue` was assigned directly instead of via the child's own
+     *  `lyra-change`. */
+    get inCatalog() {
+        const catalog = this.catalog;
+        if (!catalog || catalog.length === 0)
+            return false;
+        return catalog.some((entry) => (typeof entry === 'string' ? entry === this.modelValue : entry.id === this.modelValue));
+    }
+    emitChange() {
+        this.emit('lyra-change', {
+            modelValue: this.modelValue,
+            inCatalog: this.inCatalog,
+            temperature: this.temperature,
+        });
+    }
+    render() {
+        return html `
+      <div part="base">
+        <div part="model-row">
+          <lyra-model-select
+            .provider=${this.provider}
+            .catalog=${this.catalog}
+            .value=${this.modelValue}
+            .allowCustom=${this.allowCustom}
+            placeholder="Select a model…"
+            @lyra-change=${this.onModelChange}
+          ></lyra-model-select>
+        </div>
+        <div part="temperature-row">
+          <span part="temperature-label">Temperature</span>
+          <lyra-slider
+            .label=${'Temperature'}
+            .min=${this.temperatureMin}
+            .max=${this.temperatureMax}
+            .step=${this.temperatureStep}
+            .valueAsNumber=${this.temperature}
+            .showValue=${false}
+            @lyra-change=${this.onTemperatureChange}
+          ></lyra-slider>
+          <span part="temperature-value">${this.temperature}</span>
+        </div>
+      </div>
+    `;
+    }
+}
+__decorate([
+    property()
+], LyraModelSettingsPanel.prototype, "provider", void 0);
+__decorate([
+    property({ attribute: false })
+], LyraModelSettingsPanel.prototype, "catalog", void 0);
+__decorate([
+    property({ attribute: 'model-value' })
+], LyraModelSettingsPanel.prototype, "modelValue", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'allow-custom' })
+], LyraModelSettingsPanel.prototype, "allowCustom", void 0);
+__decorate([
+    property({ type: Number })
+], LyraModelSettingsPanel.prototype, "temperature", void 0);
+__decorate([
+    property({ type: Number, attribute: 'temperature-min' })
+], LyraModelSettingsPanel.prototype, "temperatureMin", void 0);
+__decorate([
+    property({ type: Number, attribute: 'temperature-max' })
+], LyraModelSettingsPanel.prototype, "temperatureMax", void 0);
+__decorate([
+    property({ type: Number, attribute: 'temperature-step' })
+], LyraModelSettingsPanel.prototype, "temperatureStep", void 0);
+__decorate([
+    property({ reflect: true })
+], LyraModelSettingsPanel.prototype, "layout", void 0);
+defineElement('model-settings-panel', LyraModelSettingsPanel);

package/dist/components/model-settings-panel/model-settings-panel.styles.d.ts

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

package/dist/components/model-settings-panel/model-settings-panel.styles.js

@@ -0,0 +1,82 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: block;
+    inline-size: 100%;
+    max-inline-size: 28rem;
+  }
+  [part='base'] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--lyra-space-l);
+    box-sizing: border-box;
+    padding: var(--lyra-space-l);
+    border: 1px solid var(--lyra-color-border);
+    border-radius: var(--lyra-radius);
+    background: var(--lyra-color-surface);
+  }
+
+  [part='model-row'] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--lyra-space-xs);
+    min-inline-size: 0;
+  }
+  /* The nested control's own max-inline-size (24rem, sized for a standalone
+     dropdown) would otherwise clip a full-width row inside this card. */
+  [part='model-row'] lyra-model-select {
+    inline-size: 100%;
+    max-inline-size: none;
+  }
+
+  [part='temperature-row'] {
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    align-items: center;
+    gap: var(--lyra-space-s);
+    min-inline-size: 0;
+  }
+  [part='temperature-row'] lyra-slider {
+    min-inline-size: 0;
+  }
+  [part='temperature-label'] {
+    font-size: 0.8125rem;
+    font-weight: 600;
+    color: var(--lyra-color-text);
+    white-space: nowrap;
+  }
+  [part='temperature-value'] {
+    font-size: 0.8125rem;
+    color: var(--lyra-color-text-quiet);
+    font-variant-numeric: tabular-nums;
+    min-inline-size: 2.5ch;
+    text-align: end;
+  }
+
+  /* Compact layout: the two rows sit side by side instead of stacked, and
+     the temperature caption shrinks to an uppercase micro-label -- a denser
+     treatment for toolbars/sidebars where the vertical layout's full-height
+     rows don't fit. */
+  :host([layout='compact']) {
+    max-inline-size: none;
+  }
+  :host([layout='compact']) [part='base'] {
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    gap: var(--lyra-space-m);
+    padding: var(--lyra-space-m);
+  }
+  :host([layout='compact']) [part='model-row'],
+  :host([layout='compact']) [part='temperature-row'] {
+    flex: 1 1 12rem;
+    min-inline-size: 10rem;
+  }
+  :host([layout='compact']) [part='temperature-label'] {
+    font-size: 0.6875rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    color: var(--lyra-color-text-quiet);
+  }
+`;

package/dist/components/playback/playback.d.ts

@@ -13,10 +13,19 @@ import { LyraElement } from '../../internal/lyra-element.js';
  */
 export declare class LyraPlayback extends LyraElement {
     static styles: import("lit").CSSResultGroup[];
+    static properties: {
+        playing: {
+            type: BooleanConstructor;
+            reflect: boolean;
+            noAccessor: boolean;
+        };
+        loop: {
+            type: BooleanConstructor;
+        };
+    };
     length: number;
     index: number;
     intervalMs: number;
-    playing: boolean;
     loop: boolean;
     /**
      * Re-declared as a Lit reactive property (shadowing the inherited plain
@@ -27,6 +36,9 @@ export declare class LyraPlayback extends LyraElement {
      */
     hidden: boolean;
     private timer?;
+    private _playing;
+    get playing(): boolean;
+    set playing(next: boolean);
     /** Largest index reachable at the current `length` (never negative). */
     private get maxIndex();
     disconnectedCallback(): void;

package/dist/components/playback/playback.js

@@ -10,6 +10,14 @@ import { LyraElement } from '../../internal/lyra-element.js';
 import { defineElement } from '../../internal/prefix.js';
 import { playIcon, pauseIcon } from '../../internal/icons.js';
 import { styles } from './playback.styles.js';
+const MIN_INTERVAL_MS = 16; // ~one animation frame; prevents a near-zero-delay tick loop
+let warnedInvalidInterval = false;
+function warnInvalidInterval(value) {
+    if (warnedInvalidInterval)
+        return;
+    warnedInvalidInterval = true;
+    console.warn(`<lyra-playback> received a non-finite or non-positive interval-ms (${value}); clamping to ${MIN_INTERVAL_MS}ms.`);
+}
 /**
  * `<lyra-playback>` — steps an index through `[0, length)` on a fixed
  * interval (play/pause), the common building block behind ad-hoc
@@ -27,7 +35,10 @@ export class LyraPlayback extends LyraElement {
         this.length = 0;
         this.index = 0;
         this.intervalMs = 900;
-        this.playing = false;
+        // `playing` is declared via `static properties` above (noAccessor) with a
+        // hand-written accessor below, so a direct `el.playing = true/false`
+        // assignment always drives the real timer — not just calls through
+        // play()/pause().
         this.loop = true;
         /**
          * Re-declared as a Lit reactive property (shadowing the inherited plain
@@ -37,8 +48,36 @@ export class LyraPlayback extends LyraElement {
          * `reflect: true` preserves the native attribute-reflection behavior.
          */
         this.hidden = false;
+        this._playing = false;
     }
     static { this.styles = [LyraElement.styles, styles]; }
+    static { this.properties = {
+        playing: { type: Boolean, reflect: true, noAccessor: true },
+        loop: { type: Boolean },
+    }; }
+    get playing() {
+        return this._playing;
+    }
+    set playing(next) {
+        const old = this._playing;
+        if (next === old)
+            return;
+        this._playing = next;
+        if (next) {
+            if (this.length <= 1) {
+                this._playing = false;
+                return;
+            }
+            this.emit('lyra-play');
+            this.scheduleTick();
+        }
+        else {
+            window.clearTimeout(this.timer);
+            this.timer = undefined;
+            this.emit('lyra-pause');
+        }
+        this.requestUpdate('playing', old);
+    }
     /** Largest index reachable at the current `length` (never negative). */
     get maxIndex() {
         return Math.max(0, this.length - 1);
@@ -68,21 +107,16 @@ export class LyraPlayback extends LyraElement {
         if (this.playing || this.length <= 1)
             return;
         this.playing = true;
-        this.emit('lyra-play');
-        this.scheduleTick();
     }
     /** Stop playback. */
     pause() {
         if (!this.playing)
             return;
-        window.clearTimeout(this.timer);
-        this.timer = undefined;
         this.playing = false;
-        this.emit('lyra-pause');
     }
     /** Toggle between playing and paused. */
     toggle() {
-        this.playing ? this.pause() : this.play();
+        this.playing = !this.playing;
     }
     // A self-rescheduling `setTimeout` (rather than one long-lived
     // `setInterval`) so `intervalMs` is re-read fresh before every tick, the
@@ -90,11 +124,16 @@ export class LyraPlayback extends LyraElement {
     // `interval-ms` live takes effect on the very next step instead of only
     // after a pause/play cycle.
     scheduleTick() {
+        let delay = this.intervalMs;
+        if (!Number.isFinite(delay) || delay < MIN_INTERVAL_MS) {
+            warnInvalidInterval(delay);
+            delay = MIN_INTERVAL_MS;
+        }
         this.timer = window.setTimeout(() => {
             this.tick();
             if (this.playing)
                 this.scheduleTick();
-        }, this.intervalMs);
+        }, delay);
     }
     tick() {
         const next = this.index + 1;
@@ -164,12 +203,6 @@ __decorate([
 __decorate([
     property({ type: Number, attribute: 'interval-ms' })
 ], LyraPlayback.prototype, "intervalMs", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], LyraPlayback.prototype, "playing", void 0);
-__decorate([
-    property({ type: Boolean })
-], LyraPlayback.prototype, "loop", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], LyraPlayback.prototype, "hidden", void 0);

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

@@ -0,0 +1,150 @@
+import { type TemplateResult, type PropertyValues } from 'lit';
+import { LyraElement } from '../../internal/lyra-element.js';
+/** The `mode` property's literal value -- `'auto'` tracks the viewport
+ *  breakpoint live; `'inline'`/`'overlay'` force that presentation
+ *  regardless of viewport width. */
+export type ResponsivePanelMode = 'inline' | 'overlay' | 'auto';
+/** What `mode` actually resolves to once the breakpoint is taken into
+ *  account -- `'auto'` never appears here. */
+export type ResponsivePanelEffectiveMode = 'inline' | 'overlay';
+export type ResponsivePanelVariant = 'fullscreen' | 'bottom-sheet';
+/** Reason the panel was closed, forwarded as the `lyra-close` event detail --
+ *  mirrors lyra-dialog's own `DialogCloseReason` shape. `'escape'` and
+ *  `'backdrop'` are emitted by the overlay presentation's own built-in
+ *  dismiss triggers (they can't occur while inline, since there's no
+ *  backdrop/document-keydown trap wired up then); any other string is
+ *  whatever a caller passes to `close()`. */
+export type ResponsivePanelCloseReason = 'escape' | 'backdrop' | 'api' | string;
+export interface ResponsivePanelModeChangeDetail {
+    mode: ResponsivePanelEffectiveMode;
+}
+/**
+ * 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 declare function resolveEffectiveMode(mode: ResponsivePanelMode, belowBreakpoint: boolean): ResponsivePanelEffectiveMode;
+/**
+ * `<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 declare class LyraResponsivePanel extends LyraElement {
+    static styles: import("lit").CSSResultGroup[];
+    /** 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. */
+    open: boolean;
+    /** `'auto'` (default) tracks `mobile-breakpoint` live; `'inline'`/`'overlay'` force that
+     *  presentation regardless of viewport width. */
+    mode: ResponsivePanelMode;
+    /** 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. */
+    variant: ResponsivePanelVariant;
+    /** Accessible name for the overlay presentation's `role="dialog"`. Unused in the inline
+     *  presentation, which has no dialog semantics to name. */
+    label: string;
+    /** 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). */
+    mobileBreakpoint: string;
+    private belowBreakpoint;
+    private effectiveMode;
+    private hasHeaderSlot;
+    private hasFooterSlot;
+    private mediaQuery?;
+    private releaseScrollLock?;
+    private lastTrigger?;
+    /** 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. */
+    private overlayChromeActive;
+    private isFirstUpdate;
+    protected willUpdate(changed: PropertyValues): void;
+    protected updated(changed: PropertyValues): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private setupMediaQuery;
+    private onMediaChange;
+    /** 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. */
+    private handleBreakpointChange;
+    private onHeaderSlotChange;
+    private onFooterSlotChange;
+    /**
+     * 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?: ResponsivePanelCloseReason): void;
+    private onBackdropClick;
+    private onDocKeyDown;
+    private getFocusableElements;
+    private getActiveElement;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-responsive-panel': LyraResponsivePanel;
+    }
+}