@aceshooting/lyra-ui 2.1.0 → 2.2.0

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

@@ -0,0 +1,137 @@
+import { type TemplateResult, type PropertyValues } from 'lit';
+import { LyraElement } from '../../internal/lyra-element.js';
+/**
+ * Reason a dialog was dismissed, forwarded as the `lyra-dialog-close` event
+ * detail. `'escape'` and `'backdrop'` are emitted by the dialog's own built-in
+ * dismiss triggers; `'close-button'` by the built-in header close button
+ * (rendered when `closable` is set); `'unmount'` is emitted when the dialog is
+ * removed from the DOM while still open by something other than its own
+ * `close()` (e.g. a consumer's own cleanup code, or a parent re-render that
+ * drops it); any other string is whatever a caller passes to `close()` (e.g. a
+ * consumer's own footer close button, or confirm.ts's `'confirm'`/`'cancel'`).
+ */
+export type DialogCloseReason = 'escape' | 'backdrop' | 'close-button' | 'api' | 'unmount' | (string & Record<never, never>);
+/**
+ * `<lyra-dialog>` — a general-purpose modal/overlay. `role="dialog"`,
+ * focus-trapped while open, dismissible via Escape or a backdrop click, and
+ * scroll-locks the document for as long as it's open. Chrome stays minimal by
+ * default — no built-in title bar or close button; a consumer supplies a
+ * heading and any close affordance itself via the default/`footer` slots.
+ * `heading`/`closable` are an opt-in convenience for the common case where
+ * hand-building that chrome isn't worth it (see below).
+ *
+ * Accessible name / visible header, in priority order:
+ * 1. If a heading element (`h1`–`h6` or `[role="heading"]`) is a *direct
+ *    child* (not inside `slot="footer"`), its text content becomes
+ *    `aria-label` on the panel — unchanged, and takes priority over `heading`
+ *    below so an existing consumer that already slots its own heading keeps
+ *    rendering it exactly as before.
+ * 2. Otherwise, when `heading` is set, a visible header row (`part="header"`)
+ *    renders containing that text (`part="heading"`), which becomes the
+ *    `aria-labelledby` target.
+ * 3. Otherwise, when `label` is set, an invisible (`.sr-only`, exposed as the
+ *    `label` part) element carrying that text is rendered inside the panel
+ *    and `aria-labelledby` points at it instead.
+ * Only one of cases 2/3 ever renders at a time, so exactly one element ever
+ * claims `aria-labelledby`. `label` itself never renders visible chrome on
+ * its own — `::part(label)` can be restyled to make the sr-only text visible,
+ * or `heading` can be set instead, if a consumer wants visible chrome without
+ * slotting a real heading element.
+ *
+ * The slotted-heading case deliberately uses `aria-label` (a copied string)
+ * rather than `aria-labelledby` pointing at the heading's `id`: the heading is
+ * *light-DOM* content while `[part="panel"]` lives in this element's
+ * *shadow* tree, and an ID-reference attribute can't resolve across that
+ * boundary (verified against axe's `aria-dialog-name` rule) — unlike the
+ * `heading`/`label`-prop cases above, where the target element is rendered
+ * inside the same shadow root it labels, so `aria-labelledby` there is safe.
+ *
+ * `closable` renders a close (X) button in the header row (creating one, with
+ * no heading text, if `heading` is unset) that closes the dialog via the same
+ * `close()` path as Escape/backdrop-dismiss, with reason `'close-button'`.
+ *
+ * Stacking: opening one `<lyra-dialog>` while another is already open (e.g. a
+ * `confirm()` launched from within an already-open dialog) is supported --
+ * Escape and the Tab focus trap only ever act on the topmost open dialog, so
+ * dialogs beneath it stay open and untouched until the one on top closes.
+ *
+ * @customElement lyra-dialog
+ * @slot - The dialog body.
+ * @slot footer - Action buttons, rendered in a bottom row.
+ * @event lyra-dialog-close - `detail: DialogCloseReason`. Cancelable — a listener calling
+ *   `preventDefault()` stops the dialog from closing, for every dismissal path (Escape, backdrop,
+ *   the built-in close button, or a consumer's own `close()` call). Fired whenever the dialog is
+ *   dismissed via Escape, a backdrop click, the built-in close button (`closable`), a `close()`
+ *   call, or (with reason `'unmount'`, not cancelable in practice since the element is already
+ *   being removed) removal from the DOM by anything else while still open.
+ * @csspart backdrop - The full-viewport scrim behind the panel.
+ * @csspart panel - The dialog panel itself (`role="dialog"` while open). Its
+ *   max-inline-size is controlled by the `--lyra-dialog-max-width` custom
+ *   property (default `32rem`).
+ * @csspart header - The header row, rendered when `heading` is set (and no
+ *   heading is slotted) and/or `closable` is `true`.
+ * @csspart heading - The visible `heading`-text element inside `header`,
+ *   rendered only when `heading` is set and no heading is slotted.
+ * @csspart close-button - The built-in close button, rendered inside `header`
+ *   only when `closable` is `true`.
+ * @csspart label - The invisible `label`-text element used for
+ *   `aria-labelledby` when no heading is slotted and `heading` is unset.
+ * @csspart body - The wrapper around the default slot.
+ * @csspart footer - The wrapper around the `footer` slot.
+ */
+export declare class LyraDialog extends LyraElement {
+    static styles: import("lit").CSSResultGroup[];
+    /** Whether the dialog is open. Set this (or call `close()`) — there is no separate `show()`/`hide()` pair. */
+    open: boolean;
+    /** Accessible name used when no heading is slotted — see the class doc for the full fallback order. */
+    label: string;
+    /** Visible header text, rendered when no heading element is slotted into
+     *  the default slot — see the class doc for the full fallback order. Has
+     *  no effect (renders nothing) if a light-DOM heading is slotted; that case
+     *  keeps working completely unchanged whether or not `heading` is set. */
+    heading?: string;
+    /** Renders a built-in close (X) button in the header row (creating one,
+     *  with no heading text, if `heading` is unset), wired to the same
+     *  `close()` path Escape/backdrop-dismiss already use, with reason
+     *  `'close-button'`. */
+    closable: boolean;
+    /** Opts out of dismissing the dialog on a backdrop click — mirrors `wa-dialog`'s
+     *  `light-dismiss` (default `false`, opt-in) equivalent, inverted to an opt-out here since
+     *  backdrop-dismiss has always been this component's default behavior. `false` (the default)
+     *  reproduces today's exact backdrop-dismiss behavior. */
+    noLightDismiss: boolean;
+    private hasFooterSlot;
+    private headingText?;
+    private releaseScrollLock?;
+    private overlay?;
+    private readonly srLabelId;
+    private readonly headingId;
+    protected willUpdate(changed: PropertyValues): void;
+    protected updated(changed: PropertyValues): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private onDefaultSlotChange;
+    private onFooterSlotChange;
+    private detectHeading;
+    /**
+     * Close the dialog and return focus to whatever had it before the dialog
+     * opened. `reason` is forwarded as the `lyra-dialog-close` detail --
+     * built-in triggers pass `'escape'`/`'backdrop'`/`'close-button'`; a
+     * consumer's own close affordance (e.g. a footer Cancel button) should
+     * call this directly with its own reason string, so every dismissal path
+     * funnels through the same event instead of the consumer having to also
+     * toggle `open` itself.
+     */
+    close(reason?: DialogCloseReason): void;
+    private onBackdropClick;
+    private onCloseButtonClick;
+    private activateOverlay;
+    private deactivateOverlay;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-dialog': LyraDialog;
+    }
+}
+//# sourceMappingURL=dialog.class.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.class.d.ts","sourceRoot":"","sources":["../../../src/components/dialog/dialog.class.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAE9E,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAS7D;;;;;;;;;GASG;AACH,MAAM,MAAM,iBAAiB,GACzB,QAAQ,GACR,UAAU,GACV,cAAc,GACd,KAAK,GACL,SAAS,GACT,CAAC,MAAM,GAAG,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC;AAEpC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmEG;AACH,qBAAa,UAAW,SAAQ,WAAW;IACzC,MAAM,CAAC,MAAM,iCAAwC;IAErD,8GAA8G;IAClE,IAAI,UAAS;IAEzD,uGAAuG;IAC3F,KAAK,SAAM;IAEvB;;;8EAG0E;IAC9D,OAAO,CAAC,EAAE,MAAM,CAAC;IAE7B;;;4BAGwB;IAC4B,QAAQ,UAAS;IAErE;;;8DAG0D;IACE,cAAc,UAAS;IAE1E,OAAO,CAAC,aAAa,CAAS;IAC9B,OAAO,CAAC,WAAW,CAAC,CAAS;IAEtC,OAAO,CAAC,iBAAiB,CAAC,CAAa;IACvC,OAAO,CAAC,OAAO,CAAC,CAAgB;IAChC,OAAO,CAAC,QAAQ,CAAC,SAAS,CAA0B;IACpD,OAAO,CAAC,QAAQ,CAAC,SAAS,CAA4B;IAEtD,SAAS,CAAC,UAAU,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI,CAYlD;IAID,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI,CAI/C;IAED,iBAAiB,IAAI,IAAI,CAexB;IAED,oBAAoB,IAAI,IAAI,CAuB3B;IAED,OAAO,CAAC,mBAAmB,CAEzB;IAEF,OAAO,CAAC,kBAAkB,CAExB;IAUF,OAAO,CAAC,aAAa;IAOrB;;;;;;;;OAQG;IACH,KAAK,CAAC,MAAM,GAAE,iBAAyB,GAAG,IAAI,CAK7C;IAED,OAAO,CAAC,eAAe,CAGrB;IAEF,OAAO,CAAC,kBAAkB,CAExB;IAEF,OAAO,CAAC,eAAe;IAWvB,OAAO,CAAC,iBAAiB;IAOzB,MAAM,IAAI,cAAc,CAkDvB;CACF;AAGD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}

package/dist/components/dialog/dialog.class.js

@@ -0,0 +1,301 @@
+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 { lockScroll } from '../../internal/scroll-lock.js';
+import { activateOverlay } from '../../internal/overlay-manager.js';
+import { nextId, srOnly } from '../../internal/a11y.js';
+import { closeIcon } from '../../internal/icons.js';
+import { styles } from './dialog.styles.js';
+const HEADING_SELECTOR = 'h1, h2, h3, h4, h5, h6, [role="heading"]';
+/**
+ * `<lyra-dialog>` — a general-purpose modal/overlay. `role="dialog"`,
+ * focus-trapped while open, dismissible via Escape or a backdrop click, and
+ * scroll-locks the document for as long as it's open. Chrome stays minimal by
+ * default — no built-in title bar or close button; a consumer supplies a
+ * heading and any close affordance itself via the default/`footer` slots.
+ * `heading`/`closable` are an opt-in convenience for the common case where
+ * hand-building that chrome isn't worth it (see below).
+ *
+ * Accessible name / visible header, in priority order:
+ * 1. If a heading element (`h1`–`h6` or `[role="heading"]`) is a *direct
+ *    child* (not inside `slot="footer"`), its text content becomes
+ *    `aria-label` on the panel — unchanged, and takes priority over `heading`
+ *    below so an existing consumer that already slots its own heading keeps
+ *    rendering it exactly as before.
+ * 2. Otherwise, when `heading` is set, a visible header row (`part="header"`)
+ *    renders containing that text (`part="heading"`), which becomes the
+ *    `aria-labelledby` target.
+ * 3. Otherwise, when `label` is set, an invisible (`.sr-only`, exposed as the
+ *    `label` part) element carrying that text is rendered inside the panel
+ *    and `aria-labelledby` points at it instead.
+ * Only one of cases 2/3 ever renders at a time, so exactly one element ever
+ * claims `aria-labelledby`. `label` itself never renders visible chrome on
+ * its own — `::part(label)` can be restyled to make the sr-only text visible,
+ * or `heading` can be set instead, if a consumer wants visible chrome without
+ * slotting a real heading element.
+ *
+ * The slotted-heading case deliberately uses `aria-label` (a copied string)
+ * rather than `aria-labelledby` pointing at the heading's `id`: the heading is
+ * *light-DOM* content while `[part="panel"]` lives in this element's
+ * *shadow* tree, and an ID-reference attribute can't resolve across that
+ * boundary (verified against axe's `aria-dialog-name` rule) — unlike the
+ * `heading`/`label`-prop cases above, where the target element is rendered
+ * inside the same shadow root it labels, so `aria-labelledby` there is safe.
+ *
+ * `closable` renders a close (X) button in the header row (creating one, with
+ * no heading text, if `heading` is unset) that closes the dialog via the same
+ * `close()` path as Escape/backdrop-dismiss, with reason `'close-button'`.
+ *
+ * Stacking: opening one `<lyra-dialog>` while another is already open (e.g. a
+ * `confirm()` launched from within an already-open dialog) is supported --
+ * Escape and the Tab focus trap only ever act on the topmost open dialog, so
+ * dialogs beneath it stay open and untouched until the one on top closes.
+ *
+ * @customElement lyra-dialog
+ * @slot - The dialog body.
+ * @slot footer - Action buttons, rendered in a bottom row.
+ * @event lyra-dialog-close - `detail: DialogCloseReason`. Cancelable — a listener calling
+ *   `preventDefault()` stops the dialog from closing, for every dismissal path (Escape, backdrop,
+ *   the built-in close button, or a consumer's own `close()` call). Fired whenever the dialog is
+ *   dismissed via Escape, a backdrop click, the built-in close button (`closable`), a `close()`
+ *   call, or (with reason `'unmount'`, not cancelable in practice since the element is already
+ *   being removed) removal from the DOM by anything else while still open.
+ * @csspart backdrop - The full-viewport scrim behind the panel.
+ * @csspart panel - The dialog panel itself (`role="dialog"` while open). Its
+ *   max-inline-size is controlled by the `--lyra-dialog-max-width` custom
+ *   property (default `32rem`).
+ * @csspart header - The header row, rendered when `heading` is set (and no
+ *   heading is slotted) and/or `closable` is `true`.
+ * @csspart heading - The visible `heading`-text element inside `header`,
+ *   rendered only when `heading` is set and no heading is slotted.
+ * @csspart close-button - The built-in close button, rendered inside `header`
+ *   only when `closable` is `true`.
+ * @csspart label - The invisible `label`-text element used for
+ *   `aria-labelledby` when no heading is slotted and `heading` is unset.
+ * @csspart body - The wrapper around the default slot.
+ * @csspart footer - The wrapper around the `footer` slot.
+ */
+export class LyraDialog extends LyraElement {
+    constructor() {
+        super(...arguments);
+        /** Whether the dialog is open. Set this (or call `close()`) — there is no separate `show()`/`hide()` pair. */
+        this.open = false;
+        /** Accessible name used when no heading is slotted — see the class doc for the full fallback order. */
+        this.label = '';
+        /** Renders a built-in close (X) button in the header row (creating one,
+         *  with no heading text, if `heading` is unset), wired to the same
+         *  `close()` path Escape/backdrop-dismiss already use, with reason
+         *  `'close-button'`. */
+        this.closable = false;
+        /** Opts out of dismissing the dialog on a backdrop click — mirrors `wa-dialog`'s
+         *  `light-dismiss` (default `false`, opt-in) equivalent, inverted to an opt-out here since
+         *  backdrop-dismiss has always been this component's default behavior. `false` (the default)
+         *  reproduces today's exact backdrop-dismiss behavior. */
+        this.noLightDismiss = false;
+        this.hasFooterSlot = false;
+        this.srLabelId = nextId('dialog-label');
+        this.headingId = nextId('dialog-heading');
+        this.onDefaultSlotChange = () => {
+            this.detectHeading();
+        };
+        this.onFooterSlotChange = (e) => {
+            this.hasFooterSlot = e.target.assignedElements({ flatten: true }).length > 0;
+        };
+        this.onBackdropClick = () => {
+            if (this.noLightDismiss)
+                return;
+            this.overlay?.dismissBackdrop();
+        };
+        this.onCloseButtonClick = () => {
+            this.close('close-button');
+        };
+    }
+    static { this.styles = [LyraElement.styles, srOnly, styles]; }
+    willUpdate(changed) {
+        if (!this.hasUpdated) {
+            this.hasFooterSlot = Array.from(this.children).some((el) => el.getAttribute('slot') === 'footer');
+            this.detectHeading();
+        }
+        if (changed.has('open')) {
+            if (this.open) {
+                this.activateOverlay();
+            }
+            else {
+                this.deactivateOverlay();
+            }
+        }
+    }
+    // Runs after render so the manager can resolve the panel and its composed
+    // focus targets, including controls projected through either slot.
+    updated(changed) {
+        if (changed.has('open') && this.open) {
+            this.overlay?.focusInitial();
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        // 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 `open` is still true -- restore the scroll lock/trap it dropped.
+        if (this.hasUpdated && this.open) {
+            if (this.overlay?.isActive()) {
+                this.overlay.resume();
+                this.releaseScrollLock ??= lockScroll(this.ownerDocument);
+            }
+            else {
+                this.activateOverlay();
+            }
+            queueMicrotask(() => this.overlay?.focusInitial());
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.releaseScrollLock?.();
+        this.releaseScrollLock = undefined;
+        this.overlay?.suspend();
+        if (this.open) {
+            // A reparent (drag-and-drop moving this same element instance to a new
+            // parent) fires disconnectedCallback immediately followed by a
+            // synchronous connectedCallback, with no turn of the event loop in
+            // between -- deferring this check a microtask lets that case
+            // short-circuit here once isConnected is true again, so only a genuine
+            // removal (the element still disconnected once microtasks flush) ever
+            // reaches the assignment below. Without this, removing an open dialog
+            // any way other than its own close() (a consumer's own DOM cleanup, a
+            // parent re-render that drops it, etc.) never fires
+            // `lyra-dialog-close`, so e.g. confirm()'s returned promise hangs forever.
+            queueMicrotask(() => {
+                if (!this.isConnected && this.open) {
+                    this.open = false;
+                    this.emit('lyra-dialog-close', 'unmount');
+                }
+            });
+        }
+    }
+    // Only direct children are scanned -- a heading nested several layers deep
+    // (or inside a slotted custom element's own shadow root) is left to the
+    // consumer to label explicitly via `label` instead. Same depth limit
+    // lyra-widget applies to its own actions-slot presence check. Recomputed
+    // only on slot assignment changes, not on every render -- a consumer that
+    // mutates an already-slotted heading's textContent in place (rather than
+    // replacing the node) won't retroactively update aria-label; set `label`
+    // instead for a title that needs to change live.
+    detectHeading() {
+        const heading = Array.from(this.children).find((el) => el.getAttribute('slot') !== 'footer' && el.matches(HEADING_SELECTOR));
+        this.headingText = heading?.textContent?.trim() || undefined;
+    }
+    /**
+     * Close the dialog and return focus to whatever had it before the dialog
+     * opened. `reason` is forwarded as the `lyra-dialog-close` detail --
+     * built-in triggers pass `'escape'`/`'backdrop'`/`'close-button'`; a
+     * consumer's own close affordance (e.g. a footer Cancel button) should
+     * call this directly with its own reason string, so every dismissal path
+     * funnels through the same event instead of the consumer having to also
+     * toggle `open` itself.
+     */
+    close(reason = 'api') {
+        if (!this.open)
+            return;
+        const event = this.emit('lyra-dialog-close', reason, { cancelable: true });
+        if (event.defaultPrevented)
+            return;
+        this.open = false;
+    }
+    activateOverlay() {
+        if (this.overlay?.isActive())
+            return;
+        this.releaseScrollLock ??= lockScroll(this.ownerDocument);
+        this.overlay = activateOverlay({
+            host: this,
+            panel: () => this.shadowRoot?.querySelector('[part="panel"]') ?? null,
+            onEscape: () => this.close('escape'),
+            onBackdrop: () => this.close('backdrop'),
+        });
+    }
+    deactivateOverlay() {
+        this.releaseScrollLock?.();
+        this.releaseScrollLock = undefined;
+        this.overlay?.deactivate();
+        this.overlay = undefined;
+    }
+    render() {
+        // Priority order (see class doc): a slotted heading always wins; only
+        // when there isn't one does `heading` get a turn, then `label`'s
+        // sr-only fallback -- never more than one of the two below claims
+        // aria-labelledby for the same panel.
+        const useHeadingProp = !this.headingText && !!this.heading;
+        const useSrLabel = !this.headingText && !useHeadingProp && this.label.length > 0;
+        const showHeader = useHeadingProp || this.closable;
+        return html `
+      <div part="backdrop" @click=${this.onBackdropClick}></div>
+      <div
+        part="panel"
+        role=${this.open ? 'dialog' : nothing}
+        aria-modal=${this.open ? 'true' : nothing}
+        aria-label=${this.headingText ?? nothing}
+        aria-labelledby=${useHeadingProp ? this.headingId : useSrLabel ? this.srLabelId : nothing}
+        tabindex="-1"
+      >
+        ${useSrLabel
+            ? html `<span id=${this.srLabelId} part="label" class="sr-only">${this.label}</span>`
+            : nothing}
+        ${showHeader
+            ? html `
+              <div part="header">
+                ${useHeadingProp
+                ? html `<span id=${this.headingId} part="heading">${this.heading}</span>`
+                : nothing}
+                ${this.closable
+                ? html `
+                      <button
+                        part="close-button"
+                        type="button"
+                        aria-label=${this.localize('close')}
+                        @click=${this.onCloseButtonClick}
+                      >
+                        ${closeIcon()}
+                      </button>
+                    `
+                : nothing}
+              </div>
+            `
+            : nothing}
+        <div part="body">
+          <slot @slotchange=${this.onDefaultSlotChange}></slot>
+        </div>
+        <div part="footer" ?hidden=${!this.hasFooterSlot}>
+          <slot name="footer" @slotchange=${this.onFooterSlotChange}></slot>
+        </div>
+      </div>
+    `;
+    }
+}
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LyraDialog.prototype, "open", void 0);
+__decorate([
+    property()
+], LyraDialog.prototype, "label", void 0);
+__decorate([
+    property()
+], LyraDialog.prototype, "heading", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'closable' })
+], LyraDialog.prototype, "closable", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'no-light-dismiss' })
+], LyraDialog.prototype, "noLightDismiss", void 0);
+__decorate([
+    state()
+], LyraDialog.prototype, "hasFooterSlot", void 0);
+__decorate([
+    state()
+], LyraDialog.prototype, "headingText", void 0);
+//# sourceMappingURL=dialog.class.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.class.js","sourceRoot":"","sources":["../../../src/components/dialog/dialog.class.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAA4C,MAAM,KAAK,CAAC;AAC9E,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAC7D,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAC3D,OAAO,EAAE,eAAe,EAAsB,MAAM,mCAAmC,CAAC;AACxF,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACpD,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAE5C,MAAM,gBAAgB,GAAG,0CAA0C,CAAC;AAoBpE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmEG;AACH,MAAM,OAAO,UAAW,SAAQ,WAAW;IAA3C;;QAGE,8GAA8G;QAClE,SAAI,GAAG,KAAK,CAAC;QAEzD,uGAAuG;QAC3F,UAAK,GAAG,EAAE,CAAC;QAQvB;;;gCAGwB;QAC4B,aAAQ,GAAG,KAAK,CAAC;QAErE;;;kEAG0D;QACE,mBAAc,GAAG,KAAK,CAAC;QAElE,kBAAa,GAAG,KAAK,CAAC;QAKtB,cAAS,GAAG,MAAM,CAAC,cAAc,CAAC,CAAC;QACnC,cAAS,GAAG,MAAM,CAAC,gBAAgB,CAAC,CAAC;QAkE9C,wBAAmB,GAAG,GAAS,EAAE;YACvC,IAAI,CAAC,aAAa,EAAE,CAAC;QACvB,CAAC,CAAC;QAEM,uBAAkB,GAAG,CAAC,CAAQ,EAAQ,EAAE;YAC9C,IAAI,CAAC,aAAa,GAAI,CAAC,CAAC,MAA0B,CAAC,gBAAgB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC;QACpG,CAAC,CAAC;QAiCM,oBAAe,GAAG,GAAS,EAAE;YACnC,IAAI,IAAI,CAAC,cAAc;gBAAE,OAAO;YAChC,IAAI,CAAC,OAAO,EAAE,eAAe,EAAE,CAAC;QAClC,CAAC,CAAC;QAEM,uBAAkB,GAAG,GAAS,EAAE;YACtC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC;QAC7B,CAAC,CAAC;IAuEJ,CAAC;aAvNQ,WAAM,GAAG,CAAC,WAAW,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,AAAvC,CAAwC;IAkC3C,UAAU,CAAC,OAAuB;QAC1C,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC;YACrB,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,QAAQ,CAAC,CAAC;YAClG,IAAI,CAAC,aAAa,EAAE,CAAC;QACvB,CAAC;QACD,IAAI,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC;YACxB,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;gBACd,IAAI,CAAC,eAAe,EAAE,CAAC;YACzB,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,iBAAiB,EAAE,CAAC;YAC3B,CAAC;QACH,CAAC;IACH,CAAC;IAED,0EAA0E;IAC1E,mEAAmE;IACzD,OAAO,CAAC,OAAuB;QACvC,IAAI,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACrC,IAAI,CAAC,OAAO,EAAE,YAAY,EAAE,CAAC;QAC/B,CAAC;IACH,CAAC;IAED,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,uEAAuE;QACvE,8DAA8D;QAC9D,yEAAyE;QACzE,0EAA0E;QAC1E,IAAI,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACjC,IAAI,IAAI,CAAC,OAAO,EAAE,QAAQ,EAAE,EAAE,CAAC;gBAC7B,IAAI,CAAC,OAAO,CAAC,MAAM,EAAE,CAAC;gBACtB,IAAI,CAAC,iBAAiB,KAAK,UAAU,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;YAC5D,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,eAAe,EAAE,CAAC;YACzB,CAAC;YACD,cAAc,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,EAAE,YAAY,EAAE,CAAC,CAAC;QACrD,CAAC;IACH,CAAC;IAED,oBAAoB;QAClB,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,IAAI,CAAC,iBAAiB,EAAE,EAAE,CAAC;QAC3B,IAAI,CAAC,iBAAiB,GAAG,SAAS,CAAC;QACnC,IAAI,CAAC,OAAO,EAAE,OAAO,EAAE,CAAC;QACxB,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,uEAAuE;YACvE,+DAA+D;YAC/D,mEAAmE;YACnE,6DAA6D;YAC7D,uEAAuE;YACvE,sEAAsE;YACtE,sEAAsE;YACtE,sEAAsE;YACtE,oDAAoD;YACpD,2EAA2E;YAC3E,cAAc,CAAC,GAAG,EAAE;gBAClB,IAAI,CAAC,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;oBACnC,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;oBAClB,IAAI,CAAC,IAAI,CAAoB,mBAAmB,EAAE,SAAS,CAAC,CAAC;gBAC/D,CAAC;YACH,CAAC,CAAC,CAAC;QACL,CAAC;IACH,CAAC;IAUD,2EAA2E;IAC3E,wEAAwE;IACxE,qEAAqE;IACrE,yEAAyE;IACzE,0EAA0E;IAC1E,yEAAyE;IACzE,yEAAyE;IACzE,iDAAiD;IACzC,aAAa;QACnB,MAAM,OAAO,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,IAAI,CAC5C,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,QAAQ,IAAI,EAAE,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAClD,CAAC;QAC7B,IAAI,CAAC,WAAW,GAAG,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,IAAI,SAAS,CAAC;IAC/D,CAAC;IAED;;;;;;;;OAQG;IACH,KAAK,CAAC,MAAM,GAAsB,KAAK;QACrC,IAAI,CAAC,IAAI,CAAC,IAAI;YAAE,OAAO;QACvB,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,CAAoB,mBAAmB,EAAE,MAAM,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC;QAC9F,IAAI,KAAK,CAAC,gBAAgB;YAAE,OAAO;QACnC,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;IACpB,CAAC;IAWO,eAAe;QACrB,IAAI,IAAI,CAAC,OAAO,EAAE,QAAQ,EAAE;YAAE,OAAO;QACrC,IAAI,CAAC,iBAAiB,KAAK,UAAU,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;QAC1D,IAAI,CAAC,OAAO,GAAG,eAAe,CAAC;YAC7B,IAAI,EAAE,IAAI;YACV,KAAK,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE,aAAa,CAAc,gBAAgB,CAAC,IAAI,IAAI;YAClF,QAAQ,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC;YACpC,UAAU,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC;SACzC,CAAC,CAAC;IACL,CAAC;IAEO,iBAAiB;QACvB,IAAI,CAAC,iBAAiB,EAAE,EAAE,CAAC;QAC3B,IAAI,CAAC,iBAAiB,GAAG,SAAS,CAAC;QACnC,IAAI,CAAC,OAAO,EAAE,UAAU,EAAE,CAAC;QAC3B,IAAI,CAAC,OAAO,GAAG,SAAS,CAAC;IAC3B,CAAC;IAED,MAAM;QACJ,sEAAsE;QACtE,iEAAiE;QACjE,kEAAkE;QAClE,sCAAsC;QACtC,MAAM,cAAc,GAAG,CAAC,IAAI,CAAC,WAAW,IAAI,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC;QAC3D,MAAM,UAAU,GAAG,CAAC,IAAI,CAAC,WAAW,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;QACjF,MAAM,UAAU,GAAG,cAAc,IAAI,IAAI,CAAC,QAAQ,CAAC;QACnD,OAAO,IAAI,CAAA;oCACqB,IAAI,CAAC,eAAe;;;eAGzC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO;qBACxB,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;qBAC5B,IAAI,CAAC,WAAW,IAAI,OAAO;0BACtB,cAAc,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO;;;UAGvF,UAAU;YACV,CAAC,CAAC,IAAI,CAAA,YAAY,IAAI,CAAC,SAAS,iCAAiC,IAAI,CAAC,KAAK,SAAS;YACpF,CAAC,CAAC,OAAO;UACT,UAAU;YACV,CAAC,CAAC,IAAI,CAAA;;kBAEE,cAAc;gBACd,CAAC,CAAC,IAAI,CAAA,YAAY,IAAI,CAAC,SAAS,mBAAmB,IAAI,CAAC,OAAO,SAAS;gBACxE,CAAC,CAAC,OAAO;kBACT,IAAI,CAAC,QAAQ;gBACb,CAAC,CAAC,IAAI,CAAA;;;;qCAIa,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC;iCAC1B,IAAI,CAAC,kBAAkB;;0BAE9B,SAAS,EAAE;;qBAEhB;gBACH,CAAC,CAAC,OAAO;;aAEd;YACH,CAAC,CAAC,OAAO;;8BAEW,IAAI,CAAC,mBAAmB;;qCAEjB,CAAC,IAAI,CAAC,aAAa;4CACZ,IAAI,CAAC,kBAAkB;;;KAG9D,CAAC;IACJ,CAAC;CACF;AApN6C;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCAAc;AAG7C;IAAX,QAAQ,EAAE;yCAAY;AAMX;IAAX,QAAQ,EAAE;2CAAkB;AAMuB;IAAnD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,CAAC;4CAAkB;AAMT;IAA3D,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,kBAAkB,EAAE,CAAC;kDAAwB;AAElE;IAAhB,KAAK,EAAE;iDAA+B;AACtB;IAAhB,KAAK,EAAE;+CAA8B"}

package/dist/components/dialog/dialog.d.ts

@@ -1,129 +1,2 @@
-import { type TemplateResult, type PropertyValues } from 'lit';
-import { LyraElement } from '../../internal/lyra-element.js';
-/**
- * Reason a dialog was dismissed, forwarded as the `lyra-dialog-close` event
- * detail. `'escape'` and `'backdrop'` are emitted by the dialog's own built-in
- * dismiss triggers; `'close-button'` by the built-in header close button
- * (rendered when `closable` is set); `'unmount'` is emitted when the dialog is
- * removed from the DOM while still open by something other than its own
- * `close()` (e.g. a consumer's own cleanup code, or a parent re-render that
- * drops it); any other string is whatever a caller passes to `close()` (e.g. a
- * consumer's own footer close button, or confirm.ts's `'confirm'`/`'cancel'`).
- */
-export type DialogCloseReason = 'escape' | 'backdrop' | 'close-button' | 'api' | 'unmount' | string;
-/**
- * `<lyra-dialog>` — a general-purpose modal/overlay. `role="dialog"`,
- * focus-trapped while open, dismissible via Escape or a backdrop click, and
- * scroll-locks the document for as long as it's open. Chrome stays minimal by
- * default — no built-in title bar or close button; a consumer supplies a
- * heading and any close affordance itself via the default/`footer` slots.
- * `heading`/`closable` are an opt-in convenience for the common case where
- * hand-building that chrome isn't worth it (see below).
- *
- * Accessible name / visible header, in priority order:
- * 1. If a heading element (`h1`–`h6` or `[role="heading"]`) is a *direct
- *    child* (not inside `slot="footer"`), its text content becomes
- *    `aria-label` on the panel — unchanged, and takes priority over `heading`
- *    below so an existing consumer that already slots its own heading keeps
- *    rendering it exactly as before.
- * 2. Otherwise, when `heading` is set, a visible header row (`part="header"`)
- *    renders containing that text (`part="heading"`), which becomes the
- *    `aria-labelledby` target.
- * 3. Otherwise, when `label` is set, an invisible (`.sr-only`, exposed as the
- *    `label` part) element carrying that text is rendered inside the panel
- *    and `aria-labelledby` points at it instead.
- * Only one of cases 2/3 ever renders at a time, so exactly one element ever
- * claims `aria-labelledby`. `label` itself never renders visible chrome on
- * its own — `::part(label)` can be restyled to make the sr-only text visible,
- * or `heading` can be set instead, if a consumer wants visible chrome without
- * slotting a real heading element.
- *
- * The slotted-heading case deliberately uses `aria-label` (a copied string)
- * rather than `aria-labelledby` pointing at the heading's `id`: the heading is
- * *light-DOM* content while `[part="panel"]` lives in this element's
- * *shadow* tree, and an ID-reference attribute can't resolve across that
- * boundary (verified against axe's `aria-dialog-name` rule) — unlike the
- * `heading`/`label`-prop cases above, where the target element is rendered
- * inside the same shadow root it labels, so `aria-labelledby` there is safe.
- *
- * `closable` renders a close (X) button in the header row (creating one, with
- * no heading text, if `heading` is unset) that closes the dialog via the same
- * `close()` path as Escape/backdrop-dismiss, with reason `'close-button'`.
- *
- * Stacking: opening one `<lyra-dialog>` while another is already open (e.g. a
- * `confirm()` launched from within an already-open dialog) is supported --
- * Escape and the Tab focus trap only ever act on the topmost open dialog, so
- * dialogs beneath it stay open and untouched until the one on top closes.
- *
- * @customElement lyra-dialog
- * @slot - The dialog body.
- * @slot footer - Action buttons, rendered in a bottom row.
- * @event lyra-dialog-close - `detail: DialogCloseReason`. Fired whenever the
- *   dialog is dismissed via Escape, a backdrop click, the built-in close
- *   button (`closable`), a `close()` call, or (with reason `'unmount'`)
- *   removal from the DOM by anything else while still open.
- * @csspart backdrop - The full-viewport scrim behind the panel.
- * @csspart panel - The dialog panel itself (`role="dialog"` while open). Its
- *   max-inline-size is controlled by the `--lyra-dialog-max-width` custom
- *   property (default `32rem`).
- * @csspart header - The header row, rendered when `heading` is set (and no
- *   heading is slotted) and/or `closable` is `true`.
- * @csspart heading - The visible `heading`-text element inside `header`,
- *   rendered only when `heading` is set and no heading is slotted.
- * @csspart close-button - The built-in close button, rendered inside `header`
- *   only when `closable` is `true`.
- * @csspart label - The invisible `label`-text element used for
- *   `aria-labelledby` when no heading is slotted and `heading` is unset.
- * @csspart body - The wrapper around the default slot.
- * @csspart footer - The wrapper around the `footer` slot.
- */
-export declare class LyraDialog extends LyraElement {
-    static styles: import("lit").CSSResultGroup[];
-    /** Whether the dialog is open. Set this (or call `close()`) — there is no separate `show()`/`hide()` pair. */
-    open: boolean;
-    /** Accessible name used when no heading is slotted — see the class doc for the full fallback order. */
-    label: string;
-    /** Visible header text, rendered when no heading element is slotted into
-     *  the default slot — see the class doc for the full fallback order. Has
-     *  no effect (renders nothing) if a light-DOM heading is slotted; that case
-     *  keeps working completely unchanged whether or not `heading` is set. */
-    heading?: string;
-    /** Renders a built-in close (X) button in the header row (creating one,
-     *  with no heading text, if `heading` is unset), wired to the same
-     *  `close()` path Escape/backdrop-dismiss already use, with reason
-     *  `'close-button'`. */
-    closable: boolean;
-    private hasFooterSlot;
-    private headingText?;
-    private releaseScrollLock?;
-    private overlay?;
-    private readonly srLabelId;
-    private readonly headingId;
-    protected willUpdate(changed: PropertyValues): void;
-    protected updated(changed: PropertyValues): void;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    private onDefaultSlotChange;
-    private onFooterSlotChange;
-    private detectHeading;
-    /**
-     * Close the dialog and return focus to whatever had it before the dialog
-     * opened. `reason` is forwarded as the `lyra-dialog-close` detail --
-     * built-in triggers pass `'escape'`/`'backdrop'`/`'close-button'`; a
-     * consumer's own close affordance (e.g. a footer Cancel button) should
-     * call this directly with its own reason string, so every dismissal path
-     * funnels through the same event instead of the consumer having to also
-     * toggle `open` itself.
-     */
-    close(reason?: DialogCloseReason): void;
-    private onBackdropClick;
-    private onCloseButtonClick;
-    private activateOverlay;
-    private deactivateOverlay;
-    render(): TemplateResult;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'lyra-dialog': LyraDialog;
-    }
-}
+export * from './dialog.class.js';
+//# sourceMappingURL=dialog.d.ts.map

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

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