@fusion.dev/helix-headless 0.148.0 → 0.149.0

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

@@ -1,4 +1,4 @@
-import { AriaForwardController, HelixFormElement } from '@fusion.dev/helix-core';
+import { AriaForwardController, type DateCalendar, HelixFormElement } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
 import '../../date-picker/index.js';
 import '../../tag/index.js';
@@ -103,6 +103,11 @@ declare const HelixHeadlessDateInput_base: (new (...args: any[]) => import("@fus
  * @cssstate open - The calendar is open.
  */
 export declare class HelixHeadlessDateInput extends HelixHeadlessDateInput_base {
+    /**
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-date-input': { triggerLabel: 'Datum auswählen' } })`.
+     */
+    static words: string;
     protected readonly aria: AriaForwardController;
     /**
      * What the browser may autofill here, as one of the platform's own tokens.
@@ -112,6 +117,17 @@ export declare class HelixHeadlessDateInput extends HelixHeadlessDateInput_base
      * postal code can never be filled in for a reader.
      */
     autocomplete: string;
+    /**
+     * The calendar the written date and the calendar's days are in: `gregory`,
+     * `buddhist`, `japanese`, `roc`, or `iso8601`.
+     *
+     * 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`.
+     */
+    calendar?: DateCalendar;
     /**
      * The name of the calendar's grid of days, read by screen readers.
      */
@@ -181,7 +197,7 @@ export declare class HelixHeadlessDateInput extends HelixHeadlessDateInput_base
      * Shoelace and Web Awesome read it, then the runtime's own.
      */
     locale: string;
-    /** The locale the words are written in: `locale`, or the page's `lang`. */
+    /** The locale the words and dates are written in: `locale`, or the page's `lang`. */
     private get language();
     /**
      * The latest date that can be chosen, as `YYYY-MM-DD`.
@@ -282,20 +298,20 @@ export declare class HelixHeadlessDateInput extends HelixHeadlessDateInput_base
      * The message shown when a range holds more than two dates.
      *
      * **Every sentence a control raises in the browser's bubble is a property**,
-     * so a form in another language speaks it. Absent is the control's own
-     * sentence, in English.
+     * so a form in another language speaks it. Unset is the sentence registered
+     * for the page's language, then the English.
      */
-    rangeLengthMessage?: string;
+    rangeLengthMessage: string;
     /**
      * The message shown when a date is after `max`. `{max}` is replaced with
      * `max`, written the way the field writes dates.
      */
-    rangeOverflowMessage?: string;
+    rangeOverflowMessage: string;
     /**
      * The message shown when a date is before `min`. `{min}` is replaced with
      * `min`, written the way the field writes dates.
      */
-    rangeUnderflowMessage?: string;
+    rangeUnderflowMessage: string;
     /**
      * The name of the button that removes one date. `{name}` is replaced with
      * the date.
@@ -316,7 +332,7 @@ export declare class HelixHeadlessDateInput extends HelixHeadlessDateInput_base
     /**
      * The message shown when a date is not on `step`.
      */
-    stepMismatchMessage?: string;
+    stepMismatchMessage: string;
     /**
      * The name of the button that opens the calendar, read by screen readers.
      */
@@ -336,6 +352,11 @@ export declare class HelixHeadlessDateInput extends HelixHeadlessDateInput_base
      */
     protected get segmentable(): boolean;
     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.
+     */
     protected get segmentLocale(): string;
     /** One date, written the way `dateStyle` asks for. */
     private written;
@@ -368,7 +389,7 @@ export declare class HelixHeadlessDateInput extends HelixHeadlessDateInput_base
     /**
      * The message shown when `disable-dates` or `disable-days` bars a date.
      */
-    unavailableMessage?: string;
+    unavailableMessage: string;
     /**
      * The name of the calendar's heading where it shows a page of years, with
      * `{heading}` filled in.
@@ -423,6 +444,8 @@ export declare class HelixHeadlessDateInput extends HelixHeadlessDateInput_base
      * and no mark whatsoever.
      */
     protected renderTrigger(): TemplateResult;
+    /** The line of text the dates are typed into, where the field shows no segments. */
+    private renderControl;
     protected render(): TemplateResult;
     /**
      * The value as a `Date`, at midnight UTC, or `null` while there is no date.

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, barredBy, customElement, fillTemplate, dateAsValue as fromDate, HelixFormElement, isDateValue, localeOf, MixinControllerOpen, MixinControllerValue, MixinField, MixinPickerEditing, MixinPickerField, MixinSegmentedField, MixinTokens, } from '@fusion.dev/helix-core';
+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 { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -43,8 +43,12 @@ let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinSegmented
         this.previousLabel = 'Previous month';
         this.previousYearLabel = 'Previous year';
         this.previousYearsLabel = 'Earlier years';
+        this.rangeLengthMessage = 'A range is two dates.';
+        this.rangeOverflowMessage = 'Choose a date on or before {max}.';
+        this.rangeUnderflowMessage = 'Choose a date on or after {min}.';
         this.removeLabel = 'Remove {name}';
         this.step = 1;
+        this.stepMismatchMessage = 'Choose one of the dates the calendar offers.';
         this.triggerLabel = 'Choose a date';
         this.draft = '';
         this.handleInput = (event) => {
@@ -95,13 +99,15 @@ let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinSegmented
                 this.updateComplete.then(() => this.returnFocus());
             }
         };
+        this.unavailableMessage = 'Choose a date that is available.';
         this.yearViewLabel = '{heading}. Choose a year';
         this.handleIconChange = () => {
             this.requestUpdate();
         };
     }
+    static { this.words = 'helix-date-input'; }
     get language() {
-        return localeOf(this, this.locale);
+        return wordsLocale(this);
     }
     placed(room) {
         const all = Math.max(1, Math.floor(this.months) || 1);
@@ -119,7 +125,7 @@ let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinSegmented
     }
     willUpdate(changed) {
         super.willUpdate(changed);
-        if (changed.has('months') || changed.has('locale')) {
+        if (changed.has('months') || changed.has('locale') || changed.has('calendar')) {
             this.fitted = undefined;
             this.wide = undefined;
         }
@@ -135,7 +141,8 @@ let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinSegmented
         return 'date';
     }
     get segmentLocale() {
-        return this.language;
+        const tag = calendarLocale(this.language, this.calendar);
+        return tag.includes('-ca-iso8601') ? tag : calendarLocale(tag, 'gregory');
     }
     written(date) {
         if (this.dateStyle === 'iso' || !isDateValue(date)) {
@@ -144,7 +151,7 @@ let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinSegmented
         const at = new Date(`${date}T00:00:00Z`);
         return Number.isNaN(at.getTime())
             ? date
-            : new Intl.DateTimeFormat(this.language || undefined, {
+            : new Intl.DateTimeFormat(calendarLocale(this.language, this.calendar) || undefined, {
                 dateStyle: this.dateStyle,
                 timeZone: 'UTC',
             }).format(at);
@@ -181,17 +188,13 @@ let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinSegmented
         if (this.min !== '' && held.some((one) => one < this.min)) {
             return [
                 'rangeUnderflow',
-                fillTemplate(this.rangeUnderflowMessage || 'Choose a date on or after {min}.', {
-                    min: this.written(this.min),
-                }),
+                formatWords(this, 'rangeUnderflowMessage', { min: this.written(this.min) }),
             ];
         }
         if (this.max !== '' && held.some((one) => one > this.max)) {
             return [
                 'rangeOverflow',
-                fillTemplate(this.rangeOverflowMessage || 'Choose a date on or before {max}.', {
-                    max: this.written(this.max),
-                }),
+                formatWords(this, 'rangeOverflowMessage', { max: this.written(this.max) }),
             ];
         }
         const why = held.map((one) => {
@@ -199,16 +202,13 @@ let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinSegmented
             return date ? barredBy(date, this) : null;
         });
         if (why.includes('listed')) {
-            return this.unavailableMessage || 'Choose a date that is available.';
+            return this.unavailableMessage;
         }
         if (why.includes('step')) {
-            return [
-                'stepMismatch',
-                this.stepMismatchMessage || 'Choose one of the dates the calendar offers.',
-            ];
+            return ['stepMismatch', this.stepMismatchMessage];
         }
         if (this.mode === 'range' && held.length > 2) {
-            return this.rangeLengthMessage || 'A range is two dates.';
+            return this.rangeLengthMessage;
         }
         return '';
     }
@@ -230,11 +230,12 @@ let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinSegmented
       mode=${this.mode ?? nothing}
       months=${this.fitted ?? this.months}
       .value=${this.picked}
+      calendar=${this.calendar ?? nothing}
       disable-dates=${this.disableDates || nothing}
       disable-days=${this.disableDays || nothing}
       first-day-of-week=${this.firstDayOfWeek ?? nothing}
       label=${this.calendarLabel}
-      locale=${this.language || nothing}
+      locale=${handedLocale(this) || nothing}
       max=${this.max || nothing}
       max-view=${this.maxView ?? nothing}
       min=${this.min || nothing}
@@ -270,7 +271,7 @@ let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinSegmented
                   part="date"
       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) })}
+                  dismiss-label=${formatWords(this, 'removeLabel', { name: this.written(date) })}
                   ?disabled=${this.isDisabled}
                   @helix-dismiss=${(event) => {
             event.stopPropagation();
@@ -284,37 +285,38 @@ let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinSegmented
         ${unsafeSVG(calendarBlank.content)}
       </svg></slot>`;
     }
+    renderControl() {
+        return 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}
+    />`;
+    }
     render() {
         return html `${this.renderLabel()}
       <div part="field" @keydown=${this.handleKeydown}>
         ${this.mode === 'multiple'
             ? this.renderTokenRow(this.shownDates.map((date) => this.renderTag(date)), this.restCount)
             : nothing}
-        ${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}
-              />`}
+        ${this.segmentsShown ? this.renderSegments() : this.renderControl()}
         <button
           part="trigger"
           type="button"
@@ -362,6 +364,10 @@ __decorate([
     property()
 ], HelixHeadlessDateInput.prototype, "autocomplete", void 0);
 __decorate([
+    property()
+], HelixHeadlessDateInput.prototype, "calendar", void 0);
+__decorate([
+    words,
     property({ attribute: 'calendar-label' })
 ], HelixHeadlessDateInput.prototype, "calendarLabel", void 0);
 __decorate([
@@ -404,57 +410,73 @@ __decorate([
     state()
 ], HelixHeadlessDateInput.prototype, "fitted", void 0);
 __decorate([
+    words,
     property({ attribute: 'month-view-label' })
 ], HelixHeadlessDateInput.prototype, "monthViewLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'next-label' })
 ], HelixHeadlessDateInput.prototype, "nextLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'next-year-label' })
 ], HelixHeadlessDateInput.prototype, "nextYearLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'next-years-label' })
 ], HelixHeadlessDateInput.prototype, "nextYearsLabel", void 0);
 __decorate([
+    words,
     property()
 ], HelixHeadlessDateInput.prototype, "placeholder", void 0);
 __decorate([
+    words,
     property({ attribute: 'previous-label' })
 ], HelixHeadlessDateInput.prototype, "previousLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'previous-year-label' })
 ], HelixHeadlessDateInput.prototype, "previousYearLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'previous-years-label' })
 ], HelixHeadlessDateInput.prototype, "previousYearsLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'range-length-message' })
 ], HelixHeadlessDateInput.prototype, "rangeLengthMessage", void 0);
 __decorate([
+    words,
     property({ attribute: 'range-overflow-message' })
 ], HelixHeadlessDateInput.prototype, "rangeOverflowMessage", void 0);
 __decorate([
+    words,
     property({ attribute: 'range-underflow-message' })
 ], HelixHeadlessDateInput.prototype, "rangeUnderflowMessage", void 0);
 __decorate([
+    words,
     property({ attribute: 'remove-label' })
 ], HelixHeadlessDateInput.prototype, "removeLabel", void 0);
 __decorate([
     property({ type: Number })
 ], HelixHeadlessDateInput.prototype, "step", void 0);
 __decorate([
+    words,
     property({ attribute: 'step-mismatch-message' })
 ], HelixHeadlessDateInput.prototype, "stepMismatchMessage", void 0);
 __decorate([
+    words,
     property({ attribute: 'trigger-label' })
 ], HelixHeadlessDateInput.prototype, "triggerLabel", void 0);
 __decorate([
     state()
 ], HelixHeadlessDateInput.prototype, "draft", void 0);
 __decorate([
+    words,
     property({ attribute: 'unavailable-message' })
 ], HelixHeadlessDateInput.prototype, "unavailableMessage", void 0);
 __decorate([
+    words,
     property({ attribute: 'year-view-label' })
 ], HelixHeadlessDateInput.prototype, "yearViewLabel", void 0);
 HelixHeadlessDateInput = __decorate([

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

@@ -1,4 +1,4 @@
-import { type CalendarView, HelixFormElement } from '@fusion.dev/helix-core';
+import { type CalendarView, type DateCalendar, 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").MixinPickerFeedbackInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerValueInterface) & typeof HelixFormElement;
 /**
@@ -15,6 +15,10 @@ 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`.
+ *
  * `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
  * first selected date, then the current month.
@@ -85,14 +89,33 @@ declare const HelixHeadlessDatePicker_base: (new (...args: any[]) => import("@fu
  * @cssstate invalid - While `invalid` is set or `feedback` says what is wrong.
  */
 export declare class HelixHeadlessDatePicker extends HelixHeadlessDatePicker_base {
+    /**
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-date-picker': { nextLabel: 'Nächster Monat' } })`.
+     */
+    static words: string;
     /**
      * The validation message for a value that is not a date.
      *
      * **Every sentence a control raises in the browser's bubble is a property**,
      * named for the validity flag it reports, so a form in another language
-     * speaks it. Absent is the control's own sentence, in English.
+     * speaks it. Unset is the sentence registered for the page's language, then
+     * the English. `{mode}` is `single`, `range` or `multiple`, so each can have
+     * its own sentence.
+     */
+    badInputMessage: string;
+    /**
+     * The calendar the heading, the days, and the months are written in:
+     * `gregory`, `buddhist`, `japanese`, `roc`, or `iso8601`, the five whose
+     * months are the Gregorian months.
+     *
+     * Absent is the locale's own where it is one of the five, such as
+     * `buddhist` for `th-TH` or `japanese` for `ja-JP-u-ca-japanese`, and
+     * `gregory` for every other, such as `persian` for `fa-IR`, so the heading
+     * names the Gregorian month the grid shows. The value is `YYYY-MM-DD` in
+     * every calendar.
      */
-    badInputMessage?: string;
+    calendar?: DateCalendar;
     /**
      * 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.
@@ -147,7 +170,7 @@ export declare class HelixHeadlessDatePicker extends HelixHeadlessDatePicker_bas
      * Shoelace and Web Awesome read it, then the runtime's own.
      */
     locale: string;
-    /** The locale the words are written in: `locale`, or the page's `lang`. */
+    /** The locale the words and dates are written in: `locale`, or the page's `lang`. */
     private get language();
     /**
      * Latest selectable date, as `YYYY-MM-DD`.
@@ -226,7 +249,7 @@ export declare class HelixHeadlessDatePicker extends HelixHeadlessDatePicker_bas
      * The validation message for a date after `max`. `{max}` is replaced with
      * `max`, written as a date in `locale`.
      */
-    rangeOverflowMessage?: string;
+    rangeOverflowMessage: string;
     /**
      * The date the grid's tab stop is on.
      *
@@ -370,7 +393,7 @@ export declare class HelixHeadlessDatePicker extends HelixHeadlessDatePicker_bas
      * The validation message for a date before `min`. `{min}` is replaced with
      * `min`, written as a date in `locale`.
      */
-    rangeUnderflowMessage?: string;
+    rangeUnderflowMessage: string;
     /** Refuses every change while read-only. See `readOnly`. */
     requestValue(next: string): boolean;
     /**
@@ -408,16 +431,16 @@ export declare class HelixHeadlessDatePicker extends HelixHeadlessDatePicker_bas
     /**
      * The validation message for a date that `step` skips.
      */
-    stepMismatchMessage?: string;
+    stepMismatchMessage: string;
     /**
      * The validation message for a date that `disable-dates` or `disable-days`
      * bars.
      */
-    unavailableMessage?: string;
+    unavailableMessage: string;
     /**
      * The validation message for a required date picker with no date chosen.
      */
-    valueMissingMessage?: string;
+    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.
@@ -493,13 +516,13 @@ export declare class HelixHeadlessDatePicker extends HelixHeadlessDatePicker_bas
      * The three date formatters, built once per locale rather than per render.
      *
      * `Intl.DateTimeFormat` costs about a quarter of a millisecond to construct
-     * and these depend on nothing but `locale`, so building them inside the
-     * per-month render is three constructions for every month on show, on every
-     * update: a two-month calendar rebuilds six each time an arrow key moves the
-     * anchor.
+     * and these depend on nothing but `locale` and `calendar`, so building them
+     * inside the per-month render is three constructions for every month on
+     * show, on every update: a two-month calendar rebuilds six each time an
+     * arrow key moves the anchor.
      *
-     * Keyed on the locale so a change to it is picked up, which a plain lazy
-     * field would not do.
+     * Keyed on the locale with its calendar, so a change to either is picked
+     * up, which a plain lazy field would not do.
      */
     private cachedFormats;
     private get formats();