@fusion.dev/helix-headless 0.154.0 → 0.156.0

package/dist/command/root/command-root.js

@@ -8,18 +8,31 @@ import { customElement, HelixElement, HelixSelectEvent, MixinControllerOpen, mat
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { html } from 'lit/static-html.js';
+import { optionsAmong } from '../../option/root/option-root.js';
 import '../../dialog/index.js';
 import '../../listbox/index.js';
+const says = (element, state) => {
+    try {
+        return element?.matches(`:state(${state})`) ?? false;
+    }
+    catch {
+        return false;
+    }
+};
 let HelixHeadlessCommand = class HelixHeadlessCommand extends MixinControllerOpen(HelixElement) {
     constructor() {
         super(...arguments);
         this.emptyText = 'No commands';
         this.filterDelay = 0;
         this.hotkey = 'mod+k';
+        this.inline = false;
+        this.items = undefined;
         this.label = 'Commands';
         this.loadError = '';
         this.loading = false;
         this.loadingText = 'Loading';
+        this.page = '';
+        this.trail = [];
         this.placeholder = 'Search commands';
         this.resultsLabel = '{count, plural, one {# command} other {# commands}}';
         this.footed = false;
@@ -28,6 +41,10 @@ let HelixHeadlessCommand = class HelixHeadlessCommand extends MixinControllerOpe
                 return;
             }
             event.preventDefault();
+            if (this.inline) {
+                this.searchField?.focus();
+                return;
+            }
             this.requestOpen(!this.open);
         };
         this.handleChange = (event) => {
@@ -37,10 +54,26 @@ let HelixHeadlessCommand = class HelixHeadlessCommand extends MixinControllerOpe
             if (!this.dispatchEvent(new HelixSelectEvent({ value }))) {
                 return;
             }
+            const opens = (this.listbox?.options ?? []).find((option) => option.value === value)?.opens;
+            if (opens) {
+                this.goTo([...this.trail, this.page], opens);
+                return;
+            }
             this.requestOpen(false);
         };
+        this.handleBack = (event) => {
+            if (event.key !== 'Backspace' ||
+                this.page === '' ||
+                event.composedPath()[0] !== this.searchField ||
+                this.searchField?.value !== '') {
+                return;
+            }
+            event.preventDefault();
+            const trail = [...this.trail];
+            this.goTo(trail, trail.pop() ?? '');
+        };
         this.handleAlternate = (event) => {
-            if (!(event.metaKey || event.ctrlKey) || !this.open) {
+            if (!(event.metaKey || event.ctrlKey) || !(this.open || this.inline)) {
                 return;
             }
             if (event instanceof KeyboardEvent && event.key !== 'Enter') {
@@ -74,11 +107,32 @@ let HelixHeadlessCommand = class HelixHeadlessCommand extends MixinControllerOpe
             }
             this.requestOpen(false);
         };
+        this.handleFilter = () => {
+            void Promise.resolve()
+                .then(() => this.listbox?.updateComplete)
+                .then(() => this.markStatus());
+        };
     }
     static { this.words = 'helix-command'; }
     get listbox() {
         return this.partNamed('listbox');
     }
+    get searchField() {
+        return (this.listbox?.renderRoot?.querySelector('[part="search-field"]') ?? null);
+    }
+    goTo(trail, page) {
+        this.trail = trail;
+        this.page = page;
+        this.listbox?.requestFilter('');
+        void this.updateComplete.then(() => this.searchField?.focus());
+    }
+    get listName() {
+        if (this.page === '') {
+            return this.label;
+        }
+        const opener = optionsAmong(this.knownChildren).find((option) => option.opens === this.page);
+        return opener?.text || this.label;
+    }
     get activeOption() {
         return (this.listbox?.options.find((option) => option.active && !option.hidden) ??
             this.querySelector('[data-active]'));
@@ -87,6 +141,7 @@ let HelixHeadlessCommand = class HelixHeadlessCommand extends MixinControllerOpe
         super.connectedCallback();
         this.addEventListener('helix-select', this.swallowOptionSelect);
         this.addEventListener('keydown', this.handleAlternate, { capture: true });
+        this.addEventListener('keydown', this.handleBack);
         this.addEventListener('click', this.handleAlternate, { capture: true });
         document.addEventListener('keydown', this.handleHotkey);
     }
@@ -94,11 +149,16 @@ let HelixHeadlessCommand = class HelixHeadlessCommand extends MixinControllerOpe
         super.disconnectedCallback();
         this.removeEventListener('helix-select', this.swallowOptionSelect);
         this.removeEventListener('keydown', this.handleAlternate, { capture: true });
+        this.removeEventListener('keydown', this.handleBack);
         this.removeEventListener('click', this.handleAlternate, { capture: true });
         document.removeEventListener('keydown', this.handleHotkey);
     }
     willUpdate(changed) {
         super.willUpdate(changed);
+        if (changed.get('open') === true && !this.open) {
+            this.trail = [];
+            this.page = '';
+        }
         if (this.childrenKnown) {
             this.footed = this.knownChildren.some((child) => child.slot === 'footer');
         }
@@ -107,15 +167,32 @@ let HelixHeadlessCommand = class HelixHeadlessCommand extends MixinControllerOpe
         super.firstUpdated(changed);
         this.finishHydration();
     }
+    markStatus() {
+        const list = this.listbox;
+        const options = list?.options ?? [];
+        const shown = options.some((option) => !option.hidden);
+        const settled = list !== null && !this.loading;
+        this.toggleState('loading', this.loading);
+        this.toggleState('error', Boolean(this.loadError));
+        if (this.items !== undefined) {
+            this.toggleState('empty', settled && says(list, 'empty'));
+            this.toggleState('no-results', settled && says(list, 'no-results'));
+            return;
+        }
+        this.toggleState('empty', settled && !shown);
+        this.toggleState('no-results', settled && list.filter !== '' && options.length > 0 && !shown);
+    }
+    fills(name) {
+        return this.querySelector?.(`:scope > [slot="${name}"]`) != null;
+    }
     updated(changed) {
         super.updated?.(changed);
+        void (this.listbox?.updateComplete ?? Promise.resolve()).then(() => this.markStatus());
         if (!changed.has('open')) {
             return;
         }
         if (this.open) {
-            this.partNamed('listbox')
-                ?.renderRoot?.querySelector('[part="search-field"]')
-                ?.focus();
+            this.searchField?.focus();
         }
         else {
             this.listbox?.requestFilter('');
@@ -133,13 +210,25 @@ let HelixHeadlessCommand = class HelixHeadlessCommand extends MixinControllerOpe
             }
         }}
     >
-      <${this.tag('listbox')}
+      ${this.renderListbox()}
+      <!-- Handed on only while something fills it, as the list's slots are,
+           so an empty header draws nothing in the dialog. -->
+      <slot
+        name="header"
+        slot=${this.fills('header') ? 'header' : nothing}
+        @slotchange=${() => this.requestUpdate()}
+      ></slot>
+      ${this.renderFooter('footer')}
+    </${this.tag('dialog')}>`;
+    }
+    renderListbox() {
+        return html `<${this.tag('listbox')}
         part="listbox"
         exportparts="empty: listbox-empty, error: listbox-error, feedback: listbox-feedback,
           filter-icon: listbox-filter-icon, filter-mark: listbox-filter-mark, hint: listbox-hint,
           items: listbox-items, label: listbox-label, live: listbox-live, loading: listbox-loading,
           search: listbox-search, search-field: listbox-search-field"
-        aria-label=${this.label}
+        aria-label=${this.listName}
         empty-text=${this.emptyText}
         filter-delay=${this.filterDelay}
         filter-label=${this.placeholder}
@@ -149,12 +238,14 @@ let HelixHeadlessCommand = class HelixHeadlessCommand extends MixinControllerOpe
         result-label=${this.resultLabel ?? ''}
         results-label=${this.resultsLabel}
         ?loading=${this.loading}
+        .items=${this.items}
         filterable
         @helix-before-change=${this.handleChange}
+        @helix-filter=${this.handleFilter}
         @change=${this.stopInner}
         @input=${this.stopInner}
       >
-        <slot></slot>
+        ${this.page === '' ? html `<slot></slot>` : html `<slot name=${`page:${this.page}`}></slot>`}
         <!-- Handed on with the text as the fallback, for the reason Combobox
              gives: the list's own fallback never shows behind a passed slot. -->
         <slot name="empty" slot="empty">${this.emptyText}</slot>
@@ -164,21 +255,30 @@ let HelixHeadlessCommand = class HelixHeadlessCommand extends MixinControllerOpe
              list's own fallback, which is no-results-text or empty-text. -->
         <slot
           name="no-results"
-          slot=${this.querySelector?.(':scope > [slot="no-results"]') ? 'no-results' : nothing}
+          slot=${this.fills('no-results') ? 'no-results' : nothing}
           @slotchange=${() => this.requestUpdate()}
         ></slot>
-      </${this.tag('listbox')}>
-      <div ?hidden=${!this.footed} part="footer" slot="footer">
         <slot
-          name="footer"
-          @slotchange=${(event) => {
+          name="filter-icon"
+          slot=${this.fills('filter-icon') ? 'filter-icon' : nothing}
+          @slotchange=${() => this.requestUpdate()}
+        ></slot>
+      </${this.tag('listbox')}>`;
+    }
+    renderFooter(slot) {
+        return html `<div ?hidden=${!this.footed} part="footer" slot=${slot}>
+      <slot
+        name="footer"
+        @slotchange=${(event) => {
             this.footed = event.target.assignedNodes().length > 0;
         }}
-        ></slot>
-      </div>
-    </${this.tag('dialog')}>`;
+      ></slot>
+    </div>`;
     }
     render() {
+        if (this.inline) {
+            return html `<slot name="header"></slot>${this.renderListbox()}${this.renderFooter(nothing)}`;
+        }
         return html `${this.renderDialog()}`;
     }
 };
@@ -192,6 +292,12 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessCommand.prototype, "hotkey", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HelixHeadlessCommand.prototype, "inline", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessCommand.prototype, "items", void 0);
 __decorate([
     words,
     property()
@@ -209,6 +315,9 @@ __decorate([
 __decorate([
     property({ attribute: 'no-results-text' })
 ], HelixHeadlessCommand.prototype, "noResultsText", void 0);
+__decorate([
+    property()
+], HelixHeadlessCommand.prototype, "page", void 0);
 __decorate([
     words,
     property()

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

@@ -89,6 +89,11 @@ declare const HelixHeadlessDataTable_base: (new (...args: any[]) => import("@fus
  * scrolls within one screen of the end, once for each number of rows. Add the
  * next rows to `rows`, and set `loading` while they are on their way.
  *
+ * When a fetch fails, set `error-text`, such as "The files did not load", and
+ * put a button that tries again in the `error` slot. The line shows after the
+ * rows in place of the empty and loading lines, the live region says it, and
+ * the table takes the `error` state. Clear it once you try again.
+ *
  * The controls inside the cells leave the tab order, so Tab moves past the
  * whole grid. A windowed table keeps the row holding focus drawn while the
  * rest scroll away.
@@ -129,6 +134,7 @@ declare const HelixHeadlessDataTable_base: (new (...args: any[]) => import("@fus
  *
  * @slot - The columns, as `TableColumn` elements.
  * @slot empty - Content shown when there are no rows to show and none are loading, such as a picture and a link. Falls back to `empty-text`, which the live region still says.
+ * @slot error - Content shown while `error-text` is set, such as a button that tries again. Falls back to `error-text`, which the live region still says.
  * @slot footer - Content below the grid. It replaces the built-in pagination.
  * @slot loading - Content shown while the rows load, such as a spinner. Falls back to `loading-text`, which the live region still says.
  * @slot toolbar - Content above the grid, such as a search field or actions.
@@ -165,6 +171,7 @@ declare const HelixHeadlessDataTable_base: (new (...args: any[]) => import("@fus
  * @csspart checkbox-mark-indeterminate - Added to `checkbox-mark` while only some rows are selected.
  * @csspart drag-preview - A copy of the row a pointer drags by its grip, which follows the pointer in the top layer until the row is let go, with `reorderable-rows`. A column's grip moves the column itself. Hidden from assistive technology.
  * @csspart empty - Shown when there are no rows, because none arrived or the filter matches none. While rows are loading, the `loading` part is shown in its place.
+ * @csspart error - Shown after the rows while `error-text` is set, in place of the empty and loading lines.
  * @csspart footer - The region below the grid.
  * @csspart grip-head - The heading over the row grips, with `reorderable-rows`.
  * @csspart head - The row that holds the column headings. It is `display: contents`, so it takes no space.
@@ -205,6 +212,9 @@ declare const HelixHeadlessDataTable_base: (new (...args: any[]) => import("@fus
  * @cssproperty --data-table-cell-align - The alignment of the cell's column: `start`, `center`, or `end`. Unset when the column sets none. The component writes it on each cell it draws, and the stylesheet reads it. `Table` sets `--table-cell-align` for the same purpose.
  * @cssproperty --data-table-level - How deep a row is in a tree grid, from 1. The component writes it on each row header cell, and the stylesheet indents by it.
  * @cssproperty --data-table-template - The column track list, worked out from the columns. The component writes it inline on the element that reads it, so setting it has no effect. Set a column's `width` to change it.
+ *
+ * @cssstate empty - While there are no rows to show and none are loading.
+ * @cssstate error - While `error-text` is set.
  */
 export declare class HelixHeadlessDataTable extends HelixHeadlessDataTable_base {
     /**
@@ -286,6 +296,16 @@ export declare class HelixHeadlessDataTable extends HelixHeadlessDataTable_base
     descendingLabel: string;
     /** What screen readers hear when a row is dropped, with `reorderable-rows`. */
     droppedLabel: string;
+    /**
+     * The text shown and announced when the rows could not load, such as "The
+     * files did not load". Set it when a fetch fails, and clear it once you try
+     * again. Empty, the default, shows nothing.
+     *
+     * While it is set, a line after the rows shows it, or your own content in the
+     * `error` slot, in place of the empty and loading lines, and the live region
+     * says it.
+     */
+    errorText: string;
     /**
      * The estimated height of a row before it is drawn, in pixels.
      *
@@ -1119,6 +1139,11 @@ export declare class HelixHeadlessDataTable extends HelixHeadlessDataTable_base
      * after the last row and Enter or Space on it asks.
      */
     private renderMore;
+    /**
+     * The line shown while `error-text` is set: a row holding one cell, as the
+     * empty and loading lines are, since a grid holds rows and nothing else.
+     */
+    private renderError;
     protected render(): TemplateResult;
     /**
      * Listens on the host, not on the slot the columns are assigned to.

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

@@ -42,6 +42,7 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         this.defaultSort = '';
         this.descendingLabel = 'descending';
         this.droppedLabel = 'Dropped';
+        this.errorText = '';
         this.estimate = 32;
         this.gapLabel = 'Skip to page {page}';
         this.label = '';
@@ -913,6 +914,7 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
             ['toolbar', true],
             ['footer', true],
             ['empty', true],
+            ['error', true],
             ['loading', true],
         ]) {
             const slot = root.querySelector(`slot[name="${name}"]`);
@@ -980,6 +982,8 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         this.internals.ariaColCount =
             this.counts.columns === undefined ? null : String(this.counts.columns);
         this.markEmpty();
+        this.toggleState('error', this.errorText !== '');
+        this.toggleState('empty', !this.loading && !this.hasRows);
         this.assign();
         this.announceSort();
         this.quietControls();
@@ -1173,10 +1177,13 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
       >
     </div>`;
     }
+    renderError() {
+        return html `<p part="error" role="row"><span role="gridcell"><slot name="error">${this.errorText}</slot></span></p>`;
+    }
     render() {
         const { available, matched, page } = this.view;
         this.drawnPage = page;
-        this.moreDrawn = this.loadMore && !this.loading && page.length > 0;
+        this.moreDrawn = this.loadMore && !this.loading && this.errorText === '' && page.length > 0;
         const rows = this.windowOf(page);
         const kept = this.keptRow(page);
         const headStop = this.currentRow(page) === -1;
@@ -1206,9 +1213,9 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
             : html `<slot name="columns" @slotchange=${this.handleSlotChange}></slot>`}
         </div>
         ${this.renderSpacer('before', kept)}${this.renderRows(rows, page)}${this.renderSpacer('after', kept)}
-        ${this.renderMore(page)}${this.renderStatus(filled, 'gridcell')}
+        ${this.renderMore(page)}${this.errorText === '' ? this.renderStatus(filled, 'gridcell') : this.renderError()}
       </div>
-      ${this.renderLive(filled)}
+      ${this.errorText === '' ? this.renderLive(filled) : html `<span part="live" role="status">${this.errorText}</span>`}
       <div part="footer">
         <slot name="footer"></slot>
         ${this.paginated
@@ -1547,6 +1554,9 @@ __decorate([
     words,
     property({ attribute: 'dropped-label' })
 ], HelixHeadlessDataTable.prototype, "droppedLabel", void 0);
+__decorate([
+    property({ attribute: 'error-text' })
+], HelixHeadlessDataTable.prototype, "errorText", void 0);
 __decorate([
     property({ type: Number })
 ], HelixHeadlessDataTable.prototype, "estimate", void 0);

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

@@ -27,12 +27,37 @@ declare const HelixHeadlessDateInput_base: (new (...args: any[]) => import("@fus
  * month, a day and a year in the order the locale writes them, each set with
  * digits or the arrow keys. Alt+Down opens the calendar from a segment.
  *
+ * Text that is not a date gives the form an empty value, as a native date
+ * field does, and `value` keeps the text so it can be corrected.
+ *
+ * **Keyboard.** The field is one tab stop, or each segment is with
+ * `segmented`, and the trigger is one more.
+ *
+ * | Key | What it does |
+ * |---|---|
+ * | Down | In the text field, opens the calendar with focus on the chosen day. |
+ * | Alt with Down | Opens the calendar, from the text field or a segment. |
+ * | Enter | In the text field, takes the typed date and submits the form, as a native field does. |
+ * | Escape | Closes the calendar and puts focus back in the field. |
+ * | Tab | In the open calendar, moves between its controls. Out of the field, closes it. |
+ * | Up, Down on a segment | Steps the segment by one, round from its last value to its first. |
+ * | Page Up, Page Down on a segment | Steps by a page: a week of days, two months, or five years. |
+ * | Home, End on a segment | Goes to the segment's first or last value. |
+ * | Digits on a segment | Fill it, and move to the next once it can take no more. |
+ * | Backspace, Delete on a segment | Empty the segment. |
+ * | Left, Right on a segment | Move to the previous or the next segment, along the line of text. |
+ *
+ * In the calendar, the keys are `DatePicker`'s: the arrows move by a day or a
+ * week, Page Up and Page Down by a month, with Shift by a year, and Home and
+ * End to the start and the end of the week.
+ *
  * @since 0.1.0
  * @status stable
  * @category forms
  * @aliases DatePicker, DateField, InputDate
  * @documentation https://fusion.dev/helix/components/date-input
  *
+ * @slot end - Content after the date, before the trigger, such as a clear button.
  * @slot feedback - The error message under the field.
  * @slot hint - The help text under the field.
  * @slot label - The label, for content richer than the `label` text.
@@ -40,6 +65,7 @@ declare const HelixHeadlessDateInput_base: (new (...args: any[]) => import("@fus
  * @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 start - Content before the date, such as an icon.
  * @slot trigger - The icon on the button that opens the calendar.
  *
  * @event {Event} change - Fired after the value changes.
@@ -72,6 +98,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-day-weekend - A day of the weekend where the calendar's language is spoken, beside `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.
@@ -383,7 +410,12 @@ export declare class HelixHeadlessDateInput extends HelixHeadlessDateInput_base
     /** Takes one date back out of the set. */
     private readonly removeDate;
     private readonly handleCalendarChange;
-    /** Each date, where `mode` holds several, sent one entry each. */
+    /**
+     * Each date, where `mode` holds several, sent one entry each.
+     *
+     * One date that is text and no date, such as `August 5`, is sent as an empty
+     * entry, as a native date field sends a date it cannot read.
+     */
     protected get answers(): readonly string[] | undefined;
     /** What is wrong with the dates, which the text input cannot say. */
     protected validate(): string | readonly [keyof ValidityStateFlags, string];

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

@@ -175,7 +175,11 @@ let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinSegmented
         return Math.max(0, dates(this.value).length - this.shownDates.length);
     }
     get answers() {
-        return this.mode === undefined ? undefined : dates(this.value);
+        if (this.mode !== undefined) {
+            return dates(this.value);
+        }
+        const text = this.value.trim();
+        return text === '' || isDateValue(text) ? undefined : [''];
     }
     validate() {
         const held = dates(this.value);
@@ -218,7 +222,8 @@ 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, feedback: picker-feedback, grid: picker-grid,
+        day-selected: picker-day-selected, day-today: picker-day-today, day-weekend: picker-day-weekend,
+        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,
@@ -313,10 +318,12 @@ let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinSegmented
     render() {
         return html `${this.renderLabel()}
       <div part="field" @keydown=${this.handleKeydown}>
+        <slot name="start"></slot>
         ${this.mode === 'multiple'
             ? this.renderTokenRow(this.shownDates.map((date) => this.renderTag(date)), this.restCount)
             : nothing}
         ${this.segmentsShown ? this.renderSegments() : this.renderControl()}
+        <slot name="end"></slot>
         <button
           part="trigger"
           type="button"

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

@@ -1,4 +1,4 @@
-import { type CalendarView, type DateCalendar, HelixFormElement } from '@fusion.dev/helix-core';
+import { type CalendarView, type DateCalendar, HelixFormElement, type MonthCalendar } 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;
 /**
@@ -47,6 +47,8 @@ declare const HelixHeadlessDatePicker_base: (new (...args: any[]) => import("@fu
  * @aliases Calendar, Date grid, Month view
  * @documentation https://fusion.dev/helix/components/date-picker
  *
+ * @slot footer - Content under the calendar, such as buttons for today or a common range.
+ * @slot header - Content above the calendar, such as a note on what the date is for.
  * @slot next-icon - The glyph on the control that moves forward a month, usually a caret.
  * @slot previous-icon - The glyph on the control that moves back a month, usually a caret.
  *
@@ -64,6 +66,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 day-weekend - A day of the weekend where the calendar's language is spoken, beside `day`: Saturday and Sunday in `en-US`, Friday and Saturday in `ar-EG`.
  * @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.
@@ -82,7 +85,7 @@ declare const HelixHeadlessDatePicker_base: (new (...args: any[]) => import("@fu
  * @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 week - One row of days.
- * @csspart weekday - A column header naming a day of the week.
+ * @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.
  *
@@ -105,17 +108,24 @@ export declare class HelixHeadlessDatePicker extends HelixHeadlessDatePicker_bas
      */
     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.
+     * The calendar the heading, the days, and the months are written in.
      *
-     * 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.
+     * `gregory`, `buddhist`, `japanese`, `roc`, and `iso8601` are 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`.
+     *
+     * `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
+     * `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.
      */
-    calendar?: DateCalendar;
+    calendar?: DateCalendar | MonthCalendar;
     /**
      * 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.
@@ -198,8 +208,9 @@ export declare class HelixHeadlessDatePicker extends HelixHeadlessDatePicker_bas
     /** The month on show, whoever set it, and `undefined` until somebody has. */
     private monthState;
     /**
-     * The month shown, as `YYYY-MM`. When it is not set, it follows `value`,
-     * then the current month.
+     * 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
+     * `value`, then the current month.
      *
      * Separate from `value` on purpose, so paging selects nothing and a consumer
      * can drive the view. Reading gives the month on show; writing sets it, and
@@ -258,6 +269,8 @@ export declare class HelixHeadlessDatePicker extends HelixHeadlessDatePicker_bas
     private focused;
     /** The selected dates, in order. */
     private get selected();
+    /** The days of the weekend, `0` for Sunday: the locale's, or Saturday and Sunday where none is named. */
+    private get weekend();
     /** The day the week starts on: `firstDayOfWeek`, or the locale's. */
     private get weekStart();
     /**
@@ -274,6 +287,13 @@ export declare class HelixHeadlessDatePicker extends HelixHeadlessDatePicker_bas
     private isSelected;
     /** The month being shown, resolved from `month`, then `value`, then today. */
     private get shown();
+    /**
+     * The months the calendar pages through: its own under a `calendar` with
+     * 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.
      *
@@ -432,6 +452,16 @@ export declare class HelixHeadlessDatePicker extends HelixHeadlessDatePicker_bas
      * The validation message for a date that `step` skips.
      */
     stepMismatchMessage: string;
+    /**
+     * The time zone today is read in, such as `America/New_York`, as React
+     * Aria's `today(timeZone)` reads it. Empty is the reader's own.
+     *
+     * Dates are plain `YYYY-MM-DD` and carry no zone, so this moves only today:
+     * the day marked `aria-current` and `day-today`, and the month a picker
+     * with no value opens on. A desk in Tokyo booking for an office in New York
+     * sets `America/New_York`, and today is the office's.
+     */
+    timeZone: string;
     /**
      * The validation message for a date that `disable-dates` or `disable-days`
      * bars.