@aceshooting/lyra-ui 2.1.0 → 2.3.0

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

@@ -0,0 +1,164 @@
+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 & Record<never, never>);
+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. 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 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.
+ * @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. 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'`
+     *  (above it). */
+    mobileBreakpoint: string;
+    private belowBreakpoint;
+    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?;
+    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
+     *  `matchMedia` listener that normally drives it -- tests invoke this
+     *  directly to simulate crossing the breakpoint. */
+    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
+     * 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;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-responsive-panel': LyraResponsivePanel;
+    }
+}
+//# sourceMappingURL=responsive-panel.class.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"responsive-panel.class.d.ts","sourceRoot":"","sources":["../../../src/components/responsive-panel/responsive-panel.class.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAE9E,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAO7D;;oCAEoC;AACpC,MAAM,MAAM,mBAAmB,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,CAAC;AAEhE;8CAC8C;AAC9C,MAAM,MAAM,4BAA4B,GAAG,QAAQ,GAAG,SAAS,CAAC;AAEhE,MAAM,MAAM,sBAAsB,GAAG,YAAY,GAAG,cAAc,CAAC;AAEnE;;;;;6CAK6C;AAC7C,MAAM,MAAM,0BAA0B,GAAG,QAAQ,GAAG,UAAU,GAAG,KAAK,GAAG,CAAC,MAAM,GAAG,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC;AAEzG,MAAM,WAAW,+BAA+B;IAC9C,IAAI,EAAE,4BAA4B,CAAC;CACpC;AAED;;;;;;;GAOG;AACH,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,mBAAmB,EAAE,eAAe,EAAE,OAAO,GAAG,4BAA4B,CAGtH;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8DG;AACH,qBAAa,mBAAoB,SAAQ,WAAW;IAClD,MAAM,CAAC,MAAM,iCAAgC;IAE7C;+EAC2E;IAC/B,IAAI,UAAS;IAEzD;qDACiD;IACpB,IAAI,EAAE,mBAAmB,CAAU;IAEhE;;kBAEc;IACe,OAAO,EAAE,sBAAsB,CAAgB;IAE5E;;2EAEuE;IAC3D,KAAK,SAAM;IAEvB;;sBAEkB;IAC4B,gBAAgB,SAAW;IAEhE,OAAO,CAAC,eAAe,CAAS;IAChC,OAAO,CAAC,aAAa,CAA0C;IAC/D,OAAO,CAAC,aAAa,CAAS;IAC9B,OAAO,CAAC,aAAa,CAAS;IACvC,sGAAsG;IAC7F,OAAO,CAAC,WAAW,CAAC,CAAS;IAEtC,OAAO,CAAC,UAAU,CAAC,CAAiB;IACpC,OAAO,CAAC,iBAAiB,CAAC,CAAa;IACvC,OAAO,CAAC,WAAW,CAAC,CAAc;IAClC,OAAO,CAAC,aAAa,CAAC,CAAgB;IACtC;;;oCAGgC;IAChC,OAAO,CAAC,mBAAmB,CAAS;IACpC,OAAO,CAAC,uBAAuB,CAAS;IACxC,OAAO,CAAC,aAAa,CAAQ;IAE7B,SAAS,CAAC,UAAU,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI,CAyDlD;IAKD,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI,CAQ/C;IAED,iBAAiB,IAAI,IAAI,CAiBxB;IAED,oBAAoB,IAAI,IAAI,CAO3B;IAED,OAAO,CAAC,qBAAqB;IAW7B,OAAO,CAAC,uBAAuB;IAO/B,OAAO,CAAC,eAAe;IAYvB,OAAO,CAAC,aAAa,CAEnB;IAEF;;wDAEoD;IACpD,OAAO,CAAC,sBAAsB;IAI9B,OAAO,CAAC,kBAAkB,CAGxB;IAEF,OAAO,CAAC,kBAAkB,CAExB;IAWF,OAAO,CAAC,iBAAiB;IAazB;;;;;;;;;OASG;IACH,KAAK,CAAC,MAAM,GAAE,0BAAkC,GAAG,IAAI,CAItD;IAED,OAAO,CAAC,eAAe,CAErB;IAEF,MAAM,IAAI,cAAc,CAyBvB;CACF;AAGD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,uBAAuB,EAAE,mBAAmB,CAAC;KAC9C;CACF"}

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

@@ -0,0 +1,362 @@
+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 { activateOverlay, deepActiveElement } from '../../internal/overlay-manager.js';
+import { lockScroll } from '../../internal/scroll-lock.js';
+import { styles } from './responsive-panel.styles.js';
+const HEADING_SELECTOR = 'h1, h2, h3, h4, h5, h6, [role="heading"]';
+/**
+ * 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. 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 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.
+ * @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. When empty, falls back to the `header`
+         *  slot's content -- see the class doc for the full fallback order. */
+        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 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. */
+        this.overlayChromeActive = false;
+        this.focusOverlayAfterUpdate = false;
+        this.isFirstUpdate = true;
+        this.onMediaChange = (e) => {
+            this.handleBreakpointChange(e.matches);
+        };
+        this.onHeaderSlotChange = (e) => {
+            this.hasHeaderSlot = e.target.assignedElements({ flatten: true }).length > 0;
+            this.headingText = this.detectHeadingText();
+        };
+        this.onFooterSlotChange = (e) => {
+            this.hasFooterSlot = e.target.assignedElements({ flatten: true }).length > 0;
+        };
+        this.onBackdropClick = () => {
+            this.overlayHandle?.dismissBackdrop();
+        };
+    }
+    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');
+            this.headingText = this.detectHeadingText();
+        }
+        // Must run before the effectiveMode computation below reads
+        // belowBreakpoint: setupMediaQuery() -> handleBreakpointChange() mutates
+        // belowBreakpoint synchronously, and a runtime mobileBreakpoint change is
+        // otherwise the only kind of change in this method that doesn't itself
+        // touch mode/belowBreakpoint, so computing effectiveMode first would read
+        // the not-yet-updated belowBreakpoint and never get another chance to
+        // react -- a property write from inside willUpdate doesn't schedule a
+        // fresh update, it only folds into the one already in progress.
+        // mobileBreakpoint is present on the very first willUpdate too (Lit's
+        // changed-properties map includes every class-field default from
+        // construction), but connectedCallback() already called setupMediaQuery()
+        // once before this first update runs, so repeating it here would be
+        // redundant -- only a live post-mount change should re-run it.
+        if (!this.isFirstUpdate && changed.has('mobileBreakpoint') && this.isConnected) {
+            this.setupMediaQuery();
+        }
+        if (this.isFirstUpdate || changed.has('mode') || changed.has('belowBreakpoint')) {
+            this.effectiveMode = resolveEffectiveMode(this.mode, this.belowBreakpoint);
+        }
+        // Captured on a genuine open transition only, independent of
+        // effectiveMode at that moment -- so it reflects whatever triggered the
+        // open even if a later breakpoint crossing (while still open) switches
+        // the presentation to overlay before close() runs. Deliberately not
+        // folded into the overlayOpen-engage branch below: that branch also
+        // fires when only effectiveMode (not open) changes, which would
+        // re-capture whatever currently has focus (e.g. something inside the
+        // panel) instead of the original external trigger.
+        if (changed.has('open') && this.open) {
+            const active = deepActiveElement(this.ownerDocument);
+            this.lastTrigger = active && typeof active.focus === 'function' ? active : undefined;
+        }
+        const overlayOpen = this.effectiveMode === 'overlay' && this.open;
+        if (overlayOpen !== this.overlayChromeActive) {
+            this.overlayChromeActive = overlayOpen;
+            if (overlayOpen) {
+                this.activateOverlayChrome();
+                // Once the presentation becomes modal, focus cannot remain behind
+                // it. The manager preserves focus that is already inside the panel
+                // and otherwise moves it to the first composed focus target.
+                this.focusOverlayAfterUpdate = true;
+            }
+            else {
+                // Removing modal chrome while the still-open panel becomes inline
+                // must preserve focus in that same panel. Only a real open -> closed
+                // transition restores the opener.
+                this.deactivateOverlayChrome(changed.has('open') && !this.open);
+            }
+        }
+        if (changed.has('open') && !this.open)
+            this.lastTrigger = undefined;
+    }
+    // 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.
+    updated(changed) {
+        if (!this.isFirstUpdate && changed.has('effectiveMode')) {
+            this.emit('lyra-mode-change', { mode: this.effectiveMode });
+        }
+        if (this.focusOverlayAfterUpdate) {
+            this.focusOverlayAfterUpdate = false;
+            this.overlayHandle?.focusInitial();
+        }
+    }
+    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.
+        const overlayOpen = resolveEffectiveMode(this.mode, this.belowBreakpoint) === 'overlay' && this.open;
+        if (this.hasUpdated && overlayOpen) {
+            if (this.overlayHandle?.isActive()) {
+                this.overlayHandle.resume();
+            }
+            else {
+                this.activateOverlayChrome();
+            }
+            if (!this.releaseScrollLock)
+                this.releaseScrollLock = lockScroll(this.ownerDocument);
+            queueMicrotask(() => this.overlayHandle?.focusInitial());
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.mediaQuery?.removeEventListener('change', this.onMediaChange);
+        this.mediaQuery = undefined;
+        this.releaseScrollLock?.();
+        this.releaseScrollLock = undefined;
+        this.overlayHandle?.suspend();
+    }
+    activateOverlayChrome() {
+        this.releaseScrollLock ??= lockScroll(this.ownerDocument);
+        this.overlayHandle = activateOverlay({
+            host: this,
+            panel: () => this.shadowRoot?.querySelector('[part="panel"]') ?? null,
+            onEscape: () => this.close('escape'),
+            onBackdrop: () => this.close('backdrop'),
+            restoreFocusTo: this.lastTrigger ?? null,
+        });
+    }
+    deactivateOverlayChrome(restoreFocus = true) {
+        this.releaseScrollLock?.();
+        this.releaseScrollLock = undefined;
+        this.overlayHandle?.deactivate({ restoreFocus });
+        this.overlayHandle = undefined;
+    }
+    setupMediaQuery() {
+        this.mediaQuery?.removeEventListener('change', this.onMediaChange);
+        const view = this.ownerDocument.defaultView;
+        if (!view?.matchMedia) {
+            this.mediaQuery = undefined;
+            return;
+        }
+        this.mediaQuery = view.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;
+    }
+    // Only direct children slotted into `header` are scanned -- same depth
+    // limit lyra-dialog's own detectHeading() applies to its direct children.
+    // A heading tag among them wins (its own text only, so a header slot mixing
+    // a heading with e.g. a trailing icon button doesn't pull the button's
+    // label into the accessible name); otherwise the header slot's combined
+    // text stands in for it, since this component (unlike lyra-dialog) has a
+    // dedicated header slot that's already the conventional place a heading
+    // would go. Recomputed only on slot assignment changes, not on every
+    // render -- same rationale as lyra-dialog's detectHeading().
+    detectHeadingText() {
+        const headerChildren = Array.from(this.children).filter((el) => el.getAttribute('slot') === 'header');
+        if (headerChildren.length === 0)
+            return undefined;
+        const heading = headerChildren.find((el) => el.matches(HEADING_SELECTOR));
+        if (heading)
+            return heading.textContent?.trim() || undefined;
+        return (headerChildren
+            .map((el) => el.textContent?.trim())
+            .filter(Boolean)
+            .join(' ') || undefined);
+    }
+    /**
+     * 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);
+    }
+    render() {
+        const overlay = this.effectiveMode === 'overlay';
+        const accessibleName = this.label || this.headingText;
+        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 && accessibleName ? accessibleName : 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);
+__decorate([
+    state()
+], LyraResponsivePanel.prototype, "headingText", void 0);
+//# sourceMappingURL=responsive-panel.class.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"responsive-panel.class.js","sourceRoot":"","sources":["../../../src/components/responsive-panel/responsive-panel.class.ts"],"names":[],"mappings":"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"}