@fusion.dev/helix-headless 0.159.0 → 0.161.0

package/dist/date-picker/root/date-picker-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 { addDays, addMonths, valueAsDate as asDate, barredBy, calendarLocale, customElement, formatWords, dateAsValue as fromDate, HelixFormElement, HelixNavigateEvent, handedLocale, hostAria, inlineStep, commaList as list, MixinControllerValue, MixinPickerFeedback, MONTH_CALENDARS, monthOf, monthOut, monthSystem, periodCells, periodKey, reportValues, requestChange, todayIn, weekendOf, weekStartOf, words, wordsLocale, YEARS_SHOWN, yearOut, yearPageOf, } from '@fusion.dev/helix-core';
+import { addDays, addMonths, valueAsDate as asDate, barredBy, calendarLocale, customElement, formatWords, dateAsValue as fromDate, HelixFormElement, HelixNavigateEvent, handedLocale, hostAria, inlineStep, commaList as list, MixinControllerValue, MixinPickerFeedback, monthOut, monthSystem, periodCells, periodKey, reportValues, requestChange, todayIn, weekendOf, weekStartOf, words, wordsLocale, YEARS_SHOWN, yearOut, yearPageOf, } from '@fusion.dev/helix-core';
 import { caretLeft, caretRight } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -34,6 +34,7 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinPickerF
         this.max = '';
         this.min = '';
         this.monthState = undefined;
+        this.browsed = false;
         this.months = 1;
         this.monthViewLabel = '{heading}. Choose a month';
         this.nextLabel = 'Next month';
@@ -45,8 +46,12 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinPickerF
         this.rangeOverflowMessage = 'Choose a date on or before {max}.';
         this.focused = '';
         this.choosing = false;
+        this.previewed = '';
+        this.handleGridLeave = () => {
+            this.previewed = '';
+        };
         this.handleKeydown = (event) => {
-            if (this.view !== 'day' && !this.ownMonths) {
+            if (this.view !== 'day') {
                 this.handlePeriodKeydown(event);
                 return;
             }
@@ -80,7 +85,7 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinPickerF
             }
             else {
                 const step = event.key === 'PageUp' ? -1 : 1;
-                this.moveTo(this.system.add(from, event.shiftKey ? step * 12 : step));
+                this.moveTo(event.shiftKey ? this.system.addYears(from, step) : this.system.add(from, step));
             }
             event.preventDefault();
         };
@@ -91,8 +96,9 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinPickerF
                 return;
             }
             if (this.view === 'day') {
-                this.pageYear = this.shown.getUTCFullYear();
-                this.periodFocus = this.shown.getUTCMonth();
+                const { month, year } = this.system.parts(this.shown);
+                this.pageYear = year;
+                this.periodFocus = month - 1;
                 this.zoom('month');
             }
             else if (this.view === 'month' && this.maxView === 'year') {
@@ -103,6 +109,7 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinPickerF
         this.rangeUnderflowMessage = 'Choose a date on or after {min}.';
         this.readOnly = false;
         this.required = false;
+        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 = '';
@@ -120,6 +127,7 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinPickerF
     }
     set month(next) {
         const previous = this.month;
+        this.browsed = false;
         this.monthState = next;
         this.requestUpdate('month', previous);
     }
@@ -143,6 +151,30 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinPickerF
         const [first, second] = [dates[0], dates[1]];
         return first <= second ? [first, second] : [second, first];
     }
+    get pending() {
+        return this.mode === 'range' && this.selected.length === 1;
+    }
+    get drawnRange() {
+        const range = this.range;
+        if (range) {
+            return { ends: range, preview: false };
+        }
+        const end = this.previewed || this.focused;
+        const start = this.selected[0];
+        if (!this.pending ||
+            start === undefined ||
+            end === '' ||
+            end === start ||
+            asDate(end) === null) {
+            return null;
+        }
+        return { ends: start <= end ? [start, end] : [end, start], preview: true };
+    }
+    preview(iso) {
+        if (this.pending && iso !== this.previewed) {
+            this.previewed = iso;
+        }
+    }
     isSelected(iso) {
         const range = this.range;
         if (range) {
@@ -161,9 +193,6 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinPickerF
     get system() {
         return monthSystem(this.calendar);
     }
-    get ownMonths() {
-        return MONTH_CALENDARS.includes(this.calendar ?? '');
-    }
     get derivedMonth() {
         const from = asDate(this.selected[0] ?? '') ?? asDate(todayIn(this.timeZone)) ?? new Date();
         return this.system.start(from);
@@ -226,6 +255,7 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinPickerF
         requestChange({
             apply: (month) => {
                 const previous = this.month;
+                this.browsed = true;
                 this.monthState = month;
                 this.requestUpdate('month', previous);
             },
@@ -237,6 +267,7 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinPickerF
     moveTo(wanted) {
         const date = this.clamp(wanted);
         this.focused = fromDate(date);
+        this.previewed = '';
         this.show(date);
         this.updateComplete.then(() => {
             this.renderRoot.querySelector('[part~="cell"][tabindex="0"]')?.focus();
@@ -262,23 +293,25 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinPickerF
             next = [iso];
         }
         this.focused = iso;
+        this.previewed = '';
         this.choosing = true;
         this.requestValue(next.join(','));
     }
     get periodYear() {
-        return this.pageYear ?? this.shown.getUTCFullYear();
+        return this.pageYear ?? this.system.parts(this.shown).year;
     }
     get periodStop() {
-        if (this.periodFocus !== undefined) {
-            return this.periodFocus;
+        if (this.view === 'year') {
+            return this.periodFocus ?? this.periodYear;
         }
-        return this.view === 'year' ? this.periodYear : this.shown.getUTCMonth();
+        const index = this.periodFocus ?? this.system.parts(this.shown).month - 1;
+        return Math.min(index, this.system.months(this.periodYear) - 1);
     }
     monthOut(first) {
-        return monthOut(first, this.min, this.max);
+        return monthOut(first, this.min, this.max, this.system);
     }
     yearOut(year) {
-        return yearOut(year, this.min, this.max);
+        return yearOut(year, this.min, this.max, this.system);
     }
     zoom(view) {
         this.view = view;
@@ -293,8 +326,8 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinPickerF
                 return;
             }
             this.pageYear = at;
-            const month = this.shown.getUTCMonth();
-            const open = Array.from({ length: 12 }, (_, index) => index).filter((index) => !this.monthOut(firstOf(at, index)));
+            const month = this.system.parts(this.shown).month - 1;
+            const open = Array.from({ length: this.system.months(at) }, (_, index) => index).filter((index) => !this.monthOut(this.system.from(at, index + 1, 1)));
             this.periodFocus = open.includes(month)
                 ? month
                 : ([...open].sort((left, right) => Math.abs(left - month) - Math.abs(right - month))[0] ??
@@ -302,12 +335,12 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinPickerF
             this.zoom('month');
             return;
         }
-        const first = firstOf(this.periodYear, at);
+        const first = this.system.from(this.periodYear, at + 1, 1);
         if (this.monthOut(first)) {
             return;
         }
         this.show(first);
-        if (this.month !== monthOf(first)) {
+        if (this.month !== this.system.key(first)) {
             return;
         }
         this.pageYear = undefined;
@@ -344,7 +377,7 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinPickerF
             this.choosePeriod(stop);
             return;
         }
-        const moved = periodKey(this.view === 'year' ? 'year' : 'month', stop, this.periodYear, event.key, inlineStep(this, event.key));
+        const moved = periodKey(this.view === 'year' ? 'year' : 'month', stop, this.periodYear, event.key, inlineStep(this, event.key), (year) => this.system.months(year));
         if (moved === null) {
             return;
         }
@@ -354,10 +387,26 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinPickerF
         void this.updateComplete.then(() => this.focus());
     }
     focus(options) {
+        if (this.isUpdatePending) {
+            void this.updateComplete.then(() => this.focus(options));
+            return;
+        }
         this.renderRoot
             ?.querySelector('[part~="cell"][tabindex="0"], [part~="period"][tabindex="0"]')
             ?.focus(options);
     }
+    showChosen() {
+        this.focused = '';
+        this.pageYear = undefined;
+        this.periodFocus = undefined;
+        this.view = 'day';
+        if (this.browsed) {
+            this.browsed = false;
+            const previous = this.month;
+            this.monthState = undefined;
+            this.requestUpdate('month', previous);
+        }
+    }
     connectedCallback() {
         super.connectedCallback();
         this.addEventListener('keydown', this.handleKeydown);
@@ -372,6 +421,28 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinPickerF
         }
         return super.requestValue(next);
     }
+    get selectionWords() {
+        const dates = this.selected.map((one) => asDate(one));
+        const first = dates[0];
+        if (!first || dates.some((one) => one === null)) {
+            return '';
+        }
+        const { long } = this.formats;
+        const range = this.range;
+        const kind = range
+            ? 'range'
+            : this.pending
+                ? 'start'
+                : this.mode === 'multiple'
+                    ? 'dates'
+                    : 'date';
+        return formatWords(this, 'selectionLabel', {
+            count: dates.length,
+            end: range ? long.format(asDate(range[1])) : '',
+            kind,
+            start: long.format(range ? asDate(range[0]) : first),
+        });
+    }
     spoken(iso) {
         const date = asDate(iso);
         return date ? this.formats.long.format(date) : iso;
@@ -399,24 +470,38 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinPickerF
             : ['stepMismatch', this.stepMismatchMessage];
     }
     reportRequired() {
-        const anchor = this.partNamed('grid') ?? undefined;
-        if (this.required && this.value === '') {
-            this.internals.setValidity({ valueMissing: true }, this.valueMissingMessage, anchor);
+        const problem = this.problem;
+        if (problem) {
+            this.internals.setValidity(problem[0], problem[1], this.partNamed('grid') ?? undefined);
             return;
         }
+        this.internals.setValidity({});
+    }
+    get problem() {
+        if (this.required && this.value === '') {
+            return [{ valueMissing: true }, this.valueMissingMessage];
+        }
         const held = this.selected;
         if (held.length > 0 && held.some((one) => asDate(one) === null)) {
-            this.internals.setValidity({ badInput: true }, formatWords(this, 'badInputMessage', { mode: this.mode ?? 'single' }), anchor);
-            return;
+            return [
+                { badInput: true },
+                formatWords(this, 'badInputMessage', { mode: this.mode ?? 'single' }),
+            ];
         }
         for (const one of held) {
             const fault = this.fault(one);
             if (fault) {
-                this.internals.setValidity({ [fault[0]]: true }, fault[1], anchor);
-                return;
+                return [{ [fault[0]]: true }, fault[1]];
             }
         }
-        this.internals.setValidity({});
+        return undefined;
+    }
+    get failure() {
+        const problem = this.problem;
+        if (!problem) {
+            return undefined;
+        }
+        return problem[0].valueMissing ? 'missing' : 'refused';
     }
     willUpdate(changed) {
         super.willUpdate(changed);
@@ -431,6 +516,10 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinPickerF
             role: 'group',
         });
         this.internals.ariaDisabled = this.isDisabled ? 'true' : null;
+        this.toggleState('blank', this.value === '');
+        this.toggleState('range-pending', this.pending);
+        this.toggleState('month-view', this.view === 'month');
+        this.toggleState('year-view', this.view === 'year');
         this.report();
     }
     updated(changed) {
@@ -448,9 +537,7 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinPickerF
         return Math.max(1, Math.floor(this.months) || 1);
     }
     get formats() {
-        const language = this.ownMonths
-            ? `${new Intl.Locale(this.language || new Intl.DateTimeFormat().resolvedOptions().locale, { calendar: this.calendar ?? 'gregory' })}`
-            : calendarLocale(this.language, this.calendar);
+        const language = calendarLocale(this.language, this.calendar);
         if (this.cachedFormats?.locale === language) {
             return this.cachedFormats;
         }
@@ -489,7 +576,9 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinPickerF
         const weeks = this.weeksOf(month);
         const anchor = fromDate(this.anchor);
         const today = todayIn(this.timeZone);
-        const range = this.range;
+        const drawn = this.drawnRange;
+        const range = drawn?.ends ?? null;
+        const preview = drawn?.preview === true;
         const weekend = this.weekend;
         const first = index === 0;
         const last = index === this.monthCount - 1;
@@ -526,8 +615,11 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinPickerF
         part="grid"
         role="grid"
         aria-label=${heading}
+        aria-describedby=${this.selectionWords === '' ? nothing : 'selection'}
+        aria-multiselectable=${this.mode === undefined ? nothing : 'true'}
         aria-readonly=${this.readOnly ? 'true' : nothing}
         data-unset=${this.value === '' ? '' : nothing}
+        @pointerleave=${this.handleGridLeave}
       >
         <div part="week" role="row">
           ${weeks[0]?.map((date) => html `<span part="weekday" role="columnheader" aria-label=${weekdayName.format(date)}
@@ -553,11 +645,13 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinPickerF
                 data-outside=${outside ? '' : nothing}
                 data-range-end=${end ? '' : nothing}
                 data-range-middle=${middle ? '' : nothing}
+                data-range-preview=${preview && (start || middle || end) ? '' : nothing}
                 data-range-start=${start ? '' : nothing}
                 data-today=${iso === today ? '' : nothing}
                 data-weekend=${weekend.includes(date.getUTCDay()) ? '' : nothing}
                 tabindex=${!outside && iso === anchor && !this.isDisabled ? '0' : '-1'}
                 @click=${outside ? nothing : () => this.select(date)}
+                @pointerenter=${outside ? nothing : () => this.preview(iso)}
                 ><span
                   part="day${!outside && selected && !middle ? ' day-selected' : ''}${iso === today ? ' day-today' : ''}${outside ? ' day-outside' : ''}${disabled ? ' day-disabled' : ''}${weekend.includes(date.getUTCDay()) ? ' day-weekend' : ''}"
                   >${this.renderDay(date, outside)}</span
@@ -573,7 +667,6 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinPickerF
     }
     renderHeadingText(text, label) {
         const steps = this.maxView !== undefined &&
-            !this.ownMonths &&
             (this.view === 'day' || (this.view === 'month' && this.maxView === 'year'));
         if (!steps) {
             return text;
@@ -591,14 +684,15 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinPickerF
         const years = this.view === 'year';
         const page = years ? yearPageOf(this.periodYear) : this.periodYear;
         const heading = years
-            ? `${yearName.format(firstOf(page, 0))} – ${yearName.format(firstOf(page + YEARS_SHOWN - 1, 0))}`
-            : yearName.format(firstOf(page, 0));
+            ? `${yearName.format(this.system.from(page, 1, 1))} – ${yearName.format(this.system.from(page + YEARS_SHOWN - 1, 1, 1))}`
+            : yearName.format(this.system.from(page, 1, 1));
         const stop = this.periodStop;
         const cells = periodCells({
             max: this.max,
             min: this.min,
             page: this.periodYear,
             shown: this.shown,
+            system: this.system,
             today: todayIn(this.timeZone),
             view: years ? 'year' : 'month',
         }).map(({ at, chosen, current, first, out }) => {
@@ -615,7 +709,7 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinPickerF
         >${words}</span
       >`;
         });
-        const rows = [0, 3, 6, 9].map((from) => html `<div part="period-row" role="row">${cells.slice(from, from + 3)}</div>`);
+        const rows = Array.from({ length: Math.ceil(cells.length / 3) }, (_, row) => row * 3).map((from) => html `<div part="period-row" role="row">${cells.slice(from, from + 3)}</div>`);
         return html `<div part="month">
       <div part="header">
         <button
@@ -644,7 +738,7 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinPickerF
     </div>`;
     }
     render() {
-        if (this.view !== 'day' && !this.ownMonths) {
+        if (this.view !== 'day') {
             return html `<slot name="header"></slot>
         <div part="months" style="--date-picker-column-count: 1">${this.renderPeriods()}</div>
         <slot name="footer"></slot>${this.renderPickerFeedback()}`;
@@ -655,6 +749,9 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinPickerF
       <div part="months" style="--date-picker-column-count: ${Math.min(count, 2)}">
         ${Array.from({ length: count }, (_, index) => this.renderMonth(this.system.add(shown, index), index))}
       </div>
+      <span part="selection" id="selection" data-spoken aria-live="polite"
+        >${this.selectionWords}</span
+      >
       <slot name="footer"></slot>${this.renderPickerFeedback()}`;
     }
     get valueAsDate() {
@@ -755,6 +852,9 @@ __decorate([
 __decorate([
     state()
 ], HelixHeadlessDatePicker.prototype, "focused", void 0);
+__decorate([
+    state()
+], HelixHeadlessDatePicker.prototype, "previewed", void 0);
 __decorate([
     state()
 ], HelixHeadlessDatePicker.prototype, "pageYear", void 0);
@@ -771,6 +871,10 @@ __decorate([
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessDatePicker.prototype, "required", void 0);
+__decorate([
+    words,
+    property({ attribute: 'selection-label' })
+], HelixHeadlessDatePicker.prototype, "selectionLabel", void 0);
 __decorate([
     property({ type: Number })
 ], HelixHeadlessDatePicker.prototype, "step", void 0);

package/dist/element-events.generated.js

@@ -36,6 +36,7 @@ registerElementEvents({
     'helix-headless-chat-message': ['helix-send'],
     'helix-headless-checkbox': ['change', 'helix-before-toggle', 'input'],
     'helix-headless-checkbox-group': ['change', 'helix-before-change', 'input'],
+    'helix-headless-code-block': ['helix-before-toggle', 'helix-toggle'],
     'helix-headless-color-input': [
         'change',
         'helix-before-change',
@@ -92,6 +93,7 @@ registerElementEvents({
         'helix-before-change',
         'helix-before-close',
         'helix-before-open',
+        'helix-clear',
         'input',
         'toggle',
     ],
@@ -252,11 +254,14 @@ registerElementEvents({
     'helix-headless-tab-panel': ['helix-load'],
     'helix-headless-table': [
         'helix-before-reorder',
+        'helix-before-toggle',
+        'helix-load-more',
         'helix-reorder',
         'helix-select',
         'helix-selected',
         'helix-sort',
         'helix-sorted',
+        'helix-toggle',
     ],
     'helix-headless-table-column': ['helix-before-resize', 'helix-resized'],
     'helix-headless-tabs': ['helix-activate', 'helix-before-activate', 'helix-select'],
@@ -268,6 +273,7 @@ registerElementEvents({
         'helix-before-change',
         'helix-before-close',
         'helix-before-open',
+        'helix-clear',
         'input',
         'toggle',
     ],

package/dist/format-date/fields.js

@@ -3,6 +3,7 @@ export const FIELD = {
     day: (value) => html `<span part="day">${value}</span>`,
     dayPeriod: (value) => html `<span part="day-period">${value}</span>`,
     era: (value) => html `<span part="era">${value}</span>`,
+    fractionalSecond: (value) => html `<span part="fractional-second">${value}</span>`,
     hour: (value) => html `<span part="hour">${value}</span>`,
     minute: (value) => html `<span part="minute">${value}</span>`,
     month: (value) => html `<span part="month">${value}</span>`,

package/dist/format-date/options.d.ts

@@ -5,7 +5,9 @@
 export interface Asked {
     dateStyle?: 'full' | 'long' | 'medium' | 'short' | undefined;
     day?: 'numeric' | '2-digit' | undefined;
+    dayPeriod?: 'long' | 'narrow' | 'short' | undefined;
     era?: 'long' | 'narrow' | 'short' | undefined;
+    fractionalSecondDigits?: 1 | 2 | 3 | undefined;
     hour?: 'numeric' | '2-digit' | undefined;
     hourCycle?: 'h11' | 'h12' | 'h23' | 'h24' | undefined;
     minute?: 'numeric' | '2-digit' | undefined;
@@ -13,7 +15,7 @@ export interface Asked {
     second?: 'numeric' | '2-digit' | undefined;
     timeStyle?: 'full' | 'long' | 'medium' | 'short' | undefined;
     timeZone?: string | undefined;
-    timeZoneName?: 'long' | 'short' | undefined;
+    timeZoneName?: 'long' | 'longGeneric' | 'longOffset' | 'short' | 'shortGeneric' | 'shortOffset' | undefined;
     weekday?: 'long' | 'short' | 'narrow' | undefined;
     year?: 'numeric' | '2-digit' | undefined;
 }

package/dist/format-date/options.js

@@ -1,5 +1,8 @@
 import { FIELD } from './fields.js';
-const FIELDS = Object.keys(FIELD);
+const FIELDS = [
+    ...Object.keys(FIELD).filter((one) => one !== 'fractionalSecond'),
+    'fractionalSecondDigits',
+];
 export const formatOptions = (asked, dateOnly = false) => {
     const options = {
         hourCycle: asked.hourCycle,

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

@@ -1,4 +1,4 @@
-import { type DateCalendar, HelixElement } from '@fusion.dev/helix-core';
+import { type DateCalendar, HelixElement, type MonthCalendar } from '@fusion.dev/helix-core';
 import { nothing, type PropertyValues, type TemplateResult } from 'lit';
 /**
  * @summary A timestamp, formatted for the user's locale.
@@ -45,8 +45,8 @@ import { nothing, type PropertyValues, type TemplateResult } from 'lit';
  *
  * **A date is written in a calendar Date Picker draws**: 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`. `calendar` picks one of
- * the five.
+ * and `gregory` where they are not, as for `fa-IR`. `calendar` picks any of
+ * them, `persian` and `hebrew` included.
  *
  * @since 0.1.0
  * @status stable
@@ -57,6 +57,7 @@ import { nothing, type PropertyValues, type TemplateResult } from 'lit';
  * @csspart day - The day of the month, with `fields`.
  * @csspart day-period - AM or PM, or the locale's word for the part of the day, with `fields`.
  * @csspart era - The era, such as AD, with `fields` and `era`.
+ * @csspart fractional-second - The fraction of a second, with `fields` and `fractional-second-digits`.
  * @csspart hour - The hour, with `fields`.
  * @csspart minute - The minute, with `fields`.
  * @csspart month - The month, with `fields`.
@@ -72,14 +73,16 @@ import { nothing, type PropertyValues, type TemplateResult } from 'lit';
 export declare class HelixHeadlessFormatDate extends HelixElement {
     /**
      * The calendar a date is written in: `gregory`, `buddhist`, `japanese`,
-     * `roc`, or `iso8601`, the calendars Date Picker and Date Input draw.
+     * `roc`, or `iso8601`, or a calendar with months of its own, such as
+     * `persian`, `hebrew`, `islamic-umalqura`, `ethiopic`, or `chinese`: every
+     * calendar Date Picker and Date Input draw.
      *
-     * Absent is the locale's own where it is one of the five, such as
-     * `buddhist` for `th-TH`, and `gregory` for every other, such as `persian`
-     * for `fa-IR`, so a date written here reads as the same date a Date Picker
-     * beside it shows.
+     * Absent is the locale's own where its months are the Gregorian months,
+     * such as `buddhist` for `th-TH`, and `gregory` for every other, such as
+     * `persian` for `fa-IR`, so a date written here reads as the same date a
+     * Date Picker beside it shows. Write `calendar="persian"` for Mehr 14, 1405.
      */
-    calendar?: DateCalendar;
+    calendar?: DateCalendar | MonthCalendar;
     /**
      * The timestamp, in any format `Date` can parse.
      *
@@ -107,6 +110,12 @@ export declare class HelixHeadlessFormatDate extends HelixElement {
      * How the day of the month is written, where a date is shown.
      */
     day?: 'numeric' | '2-digit';
+    /**
+     * Writes the part of the day in words, such as "in the morning" or "at
+     * night", in its `long`, `short`, or `narrow` form, where `hour` is on a
+     * twelve-hour clock.
+     */
+    dayPeriod?: 'long' | 'narrow' | 'short';
     /**
      * Shows how long ago the timestamp was, in a compact form such as "3h", in
      * place of the date.
@@ -130,6 +139,11 @@ export declare class HelixHeadlessFormatDate extends HelixElement {
      * way.
      */
     fields?: boolean;
+    /**
+     * How many digits of a fraction of a second to write after `second`: 1, 2,
+     * or 3, as in 09:41:07.250.
+     */
+    fractionalSecondDigits?: 1 | 2 | 3;
     /**
      * Draws an `elapsed` or `relative` reading once and leaves it, where it
      * would otherwise move on as it goes stale.
@@ -206,9 +220,11 @@ export declare class HelixHeadlessFormatDate extends HelixElement {
      */
     timeZone?: string;
     /**
-     * Shows the name of the time zone, in its `long` or `short` form.
+     * Shows the name of the time zone: `long` or `short`, as Pacific Daylight
+     * Time or PDT, `longOffset` or `shortOffset`, as GMT-07:00 or GMT-7, or
+     * `longGeneric` or `shortGeneric`, as Pacific Time or PT.
      */
-    timeZoneName?: 'long' | 'short';
+    timeZoneName?: 'long' | 'longGeneric' | 'longOffset' | 'short' | 'shortGeneric' | 'shortOffset';
     /**
      * How the weekday is written, where one is shown.
      */

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

@@ -132,6 +132,9 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessFormatDate.prototype, "day", void 0);
+__decorate([
+    property({ attribute: 'day-period' })
+], HelixHeadlessFormatDate.prototype, "dayPeriod", void 0);
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessFormatDate.prototype, "elapsed", void 0);
@@ -141,6 +144,9 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], HelixHeadlessFormatDate.prototype, "fields", void 0);
+__decorate([
+    property({ attribute: 'fractional-second-digits', type: Number })
+], HelixHeadlessFormatDate.prototype, "fractionalSecondDigits", void 0);
 __decorate([
     property({ type: Boolean })
 ], HelixHeadlessFormatDate.prototype, "frozen", void 0);

package/dist/listbox/root/listbox-root.js

@@ -98,6 +98,11 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
                 }
                 else if (event.key === ' ') {
                     event.preventDefault();
+                    const at = this.currentValue || shown.find((option) => !option.disabled)?.value;
+                    if (at) {
+                        this.activeValue = at;
+                        this.choose(at);
+                    }
                 }
                 return;
             }

package/dist/notifications/notification/notification.d.ts

@@ -56,6 +56,7 @@ declare const HelixHeadlessNotification_base: (new (...args: any[]) => import("@
  * @csspart time-day - Format Date's `day`, forwarded for a time drawn as fields. An elapsed time draws none.
  * @csspart time-day-period - Format Date's `day-period`, forwarded for a time drawn as fields. An elapsed time draws none.
  * @csspart time-era - Format Date's `era`, forwarded for a time drawn as fields. An elapsed time draws none.
+ * @csspart time-fractional-second - Format Date's `fractional-second`, forwarded for a time drawn as fields. An elapsed time draws none.
  * @csspart time-hour - Format Date's `hour`, forwarded for a time drawn as fields. An elapsed time draws none.
  * @csspart time-minute - Format Date's `minute`, forwarded for a time drawn as fields. An elapsed time draws none.
  * @csspart time-month - Format Date's `month`, forwarded for a time drawn as fields. An elapsed time draws none.

package/dist/notifications/notification/notification.js

@@ -104,7 +104,8 @@ let HelixHeadlessNotification = class HelixHeadlessNotification extends MixinDis
     renderTime() {
         const stamp = this.tag('format-date');
         return html `<${stamp}
-      exportparts="time, day: time-day, day-period: time-day-period, era: time-era, hour: time-hour,
+      exportparts="time, day: time-day, day-period: time-day-period, era: time-era,
+        fractional-second: time-fractional-second, hour: time-hour,
         minute: time-minute, month: time-month, second: time-second,
         time-zone-name: time-time-zone-name, weekday: time-weekday, year: time-year"
       elapsed