@aceshooting/lyra-ui 2.1.0 → 2.2.0

package/dist/components/widget/widget.class.d.ts

@@ -0,0 +1,70 @@
+import { type TemplateResult, type PropertyValues } from 'lit';
+import { LyraElement } from '../../internal/lyra-element.js';
+/**
+ * `<lyra-widget>` — a titled panel shell with an optional collapse toggle and
+ * an optional fullscreen-expand toggle. Fullscreen promotes the same host
+ * element in place (a CSS state, not a clone/portal), so slotted content
+ * (a chart, a running simulation, scroll position) survives the transition.
+ *
+ * @customElement lyra-widget
+ * @slot - The panel body.
+ * @slot actions - Header action controls, rendered before the collapse/expand buttons.
+ * @event lyra-collapse-change - `detail: boolean` (the new `collapsed` state).
+ * @event lyra-fullscreen-change - `detail: boolean` (the new `fullscreen` state).
+ * @csspart base - The panel root (dialog role + backdrop when fullscreen).
+ * @csspart header - The header row containing the title, actions, and toggle buttons.
+ * @csspart title - The wrapper around the label/sublabel.
+ * @csspart label - The panel title text.
+ * @csspart sublabel - The panel subtitle text.
+ * @csspart actions - The wrapper around the `actions` slot.
+ * @csspart collapse-button - The collapse/expand toggle button.
+ * @csspart fullscreen-button - The fullscreen toggle button.
+ * @csspart body - The wrapper around the default slot (the panel body).
+ * @csspart backdrop - The fullscreen scrim behind the panel.
+ *
+ * `fullscreen-inset` overrides the default `var(--lyra-space-l)` inset applied to `[part="base"]`
+ * and `[part="backdrop"]` while fullscreen (e.g. `"0 0 0 240px"` to leave a persistent sidebar
+ * visible). `compact` tightens header/body padding — same convention as `lyra-empty`'s `compact`.
+ */
+export interface LyraWidgetEventMap {
+    'lyra-collapse-change': CustomEvent<boolean>;
+    'lyra-fullscreen-change': CustomEvent<boolean>;
+}
+export declare class LyraWidget extends LyraElement<LyraWidgetEventMap> {
+    static styles: import("lit").CSSResultGroup[];
+    label: string;
+    sublabel: string;
+    collapsible: boolean;
+    collapsed: boolean;
+    expandable: boolean;
+    fullscreen: boolean;
+    /** Raw CSS `inset` shorthand applied to the fullscreen panel and backdrop instead of the default
+     *  `var(--lyra-space-l)` on every side — e.g. `"0 0 0 240px"` to leave a 240px persistent sidebar
+     *  visible while fullscreen. */
+    fullscreenInset: string;
+    /** Tighter header/body padding for constrained spaces. */
+    compact: boolean;
+    private hasActionsSlot;
+    private releaseScrollLock?;
+    private overlayHandle?;
+    private explicitTrigger?;
+    private readonly bodyId;
+    protected willUpdate(changed: PropertyValues): void;
+    protected updated(changed: PropertyValues): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private activateFullscreenOverlay;
+    private deactivateFullscreenOverlay;
+    private onActionsSlotChange;
+    private toggleCollapsed;
+    private toggleFullscreen;
+    private dismissFullscreen;
+    private onBackdropClick;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-widget': LyraWidget;
+    }
+}
+//# sourceMappingURL=widget.class.d.ts.map

package/dist/components/widget/widget.class.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"widget.class.d.ts","sourceRoot":"","sources":["../../../src/components/widget/widget.class.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAE9E,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAY7D;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,WAAW,kBAAkB;IACjC,sBAAsB,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;IAC7C,wBAAwB,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;CAChD;AACD,qBAAa,UAAW,SAAQ,WAAW,CAAC,kBAAkB,CAAC;IAC7D,MAAM,CAAC,MAAM,iCAAgC;IAEjC,KAAK,SAAM;IACX,QAAQ,SAAM;IACkB,WAAW,UAAS;IACpB,SAAS,UAAS;IAClB,UAAU,UAAS;IACnB,UAAU,UAAS;IAC/D;;oCAEgC;IACa,eAAe,SAAM;IAClE,0DAA0D;IACd,OAAO,UAAS;IAEnD,OAAO,CAAC,cAAc,CAAS;IAExC,OAAO,CAAC,iBAAiB,CAAC,CAAa;IACvC,OAAO,CAAC,aAAa,CAAC,CAAgB;IACtC,OAAO,CAAC,eAAe,CAAC,CAAc;IACtC,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAyB;IAEhD,SAAS,CAAC,UAAU,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI,CAWlD;IAeD,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI,CAW/C;IAED,iBAAiB,IAAI,IAAI,CAgBxB;IAED,oBAAoB,IAAI,IAAI,CAK3B;IAED,OAAO,CAAC,yBAAyB;IAYjC,OAAO,CAAC,2BAA2B;IAOnC,OAAO,CAAC,mBAAmB,CAEzB;IAEF,OAAO,CAAC,eAAe,CAGrB;IAEF,OAAO,CAAC,gBAAgB,CAItB;IAEF,OAAO,CAAC,iBAAiB,CAIvB;IAEF,OAAO,CAAC,eAAe,CAErB;IAEF,MAAM,IAAI,cAAc,CAyDvB;CACF;AAGD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}

package/dist/components/widget/widget.class.js

@@ -0,0 +1,224 @@
+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, collectFocusableElements, deepActiveElement, } from '../../internal/overlay-manager.js';
+import { lockScroll } from '../../internal/scroll-lock.js';
+import { nextId } from '../../internal/a11y.js';
+import { chevronIcon, closeIcon, expandIcon } from '../../internal/icons.js';
+import { styles } from './widget.styles.js';
+export class LyraWidget extends LyraElement {
+    constructor() {
+        super(...arguments);
+        this.label = '';
+        this.sublabel = '';
+        this.collapsible = false;
+        this.collapsed = false;
+        this.expandable = false;
+        this.fullscreen = false;
+        /** Raw CSS `inset` shorthand applied to the fullscreen panel and backdrop instead of the default
+         *  `var(--lyra-space-l)` on every side — e.g. `"0 0 0 240px"` to leave a 240px persistent sidebar
+         *  visible while fullscreen. */
+        this.fullscreenInset = '';
+        /** Tighter header/body padding for constrained spaces. */
+        this.compact = false;
+        this.hasActionsSlot = false;
+        this.bodyId = nextId('widget-body');
+        this.onActionsSlotChange = (e) => {
+            this.hasActionsSlot = e.target.assignedElements({ flatten: true }).length > 0;
+        };
+        this.toggleCollapsed = () => {
+            this.collapsed = !this.collapsed;
+            this.emit('lyra-collapse-change', this.collapsed);
+        };
+        this.toggleFullscreen = (e) => {
+            if (!this.fullscreen)
+                this.explicitTrigger = e.currentTarget;
+            this.fullscreen = !this.fullscreen;
+            this.emit('lyra-fullscreen-change', this.fullscreen);
+        };
+        this.dismissFullscreen = () => {
+            if (!this.fullscreen)
+                return;
+            this.fullscreen = false;
+            this.emit('lyra-fullscreen-change', false);
+        };
+        this.onBackdropClick = () => {
+            this.overlayHandle?.dismissBackdrop();
+        };
+    }
+    static { this.styles = [LyraElement.styles, styles]; }
+    willUpdate(changed) {
+        if (!this.hasUpdated) {
+            this.hasActionsSlot = Array.from(this.children).some((el) => el.getAttribute('slot') === 'actions');
+        }
+        if (changed.has('fullscreen')) {
+            if (this.fullscreen) {
+                this.activateFullscreenOverlay();
+            }
+            else {
+                this.deactivateFullscreenOverlay();
+            }
+        }
+    }
+    // Runs after render (not willUpdate) so `[part="base"]`'s fullscreen-only
+    // tabindex has already landed in the DOM before the fallback .focus() call
+    // below can rely on it. WAI-ARIA APG's dialog pattern requires opening a
+    // modal to move focus inside it; without this it only happened to work
+    // because a mouse click natively focuses the button that triggered it --
+    // not true for a directly-set `fullscreen` property, and not guaranteed
+    // for every input method/browser even in the click case.
+    //
+    // The `collapsed` branch covers the same modal-focus-trap requirement for
+    // a second case: collapsing the body while fullscreen hides (display:none)
+    // whatever was focused inside it, which the browser resolves by silently
+    // moving focus outside the panel. The shared manager then reclaims it while
+    // preserving focus that is still on one of the visible header controls.
+    updated(changed) {
+        if (changed.has('fullscreen') && this.fullscreen) {
+            this.overlayHandle?.focusInitial();
+        }
+        else if (changed.has('collapsed') && this.fullscreen) {
+            const panel = this.shadowRoot?.querySelector('[part="base"]');
+            const active = deepActiveElement(this.ownerDocument);
+            if (panel && !collectFocusableElements(panel).includes(active)) {
+                if (active && typeof active.blur === 'function')
+                    active.blur();
+                this.overlayHandle?.focusInitial();
+            }
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        // A reconnect (e.g. a drag-and-drop reparent that keeps this same
+        // element instance) fires disconnectedCallback then connectedCallback
+        // synchronously with no update in between, so willUpdate never reruns
+        // to notice `fullscreen` is still true. Restore the shared overlay
+        // registration and scroll lock it dropped.
+        if (this.hasUpdated && this.fullscreen) {
+            if (this.overlayHandle?.isActive()) {
+                this.overlayHandle.resume();
+            }
+            else {
+                this.activateFullscreenOverlay();
+            }
+            if (!this.releaseScrollLock)
+                this.releaseScrollLock = lockScroll(this.ownerDocument);
+            queueMicrotask(() => this.overlayHandle?.focusInitial());
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.releaseScrollLock?.();
+        this.releaseScrollLock = undefined;
+        this.overlayHandle?.suspend();
+    }
+    activateFullscreenOverlay() {
+        this.releaseScrollLock ??= lockScroll(this.ownerDocument);
+        this.overlayHandle = activateOverlay({
+            host: this,
+            panel: () => this.shadowRoot?.querySelector('[part="base"]') ?? null,
+            onEscape: this.dismissFullscreen,
+            onBackdrop: this.dismissFullscreen,
+            restoreFocusTo: this.explicitTrigger,
+        });
+        this.explicitTrigger = undefined;
+    }
+    deactivateFullscreenOverlay() {
+        this.releaseScrollLock?.();
+        this.releaseScrollLock = undefined;
+        this.overlayHandle?.deactivate();
+        this.overlayHandle = undefined;
+    }
+    render() {
+        const hasLabel = this.label.length > 0;
+        const hasSublabel = this.sublabel.length > 0;
+        return html `
+      ${this.fullscreen
+            ? html `<div
+            part="backdrop"
+            style=${this.fullscreenInset ? `--lyra-widget-fullscreen-inset:${this.fullscreenInset}` : nothing}
+            @click=${this.onBackdropClick}
+          ></div>`
+            : nothing}
+      <div
+        part="base"
+        role=${this.fullscreen ? 'dialog' : nothing}
+        aria-modal=${this.fullscreen ? 'true' : nothing}
+        aria-label=${this.fullscreen ? (hasLabel ? this.label : 'Fullscreen panel') : nothing}
+        tabindex=${this.fullscreen ? '-1' : nothing}
+        style=${this.fullscreenInset ? `--lyra-widget-fullscreen-inset:${this.fullscreenInset}` : nothing}
+      >
+        <div part="header">
+          <div part="title">
+            ${hasLabel ? html `<span part="label">${this.label}</span>` : nothing}
+            ${hasSublabel ? html `<span part="sublabel">${this.sublabel}</span>` : nothing}
+          </div>
+          <div part="actions" ?hidden=${!this.hasActionsSlot}>
+            <slot name="actions" @slotchange=${this.onActionsSlotChange}></slot>
+          </div>
+          ${this.collapsible
+            ? html `<button
+                part="collapse-button"
+                type="button"
+                aria-expanded=${this.collapsed ? 'false' : 'true'}
+                aria-label=${this.collapsed ? 'Expand panel' : 'Collapse panel'}
+                aria-controls=${this.bodyId}
+                style="transform:rotate(${this.collapsed ? '0deg' : '90deg'})"
+                @click=${this.toggleCollapsed}
+              >
+                ${chevronIcon()}
+              </button>`
+            : nothing}
+          ${this.expandable
+            ? html `<button
+                part="fullscreen-button"
+                type="button"
+                aria-pressed=${this.fullscreen ? 'true' : 'false'}
+                aria-label=${this.fullscreen ? 'Exit fullscreen' : 'Expand to fullscreen'}
+                @click=${this.toggleFullscreen}
+              >
+                ${this.fullscreen ? closeIcon() : expandIcon()}
+              </button>`
+            : nothing}
+        </div>
+        <div part="body" id=${this.bodyId} ?hidden=${this.collapsed}>
+          <slot></slot>
+        </div>
+      </div>
+    `;
+    }
+}
+__decorate([
+    property()
+], LyraWidget.prototype, "label", void 0);
+__decorate([
+    property()
+], LyraWidget.prototype, "sublabel", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LyraWidget.prototype, "collapsible", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LyraWidget.prototype, "collapsed", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LyraWidget.prototype, "expandable", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LyraWidget.prototype, "fullscreen", void 0);
+__decorate([
+    property({ attribute: 'fullscreen-inset' })
+], LyraWidget.prototype, "fullscreenInset", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LyraWidget.prototype, "compact", void 0);
+__decorate([
+    state()
+], LyraWidget.prototype, "hasActionsSlot", void 0);
+//# sourceMappingURL=widget.class.js.map

package/dist/components/widget/widget.class.js.map

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

package/dist/components/widget/widget.d.ts

@@ -1,65 +1,2 @@
-import { type TemplateResult, type PropertyValues } from 'lit';
-import { LyraElement } from '../../internal/lyra-element.js';
-/**
- * `<lyra-widget>` — a titled panel shell with an optional collapse toggle and
- * an optional fullscreen-expand toggle. Fullscreen promotes the same host
- * element in place (a CSS state, not a clone/portal), so slotted content
- * (a chart, a running simulation, scroll position) survives the transition.
- *
- * @customElement lyra-widget
- * @slot - The panel body.
- * @slot actions - Header action controls, rendered before the collapse/expand buttons.
- * @event lyra-collapse-change - `detail: boolean` (the new `collapsed` state).
- * @event lyra-fullscreen-change - `detail: boolean` (the new `fullscreen` state).
- * @csspart base - The panel root (dialog role + backdrop when fullscreen).
- * @csspart header - The header row containing the title, actions, and toggle buttons.
- * @csspart title - The wrapper around the label/sublabel.
- * @csspart label - The panel title text.
- * @csspart sublabel - The panel subtitle text.
- * @csspart actions - The wrapper around the `actions` slot.
- * @csspart collapse-button - The collapse/expand toggle button.
- * @csspart fullscreen-button - The fullscreen toggle button.
- * @csspart body - The wrapper around the default slot (the panel body).
- * @csspart backdrop - The fullscreen scrim behind the panel.
- *
- * `fullscreen-inset` overrides the default `var(--lyra-space-l)` inset applied to `[part="base"]`
- * and `[part="backdrop"]` while fullscreen (e.g. `"0 0 0 240px"` to leave a persistent sidebar
- * visible). `compact` tightens header/body padding — same convention as `lyra-empty`'s `compact`.
- */
-export declare class LyraWidget extends LyraElement {
-    static styles: import("lit").CSSResultGroup[];
-    label: string;
-    sublabel: string;
-    collapsible: boolean;
-    collapsed: boolean;
-    expandable: boolean;
-    fullscreen: boolean;
-    /** Raw CSS `inset` shorthand applied to the fullscreen panel and backdrop instead of the default
-     *  `var(--lyra-space-l)` on every side — e.g. `"0 0 0 240px"` to leave a 240px persistent sidebar
-     *  visible while fullscreen. */
-    fullscreenInset: string;
-    /** Tighter header/body padding for constrained spaces. */
-    compact: boolean;
-    private hasActionsSlot;
-    private releaseScrollLock?;
-    private overlayHandle?;
-    private explicitTrigger?;
-    private readonly bodyId;
-    protected willUpdate(changed: PropertyValues): void;
-    protected updated(changed: PropertyValues): void;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    private activateFullscreenOverlay;
-    private deactivateFullscreenOverlay;
-    private onActionsSlotChange;
-    private toggleCollapsed;
-    private toggleFullscreen;
-    private dismissFullscreen;
-    private onBackdropClick;
-    render(): TemplateResult;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'lyra-widget': LyraWidget;
-    }
-}
+export * from './widget.class.js';
+//# sourceMappingURL=widget.d.ts.map

package/dist/components/widget/widget.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"widget.d.ts","sourceRoot":"","sources":["../../../src/components/widget/widget.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC"}

package/dist/components/widget/widget.js

@@ -1,251 +1,5 @@
-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, collectFocusableElements, deepActiveElement, } from '../../internal/overlay-manager.js';
+export * from './widget.class.js';
+import { LyraWidget } from './widget.class.js';
 import { defineElement } from '../../internal/prefix.js';
-import { lockScroll } from '../../internal/scroll-lock.js';
-import { nextId } from '../../internal/a11y.js';
-import { chevronIcon, closeIcon, expandIcon } from '../../internal/icons.js';
-import { styles } from './widget.styles.js';
-/**
- * `<lyra-widget>` — a titled panel shell with an optional collapse toggle and
- * an optional fullscreen-expand toggle. Fullscreen promotes the same host
- * element in place (a CSS state, not a clone/portal), so slotted content
- * (a chart, a running simulation, scroll position) survives the transition.
- *
- * @customElement lyra-widget
- * @slot - The panel body.
- * @slot actions - Header action controls, rendered before the collapse/expand buttons.
- * @event lyra-collapse-change - `detail: boolean` (the new `collapsed` state).
- * @event lyra-fullscreen-change - `detail: boolean` (the new `fullscreen` state).
- * @csspart base - The panel root (dialog role + backdrop when fullscreen).
- * @csspart header - The header row containing the title, actions, and toggle buttons.
- * @csspart title - The wrapper around the label/sublabel.
- * @csspart label - The panel title text.
- * @csspart sublabel - The panel subtitle text.
- * @csspart actions - The wrapper around the `actions` slot.
- * @csspart collapse-button - The collapse/expand toggle button.
- * @csspart fullscreen-button - The fullscreen toggle button.
- * @csspart body - The wrapper around the default slot (the panel body).
- * @csspart backdrop - The fullscreen scrim behind the panel.
- *
- * `fullscreen-inset` overrides the default `var(--lyra-space-l)` inset applied to `[part="base"]`
- * and `[part="backdrop"]` while fullscreen (e.g. `"0 0 0 240px"` to leave a persistent sidebar
- * visible). `compact` tightens header/body padding — same convention as `lyra-empty`'s `compact`.
- */
-export class LyraWidget extends LyraElement {
-    constructor() {
-        super(...arguments);
-        this.label = '';
-        this.sublabel = '';
-        this.collapsible = false;
-        this.collapsed = false;
-        this.expandable = false;
-        this.fullscreen = false;
-        /** Raw CSS `inset` shorthand applied to the fullscreen panel and backdrop instead of the default
-         *  `var(--lyra-space-l)` on every side — e.g. `"0 0 0 240px"` to leave a 240px persistent sidebar
-         *  visible while fullscreen. */
-        this.fullscreenInset = '';
-        /** Tighter header/body padding for constrained spaces. */
-        this.compact = false;
-        this.hasActionsSlot = false;
-        this.bodyId = nextId('widget-body');
-        this.onActionsSlotChange = (e) => {
-            this.hasActionsSlot = e.target.assignedElements({ flatten: true }).length > 0;
-        };
-        this.toggleCollapsed = () => {
-            this.collapsed = !this.collapsed;
-            this.emit('lyra-collapse-change', this.collapsed);
-        };
-        this.toggleFullscreen = (e) => {
-            if (!this.fullscreen)
-                this.explicitTrigger = e.currentTarget;
-            this.fullscreen = !this.fullscreen;
-            this.emit('lyra-fullscreen-change', this.fullscreen);
-        };
-        this.dismissFullscreen = () => {
-            if (!this.fullscreen)
-                return;
-            this.fullscreen = false;
-            this.emit('lyra-fullscreen-change', false);
-        };
-        this.onBackdropClick = () => {
-            this.overlayHandle?.dismissBackdrop();
-        };
-    }
-    static { this.styles = [LyraElement.styles, styles]; }
-    willUpdate(changed) {
-        if (!this.hasUpdated) {
-            this.hasActionsSlot = Array.from(this.children).some((el) => el.getAttribute('slot') === 'actions');
-        }
-        if (changed.has('fullscreen')) {
-            if (this.fullscreen) {
-                this.activateFullscreenOverlay();
-            }
-            else {
-                this.deactivateFullscreenOverlay();
-            }
-        }
-    }
-    // Runs after render (not willUpdate) so `[part="base"]`'s fullscreen-only
-    // tabindex has already landed in the DOM before the fallback .focus() call
-    // below can rely on it. WAI-ARIA APG's dialog pattern requires opening a
-    // modal to move focus inside it; without this it only happened to work
-    // because a mouse click natively focuses the button that triggered it --
-    // not true for a directly-set `fullscreen` property, and not guaranteed
-    // for every input method/browser even in the click case.
-    //
-    // The `collapsed` branch covers the same modal-focus-trap requirement for
-    // a second case: collapsing the body while fullscreen hides (display:none)
-    // whatever was focused inside it, which the browser resolves by silently
-    // moving focus outside the panel. The shared manager then reclaims it while
-    // preserving focus that is still on one of the visible header controls.
-    updated(changed) {
-        if (changed.has('fullscreen') && this.fullscreen) {
-            this.overlayHandle?.focusInitial();
-        }
-        else if (changed.has('collapsed') && this.fullscreen) {
-            const panel = this.shadowRoot?.querySelector('[part="base"]');
-            const active = deepActiveElement(this.ownerDocument);
-            if (panel && !collectFocusableElements(panel).includes(active)) {
-                if (active && typeof active.blur === 'function')
-                    active.blur();
-                this.overlayHandle?.focusInitial();
-            }
-        }
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        // A reconnect (e.g. a drag-and-drop reparent that keeps this same
-        // element instance) fires disconnectedCallback then connectedCallback
-        // synchronously with no update in between, so willUpdate never reruns
-        // to notice `fullscreen` is still true. Restore the shared overlay
-        // registration and scroll lock it dropped.
-        if (this.hasUpdated && this.fullscreen) {
-            if (this.overlayHandle?.isActive()) {
-                this.overlayHandle.resume();
-            }
-            else {
-                this.activateFullscreenOverlay();
-            }
-            if (!this.releaseScrollLock)
-                this.releaseScrollLock = lockScroll(this.ownerDocument);
-            queueMicrotask(() => this.overlayHandle?.focusInitial());
-        }
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this.releaseScrollLock?.();
-        this.releaseScrollLock = undefined;
-        this.overlayHandle?.suspend();
-    }
-    activateFullscreenOverlay() {
-        this.releaseScrollLock ??= lockScroll(this.ownerDocument);
-        this.overlayHandle = activateOverlay({
-            host: this,
-            panel: () => this.shadowRoot?.querySelector('[part="base"]') ?? null,
-            onEscape: this.dismissFullscreen,
-            onBackdrop: this.dismissFullscreen,
-            restoreFocusTo: this.explicitTrigger,
-        });
-        this.explicitTrigger = undefined;
-    }
-    deactivateFullscreenOverlay() {
-        this.releaseScrollLock?.();
-        this.releaseScrollLock = undefined;
-        this.overlayHandle?.deactivate();
-        this.overlayHandle = undefined;
-    }
-    render() {
-        const hasLabel = this.label.length > 0;
-        const hasSublabel = this.sublabel.length > 0;
-        return html `
-      ${this.fullscreen
-            ? html `<div
-            part="backdrop"
-            style=${this.fullscreenInset ? `--lyra-widget-fullscreen-inset:${this.fullscreenInset}` : nothing}
-            @click=${this.onBackdropClick}
-          ></div>`
-            : nothing}
-      <div
-        part="base"
-        role=${this.fullscreen ? 'dialog' : nothing}
-        aria-modal=${this.fullscreen ? 'true' : nothing}
-        aria-label=${this.fullscreen ? (hasLabel ? this.label : 'Fullscreen panel') : nothing}
-        tabindex=${this.fullscreen ? '-1' : nothing}
-        style=${this.fullscreenInset ? `--lyra-widget-fullscreen-inset:${this.fullscreenInset}` : nothing}
-      >
-        <div part="header">
-          <div part="title">
-            ${hasLabel ? html `<span part="label">${this.label}</span>` : nothing}
-            ${hasSublabel ? html `<span part="sublabel">${this.sublabel}</span>` : nothing}
-          </div>
-          <div part="actions" ?hidden=${!this.hasActionsSlot}>
-            <slot name="actions" @slotchange=${this.onActionsSlotChange}></slot>
-          </div>
-          ${this.collapsible
-            ? html `<button
-                part="collapse-button"
-                type="button"
-                aria-expanded=${this.collapsed ? 'false' : 'true'}
-                aria-label=${this.collapsed ? 'Expand panel' : 'Collapse panel'}
-                aria-controls=${this.bodyId}
-                style="transform:rotate(${this.collapsed ? '0deg' : '90deg'})"
-                @click=${this.toggleCollapsed}
-              >
-                ${chevronIcon()}
-              </button>`
-            : nothing}
-          ${this.expandable
-            ? html `<button
-                part="fullscreen-button"
-                type="button"
-                aria-pressed=${this.fullscreen ? 'true' : 'false'}
-                aria-label=${this.fullscreen ? 'Exit fullscreen' : 'Expand to fullscreen'}
-                @click=${this.toggleFullscreen}
-              >
-                ${this.fullscreen ? closeIcon() : expandIcon()}
-              </button>`
-            : nothing}
-        </div>
-        <div part="body" id=${this.bodyId} ?hidden=${this.collapsed}>
-          <slot></slot>
-        </div>
-      </div>
-    `;
-    }
-}
-__decorate([
-    property()
-], LyraWidget.prototype, "label", void 0);
-__decorate([
-    property()
-], LyraWidget.prototype, "sublabel", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], LyraWidget.prototype, "collapsible", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], LyraWidget.prototype, "collapsed", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], LyraWidget.prototype, "expandable", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], LyraWidget.prototype, "fullscreen", void 0);
-__decorate([
-    property({ attribute: 'fullscreen-inset' })
-], LyraWidget.prototype, "fullscreenInset", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], LyraWidget.prototype, "compact", void 0);
-__decorate([
-    state()
-], LyraWidget.prototype, "hasActionsSlot", void 0);
 defineElement('widget', LyraWidget);
+//# sourceMappingURL=widget.js.map

package/dist/components/widget/widget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"widget.js","sourceRoot":"","sources":["../../../src/components/widget/widget.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,aAAa,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC"}

package/dist/components/widget/widget.styles.d.ts

@@ -1 +1,2 @@
 export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=widget.styles.d.ts.map

package/dist/components/widget/widget.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"widget.styles.d.ts","sourceRoot":"","sources":["../../../src/components/widget/widget.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAmHlB,CAAC"}