@fusion.dev/helix-headless 0.159.0 → 0.161.0

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' })

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

@@ -1,4 +1,4 @@
-import { type CalendarView, type DateCalendar, HelixFormElement, type MonthCalendar } from '@fusion.dev/helix-core';
+import { type CalendarView, type DateCalendar, HelixFormElement, type MonthCalendar, type PickerFailure } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
 declare const HelixHeadlessDatePicker_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinPickerFeedbackInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerValueInterface) & typeof HelixFormElement;
 /**
@@ -15,9 +15,11 @@ declare const HelixHeadlessDatePicker_base: (new (...args: any[]) => import("@fu
  * **Dates are `YYYY-MM-DD` strings, and every calculation is in UTC**, because
  * a local-time `Date` shifts across a time zone or daylight-saving boundary.
  *
- * **The days are the Gregorian calendar's**, written in `calendar`: the
- * locale's own where its months are the Gregorian months, as `th-TH` writes
- * 2569 for 2026, and `gregory` where they are not, as for `fa-IR`.
+ * **The months are the ones `calendar` counts**: the Gregorian months for the
+ * locale's own calendar where its months are the Gregorian months, as `th-TH`
+ * writes 2569 for 2026, and `gregory` where they are not, as for `fa-IR`
+ * with no `calendar`. Name a calendar with months of its own, such as
+ * `persian`, and every view counts its days, months, and years from `Intl`.
  *
  * `month` sets which month the grid shows, separately from `value`, so paging
  * selects nothing and you can control the view. When unset, it follows the
@@ -25,7 +27,14 @@ declare const HelixHeadlessDatePicker_base: (new (...args: any[]) => import("@fu
  *
  * `mode` sets how many dates are held. Unset holds one, `range` holds two and
  * marks the dates between them, and `multiple` toggles each date. All three
- * read and write the same comma-separated `value`.
+ * read and write the same comma-separated `value`. With a `mode`, the grid
+ * carries `aria-multiselectable`. While a range holds one end, the grid draws
+ * the range to the day under the pointer or the focus, marking those cells
+ * `data-range-preview`.
+ *
+ * The chosen date, range, or count of dates is the grid's description, in a
+ * region screen readers announce when it changes, as React Aria's calendars
+ * do. `selection-label` words it.
  *
  * `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
@@ -58,7 +67,7 @@ declare const HelixHeadlessDatePicker_base: (new (...args: any[]) => import("@fu
  * @event {Event} input - Fired after the value changes.
  *
  * @csspart cell - One column of a week row. A range is painted on the cells.
- * @csspart cell-range-end - The cell of a range's last day, beside `cell`.
+ * @csspart cell-range-end - The cell of a range's last day, beside `cell`, or of the day a waiting range is drawn to.
  * @csspart cell-range-middle - A cell between a range's ends, beside `cell`.
  * @csspart cell-range-start - The cell of a range's first day, beside `cell`.
  * @csspart day - The shape inside a cell. A single chosen date is painted on it.
@@ -84,12 +93,17 @@ declare const HelixHeadlessDatePicker_base: (new (...args: any[]) => import("@fu
  * @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 selection - The chosen date or range in words, which screen readers hear when it changes. Drawn for screen readers only.
  * @csspart week - One row of days.
  * @csspart weekday - A column header naming a day of the week. It shows the short name and says the full one.
  *
  * @cssproperty --date-picker-column-count - How many month columns are drawn, capped at two. `--date-picker-columns` overrides it.
  *
- * @cssstate invalid - While `invalid` is set or `feedback` says what is wrong.
+ * @cssstate blank - While no date is chosen.
+ * @cssstate invalid - While `invalid` is set, `feedback` says what is wrong, the picker holds a date outside `min` and `max` or one it bars, or it is `required`, holds no date, and the reader has answered once or a form has refused it.
+ * @cssstate month-view - While the months of a year are shown, where `max-view` is set.
+ * @cssstate range-pending - While a `range` holds its first end and waits for the second.
+ * @cssstate year-view - While a page of years is shown, where `max-view` is `year`.
  */
 export declare class HelixHeadlessDatePicker extends HelixHeadlessDatePicker_base {
     /**
@@ -116,14 +130,16 @@ export declare class HelixHeadlessDatePicker extends HelixHeadlessDatePicker_bas
      * `ja-JP-u-ca-japanese`, and `gregory` for every other, such as `persian`
      * for `fa-IR`.
      *
-     * `persian`, `hebrew`, `islamic-umalqura`, `islamic-civil`, `ethiopic`,
-     * `coptic`, and `indian` draw a calendar with months of its own, as React
-     * Aria's calendars do: each grid is one of that calendar's months, the
-     * Hebrew leap month and Ethiopia's five-day thirteenth month included, and
-     * Previous, Next and the page keys move by those months. `month` and
+     * `persian`, `hebrew`, `islamic`, `islamic-umalqura`, `islamic-civil`,
+     * `islamic-tbla`, `islamic-rgsa`, `ethiopic`, `ethioaa`, `coptic`,
+     * `indian`, `chinese`, and `dangi` draw a calendar with months of its own,
+     * as React Aria's calendars do: each grid is one of that calendar's months,
+     * the Hebrew and Chinese leap months and Ethiopia's five-day thirteenth
+     * month included, and Previous, Next and the page keys move by those
+     * months. With `max-view`, the months view shows that calendar's year, of
+     * twelve or thirteen months, and the years view its years. `month` and
      * `helix-navigate` then name a month by its first day, `YYYY-MM-DD`. The
-     * heading stays text, as the months and years views are drawn in Gregorian
-     * months only. The value is `YYYY-MM-DD` in every calendar.
+     * value is `YYYY-MM-DD` in every calendar.
      */
     calendar?: DateCalendar | MonthCalendar;
     /**
@@ -207,6 +223,8 @@ export declare class HelixHeadlessDatePicker extends HelixHeadlessDatePicker_bas
     mode?: 'range' | 'multiple';
     /** The month on show, whoever set it, and `undefined` until somebody has. */
     private monthState;
+    /** Whether the month on show is one the reader paged to, which `showChosen` forgets. */
+    private browsed;
     /**
      * The month shown, as `YYYY-MM`, or as its first day, `YYYY-MM-DD`, under a
      * `calendar` with months of its own. When it is not set, it follows
@@ -284,6 +302,21 @@ export declare class HelixHeadlessDatePicker extends HelixHeadlessDatePicker_bas
     private choosing;
     /** The range's ends, when there are two and the mode asks for them. */
     private get range();
+    /**
+     * The day a reader points at or moves to while a range holds one end, which
+     * the grid draws the range to before it is chosen.
+     */
+    private previewed;
+    /** Whether a range holds its first end and waits for the second. */
+    private get pending();
+    /**
+     * The range the grid draws: the chosen one, or, while one end waits for
+     * the other, the run to the day under the pointer or the focus.
+     */
+    private get drawnRange();
+    /** Draws a waiting range to the day the pointer is on. */
+    private preview;
+    private readonly handleGridLeave;
     private isSelected;
     /** The month being shown, resolved from `month`, then `value`, then today. */
     private get shown();
@@ -292,8 +325,6 @@ export declare class HelixHeadlessDatePicker extends HelixHeadlessDatePicker_bas
      * months of its own, and the Gregorian months otherwise.
      */
     private get system();
-    /** Whether `calendar` names a calendar with months of its own. */
-    private get ownMonths();
     /**
      * The month to open on when nothing has declared one.
      *
@@ -407,6 +438,16 @@ export declare class HelixHeadlessDatePicker extends HelixHeadlessDatePicker_bas
      * plain `focus()` on it did nothing and focus stayed on the trigger.
      */
     focus(options?: FocusOptions): void;
+    /**
+     * Shows the days again, on the month of the chosen date, with the tab stop
+     * on that date, forgetting the month and the day the reader browsed to.
+     *
+     * Date Input calls it each time its panel opens, which is where the APG
+     * date picker dialog puts focus. Measured before this: from August 4, two
+     * presses of Page Down, Escape, and Down again opened on October 4.
+     * A `month` you set stays until the reader pages away from it.
+     */
+    showChosen(): void;
     connectedCallback(): void;
     disconnectedCallback(): void;
     /**
@@ -434,6 +475,23 @@ export declare class HelixHeadlessDatePicker extends HelixHeadlessDatePicker_bas
      * Stops the form from submitting while no date is chosen.
      */
     required: boolean;
+    /**
+     * What a screen reader hears about the chosen dates: the grid's
+     * description, said again whenever the dates change. `{kind}` is `date`,
+     * `start` while a range holds one end, `range`, or `dates` for `multiple`.
+     * `{start}` and `{end}` are dates written in `locale`, and `{count}` is how
+     * many dates are chosen.
+     */
+    selectionLabel: string;
+    /**
+     * `selectionLabel` for the dates chosen now, or nothing while there are none.
+     *
+     * React Aria's calendars describe the grid by the chosen date or range and
+     * announce it when it changes. Measured before this: a range of seven days
+     * was seven cells with `aria-selected` in a grid that said nothing of a
+     * range, and choosing its end was heard as one more selected cell.
+     */
+    private get selectionWords();
     /**
      * How far apart the selectable dates are, in days.
      *
@@ -505,6 +563,13 @@ export declare class HelixHeadlessDatePicker extends HelixHeadlessDatePicker_bas
      * browser points its bubble at.
      */
     private reportRequired;
+    /**
+     * What is wrong with the answer, as validity flags and a message, or nothing.
+     * `reportRequired` hands it to the form, and `failure` to the mark.
+     */
+    private get problem();
+    /** A missing date waits for the reader; a refused one is marked at once. */
+    protected get failure(): PickerFailure | undefined;
     protected willUpdate(changed: PropertyValues): void;
     /**
      * Reports validity after render, because the bubble needs somewhere to point.