@fusion.dev/helix-headless 0.142.1 → 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.
  *
@@ -13,7 +13,19 @@ declare const HelixHeadlessDateInput_base: (new (...args: any[]) => import("@fus
  *
  * You can type a date as well as pick one. The native `<input type="date">`
  * gives a picker and locale formatting but allows almost no styling, so the
- * field is a text field.
+ * field is a text field. Typing sends `input` on each keystroke and `change`
+ * when you leave the field, as a text field does. A date picked from the
+ * calendar sends both.
+ *
+ * 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
@@ -23,6 +35,8 @@ declare const HelixHeadlessDateInput_base: (new (...args: any[]) => import("@fus
  *
  * @slot feedback - The error message under the field.
  * @slot hint - The help text under the field.
+ * @slot next-icon - The icon on the calendar's next month control.
+ * @slot previous-icon - The icon on the calendar's previous month control.
  * @slot trigger - The icon on the button that opens the calendar.
  *
  * @event {Event} change - Fired after the value changes.
@@ -30,18 +44,21 @@ declare const HelixHeadlessDateInput_base: (new (...args: any[]) => import("@fus
  * @event {HelixBeforeCloseEvent} helix-before-close - Fired before the calendar closes. Cancelable: call `preventDefault()` to keep it open.
  * @event {HelixBeforeOpenEvent} helix-before-open - Fired before the calendar opens. Cancelable: call `preventDefault()` to keep it closed.
  * @event {Event} input - Fired after the value changes.
- * @event {Event} toggle - Fired when the calendar opens or closes, with `newState` and `oldState`.
+ * @event {ToggleEvent} toggle - Fired when the calendar opens or closes, with `newState` and `oldState`.
  *
  * @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`.
@@ -55,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.
@@ -82,6 +109,12 @@ export declare class HelixHeadlessDateInput extends HelixHeadlessDateInput_base
      * postal code can never be filled in for a reader.
      */
     autocomplete: string;
+    /**
+     * The name of the calendar's grid of days, read by screen readers.
+     */
+    calendarLabel: string;
+    /** Typed, so a keystroke is announced as `input` alone. See `announcesInput`. */
+    protected readonly announcesInput = true;
     /**
      * How a date is written in the field: `short` through `full`, or ISO.
      *
@@ -108,19 +141,35 @@ export declare class HelixHeadlessDateInput extends HelixHeadlessDateInput_base
      */
     dateStyle: 'full' | 'iso' | 'long' | 'medium' | 'short';
     /**
-     * Dates that cannot be chosen, as a comma-separated `YYYY-MM-DD` list.
+     * 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.
      */
     disableDates: string;
     /**
      * Days of the week that cannot be chosen, from `0` for Sunday to `6` for
-     * Saturday.
+     * Saturday, separated by commas or spaces.
      */
     disableDays: string;
     /**
      * The day in the calendar's first column, from `0` for Sunday to `6` for
      * Saturday.
+     *
+     * Absent follows `locale`, where the engine knows the week of that language,
+     * and is Sunday otherwise.
      */
-    firstDayOfWeek: number;
+    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.
      */
@@ -129,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`.
      */
@@ -182,10 +236,39 @@ 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.
      */
     placeholder: string;
+    /**
+     * 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.
      *
@@ -221,6 +304,14 @@ export declare class HelixHeadlessDateInput extends HelixHeadlessDateInput_base
      * platform's base.
      */
     step: number;
+    /**
+     * The message shown when a date is not on `step`.
+     */
+    stepMismatchMessage?: string;
+    /**
+     * The name of the button that opens the calendar, read by screen readers.
+     */
+    triggerLabel: string;
     /**
      * What the calendar should show, which is only ever a whole date.
      *
@@ -230,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;
@@ -259,10 +357,14 @@ export declare class HelixHeadlessDateInput extends HelixHeadlessDateInput_base
     /** What is wrong with the dates, which the text input cannot say. */
     protected validate(): string;
     /**
-     * The name of the button that opens the calendar, read by screen readers.
+     * The message shown when `disable-dates` or `disable-days` bars a date.
      */
-    triggerLabel: string;
-    protected updated(changed: PropertyValues): void;
+    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.
      *
@@ -273,6 +375,18 @@ export declare class HelixHeadlessDateInput extends HelixHeadlessDateInput_base
      * one from the same template.
      */
     protected renderPicker(): TemplateResult;
+    /**
+     * Passes an icon slotted on the field to the calendar's slot of that name.
+     *
+     * **Forwarded only while the field holds one.** A forwarded slot is assigned
+     * to the calendar's slot even when it is empty, and an assigned slot does
+     * not show its fallback, so the calendar's own caret went missing whenever
+     * the field had no icon. With no `slot` attribute the forwarding slot is
+     * assigned nowhere, as the calendar has no default slot, and it still hears
+     * an icon arrive or leave.
+     */
+    private renderIconSlot;
+    private readonly handleIconChange;
     /**
      * One chosen date, as a tag, 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, } 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,26 +17,35 @@ 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';
+        this.announcesInput = true;
         this.dateStyle = 'long';
         this.disableDates = '';
         this.disableDays = '';
-        this.firstDayOfWeek = 0;
         this.locale = '';
         this.max = '';
         this.min = '';
         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';
         this.draft = '';
         this.handleInput = (event) => {
             event.stopPropagation();
@@ -59,30 +68,37 @@ let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinPickerEdi
             if (event.key === 'Enter' && isDateValue(this.draft)) {
                 event.preventDefault();
                 if (!held.includes(this.draft)) {
-                    this.requestValue([...held, this.draft].join(','));
+                    this.requestPicked([...held, this.draft].join(','));
                 }
                 this.draft = '';
             }
             else if (event.key === 'Backspace' && this.draft === '' && held.length > 0) {
-                this.requestValue(held.slice(0, -1).join(','));
+                this.requestPicked(held.slice(0, -1).join(','));
             }
         };
         this.removeDate = (date) => {
-            this.requestValue(dates(this.value)
+            this.requestPicked(dates(this.value)
                 .filter((one) => one !== date)
                 .join(','));
         };
         this.handleCalendarChange = (event) => {
             event.stopPropagation();
             const { value } = event.detail;
-            this.requestValue(value);
+            if (!this.requestPicked(value)) {
+                event.preventDefault();
+                this.restore();
+                return;
+            }
             this.restore();
             if (this.mode === undefined) {
                 this.requestOpen(false);
                 this.updateComplete.then(() => this.returnFocus());
             }
         };
-        this.triggerLabel = 'Choose a date';
+        this.yearViewLabel = '{heading}. Choose a year';
+        this.handleIconChange = () => {
+            this.requestUpdate();
+        };
     }
     placed(room) {
         const all = Math.max(1, Math.floor(this.months) || 1);
@@ -109,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;
@@ -160,17 +185,21 @@ let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinPickerEdi
                 max: this.written(this.max),
             });
         }
+        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.';
+        }
+        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.';
         }
         return '';
     }
-    updated(changed) {
-        super.updated(changed);
-        if (this.open && changed.has('open')) {
-            this.partNamed('picker')?.focus();
-        }
-    }
     renderPicker() {
         return html `<${this.tag('date-picker')}
       part="picker"
@@ -178,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}
@@ -188,20 +220,43 @@ let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinPickerEdi
       .value=${this.picked}
       disable-dates=${this.disableDates || nothing}
       disable-days=${this.disableDays || nothing}
-      first-day-of-week=${this.firstDayOfWeek}
+      first-day-of-week=${this.firstDayOfWeek ?? nothing}
+      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}
-    ></${this.tag('date-picker')}>`;
+    >
+      ${this.renderIconSlot('previous-icon')}
+      ${this.renderIconSlot('next-icon')}
+    </${this.tag('date-picker')}>`;
+    }
+    renderIconSlot(name) {
+        const given = this.querySelector?.(`:scope > [slot="${name}"]`) != null;
+        return html `<slot
+      name=${name}
+      slot=${given ? name : nothing}
+      @slotchange=${this.handleIconChange}
+    ></slot>`;
     }
     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}
@@ -223,36 +278,41 @@ 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}
-          @focus=${this.handleFocus}
-          @input=${this.handleInput}
-          @keydown=${this.handleDraftKey}
-        />
+        ${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"
           aria-controls="surface"
+          aria-disabled=${this.readOnly ? 'true' : nothing}
           aria-expanded=${this.open ? 'true' : 'false'}
           aria-haspopup="dialog"
           aria-label=${this.triggerLabel}
           ?disabled=${this.isDisabled}
-          @click=${() => this.toggleOpen()}
+          @click=${this.handleTriggerClick}
         >
           ${this.renderTrigger()}
         </button>
@@ -287,9 +347,15 @@ let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinPickerEdi
 __decorate([
     property()
 ], HelixHeadlessDateInput.prototype, "autocomplete", void 0);
+__decorate([
+    property({ attribute: 'calendar-label' })
+], HelixHeadlessDateInput.prototype, "calendarLabel", void 0);
 __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);
@@ -299,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);
@@ -317,9 +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);
@@ -336,11 +429,20 @@ __decorate([
     property({ type: Number })
 ], HelixHeadlessDateInput.prototype, "step", void 0);
 __decorate([
-    state()
-], HelixHeadlessDateInput.prototype, "draft", void 0);
+    property({ attribute: 'step-mismatch-message' })
+], HelixHeadlessDateInput.prototype, "stepMismatchMessage", void 0);
 __decorate([
     property({ attribute: 'trigger-label' })
 ], HelixHeadlessDateInput.prototype, "triggerLabel", void 0);
+__decorate([
+    state()
+], HelixHeadlessDateInput.prototype, "draft", void 0);
+__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);