@fusion.dev/helix-headless 0.103.2 → 0.104.0

package/dist/color-picker/root/color-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 { CopyController, capturePointer, customElement, drawIcon, formatColor, HelixFormElement, HelixSampleEndEvent, HelixSampleStartEvent, isRtl, MixinControllerValue, parseColor, splitValues, toCss, } from '@fusion.dev/helix-core';
+import { CopyController, capturePointer, customElement, drawIcon, fillTemplate, formatColor, HelixFormElement, HelixSampleEndEvent, HelixSampleStartEvent, isRtl, MixinControllerValue, parseColor, splitValues, toCss, } from '@fusion.dev/helix-core';
 import { eyedropper } from '@fusion.dev/helix-icons';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -19,13 +19,24 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinContr
         super(...arguments);
         this.alpha = false;
         this.autocomplete = 'off';
+        this.brightnessLabel = 'Brightness';
+        this.copiedLabel = 'Copied';
+        this.copyLabel = 'Copy {value}';
+        this.eyedropperLabel = 'Sample a color from the screen';
+        this.formatLabel = 'Syntax: {format}. Change it.';
+        this.hueLabel = 'Hue';
         this.invalid = false;
         this.noEyedropper = false;
         this.noFormat = false;
         this.noValue = false;
+        this.opacityLabel = 'Opacity';
+        this.presetsLabel = 'Presets';
         this.readOnly = false;
         this.required = false;
+        this.saturationLabel = 'Saturation';
         this.swatches = '';
+        this.toolsLabel = 'Color tools';
+        this.valueLabel = 'Color';
         this.sampling = false;
         this.owned = false;
         this.settled = '';
@@ -131,7 +142,7 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinContr
     }
     reportRequired() {
         if (this.required && this.value === '') {
-            this.internals.setValidity({ valueMissing: true }, 'Choose a color.', this.partNamed('grid') ?? undefined);
+            this.internals.setValidity({ valueMissing: true }, this.valueMissingMessage || 'Choose a color.', this.partNamed('grid') ?? undefined);
             return;
         }
         this.internals.setValidity({});
@@ -199,12 +210,12 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinContr
         }
     }
     renderTools() {
-        return html `<${this.tag('button-group')} part="actions" label="Color tools">
+        return html `<${this.tag('button-group')} part="actions" label=${this.toolsLabel}>
                 ${this.sampling && !this.noEyedropper
             ? html `<${this.tag('button')}
                         part="eyedropper"
       exportparts="button: eyedropper-button"
-                        aria-label="Sample a color from the screen"
+                        aria-label=${this.eyedropperLabel}
                         ?disabled=${this.isDisabled}
                         @click=${this.handleEyeDropper}
                       >
@@ -216,7 +227,7 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinContr
             : html `<${this.tag('button')}
                         part="format"
       exportparts="button: format-button"
-                        aria-label=${`Syntax: ${this.format ?? 'hex'}. Change it.`}
+                        aria-label=${fillTemplate(this.formatLabel, { format: this.format ?? 'hex' })}
                         ?disabled=${this.isDisabled}
                         @click=${this.handleFormat}
                       >
@@ -238,7 +249,7 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinContr
           type="range"
           min="0"
           max="100"
-          aria-label="Saturation"
+          aria-label=${this.saturationLabel}
           .value=${String(color.saturation)}
           ?disabled=${this.isDisabled}
           @input=${(event) => this.takeArea('saturation', event)}
@@ -248,7 +259,7 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinContr
           type="range"
           min="0"
           max="100"
-          aria-label="Brightness"
+          aria-label=${this.brightnessLabel}
           .value=${String(color.brightness)}
           ?disabled=${this.isDisabled}
           @input=${(event) => this.takeArea('brightness', event)}
@@ -259,14 +270,16 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinContr
         <button
           part="sample"
           type="button"
-          aria-label=${this.copier.copied ? 'Copied' : `Copy ${this.value || 'the color'}`}
+          aria-label=${this.copier.copied
+            ? this.copiedLabel
+            : fillTemplate(this.copyLabel, { value: this.value }).trim()}
           data-copied=${this.copier.copied ? '' : nothing}
           ?disabled=${this.isDisabled || this.value === ''}
           @click=${() => this.copier.copy(this.value)}
         ></button>
         <div part="channels">
-          ${this.renderChannel('hue', 'Hue', 360, color.hue)}
-          ${this.alpha ? this.renderChannel('alpha', 'Opacity', 100, color.alpha) : nothing}
+          ${this.renderChannel('hue', this.hueLabel, 360, color.hue)}
+          ${this.alpha ? this.renderChannel('alpha', this.opacityLabel, 100, color.alpha) : nothing}
         </div>
       </div>
 
@@ -280,7 +293,7 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinContr
             : html `<input
                 part="value"
                 type="text"
-                aria-label="Color"
+                aria-label=${this.valueLabel}
                 autocomplete=${this.autocomplete || nothing}
                 spellcheck="false"
                 .value=${this.value}
@@ -293,7 +306,7 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinContr
 
       ${this.presets.length === 0
             ? nothing
-            : html `<div part="swatches" role="group" aria-label="Presets">
+            : html `<div part="swatches" role="group" aria-label=${this.presetsLabel}>
                 ${this.presets.map((preset) => {
                 const parsed = parseColor(preset);
                 return html `<button
@@ -315,9 +328,27 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessColorPicker.prototype, "autocomplete", void 0);
+__decorate([
+    property({ attribute: 'brightness-label' })
+], HelixHeadlessColorPicker.prototype, "brightnessLabel", void 0);
+__decorate([
+    property({ attribute: 'copied-label' })
+], HelixHeadlessColorPicker.prototype, "copiedLabel", void 0);
+__decorate([
+    property({ attribute: 'copy-label' })
+], HelixHeadlessColorPicker.prototype, "copyLabel", void 0);
+__decorate([
+    property({ attribute: 'eyedropper-label' })
+], HelixHeadlessColorPicker.prototype, "eyedropperLabel", void 0);
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessColorPicker.prototype, "format", void 0);
+__decorate([
+    property({ attribute: 'format-label' })
+], HelixHeadlessColorPicker.prototype, "formatLabel", void 0);
+__decorate([
+    property({ attribute: 'hue-label' })
+], HelixHeadlessColorPicker.prototype, "hueLabel", void 0);
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessColorPicker.prototype, "invalid", void 0);
@@ -330,15 +361,33 @@ __decorate([
 __decorate([
     property({ attribute: 'no-value', type: Boolean })
 ], HelixHeadlessColorPicker.prototype, "noValue", void 0);
+__decorate([
+    property({ attribute: 'opacity-label' })
+], HelixHeadlessColorPicker.prototype, "opacityLabel", void 0);
+__decorate([
+    property({ attribute: 'presets-label' })
+], HelixHeadlessColorPicker.prototype, "presetsLabel", void 0);
 __decorate([
     property({ attribute: 'readonly', reflect: true, type: Boolean })
 ], HelixHeadlessColorPicker.prototype, "readOnly", void 0);
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessColorPicker.prototype, "required", void 0);
+__decorate([
+    property({ attribute: 'saturation-label' })
+], HelixHeadlessColorPicker.prototype, "saturationLabel", void 0);
 __decorate([
     property()
 ], HelixHeadlessColorPicker.prototype, "swatches", void 0);
+__decorate([
+    property({ attribute: 'tools-label' })
+], HelixHeadlessColorPicker.prototype, "toolsLabel", void 0);
+__decorate([
+    property({ attribute: 'value-label' })
+], HelixHeadlessColorPicker.prototype, "valueLabel", void 0);
+__decorate([
+    property({ attribute: 'value-missing-message' })
+], HelixHeadlessColorPicker.prototype, "valueMissingMessage", void 0);
 __decorate([
     state()
 ], HelixHeadlessColorPicker.prototype, "moved", void 0);

package/dist/combobox/root/combobox-root.d.ts

@@ -68,6 +68,7 @@ declare const HelixHeadlessCombobox_base: (new (...args: any[]) => import("@fusi
  * @csspart listbox-hint - Help under the list.
  * @csspart listbox-items - The list itself.
  * @csspart listbox-label - The question, over the list.
+ * @csspart listbox-live - The inner list's `live`, the region a screen reader hears its empty and loading lines from.
  * @csspart listbox-loading - Shown while the options are still on their way.
  * @csspart listbox-search - The region holding the field that narrows the list.
  * @csspart listbox-search-field - The field itself.
@@ -150,7 +151,10 @@ export declare class HelixHeadlessCombobox extends HelixHeadlessCombobox_base {
      */
     placeholder: string;
     /**
-     * What a tag's remove control is called, since the mark has no name.
+     * What the control removing one chosen option is called, with `{name}` filled in.
+     *
+     * **The name goes in**, so a row of them is heard as which one each
+     * removes rather than as "Remove" said once per chosen option.
      */
     removeLabel: string;
     /**
@@ -282,6 +286,22 @@ export declare class HelixHeadlessCombobox extends HelixHeadlessCombobox_base {
      * the panel rather than about the options in it.
      */
     private readonly handleKeydown;
+    /**
+     * Tells the input which option is highlighted.
+     *
+     * **The input is where focus stays**, so it is what a screen reader asks.
+     * The listbox points its own list at the option, which is right for a
+     * listbox a reader is in and says nothing here: arrowing through a combobox
+     * moved the highlight in silence. The list's highlight is its own state, so
+     * this runs once the list has drawn the move, after an arrow and after a
+     * keystroke narrows it, as well as on every update of this element.
+     *
+     * Through `ariaActiveDescendantElement`, as `FilterInput` does, because the
+     * option is in the light DOM and the input in this shadow root, which an id
+     * cannot cross. Feature-tested, the assignment being a silent no-op where it
+     * is missing.
+     */
+    private linkActive;
     /**
      * Takes what the list announced and stops it there.
      *
@@ -331,7 +351,6 @@ export declare class HelixHeadlessCombobox extends HelixHeadlessCombobox_base {
      */
     private sync;
     protected firstUpdated(changed: PropertyValues): void;
-    protected willUpdate(changed: PropertyValues): void;
     protected updated(changed: PropertyValues): void;
     /**
      * The list the field filters, behind a seam the styled tier can move.

package/dist/combobox/root/combobox-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, customElement, HelixCreateEvent, HelixFilterEvent, HelixFormElement, MixinControllerOpen, MixinControllerValue, MixinField, MixinTokens, PopoverController, } from '@fusion.dev/helix-core';
+import { AriaForwardController, customElement, fillTemplate, HelixCreateEvent, HelixFilterEvent, HelixFormElement, MixinControllerOpen, MixinControllerValue, MixinField, MixinTokens, PopoverController, reportValues, } from '@fusion.dev/helix-core';
 import { caretDown } from '@fusion.dev/helix-icons';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -30,7 +30,7 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
         this.loadingText = 'Loading';
         this.multiple = false;
         this.placeholder = '';
-        this.removeLabel = 'Remove';
+        this.removeLabel = 'Remove {name}';
         this.suggest = false;
         this.typed = '';
         this.suggestion = '';
@@ -53,6 +53,7 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
             const narrowing = new HelixFilterEvent({ value: typed });
             if (this.dispatchEvent(narrowing)) {
                 this.listbox?.requestFilter(typed);
+                void this.listbox?.updateComplete.then(() => this.linkActive());
             }
             this.suggestion = this.suggest && isInsertion(event) ? this.completionFor(typed) : '';
             if (!this.open) {
@@ -88,6 +89,7 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
                 this.requestOpen(true);
             }
             this.listbox?.navigate(event);
+            void this.listbox?.updateComplete.then(() => this.linkActive());
         };
         this.handleChange = (event) => {
             event.stopPropagation();
@@ -208,6 +210,16 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
         const match = (this.listbox?.options ?? []).find((option) => !option.hidden && !option.disabled && option.text.toLowerCase().startsWith(needle));
         return match && match.text.length > typed.length ? match.text : '';
     }
+    linkActive() {
+        const control = this.partNamed('control');
+        if (!control || !('ariaActiveDescendantElement' in control)) {
+            return;
+        }
+        const active = this.open
+            ? (this.listbox?.options ?? []).find((option) => option.active && !option.hidden)
+            : undefined;
+        control.ariaActiveDescendantElement = active ?? null;
+    }
     removeLastToken() {
         const last = this.values.at(-1);
         if (last !== undefined) {
@@ -215,20 +227,22 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
         }
     }
     sync() {
-        this.internals.setFormValue(this.value === '' ? null : this.value);
+        if (this.multiple) {
+            reportValues(this.internals, this.name, this.value === '' ? [] : this.value.split(','));
+        }
+        else {
+            this.internals.setFormValue(this.value === '' ? null : this.value);
+        }
         this.reportRequired(this.value === '', 'Choose one to continue.', 'control');
     }
     firstUpdated(changed) {
         super.firstUpdated(changed);
         this.finishHydration();
     }
-    willUpdate(changed) {
-        super.willUpdate(changed);
-        this.internals.ariaExpanded = this.open ? 'true' : 'false';
-    }
     updated(changed) {
         super.updated?.(changed);
         this.sync();
+        this.linkActive();
         const control = this.partNamed('control');
         const wanted = this.multiple || this.open ? this.suggestion || this.typed : this.word;
         if (control && control.value !== wanted) {
@@ -249,7 +263,7 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
       id="listbox"
       exportparts="empty: listbox-empty, feedback: listbox-feedback, filter-icon: listbox-filter-icon,
         filter-mark: listbox-filter-mark, hint: listbox-hint, items: listbox-items,
-        label: listbox-label, loading: listbox-loading, search: listbox-search,
+        label: listbox-label, live: listbox-live, loading: listbox-loading, search: listbox-search,
         search-field: listbox-search-field"
       aria-label=${this.listLabel}
       empty-text=${this.emptyText}
@@ -275,7 +289,7 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
                     part="tag"
       exportparts="dismiss: tag-dismiss, dismiss-mark: tag-dismiss-mark, start: tag-start"
                     data-value=${option.value}
-                    dismiss-label=${this.removeLabel}
+                    dismiss-label=${fillTemplate(this.removeLabel, { name: option.text })}
                     ?dismissible=${!this.isDisabled}
                     @helix-dismiss=${this.handleDismiss}
                     >${option.text}</${this.tag('tag')}

package/dist/command/root/command-root.d.ts

@@ -53,6 +53,7 @@ declare const HelixHeadlessCommand_base: (new (...args: any[]) => import("@fusio
  * @csspart listbox-hint - Help under the list.
  * @csspart listbox-items - The list itself.
  * @csspart listbox-label - The question, over the list.
+ * @csspart listbox-live - The inner list's `live`, the region a screen reader hears its empty and loading lines from.
  * @csspart listbox-loading - Shown while the options are still on their way.
  * @csspart listbox-search - The region holding the field that narrows the list.
  * @csspart listbox-search-field - The field itself.

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

@@ -134,7 +134,7 @@ let HelixHeadlessCommand = class HelixHeadlessCommand extends MixinControllerOpe
         part="listbox"
       exportparts="empty: listbox-empty, feedback: listbox-feedback, filter-icon: listbox-filter-icon,
         filter-mark: listbox-filter-mark, hint: listbox-hint, items: listbox-items,
-        label: listbox-label, loading: listbox-loading, search: listbox-search,
+        label: listbox-label, live: listbox-live, loading: listbox-loading, search: listbox-search,
         search-field: listbox-search-field"
         aria-label=${this.label}
         empty-text=${this.emptyText}

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

@@ -94,6 +94,7 @@ declare const HelixHeadlessDataTable_base: (new (...args: any[]) => import("@fus
  * @csspart empty - Shown when the result has nothing in it, whether it arrived empty or a filter emptied it. A result still on its way is `loading` instead, which wins over this.
  * @csspart footer - The region below the grid.
  * @csspart head - The row the column headings sit in. `display: contents`, so it takes no space.
+ * @csspart live - The empty and loading lines again, in a region a screen reader hears when they change. Visually hidden in the styled tier.
  * @csspart loading - Shown while the rows are still on their way.
  * @csspart pagination - The pagination, where this draws one.
  * @csspart pagination-first - The pagination's control that jumps to the first page, under `ends`.
@@ -164,19 +165,6 @@ export declare class HelixHeadlessDataTable extends HelixHeadlessDataTable_base
      * been measured.
      */
     estimate: number;
-    /**
-     * The order, as `field:direction`.
-     *
-     * Set it and this element defers: a reader's click fires `helix-sort` and
-     * changes nothing until a new value arrives. `default-sort` seeds an order this
-     * element then owns.
-     */
-    get sort(): string;
-    set sort(next: string);
-    /**
-     * Accessible name for the grid.
-     */
-    label: string;
     /**
      * What the rows are narrowed to, as one query across every column.
      *
@@ -186,6 +174,10 @@ export declare class HelixHeadlessDataTable extends HelixHeadlessDataTable_base
      */
     get filter(): string;
     set filter(next: string);
+    /**
+     * Accessible name for the grid.
+     */
+    label: string;
     /**
      * Whether this element does the work or asks the consumer to.
      *
@@ -197,6 +189,17 @@ export declare class HelixHeadlessDataTable extends HelixHeadlessDataTable_base
      * inverts the data flow.
      */
     mode: 'client' | 'server';
+    /**
+     * The columns' order, as their fields separated by spaces.
+     *
+     * A reader's move fires `helix-reorder` first, and refusing it leaves the
+     * columns where they were, which is how a consumer who stores the order takes
+     * the decision. `default-order` seeds an order this element then owns. A field not named
+     * keeps its place after the named ones, and a column with no field never
+     * moves.
+     */
+    get order(): string;
+    set order(next: string);
     /**
      * The page on show, from 1.
      *
@@ -206,6 +209,27 @@ export declare class HelixHeadlessDataTable extends HelixHeadlessDataTable_base
      */
     get page(): number;
     set page(next: number);
+    /**
+     * How many rows a page holds. Zero is every row, which is what "no paging" means.
+     *
+     * **It announces nothing, and that is not an omission.** Nothing in this
+     * element ever asks for a different page size: a size selector is
+     * `PaginationSize`, which a consumer puts in the `footer` slot and answers
+     * themselves. Routing this through `requestChange` would announce an event
+     * the element never has cause to fire.
+     */
+    get pageSize(): number;
+    set pageSize(next: number);
+    /**
+     * Whether to draw a pagination under the grid.
+     *
+     * On by default once a page size is set, because a paged table with no way to
+     * change pages shows a reader the first twenty rows and no way to know there
+     * are more. Off for a consumer supplying their own through the `footer` slot,
+     * which is why the slot replaces this rather than sitting beside it.
+     */
+    get paginated(): boolean;
+    set paginated(next: boolean);
     /**
      * Whether a reader may move the columns.
      *
@@ -213,17 +237,6 @@ export declare class HelixHeadlessDataTable extends HelixHeadlessDataTable_base
      * place at a time with the arrow keys once it has focus.
      */
     reorderable: boolean;
-    /**
-     * The columns' order, as their fields separated by spaces.
-     *
-     * A reader's move fires `helix-reorder` first, and refusing it leaves the
-     * columns where they were, which is how a consumer who stores the order takes
-     * the decision. `default-order` seeds an order this element then owns. A field not named
-     * keeps its place after the named ones, and a column with no field never
-     * moves.
-     */
-    get order(): string;
-    set order(next: string);
     /**
      * The field naming a row's stable identity.
      *
@@ -270,16 +283,14 @@ export declare class HelixHeadlessDataTable extends HelixHeadlessDataTable_base
     get selected(): string;
     set selected(next: string);
     /**
-     * How many rows a page holds. Zero is every row, which is what "no paging" means.
+     * The order, as `field:direction`.
      *
-     * **It announces nothing, and that is not an omission.** Nothing in this
-     * element ever asks for a different page size: a size selector is
-     * `PaginationSize`, which a consumer puts in the `footer` slot and answers
-     * themselves. Routing this through `requestChange` would announce an event
-     * the element never has cause to fire.
+     * Set it and this element defers: a reader's click fires `helix-sort` and
+     * changes nothing until a new value arrives. `default-sort` seeds an order this
+     * element then owns.
      */
-    get pageSize(): number;
-    set pageSize(next: number);
+    get sort(): string;
+    set sort(next: string);
     /**
      * How many rows the whole result has, where this element cannot count them.
      *
@@ -309,16 +320,6 @@ export declare class HelixHeadlessDataTable extends HelixHeadlessDataTable_base
      * should pay none of them.
      */
     windowed: boolean;
-    /**
-     * Whether to draw a pagination under the grid.
-     *
-     * On by default once a page size is set, because a paged table with no way to
-     * change pages shows a reader the first twenty rows and no way to know there
-     * are more. Off for a consumer supplying their own through the `footer` slot,
-     * which is why the slot replaces this rather than sitting beside it.
-     */
-    get paginated(): boolean;
-    set paginated(next: boolean);
     private sortState;
     private filterState;
     private pageState;

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

@@ -169,14 +169,6 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         ...HelixElement.shadowRootOptions,
         slotAssignment: 'manual',
     }; }
-    get sort() {
-        return this.sortState ?? this.defaultSort;
-    }
-    set sort(next) {
-        const previous = this.sort;
-        this.sortState = next;
-        this.requestUpdate('sort', previous);
-    }
     get filter() {
         return this.filterState ?? this.defaultFilter;
     }
@@ -185,15 +177,6 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         this.filterState = next;
         this.requestUpdate('filter', previous);
     }
-    get page() {
-        const asked = this.pageState ?? this.defaultPage;
-        return Math.min(this.pages, Math.max(1, Math.floor(asked) || 1));
-    }
-    set page(next) {
-        const previous = this.page;
-        this.pageState = next;
-        this.requestUpdate('page', previous);
-    }
     get order() {
         return this.orderState ?? this.defaultOrder;
     }
@@ -202,13 +185,14 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         this.orderState = next;
         this.requestUpdate('order', previous);
     }
-    get selected() {
-        return this.selectedState ?? this.defaultSelected;
+    get page() {
+        const asked = this.pageState ?? this.defaultPage;
+        return Math.min(this.pages, Math.max(1, Math.floor(asked) || 1));
     }
-    set selected(next) {
-        const previous = this.selected;
-        this.selectedState = next;
-        this.requestUpdate('selected', previous);
+    set page(next) {
+        const previous = this.page;
+        this.pageState = next;
+        this.requestUpdate('page', previous);
     }
     get pageSize() {
         return Math.max(0, Math.floor(this.pageSizeState ?? this.defaultPageSize) || 0);
@@ -226,6 +210,22 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         this.paginatedState = next;
         this.requestUpdate('paginated', previous);
     }
+    get selected() {
+        return this.selectedState ?? this.defaultSelected;
+    }
+    set selected(next) {
+        const previous = this.selected;
+        this.selectedState = next;
+        this.requestUpdate('selected', previous);
+    }
+    get sort() {
+        return this.sortState ?? this.defaultSort;
+    }
+    set sort(next) {
+        const previous = this.sort;
+        this.sortState = next;
+        this.requestUpdate('sort', previous);
+    }
     drawn() {
         return [...this.renderRoot.querySelectorAll('[part="row"][data-index]')].map((element) => ({ element, index: Number(element.dataset.index) }));
     }
@@ -641,6 +641,7 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         ${this.renderSpacer('before')}${this.renderRows(rows)}${this.renderSpacer('after')}
         ${this.renderStatus(filled)}
       </div>
+      ${this.renderLive(filled)}
       <div part="footer">
         <slot name="footer"></slot>
         ${this.paginated
@@ -719,25 +720,28 @@ __decorate([
 ], HelixHeadlessDataTable.prototype, "estimate", void 0);
 __decorate([
     property()
-], HelixHeadlessDataTable.prototype, "sort", null);
+], HelixHeadlessDataTable.prototype, "filter", null);
 __decorate([
     property()
 ], HelixHeadlessDataTable.prototype, "label", void 0);
 __decorate([
     property()
-], HelixHeadlessDataTable.prototype, "filter", null);
+], HelixHeadlessDataTable.prototype, "mode", void 0);
 __decorate([
     property()
-], HelixHeadlessDataTable.prototype, "mode", void 0);
+], HelixHeadlessDataTable.prototype, "order", null);
 __decorate([
     property({ type: Number })
 ], HelixHeadlessDataTable.prototype, "page", null);
+__decorate([
+    property({ attribute: 'page-size', type: Number })
+], HelixHeadlessDataTable.prototype, "pageSize", null);
 __decorate([
     property({ type: Boolean })
-], HelixHeadlessDataTable.prototype, "reorderable", void 0);
+], HelixHeadlessDataTable.prototype, "paginated", null);
 __decorate([
-    property()
-], HelixHeadlessDataTable.prototype, "order", null);
+    property({ type: Boolean })
+], HelixHeadlessDataTable.prototype, "reorderable", void 0);
 __decorate([
     property({ attribute: 'row-key' })
 ], HelixHeadlessDataTable.prototype, "rowKey", void 0);
@@ -751,17 +755,14 @@ __decorate([
     property()
 ], HelixHeadlessDataTable.prototype, "selected", null);
 __decorate([
-    property({ attribute: 'page-size', type: Number })
-], HelixHeadlessDataTable.prototype, "pageSize", null);
+    property()
+], HelixHeadlessDataTable.prototype, "sort", null);
 __decorate([
     property({ type: Number })
 ], HelixHeadlessDataTable.prototype, "total", void 0);
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessDataTable.prototype, "windowed", void 0);
-__decorate([
-    property({ type: Boolean })
-], HelixHeadlessDataTable.prototype, "paginated", null);
 __decorate([
     state()
 ], HelixHeadlessDataTable.prototype, "sortState", void 0);

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

@@ -185,6 +185,31 @@ export declare class HelixHeadlessDateInput extends HelixHeadlessDateInput_base
      * What the field says before a date is in it.
      */
     placeholder: string;
+    /**
+     * What a reader is told when a range holds more than two dates.
+     *
+     * **Every sentence a control raises in the browser's bubble is a property**,
+     * so a form in another language speaks it. Absent is the control's own
+     * sentence, in English.
+     */
+    rangeLengthMessage?: string;
+    /**
+     * What a reader is told when a date is after `max`, with `{max}` filled in
+     * as the field writes it.
+     */
+    rangeOverflowMessage?: string;
+    /**
+     * What a reader is told when a date is before `min`, with `{min}` filled
+     * in as the field writes it.
+     */
+    rangeUnderflowMessage?: string;
+    /**
+     * What the control removing one date is called, with `{name}` filled in.
+     *
+     * **The name goes in**, so a row of them is heard as which one each
+     * removes rather than as "Remove" said once per date.
+     */
+    removeLabel: string;
     /**
      * How far apart the selectable dates are, in days.
      *
@@ -227,6 +252,8 @@ 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. */
+    protected get answers(): readonly string[] | undefined;
     /** What is wrong with the dates, which the text input cannot say. */
     protected validate(): string;
     /**