@aceshooting/lyra-ui 4.2.0 → 5.1.0

package/dist/components/overlays/chip/chip.styles.js

@@ -0,0 +1,195 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: inline-flex;
+    max-inline-size: 100%;
+    vertical-align: middle;
+    /* One custom-property trio swapped by the :host([tone]) rules below,
+       rather than repeating background/color/border per part per tone —
+       mirrors lr-tool-call-chip's/lr-attachment-chip's identical
+       -accent/-bg/-border trio so a chip's tone vocabulary reads the same
+       everywhere in the library. 'neutral' has no dedicated token pair (see
+       the class doc), so it falls back to plain surface/border/text instead
+       of inventing a sixth tint. */
+    --lr-chip-accent: var(--lr-color-text);
+    --lr-chip-bg: var(--lr-color-surface);
+    --lr-chip-border: var(--lr-color-border);
+    /* The medium defaults exactly reproduce the original fixed chip treatment. */
+    --lr-chip-font-size: var(--lr-font-size-sm);
+    --lr-chip-padding-block: var(--lr-size-0-25rem);
+    --lr-chip-padding-inline: var(--lr-space-s);
+    --lr-chip-gap: var(--lr-space-xs);
+    --lr-chip-icon-size: var(--lr-font-size-sm);
+  }
+
+  :host([size='2xs']) {
+    --lr-chip-font-size: var(--lr-font-size-2xs);
+    --lr-chip-padding-block: var(--lr-size-0-0625rem);
+    --lr-chip-padding-inline: var(--lr-space-2xs);
+    --lr-chip-gap: var(--lr-space-2xs);
+    --lr-chip-icon-size: var(--lr-font-size-2xs);
+  }
+  :host([size='xs']) {
+    --lr-chip-font-size: var(--lr-font-size-xs);
+    --lr-chip-padding-block: var(--lr-size-0-125rem);
+    --lr-chip-padding-inline: var(--lr-space-xs);
+    --lr-chip-gap: var(--lr-space-2xs);
+    --lr-chip-icon-size: var(--lr-font-size-xs);
+  }
+  :host([size='s']) {
+    --lr-chip-font-size: var(--lr-font-size-xs);
+    --lr-chip-padding-block: var(--lr-size-0-125rem);
+    --lr-chip-padding-inline: var(--lr-size-0-375rem);
+    --lr-chip-gap: var(--lr-space-2xs);
+    --lr-chip-icon-size: var(--lr-font-size-xs);
+  }
+  :host([size='l']) {
+    --lr-chip-font-size: var(--lr-font-size-m);
+    --lr-chip-padding-block: var(--lr-size-0-375rem);
+    --lr-chip-padding-inline: var(--lr-space-m);
+    --lr-chip-gap: var(--lr-size-0-375rem);
+    --lr-chip-icon-size: var(--lr-font-size-m);
+  }
+  :host([size='xl']) {
+    --lr-chip-font-size: var(--lr-font-size-lg);
+    --lr-chip-padding-block: var(--lr-space-s);
+    --lr-chip-padding-inline: var(--lr-space-l);
+    --lr-chip-gap: var(--lr-space-s);
+    --lr-chip-icon-size: var(--lr-font-size-lg);
+  }
+
+  :host([tone='brand']) {
+    --lr-chip-accent: var(--lr-color-brand);
+    --lr-chip-bg: var(--lr-color-brand-quiet);
+    --lr-chip-border: transparent;
+  }
+  :host([tone='success']) {
+    --lr-chip-accent: var(--lr-color-success);
+    --lr-chip-bg: var(--lr-color-success-quiet);
+    --lr-chip-border: transparent;
+  }
+  :host([tone='warning']) {
+    --lr-chip-accent: var(--lr-color-warning);
+    --lr-chip-bg: var(--lr-color-warning-quiet);
+    --lr-chip-border: transparent;
+  }
+  :host([tone='danger']) {
+    --lr-chip-accent: var(--lr-color-danger);
+    --lr-chip-bg: var(--lr-color-danger-quiet);
+    --lr-chip-border: transparent;
+  }
+
+  [part='base'] {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--lr-chip-gap);
+    max-inline-size: 100%;
+    box-sizing: border-box;
+    padding: var(--lr-chip-padding-block) var(--lr-chip-padding-inline);
+    border: var(--lr-border-width-thin) solid var(--lr-chip-border);
+    border-radius: var(--lr-radius-pill);
+    background: var(--lr-chip-bg);
+    color: var(--lr-chip-accent);
+    font: inherit;
+    font-size: var(--lr-chip-font-size);
+    font-weight: var(--lr-font-weight-medium);
+    line-height: var(--lr-line-height-snug);
+  }
+
+  [part='base'][role='button'] {
+    cursor: pointer;
+    min-block-size: var(--lr-size-1-5rem);
+    -webkit-tap-highlight-color: transparent;
+    transition: background-color var(--lr-transition-fast);
+  }
+  [part='base'][role='button']:hover {
+    background: color-mix(in srgb, var(--lr-chip-accent) 8%, var(--lr-chip-bg));
+  }
+  [part='base'][role='button']:focus-visible {
+    outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);
+    outline-offset: var(--lr-focus-ring-offset);
+  }
+  [part='base'][aria-pressed='true'] {
+    /* Falls back to --lr-chip-bg (today's exact value) so every existing consumer renders
+       byte-identical when unset. A consumer wanting a distinct "active" tint independent of the
+       resting background sets --lr-chip-pressed-bg directly. */
+    background: var(--lr-chip-pressed-bg, var(--lr-chip-bg));
+    /* Falls back to --lr-chip-accent (today's exact value) so every
+       existing consumer, including all 4 \`tone\` variants, renders
+       byte-identical when unset. A consumer with a per-item arbitrary
+       color sets --lr-chip-pressed-border directly, leaving
+       --lr-chip-accent (and therefore the label text color) untouched. */
+    border-color: var(--lr-chip-pressed-border, var(--lr-chip-accent));
+  }
+
+  [part='icon'] {
+    display: inline-flex;
+    flex: 0 0 auto;
+    align-items: center;
+    justify-content: center;
+    font-size: var(--lr-chip-icon-size);
+  }
+  [part='icon'] ::slotted(*) {
+    display: block;
+  }
+  /* Defeats [part='icon']'s own 'display: inline-flex' above -- the native
+     [hidden] UA rule alone would lose to it at equal specificity. Same fix
+     lr-stat's identical [part='icon'][hidden] override already applies. */
+  [part='icon'][hidden] {
+    display: none;
+  }
+
+  [part='label'] {
+    flex: 1 1 auto;
+    min-inline-size: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  /* The interactive hit target meets the shared minimum tappable size (same --lr-icon-button-size
+     floor as lr-swatch-picker's [part='swatch']/lr-token-input's [part='remove']), while the
+     *visible* glyph stays a compact 0.75em × close icon -- a chip is a small horizontal pill, and
+     growing the whole button box to 40px would visually balloon the row. Since the button sits at
+     the pill's trailing edge with nothing after it, the extra hit-target growth is pulled back via
+     a matching negative margin (rather than growing outward into the next chip in a wrapped row) so
+     the *visible* pill footprint is unchanged -- the enlarged hit area simply overlaps into the
+     pill's own padding/background rather than expanding the row's layout box. */
+  [part='remove-button'] {
+    flex: 0 0 auto;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-inline-size: var(--lr-icon-button-size);
+    min-block-size: var(--lr-icon-button-size);
+    margin: calc((var(--lr-icon-button-size) - var(--lr-size-1-25rem)) / -2);
+    margin-inline-end: calc((var(--lr-icon-button-size) - var(--lr-size-1-25rem)) / -2 + var(--lr-size-neg-0-15rem));
+    padding: 0;
+    border: none;
+    border-radius: var(--lr-radius-pill);
+    background: transparent;
+    color: inherit;
+    font-size: var(--lr-size-0-75em);
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+    transition: background-color var(--lr-transition-fast);
+  }
+  [part='remove-button']:hover {
+    background: color-mix(in srgb, currentColor 16%, transparent);
+  }
+  [part='remove-button']:focus-visible {
+    outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);
+    outline-offset: var(--lr-focus-ring-offset);
+  }
+  [part='remove-button'] svg {
+    display: block;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    [part='remove-button'],
+    [part='base'][role='button'] {
+      transition: none !important;
+    }
+  }
+`;
+//# sourceMappingURL=chip.styles.js.map

package/dist/components/overlays/chip/chip.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chip.styles.js","sourceRoot":"","sources":["../../../../src/components/overlays/chip/chip.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgMxB,CAAC"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"confirm.d.ts","sourceRoot":"","sources":["../../../../src/components/overlays/dialog/confirm.ts"],"names":[],"mappings":"AACA,OAAO,aAAa,CAAC;AAIrB,MAAM,WAAW,cAAc;IAC7B,oHAAoH;IACpH,KAAK,EAAE,MAAM,CAAC;IACd,yDAAyD;IACzD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oGAAoG;IACpG,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iGAAiG;IACjG,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,6HAA6H;IAC7H,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;CAC7B;AA2BD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,OAAO,CAAC,OAAO,CAAC,CA2CjE"}

package/dist/components/overlays/dialog/confirm.js

@@ -0,0 +1,80 @@
+import './dialog.js';
+import { tag } from '../../../internal/prefix.js';
+import { resolveLyraString } from '../../../internal/localization.js';
+// Plain inline-styled <button>s, not a shared lr-button component -- none
+// exists in this library yet. Every value below is still a --lr-* token
+// reference, never a raw literal, same requirement as a component's own
+// styles.ts. Each filled tone uses its matching on-color token so standalone
+// light/dark fallbacks and a consumer's Web Awesome theme stay paired.
+const BUTTON_BASE_STYLE = 'font: inherit; font-size: var(--lr-font-size-md-sm); padding: var(--lr-space-xs) var(--lr-space-m); ' +
+    'border-radius: var(--lr-radius); cursor: pointer; border: var(--lr-border-width-thin) solid var(--lr-color-border);';
+const CANCEL_STYLE = 'background: var(--lr-color-surface); color: var(--lr-color-text);';
+const CONFIRM_TONE_STYLE = {
+    neutral: 'background: var(--lr-color-brand); color: var(--lr-color-on-brand); border-color: var(--lr-color-brand);',
+    danger: 'background: var(--lr-color-danger); color: var(--lr-color-on-danger); border-color: var(--lr-color-danger);',
+};
+function createButton(label, style, onClick) {
+    const button = document.createElement('button');
+    button.type = 'button';
+    button.textContent = label;
+    button.style.cssText = `${BUTTON_BASE_STYLE} ${style}`;
+    button.addEventListener('click', onClick);
+    return button;
+}
+/**
+ * Show a confirmation modal, resolving `true` only when the confirm button
+ * is pressed -- Escape, a backdrop click, and the cancel button all resolve
+ * `false`. A drop-in replacement for `window.confirm()`.
+ *
+ * Mounts a transient `<lr-dialog>` for the duration of the call and
+ * removes it once settled, rather than reusing a persistent page-level
+ * region (contrast `lr-toast`'s `toaster.ts`): a confirmation modal has no
+ * stacking/queueing concerns -- only one is ever meant to be open at a time
+ * -- so a mount-and-remove per call keeps its lifetime trivially tied to the
+ * returned promise, with nothing left mounted between calls.
+ *
+ * Every dismissal path (confirm button, cancel button, Escape, backdrop
+ * click) funnels through `<lr-dialog>`'s own `close()`/`lr-dialog-close`
+ * event, so there is exactly one place that resolves the promise and tears
+ * the dialog down.
+ *
+ * @example
+ * const ok = await confirm({
+ *   title: 'Delete conversation?',
+ *   description: 'This cannot be undone.',
+ *   confirmLabel: 'Delete',
+ *   tone: 'danger',
+ * });
+ * if (ok) deleteConversation();
+ */
+export function confirm(options) {
+    const { title, description, confirmLabel, cancelLabel, tone = 'neutral' } = options;
+    return new Promise((resolve) => {
+        const dialog = document.createElement(tag('dialog'));
+        const heading = document.createElement('h2');
+        heading.textContent = title;
+        heading.style.cssText =
+            'margin: 0 0 var(--lr-space-s) 0; font-size: var(--lr-size-1-0625rem); font-weight: var(--lr-font-weight-semibold);';
+        dialog.appendChild(heading);
+        if (description) {
+            const desc = document.createElement('p');
+            desc.textContent = description;
+            desc.style.cssText = 'margin: var(--lr-space-xs) 0 0 0; color: var(--lr-color-text-quiet);';
+            dialog.appendChild(desc);
+        }
+        dialog.addEventListener('lr-dialog-close', (e) => {
+            const reason = e.detail;
+            resolve(reason === 'confirm');
+            dialog.remove();
+        });
+        const cancelButton = createButton(resolveLyraString(dialog, 'cancel', undefined, cancelLabel), CANCEL_STYLE, () => dialog.close('cancel'));
+        cancelButton.slot = 'footer';
+        const confirmButton = createButton(resolveLyraString(dialog, 'confirm', undefined, confirmLabel), CONFIRM_TONE_STYLE[tone], () => dialog.close('confirm'));
+        confirmButton.slot = 'footer';
+        dialog.appendChild(cancelButton);
+        dialog.appendChild(confirmButton);
+        dialog.open = true;
+        document.body.appendChild(dialog);
+    });
+}
+//# sourceMappingURL=confirm.js.map

package/dist/components/overlays/dialog/confirm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"confirm.js","sourceRoot":"","sources":["../../../../src/components/overlays/dialog/confirm.ts"],"names":[],"mappings":"AACA,OAAO,aAAa,CAAC;AACrB,OAAO,EAAE,GAAG,EAAE,MAAM,6BAA6B,CAAC;AAClD,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AAetE,0EAA0E;AAC1E,wEAAwE;AACxE,wEAAwE;AACxE,6EAA6E;AAC7E,uEAAuE;AACvE,MAAM,iBAAiB,GACrB,sGAAsG;IACtG,qHAAqH,CAAC;AACxH,MAAM,YAAY,GAAG,mEAAmE,CAAC;AACzF,MAAM,kBAAkB,GAAyC;IAC/D,OAAO,EACL,0GAA0G;IAC5G,MAAM,EACJ,6GAA6G;CAChH,CAAC;AAEF,SAAS,YAAY,CAAC,KAAa,EAAE,KAAa,EAAE,OAAmB;IACrE,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;IAChD,MAAM,CAAC,IAAI,GAAG,QAAQ,CAAC;IACvB,MAAM,CAAC,WAAW,GAAG,KAAK,CAAC;IAC3B,MAAM,CAAC,KAAK,CAAC,OAAO,GAAG,GAAG,iBAAiB,IAAI,KAAK,EAAE,CAAC;IACvD,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;IAC1C,OAAO,MAAM,CAAC;AAChB,CAAC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,UAAU,OAAO,CAAC,OAAuB;IAC7C,MAAM,EAAE,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,WAAW,EAAE,IAAI,GAAG,SAAS,EAAE,GAAG,OAAO,CAAC;IAEpF,OAAO,IAAI,OAAO,CAAU,CAAC,OAAO,EAAE,EAAE;QACtC,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAe,CAAC;QAEnE,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;QAC7C,OAAO,CAAC,WAAW,GAAG,KAAK,CAAC;QAC5B,OAAO,CAAC,KAAK,CAAC,OAAO;YACnB,oHAAoH,CAAC;QACvH,MAAM,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;QAE5B,IAAI,WAAW,EAAE,CAAC;YAChB,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;YACzC,IAAI,CAAC,WAAW,GAAG,WAAW,CAAC;YAC/B,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,sEAAsE,CAAC;YAC5F,MAAM,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;QAC3B,CAAC;QAED,MAAM,CAAC,gBAAgB,CAAC,iBAAiB,EAAE,CAAC,CAAC,EAAE,EAAE;YAC/C,MAAM,MAAM,GAAI,CAAoC,CAAC,MAAM,CAAC;YAC5D,OAAO,CAAC,MAAM,KAAK,SAAS,CAAC,CAAC;YAC9B,MAAM,CAAC,MAAM,EAAE,CAAC;QAClB,CAAC,CAAC,CAAC;QAEH,MAAM,YAAY,GAAG,YAAY,CAC/B,iBAAiB,CAAC,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,WAAW,CAAC,EAC3D,YAAY,EACZ,GAAG,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,QAAQ,CAAC,CAC7B,CAAC;QACF,YAAY,CAAC,IAAI,GAAG,QAAQ,CAAC;QAC7B,MAAM,aAAa,GAAG,YAAY,CAChC,iBAAiB,CAAC,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,YAAY,CAAC,EAC7D,kBAAkB,CAAC,IAAI,CAAC,EACxB,GAAG,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,SAAS,CAAC,CAC9B,CAAC;QACF,aAAa,CAAC,IAAI,GAAG,QAAQ,CAAC;QAC9B,MAAM,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC;QACjC,MAAM,CAAC,WAAW,CAAC,aAAa,CAAC,CAAC;QAElC,MAAM,CAAC,IAAI,GAAG,IAAI,CAAC;QACnB,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;IACpC,CAAC,CAAC,CAAC;AACL,CAAC"}

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

@@ -0,0 +1,158 @@
+import { type TemplateResult, type PropertyValues } from 'lit';
+import { LyraElement } from '../../../internal/lyra-element.js';
+/**
+ * Reason a dialog was dismissed, forwarded as the `lr-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>);
+export interface LyraDialogEventMap {
+    'lr-dialog-close': CustomEvent<DialogCloseReason>;
+}
+/**
+ * `<lr-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:
+ * 0. If the host element itself has an `aria-label` attribute set, its value
+ *    becomes `aria-label` on the panel outright, overriding every source
+ *    below (including a slotted heading) — the standard ARIA convention for
+ *    a consumer that wants full control over the announced name regardless
+ *    of whatever `heading`/`label` props are also set. Also suppresses the
+ *    visible header/`heading` row and the sr-only `label` element from
+ *    rendering at all, same as case 1 already does to cases 2/3 below.
+ * 1. Otherwise, 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 `<lr-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 lr-dialog
+ * @slot - The dialog body.
+ * @slot footer - Action buttons, rendered in a bottom row.
+ * @event lr-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). Shrink-wraps to its
+ *   content by default, capped at `--lr-dialog-max-width` (default `32rem`); set
+ *   `--lr-dialog-width` for an assertive width instead of only a cap.
+ * @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.
+ * @cssprop [--lr-dialog-overlay-color=var(--lr-color-overlay)] - Backdrop scrim color.
+ * @cssprop [--lr-dialog-width=auto] - Assertive inline size for the panel. Left at `auto` the panel
+ *   shrink-wraps to its content.
+ * @cssprop [--lr-dialog-max-width=var(--lr-dialog-width, var(--lr-size-32rem))] - Cap on the
+ *   panel's inline size. Falls back to `--lr-dialog-width` when that is set, so an assertive width
+ *   is not clipped by the 32rem default; the viewport (`100%`) is always a hard limit on top.
+ */
+export declare class LyraDialog extends LyraElement<LyraDialogEventMap> {
+    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;
+    /** Host-level `aria-label` override for the panel's accessible name — wins over every other
+     *  source (a slotted heading, `heading`, `label`), matching `<lr-date-input>`'s
+     *  `accessibleLabel` pattern. See the class doc for the full precedence order. Set as a plain
+     *  `aria-label` attribute on `<lr-dialog>` itself, not a public JS property. */
+    private accessibleLabel;
+    /** 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 `lr-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 {
+        'lr-dialog': LyraDialog;
+    }
+}
+//# sourceMappingURL=dialog.class.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.class.d.ts","sourceRoot":"","sources":["../../../../src/components/overlays/dialog/dialog.class.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAE9E,OAAO,EAAE,WAAW,EAAE,MAAM,mCAAmC,CAAC;AAShE;;;;;;;;;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,MAAM,WAAW,kBAAkB;IACjC,iBAAiB,EAAE,WAAW,CAAC,iBAAiB,CAAC,CAAC;CACnD;AACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgFG;AACH,qBAAa,UAAW,SAAQ,WAAW,CAAC,kBAAkB,CAAC;IAC7D,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;;;oFAGgF;IACzC,OAAO,CAAC,eAAe,CAAuB;IAErF;;;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,CAmDvB;CACF;AAGD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,UAAU,CAAC;KACzB;CACF"}