@fusion.dev/helix-headless 0.143.0 → 0.145.0

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

@@ -1,4 +1,4 @@
-import { HelixFormElement } from '@fusion.dev/helix-core';
+import { type CalendarView, HelixFormElement } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
 declare const HelixHeadlessDatePicker_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerValueInterface) & typeof HelixFormElement;
 /**
@@ -23,6 +23,14 @@ declare const HelixHeadlessDatePicker_base: (new (...args: any[]) => import("@fu
  * marks the dates between them, and `multiple` toggles each date. All three
  * read and write the same comma-separated `value`.
  *
+ * `max-view` makes the heading a button that steps back to the months of the
+ * year, and with `year` to a page of years, as Zag's date picker does. The
+ * arrows, Home, End and the page keys move there, Enter or a press chooses, and
+ * Escape goes back to the days.
+ *
+ * `isDateUnavailable` and `dayContent` are properties for a script: a rule
+ * that bars dates, and what each day shows in place of its number.
+ *
  * The month heading is a live region, so a screen reader hears the new month
  * when Previous or Next is pressed. Neither moves past `min` or `max`, and the
  * keys stop at them too. A value outside the bounds, on a barred day, or off
@@ -55,10 +63,17 @@ declare const HelixHeadlessDatePicker_base: (new (...args: any[]) => import("@fu
  * @csspart grid - The grid of days.
  * @csspart header - The month name and its controls.
  * @csspart heading - The month and year being shown.
+ * @csspart heading-button - The heading as a button that shows the months or the years, where `max-view` is set.
  * @csspart month - One month, its header and its grid.
  * @csspart months - The run of months.
  * @csspart next - The control that moves to the next month.
  * @csspart next-mark - The glyph on the next month control, where none is slotted.
+ * @csspart period - One month in the months view, or one year in the years view.
+ * @csspart period-current - This month or this year, beside `period`.
+ * @csspart period-disabled - A month or a year wholly outside `min` and `max`, beside `period`.
+ * @csspart period-row - One row of three months or years.
+ * @csspart period-selected - The month or the year on show, beside `period`.
+ * @csspart periods - The grid of months or years.
  * @csspart previous - The control that moves to the previous month.
  * @csspart previous-mark - The glyph on the previous month control, where none is slotted.
  * @csspart week - One row of days.
@@ -75,6 +90,18 @@ export declare class HelixHeadlessDatePicker extends HelixHeadlessDatePicker_bas
      * speaks it. Absent is the control's own sentence, in English.
      */
     badInputMessage?: string;
+    /**
+     * What each day shows, in place of its number: a function given the date as
+     * `YYYY-MM-DD` that returns text, an element or a Lit template.
+     *
+     * For a price or a dot under the number, as React Aria's `CalendarCell`
+     * takes children. The cell is still named by its whole date, so what you
+     * draw here is for the eye; say anything a reader must hear in the date's
+     * description elsewhere. Return the day's number with it where it should
+     * still show. A property only, there being no way to write a function in
+     * markup.
+     */
+    dayContent?: ((date: string) => unknown) | undefined;
     /**
      * The month to open on when `month` is not set.
      */
@@ -100,6 +127,16 @@ export declare class HelixHeadlessDatePicker extends HelixHeadlessDatePicker_bas
      * Whether the current selection fails validation.
      */
     invalid: boolean;
+    /**
+     * A rule for which dates cannot be chosen: a function given the date as
+     * `YYYY-MM-DD` that returns `true` to bar it.
+     *
+     * For what a list cannot say, such as the second Tuesday of each month or
+     * the days a server has fully booked. It bars a date as `disable-dates`
+     * does, in the grid and in validation. A property only, as React Aria's
+     * `isDateUnavailable` is a prop.
+     */
+    isDateUnavailable?: ((date: string) => boolean) | undefined;
     /**
      * Accessible name for the grid.
      */
@@ -114,6 +151,17 @@ export declare class HelixHeadlessDatePicker extends HelixHeadlessDatePicker_bas
      * Latest selectable date, as `YYYY-MM-DD`.
      */
     max: string;
+    /**
+     * How far the heading lets a reader step back from the days: `month` to a
+     * year's months, or `year` to a page of years and then its months.
+     *
+     * Absent, the heading is text and the calendar moves a month at a time. Set,
+     * the heading is a button that shows the months, and from there the years,
+     * so a birth date forty years back is three presses rather than four hundred
+     * and eighty. Choosing a year shows its months, and choosing a month shows
+     * its days.
+     */
+    maxView?: 'month' | 'year';
     /**
      * Earliest selectable date, as `YYYY-MM-DD`.
      */
@@ -138,10 +186,23 @@ export declare class HelixHeadlessDatePicker extends HelixHeadlessDatePicker_bas
      * How many months to show, side by side.
      */
     months: number;
+    /**
+     * The name of the heading where it shows the months, with `{heading}`
+     * filled in as the month on show.
+     */
+    monthViewLabel: string;
     /**
      * Accessible name for the control that pages forward.
      */
     nextLabel: string;
+    /**
+     * Accessible name for the control that moves forward a year, in the months.
+     */
+    nextYearLabel: string;
+    /**
+     * Accessible name for the control that moves forward a page, in the years.
+     */
+    nextYearsLabel: string;
     /**
      * Accessible name for the control that pages back.
      *
@@ -151,6 +212,14 @@ export declare class HelixHeadlessDatePicker extends HelixHeadlessDatePicker_bas
      * it.
      */
     previousLabel: string;
+    /**
+     * Accessible name for the control that moves back a year, in the months.
+     */
+    previousYearLabel: string;
+    /**
+     * Accessible name for the control that moves back a page, in the years.
+     */
+    previousYearsLabel: string;
     /**
      * The validation message for a date after `max`. `{max}` is replaced with
      * `max`, written as a date in `locale`.
@@ -238,6 +307,49 @@ export declare class HelixHeadlessDatePicker extends HelixHeadlessDatePicker_bas
      */
     private select;
     private readonly handleKeydown;
+    /**
+     * The year the months view shows, and the year the years view is on.
+     *
+     * Its own state rather than `month`, because looking through the months of
+     * another year chooses nothing and moves nothing on show: the month changes,
+     * and `helix-navigate` is sent, only once a month is chosen.
+     */
+    private pageYear;
+    /**
+     * Where the tab stop is among the months, as their index, or among the
+     * years, as the year.
+     */
+    private periodFocus;
+    /** The year on show in the months and the years. */
+    private get periodYear();
+    /** The index or the year the tab stop sits on in the months or the years. */
+    private get periodStop();
+    /** Whether a month, as its first day, lies wholly outside `min` and `max`. */
+    private monthOut;
+    /** Whether a year lies wholly outside `min` and `max`. */
+    private yearOut;
+    /** Changes the view, and takes focus to its tab stop once it has drawn. */
+    private zoom;
+    /**
+     * The heading's press: from the days to the months, and from the months to
+     * the years where `max-view` allows.
+     */
+    private readonly handleHeading;
+    /**
+     * Takes a month or a year: a year shows its months, and a month shows its
+     * days, moving the calendar there with `helix-navigate` first.
+     */
+    private choosePeriod;
+    /** Moves the months a year, or the years a page. */
+    private turnPage;
+    /**
+     * The keys in the months and the years: the arrows, Home, End and the page
+     * keys move, Enter and Space choose, and Escape goes back to the days.
+     *
+     * Escape is stopped here, so a Date Input around this calendar keeps its
+     * panel open: a reader backing out of the years has not asked to leave.
+     */
+    private handlePeriodKeydown;
     /**
      * Moves focus to the grid's tab stop: the selected day, or the day last
      * moved to, or the first of the month.
@@ -301,6 +413,18 @@ export declare class HelixHeadlessDatePicker extends HelixHeadlessDatePicker_bas
      * The validation message for a required date picker with no date chosen.
      */
     valueMissingMessage?: string;
+    /**
+     * What the calendar shows: the days of a month, the months of a year, or a
+     * page of years. `day` unless `max-view` lets a reader step back.
+     *
+     * Not reflected, being state. Set it to open on the months or the years.
+     */
+    view: CalendarView;
+    /**
+     * The name of the heading where it shows a page of years, with `{heading}`
+     * filled in as the year on show.
+     */
+    yearViewLabel: string;
     /** A date written for a message, in `locale`. */
     private spoken;
     /**
@@ -390,6 +514,26 @@ export declare class HelixHeadlessDatePicker extends HelixHeadlessDatePicker_bas
     protected renderPreviousMark(): TemplateResult;
     protected renderNextMark(): TemplateResult;
     private renderMonth;
+    /**
+     * What a day shows: its number, or what `day-content` returns for it.
+     *
+     * A seam, so a tier above can draw a day its own way, and filler days from a
+     * neighboring month keep their number, being only there to square the grid.
+     */
+    protected renderDay(date: Date, outside: boolean): unknown;
+    /**
+     * The heading's words, as a button that steps back to the months or the
+     * years where `max-view` allows, and as text everywhere else.
+     */
+    private renderHeadingText;
+    /**
+     * The months of a year, or a page of years, in rows of three, with the
+     * controls that turn the page.
+     *
+     * A grid of its own, `periods`, so a stylesheet tells it from the days, and
+     * one tab stop in it, the month or year the keys are on.
+     */
+    private renderPeriods;
     protected render(): TemplateResult;
     /**
      * The value as a `Date`, at midnight UTC, or `null` while there is no date.

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/description-list/item/description-list-item.d.ts

@@ -1,5 +1,5 @@
 import { HelixElement } from '@fusion.dev/helix-core';
-import { type TemplateResult } from 'lit';
+import { type PropertyValues, type TemplateResult } from 'lit';
 /**
  * @summary One label and its value.
  *
@@ -12,11 +12,17 @@ import { type TemplateResult } from 'lit';
  * such as a tag, an avatar, or a link. The label is almost always text, so it
  * is also a property.
  *
+ * **For a label with several values, write each value as a `<dd>`**, such as
+ * the authors of a paper. The item then puts your `<dd>` elements after its
+ * `<dt>` in place of its own, so a screen reader hears one term and each of
+ * its descriptions, as in a native `<dl>`. A server cannot see your elements,
+ * so the served item wraps them in its own `<dd>` until it runs.
+ *
  * @since 0.1.0
  * @status stable
  * @documentation https://fusion.dev/helix/components/description-list
  *
- * @slot - The value.
+ * @slot - The value, or several `<dd>` elements for several values.
  * @slot label - The label, when it is more than text. Falls back to `label`.
  *
  * @csspart label - The `<dt>`, holding the label.
@@ -31,7 +37,16 @@ export declare class HelixHeadlessDescriptionListItem extends HelixElement {
      * that varies and is often more than text.
      */
     label: string;
+    /**
+     * Whether the values are the consumer's own `<dd>` elements, which the item
+     * then does not wrap. Unknown on a server and while hydrating, where the
+     * item draws its own.
+     */
+    private get several();
+    protected firstUpdated(changed: PropertyValues): void;
     protected render(): TemplateResult;
+    /** A value arriving or leaving can change whether the item wraps them. */
+    private readonly handleSlotChange;
 }
 declare global {
     interface HTMLElementTagNameMap {