@fusion.dev/helix-headless 0.143.0 → 0.144.0

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

@@ -2,7 +2,7 @@ import { AriaForwardController, HelixFormElement } from '@fusion.dev/helix-core'
 import { type PropertyValues, type TemplateResult } from 'lit';
 import '../../date-picker/index.js';
 import '../../tag/index.js';
-declare const HelixHeadlessDateInput_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinPickerEditingInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinPickerFieldInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerOpenInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinTokensInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerValueInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinFieldInterface) & typeof HelixFormElement;
+declare const HelixHeadlessDateInput_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinSegmentedFieldInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinPickerEditingInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinPickerFieldInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerOpenInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinTokensInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerValueInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinFieldInterface) & typeof HelixFormElement;
 /**
  * @summary A date, typed or picked from a calendar.
  *
@@ -17,9 +17,15 @@ declare const HelixHeadlessDateInput_base: (new (...args: any[]) => import("@fus
  * when you leave the field, as a text field does. A date picked from the
  * calendar sends both.
  *
- * The trigger opens the calendar with focus on the selected day, and Escape
- * closes it and returns focus to the field. Focusing the field opens the
- * calendar too, and Tab out of the field closes it again.
+ * The trigger and ArrowDown open the calendar with focus on the selected day,
+ * Tab moves between the calendar's controls without leaving it, and Escape
+ * closes it and returns focus to the field. A press into the field opens the
+ * calendar too. Tab into the field opens nothing, and Tab out of the field
+ * closes the calendar.
+ *
+ * With `segmented`, the field is a row of segments in place of the text: a
+ * month, a day and a year in the order the locale writes them, each set with
+ * digits or the arrow keys. Alt+Down opens the calendar from a segment.
  *
  * @since 0.1.0
  * @status stable
@@ -42,14 +48,17 @@ declare const HelixHeadlessDateInput_base: (new (...args: any[]) => import("@fus
  *
  * @csspart control - The text input.
  * @csspart date - One held date, as a tag, in `multiple`.
+ * @csspart date-cell - The tag's grid cell, which a tag draws only inside a tag group.
  * @csspart date-dismiss - The remove button, when `dismissible`.
  * @csspart date-dismiss-mark - The icon on the remove button, shown when no icon is slotted.
  * @csspart date-label - The label, trimmed to its capitals and baseline.
+ * @csspart date-link - The tag's link around its label, which a tag draws only with `href`.
  * @csspart date-start - The category before the label.
  * @csspart feedback - The error message under the field.
  * @csspart field - The box that holds the text and the trigger.
  * @csspart hint - The help text under the field, shown while there is no error.
  * @csspart label - The label above the field.
+ * @csspart literal - The text the locale writes between two segments, such as a slash, in `segmented`.
  * @csspart picker - The date picker inside the panel.
  * @csspart picker-cell - One cell in a row of days. A range colors these cells.
  * @csspart picker-cell-range-end - The cell of a range's last day. Applied with `picker-cell`.
@@ -63,15 +72,25 @@ declare const HelixHeadlessDateInput_base: (new (...args: any[]) => import("@fus
  * @csspart picker-grid - The grid of days.
  * @csspart picker-header - The month name and its controls.
  * @csspart picker-heading - The month and year being shown.
+ * @csspart picker-heading-button - The calendar's heading as a button that shows the months or the years, where `max-view` is set.
  * @csspart picker-month - One month, with its header and its grid.
  * @csspart picker-months - The row of months.
  * @csspart picker-next - The control that moves to the next month.
  * @csspart picker-next-mark - The icon on the next month control.
+ * @csspart picker-period - One month or one year, in the calendar's months and years views.
+ * @csspart picker-period-current - This month or this year, beside `picker-period`.
+ * @csspart picker-period-disabled - A month or a year wholly outside `min` and `max`, beside `picker-period`.
+ * @csspart picker-period-row - One row of three months or years.
+ * @csspart picker-period-selected - The month or the year on show, beside `picker-period`.
+ * @csspart picker-periods - The grid of months or years.
  * @csspart picker-previous - The control that moves to the previous month.
  * @csspart picker-previous-mark - The icon on the previous month control.
  * @csspart picker-week - One row of days.
  * @csspart picker-weekday - A column header naming a day of the week.
  * @csspart rest - The count of dates beyond the ones shown. It is a `<button>` with `expandable` and a `<span>` without it.
+ * @csspart segment - One part of the date, a year, a month or a day, in `segmented`.
+ * @csspart segment-placeholder - A segment with nothing in it yet. Applied with `segment`.
+ * @csspart segments - The row of segments that holds the date, in `segmented`.
  * @csspart surface - The floating panel.
  * @csspart tags - The row the dates sit in.
  * @csspart trigger - The control that opens the calendar.
@@ -121,6 +140,12 @@ export declare class HelixHeadlessDateInput extends HelixHeadlessDateInput_base
      * submits and what `min` and `max` compare against.
      */
     dateStyle: 'full' | 'iso' | 'long' | 'medium' | 'short';
+    /**
+     * What each day in the calendar shows, in place of its number: a function
+     * given the date as `YYYY-MM-DD`. Handed to the calendar; see Date Picker's
+     * `dayContent`.
+     */
+    dayContent?: ((date: string) => unknown) | undefined;
     /**
      * Dates that cannot be chosen, as `YYYY-MM-DD`, separated by commas or
      * spaces.
@@ -139,6 +164,12 @@ export declare class HelixHeadlessDateInput extends HelixHeadlessDateInput_base
      * and is Sunday otherwise.
      */
     firstDayOfWeek?: number;
+    /**
+     * A rule for which dates cannot be chosen: a function given the date as
+     * `YYYY-MM-DD` that returns `true` to bar it. The calendar offers such a date
+     * as unavailable, and a typed one is invalid, as with `disable-dates`.
+     */
+    isDateUnavailable?: ((date: string) => boolean) | undefined;
     /**
      * The language tag for the names of months and days in the calendar.
      */
@@ -147,6 +178,11 @@ export declare class HelixHeadlessDateInput extends HelixHeadlessDateInput_base
      * The latest date that can be chosen, as `YYYY-MM-DD`.
      */
     max: string;
+    /**
+     * How far the calendar's heading steps back from the days: `month` or
+     * `year`. Handed to the calendar; see Date Picker's `max-view`.
+     */
+    maxView?: 'month' | 'year';
     /**
      * The earliest date that can be chosen, as `YYYY-MM-DD`.
      */
@@ -200,10 +236,23 @@ export declare class HelixHeadlessDateInput extends HelixHeadlessDateInput_base
      */
     protected placed(room: number | undefined): void;
     protected willUpdate(changed: PropertyValues): void;
+    /**
+     * The name of the calendar's heading where it shows the months, with
+     * `{heading}` filled in.
+     */
+    monthViewLabel: string;
     /**
      * The name of the calendar's control that moves to the next month.
      */
     nextLabel: string;
+    /**
+     * The name of the calendar's control that moves forward a year.
+     */
+    nextYearLabel: string;
+    /**
+     * The name of the calendar's control that moves forward a page of years.
+     */
+    nextYearsLabel: string;
     /**
      * The text the field shows before a date is entered.
      */
@@ -212,6 +261,14 @@ export declare class HelixHeadlessDateInput extends HelixHeadlessDateInput_base
      * The name of the calendar's control that moves to the previous month.
      */
     previousLabel: string;
+    /**
+     * The name of the calendar's control that moves back a year.
+     */
+    previousYearLabel: string;
+    /**
+     * The name of the calendar's control that moves back a page of years.
+     */
+    previousYearsLabel: string;
     /**
      * The message shown when a range holds more than two dates.
      *
@@ -264,6 +321,13 @@ export declare class HelixHeadlessDateInput extends HelixHeadlessDateInput_base
      * complete.
      */
     private get picked();
+    /**
+     * Segments hold one date, so `range` and `multiple` keep the line of text,
+     * whose separators and tags are how those modes write several.
+     */
+    protected get segmentable(): boolean;
+    protected get segmentedKind(): 'date';
+    protected get segmentLocale(): string;
     /** One date, written the way `dateStyle` asks for. */
     private written;
     protected get display(): string;
@@ -296,6 +360,11 @@ export declare class HelixHeadlessDateInput extends HelixHeadlessDateInput_base
      * The message shown when `disable-dates` or `disable-days` bars a date.
      */
     unavailableMessage?: string;
+    /**
+     * The name of the calendar's heading where it shows a page of years, with
+     * `{heading}` filled in.
+     */
+    yearViewLabel: string;
     /**
      * The calendar the field opens, behind a seam the styled tier can move.
      *

package/dist/date-input/root/date-input-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 { AriaForwardController, valueAsDate as asDate, customElement, fillTemplate, dateAsValue as fromDate, HelixFormElement, isDateValue, MixinControllerOpen, MixinControllerValue, MixinField, MixinPickerEditing, MixinPickerField, MixinTokens, writtenList, } from '@fusion.dev/helix-core';
+import { AriaForwardController, valueAsDate as asDate, barredBy, customElement, fillTemplate, dateAsValue as fromDate, HelixFormElement, isDateValue, MixinControllerOpen, MixinControllerValue, MixinField, MixinPickerEditing, MixinPickerField, MixinSegmentedField, MixinTokens, } from '@fusion.dev/helix-core';
 import { calendarBlank } from '@fusion.dev/helix-icons';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -17,11 +17,11 @@ const dates = (value) => value
     .split(',')
     .map((one) => one.trim())
     .filter(Boolean);
-let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinPickerEditing(MixinPickerField(MixinControllerOpen(MixinTokens(MixinControllerValue(MixinField(HelixFormElement)))))) {
+let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinSegmentedField(MixinPickerEditing(MixinPickerField(MixinControllerOpen(MixinTokens(MixinControllerValue(MixinField(HelixFormElement))))))) {
     constructor() {
         super(...arguments);
         this.aria = new AriaForwardController(this, {
-            target: () => this.partNamed('control'),
+            target: () => this.partNamed('control') ?? this.segmentGroup,
         });
         this.autocomplete = '';
         this.calendarLabel = 'Date Picker';
@@ -35,9 +35,14 @@ let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinPickerEdi
         this.months = 1;
         this.fitted = undefined;
         this.wide = undefined;
+        this.monthViewLabel = '{heading}. Choose a month';
         this.nextLabel = 'Next month';
+        this.nextYearLabel = 'Next year';
+        this.nextYearsLabel = 'Later years';
         this.placeholder = 'YYYY-MM-DD';
         this.previousLabel = 'Previous month';
+        this.previousYearLabel = 'Previous year';
+        this.previousYearsLabel = 'Earlier years';
         this.removeLabel = 'Remove {name}';
         this.step = 1;
         this.triggerLabel = 'Choose a date';
@@ -90,6 +95,7 @@ let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinPickerEdi
                 this.updateComplete.then(() => this.returnFocus());
             }
         };
+        this.yearViewLabel = '{heading}. Choose a year';
         this.handleIconChange = () => {
             this.requestUpdate();
         };
@@ -119,6 +125,15 @@ let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinPickerEdi
         const held = dates(this.value);
         return held.length > 0 && held.every(isDateValue) ? held.join(',') : '';
     }
+    get segmentable() {
+        return this.mode === undefined;
+    }
+    get segmentedKind() {
+        return 'date';
+    }
+    get segmentLocale() {
+        return this.locale;
+    }
     written(date) {
         if (this.dateStyle === 'iso' || !isDateValue(date)) {
             return date;
@@ -170,21 +185,15 @@ let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinPickerEdi
                 max: this.written(this.max),
             });
         }
-        const days = writtenList(this.disableDays);
-        const listed = writtenList(this.disableDates);
-        if (held.some((one) => listed.includes(one) || days.includes(String(asDate(one)?.getUTCDay() ?? '')))) {
+        const why = held.map((one) => {
+            const date = asDate(one);
+            return date ? barredBy(date, this) : null;
+        });
+        if (why.includes('listed')) {
             return this.unavailableMessage || 'Choose a date that is available.';
         }
-        const step = Math.max(1, Math.floor(this.step) || 1);
-        if (step > 1) {
-            const base = asDate(this.min)?.getTime() ?? 0;
-            const off = held.some((one) => {
-                const at = asDate(one)?.getTime();
-                return at !== undefined && Math.round((at - base) / 86_400_000) % step !== 0;
-            });
-            if (off) {
-                return this.stepMismatchMessage || 'Choose one of the dates the calendar offers.';
-            }
+        if (why.includes('step')) {
+            return this.stepMismatchMessage || 'Choose one of the dates the calendar offers.';
         }
         if (this.mode === 'range' && held.length > 2) {
             return this.rangeLengthMessage || 'A range is two dates.';
@@ -198,9 +207,12 @@ let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinPickerEdi
         cell-range-middle: picker-cell-range-middle, cell-range-start: picker-cell-range-start,
         day: picker-day, day-disabled: picker-day-disabled, day-outside: picker-day-outside,
         day-selected: picker-day-selected, day-today: picker-day-today, grid: picker-grid,
-        header: picker-header, heading: picker-heading, month: picker-month, months: picker-months,
-        next: picker-next,
-        next-mark: picker-next-mark, previous: picker-previous, previous-mark: picker-previous-mark,
+        header: picker-header, heading: picker-heading, heading-button: picker-heading-button,
+        month: picker-month, months: picker-months, next: picker-next,
+        next-mark: picker-next-mark, period: picker-period, period-current: picker-period-current,
+        period-disabled: picker-period-disabled, period-row: picker-period-row,
+        period-selected: picker-period-selected, periods: picker-periods,
+        previous: picker-previous, previous-mark: picker-previous-mark,
         week: picker-week, weekday: picker-weekday"
       ?invalid=${this.resolvedFeedback !== ''}
       mode=${this.mode ?? nothing}
@@ -212,10 +224,19 @@ let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinPickerEdi
       label=${this.calendarLabel}
       locale=${this.locale || nothing}
       max=${this.max || nothing}
+      max-view=${this.maxView ?? nothing}
       min=${this.min || nothing}
+      month-view-label=${this.monthViewLabel}
       next-label=${this.nextLabel}
+      next-year-label=${this.nextYearLabel}
+      next-years-label=${this.nextYearsLabel}
       previous-label=${this.previousLabel}
+      previous-year-label=${this.previousYearLabel}
+      previous-years-label=${this.previousYearsLabel}
       step=${this.step}
+      year-view-label=${this.yearViewLabel}
+      .dayContent=${this.dayContent}
+      .isDateUnavailable=${this.isDateUnavailable}
       @helix-before-change=${this.handleCalendarChange}
       @change=${this.stopInner}
       @input=${this.stopInner}
@@ -235,7 +256,7 @@ let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinPickerEdi
     renderTag(date) {
         return html `<${this.tag('tag')}
                   part="date"
-      exportparts="dismiss: date-dismiss, dismiss-mark: date-dismiss-mark, label: date-label, start: date-start"
+      exportparts="cell: date-cell, dismiss: date-dismiss, dismiss-mark: date-dismiss-mark, label: date-label, link: date-link, start: date-start"
                   dismissible
                   dismiss-label=${fillTemplate(this.removeLabel, { name: this.written(date) })}
                   ?disabled=${this.isDisabled}
@@ -257,29 +278,31 @@ let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinPickerEdi
         ${this.mode === 'multiple'
             ? this.renderTokenRow(this.shownDates.map((date) => this.renderTag(date)), this.restCount)
             : nothing}
-        <input
-          part="control"
-          id=${this.controlId}
-          type="text"
-          .value=${this.display}
-          name=${this.name || nothing}
-          placeholder=${this.mode === 'multiple' && dates(this.value).length > 0
-            ? nothing
-            : this.placeholder || nothing}
-          autocomplete=${this.autocomplete || nothing}
-          inputmode="numeric"
-          aria-describedby=${this.describedBy ?? nothing}
-          aria-invalid=${this.invalidity ?? nothing}
-          ?disabled=${this.isDisabled}
-          ?readonly=${this.readOnly}
-          ?required=${this.required}
-          @blur=${this.handleBlur}
-          @change=${this.handleCommit}
-          @focus=${this.handleFocus}
-          @input=${this.handleInput}
-          @keydown=${this.handleDraftKey}
-          @keypress=${this.handleKeypress}
-        />
+        ${this.segmentsShown
+            ? this.renderSegments()
+            : html `<input
+                part="control"
+                id=${this.controlId}
+                type="text"
+                .value=${this.display}
+                name=${this.name || nothing}
+                placeholder=${this.mode === 'multiple' && dates(this.value).length > 0
+                ? nothing
+                : this.placeholder || nothing}
+                autocomplete=${this.autocomplete || nothing}
+                inputmode="numeric"
+                aria-describedby=${this.describedBy ?? nothing}
+                aria-invalid=${this.invalidity ?? nothing}
+                ?disabled=${this.isDisabled}
+                ?readonly=${this.readOnly}
+                ?required=${this.required}
+                @blur=${this.handleBlur}
+                @change=${this.handleCommit}
+                @focus=${this.handleFocus}
+                @input=${this.handleInput}
+                @keydown=${this.handleDraftKey}
+                @keypress=${this.handleKeypress}
+              />`}
         <button
           part="trigger"
           type="button"
@@ -330,6 +353,9 @@ __decorate([
 __decorate([
     property({ attribute: 'date-style' })
 ], HelixHeadlessDateInput.prototype, "dateStyle", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessDateInput.prototype, "dayContent", void 0);
 __decorate([
     property({ attribute: 'disable-dates' })
 ], HelixHeadlessDateInput.prototype, "disableDates", void 0);
@@ -339,12 +365,18 @@ __decorate([
 __decorate([
     property({ attribute: 'first-day-of-week', type: Number })
 ], HelixHeadlessDateInput.prototype, "firstDayOfWeek", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessDateInput.prototype, "isDateUnavailable", void 0);
 __decorate([
     property()
 ], HelixHeadlessDateInput.prototype, "locale", void 0);
 __decorate([
     property()
 ], HelixHeadlessDateInput.prototype, "max", void 0);
+__decorate([
+    property({ attribute: 'max-view' })
+], HelixHeadlessDateInput.prototype, "maxView", void 0);
 __decorate([
     property()
 ], HelixHeadlessDateInput.prototype, "min", void 0);
@@ -357,15 +389,30 @@ __decorate([
 __decorate([
     state()
 ], HelixHeadlessDateInput.prototype, "fitted", void 0);
+__decorate([
+    property({ attribute: 'month-view-label' })
+], HelixHeadlessDateInput.prototype, "monthViewLabel", void 0);
 __decorate([
     property({ attribute: 'next-label' })
 ], HelixHeadlessDateInput.prototype, "nextLabel", void 0);
+__decorate([
+    property({ attribute: 'next-year-label' })
+], HelixHeadlessDateInput.prototype, "nextYearLabel", void 0);
+__decorate([
+    property({ attribute: 'next-years-label' })
+], HelixHeadlessDateInput.prototype, "nextYearsLabel", void 0);
 __decorate([
     property()
 ], HelixHeadlessDateInput.prototype, "placeholder", void 0);
 __decorate([
     property({ attribute: 'previous-label' })
 ], HelixHeadlessDateInput.prototype, "previousLabel", void 0);
+__decorate([
+    property({ attribute: 'previous-year-label' })
+], HelixHeadlessDateInput.prototype, "previousYearLabel", void 0);
+__decorate([
+    property({ attribute: 'previous-years-label' })
+], HelixHeadlessDateInput.prototype, "previousYearsLabel", void 0);
 __decorate([
     property({ attribute: 'range-length-message' })
 ], HelixHeadlessDateInput.prototype, "rangeLengthMessage", void 0);
@@ -393,6 +440,9 @@ __decorate([
 __decorate([
     property({ attribute: 'unavailable-message' })
 ], HelixHeadlessDateInput.prototype, "unavailableMessage", void 0);
+__decorate([
+    property({ attribute: 'year-view-label' })
+], HelixHeadlessDateInput.prototype, "yearViewLabel", void 0);
 HelixHeadlessDateInput = __decorate([
     customElement('helix-headless-date-input')
 ], HelixHeadlessDateInput);

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.