@aceshooting/lyra-ui 1.2.0 → 2.1.0

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

@@ -1,6 +1,6 @@
 import { type TemplateResult, type PropertyValues } from 'lit';
 import { LyraElement } from '../../internal/lyra-element.js';
-import { type WeekdayFormat } from './calendar-core.js';
+import { type CalendarMode, type WeekdayFormat } from './calendar-core.js';
 export interface DateRange {
     from: Date | null;
     to: Date | null;
@@ -14,14 +14,30 @@ export interface DateRange {
  * @customElement lyra-date-picker
  * @event change - The user committed a value.
  * @event input - The value changed during interaction (range: after the first click).
- * @csspart base, month, header, title, previous, next, weekdays, weekday, grid, week
- * @csspart day, day-today, day-outside, day-selected, day-range-start, day-range-end, day-range-inner, day-placeholder
+ * @csspart base - The date-picker wrapper.
+ * @csspart month - A visible month wrapper.
+ * @csspart header - The month header.
+ * @csspart title - The month title.
+ * @csspart previous - The previous-month button.
+ * @csspart next - The next-month button.
+ * @csspart weekdays - The weekday header row.
+ * @csspart weekday - A weekday label.
+ * @csspart grid - A month date grid.
+ * @csspart week - A calendar week row.
+ * @csspart day - A calendar day button.
+ * @csspart day-today - A day representing today.
+ * @csspart day-outside - A day outside the active month.
+ * @csspart day-selected - A selected day.
+ * @csspart day-range-start - The start of a selected range.
+ * @csspart day-range-end - The end of a selected range.
+ * @csspart day-range-inner - An interior day in a selected range.
+ * @csspart day-placeholder - A non-day grid placeholder.
  */
 export declare class LyraDatePicker extends LyraElement {
     static styles: import("lit").CSSResultGroup[];
     /** ISO value: `YYYY-MM-DD` or `YYYY-MM-DD/YYYY-MM-DD`. */
     value: string;
-    mode: 'single' | 'range';
+    mode: CalendarMode;
     min: string;
     max: string;
     disabled: boolean;
@@ -33,16 +49,31 @@ export declare class LyraDatePicker extends LyraElement {
     disablePast: boolean;
     disableFuture: boolean;
     withOutsideDays: boolean;
+    /** Accessible label for the previous-month button. Override for a non-English `locale`. */
+    previousLabel: string;
+    /** Accessible label for the next-month button. Override for a non-English `locale`. */
+    nextLabel: string;
     private viewDate;
     private focusedDate;
     private focusPending;
+    private readonly titleIds;
     private suppressViewSync;
+    private get effectiveMode();
+    private get visibleMonths();
+    private get effectiveWeekdayFormat();
     get selection(): DateRange;
     /** Read-only Date view of a single-mode value. */
     get valueAsDate(): Date | null;
     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

@@ -4,13 +4,26 @@ 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, nothing } from 'lit';
+import { html, nothing, } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { LyraElement } from '../../internal/lyra-element.js';
 import { defineElement } from '../../internal/prefix.js';
 import { chevronIcon } from '../../internal/icons.js';
+import { nextId } from '../../internal/a11y.js';
 import { styles } from './date-picker.styles.js';
-import { monthMatrix, weekdayLabels, monthTitle, formatISO, parseISO, isSameDay, addMonths, clampDate, resolveFirstDayOfWeek, } from './calendar-core.js';
+import { monthMatrix, weekdayLabels, monthTitle, formatISO, parseISO, isSameDay, addMonths, addMonthsClampingDay, clampDate, dateTimeFormat, normalizeCalendarMode, normalizeCalendarMonths, normalizeWeekdayFormat, resolveFirstDayOfWeek, } from './calendar-core.js';
+const modeConverter = {
+    fromAttribute: normalizeCalendarMode,
+    toAttribute: normalizeCalendarMode,
+};
+const monthsConverter = {
+    fromAttribute: normalizeCalendarMonths,
+    toAttribute: normalizeCalendarMonths,
+};
+const weekdayFormatConverter = {
+    fromAttribute: normalizeWeekdayFormat,
+    toAttribute: normalizeWeekdayFormat,
+};
 /**
  * `<lyra-date-picker>` — an inline month-grid calendar for picking a single date
  * or a date range. Mirrors the core `<wa-date-picker>` API under `lyra-`.
@@ -20,8 +33,24 @@ import { monthMatrix, weekdayLabels, monthTitle, formatISO, parseISO, isSameDay,
  * @customElement lyra-date-picker
  * @event change - The user committed a value.
  * @event input - The value changed during interaction (range: after the first click).
- * @csspart base, month, header, title, previous, next, weekdays, weekday, grid, week
- * @csspart day, day-today, day-outside, day-selected, day-range-start, day-range-end, day-range-inner, day-placeholder
+ * @csspart base - The date-picker wrapper.
+ * @csspart month - A visible month wrapper.
+ * @csspart header - The month header.
+ * @csspart title - The month title.
+ * @csspart previous - The previous-month button.
+ * @csspart next - The next-month button.
+ * @csspart weekdays - The weekday header row.
+ * @csspart weekday - A weekday label.
+ * @csspart grid - A month date grid.
+ * @csspart week - A calendar week row.
+ * @csspart day - A calendar day button.
+ * @csspart day-today - A day representing today.
+ * @csspart day-outside - A day outside the active month.
+ * @csspart day-selected - A selected day.
+ * @csspart day-range-start - The start of a selected range.
+ * @csspart day-range-end - The end of a selected range.
+ * @csspart day-range-inner - An interior day in a selected range.
+ * @csspart day-placeholder - A non-day grid placeholder.
  */
 export class LyraDatePicker extends LyraElement {
     constructor() {
@@ -40,9 +69,17 @@ export class LyraDatePicker extends LyraElement {
         this.disablePast = false;
         this.disableFuture = false;
         this.withOutsideDays = false;
+        /** Accessible label for the previous-month button. Override for a non-English `locale`. */
+        this.previousLabel = 'Previous month';
+        /** Accessible label for the next-month button. Override for a non-English `locale`. */
+        this.nextLabel = 'Next month';
         this.viewDate = new Date(new Date().getFullYear(), new Date().getMonth(), 1);
         this.focusedDate = null;
         this.focusPending = false;
+        // Stable per-instance ids for each visible month's title, referenced by
+        // that month's grid via aria-labelledby -- `months` only ever renders 1 or
+        // 2 months, so two ids always suffice regardless of which is in use.
+        this.titleIds = [nextId('date-picker-title'), nextId('date-picker-title')];
         // Set right before `commit()` assigns `value`, so `willUpdate` can tell its
         // own write apart from an external assignment. Internal commits already
         // know the right date is on-screen (it's the cell the user just clicked, or
@@ -50,32 +87,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(addMonthsClampingDay(current, -1), 1);
                     break;
                 case 'PageDown':
-                    next = new Date(current.getFullYear(), current.getMonth() + 1, current.getDate());
+                    next = firstEnabledFrom(addMonthsClampingDay(current, 1), 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,19 +145,30 @@ export class LyraDatePicker extends LyraElement {
                     return;
             }
             e.preventDefault();
+            if (!next)
+                return;
             this.focusedDate = next;
             this.viewDate = this.viewDateForFocus(next);
             this.focusPending = true;
         };
     }
     static { this.styles = [LyraElement.styles, styles]; }
+    get effectiveMode() {
+        return normalizeCalendarMode(this.mode);
+    }
+    get visibleMonths() {
+        return normalizeCalendarMonths(this.months);
+    }
+    get effectiveWeekdayFormat() {
+        return normalizeWeekdayFormat(this.weekdayFormat);
+    }
     get selection() {
         const parts = this.value.split('/');
         return { from: parseISO(parts[0] ?? ''), to: parseISO(parts[1] ?? '') };
     }
     /** Read-only Date view of a single-mode value. */
     get valueAsDate() {
-        return this.mode === 'single' ? this.selection.from : null;
+        return this.effectiveMode === 'single' ? this.selection.from : null;
     }
     willUpdate(changed) {
         if (changed.has('value')) {
@@ -127,8 +197,25 @@ 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.visibleMonths - 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'
+        const next = this.effectiveMode === 'range'
             ? from && to
                 ? `${formatISO(from)}/${formatISO(to)}`
                 : from
@@ -155,7 +242,7 @@ export class LyraDatePicker extends LyraElement {
         if (this.isDisabled(date, min, max, today))
             return;
         this.focusedDate = date;
-        if (this.mode === 'range') {
+        if (this.effectiveMode === 'range') {
             const { from, to } = this.selection;
             if (!from || (from && to)) {
                 this.commit(date, null, false);
@@ -183,9 +270,9 @@ export class LyraDatePicker extends LyraElement {
     /** Navigate the view to a date and focus it, clamped to `min`/`max`. */
     goToDate(date) {
         const d = typeof date === 'string' ? parseISO(date) : date;
-        if (!d)
+        if (!d || !Number.isFinite(d.getTime()))
             return;
-        const clamped = clampDate(d, parseISO(this.min), parseISO(this.max));
+        const clamped = clampDate(new Date(d.getTime()), parseISO(this.min), parseISO(this.max));
         this.viewDate = new Date(clamped.getFullYear(), clamped.getMonth(), 1);
         this.focusedDate = clamped;
         this.focusPending = true;
@@ -202,11 +289,11 @@ export class LyraDatePicker extends LyraElement {
     viewDateForFocus(next) {
         const firstMonth = new Date(this.viewDate.getFullYear(), this.viewDate.getMonth(), 1);
         const nextMonth = new Date(next.getFullYear(), next.getMonth(), 1);
-        const lastMonth = addMonths(firstMonth, this.months - 1);
+        const lastMonth = addMonths(firstMonth, this.visibleMonths - 1);
         if (nextMonth < firstMonth)
             return nextMonth;
         if (nextMonth > lastMonth)
-            return addMonths(nextMonth, -(this.months - 1));
+            return addMonths(nextMonth, -(this.visibleMonths - 1));
         return firstMonth;
     }
     updated() {
@@ -217,7 +304,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, dayLabelFmt) {
         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.
@@ -238,9 +325,21 @@ export class LyraDatePicker extends LyraElement {
         const isToday = isSameDay(date, today);
         const isStart = from && isSameDay(date, from);
         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;
+        const selected = this.effectiveMode === 'single' ? isStart : isStart || isEnd;
+        const inRange = this.effectiveMode === 'range' && from && to && date > from && date < to;
+        // 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');
@@ -248,7 +347,7 @@ export class LyraDatePicker extends LyraElement {
             parts.push('day-today');
         if (selected)
             parts.push('day-selected');
-        if (isStart && this.mode === 'range')
+        if (isStart && this.effectiveMode === 'range')
             parts.push('day-range-start');
         if (isEnd)
             parts.push('day-range-end');
@@ -259,12 +358,7 @@ export class LyraDatePicker extends LyraElement {
       role="gridcell"
       data-date=${formatISO(date)}
       aria-selected=${selected ? 'true' : 'false'}
-      aria-label=${date.toLocaleDateString(this.locale || undefined, {
-            weekday: 'long',
-            year: 'numeric',
-            month: 'long',
-            day: 'numeric',
-        })}
+      aria-label=${dayLabelFmt.format(date)}
       tabindex=${focused ? '0' : '-1'}
       ?disabled=${disabled}
       @click=${() => this.selectDate(date)}
@@ -272,32 +366,45 @@ 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, dayLabelFmt) {
         const base = addMonths(this.viewDate, offset);
         const year = base.getFullYear();
         const month = base.getMonth();
         const matrix = monthMatrix(year, month, fdow);
         const isFirst = offset === 0;
-        const isLast = offset === this.months - 1;
+        const isLast = offset === this.visibleMonths - 1;
+        const titleId = this.titleIds[offset];
         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=${this.previousLabel}
+              ?disabled=${this.disabled || this.readonly}
+              @click=${() => this.nav(-1)}
+            >
               ${chevronIcon()}
             </button>`
             : html `<span></span>`}
-        <div part="title">${monthTitle(year, month, this.locale)}</div>
+        <div part="title" id=${titleId}>${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=${this.nextLabel}
+              ?disabled=${this.disabled || this.readonly}
+              @click=${() => this.nav(1)}
+            >
               ${chevronIcon()}
             </button>`
             : html `<span></span>`}
       </div>
       <div part="weekdays">${labels.map((l) => html `<span part="weekday">${l}</span>`)}</div>
-      <div part="grid" role="grid" @keydown=${this.onGridKey}>
+      <div part="grid" role="grid" aria-labelledby=${titleId} @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, dayLabelFmt))}</div>`;
         })}
       </div>
     </div>`;
@@ -309,10 +416,24 @@ export class LyraDatePicker extends LyraElement {
         const today = new Date();
         today.setHours(0, 0, 0, 0);
         const fdow = this.fdow;
-        const labels = weekdayLabels(fdow, this.weekdayFormat, this.locale);
+        const labels = weekdayLabels(fdow, this.effectiveWeekdayFormat, this.locale);
+        // Hoisted once per render and reused across every day cell, rather than
+        // each cell constructing its own Intl.DateTimeFormat via
+        // toLocaleDateString() -- mirrors how the weekday-header and month-title
+        // labels already share a single formatter instead of one per cell.
+        const dayLabelFmt = dateTimeFormat(this.locale, {
+            weekday: 'long',
+            year: 'numeric',
+            month: 'long',
+            day: 'numeric',
+        });
+        // 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));
+        for (let i = 0; i < this.visibleMonths; i++) {
+            monthEls.push(this.renderMonth(i, selection, min, max, today, fdow, labels, fallbackFocusDate, dayLabelFmt));
         }
         return html `<div part="base">${monthEls}</div>`;
     }
@@ -321,7 +442,7 @@ __decorate([
     property()
 ], LyraDatePicker.prototype, "value", void 0);
 __decorate([
-    property()
+    property({ converter: modeConverter })
 ], LyraDatePicker.prototype, "mode", void 0);
 __decorate([
     property()
@@ -336,7 +457,7 @@ __decorate([
     property({ type: Boolean, reflect: true })
 ], LyraDatePicker.prototype, "readonly", void 0);
 __decorate([
-    property({ type: Number })
+    property({ converter: monthsConverter })
 ], LyraDatePicker.prototype, "months", void 0);
 __decorate([
     property()
@@ -345,7 +466,7 @@ __decorate([
     property({ attribute: 'first-day-of-week' })
 ], LyraDatePicker.prototype, "firstDayOfWeek", void 0);
 __decorate([
-    property({ attribute: 'weekday-format' })
+    property({ attribute: 'weekday-format', converter: weekdayFormatConverter })
 ], LyraDatePicker.prototype, "weekdayFormat", void 0);
 __decorate([
     property({ type: Boolean, attribute: 'disable-past' })
@@ -356,6 +477,12 @@ __decorate([
 __decorate([
     property({ type: Boolean, attribute: 'with-outside-days' })
 ], LyraDatePicker.prototype, "withOutsideDays", void 0);
+__decorate([
+    property({ attribute: 'previous-label' })
+], LyraDatePicker.prototype, "previousLabel", void 0);
+__decorate([
+    property({ attribute: 'next-label' })
+], LyraDatePicker.prototype, "nextLabel", void 0);
 __decorate([
     state()
 ], LyraDatePicker.prototype, "viewDate", void 0);

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,76 @@
+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. 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: 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-danger); 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);
+    });
+}