@aceshooting/lyra-ui 1.1.0 → 2.0.0

package/dist/components/date-picker/date-input.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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 } from 'lit';
+import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { LyraElement } from '../../internal/lyra-element.js';
 import { FormAssociated } from '../../internal/form-associated.js';
@@ -16,6 +16,26 @@ import { parseISO, formatISO } from './calendar-core.js';
 import { styles } from './date-input.styles.js';
 import { LyraDatePicker } from './date-picker.js';
 import './date-picker.js';
+/** Determines the locale's day/month/year field order from a real formatted
+ *  sample (Jan 2, 2026 -- a date where day/month/year are all numerically
+ *  distinguishable), instead of relying on Date.parse()'s implementation-defined
+ *  (commonly mm/dd/yyyy-biased) heuristics for an ambiguous separated date. */
+function localeDateOrder(locale) {
+    try {
+        const parts = new Intl.DateTimeFormat(locale || undefined, {
+            year: 'numeric',
+            month: '2-digit',
+            day: '2-digit',
+        }).formatToParts(new Date(2026, 0, 2));
+        const order = parts
+            .filter((p) => p.type === 'day' || p.type === 'month' || p.type === 'year')
+            .map((p) => p.type);
+        return order.length === 3 ? order : ['month', 'day', 'year'];
+    }
+    catch {
+        return ['month', 'day', 'year']; // Date.parse()'s own bias, as a last-resort fallback
+    }
+}
 /**
  * `<lyra-date-input>` — a date field with an attached calendar popover.
  * Mirrors the core `<wa-date-input>` API under `lyra-`. Value is ISO 8601
@@ -84,24 +104,18 @@ export class LyraDateInput extends FormAssociated(LyraElement) {
                 this.emit('change');
                 return;
             }
-            // A string that already looks like strict ISO (YYYY-MM-DD) must be judged
-            // by parseISO alone: it validates calendar correctness (rejects e.g.
-            // "2026-02-30"), but Date.parse() doesn't -- falling through to it for an
-            // ISO-shaped string would silently resurrect the same rollover parseISO
-            // guards against (Date.parse('2026-02-30') also normalizes to March 2).
-            const looksLikeISO = /^\d{4}-\d{2}-\d{2}$/.test(raw);
-            const parsed = looksLikeISO ? parseISO(raw) : isNaN(Date.parse(raw)) ? null : new Date(Date.parse(raw));
-            if (parsed) {
-                this.value = formatISO(parsed);
+            const parsed = this.mode === 'range' ? this.parseRangeText(raw) : this.parseSingleText(raw);
+            if (parsed && this.isWithinBounds(parsed)) {
+                this.value = parsed;
                 this.emit('input');
                 this.emit('change');
             }
             else {
-                // Unparseable text: don't silently keep the committed value while the
-                // field still shows garbage -- revert the displayed text back to the
-                // last valid commit and flag the constraint-validation state (mirrors
-                // how `required` is already wired via internals.setValidity(), see
-                // form-associated.ts).
+                // Unparseable (or out-of-bounds) text: don't silently keep the
+                // committed value while the field still shows garbage -- revert the
+                // displayed text back to the last valid commit and flag the
+                // constraint-validation state (mirrors how `required` is already
+                // wired via internals.setValidity(), see form-associated.ts).
                 target.value = this.displayText;
                 this.internals.setValidity({ badInput: true }, 'Enter a valid date');
             }
@@ -175,7 +189,7 @@ export class LyraDateInput extends FormAssociated(LyraElement) {
     }
     /** Open the calendar popover. */
     show() {
-        if (this.open || this.disabled || this.readonly)
+        if (this.open || this.effectiveDisabled || this.readonly)
             return;
         this.open = true;
         this.emit('lyra-show');
@@ -199,7 +213,14 @@ export class LyraDateInput extends FormAssociated(LyraElement) {
     disconnectedCallback() {
         super.disconnectedCallback();
         this.cleanupFn?.();
+        this.cleanupFn = undefined;
         document.removeEventListener('pointerdown', this.onDocPointer);
+        // Reset so a reconnect (e.g. a drag-drop reparent) re-triggers
+        // `updated()`'s `open`-driven branch -- without this, `open` stays
+        // stuck `true` across the disconnect, `updated()` never sees it
+        // *change*, and `place()` never gets called again to re-bind
+        // positioning to the (possibly relocated) anchor.
+        this.open = false;
     }
     updated(changed) {
         super.updated(changed);
@@ -217,11 +238,100 @@ export class LyraDateInput extends FormAssociated(LyraElement) {
             this.toggleAttribute('data-invalid', this.touched && !this.internals.validity.valid);
         }
     }
+    /** Parses one date, ISO-first (so a calendar-invalid ISO string like
+     *  "2026-02-30" is rejected rather than silently rolled over by Date.parse()).
+     *  A 3-part, ambiguous slash/dot/dash-separated date (e.g. "15/07/2026") is
+     *  parsed according to the locale's own day/month/year order (via a real
+     *  Intl.DateTimeFormat sample, see localeDateOrder()) rather than
+     *  Date.parse()'s implementation-defined heuristics -- this is what prevents
+     *  e.g. an en-GB "15/07/2026" from being silently misread as some other day.
+     *  A 4-digit first group (e.g. "2026-7-15") is never locale-guessed, though:
+     *  it's unambiguously a year regardless of locale/separator (ISO's own
+     *  year-first convention, just without zero-padding), so it's routed
+     *  straight through parseISO() instead -- this is what lets a non-padded
+     *  ISO-ish date keep parsing correctly (it did via Date.parse() before the
+     *  ambiguous-date regex below existed at all).
+     *  Anything else (e.g. "July 15, 2026") still falls through to Date.parse(). */
+    parseOneDate(raw) {
+        const looksLikeISO = /^\d{4}-\d{2}-\d{2}$/.test(raw);
+        if (looksLikeISO)
+            return parseISO(raw);
+        const ambiguous = /^(\d{1,4})[/.-](\d{1,4})[/.-](\d{1,4})$/.exec(raw);
+        if (ambiguous) {
+            const [, g1, g2, g3] = ambiguous;
+            if (g1.length === 4) {
+                return parseISO(`${g1}-${g2.padStart(2, '0')}-${g3.padStart(2, '0')}`);
+            }
+            const order = localeDateOrder(this.locale);
+            const values = [Number(g1), Number(g2), Number(g3)];
+            const fields = {};
+            order.forEach((type, i) => {
+                fields[type] = values[i];
+            });
+            if (fields.day != null && fields.month != null && fields.year != null) {
+                const year = fields.year < 100 ? 2000 + fields.year : fields.year;
+                return parseISO(`${String(year).padStart(4, '0')}-${String(fields.month).padStart(2, '0')}-${String(fields.day).padStart(2, '0')}`);
+            }
+        }
+        return isNaN(Date.parse(raw)) ? null : new Date(Date.parse(raw));
+    }
+    parseSingleText(raw) {
+        const parsed = this.parseOneDate(raw);
+        return parsed ? formatISO(parsed) : null;
+    }
+    /** Only round-trips the exact `displayText` shape this component itself
+     *  renders (`"<locale from> – <locale to>"`) — a raw ISO range typed
+     *  directly (`"2026-05-01/2026-05-15"`) is also accepted as a convenience.
+     *  A reversed typed range (`to` before `from`) is normalized into
+     *  from-before-to order, matching what the date-picker's own UI-driven
+     *  `commit()` already does for a UI-picked range. */
+    parseRangeText(raw) {
+        if (/^\d{4}-\d{2}-\d{2}\/\d{4}-\d{2}-\d{2}$/.test(raw)) {
+            const [a, b] = raw.split('/');
+            const from = parseISO(a);
+            const to = parseISO(b);
+            if (!from || !to)
+                return null;
+            return from <= to ? raw : `${b}/${a}`;
+        }
+        const separator = ' – '; // matches displayText's ` – ` join exactly
+        const idx = raw.indexOf(separator);
+        if (idx === -1)
+            return null;
+        const from = this.parseOneDate(raw.slice(0, idx).trim());
+        const to = this.parseOneDate(raw.slice(idx + separator.length).trim());
+        if (!from || !to)
+            return null;
+        return from <= to ? `${formatISO(from)}/${formatISO(to)}` : `${formatISO(to)}/${formatISO(from)}`;
+    }
+    isWithinBounds(isoValue) {
+        const min = parseISO(this.min);
+        const max = parseISO(this.max);
+        const today = new Date();
+        today.setHours(0, 0, 0, 0);
+        return isoValue.split('/').every((part) => {
+            const d = parseISO(part);
+            if (!d)
+                return false;
+            if (min && d < min)
+                return false;
+            if (max && d > max)
+                return false;
+            if (this.disablePast && d < today)
+                return false;
+            if (this.disableFuture && d > today)
+                return false;
+            return true;
+        });
+    }
     render() {
         const hasValue = this.value.length > 0;
         const hasHint = this.hasHintSlot || this.hint.length > 0;
         const hasError = this.hasErrorSlot || this.errorText.length > 0;
         const hasLabel = this.hasLabelSlot || this.label.length > 0;
+        const describedBy = [hasError ? 'date-input-error' : '', hasHint ? 'date-input-hint' : '']
+            .filter(Boolean)
+            .join(' ');
         return html `
       <div part="form-control" @keydown=${this.onFormControlKey}>
         <label part="form-control-label" for=${this.inputId} ?hidden=${!hasLabel}>
@@ -232,10 +342,11 @@ export class LyraDateInput extends FormAssociated(LyraElement) {
             id=${this.inputId}
             part="input"
             type="text"
-            aria-label=${this.label || this.placeholder || 'Date'}
+            aria-label=${hasLabel ? nothing : this.placeholder || 'Date'}
+            aria-describedby=${describedBy || nothing}
             .value=${this.displayText}
             placeholder=${this.placeholder}
-            ?disabled=${this.disabled}
+            ?disabled=${this.effectiveDisabled}
             ?readonly=${this.readonly}
             @change=${this.onInputChange}
             @keydown=${this.onInputKey}
@@ -245,6 +356,7 @@ export class LyraDateInput extends FormAssociated(LyraElement) {
             ? html `<button
                 part="clear-button"
                 type="button"
+                ?disabled=${this.effectiveDisabled || this.readonly}
                 aria-label="Clear"
                 @click=${() => this.clear()}
               >
@@ -258,7 +370,7 @@ export class LyraDateInput extends FormAssociated(LyraElement) {
             aria-haspopup="dialog"
             aria-expanded=${this.open ? 'true' : 'false'}
             aria-controls=${this.popupId}
-            ?disabled=${this.disabled || this.readonly}
+            ?disabled=${this.effectiveDisabled || this.readonly}
             @click=${() => (this.open ? this.hide() : this.show())}
           >
             <span part="expand-icon" aria-hidden="true">${calendarIcon()}</span>
@@ -273,7 +385,7 @@ export class LyraDateInput extends FormAssociated(LyraElement) {
             .max=${this.max}
             .months=${this.months}
             .locale=${this.locale}
-            .disabled=${this.disabled}
+            .disabled=${this.effectiveDisabled}
             .readonly=${this.readonly}
             .disablePast=${this.disablePast}
             .disableFuture=${this.disableFuture}
@@ -284,10 +396,10 @@ export class LyraDateInput extends FormAssociated(LyraElement) {
             @change=${this.onPickerChange}
           ></lyra-date-picker>
         </div>
-        <div part="error" ?hidden=${!hasError}>
+        <div id="date-input-error" part="error" ?hidden=${!hasError}>
           ${this.errorText}<slot name="error" @slotchange=${this.onErrorSlotChange}></slot>
         </div>
-        <div part="hint" ?hidden=${!hasHint}>
+        <div id="date-input-hint" part="hint" ?hidden=${!hasHint}>
           ${this.hint}<slot name="hint" @slotchange=${this.onHintSlotChange}></slot>
         </div>
       </div>

package/dist/components/date-picker/date-picker.d.ts

@@ -43,6 +43,13 @@ export declare class LyraDatePicker extends LyraElement {
     protected willUpdate(changed: PropertyValues): void;
     private get fdow();
     private isDisabled;
+    /** The first enabled day at/after the first visible month's start, scanning
+     *  forward across all visible months -- used as the sole focusable day when
+     *  there's no selection and no prior keyboard focus, so the empty-grid case
+     *  never defaults to a possibly-disabled day 1. Returns null if every
+     *  visible day is disabled (pathological but possible with a very narrow
+     *  min/max window). */
+    private firstEnabledDate;
     private commit;
     private selectDate;
     /** Clear the selection and emit input + change. */

package/dist/components/date-picker/date-picker.js

@@ -50,32 +50,54 @@ export class LyraDatePicker extends LyraElement {
         // `selection.from`'s month -- only an externally-set `value` should do that.
         this.suppressViewSync = false;
         this.onGridKey = (e) => {
-            const current = this.focusedDate ?? this.selection.from ?? new Date();
+            const min = parseISO(this.min);
+            const max = parseISO(this.max);
+            const today = new Date();
+            today.setHours(0, 0, 0, 0);
+            const current = this.focusedDate ??
+                this.selection.from ??
+                this.firstEnabledDate(min, max, today) ??
+                new Date(this.viewDate.getFullYear(), this.viewDate.getMonth(), 1);
+            const step = (base, days) => new Date(base.getFullYear(), base.getMonth(), base.getDate() + days);
+            // Walks in the requested direction until an enabled day is found, bounded
+            // by a step cap (366 days -- more than a year) so an all-disabled range
+            // (e.g. min/max entirely in the past with disable-past set) can't loop
+            // forever; returns null rather than landing focus on a disabled cell,
+            // whose `.focus()` would be a silent no-op anyway.
+            const firstEnabledFrom = (base, dayStep) => {
+                let d = base;
+                for (let i = 0; i < 366; i++) {
+                    if (!this.isDisabled(d, min, max, today))
+                        return d;
+                    d = step(d, dayStep);
+                }
+                return null;
+            };
             let next = null;
             switch (e.key) {
                 case 'ArrowLeft':
-                    next = new Date(current.getFullYear(), current.getMonth(), current.getDate() - 1);
+                    next = firstEnabledFrom(step(current, -1), -1);
                     break;
                 case 'ArrowRight':
-                    next = new Date(current.getFullYear(), current.getMonth(), current.getDate() + 1);
+                    next = firstEnabledFrom(step(current, 1), 1);
                     break;
                 case 'ArrowUp':
-                    next = new Date(current.getFullYear(), current.getMonth(), current.getDate() - 7);
+                    next = firstEnabledFrom(step(current, -7), -1);
                     break;
                 case 'ArrowDown':
-                    next = new Date(current.getFullYear(), current.getMonth(), current.getDate() + 7);
+                    next = firstEnabledFrom(step(current, 7), 1);
                     break;
                 case 'PageUp':
-                    next = new Date(current.getFullYear(), current.getMonth() - 1, current.getDate());
+                    next = firstEnabledFrom(new Date(current.getFullYear(), current.getMonth() - 1, current.getDate()), 1);
                     break;
                 case 'PageDown':
-                    next = new Date(current.getFullYear(), current.getMonth() + 1, current.getDate());
+                    next = firstEnabledFrom(new Date(current.getFullYear(), current.getMonth() + 1, current.getDate()), 1);
                     break;
                 case 'Home':
-                    next = new Date(current.getFullYear(), current.getMonth(), 1);
+                    next = firstEnabledFrom(new Date(current.getFullYear(), current.getMonth(), 1), 1);
                     break;
                 case 'End':
-                    next = new Date(current.getFullYear(), current.getMonth() + 1, 0);
+                    next = firstEnabledFrom(new Date(current.getFullYear(), current.getMonth() + 1, 0), -1);
                     break;
                 case 'Enter':
                 case ' ':
@@ -86,6 +108,8 @@ export class LyraDatePicker extends LyraElement {
                     return;
             }
             e.preventDefault();
+            if (!next)
+                return;
             this.focusedDate = next;
             this.viewDate = this.viewDateForFocus(next);
             this.focusPending = true;
@@ -127,6 +151,23 @@ export class LyraDatePicker extends LyraElement {
             return true;
         return false;
     }
+    /** The first enabled day at/after the first visible month's start, scanning
+     *  forward across all visible months -- used as the sole focusable day when
+     *  there's no selection and no prior keyboard focus, so the empty-grid case
+     *  never defaults to a possibly-disabled day 1. Returns null if every
+     *  visible day is disabled (pathological but possible with a very narrow
+     *  min/max window). */
+    firstEnabledDate(min, max, today) {
+        let d = new Date(this.viewDate.getFullYear(), this.viewDate.getMonth(), 1);
+        const lastVisibleMonth = addMonths(d, this.months - 1);
+        const boundEnd = new Date(lastVisibleMonth.getFullYear(), lastVisibleMonth.getMonth() + 1, 0);
+        for (let i = 0; i < 732 && d <= boundEnd; i++) {
+            if (!this.isDisabled(d, min, max, today))
+                return d;
+            d = new Date(d.getFullYear(), d.getMonth(), d.getDate() + 1);
+        }
+        return null;
+    }
     commit(from, to, fire) {
         const next = this.mode === 'range'
             ? from && to
@@ -217,7 +258,7 @@ export class LyraDatePicker extends LyraElement {
             cell?.focus();
         }
     }
-    renderDay(date, shownMonth, selection, min, max, today, rowHasVisibleDay) {
+    renderDay(date, shownMonth, selection, min, max, today, rowHasVisibleDay, fallbackFocusDate) {
         const outside = date.getMonth() !== shownMonth;
         // Outside-month days are empty placeholders by default (matches WA), keeping the
         // 6-row grid aligned without low-contrast faded numbers.
@@ -240,7 +281,19 @@ export class LyraDatePicker extends LyraElement {
         const isEnd = to && isSameDay(date, to);
         const selected = this.mode === 'single' ? isStart : isStart || isEnd;
         const inRange = this.mode === 'range' && from && to && date > from && date < to;
-        const focused = this.focusedDate && isSameDay(date, this.focusedDate) ? true : !this.focusedDate && isStart;
+        // Falls back to the first *enabled* day across the visible month(s) (see
+        // firstEnabledDate()) when there's neither a focusedDate nor a selection,
+        // so the grid always has exactly one tabbable cell -- otherwise every
+        // cell computes `false` and keyboard users tabbing into an empty picker
+        // land nowhere. Must not just be "day 1 of the shown month" unconditionally:
+        // day 1 can itself be disabled (e.g. disable-past opened on any day other
+        // than the 1st), which would land the sole tabindex="0" cell on a button
+        // that can never actually receive focus.
+        const focused = this.focusedDate != null
+            ? isSameDay(date, this.focusedDate)
+            : isStart
+                ? true
+                : !from && fallbackFocusDate != null && isSameDay(date, fallbackFocusDate);
         const parts = ['day'];
         if (outside)
             parts.push('day-outside');
@@ -272,7 +325,7 @@ export class LyraDatePicker extends LyraElement {
       ${date.getDate()}
     </button>`;
     }
-    renderMonth(offset, selection, min, max, today, fdow, labels) {
+    renderMonth(offset, selection, min, max, today, fdow, labels, fallbackFocusDate) {
         const base = addMonths(this.viewDate, offset);
         const year = base.getFullYear();
         const month = base.getMonth();
@@ -282,13 +335,25 @@ export class LyraDatePicker extends LyraElement {
         return html `<div part="month">
       <div part="header">
         ${isFirst
-            ? html `<button part="previous" type="button" aria-label="Previous month" @click=${() => this.nav(-1)}>
+            ? html `<button
+              part="previous"
+              type="button"
+              aria-label="Previous month"
+              ?disabled=${this.disabled || this.readonly}
+              @click=${() => this.nav(-1)}
+            >
               ${chevronIcon()}
             </button>`
             : html `<span></span>`}
         <div part="title">${monthTitle(year, month, this.locale)}</div>
         ${isLast
-            ? html `<button part="next" type="button" aria-label="Next month" @click=${() => this.nav(1)}>
+            ? html `<button
+              part="next"
+              type="button"
+              aria-label="Next month"
+              ?disabled=${this.disabled || this.readonly}
+              @click=${() => this.nav(1)}
+            >
               ${chevronIcon()}
             </button>`
             : html `<span></span>`}
@@ -297,7 +362,7 @@ export class LyraDatePicker extends LyraElement {
       <div part="grid" role="grid" @keydown=${this.onGridKey}>
         ${matrix.map((week) => {
             const rowHasVisibleDay = week.some((d) => d.getMonth() === month);
-            return html `<div part="week" role="row">${week.map((d) => this.renderDay(d, month, selection, min, max, today, rowHasVisibleDay))}</div>`;
+            return html `<div part="week" role="row">${week.map((d) => this.renderDay(d, month, selection, min, max, today, rowHasVisibleDay, fallbackFocusDate))}</div>`;
         })}
       </div>
     </div>`;
@@ -310,9 +375,13 @@ export class LyraDatePicker extends LyraElement {
         today.setHours(0, 0, 0, 0);
         const fdow = this.fdow;
         const labels = weekdayLabels(fdow, this.weekdayFormat, this.locale);
+        // Only bother scanning for a fallback focus day when it's actually
+        // needed: there's no point walking the visible days if a focusedDate or
+        // an existing selection already determines the sole tabbable cell.
+        const fallbackFocusDate = this.focusedDate || selection.from ? null : this.firstEnabledDate(min, max, today);
         const monthEls = [];
         for (let i = 0; i < this.months; i++) {
-            monthEls.push(this.renderMonth(i, selection, min, max, today, fdow, labels));
+            monthEls.push(this.renderMonth(i, selection, min, max, today, fdow, labels, fallbackFocusDate));
         }
         return html `<div part="base">${monthEls}</div>`;
     }

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

@@ -0,0 +1,40 @@
+import './dialog.js';
+export interface ConfirmOptions {
+    /** Dialog title -- rendered as a slotted `<h2>`, which also drives the dialog's accessible name (see dialog.ts). */
+    title: string;
+    /** Optional supporting text rendered below the title. */
+    description?: string;
+    /** Confirm button label. Defaults to `'Confirm'`. */
+    confirmLabel?: string;
+    /** Cancel button label. Defaults to `'Cancel'`. */
+    cancelLabel?: string;
+    /** `'danger'` fills the confirm button with `--lyra-color-danger` instead of `--lyra-color-brand` -- for destructive actions. */
+    tone?: 'neutral' | 'danger';
+}
+/**
+ * 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 `<lyra-dialog>` for the duration of the call and
+ * removes it once settled, rather than reusing a persistent page-level
+ * region (contrast `lyra-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 `<lyra-dialog>`'s own `close()`/`lyra-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 declare function confirm(options: ConfirmOptions): Promise<boolean>;

package/dist/components/dialog/confirm.js

@@ -0,0 +1,79 @@
+import './dialog.js';
+// Plain inline-styled <button>s, not a shared lyra-button component -- none
+// exists in this library yet. Every value below is still a --lyra-* token
+// reference, never a raw literal, same requirement as a component's own
+// styles.ts. --lyra-color-on-brand is documented (tokens.styles.ts) as the
+// text color for *brand*-fill content specifically, but it's white in both
+// light and dark themes and reads fine over the danger fill too, so the
+// confirm button reuses it rather than introducing a redundant --lyra-color-
+// on-danger token for one call site.
+const BUTTON_BASE_STYLE = 'font: inherit; font-size: 0.875rem; padding: var(--lyra-space-xs) var(--lyra-space-m); ' +
+    'border-radius: var(--lyra-radius); cursor: pointer; border: 1px solid var(--lyra-color-border);';
+const CANCEL_STYLE = 'background: var(--lyra-color-surface); color: var(--lyra-color-text);';
+const CONFIRM_TONE_STYLE = {
+    neutral: 'background: var(--lyra-color-brand); color: var(--lyra-color-on-brand); border-color: var(--lyra-color-brand);',
+    danger: 'background: var(--lyra-color-danger); color: var(--lyra-color-on-brand); border-color: var(--lyra-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 `<lyra-dialog>` for the duration of the call and
+ * removes it once settled, rather than reusing a persistent page-level
+ * region (contrast `lyra-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 `<lyra-dialog>`'s own `close()`/`lyra-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 = 'Confirm', cancelLabel = 'Cancel', tone = 'neutral' } = options;
+    return new Promise((resolve) => {
+        const dialog = document.createElement('lyra-dialog');
+        const heading = document.createElement('h2');
+        heading.textContent = title;
+        heading.style.cssText = 'margin: 0 0 var(--lyra-space-s) 0; font-size: 1.0625rem; font-weight: 600;';
+        dialog.appendChild(heading);
+        if (description) {
+            const desc = document.createElement('p');
+            desc.textContent = description;
+            desc.style.cssText = 'margin: var(--lyra-space-xs) 0 0 0; color: var(--lyra-color-text-quiet);';
+            dialog.appendChild(desc);
+        }
+        dialog.addEventListener('lyra-dialog-close', (e) => {
+            const reason = e.detail;
+            resolve(reason === 'confirm');
+            dialog.remove();
+        });
+        const cancelButton = createButton(cancelLabel, CANCEL_STYLE, () => dialog.close('cancel'));
+        cancelButton.slot = 'footer';
+        const confirmButton = createButton(confirmLabel, CONFIRM_TONE_STYLE[tone], () => dialog.close('confirm'));
+        confirmButton.slot = 'footer';
+        dialog.appendChild(cancelButton);
+        dialog.appendChild(confirmButton);
+        dialog.open = true;
+        document.body.appendChild(dialog);
+    });
+}

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

@@ -0,0 +1,85 @@
+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; 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' | 'api' | 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 —
+ * no built-in title bar or close button; a consumer supplies a heading and
+ * any close affordance itself via the default/`footer` slots.
+ *
+ * Accessible name: 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. 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.
+ * Either way `label` itself never renders visible chrome — a slotted heading
+ * is what a sighted user sees; `::part(label)` can be restyled to make the
+ * sr-only text visible too, if a consumer wants that instead of slotting a
+ * heading.
+ *
+ * The 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
+ * `label`-prop case above, where the sr-only element is rendered inside the
+ * same shadow root it labels, so `aria-labelledby` there is safe.
+ *
+ * @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, or a `close()` call.
+ * @csspart backdrop - The full-viewport scrim behind the panel.
+ * @csspart panel - The dialog panel itself (`role="dialog"` while open).
+ * @csspart label - The invisible `label`-text element used for
+ *   `aria-labelledby` when no heading is slotted.
+ * @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;
+    private hasFooterSlot;
+    private headingText?;
+    private releaseScrollLock?;
+    private lastTrigger?;
+    private readonly srLabelId;
+    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'`; 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 onDocKeyDown;
+    private getFocusableElements;
+    private getActiveElement;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-dialog': LyraDialog;
+    }
+}