@fusion.dev/helix-headless 0.142.1 → 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, dateAsValue as fromDate, HelixFormElement, HelixNavigateEvent, hostAria, inlineStep, MixinControllerValue, reportValues, requestChange, } 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,30 +21,12 @@ 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 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);
         this.defaultMonth = '';
         this.disableDates = '';
         this.disableDays = '';
-        this.firstDayOfWeek = 0;
         this.invalid = false;
         this.label = 'Date Picker';
         this.locale = '';
@@ -52,12 +34,21 @@ 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.readOnly = false;
+        this.previousYearLabel = 'Previous year';
+        this.previousYearsLabel = 'Earlier years';
         this.focused = '';
+        this.choosing = false;
         this.handleKeydown = (event) => {
-            if (!KEYS.has(event.key) || this.disabled) {
+            if (this.view !== 'day') {
+                this.handlePeriodKeydown(event);
+                return;
+            }
+            if (!KEYS.has(event.key) || this.isDisabled) {
                 return;
             }
             const path = event.composedPath();
@@ -80,10 +71,10 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinControl
                 this.moveTo(addDays(from, 7));
             }
             else if (event.key === 'Home') {
-                this.moveTo(addDays(from, -((from.getUTCDay() - this.firstDayOfWeek + 7) % 7)));
+                this.moveTo(addDays(from, -((from.getUTCDay() - this.weekStart + 7) % 7)));
             }
             else if (event.key === 'End') {
-                this.moveTo(addDays(from, 6 - ((from.getUTCDay() - this.firstDayOfWeek + 7) % 7)));
+                this.moveTo(addDays(from, 6 - ((from.getUTCDay() - this.weekStart + 7) % 7)));
             }
             else {
                 const step = event.key === 'PageUp' ? -1 : 1;
@@ -91,8 +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));
@@ -105,6 +115,12 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinControl
     get selected() {
         return list(this.value);
     }
+    get weekStart() {
+        if (this.firstDayOfWeek !== undefined && Number.isFinite(this.firstDayOfWeek)) {
+            return ((Math.floor(this.firstDayOfWeek) % 7) + 7) % 7;
+        }
+        return this.locale === '' ? 0 : weekStartOf(this.locale);
+    }
     get range() {
         const dates = this.selected;
         if (this.mode !== 'range' || dates.length < 2) {
@@ -141,7 +157,7 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinControl
         return shown;
     }
     weeksOf(month) {
-        const offset = (month.getUTCDay() - this.firstDayOfWeek + 7) % 7;
+        const offset = (month.getUTCDay() - this.weekStart + 7) % 7;
         const start = addDays(month, -offset);
         return Array.from({ length: 6 }, (_, week) => Array.from({ length: 7 }, (_, day) => addDays(start, week * 7 + day)));
     }
@@ -153,24 +169,32 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinControl
         if (this.max !== '' && iso > this.max) {
             return true;
         }
-        if (list(this.disableDays).includes(String(date.getUTCDay()))) {
-            return true;
+        return barredBy(date, this) !== null;
+    }
+    clamp(date) {
+        const iso = fromDate(date);
+        const min = asDate(this.min);
+        const max = asDate(this.max);
+        if (min && iso < this.min) {
+            return min;
         }
-        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;
-            }
+        if (max && iso > this.max) {
+            return max;
         }
-        return list(this.disableDates).includes(iso);
+        return date;
+    }
+    get atStart() {
+        return asDate(this.min) !== null && monthOf(addMonths(this.shown, -1)) < this.min.slice(0, 7);
+    }
+    get atEnd() {
+        return (asDate(this.max) !== null &&
+            monthOf(addMonths(this.shown, this.monthCount)) > this.max.slice(0, 7));
     }
     show(date) {
-        if (this.disabled) {
+        if (this.isDisabled) {
             return;
         }
-        const next = `${date.getUTCFullYear()}-${String(date.getUTCMonth() + 1).padStart(2, '0')}`;
+        const next = monthOf(date);
         if (next === this.month) {
             return;
         }
@@ -185,7 +209,8 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinControl
             next,
         });
     }
-    moveTo(date) {
+    moveTo(wanted) {
+        const date = this.clamp(wanted);
         this.focused = fromDate(date);
         this.show(date);
         this.updateComplete.then(() => {
@@ -193,7 +218,7 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinControl
         });
     }
     select(date) {
-        if (this.disabled) {
+        if (this.isDisabled) {
             return;
         }
         if (this.barred(date)) {
@@ -212,8 +237,97 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinControl
             next = [iso];
         }
         this.focused = iso;
+        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"], [part~="period"][tabindex="0"]')
+            ?.focus(options);
+    }
     connectedCallback() {
         super.connectedCallback();
         this.addEventListener('keydown', this.handleKeydown);
@@ -228,6 +342,36 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinControl
         }
         return super.requestValue(next);
     }
+    spoken(iso) {
+        const date = asDate(iso);
+        return date ? this.formats.long.format(date) : iso;
+    }
+    fault(iso) {
+        if (this.min !== '' && iso < this.min) {
+            return [
+                'rangeUnderflow',
+                fillTemplate(this.rangeUnderflowMessage || 'Choose a date on or after {min}.', {
+                    min: this.spoken(this.min),
+                }),
+            ];
+        }
+        if (this.max !== '' && iso > this.max) {
+            return [
+                'rangeOverflow',
+                fillTemplate(this.rangeOverflowMessage || 'Choose a date on or before {max}.', {
+                    max: this.spoken(this.max),
+                }),
+            ];
+        }
+        const date = asDate(iso);
+        const why = date ? barredBy(date, this) : null;
+        if (why === null) {
+            return undefined;
+        }
+        return why === 'listed'
+            ? ['badInput', this.unavailableMessage || 'Choose a date that is available.']
+            : ['stepMismatch', this.stepMismatchMessage || 'Choose one of the dates the calendar offers.'];
+    }
     reportRequired() {
         const anchor = this.partNamed('grid') ?? undefined;
         if (this.required && this.value === '') {
@@ -242,11 +386,27 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinControl
                     : 'Enter dates as YYYY-MM-DD, separated by commas.'), anchor);
             return;
         }
+        for (const one of held) {
+            const fault = this.fault(one);
+            if (fault) {
+                this.internals.setValidity({ [fault[0]]: true }, fault[1], anchor);
+                return;
+            }
+        }
         this.internals.setValidity({});
     }
     willUpdate(changed) {
         super.willUpdate(changed);
-        hostAria(this.internals, { label: this.label, role: 'group' });
+        if (changed.has('value') && !this.choosing) {
+            this.focused = '';
+        }
+        this.choosing = false;
+        const outside = this.label === 'Date Picker' ? [...(this.internals.labels ?? [])] : [];
+        hostAria(this.internals, {
+            label: this.label,
+            labelledBy: outside,
+            role: 'group',
+        });
         this.internals.ariaDisabled = this.isDisabled ? 'true' : null;
         this.internals.ariaInvalid = this.invalid ? 'true' : null;
         this.report();
@@ -256,7 +416,7 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinControl
         this.reportRequired();
     }
     report() {
-        if (this.disabled) {
+        if (this.isDisabled) {
             this.internals.setFormValue(null);
             return;
         }
@@ -274,7 +434,10 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinControl
             full: new Intl.DateTimeFormat(locale, { dateStyle: 'full', timeZone: 'UTC' }),
             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;
@@ -308,17 +471,22 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinControl
                 part="previous"
                 type="button"
                 aria-label=${this.previousLabel}
+                ?disabled=${this.isDisabled || this.atStart}
                 @click=${() => this.show(addMonths(this.shown, -1))}
               >
                 ${this.renderPreviousMark()}
               </button>`
             : nothing}
-        <span part="heading">${heading.format(month)}</span>
+        ${''}
+        <span part="heading" aria-live="polite"
+          >${this.renderHeadingText(heading.format(month), this.monthViewLabel)}</span
+        >
         ${last
             ? html `<button
                 part="next"
                 type="button"
                 aria-label=${this.nextLabel}
+                ?disabled=${this.isDisabled || this.atEnd}
                 @click=${() => this.show(addMonths(this.shown, 1))}
               >
                 ${this.renderNextMark()}
@@ -329,6 +497,7 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinControl
         part="grid"
         role="grid"
         aria-label=${heading.format(month)}
+        aria-readonly=${this.readOnly ? 'true' : nothing}
         data-unset=${this.value === '' ? '' : nothing}
       >
         <div part="week" role="row">
@@ -346,7 +515,7 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinControl
             return html `<span
                 part="cell${start ? ' cell-range-start' : ''}${middle ? ' cell-range-middle' : ''}${end ? ' cell-range-end' : ''}"
                 role="gridcell"
-                aria-disabled=${disabled ? 'true' : nothing}
+                aria-disabled=${disabled || outside ? 'true' : nothing}
                 aria-label=${full.format(date)}
                 aria-current=${iso === today ? 'date' : nothing}
                 aria-selected=${!outside && selected ? 'true' : nothing}
@@ -355,11 +524,11 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinControl
                 data-range-middle=${middle ? '' : nothing}
                 data-range-start=${start ? '' : nothing}
                 data-today=${iso === today ? '' : nothing}
-                tabindex=${!outside && iso === anchor ? '0' : '-1'}
+                tabindex=${!outside && iso === anchor && !this.isDisabled ? '0' : '-1'}
                 @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
               >`;
         })}
@@ -367,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)}">
@@ -390,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);
@@ -405,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);
@@ -414,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);
@@ -426,27 +683,66 @@ __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: 'readonly', reflect: true, type: Boolean })
-], HelixHeadlessDatePicker.prototype, "readOnly", void 0);
+    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);
+__decorate([
+    property({ attribute: 'readonly', reflect: true, type: Boolean })
+], HelixHeadlessDatePicker.prototype, "readOnly", void 0);
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessDatePicker.prototype, "required", void 0);
 __decorate([
     property({ type: Number })
 ], HelixHeadlessDatePicker.prototype, "step", void 0);
+__decorate([
+    property({ attribute: 'step-mismatch-message' })
+], HelixHeadlessDatePicker.prototype, "stepMismatchMessage", void 0);
+__decorate([
+    property({ attribute: 'unavailable-message' })
+], HelixHeadlessDatePicker.prototype, "unavailableMessage", void 0);
 __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;
+};