@aceshooting/lyra-ui 2.0.0 → 2.1.0

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

@@ -1,4 +1,4 @@
-import { type TemplateResult } from 'lit';
+import { type PropertyValues, 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';
@@ -24,6 +24,12 @@ export interface ModelSettingsChangeDetail {
  * components themselves for the exact semantics of `catalog`/`allowCustom`
  * and `temperatureMin`/`temperatureMax`/`temperatureStep`.
  *
+ * The panel's own `temperature` readout mirrors the slider's *live* value —
+ * updated on every `lyra-input` (drag/key-repeat), not just the committed
+ * `lyra-change` — and is re-clamped into `[temperatureMin, temperatureMax]`
+ * (snapped to `temperatureStep`) whenever those three properties change, so
+ * it can never drift from what the nested `lyra-slider` itself shows.
+ *
  * @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.
@@ -51,15 +57,33 @@ export declare class LyraModelSettingsPanel extends LyraElement {
      *  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;
+    /** Disables the panel as a unit by forwarding to both the internal
+     *  `lyra-model-select` and `lyra-slider` — a wrapping `<fieldset disabled>`
+     *  alone would not reach either, since a form-associated control's own
+     *  `disabled` IDL property/attribute is never mutated by fieldset cascading. */
+    disabled: boolean;
     /** 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();
+    /** Clamps `raw` into `[temperatureMin, temperatureMax]`, snapped to
+     *  `temperatureStep`'s grid anchored at the low end -- exactly mirroring
+     *  `lyra-slider`'s own private `clampValue`/`domain` math -- so the
+     *  mirrored `temperature` readout can never disagree with what the nested
+     *  slider itself would clamp the same raw number to. */
+    private clampTemperature;
     private emitChange;
     private onModelChange;
     private onTemperatureChange;
+    /** Mirrors the slider's *live* (uncommitted) value into the panel's own
+     *  `temperature` readout -- display only, no `emitChange()` -- mirroring
+     *  native `input` (continuous) vs. `change` (committed) semantics so the
+     *  readout tracks an in-progress drag/key-repeat instead of only updating
+     *  once the interaction commits. */
+    private onTemperatureInput;
+    protected willUpdate(changed: PropertyValues<this>): void;
     render(): TemplateResult;
 }
 declare global {

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

@@ -8,6 +8,7 @@ import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { LyraElement } from '../../internal/lyra-element.js';
 import { defineElement } from '../../internal/prefix.js';
+import { finiteNumber, finiteRange } from '../../internal/numbers.js';
 import { styles } from './model-settings-panel.styles.js';
 import '../model-select/model-select.js';
 import '../slider/slider.js';
@@ -18,6 +19,15 @@ const DEFAULT_TEMPERATURE_STEP = 0.1;
 // 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;
+/** Number of decimal digits in `n`'s shortest string representation, e.g.
+ *  `0.1` -> 1, `5` -> 0. Mirrors lyra-slider's identical helper so the
+ *  panel's own re-clamping of `temperature` lands on the exact same
+ *  step-grid values the nested slider itself would compute. */
+function decimalPlaces(n) {
+    const str = n.toString();
+    const dot = str.indexOf('.');
+    return dot === -1 ? 0 : str.length - dot - 1;
+}
 /**
  * `<lyra-model-settings-panel>` — a fixed composition of `<lyra-model-select>`
  * and `<lyra-slider>` into one agent-configuration card: pick a provider's
@@ -31,6 +41,12 @@ const DEFAULT_TEMPERATURE = 1;
  * components themselves for the exact semantics of `catalog`/`allowCustom`
  * and `temperatureMin`/`temperatureMax`/`temperatureStep`.
  *
+ * The panel's own `temperature` readout mirrors the slider's *live* value —
+ * updated on every `lyra-input` (drag/key-repeat), not just the committed
+ * `lyra-change` — and is re-clamped into `[temperatureMin, temperatureMax]`
+ * (snapped to `temperatureStep`) whenever those three properties change, so
+ * it can never drift from what the nested `lyra-slider` itself shows.
+ *
  * @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.
@@ -57,6 +73,11 @@ export class LyraModelSettingsPanel extends LyraElement {
          *  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';
+        /** Disables the panel as a unit by forwarding to both the internal
+         *  `lyra-model-select` and `lyra-slider` — a wrapping `<fieldset disabled>`
+         *  alone would not reach either, since a form-associated control's own
+         *  `disabled` IDL property/attribute is never mutated by fieldset cascading. */
+        this.disabled = false;
         this.onModelChange = (e) => {
             this.modelValue = e.detail.value;
             this.emitChange();
@@ -65,6 +86,14 @@ export class LyraModelSettingsPanel extends LyraElement {
             this.temperature = e.detail.value;
             this.emitChange();
         };
+        /** Mirrors the slider's *live* (uncommitted) value into the panel's own
+         *  `temperature` readout -- display only, no `emitChange()` -- mirroring
+         *  native `input` (continuous) vs. `change` (committed) semantics so the
+         *  readout tracks an in-progress drag/key-repeat instead of only updating
+         *  once the interaction commits. */
+        this.onTemperatureInput = (e) => {
+            this.temperature = e.detail.value;
+        };
     }
     static { this.styles = [LyraElement.styles, styles]; }
     /** Whether `modelValue` is present in `catalog` — recomputed fresh from
@@ -78,6 +107,28 @@ export class LyraModelSettingsPanel extends LyraElement {
             return false;
         return catalog.some((entry) => (typeof entry === 'string' ? entry === this.modelValue : entry.id === this.modelValue));
     }
+    /** Clamps `raw` into `[temperatureMin, temperatureMax]`, snapped to
+     *  `temperatureStep`'s grid anchored at the low end -- exactly mirroring
+     *  `lyra-slider`'s own private `clampValue`/`domain` math -- so the
+     *  mirrored `temperature` readout can never disagree with what the nested
+     *  slider itself would clamp the same raw number to. */
+    clampTemperature(raw) {
+        const rawMin = this.temperatureMin;
+        const rawMax = this.temperatureMax;
+        const min = finiteNumber(rawMin, DEFAULT_TEMPERATURE_MIN);
+        const max = finiteNumber(rawMax, DEFAULT_TEMPERATURE_MAX);
+        const lo = Math.min(min, max);
+        const hi = Math.max(min, max);
+        const step = finiteRange(this.temperatureStep, 0, 0);
+        const hasStep = step > 0;
+        let stepped = finiteNumber(raw, lo);
+        if (hasStep) {
+            const stepsFromLo = Math.round((raw - lo) / step);
+            const factor = 10 ** decimalPlaces(step);
+            stepped = Math.round((lo + stepsFromLo * step) * factor) / factor;
+        }
+        return Math.min(hi, Math.max(lo, stepped));
+    }
     emitChange() {
         this.emit('lyra-change', {
             modelValue: this.modelValue,
@@ -85,6 +136,13 @@ export class LyraModelSettingsPanel extends LyraElement {
             temperature: this.temperature,
         });
     }
+    willUpdate(changed) {
+        if (changed.has('temperatureMin') || changed.has('temperatureMax') || changed.has('temperatureStep')) {
+            const clamped = this.clampTemperature(this.temperature);
+            if (clamped !== this.temperature)
+                this.temperature = clamped;
+        }
+    }
     render() {
         return html `
       <div part="base">
@@ -94,6 +152,7 @@ export class LyraModelSettingsPanel extends LyraElement {
             .catalog=${this.catalog}
             .value=${this.modelValue}
             .allowCustom=${this.allowCustom}
+            .disabled=${this.disabled}
             placeholder="Select a model…"
             @lyra-change=${this.onModelChange}
           ></lyra-model-select>
@@ -107,9 +166,11 @@ export class LyraModelSettingsPanel extends LyraElement {
             .step=${this.temperatureStep}
             .valueAsNumber=${this.temperature}
             .showValue=${false}
+            .disabled=${this.disabled}
+            @lyra-input=${this.onTemperatureInput}
             @lyra-change=${this.onTemperatureChange}
           ></lyra-slider>
-          <span part="temperature-value">${this.temperature}</span>
+          <span part="temperature-value" aria-hidden="true">${this.temperature}</span>
         </div>
       </div>
     `;
@@ -142,4 +203,7 @@ __decorate([
 __decorate([
     property({ reflect: true })
 ], LyraModelSettingsPanel.prototype, "layout", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LyraModelSettingsPanel.prototype, "disabled", void 0);
 defineElement('model-settings-panel', LyraModelSettingsPanel);

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

@@ -9,7 +9,9 @@ import { LyraElement } from '../../internal/lyra-element.js';
  * @event lyra-play - Fired when playback starts.
  * @event lyra-pause - Fired when playback stops (including auto-pause).
  * @event lyra-step - `detail: { index }`, fired on every tick and manual step.
- * @csspart base, play-button, slider
+ * @csspart base - The playback controls wrapper.
+ * @csspart play-button - The play/pause button.
+ * @csspart slider - The playback position slider.
  */
 export declare class LyraPlayback extends LyraElement {
     static styles: import("lit").CSSResultGroup[];
@@ -39,7 +41,9 @@ export declare class LyraPlayback extends LyraElement {
     private _playing;
     get playing(): boolean;
     set playing(next: boolean);
-    /** Largest index reachable at the current `length` (never negative). */
+    /** Largest index reachable at the current `length` (never negative, and
+     * never NaN — a non-finite `length` falls back to 0 rather than leaking a
+     * literal "NaN" into the rendered slider's `max` attribute). */
     private get maxIndex();
     disconnectedCallback(): void;
     protected willUpdate(changed: PropertyValues): void;

package/dist/components/playback/playback.js

@@ -9,14 +9,27 @@ import { property } from 'lit/decorators.js';
 import { LyraElement } from '../../internal/lyra-element.js';
 import { defineElement } from '../../internal/prefix.js';
 import { playIcon, pauseIcon } from '../../internal/icons.js';
+import { finiteCount, finiteDuration, MAX_TIMEOUT_MS } from '../../internal/numbers.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;
+// Deduplicated per distinct bad value (like the analogous one-time warnings
+// in lyra-heatmap/lyra-word-cloud) rather than a single once-ever flag, so a
+// later, genuinely different bad value is never silently swallowed by an
+// earlier, unrelated one.
+const warnedInvalidIntervals = new Set();
 function warnInvalidInterval(value) {
-    if (warnedInvalidInterval)
+    if (warnedInvalidIntervals.has(value))
         return;
-    warnedInvalidInterval = true;
-    console.warn(`<lyra-playback> received a non-finite or non-positive interval-ms (${value}); clamping to ${MIN_INTERVAL_MS}ms.`);
+    warnedInvalidIntervals.add(value);
+    // The clamp fires for any value outside the timer-safe range, so report the
+    // reason that actually applies instead of collapsing every bad value into
+    // one misleading "non-finite or non-positive" message.
+    const reason = !Number.isFinite(value)
+        ? 'non-finite'
+        : value < MIN_INTERVAL_MS
+            ? `below the ${MIN_INTERVAL_MS}ms floor`
+            : `above the ${MAX_TIMEOUT_MS}ms ceiling`;
+    console.warn(`<lyra-playback> interval-ms (${value}) is ${reason}; clamping to ${MIN_INTERVAL_MS}ms.`);
 }
 /**
  * `<lyra-playback>` — steps an index through `[0, length)` on a fixed
@@ -27,7 +40,9 @@ function warnInvalidInterval(value) {
  * @event lyra-play - Fired when playback starts.
  * @event lyra-pause - Fired when playback stops (including auto-pause).
  * @event lyra-step - `detail: { index }`, fired on every tick and manual step.
- * @csspart base, play-button, slider
+ * @csspart base - The playback controls wrapper.
+ * @csspart play-button - The play/pause button.
+ * @csspart slider - The playback position slider.
  */
 export class LyraPlayback extends LyraElement {
     constructor() {
@@ -64,7 +79,7 @@ export class LyraPlayback extends LyraElement {
             return;
         this._playing = next;
         if (next) {
-            if (this.length <= 1) {
+            if (finiteCount(this.length) <= 1) {
                 this._playing = false;
                 return;
             }
@@ -78,9 +93,11 @@ export class LyraPlayback extends LyraElement {
         }
         this.requestUpdate('playing', old);
     }
-    /** Largest index reachable at the current `length` (never negative). */
+    /** Largest index reachable at the current `length` (never negative, and
+     * never NaN — a non-finite `length` falls back to 0 rather than leaking a
+     * literal "NaN" into the rendered slider's `max` attribute). */
     get maxIndex() {
-        return Math.max(0, this.length - 1);
+        return Math.max(0, finiteCount(this.length) - 1);
     }
     disconnectedCallback() {
         super.disconnectedCallback();
@@ -89,6 +106,19 @@ export class LyraPlayback extends LyraElement {
     willUpdate(changed) {
         if (changed.has('hidden') && this.hidden)
             this.pause();
+        // A non-finite `length`/`index` (e.g. externally assigned NaN) must not
+        // linger: `maxIndex` already falls back to a safe value for rendering,
+        // but `next()`/`previous()` compare `index`/`length` directly and would
+        // otherwise stay permanently bricked (NaN comparisons are always
+        // false). Checked unconditionally — not just under the `length` branch
+        // below — so a corrupted `index` alone still self-heals on the very next
+        // update, without requiring `length` to also change.
+        const length = finiteCount(this.length);
+        const index = finiteCount(this.index);
+        if (length !== this.length)
+            this.length = length;
+        if (index !== this.index)
+            this.index = index;
         if (changed.has('length')) {
             // If length is externally reduced to <= 1 while playing, the timer
             // would otherwise keep firing forever — and the play button (the only
@@ -104,7 +134,7 @@ export class LyraPlayback extends LyraElement {
     }
     /** Start playback; no-op if there's nothing to advance through. */
     play() {
-        if (this.playing || this.length <= 1)
+        if (this.playing || finiteCount(this.length) <= 1)
             return;
         this.playing = true;
     }
@@ -124,24 +154,32 @@ 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(() => {
+        const rawDelay = this.intervalMs;
+        const delay = finiteDuration(rawDelay, MIN_INTERVAL_MS, MIN_INTERVAL_MS);
+        if (delay !== rawDelay)
+            warnInvalidInterval(rawDelay);
+        // Self-identifying: a synchronous pause()+play() (or a synchronous
+        // play() from a 'lyra-pause'/'lyra-step' listener) invoked while this
+        // callback is running schedules its own new timer and overwrites
+        // `this.timer` before this callback resumes. Only the timer that is
+        // still the current one is allowed to reschedule itself — every other,
+        // now-superseded chain quietly stops instead of spawning a second,
+        // untracked chain that pause()/disconnectedCallback() can never reach.
+        const id = window.setTimeout(() => {
             this.tick();
-            if (this.playing)
+            if (this.playing && this.timer === id)
                 this.scheduleTick();
         }, delay);
+        this.timer = id;
     }
     tick() {
-        const next = this.index + 1;
-        if (next >= this.length) {
+        const length = finiteCount(this.length);
+        const next = finiteCount(this.index) + 1;
+        if (next >= length) {
             if (this.loop)
                 this.setIndex(0);
             else {
-                this.setIndex(this.length - 1);
+                this.setIndex(length - 1);
                 this.pause();
             }
         }
@@ -150,32 +188,37 @@ export class LyraPlayback extends LyraElement {
         }
     }
     setIndex(i) {
-        this.index = i;
+        this.index = finiteCount(i, 0, this.maxIndex);
         this.emit('lyra-step', { index: this.index });
     }
     /** Advance one step without starting playback. */
     next() {
-        if (this.index + 1 < this.length)
-            this.setIndex(this.index + 1);
+        const index = finiteCount(this.index);
+        if (index + 1 < finiteCount(this.length))
+            this.setIndex(index + 1);
     }
     /** Go back one step without starting playback. */
     previous() {
-        if (this.index > 0)
-            this.setIndex(this.index - 1);
+        const index = finiteCount(this.index);
+        if (index > 0)
+            this.setIndex(index - 1);
     }
     /** Jump to an explicit index, pausing playback. */
     goTo(index) {
         this.pause();
-        this.setIndex(Math.min(this.maxIndex, Math.max(0, index)));
+        this.setIndex(finiteCount(index, 0, this.maxIndex));
     }
     render() {
+        const maxIndex = this.maxIndex;
+        const index = finiteCount(this.index, 0, maxIndex);
+        const disabled = finiteCount(this.length) <= 1;
         return html `
       <div part="base">
         <button
           part="play-button"
           type="button"
           aria-label=${this.playing ? 'Pause' : 'Play'}
-          ?disabled=${this.length <= 1}
+          ?disabled=${disabled}
           @click=${() => this.toggle()}
         >
           ${this.playing ? pauseIcon() : playIcon()}
@@ -184,10 +227,10 @@ export class LyraPlayback extends LyraElement {
           part="slider"
           type="range"
           min="0"
-          max=${this.maxIndex}
-          .value=${String(this.index)}
+          max=${maxIndex}
+          .value=${String(index)}
           aria-label="Playback position"
-          ?disabled=${this.length <= 1}
+          ?disabled=${disabled}
           @input=${(e) => this.goTo(Number(e.target.value))}
         />
       </div>

package/dist/components/playback/playback.styles.js

@@ -4,6 +4,11 @@ export const styles = css `
     display: inline-flex;
     align-items: center;
     gap: var(--lyra-space-s);
+    /* Derived from --lyra-icon-button-size (0.35 * 2.5rem = 0.875rem, the
+       prior bare literal) so the rendered play/pause SVG icon (icons render
+       at width/height: 1em, so this font-size directly controls its pixel
+       size) tracks the button's own token instead of drifting from it. */
+    --lyra-playback-icon-size: calc(var(--lyra-icon-button-size) * 0.35);
   }
   [part='base'] {
     display: flex;
@@ -21,7 +26,7 @@ export const styles = css `
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    font-size: 0.875rem;
+    font-size: var(--lyra-playback-icon-size);
   }
   [part='play-button']:hover {
     border-color: var(--lyra-color-brand);

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

@@ -43,18 +43,26 @@ export declare function resolveEffectiveMode(mode: ResponsivePanelMode, belowBre
  * 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.
+ * it for free. When an open inline panel becomes modal, focus already inside
+ * is preserved and outside focus moves to the first available target. Closing
+ * still returns to the opener captured by the original inline open.
  *
- * 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).
+ * The overlay presentation uses the library's shared overlay coordinator for
+ * focus trapping, Escape/backdrop dismissal, inerting, and stack ordering,
+ * while retaining this component's own responsive rendering and close event.
+ *
+ * Accessible name (overlay presentation only -- the inline presentation has
+ * no dialog semantics to name): `label`, when set, is used verbatim. When
+ * `label` is empty, this falls back to the `header` slot's content -- a
+ * heading element (`h1`–`h6` or `[role="heading"]`) among the slotted header
+ * content wins if present, otherwise the header slot's full text content is
+ * used, mirroring lyra-dialog's `detectHeading()`/`headingText` fallback (see
+ * dialog.ts's module doc for why this uses `aria-label`, a copied string,
+ * rather than `aria-labelledby`: the header content is light DOM while
+ * `[part="panel"]` lives in this element's shadow tree, and an ID-reference
+ * attribute can't resolve across that boundary). A panel opened without
+ * either `label` or header content still renders `role="dialog"` with no
+ * accessible name -- set one of the two to avoid that.
  *
  * @customElement lyra-responsive-panel
  * @slot - The panel body.
@@ -95,7 +103,8 @@ export declare class LyraResponsivePanel extends LyraElement {
      *  height. */
     variant: ResponsivePanelVariant;
     /** Accessible name for the overlay presentation's `role="dialog"`. Unused in the inline
-     *  presentation, which has no dialog semantics to name. */
+     *  presentation, which has no dialog semantics to name. When empty, falls back to the `header`
+     *  slot's content -- see the class doc for the full fallback order. */
     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'`
@@ -105,19 +114,25 @@ export declare class LyraResponsivePanel extends LyraElement {
     private effectiveMode;
     private hasHeaderSlot;
     private hasFooterSlot;
+    /** Fallback accessible name sourced from the `header` slot's content -- see `detectHeadingText()`. */
+    private headingText?;
     private mediaQuery?;
     private releaseScrollLock?;
     private lastTrigger?;
-    /** Whether the overlay-only mechanics (scroll-lock, document Escape/Tab trap) are currently
+    private overlayHandle?;
+    /** Whether the overlay-only mechanics (scroll-lock and shared overlay registration) 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 focusOverlayAfterUpdate;
     private isFirstUpdate;
     protected willUpdate(changed: PropertyValues): void;
     protected updated(changed: PropertyValues): void;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    private activateOverlayChrome;
+    private deactivateOverlayChrome;
     private setupMediaQuery;
     private onMediaChange;
     /** The breakpoint-response logic itself, kept callable independently of the
@@ -126,6 +141,7 @@ export declare class LyraResponsivePanel extends LyraElement {
     private handleBreakpointChange;
     private onHeaderSlotChange;
     private onFooterSlotChange;
+    private detectHeadingText;
     /**
      * Close the panel. `reason` is forwarded as the `lyra-close` detail --
      * built-in overlay triggers pass `'escape'`/`'backdrop'`; a consumer's own
@@ -138,9 +154,6 @@ export declare class LyraResponsivePanel extends LyraElement {
      */
     close(reason?: ResponsivePanelCloseReason): void;
     private onBackdropClick;
-    private onDocKeyDown;
-    private getFocusableElements;
-    private getActiveElement;
     render(): TemplateResult;
 }
 declare global {