@fusion.dev/helix-headless 0.158.0 → 0.160.0

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

@@ -1,4 +1,4 @@
-import { AriaForwardController, type DateCalendar, HelixFormElement } from '@fusion.dev/helix-core';
+import { AriaForwardController, type DateCalendar, HelixFormElement, type MonthCalendar, type MonthSystem } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
 import '../../date-picker/index.js';
 import '../../tag/index.js';
@@ -15,17 +15,24 @@ declare const HelixHeadlessDateInput_base: (new (...args: any[]) => import("@fus
  * gives a picker and locale formatting but allows almost no styling, so the
  * 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.
+ * calendar sends both. The field reads ISO, `2026-08-04`, and a date written
+ * in the order, the digits, and the month names of `locale`, `8/4/2026` or
+ * `Aug 4, 2026` in `en-US` and `4.8.2026` in `de-DE`, which becomes the value
+ * as you leave the field.
  *
  * 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.
+ * closes the calendar. The text field is a `combobox` with
+ * `aria-haspopup="dialog"`, `aria-expanded`, and `aria-controls`, as in the
+ * APG date picker combobox, since Down opens the calendar from it.
  *
  * 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.
+ * digits or the arrow keys. Alt+Down opens the calendar from a segment. A
+ * `range` is two rows with a dash between them, the start and the end, as
+ * React Aria's DateRangePicker draws them, and `multiple` keeps the text.
  *
  * Text that is not a date gives the form an empty value, as a native date
  * field does, and `value` keeps the text so it can be corrected.
@@ -57,6 +64,7 @@ declare const HelixHeadlessDateInput_base: (new (...args: any[]) => import("@fus
  * @aliases DatePicker, DateField, InputDate
  * @documentation https://fusion.dev/helix/components/date-input
  *
+ * @slot clear-icon - Replaces the cross on the clear button, under `clearable`.
  * @slot end - Content after the date, before the trigger, such as a clear button.
  * @slot feedback - The error message under the field.
  * @slot hint - The help text under the field.
@@ -72,9 +80,11 @@ declare const HelixHeadlessDateInput_base: (new (...args: any[]) => import("@fus
  * @event {HelixBeforeChangeEvent} helix-before-change - Fired before the date changes. Cancelable: call `preventDefault()` to keep the current date.
  * @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 {HelixClearEvent} helix-clear - Fired after the clear button has emptied the field, after `input` and `change`.
  * @event {Event} input - Fired after the value changes.
  * @event {ToggleEvent} toggle - Fired when the calendar opens or closes, with `newState` and `oldState`.
  *
+ * @csspart clear - The button that empties the field, under `clearable`, while it holds a date.
  * @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.
@@ -116,8 +126,10 @@ declare const HelixHeadlessDateInput_base: (new (...args: any[]) => import("@fus
  * @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-selection - The chosen date or range in words, which screen readers hear when it changes. Drawn for screen readers only.
  * @csspart picker-week - One row of days.
  * @csspart picker-weekday - A column header naming a day of the week.
+ * @csspart range-separator - The dash between a range's two rows of segments, in `segmented`, beside `literal`.
  * @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`.
@@ -127,6 +139,7 @@ declare const HelixHeadlessDateInput_base: (new (...args: any[]) => import("@fus
  * @csspart trigger - The control that opens the calendar.
  * @csspart trigger-icon - The icon on the button that opens the calendar.
  *
+ * @cssstate blank - The field holds no date.
  * @cssstate invalid - The field has an error to show, from the browser's validation or from your `feedback`.
  * @cssstate open - The calendar is open.
  */
@@ -138,28 +151,43 @@ export declare class HelixHeadlessDateInput extends HelixHeadlessDateInput_base
     static words: string;
     protected readonly aria: AriaForwardController;
     /**
-     * What the browser may autofill here, as one of the platform's own tokens.
+     * What the browser may autofill here, as one of the platform's own tokens,
+     * such as `bday`.
      *
      * Empty leaves the attribute off, which is the browser's default and is what
      * lets autofill work at all: hardcoding `off` here means a birthday or a
-     * postal code can never be filled in for a reader.
+     * postal code can never be filled in for a reader. With `segmented`, a
+     * hidden native date input carries it, since no browser fills the segments.
      */
     autocomplete: string;
     /**
-     * The calendar the written date and the calendar's days are in: `gregory`,
-     * `buddhist`, `japanese`, `roc`, or `iso8601`.
+     * The calendar the written date, the segments, and the calendar's days are
+     * in: `gregory`, `buddhist`, `japanese`, `roc`, or `iso8601`, or a calendar
+     * with months of its own that Date Picker's `calendar` names, such as
+     * `persian`, `hebrew`, `islamic-umalqura`, `ethiopic`, or `chinese`.
      *
-     * Absent is the locale's own where it is one of the five, and `gregory` for
-     * every other, as Date Picker's `calendar` is. The value is `YYYY-MM-DD` in
-     * every calendar, and a focused field is ISO in every calendar. In
-     * `segmented`, the segments are the Gregorian day, month, and year, in the
-     * order the locale writes them, or ISO order for `iso8601`.
+     * Absent is the locale's own where its months are the Gregorian months, and
+     * `gregory` for every other, as Date Picker's `calendar` is. The value is
+     * `YYYY-MM-DD` in every calendar, and a focused text field is ISO in every
+     * calendar. In `segmented`, the segments are the day, month, and year as
+     * the calendar counts them, in the order the locale writes them: Mehr 14,
+     * 1405 is month 7 and day 14 of 1405 under `persian`. Under the five with
+     * Gregorian months they are the Gregorian day, month, and year, or ISO order
+     * for `iso8601`.
      */
-    calendar?: DateCalendar;
+    calendar?: DateCalendar | MonthCalendar;
     /**
      * The name of the calendar's grid of days, read by screen readers.
      */
     calendarLabel: string;
+    /**
+     * Whether the field shows a button that empties it, as Input's `clearable`
+     * does. Shown only while the field holds something to clear and is neither
+     * disabled nor read-only.
+     */
+    clearable: boolean;
+    /** The accessible name of the clear button, which shows only an icon. */
+    clearLabel: string;
     /** Typed, so a keystroke is announced as `input` alone. See `announcesInput`. */
     protected readonly announcesInput = true;
     /**
@@ -168,8 +196,9 @@ export declare class HelixHeadlessDateInput extends HelixHeadlessDateInput_base
      * **The field renders when it is idle and holds the value when it is being
      * edited.** A written date is a rendering, and a document being edited must
      * not be a rendering of something else: `Intl.DateTimeFormat` formats and does
-     * not parse, so `4 August 2026` cannot be typed back, and writing a parser per
-     * locale is how a field ends up rejecting what it just displayed.
+     * not parse, so a rendering such as `Tuesday, August 4, 2026` is no text to
+     * edit. The field does read a date typed in the locale's order and digits as
+     * you leave it, which covers what a reader types.
      *
      * The way out is not to choose between the two but to separate them in time.
      * Idle, the field shows `4 August 2026`, which is what a date is for reading.
@@ -348,6 +377,12 @@ export declare class HelixHeadlessDateInput extends HelixHeadlessDateInput_base
      * removes rather than as "Remove" said once per date.
      */
     removeLabel: string;
+    /**
+     * What a screen reader hears about the dates chosen in the calendar, with
+     * `{kind}`, `{start}`, `{end}` and `{count}` filled in as Date Picker's
+     * `selection-label` says.
+     */
+    selectionLabel: string;
     /**
      * How far apart the selectable dates are, in days.
      *
@@ -361,6 +396,12 @@ export declare class HelixHeadlessDateInput extends HelixHeadlessDateInput_base
      * The message shown when a date is not on `step`.
      */
     stepMismatchMessage: string;
+    /**
+     * The time zone today is read in, such as `America/New_York`, handed to the
+     * calendar: the day marked today, and the month an empty field opens on.
+     * Empty is the reader's own. Dates are plain `YYYY-MM-DD` and carry no zone.
+     */
+    timeZone: string;
     /**
      * The name of the button that opens the calendar, read by screen readers.
      */
@@ -375,17 +416,23 @@ export declare class HelixHeadlessDateInput extends HelixHeadlessDateInput_base
      */
     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.
+     * A row of segments holds one date, and `range` takes two rows with a dash
+     * between them, as React Aria's range fields do. `multiple` keeps the line
+     * of text, whose tags are how it writes several.
      */
     protected get segmentable(): boolean;
+    protected get segmentGroups(): number;
     protected get segmentedKind(): 'date';
     /**
      * The segments are the Gregorian day, month and year, which is what they
      * hold, in ISO order where the calendar is `iso8601`. A year shown as 2569
-     * or Reiwa 8 would be a year the segment does not hold.
+     * or Reiwa 8 would be a year the segment does not hold. Under a calendar
+     * with months of its own they hold that calendar's parts, so they are laid
+     * out and named in it.
      */
     protected get segmentLocale(): string;
+    /** The calendar the segments count in, where it has months of its own. */
+    protected get segmentSystem(): MonthSystem | undefined;
     /** One date, written the way `dateStyle` asks for. */
     private written;
     protected get display(): string;
@@ -401,6 +448,20 @@ export declare class HelixHeadlessDateInput extends HelixHeadlessDateInput_base
     private draft;
     /** Relayed under this element's name, so a consumer hears one control. */
     private readonly handleInput;
+    /**
+     * A date as the reader wrote it, as `YYYY-MM-DD`: ISO as it is, and the
+     * order, the digits, and the month names of the field's locale and calendar
+     * read back, so `8/4/2026` in `en-US` is August 4, 2026. Empty where it is
+     * no date.
+     */
+    private read;
+    /**
+     * The text the reader leaves, read in the field's locale: a date written as
+     * the locale writes one becomes the value, as ISO, when the field commits.
+     * Not on each key, where `8/4/202` is a date in the year 202 and taking it
+     * would move the caret mid-year.
+     */
+    private readonly handleTextCommit;
     /** Adds what was typed to the set, or takes the last one back out. */
     private readonly handleDraftKey;
     /** The dates that get a tag, which is all of them until the cap says not. */
@@ -423,6 +484,11 @@ export declare class HelixHeadlessDateInput extends HelixHeadlessDateInput_base
      * The message shown when `disable-dates` or `disable-days` bars a date.
      */
     unavailableMessage: string;
+    /**
+     * The message for text that is no date, where `bad-input-message` is not
+     * set. `{mode}` is `single`, `range`, or `multiple`.
+     */
+    unreadableMessage: string;
     /**
      * The name of the calendar's heading where it shows a page of years, with
      * `{heading}` filled in.
@@ -477,6 +543,29 @@ export declare class HelixHeadlessDateInput extends HelixHeadlessDateInput_base
      * and no mark whatsoever.
      */
     protected renderTrigger(): TemplateResult;
+    /**
+     * A native date input a browser's autofill can fill, where the field shows
+     * segments: a row of spans that no browser fills. React Aria's
+     * `HiddenDateInput` is the same answer for its segmented field.
+     *
+     * Drawn and never seen, a pixel and see-through, as Select's hidden select
+     * is, since Safari skips a field that is `display: none`. `aria-hidden` and
+     * out of the tab order, and in this shadow root, so the form still takes
+     * the value once, from the host. A fill is taken as a pick, with `input`
+     * and `change` from the host.
+     */
+    private renderAutofill;
+    private readonly handleAutofill;
+    /** Whether there is a clear button on screen right now. */
+    private get showsClear();
+    /**
+     * Empties the field, through `requestValue` so a consumer who owns the
+     * value decides, then says `change` and `helix-clear` and puts focus back
+     * in the field, the button having gone.
+     */
+    private readonly handleClear;
+    /** The cross on the clear button, behind a seam a tier can move. */
+    protected renderClearIcon(): TemplateResult;
     /** The line of text the dates are typed into, where the field shows no segments. */
     private renderControl;
     protected render(): TemplateResult;

package/dist/date-input/root/date-input-root.js

@@ -4,8 +4,8 @@ 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, barredBy, calendarLocale, customElement, formatWords, dateAsValue as fromDate, HelixFormElement, handedLocale, isDateValue, MixinControllerOpen, MixinControllerValue, MixinField, MixinPickerEditing, MixinPickerField, MixinSegmentedField, MixinTokens, words, wordsLocale, } from '@fusion.dev/helix-core';
-import { calendarBlank } from '@fusion.dev/helix-icons';
+import { AriaForwardController, valueAsDate as asDate, barredBy, calendarLocale, customElement, drawIcon, formatWords, dateAsValue as fromDate, HelixClearEvent, HelixFormElement, handedLocale, isDateValue, MixinControllerOpen, MixinControllerValue, MixinField, MixinPickerEditing, MixinPickerField, MixinSegmentedField, MixinTokens, MONTH_CALENDARS, monthSystem, readWrittenDate, words, wordsLocale, } from '@fusion.dev/helix-core';
+import { calendarBlank, x } from '@fusion.dev/helix-icons';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
@@ -25,6 +25,8 @@ let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinSegmented
         });
         this.autocomplete = '';
         this.calendarLabel = 'Date Picker';
+        this.clearable = false;
+        this.clearLabel = 'Clear';
         this.announcesInput = true;
         this.dateStyle = 'long';
         this.disableDates = '';
@@ -47,8 +49,10 @@ let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinSegmented
         this.rangeOverflowMessage = 'Choose a date on or before {max}.';
         this.rangeUnderflowMessage = 'Choose a date on or after {min}.';
         this.removeLabel = 'Remove {name}';
+        this.selectionLabel = '{kind, select, date {Selected date: {start}} start {Range starts {start}. Choose the day it ends.} range {Selected range: {start} to {end}} other {{count, plural, one {# date selected} other {# dates selected}}}}';
         this.step = 1;
         this.stepMismatchMessage = 'Choose one of the dates the calendar offers.';
+        this.timeZone = '';
         this.triggerLabel = 'Choose a date';
         this.draft = '';
         this.handleInput = (event) => {
@@ -64,15 +68,28 @@ let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinSegmented
             this.requestValue(whole ? held.join(',') : typed);
             this.restore();
         };
+        this.handleTextCommit = (event) => {
+            if (this.mode !== 'multiple') {
+                const held = this.mode === 'range' && /\s[–-]\s/.test(this.value)
+                    ? this.value.split(/\s+[–-]\s+/).map((one) => one.trim())
+                    : dates(this.value);
+                const read = held.map((one) => this.read(one));
+                if (held.length > 0 && !held.every(isDateValue) && read.every(Boolean)) {
+                    this.requestValue(read.join(','));
+                }
+            }
+            this.handleCommit(event);
+        };
         this.handleDraftKey = (event) => {
             if (this.mode !== 'multiple') {
                 return;
             }
             const held = dates(this.value);
-            if (event.key === 'Enter' && isDateValue(this.draft)) {
+            const draft = this.read(this.draft.trim());
+            if (event.key === 'Enter' && draft !== '') {
                 event.preventDefault();
-                if (!held.includes(this.draft)) {
-                    this.requestPicked([...held, this.draft].join(','));
+                if (!held.includes(draft)) {
+                    this.requestPicked([...held, draft].join(','));
                 }
                 this.draft = '';
             }
@@ -100,10 +117,24 @@ let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinSegmented
             }
         };
         this.unavailableMessage = 'Choose a date that is available.';
+        this.unreadableMessage = '{mode, select, single {Enter a date as YYYY-MM-DD.} other {Enter dates as YYYY-MM-DD, separated by commas.}}';
         this.yearViewLabel = '{heading}. Choose a year';
         this.handleIconChange = () => {
             this.requestUpdate();
         };
+        this.handleAutofill = (event) => {
+            const filled = event.currentTarget.value;
+            if (isDateValue(filled)) {
+                this.requestPicked(filled);
+            }
+        };
+        this.handleClear = () => {
+            if (this.value !== '' && this.requestValue('')) {
+                this.announceChange();
+                this.dispatchEvent(new HelixClearEvent());
+            }
+            void this.updateComplete.then(() => this.returnFocus());
+        };
     }
     static { this.words = 'helix-date-input'; }
     get language() {
@@ -125,24 +156,34 @@ let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinSegmented
     }
     willUpdate(changed) {
         super.willUpdate(changed);
+        this.toggleState('blank', this.value === '');
         if (changed.has('months') || changed.has('locale') || changed.has('calendar')) {
             this.fitted = undefined;
             this.wide = undefined;
         }
+        if (changed.has('open') && this.open) {
+            this.partNamed('picker')?.showChosen?.();
+        }
     }
     get picked() {
         const held = dates(this.value);
         return held.length > 0 && held.every(isDateValue) ? held.join(',') : '';
     }
     get segmentable() {
-        return this.mode === undefined;
+        return this.mode !== 'multiple';
+    }
+    get segmentGroups() {
+        return this.mode === 'range' ? 2 : 1;
     }
     get segmentedKind() {
         return 'date';
     }
     get segmentLocale() {
         const tag = calendarLocale(this.language, this.calendar);
-        return tag.includes('-ca-iso8601') ? tag : calendarLocale(tag, 'gregory');
+        return tag.includes('-ca-iso8601') || this.segmentSystem ? tag : calendarLocale(tag, 'gregory');
+    }
+    get segmentSystem() {
+        return MONTH_CALENDARS.includes(this.calendar ?? '') ? monthSystem(this.calendar) : undefined;
     }
     written(date) {
         if (this.dateStyle === 'iso' || !isDateValue(date)) {
@@ -167,6 +208,9 @@ let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinSegmented
         const written = held.map((one) => this.written(one));
         return this.mode === 'range' ? written.join(' – ') : written.join(', ');
     }
+    read(text) {
+        return isDateValue(text) ? text : readWrittenDate(text, this.segmentLocale, this.segmentSystem);
+    }
     get shownDates() {
         const held = dates(this.value);
         return this.shownLimit > 0 ? held.slice(0, this.shownLimit) : held;
@@ -185,9 +229,7 @@ let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinSegmented
         const held = dates(this.value);
         if (held.length > 0 && !held.every(isDateValue)) {
             return (this.badInputMessage ||
-                (this.mode === undefined
-                    ? 'Enter a date as YYYY-MM-DD.'
-                    : 'Enter dates as YYYY-MM-DD, separated by commas.'));
+                formatWords(this, 'unreadableMessage', { mode: this.mode ?? 'single' }));
         }
         if (this.min !== '' && held.some((one) => one < this.min)) {
             return [
@@ -230,7 +272,7 @@ let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinSegmented
         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"
+        selection: picker-selection, week: picker-week, weekday: picker-weekday"
       ?invalid=${this.resolvedFeedback !== ''}
       mode=${this.mode ?? nothing}
       months=${this.fitted ?? this.months}
@@ -251,7 +293,9 @@ let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinSegmented
       previous-label=${this.previousLabel}
       previous-year-label=${this.previousYearLabel}
       previous-years-label=${this.previousYearsLabel}
+      selection-label=${this.selectionLabel}
       step=${this.step}
+      time-zone=${this.timeZone || nothing}
       year-view-label=${this.yearViewLabel}
       .dayContent=${this.dayContent}
       .isDateUnavailable=${this.isDateUnavailable}
@@ -290,6 +334,29 @@ let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinSegmented
         ${unsafeSVG(calendarBlank.content)}
       </svg></slot>`;
     }
+    renderAutofill() {
+        if (this.autocomplete === '' || this.autocomplete === 'off') {
+            return nothing;
+        }
+        return html `<input
+      type="date"
+      aria-hidden="true"
+      autocomplete=${this.autocomplete}
+      name=${this.name || nothing}
+      style="position:fixed;top:0;left:0;width:1px;height:1px;opacity:0;pointer-events:none"
+      tabindex="-1"
+      .value=${isDateValue(this.value) ? this.value : ''}
+      ?disabled=${this.isDisabled}
+      @change=${this.handleAutofill}
+      @input=${this.stopInner}
+    />`;
+    }
+    get showsClear() {
+        return this.clearable && this.value !== '' && !this.isDisabled && !this.readOnly;
+    }
+    renderClearIcon() {
+        return html `<slot name="clear-icon">${drawIcon(x)}</slot>`;
+    }
     renderControl() {
         return html `<input
       part="control"
@@ -300,6 +367,10 @@ let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinSegmented
       placeholder=${this.mode === 'multiple' && dates(this.value).length > 0
             ? nothing
             : this.placeholder || nothing}
+      role="combobox"
+      aria-controls="surface"
+      aria-expanded=${this.open ? 'true' : 'false'}
+      aria-haspopup="dialog"
       autocomplete=${this.autocomplete || nothing}
       inputmode="numeric"
       aria-describedby=${this.describedBy ?? nothing}
@@ -308,7 +379,7 @@ let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinSegmented
       ?readonly=${this.readOnly}
       ?required=${this.required}
       @blur=${this.handleBlur}
-      @change=${this.handleCommit}
+      @change=${this.handleTextCommit}
       @focus=${this.handleFocus}
       @input=${this.handleInput}
       @keydown=${this.handleDraftKey}
@@ -322,8 +393,18 @@ let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinSegmented
         ${this.mode === 'multiple'
             ? this.renderTokenRow(this.shownDates.map((date) => this.renderTag(date)), this.restCount)
             : nothing}
-        ${this.segmentsShown ? this.renderSegments() : this.renderControl()}
+        ${this.segmentsShown ? html `${this.renderSegments()}${this.renderAutofill()}` : this.renderControl()}
         <slot name="end"></slot>
+        ${this.showsClear
+            ? html `<button
+                part="clear"
+                type="button"
+                aria-label=${this.clearLabel}
+                @click=${this.handleClear}
+              >
+                ${this.renderClearIcon()}
+              </button>`
+            : nothing}
         <button
           part="trigger"
           type="button"
@@ -377,6 +458,13 @@ __decorate([
     words,
     property({ attribute: 'calendar-label' })
 ], HelixHeadlessDateInput.prototype, "calendarLabel", void 0);
+__decorate([
+    property({ type: Boolean })
+], HelixHeadlessDateInput.prototype, "clearable", void 0);
+__decorate([
+    words,
+    property({ attribute: 'clear-label' })
+], HelixHeadlessDateInput.prototype, "clearLabel", void 0);
 __decorate([
     property({ attribute: 'date-style' })
 ], HelixHeadlessDateInput.prototype, "dateStyle", void 0);
@@ -464,6 +552,10 @@ __decorate([
     words,
     property({ attribute: 'remove-label' })
 ], HelixHeadlessDateInput.prototype, "removeLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'selection-label' })
+], HelixHeadlessDateInput.prototype, "selectionLabel", void 0);
 __decorate([
     property({ type: Number })
 ], HelixHeadlessDateInput.prototype, "step", void 0);
@@ -471,6 +563,9 @@ __decorate([
     words,
     property({ attribute: 'step-mismatch-message' })
 ], HelixHeadlessDateInput.prototype, "stepMismatchMessage", void 0);
+__decorate([
+    property({ attribute: 'time-zone' })
+], HelixHeadlessDateInput.prototype, "timeZone", void 0);
 __decorate([
     words,
     property({ attribute: 'trigger-label' })
@@ -482,6 +577,10 @@ __decorate([
     words,
     property({ attribute: 'unavailable-message' })
 ], HelixHeadlessDateInput.prototype, "unavailableMessage", void 0);
+__decorate([
+    words,
+    property({ attribute: 'unreadable-message' })
+], HelixHeadlessDateInput.prototype, "unreadableMessage", void 0);
 __decorate([
     words,
     property({ attribute: 'year-view-label' })