@fusion.dev/helix-headless 0.143.0 → 0.144.0

package/dist/date-picker/root/date-picker-root.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 { valueAsDate as asDate, customElement, fillTemplate, dateAsValue as fromDate, HelixFormElement, HelixNavigateEvent, hostAria, inlineStep, MixinControllerValue, reportValues, requestChange, writtenList, } from '@fusion.dev/helix-core';
+import { addDays, addMonths, valueAsDate as asDate, barredBy, customElement, fillTemplate, dateAsValue as fromDate, HelixFormElement, HelixNavigateEvent, hostAria, inlineStep, commaList as list, localToday, MixinControllerValue, monthOf, monthOut, periodCells, periodKey, reportValues, requestChange, sameMonth, weekStartOf, YEARS_SHOWN, yearOut, yearPageOf, } from '@fusion.dev/helix-core';
 import { caretLeft, caretRight } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -21,34 +21,6 @@ const KEYS = new Set([
     'PageUp',
     ' ',
 ]);
-const localToday = () => {
-    const now = new Date();
-    const month = `${now.getMonth() + 1}`.padStart(2, '0');
-    const day = `${now.getDate()}`.padStart(2, '0');
-    return `${now.getFullYear()}-${month}-${day}`;
-};
-const list = (value) => value
-    .split(',')
-    .map((entry) => entry.trim())
-    .filter(Boolean);
-const weekStartOf = (locale) => {
-    try {
-        const tag = new Intl.Locale(locale);
-        const first = tag.getWeekInfo?.().firstDay ?? tag.weekInfo?.firstDay;
-        return first === undefined ? 0 : first % 7;
-    }
-    catch {
-        return 0;
-    }
-};
-const monthOf = (date) => `${date.getUTCFullYear()}-${String(date.getUTCMonth() + 1).padStart(2, '0')}`;
-const addDays = (date, days) => new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate() + days));
-const sameMonth = (left, right) => left.getUTCFullYear() === right.getUTCFullYear() && left.getUTCMonth() === right.getUTCMonth();
-const addMonths = (date, months) => {
-    const target = new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth() + months, 1));
-    const last = new Date(Date.UTC(target.getUTCFullYear(), target.getUTCMonth() + 1, 0)).getUTCDate();
-    return new Date(Date.UTC(target.getUTCFullYear(), target.getUTCMonth(), Math.min(date.getUTCDate(), last)));
-};
 let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinControllerValue(HelixFormElement) {
     constructor() {
         super(...arguments);
@@ -62,11 +34,20 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinControl
         this.min = '';
         this.monthState = undefined;
         this.months = 1;
+        this.monthViewLabel = '{heading}. Choose a month';
         this.nextLabel = 'Next month';
+        this.nextYearLabel = 'Next year';
+        this.nextYearsLabel = 'Later years';
         this.previousLabel = 'Previous month';
+        this.previousYearLabel = 'Previous year';
+        this.previousYearsLabel = 'Earlier years';
         this.focused = '';
         this.choosing = false;
         this.handleKeydown = (event) => {
+            if (this.view !== 'day') {
+                this.handlePeriodKeydown(event);
+                return;
+            }
             if (!KEYS.has(event.key) || this.isDisabled) {
                 return;
             }
@@ -101,9 +82,27 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinControl
             }
             event.preventDefault();
         };
+        this.pageYear = undefined;
+        this.periodFocus = undefined;
+        this.handleHeading = () => {
+            if (this.isDisabled) {
+                return;
+            }
+            if (this.view === 'day') {
+                this.pageYear = this.shown.getUTCFullYear();
+                this.periodFocus = this.shown.getUTCMonth();
+                this.zoom('month');
+            }
+            else if (this.view === 'month' && this.maxView === 'year') {
+                this.periodFocus = this.periodYear;
+                this.zoom('year');
+            }
+        };
         this.readOnly = false;
         this.required = false;
         this.step = 1;
+        this.view = 'day';
+        this.yearViewLabel = '{heading}. Choose a year';
     }
     get month() {
         return this.monthState ?? (this.defaultMonth || fromDate(this.derivedMonth).slice(0, 7));
@@ -170,18 +169,7 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinControl
         if (this.max !== '' && iso > this.max) {
             return true;
         }
-        if (writtenList(this.disableDays).includes(String(date.getUTCDay()))) {
-            return true;
-        }
-        const step = Math.max(1, Math.floor(this.step) || 1);
-        if (step > 1) {
-            const base = this.min === '' ? 0 : (asDate(this.min)?.getTime() ?? 0);
-            const days = Math.round((date.getTime() - base) / 86_400_000);
-            if (days % step !== 0) {
-                return true;
-            }
-        }
-        return writtenList(this.disableDates).includes(iso);
+        return barredBy(date, this) !== null;
     }
     clamp(date) {
         const iso = fromDate(date);
@@ -252,8 +240,93 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinControl
         this.choosing = true;
         this.requestValue(next.join(','));
     }
+    get periodYear() {
+        return this.pageYear ?? this.shown.getUTCFullYear();
+    }
+    get periodStop() {
+        if (this.periodFocus !== undefined) {
+            return this.periodFocus;
+        }
+        return this.view === 'year' ? this.periodYear : this.shown.getUTCMonth();
+    }
+    monthOut(first) {
+        return monthOut(first, this.min, this.max);
+    }
+    yearOut(year) {
+        return yearOut(year, this.min, this.max);
+    }
+    zoom(view) {
+        this.view = view;
+        void this.updateComplete.then(() => this.focus());
+    }
+    choosePeriod(at) {
+        if (this.isDisabled) {
+            return;
+        }
+        if (this.view === 'year') {
+            if (this.yearOut(at)) {
+                return;
+            }
+            this.pageYear = at;
+            this.periodFocus = at === this.shown.getUTCFullYear() ? this.shown.getUTCMonth() : 0;
+            this.zoom('month');
+            return;
+        }
+        const first = new Date(Date.UTC(this.periodYear, at, 1));
+        if (this.monthOut(first)) {
+            return;
+        }
+        this.show(first);
+        if (this.month !== monthOf(first)) {
+            return;
+        }
+        this.pageYear = undefined;
+        this.periodFocus = undefined;
+        this.focused = '';
+        this.zoom('day');
+    }
+    turnPage(direction) {
+        const by = this.view === 'year' ? YEARS_SHOWN : 1;
+        this.pageYear = this.periodYear + direction * by;
+        if (this.view === 'year') {
+            this.periodFocus = this.periodStop + direction * by;
+        }
+    }
+    handlePeriodKeydown(event) {
+        if (this.isDisabled) {
+            return;
+        }
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            event.stopPropagation();
+            this.pageYear = undefined;
+            this.periodFocus = undefined;
+            this.zoom('day');
+            return;
+        }
+        const grid = this.partNamed('periods');
+        if (!grid || !event.composedPath().includes(grid)) {
+            return;
+        }
+        const stop = this.periodStop;
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            this.choosePeriod(stop);
+            return;
+        }
+        const moved = periodKey(this.view === 'year' ? 'year' : 'month', stop, this.periodYear, event.key, inlineStep(this, event.key));
+        if (moved === null) {
+            return;
+        }
+        event.preventDefault();
+        this.periodFocus = moved.focus;
+        this.pageYear = moved.pageYear;
+        void this.updateComplete.then(() => this.focus());
+    }
     focus(options) {
-        this.renderRoot?.querySelector('[part~="cell"][tabindex="0"]')?.focus(options);
+        this.renderRoot
+            ?.querySelector('[part~="cell"][tabindex="0"], [part~="period"][tabindex="0"]')
+            ?.focus(options);
     }
     connectedCallback() {
         super.connectedCallback();
@@ -291,12 +364,11 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinControl
             ];
         }
         const date = asDate(iso);
-        if (!date || !this.barred(date)) {
+        const why = date ? barredBy(date, this) : null;
+        if (why === null) {
             return undefined;
         }
-        const listed = writtenList(this.disableDates).includes(iso) ||
-            writtenList(this.disableDays).includes(String(date.getUTCDay()));
-        return listed
+        return why === 'listed'
             ? ['badInput', this.unavailableMessage || 'Choose a date that is available.']
             : ['stepMismatch', this.stepMismatchMessage || 'Choose one of the dates the calendar offers.'];
     }
@@ -363,7 +435,9 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinControl
             heading: new Intl.DateTimeFormat(locale, { month: 'long', timeZone: 'UTC', year: 'numeric' }),
             locale: this.locale,
             long: new Intl.DateTimeFormat(locale, { dateStyle: 'long', timeZone: 'UTC' }),
+            monthName: new Intl.DateTimeFormat(locale, { month: 'short', timeZone: 'UTC' }),
             weekday: new Intl.DateTimeFormat(locale, { timeZone: 'UTC', weekday: 'short' }),
+            year: new Intl.DateTimeFormat(locale, { timeZone: 'UTC', year: 'numeric' }),
         };
         this.cachedFormats = built;
         return built;
@@ -404,7 +478,9 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinControl
               </button>`
             : nothing}
         ${''}
-        <span part="heading" aria-live="polite">${heading.format(month)}</span>
+        <span part="heading" aria-live="polite"
+          >${this.renderHeadingText(heading.format(month), this.monthViewLabel)}</span
+        >
         ${last
             ? html `<button
                 part="next"
@@ -452,7 +528,7 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinControl
                 @click=${outside ? nothing : () => this.select(date)}
                 ><span
                   part="day${!outside && selected && !middle ? ' day-selected' : ''}${iso === today ? ' day-today' : ''}${outside ? ' day-outside' : ''}${disabled ? ' day-disabled' : ''}"
-                  >${date.getUTCDate()}</span
+                  >${this.renderDay(date, outside)}</span
                 ></span
               >`;
         })}
@@ -460,7 +536,86 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinControl
       </div>
     </div>`;
     }
+    renderDay(date, outside) {
+        return this.dayContent && !outside ? this.dayContent(fromDate(date)) : date.getUTCDate();
+    }
+    renderHeadingText(text, label) {
+        const steps = this.maxView !== undefined &&
+            (this.view === 'day' || (this.view === 'month' && this.maxView === 'year'));
+        if (!steps) {
+            return text;
+        }
+        return html `<button
+      part="heading-button"
+      type="button"
+      aria-label=${fillTemplate(label, { heading: text })}
+      ?disabled=${this.isDisabled}
+      @click=${this.handleHeading}
+    >${text}</button>`;
+    }
+    renderPeriods() {
+        const { monthName, year: yearName } = this.formats;
+        const years = this.view === 'year';
+        const page = years ? yearPageOf(this.periodYear) : this.periodYear;
+        const heading = years
+            ? `${yearName.format(new Date(Date.UTC(page, 0, 1)))} – ${yearName.format(new Date(Date.UTC(page + YEARS_SHOWN - 1, 0, 1)))}`
+            : yearName.format(new Date(Date.UTC(page, 0, 1)));
+        const stop = this.periodStop;
+        const cells = periodCells({
+            max: this.max,
+            min: this.min,
+            page: this.periodYear,
+            shown: this.shown,
+            today: localToday(),
+            view: years ? 'year' : 'month',
+        }).map(({ at, chosen, current, first, out }) => {
+            const words = years ? yearName.format(first) : monthName.format(first);
+            return html `<span
+        part="period${chosen ? ' period-selected' : ''}${current ? ' period-current' : ''}${out ? ' period-disabled' : ''}"
+        role="gridcell"
+        aria-current=${current ? 'date' : nothing}
+        aria-disabled=${out ? 'true' : nothing}
+        aria-label=${years ? words : `${words} ${yearName.format(first)}`}
+        aria-selected=${chosen ? 'true' : nothing}
+        tabindex=${at === stop && !this.isDisabled ? '0' : '-1'}
+        @click=${() => this.choosePeriod(at)}
+        >${words}</span
+      >`;
+        });
+        const rows = [0, 3, 6, 9].map((from) => html `<div part="period-row" role="row">${cells.slice(from, from + 3)}</div>`);
+        return html `<div part="month">
+      <div part="header">
+        <button
+          part="previous"
+          type="button"
+          aria-label=${years ? this.previousYearsLabel : this.previousYearLabel}
+          ?disabled=${this.isDisabled || this.yearOut(page - 1)}
+          @click=${() => this.turnPage(-1)}
+        >
+          ${this.renderPreviousMark()}
+        </button>
+        <span part="heading" aria-live="polite"
+          >${this.renderHeadingText(heading, this.yearViewLabel)}</span
+        >
+        <button
+          part="next"
+          type="button"
+          aria-label=${years ? this.nextYearsLabel : this.nextYearLabel}
+          ?disabled=${this.isDisabled || this.yearOut(years ? page + YEARS_SHOWN : page + 1)}
+          @click=${() => this.turnPage(1)}
+        >
+          ${this.renderNextMark()}
+        </button>
+      </div>
+      <div part="periods" role="grid" aria-label=${heading}>${rows}</div>
+    </div>`;
+    }
     render() {
+        if (this.view !== 'day') {
+            return html `<div part="months" style="--date-picker-column-count: 1">
+        ${this.renderPeriods()}
+      </div>`;
+        }
         const shown = this.shown;
         const count = this.monthCount;
         return html `<div part="months" style="--date-picker-column-count: ${Math.min(count, 2)}">
@@ -483,6 +638,9 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinControl
 __decorate([
     property({ attribute: 'bad-input-message' })
 ], HelixHeadlessDatePicker.prototype, "badInputMessage", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessDatePicker.prototype, "dayContent", void 0);
 __decorate([
     property({ attribute: 'default-month' })
 ], HelixHeadlessDatePicker.prototype, "defaultMonth", void 0);
@@ -498,6 +656,9 @@ __decorate([
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessDatePicker.prototype, "invalid", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessDatePicker.prototype, "isDateUnavailable", void 0);
 __decorate([
     property()
 ], HelixHeadlessDatePicker.prototype, "label", void 0);
@@ -507,6 +668,9 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessDatePicker.prototype, "max", void 0);
+__decorate([
+    property({ attribute: 'max-view' })
+], HelixHeadlessDatePicker.prototype, "maxView", void 0);
 __decorate([
     property()
 ], HelixHeadlessDatePicker.prototype, "min", void 0);
@@ -519,18 +683,39 @@ __decorate([
 __decorate([
     property({ type: Number })
 ], HelixHeadlessDatePicker.prototype, "months", void 0);
+__decorate([
+    property({ attribute: 'month-view-label' })
+], HelixHeadlessDatePicker.prototype, "monthViewLabel", void 0);
 __decorate([
     property({ attribute: 'next-label' })
 ], HelixHeadlessDatePicker.prototype, "nextLabel", void 0);
+__decorate([
+    property({ attribute: 'next-year-label' })
+], HelixHeadlessDatePicker.prototype, "nextYearLabel", void 0);
+__decorate([
+    property({ attribute: 'next-years-label' })
+], HelixHeadlessDatePicker.prototype, "nextYearsLabel", void 0);
 __decorate([
     property({ attribute: 'previous-label' })
 ], HelixHeadlessDatePicker.prototype, "previousLabel", void 0);
+__decorate([
+    property({ attribute: 'previous-year-label' })
+], HelixHeadlessDatePicker.prototype, "previousYearLabel", void 0);
+__decorate([
+    property({ attribute: 'previous-years-label' })
+], HelixHeadlessDatePicker.prototype, "previousYearsLabel", void 0);
 __decorate([
     property({ attribute: 'range-overflow-message' })
 ], HelixHeadlessDatePicker.prototype, "rangeOverflowMessage", void 0);
 __decorate([
     state()
 ], HelixHeadlessDatePicker.prototype, "focused", void 0);
+__decorate([
+    state()
+], HelixHeadlessDatePicker.prototype, "pageYear", void 0);
+__decorate([
+    state()
+], HelixHeadlessDatePicker.prototype, "periodFocus", void 0);
 __decorate([
     property({ attribute: 'range-underflow-message' })
 ], HelixHeadlessDatePicker.prototype, "rangeUnderflowMessage", void 0);
@@ -552,6 +737,12 @@ __decorate([
 __decorate([
     property({ attribute: 'value-missing-message' })
 ], HelixHeadlessDatePicker.prototype, "valueMissingMessage", void 0);
+__decorate([
+    property()
+], HelixHeadlessDatePicker.prototype, "view", void 0);
+__decorate([
+    property({ attribute: 'year-view-label' })
+], HelixHeadlessDatePicker.prototype, "yearViewLabel", void 0);
 HelixHeadlessDatePicker = __decorate([
     customElement('helix-headless-date-picker')
 ], HelixHeadlessDatePicker);

package/dist/dialog/description.d.ts

@@ -0,0 +1,9 @@
+/**
+ * The elements at the start of a slot that hold words and no control, up to the
+ * first one that is or holds a control.
+ *
+ * What a dialog is described by. A question above a form describes the dialog,
+ * and the form does not: a description that read out every field label would
+ * repeat what a reader hears again as they reach each field.
+ */
+export declare const wordsIn: (slot: HTMLSlotElement | null) => Element[];

package/dist/dialog/description.js

@@ -0,0 +1,14 @@
+const CONTROL = 'a[href], audio[controls], button, details, form, iframe, input, select, textarea, video[controls], [contenteditable], [tabindex]';
+const isControl = (element) => element.localName.includes('-') || element.matches(CONTROL);
+export const wordsIn = (slot) => {
+    const words = [];
+    for (const one of slot?.assignedElements({ flatten: true }) ?? []) {
+        if (isControl(one) || [...one.querySelectorAll('*')].some(isControl)) {
+            break;
+        }
+        if ((one.textContent ?? '').trim() !== '') {
+            words.push(one);
+        }
+    }
+    return words;
+};

package/dist/dialog/root/dialog-root.d.ts

@@ -1,4 +1,4 @@
-import { AriaForwardController, CommandController, HelixElement } from '@fusion.dev/helix-core';
+import { AriaForwardController, CommandController, HelixElement, OpenPhaseController } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
 declare const HelixHeadlessDialog_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerOpenInterface) & typeof HelixElement;
 /**
@@ -23,6 +23,16 @@ declare const HelixHeadlessDialog_base: (new (...args: any[]) => import("@fusion
  * the `header` slot, or the elements an `aria-labelledby` on the host names.
  * While it is open, the page behind it does not scroll.
  *
+ * The dialog is described by the words at the start of its body: the elements
+ * in the default slot before the first one that is or holds a control. A
+ * question above a form describes the dialog, and the form does not. An
+ * `aria-describedby` on the host replaces it.
+ *
+ * Set `alert` for a dialog that interrupts to ask for an answer, such as a
+ * confirmation before a deletion. It is an `alertdialog`, which a screen reader
+ * announces with its description as it opens. Set `dismissible` to draw a
+ * close control, labeled by `dismiss-label`.
+ *
  * @since 0.1.0
  * @status stable
  * @category overlays
@@ -30,6 +40,7 @@ declare const HelixHeadlessDialog_base: (new (...args: any[]) => import("@fusion
  * @documentation https://fusion.dev/helix/components/dialog
  *
  * @slot - The dialog's content.
+ * @slot dismiss-icon - Replaces the glyph inside the close control.
  * @slot footer - The dialog's actions.
  * @slot header - The title, and anything beside it.
  * @slot icon - An icon above the title, for a warning dialog.
@@ -39,11 +50,30 @@ declare const HelixHeadlessDialog_base: (new (...args: any[]) => import("@fusion
  * @event {HelixBeforeOpenEvent} helix-before-open - Fired before it opens, and cancelable.
  * @event {ToggleEvent} toggle - Sent when the dialog opens or closes, with `newState` and `oldState`.
  *
+ * @csspart body - The slot the content is in. It draws no box until you give it one.
  * @csspart dialog - The native dialog element.
+ * @csspart dismiss - The close control, drawn when the dialog is `dismissible`.
+ * @csspart dismiss-mark - The glyph on the close control, where none is slotted.
+ * @csspart footer - The slot the actions are in. It draws no box until you give it one.
+ * @csspart header - The slot the title is in. It draws no box until you give it one.
  *
+ * @cssstate entering - From the moment the dialog opens until its entrance has finished.
+ * @cssstate exiting - From the moment the dialog closes until its exit has finished.
  * @cssstate open - While the dialog is open.
  */
 export declare class HelixHeadlessDialog extends HelixHeadlessDialog_base {
+    /**
+     * Makes the dialog an alert dialog, for a message that interrupts to ask for
+     * an answer, such as a confirmation before something is deleted.
+     *
+     * The `<dialog>` takes `role="alertdialog"`, so a screen reader announces the
+     * dialog and its description as it opens. Everything else stays the same:
+     * the dialog is modal, Escape asks to close it, and `persistent` still
+     * refuses that.
+     *
+     * Not reflected, because no stylesheet selects on it.
+     */
+    alert: boolean;
     /**
      * Which close requests the browser handles on its own.
      *
@@ -57,11 +87,24 @@ export declare class HelixHeadlessDialog extends HelixHeadlessDialog_base {
      * that a resting value is an attribute's absence.
      */
     closedBy?: 'any' | 'closerequest' | 'none';
+    /**
+     * Draws a control that closes the dialog, in the corner where the title is.
+     *
+     * Pressing it is `close()`, so it sends `helix-before-close` like every other
+     * way out, and `persistent` does not disable it.
+     */
+    dismissible: boolean;
+    /**
+     * The close control's accessible name. Translate it with the rest of your
+     * interface.
+     */
+    dismissLabel: string;
     /**
      * Accessible name for the dialog. When it is empty, the heading in the
      * `header` slot names the dialog.
      */
     label: string;
+    protected readonly phases: OpenPhaseController;
     protected readonly aria: AriaForwardController;
     protected readonly commands: CommandController;
     /**
@@ -147,6 +190,19 @@ export declare class HelixHeadlessDialog extends HelixHeadlessDialog_base {
      * either. A browser without element reflection keeps the fallback name.
      */
     private nameByHeader;
+    /** Whether the body's words are what currently describe the dialog. */
+    private describedByBody;
+    /**
+     * Describes the dialog by the words at the start of its body, where nothing
+     * else describes it.
+     *
+     * An element reference, for the reason `nameByHeader` gives. Only the leading
+     * run of elements that hold no control, so a dialog asking a question above a
+     * form is described by the question: a description that read out every field
+     * label would repeat what a reader hears again as they reach each field. An
+     * `aria-describedby` on the host comes first.
+     */
+    private describeByBody;
     protected willUpdate(changed: PropertyValues): void;
     connectedCallback(): void;
     disconnectedCallback(): void;
@@ -203,6 +259,13 @@ export declare class HelixHeadlessDialog extends HelixHeadlessDialog_base {
     private refuse;
     /** Bounds the refusal listener to one, whether or not it ever fires. */
     private refusal;
+    /**
+     * The glyph on the close control, behind a seam.
+     *
+     * Slot fallback, so a consumer replaces it by slotting, and a method, so a
+     * tier above replaces it by overriding. The same pair `Toast.Item` draws.
+     */
+    protected renderDismissIcon(): TemplateResult;
     protected render(): TemplateResult;
 }
 declare global {