@fusion.dev/helix-headless 0.145.0 → 0.147.0

package/dist/data-table/root/data-table-root.js

@@ -5,18 +5,18 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 var HelixHeadlessDataTable_1;
-import { countLabel, customElement, deepActiveElement, deepContains, fillTemplate, formatNumbers, HelixActivateEvent, HelixElement, HelixExpandEvent, HelixFilterEvent, HelixFilteredEvent, HelixLoadMoreEvent, HelixNavigateEvent, HelixReorderEvent, HelixReorderedEvent, HelixSelectEvent, HelixSelectedEvent, HelixSortEvent, HelixSortedEvent, hostAria, inlineStep, isRtl, MixinCollection, markRegion, rangeAdd, reportRuntime, requestChange, Typeahead, typesCharacter, VirtualizeController, writtenList, } from '@fusion.dev/helix-core';
+import { anchorAt, arranged, commaList, countLabel, customElement, cycle, deepActiveElement, deepContains, everyState, fillTemplate, format, formatNumbers, HelixActivateEvent, HelixElement, HelixExpandEvent, HelixFilterEvent, HelixFilteredEvent, HelixLoadMoreEvent, HelixNavigateEvent, HelixReorderEvent, HelixReorderedEvent, HelixSelectEvent, HelixSelectedEvent, HelixSortEvent, HelixSortedEvent, hostAria, inlineStep, inRowOrder, isRtl, MixinCollection, markRegion, onAndroid, ordered, parse, rangeAdd, reportRuntime, requestChange, selectsAll, Typeahead, toggleEvery, treeArrow, typesCharacter, VirtualizeController, valueAt, window_, writtenList, } from '@fusion.dev/helix-core';
 import { caretDown, caretRight } from '@fusion.dev/helix-icons';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 import { html } from 'lit/static-html.js';
-import { at, edgeOf } from '../../table/column/table-column.js';
+import { edgeOf } from '../../table/column/table-column.js';
 import '../../checkbox/index.js';
 import '../../pagination/index.js';
+import { toggledOpen } from '../keys.js';
 import { grow } from '../tree.js';
-import { arranged, cycle, format, ordered, parse, window_, } from './order.js';
 const CONTROL = [
     'a[href]',
     'button:not([disabled])',
@@ -79,7 +79,6 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         this.typeahead = new Typeahead();
         this.anchorKey = undefined;
         this.shiftPressed = false;
-        this.askedAt = -1;
         this.counts = {
             columns: undefined,
             rows: undefined,
@@ -168,7 +167,7 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
             const last = this.drawnPage.length - 1 + (this.moreDrawn ? 1 : 0);
             const edge = this.width - 1;
             const control = event.ctrlKey || event.metaKey;
-            if (control && !event.shiftKey && event.key.toLowerCase() === 'a' && this.selectable) {
+            if (!event.shiftKey && selectsAll(event) && this.selectable) {
                 event.preventDefault();
                 this.requestSelected(new Set([...this.chosen, ...this.everyKey]));
                 return;
@@ -427,7 +426,7 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         return value;
     }
     get opened() {
-        return new Set(writtenList(this.expanded.replaceAll(',', ' ')));
+        return new Set(commaList(this.expanded));
     }
     flat() {
         if (this.childField) {
@@ -472,7 +471,7 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         if (!this.rowKey) {
             return String(index);
         }
-        const value = at(row, this.rowKey);
+        const value = valueAt(row, this.rowKey);
         return value === undefined || value === null ? String(index) : String(value);
     }
     currentRow(rows) {
@@ -648,18 +647,15 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
             },
             event: (value) => new HelixSelectEvent({ value }),
             host: this,
-            next: [...keys].join(','),
+            next: inRowOrder(keys, this.everyKey).join(','),
         });
     }
     get chosen() {
-        return new Set(this.selected
-            .split(',')
-            .map((key) => key.trim())
-            .filter(Boolean));
+        return new Set(commaList(this.selected));
     }
     keyOf(row, place) {
         if (this.rowKey) {
-            const value = at(row, this.rowKey);
+            const value = valueAt(row, this.rowKey);
             return value === undefined || value === null ? String(place) : String(value);
         }
         if (this.selectable && !this.warnedAboutKey && typeof window !== 'undefined') {
@@ -684,11 +680,8 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
     }
     selectRange(to, from = to) {
         const keys = this.pageKeys;
-        let anchor = this.anchorKey === undefined ? -1 : keys.indexOf(this.anchorKey);
-        if (anchor < 0) {
-            anchor = from;
-            this.anchorKey = keys[from];
-        }
+        const { anchor, anchorKey } = anchorAt(keys, this.anchorKey, from);
+        this.anchorKey = anchorKey;
         const next = rangeAdd([...this.chosen], keys, anchor, to);
         if (next) {
             this.requestSelected(new Set(next));
@@ -712,13 +705,7 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         if (!this.windowed || !this.loadMore || this.loading) {
             return;
         }
-        const screen = this.partNamed('table')?.clientHeight ?? 0;
-        const count = this.rows.length;
-        if (screen > 0 &&
-            count > 0 &&
-            this.askedAt !== count &&
-            this.virtualize.remaining() <= screen) {
-            this.askedAt = count;
+        if (this.virtualize.endInSight(this.rows.length)) {
             this.askForMore();
         }
     }
@@ -734,19 +721,7 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         this.requestSelected(keys);
     }
     chooseAll() {
-        const every = this.everyKey;
-        const keys = this.chosen;
-        if (every.length > 0 && every.every((key) => keys.has(key))) {
-            for (const key of every) {
-                keys.delete(key);
-            }
-        }
-        else {
-            for (const key of every) {
-                keys.add(key);
-            }
-        }
-        this.requestSelected(keys);
+        this.requestSelected(new Set(toggleEvery(this.chosen, this.everyKey)));
     }
     moveColumn(field, by) {
         const drawn = this.shownColumns.filter((column) => column.field !== '');
@@ -776,7 +751,7 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
             return /[",\r\n]/.test(text) ? `"${text.replaceAll('"', '""')}"` : text;
         };
         const head = columns.map((column) => quote(column.textContent?.trim() || column.field));
-        const body = rows.map((row) => columns.map((column) => quote(at(row, column.field))));
+        const body = rows.map((row) => columns.map((column) => quote(valueAt(row, column.field))));
         return [head, ...body].map((line) => line.join(',')).join('\r\n');
     }
     requestFilter(next) {
@@ -912,6 +887,7 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         const stop = this.currentRow(this.drawnPage) === -1 ? this.currentColumn : -1;
         const offset = this.selectable ? 1 : 0;
         const shown = this.shownColumns;
+        const android = onAndroid();
         for (const column of this.tableColumns) {
             column.movable = this.reorderable && column.field !== '';
             column.gridCell = true;
@@ -922,6 +898,13 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
                         ? 'ascending'
                         : 'descending'
                     : undefined;
+            column.sortWords =
+                android && column.sorted
+                    ? fillTemplate(this.sortedLabel, {
+                        column: column.textContent?.trim() || column.field,
+                        order: column.sorted === 'ascending' ? this.ascendingLabel : this.descendingLabel,
+                    })
+                    : '';
         }
     }
     renderCell(column, row, picked, place, stop, header) {
@@ -951,18 +934,11 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
     ><svg part="toggle-mark" ?data-mirror=${!open} fill="currentColor" viewBox=${glyph.viewBox}>${unsafeSVG(glyph.content)}</svg></span>`;
     }
     toggleOpen(row, open) {
-        const key = this.rowKeyOf(row, -1);
-        const keys = this.opened;
-        if (keys.has(key) === open) {
+        const next = toggledOpen(this.expanded, this.rowKeyOf(row, -1), open, this.everyKey);
+        if (next === undefined) {
             return false;
         }
-        if (open) {
-            keys.add(key);
-        }
-        else {
-            keys.delete(key);
-        }
-        this.expanded = [...keys].join(',');
+        this.expanded = next;
         this.dispatchEvent(new HelixExpandEvent({ value: this.expanded }));
         return true;
     }
@@ -1045,15 +1021,13 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
             : html `<div part="after" role="presentation" style="block-size: ${after}px"></div>`;
     }
     renderSelectAll(stop) {
-        const every = this.everyKey;
-        const keys = this.chosen;
-        const count = every.filter((key) => keys.has(key)).length;
+        const { checked, indeterminate } = everyState(this.chosen, this.everyKey);
         return html `<span
       part="select-all"
       role="columnheader"
       tabindex=${stop ? '0' : '-1'}
       data-column="0"
-    >${this.renderCheckbox(this.selectAllLabel, every.length > 0 && count === every.length, count > 0 && count < every.length, this.toggleAll)}</span>`;
+    >${this.renderCheckbox(this.selectAllLabel, checked, indeterminate, this.toggleAll)}</span>`;
     }
     renderMore(page) {
         if (!this.moreDrawn) {
@@ -1300,14 +1274,14 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
             return false;
         }
         const placed = this.tree().placed.get(row);
-        const forward = inlineStep(this, event.key) > 0;
-        if (placed?.branch && placed.open !== forward) {
+        const arrow = treeArrow({ branch: placed?.branch ?? false, open: placed?.open ?? false }, inlineStep(this, event.key) > 0 ? 1 : -1);
+        if (arrow === 'open' || arrow === 'close') {
             event.preventDefault();
-            this.toggleOpen(row, forward);
+            this.toggleOpen(row, arrow === 'open');
             return true;
         }
         const parent = placed?.parent ? this.drawnPage.indexOf(placed.parent) : -1;
-        if (!forward && parent >= 0) {
+        if (arrow === 'parent' && parent >= 0) {
             event.preventDefault();
             this.moveTo(parent, place.column);
             return true;

package/dist/data-table/tree.d.ts

@@ -1,4 +1,19 @@
-import { type Axis, type DataRow } from './root/order.js';
+/**
+ * Rows that hold rows, arranged for a tree grid: filtered, sorted within each
+ * parent, and laid out flat in reading order with the open rows' children under
+ * them.
+ *
+ * Pure and beside the family's `index.ts`, because which rows show and at what
+ * depth is a fact about the data, and a spec can hold it without a page.
+ *
+ * **Filtered by descent.** A row stays when it matches the query or any row
+ * under it does, so a match deep in the tree is shown with the rows that lead to
+ * it, and while a query is on every row with a match under it is open.
+ *
+ * **Sorted among siblings.** A sort orders each parent's rows and leaves every
+ * row under its parent, which is the only order a tree can be read in.
+ */
+import { type Axis, type DataRow } from '@fusion.dev/helix-core';
 /** Where a row sits in the tree. */
 export interface Placement {
     /** Whether it has children to show. */

package/dist/data-table/tree.js

@@ -1,7 +1,6 @@
-import { at } from '../table/column/table-column.js';
-import { filter, parse, sort } from './root/order.js';
+import { filter, parse, sort, valueAt } from '@fusion.dev/helix-core';
 export const childrenOf = (row, field) => {
-    const value = at(row, field);
+    const value = valueAt(row, field);
     return Array.isArray(value) ? value : [];
 };
 export const grow = (rows, axes, { field, isOpen, query, spec, }) => {

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

@@ -36,6 +36,8 @@ declare const HelixHeadlessDateInput_base: (new (...args: any[]) => import("@fus
  * @slot feedback - The error message under the field.
  * @slot hint - The help text under the field.
  * @slot next-icon - The icon on the calendar's next month control.
+ * @slot panel-footer - Content in the panel under the calendar, such as a note or an action.
+ * @slot panel-header - Content in the panel above the calendar, such as a heading or a shortcut.
  * @slot previous-icon - The icon on the calendar's previous month control.
  * @slot trigger - The icon on the button that opens the calendar.
  *
@@ -69,6 +71,7 @@ declare const HelixHeadlessDateInput_base: (new (...args: any[]) => import("@fus
  * @csspart picker-day-outside - A day from a neighboring month. Applied with `picker-day`.
  * @csspart picker-day-selected - The chosen day, or either end of a chosen range. Applied with `picker-day`.
  * @csspart picker-day-today - Today. Applied with `picker-day`.
+ * @csspart picker-feedback - The calendar's own message, under it, while the calendar's `feedback` is set.
  * @csspart picker-grid - The grid of days.
  * @csspart picker-header - The month name and its controls.
  * @csspart picker-heading - The month and year being shown.
@@ -171,9 +174,15 @@ export declare class HelixHeadlessDateInput extends HelixHeadlessDateInput_base
      */
     isDateUnavailable?: ((date: string) => boolean) | undefined;
     /**
-     * The language tag for the names of months and days in the calendar.
+     * The language tag for the field's order and words, and for the names of
+     * months and days in the calendar.
+     *
+     * Absent is the page's: the `lang` of the nearest element with one, as
+     * 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`. */
+    private get language();
     /**
      * The latest date that can be chosen, as `YYYY-MM-DD`.
      */
@@ -355,7 +364,7 @@ export declare class HelixHeadlessDateInput extends HelixHeadlessDateInput_base
     /** Each date, where `mode` holds several, sent one entry each. */
     protected get answers(): readonly string[] | undefined;
     /** What is wrong with the dates, which the text input cannot say. */
-    protected validate(): string;
+    protected validate(): string | readonly [keyof ValidityStateFlags, string];
     /**
      * The message shown when `disable-dates` or `disable-days` bars a 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, MixinControllerOpen, MixinControllerValue, MixinField, MixinPickerEditing, MixinPickerField, MixinSegmentedField, MixinTokens, } from '@fusion.dev/helix-core';
+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 { calendarBlank } from '@fusion.dev/helix-icons';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -100,6 +100,9 @@ let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinSegmented
             this.requestUpdate();
         };
     }
+    get language() {
+        return localeOf(this, this.locale);
+    }
     placed(room) {
         const all = Math.max(1, Math.floor(this.months) || 1);
         const surface = this.partNamed('surface');
@@ -132,7 +135,7 @@ let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinSegmented
         return 'date';
     }
     get segmentLocale() {
-        return this.locale;
+        return this.language;
     }
     written(date) {
         if (this.dateStyle === 'iso' || !isDateValue(date)) {
@@ -141,7 +144,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.locale || undefined, {
+            : new Intl.DateTimeFormat(this.language || undefined, {
                 dateStyle: this.dateStyle,
                 timeZone: 'UTC',
             }).format(at);
@@ -176,14 +179,20 @@ let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinSegmented
                     : 'Enter dates as YYYY-MM-DD, separated by commas.'));
         }
         if (this.min !== '' && held.some((one) => one < this.min)) {
-            return fillTemplate(this.rangeUnderflowMessage || 'Choose a date on or after {min}.', {
-                min: this.written(this.min),
-            });
+            return [
+                'rangeUnderflow',
+                fillTemplate(this.rangeUnderflowMessage || 'Choose a date on or after {min}.', {
+                    min: this.written(this.min),
+                }),
+            ];
         }
         if (this.max !== '' && held.some((one) => one > this.max)) {
-            return fillTemplate(this.rangeOverflowMessage || 'Choose a date on or before {max}.', {
-                max: this.written(this.max),
-            });
+            return [
+                'rangeOverflow',
+                fillTemplate(this.rangeOverflowMessage || 'Choose a date on or before {max}.', {
+                    max: this.written(this.max),
+                }),
+            ];
         }
         const why = held.map((one) => {
             const date = asDate(one);
@@ -193,7 +202,10 @@ let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinSegmented
             return this.unavailableMessage || 'Choose a date that is available.';
         }
         if (why.includes('step')) {
-            return this.stepMismatchMessage || 'Choose one of the dates the calendar offers.';
+            return [
+                'stepMismatch',
+                this.stepMismatchMessage || 'Choose one of the dates the calendar offers.',
+            ];
         }
         if (this.mode === 'range' && held.length > 2) {
             return this.rangeLengthMessage || 'A range is two dates.';
@@ -206,7 +218,7 @@ let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinSegmented
       exportparts="cell: picker-cell, cell-range-end: picker-cell-range-end,
         cell-range-middle: picker-cell-range-middle, cell-range-start: picker-cell-range-start,
         day: picker-day, day-disabled: picker-day-disabled, day-outside: picker-day-outside,
-        day-selected: picker-day-selected, day-today: picker-day-today, grid: picker-grid,
+        day-selected: picker-day-selected, day-today: picker-day-today, feedback: picker-feedback, grid: picker-grid,
         header: picker-header, heading: picker-heading, heading-button: picker-heading-button,
         month: picker-month, months: picker-months, next: picker-next,
         next-mark: picker-next-mark, period: picker-period, period-current: picker-period-current,
@@ -222,7 +234,7 @@ let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinSegmented
       disable-days=${this.disableDays || nothing}
       first-day-of-week=${this.firstDayOfWeek ?? nothing}
       label=${this.calendarLabel}
-      locale=${this.locale || nothing}
+      locale=${this.language || nothing}
       max=${this.max || nothing}
       max-view=${this.maxView ?? nothing}
       min=${this.min || nothing}
@@ -327,7 +339,9 @@ let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinSegmented
         popover="manual"
         ?hidden=${!this.open}
       >
+        <slot name="panel-header"></slot>
         ${this.renderPicker()}
+        <slot name="panel-footer"></slot>
       </div>
       ${this.renderHint()}${this.renderFeedback()}`;
     }

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

@@ -1,6 +1,6 @@
 import { type CalendarView, 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").MixinControllerValueInterface) & typeof HelixFormElement;
+declare const HelixHeadlessDatePicker_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinPickerFeedbackInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerValueInterface) & typeof HelixFormElement;
 /**
  * @summary A month calendar for choosing one or more dates.
  *
@@ -60,6 +60,7 @@ declare const HelixHeadlessDatePicker_base: (new (...args: any[]) => import("@fu
  * @csspart day-outside - A day from a neighboring month, filling the grid out, beside `day`.
  * @csspart day-selected - The chosen day, or either end of a chosen range, beside `day`.
  * @csspart day-today - Today, beside `day`.
+ * @csspart feedback - The message under the calendar, while `feedback` is set.
  * @csspart grid - The grid of days.
  * @csspart header - The month name and its controls.
  * @csspart heading - The month and year being shown.
@@ -80,6 +81,8 @@ declare const HelixHeadlessDatePicker_base: (new (...args: any[]) => import("@fu
  * @csspart weekday - A column header naming a day of the week.
  *
  * @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.
  */
 export declare class HelixHeadlessDatePicker extends HelixHeadlessDatePicker_base {
     /**
@@ -123,10 +126,6 @@ export declare class HelixHeadlessDatePicker extends HelixHeadlessDatePicker_bas
      * (Firefox does not), and is Sunday otherwise.
      */
     firstDayOfWeek?: number;
-    /**
-     * Whether the current selection fails validation.
-     */
-    invalid: boolean;
     /**
      * A rule for which dates cannot be chosen: a function given the date as
      * `YYYY-MM-DD` that returns `true` to bar it.
@@ -142,11 +141,14 @@ export declare class HelixHeadlessDatePicker extends HelixHeadlessDatePicker_bas
      */
     label: string;
     /**
-     * Locale for month and day names.
+     * Locale for month and day names, and the day a week starts on.
      *
-     * Absent uses the runtime's own.
+     * Absent is the page's: the `lang` of the nearest element with one, as
+     * 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`. */
+    private get language();
     /**
      * Latest selectable date, as `YYYY-MM-DD`.
      */
@@ -267,8 +269,11 @@ export declare class HelixHeadlessDatePicker extends HelixHeadlessDatePicker_bas
      *
      * Each candidate is tested in turn rather than the first one winning
      * outright. Where the last date focused is in some other month, the selected
-     * date still holds the stop, and only with neither in view does it fall to
-     * the first of the month.
+     * date still holds the stop, then today, as the APG date picker and React
+     * Aria's calendar put it, and only with none of them in view does it fall
+     * to the first of the month. Measured before today was a candidate: a
+     * calendar with no value opened on October 5 with its stop on "Thursday,
+     * October 1".
      */
     private get anchor();
     /** Six weeks of dates, so a grid does not change height between months. */

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, customElement, fillTemplate, dateAsValue as fromDate, HelixFormElement, HelixNavigateEvent, hostAria, inlineStep, commaList as list, localToday, MixinControllerValue, monthOf, monthOut, periodCells, periodKey, reportValues, requestChange, sameMonth, weekStartOf, YEARS_SHOWN, yearOut, yearPageOf, } from '@fusion.dev/helix-core';
+import { addDays, addMonths, valueAsDate as asDate, barredBy, customElement, fillTemplate, dateAsValue as fromDate, HelixFormElement, HelixNavigateEvent, hostAria, inlineStep, commaList as list, localeOf, localToday, MixinControllerValue, MixinPickerFeedback, monthOf, monthOut, periodCells, periodKey, reportValues, requestChange, sameMonth, weekStartOf, 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';
@@ -21,13 +21,13 @@ const KEYS = new Set([
     'PageUp',
     ' ',
 ]);
-let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinControllerValue(HelixFormElement) {
+const firstOf = (year, month) => addMonths(asDate('2000-01-01'), (year - 2000) * 12 + month);
+let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinPickerFeedback(MixinControllerValue(HelixFormElement)) {
     constructor() {
         super(...arguments);
         this.defaultMonth = '';
         this.disableDates = '';
         this.disableDays = '';
-        this.invalid = false;
         this.label = 'Date Picker';
         this.locale = '';
         this.max = '';
@@ -104,6 +104,9 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinControl
         this.view = 'day';
         this.yearViewLabel = '{heading}. Choose a year';
     }
+    get language() {
+        return localeOf(this, this.locale);
+    }
     get month() {
         return this.monthState ?? (this.defaultMonth || fromDate(this.derivedMonth).slice(0, 7));
     }
@@ -119,7 +122,8 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinControl
         if (this.firstDayOfWeek !== undefined && Number.isFinite(this.firstDayOfWeek)) {
             return ((Math.floor(this.firstDayOfWeek) % 7) + 7) % 7;
         }
-        return this.locale === '' ? 0 : weekStartOf(this.locale);
+        const language = this.language;
+        return language === '' ? 0 : weekStartOf(language);
     }
     get range() {
         const dates = this.selected;
@@ -139,17 +143,21 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinControl
     get shown() {
         const explicit = /^(\d{4})-(\d{2})$/.exec(this.monthState ?? this.defaultMonth);
         if (explicit) {
-            return new Date(Date.UTC(Number(explicit[1]), Number(explicit[2]) - 1, 1));
+            return firstOf(Number(explicit[1]), Number(explicit[2]) - 1);
         }
         return this.derivedMonth;
     }
     get derivedMonth() {
-        const from = asDate(this.selected[0] ?? '') ?? new Date();
-        return new Date(Date.UTC(from.getUTCFullYear(), from.getUTCMonth(), 1));
+        const from = asDate(this.selected[0] ?? '') ?? asDate(localToday()) ?? new Date();
+        return firstOf(from.getUTCFullYear(), from.getUTCMonth());
     }
     get anchor() {
         const shown = this.shown;
-        for (const candidate of [asDate(this.focused), asDate(this.selected[0] ?? '')]) {
+        for (const candidate of [
+            asDate(this.focused),
+            asDate(this.selected[0] ?? ''),
+            asDate(localToday()),
+        ]) {
             if (candidate && sameMonth(candidate, shown)) {
                 return candidate;
             }
@@ -268,11 +276,16 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinControl
                 return;
             }
             this.pageYear = at;
-            this.periodFocus = at === this.shown.getUTCFullYear() ? this.shown.getUTCMonth() : 0;
+            const month = this.shown.getUTCMonth();
+            const open = Array.from({ length: 12 }, (_, index) => index).filter((index) => !this.monthOut(firstOf(at, index)));
+            this.periodFocus = open.includes(month)
+                ? month
+                : ([...open].sort((left, right) => Math.abs(left - month) - Math.abs(right - month))[0] ??
+                    month);
             this.zoom('month');
             return;
         }
-        const first = new Date(Date.UTC(this.periodYear, at, 1));
+        const first = firstOf(this.periodYear, at);
         if (this.monthOut(first)) {
             return;
         }
@@ -408,7 +421,6 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinControl
             role: 'group',
         });
         this.internals.ariaDisabled = this.isDisabled ? 'true' : null;
-        this.internals.ariaInvalid = this.invalid ? 'true' : null;
         this.report();
     }
     updated(changed) {
@@ -426,14 +438,15 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinControl
         return Math.max(1, Math.floor(this.months) || 1);
     }
     get formats() {
-        if (this.cachedFormats?.locale === this.locale) {
+        const language = this.language;
+        if (this.cachedFormats?.locale === language) {
             return this.cachedFormats;
         }
-        const locale = this.locale || undefined;
+        const locale = language || undefined;
         const built = {
             full: new Intl.DateTimeFormat(locale, { dateStyle: 'full', timeZone: 'UTC' }),
             heading: new Intl.DateTimeFormat(locale, { month: 'long', timeZone: 'UTC', year: 'numeric' }),
-            locale: this.locale,
+            locale: language,
             long: new Intl.DateTimeFormat(locale, { dateStyle: 'long', timeZone: 'UTC' }),
             monthName: new Intl.DateTimeFormat(locale, { month: 'short', timeZone: 'UTC' }),
             weekday: new Intl.DateTimeFormat(locale, { timeZone: 'UTC', weekday: 'short' }),
@@ -558,8 +571,8 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinControl
         const years = this.view === 'year';
         const page = years ? yearPageOf(this.periodYear) : this.periodYear;
         const heading = years
-            ? `${yearName.format(new Date(Date.UTC(page, 0, 1)))} – ${yearName.format(new Date(Date.UTC(page + YEARS_SHOWN - 1, 0, 1)))}`
-            : yearName.format(new Date(Date.UTC(page, 0, 1)));
+            ? `${yearName.format(firstOf(page, 0))} – ${yearName.format(firstOf(page + YEARS_SHOWN - 1, 0))}`
+            : yearName.format(firstOf(page, 0));
         const stop = this.periodStop;
         const cells = periodCells({
             max: this.max,
@@ -613,14 +626,15 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinControl
     render() {
         if (this.view !== 'day') {
             return html `<div part="months" style="--date-picker-column-count: 1">
-        ${this.renderPeriods()}
-      </div>`;
+          ${this.renderPeriods()}
+        </div>
+        ${this.renderPickerFeedback()}`;
         }
         const shown = this.shown;
         const count = this.monthCount;
         return html `<div part="months" style="--date-picker-column-count: ${Math.min(count, 2)}">
       ${Array.from({ length: count }, (_, index) => this.renderMonth(addMonths(shown, index), index))}
-    </div>`;
+    </div>${this.renderPickerFeedback()}`;
     }
     get valueAsDate() {
         return asDate(this.value);
@@ -653,9 +667,6 @@ __decorate([
 __decorate([
     property({ attribute: 'first-day-of-week', type: Number })
 ], HelixHeadlessDatePicker.prototype, "firstDayOfWeek", void 0);
-__decorate([
-    property({ reflect: true, type: Boolean })
-], HelixHeadlessDatePicker.prototype, "invalid", void 0);
 __decorate([
     property({ attribute: false })
 ], HelixHeadlessDatePicker.prototype, "isDateUnavailable", void 0);