@fusion.dev/helix-headless 0.147.0 → 0.148.0

package/dist/object-inspector/root/object-inspector-root.js

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 var HelixHeadlessObjectInspector_1;
-import { AriaForwardController, CopyController, countLabel, customElement, drawStatus, elementById, fillTemplate, formatNumbers, HelixActivateEvent, HelixBeforeActivateEvent, HelixBeforeCloseEvent, HelixBeforeOpenEvent, HelixElement, HelixFilterEvent, HelixFilteredEvent, inlineStep, requestChange, StatusController, scrollItemIntoView, searchableById, Typeahead, treeArrow, VirtualizeController, } from '@fusion.dev/helix-core';
+import { AriaForwardController, CopyController, countLabel, customElement, drawStatus, elementById, fillTemplate, formatNumbers, HelixActivateEvent, HelixBeforeActivateEvent, HelixBeforeCloseEvent, HelixBeforeOpenEvent, HelixElement, HelixFilterEvent, HelixFilteredEvent, inlineStep, pageRows, requestChange, StatusController, scrollItemIntoView, scrollRoom, searchableById, Typeahead, treeArrow, VirtualizeController, } from '@fusion.dev/helix-core';
 import { caretDown, caretRight } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -85,10 +85,10 @@ let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends He
                     this.move(rows.length - 1);
                     break;
                 case 'PageDown':
-                    this.move(this.cursor + this.pageRows());
+                    this.move(this.cursor + this.pageStep());
                     break;
                 case 'PageUp':
-                    this.move(this.cursor - this.pageRows());
+                    this.move(this.cursor - this.pageStep());
                     break;
                 case 'ArrowRight':
                 case 'ArrowLeft':
@@ -153,6 +153,11 @@ let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends He
                 this.requestUpdate();
             }
         };
+        this.handleTreeFocus = () => {
+            this.revealing = true;
+            this.focusing = true;
+            this.requestUpdate();
+        };
         this.handleFocusIn = (event) => {
             const index = Number(event.target.dataset?.index);
             if (Number.isInteger(index) && index !== this.cursor) {
@@ -367,6 +372,7 @@ let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends He
         }
         this.revealing = true;
         this.focusing = true;
+        this.requestUpdate();
         return true;
     }
     typeahead(letter) {
@@ -375,11 +381,8 @@ let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends He
             this.move(at);
         }
     }
-    pageRows() {
-        const tree = this.partNamed('tree');
-        const room = tree && tree.scrollHeight > tree.clientHeight + 1 ? tree.clientHeight : window.innerHeight;
-        const tall = this.virtualize.sizeOf(this.cursor) || HelixHeadlessObjectInspector_1.ESTIMATE;
-        return Math.max(1, Math.floor(room / tall) - 1);
+    pageStep() {
+        return pageRows(scrollRoom(this.partNamed('tree')), this.virtualize.sizeOf(this.cursor) || HelixHeadlessObjectInspector_1.ESTIMATE);
     }
     handleRowClick(index, row) {
         if (this.move(index) && row.branch) {
@@ -446,8 +449,11 @@ let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends He
     </div>`;
     }
     hasFocusedRow() {
+        return this.focusedIndex() !== undefined;
+    }
+    focusedIndex() {
         const focused = this.shadowRoot?.activeElement;
-        return focused?.getAttribute?.('role') === 'row';
+        return focused?.getAttribute?.('role') === 'row' ? Number(focused.dataset.index) : undefined;
     }
     renderCopyButton(row) {
         return staticHtml `<${this.tag('copy-button')}
@@ -464,8 +470,9 @@ let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends He
     render() {
         const rows = this.rows;
         const { first, last } = this.windowed ? this.virtualize.window : { first: 0, last: rows.length };
-        const kept = this.windowed && (this.cursor < first || this.cursor >= last) && this.hasFocusedRow()
-            ? this.cursor
+        const focused = this.focusedIndex();
+        const kept = this.windowed && focused !== undefined && (focused < first || focused >= last)
+            ? focused
             : undefined;
         const { after, before } = this.windowed
             ? this.virtualize.spacers(kept)
@@ -475,6 +482,7 @@ let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends He
         if (kept !== undefined && keptRow) {
             shown.splice(kept < first ? 0 : shown.length, 0, [keptRow, kept]);
         }
+        const stopless = rows.length > 0 && !shown.some(([, at]) => at === this.cursor);
         return html `${this.label ? html `<div part="header"><span part="label">${this.label}</span></div>` : nothing}${this.filterable
             ? html `<input
             part="search-field"
@@ -494,8 +502,10 @@ let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends He
           id="tree"
           role="treegrid"
           ?data-scroller=${this.windowed}
+          tabindex=${stopless ? '0' : nothing}
           aria-label=${this.label || this.treeLabel}
           @keydown=${this.handleKeydown}
+          @focus=${this.handleTreeFocus}
           @focusin=${this.handleFocusIn}
           @focusout=${this.handleFocusOut}
           @scroll=${() => this.virtualize.measure()}

package/dist/pagination/size/pagination-size.d.ts

@@ -65,6 +65,7 @@ import '../../select/index.js';
  * @csspart control-listbox-loading - The text shown while the options load.
  * @csspart control-listbox-search - The region that holds the filter field.
  * @csspart control-listbox-search-field - The filter field.
+ * @csspart control-live - The select's `live` part, the region a screen reader hears a choice made on the closed trigger from.
  * @csspart control-surface - The floating panel.
  * @csspart control-trigger - The closed control, which shows the chosen size.
  * @csspart control-value - The chosen size inside the trigger.

package/dist/pagination/size/pagination-size.js

@@ -98,7 +98,7 @@ let HelixHeadlessPaginationSize = class HelixHeadlessPaginationSize extends Heli
         listbox-filter-mark: control-listbox-filter-mark, listbox-hint: control-listbox-hint,
         listbox-items: control-listbox-items, listbox-label: control-listbox-label,
         listbox-live: control-listbox-live, listbox-loading: control-listbox-loading, listbox-search: control-listbox-search,
-        listbox-search-field: control-listbox-search-field, surface: control-surface,
+        listbox-search-field: control-listbox-search-field, live: control-live, surface: control-surface,
         trigger: control-trigger, value: control-value"
       label=${named ? '' : this.label}
       aria-label=${named || nothing}

package/dist/pin-input/code.d.ts

@@ -1,3 +1,4 @@
+import { type PickerVerdict } from '@fusion.dev/helix-core';
 /** What a box accepts, which decides the keyboard a phone offers. */
 export type PinType = 'alphanumeric' | 'numeric' | 'text';
 /** How typed letters are cased: as typed, or turned upper or lower case. */
@@ -35,3 +36,25 @@ export declare const readTyped: (raw: string, caret: number, type: PinType, lett
  * holding two fill from box three.
  */
 export declare const overwriteCode: (code: string, at: number, text: string, count: number) => CodeEdit;
+/** The messages a code's verdict is written with, where the page set its own. */
+export interface CodeMessages {
+    /** For a code with no characters in a required field. */
+    missing?: string | undefined;
+    /** For a code with fewer characters than boxes; `{length}` is how many. */
+    short?: string | undefined;
+}
+/**
+ * What is wrong with a code, as a picker field reports it: a required field
+ * with nothing in it is missing, a code with fewer characters than boxes is
+ * too short, and anything else is fine (`''`). The platform's own words where
+ * the page set none.
+ */
+export declare const codeVerdict: (code: string, count: number, required: boolean, messages: CodeMessages) => PickerVerdict;
+/**
+ * The box a caret key moves to from `caret`, kept within the boxes up to
+ * `end`, or `undefined` for a key that moves nothing.
+ *
+ * Not `inlineStep`: the row is left to right whatever the page, so the key
+ * pointing right is the one that moves on in every script.
+ */
+export declare const caretTo: (key: string, caret: number, end: number) => number | undefined;

package/dist/pin-input/code.js

@@ -1,3 +1,4 @@
+import { fillTemplate } from '@fusion.dev/helix-core';
 export const cleanCode = (text, type, letterCase = 'preserve') => {
     const trimmed = text.trim();
     const kept = type === 'numeric'
@@ -23,3 +24,27 @@ export const overwriteCode = (code, at, text, count) => {
     }
     return { caret: Math.min(count - 1, start + text.length), code: characters.join('') };
 };
+export const codeVerdict = (code, count, required, messages) => {
+    if (required && code === '') {
+        return ['valueMissing', messages.missing || 'Please fill in this field.'];
+    }
+    if (code !== '' && code.length < count) {
+        return [
+            'tooShort',
+            fillTemplate(messages.short || 'Please enter all {length} characters.', { length: count }),
+        ];
+    }
+    return '';
+};
+export const caretTo = (key, caret, end) => {
+    const to = key === 'ArrowRight'
+        ? caret + 1
+        : key === 'ArrowLeft'
+            ? caret - 1
+            : key === 'Home'
+                ? 0
+                : key === 'End'
+                    ? end
+                    : undefined;
+    return to === undefined ? undefined : Math.max(0, Math.min(to, end));
+};

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

@@ -4,10 +4,10 @@ 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, fillTemplate, HelixCompleteEvent, HelixFormElement, MixinControllerValue, MixinField, restoreValue, submitImplicitly, } from '@fusion.dev/helix-core';
+import { AriaForwardController, customElement, HelixCompleteEvent, HelixFormElement, MixinControllerValue, MixinField, restoreValue, submitImplicitly, verdictFlags, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
-import { cleanCode, overwriteCode, readTyped, } from '../code.js';
+import { caretTo, cleanCode, codeVerdict, overwriteCode, readTyped, } from '../code.js';
 import { separatorsAfter } from '../format.js';
 const UNSEEN = 'position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;font-size:16px';
 const keepFocus = (event) => event.preventDefault();
@@ -61,20 +61,12 @@ let HelixHeadlessPinInput = class HelixHeadlessPinInput extends MixinControllerV
                 }
                 return;
             }
-            const to = event.key === 'ArrowRight'
-                ? this.caretBox + 1
-                : event.key === 'ArrowLeft'
-                    ? this.caretBox - 1
-                    : event.key === 'Home'
-                        ? 0
-                        : event.key === 'End'
-                            ? this.end
-                            : undefined;
+            const to = caretTo(event.key, this.caretBox, this.end);
             if (to === undefined) {
                 return;
             }
             event.preventDefault();
-            this.active = Math.max(0, Math.min(to, this.end));
+            this.active = to;
             this.placeCaret(true);
         };
         this.handlePress = (event) => {
@@ -172,17 +164,11 @@ let HelixHeadlessPinInput = class HelixHeadlessPinInput extends MixinControllerV
         if (!control) {
             return;
         }
-        if (this.required && this.value === '') {
-            this.internals.setValidity({ valueMissing: true }, this.valueMissingMessage || 'Please fill in this field.', control);
-        }
-        else if (this.value !== '' && this.value.length < this.count) {
-            this.internals.setValidity({ tooShort: true }, fillTemplate(this.tooShortMessage || 'Please enter all {length} characters.', {
-                length: this.count,
-            }), control);
-        }
-        else {
-            this.internals.setValidity({}, '', control);
-        }
+        const found = verdictFlags(codeVerdict(this.value, this.count, this.required, {
+            missing: this.valueMissingMessage,
+            short: this.tooShortMessage,
+        }));
+        this.internals.setValidity(found?.[0] ?? {}, found?.[1] ?? '', control);
         this.refreshFeedback();
     }
     focus(options) {

package/dist/qr-code/root/qr-code-root.d.ts

@@ -27,7 +27,8 @@ export type QrStyle = 'dots' | 'rounded' | 'square';
  * `correction` sets how much of the code can be lost. At `H` a code can lose
  * thirty percent and still scan, so a mark in the center slot is safe. At `L`
  * the same mark makes the code unscannable. The default is `M`, and `H` when the
- * `logo` slot is filled.
+ * `logo` slot is filled. A code that holds a logo at a `correction` below `H`
+ * warns once with the kind `unscannable-logo`.
  *
  * A higher level holds fewer characters, so a value that fits at `M` can be too
  * long once a logo raises the level to `H`. A value too long for the level
@@ -37,7 +38,8 @@ export type QrStyle = 'dots' | 'rounded' | 'square';
  * `toSvg()`, `toPng()` and `download()` give the drawn code as a file of its
  * own, in the colors it is drawn in, with a slotted image or SVG logo where
  * it sits, for a page that offers it to save or print, as Zag's download
- * trigger does.
+ * trigger does. `download()` saves an SVG for a name ending in `.svg`, and a
+ * PNG for any other.
  *
  * @since 0.1.0
  * @status stable
@@ -111,6 +113,14 @@ export declare class HelixHeadlessQrCode extends HelixElement {
     protected firstUpdated(changed: PropertyValues): void;
     /** The level actually used, which the slot can raise. */
     private get level();
+    /** Whether this code has warned that its logo may keep it from scanning. */
+    private toldLogo;
+    /**
+     * Warns once when a logo covers a code whose level was set below `H`, where
+     * the cover can take more than the level can lose. A level the code chose
+     * itself is `H` already.
+     */
+    private auditLogo;
     /** The value and level that did not fit, so `error` fires once for each. */
     private overflowed;
     /**
@@ -148,7 +158,8 @@ export declare class HelixHeadlessQrCode extends HelixElement {
      */
     toPng(size?: number): Promise<Blob | null>;
     /**
-     * Saves the code as a PNG named `filename`, `size` pixels square.
+     * Saves the code as a file named `filename`, `size` pixels square: an SVG
+     * where the name ends in `.svg`, and a PNG otherwise.
      *
      * Call it from a press, since a browser lets a page start a download only
      * in answer to one. Does nothing where no code is drawn.

package/dist/qr-code/root/qr-code-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 { customElement, HelixElement, rgbOf } from '@fusion.dev/helix-core';
+import { customElement, HelixElement, reportRuntime, rgbOf, slotFilled, } from '@fusion.dev/helix-core';
 import { html, nothing, svg, } from 'lit';
 import { property } from 'lit/decorators.js';
 import { encode } from 'uqr';
@@ -81,6 +81,7 @@ let HelixHeadlessQrCode = class HelixHeadlessQrCode extends HelixElement {
         this.label = '';
         this.value = '';
         this.logo = false;
+        this.toldLogo = false;
         this.overflowed = '';
     }
     willUpdate(changed) {
@@ -96,6 +97,17 @@ let HelixHeadlessQrCode = class HelixHeadlessQrCode extends HelixElement {
     get level() {
         return this.correction ?? (this.logo ? 'H' : 'M');
     }
+    auditLogo() {
+        if (this.toldLogo || !this.logo || (this.correction ?? 'H') === 'H') {
+            return;
+        }
+        this.toldLogo = true;
+        reportRuntime({
+            kind: 'unscannable-logo',
+            message: `<${this.localName}> holds a logo at correction "${this.correction}", which may keep it from scanning. Set \`correction\` to "H", or leave it unset.`,
+            tag: this.localName,
+        });
+    }
     encoded() {
         try {
             return encode(this.value, { border: 0, ecc: this.level });
@@ -109,6 +121,7 @@ let HelixHeadlessQrCode = class HelixHeadlessQrCode extends HelixElement {
     }
     updated(changed) {
         super.updated(changed);
+        this.auditLogo();
         const key = `${this.level}:${this.value}`;
         const overflow = this.value !== '' && this.encoded() === undefined;
         this.toggleState('overflow', overflow);
@@ -186,11 +199,12 @@ let HelixHeadlessQrCode = class HelixHeadlessQrCode extends HelixElement {
         return new Promise((resolve) => canvas.toBlob(resolve, 'image/png'));
     }
     async download(filename = 'qr-code.png', size = 512) {
-        const png = await this.toPng(size);
-        if (!png) {
+        const svg = /\.svg$/i.test(filename) ? this.toSvg(size) : '';
+        const file = svg ? new Blob([svg], { type: 'image/svg+xml' }) : await this.toPng(size);
+        if (!file) {
             return;
         }
-        const url = URL.createObjectURL(png);
+        const url = URL.createObjectURL(file);
         const link = document.createElement('a');
         link.href = url;
         link.download = filename;
@@ -235,7 +249,7 @@ let HelixHeadlessQrCode = class HelixHeadlessQrCode extends HelixElement {
       <slot
         name="logo"
         @slotchange=${(event) => {
-            const next = event.target.assignedNodes().length > 0;
+            const next = slotFilled(event.target);
             if (next !== this.logo) {
                 this.logo = next;
                 this.requestUpdate();

package/dist/scatter-chart/measures.d.ts

@@ -0,0 +1,22 @@
+/** The numeric columns by what they measure. */
+export interface Measures {
+    /** The column across, the first one that is not the size. */
+    across: number | undefined;
+    /** The column `size-by` names, which sizes the points. */
+    size: number | undefined;
+    /** Every other column, each a series up. */
+    ups: number[];
+}
+/**
+ * The numeric columns by what they measure: the column whose heading
+ * `sizeBy` names as the size, by its series key, then the first of the rest
+ * across and every other one up.
+ */
+export declare const measuresOf: (columns: readonly number[], name: (column: number) => string, sizeBy: string) => Measures;
+/**
+ * Each row's point size from its reading in the size column, by area, so a
+ * point twice the measure is twice the ink: the square root of its share of
+ * the largest. A size below zero is none, and a row with no size, or a column
+ * whose largest is not above zero, has no weight.
+ */
+export declare const bubbleWeights: (sizes: readonly (number | undefined)[]) => (number | undefined)[];

package/dist/scatter-chart/measures.js

@@ -0,0 +1,11 @@
+import { seriesKey } from '@fusion.dev/helix-core';
+export const measuresOf = (columns, name, sizeBy) => {
+    const key = seriesKey(sizeBy);
+    const size = key === '' ? undefined : columns.find((column) => seriesKey(name(column)) === key);
+    const [across, ...ups] = columns.filter((column) => column !== size);
+    return { across, size, ups };
+};
+export const bubbleWeights = (sizes) => {
+    const largest = Math.max(0, ...sizes.map((one) => one ?? 0));
+    return sizes.map((one) => one === undefined || largest <= 0 ? undefined : Math.sqrt(Math.max(0, one) / largest));
+};

package/dist/scatter-chart/root/scatter-chart-root.d.ts

@@ -1,6 +1,7 @@
 import { HelixElement } from '@fusion.dev/helix-core';
 import { nothing, type TemplateResult } from 'lit';
 import '../../tooltip/index.js';
+import { type Measures } from '../measures.js';
 /** One row drawn as a point: which row, which series, and where, in percent of the plot. */
 export interface ScatterPoint {
     depth: number;
@@ -172,12 +173,7 @@ export declare class HelixHeadlessScatterChart extends HelixHeadlessScatterChart
      * The numeric columns by what they measure: the first across, the column
      * `size-by` names as the size, and every other one up, as a series.
      */
-    protected get measures(): {
-        across: number | undefined;
-        size: number | undefined;
-        ups: number[];
-    };
-    showsColumn(cell: number): boolean;
+    protected get measures(): Measures;
     /** Whether the levels across are ruled. */
     protected get rulesX(): boolean;
     /** Whether the levels up are ruled. */

package/dist/scatter-chart/root/scatter-chart-root.js

@@ -4,11 +4,12 @@ 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 { CHART_PLOT, customElement, drawTooltip, extent, formatNumbers, HelixElement, isRtl, linear, MixinChartSource, PLOT_HEIGHT, PLOT_WIDTH, seriesIndex, seriesKey, ticks, } from '@fusion.dev/helix-core';
+import { CHART_PLOT, customElement, drawTooltip, extent, formatNumbers, HelixElement, isRtl, linear, MixinChartSource, PLOT_HEIGHT, PLOT_WIDTH, seriesIndex, ticks, } from '@fusion.dev/helix-core';
 import { html, nothing, svg } from 'lit';
 import { property } from 'lit/decorators.js';
 import '../../tooltip/index.js';
 import { correlation, leastSquares } from '../fit.js';
+import { bubbleWeights, measuresOf } from '../measures.js';
 const REACH = 24;
 const COEFFICIENTS = new Map();
 const coefficientIn = (locale) => {
@@ -87,16 +88,7 @@ let HelixHeadlessScatterChart = class HelixHeadlessScatterChart extends MixinCha
         return depth < 0 ? undefined : seriesIndex(depth);
     }
     get measures() {
-        const rows = this.sourceRows;
-        const key = seriesKey(this.sizeBy);
-        const size = key === ''
-            ? undefined
-            : this.plottedColumns.find((column) => seriesKey(rows.find((row) => row.cells[column])?.cells[column]?.name ?? '') === key);
-        const [across, ...ups] = this.plottedColumns.filter((column) => column !== size);
-        return { across, size, ups };
-    }
-    showsColumn(cell) {
-        return cell !== this.measures.size && super.showsColumn(cell);
+        return measuresOf(this.plottedColumns, (column) => this.columnName(column), this.sizeBy);
     }
     get rulesX() {
         return this.gridlines !== undefined && this.gridlines !== 'y';
@@ -107,7 +99,7 @@ let HelixHeadlessScatterChart = class HelixHeadlessScatterChart extends MixinCha
     get field() {
         const rows = this.sourceRows;
         const { across, size, ups } = this.measures;
-        const name = (column) => column === undefined ? '' : (rows.find((row) => row.cells[column])?.cells[column]?.name ?? '');
+        const name = (column) => column === undefined ? '' : this.columnName(column);
         const pairs = ups.map((column) => rows.flatMap((row, index) => {
             const x = across === undefined ? undefined : row.cells[across]?.value;
             const y = row.cells[column]?.value;
@@ -119,19 +111,14 @@ let HelixHeadlessScatterChart = class HelixHeadlessScatterChart extends MixinCha
         const y = nice(extent(all.length > 0 ? all.map(([, one]) => one) : [0]));
         const along = linear(x, [0, PLOT_WIDTH]);
         const up = linear(y, [PLOT_HEIGHT, 0]);
-        const sizes = rows.map((row) => (size === undefined ? undefined : row.cells[size]?.value));
-        const largest = Math.max(0, ...sizes.map((one) => one ?? 0));
-        const weight = (row) => {
-            const one = sizes[row];
-            return one === undefined || largest <= 0 ? undefined : Math.sqrt(Math.max(0, one) / largest);
-        };
+        const weights = bubbleWeights(rows.map((row) => (size === undefined ? undefined : row.cells[size]?.value)));
         return {
             pairs: pairs.map((series) => series.map(([one, two]) => [one, two])),
             points: pairs.flatMap((series, depth) => shown[depth]
                 ? series.map(([one, two, row]) => ({
                     depth,
                     row,
-                    weight: weight(row),
+                    weight: weights[row],
                     x: along(one),
                     y: up(two),
                 }))

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

@@ -21,13 +21,36 @@ declare const HelixHeadlessSelect_base: (new (...args: any[]) => import("@fusion
  * Set `valueContent` to draw the trigger's content from the chosen options,
  * and several chosen options are written as a list in the reader's language.
  *
- * In the open list the arrow keys, Home, End, PageUp, PageDown and typed
- * letters move the highlight, and Enter, Space or a click chooses it and
- * closes the list. Tab closes the list and moves on. On the closed trigger,
- * ArrowDown, Enter and Space open the list on the chosen option, ArrowUp opens
- * it on the chosen or last option, Home and End open it on the first or last,
- * and typed letters choose the option whose words start with them, as a native
- * `<select>` does.
+ * **Keyboard.** On the closed trigger:
+ *
+ * | Key | What it does |
+ * |---|---|
+ * | Down, Enter, Space | Opens the list on the chosen option, or the first. |
+ * | Up | Opens the list on the chosen option, or the last. |
+ * | Home, End | Opens the list on the first or the last option. |
+ * | Left, Right | Chooses the option before or after the chosen one without opening, as React Aria's Select does, in either direction of text. |
+ * | A letter or a word | Chooses the option whose words start with what you typed, as a native `<select>` does. With `multiple`, opens the list on it. |
+ *
+ * In the open list, which is a `Listbox`:
+ *
+ * | Key | What it does |
+ * |---|---|
+ * | Down, Up, Home, End, Page Down, Page Up | Moves the highlight. |
+ * | A letter or a word | Moves the highlight to the next option whose words start with what you typed. |
+ * | Enter, Space | Chooses the highlighted option and closes the list. With `multiple`, toggles it and leaves the list open. |
+ * | Escape | Closes the list and puts focus back on the trigger. |
+ * | Tab | Closes the list and moves on. |
+ *
+ * A choice made on the closed trigger is said aloud on Apple devices, where
+ * VoiceOver does not read the trigger's new name.
+ *
+ * **ARIA.** The trigger is a `button` with `aria-haspopup="listbox"` and
+ * `aria-expanded`, named by the label and then the chosen words, as a native
+ * `<select>` is. The list is the listbox `Listbox` describes, named by the
+ * label, or by `list-label` where there is none.
+ *
+ * Set `autocomplete` to let a browser's autofill choose, as a native `<select>`
+ * with the same attribute would.
  *
  * @since 0.1.0
  * @status stable
@@ -69,6 +92,7 @@ declare const HelixHeadlessSelect_base: (new (...args: any[]) => import("@fusion
  * @csspart listbox-loading - The text shown while the options load.
  * @csspart listbox-search - The region that holds the filter field.
  * @csspart listbox-search-field - The filter field.
+ * @csspart live - The region a screen reader announces a choice made on the closed trigger from, drawn once there is one to say. Visually hidden in the styled tier.
  * @csspart surface - The floating panel.
  * @csspart trigger - The closed control, which shows the chosen value.
  * @csspart value - The chosen option's text inside the trigger.
@@ -81,6 +105,18 @@ declare const HelixHeadlessSelect_base: (new (...args: any[]) => import("@fusion
  */
 export declare class HelixHeadlessSelect extends HelixHeadlessSelect_base {
     protected readonly aria: AriaForwardController;
+    /** The region a choice made on the closed trigger is said from. */
+    private readonly status;
+    /**
+     * What a browser's autofill may fill in, as a platform token such as
+     * `country` or `cc-exp-month`, as on a native `<select>`.
+     *
+     * Set, the select keeps a hidden native `<select>` with the same options for
+     * the browser to fill, as React Aria's `HiddenSelect` does, and takes the
+     * option the browser picks, by its value or its words, as the value. Empty
+     * draws no hidden select, and a browser fills nothing.
+     */
+    autocomplete: string;
     /**
      * The text shown when no options match the filter.
      */
@@ -283,9 +319,21 @@ export declare class HelixHeadlessSelect extends HelixHeadlessSelect_base {
      * Aria's Select do, so a reader who knows the answer types it. A Space in the
      * middle of those letters is one of them. With `multiple`, a letter opens the
      * list on the match instead, because adding to a set is a choice the reader
-     * makes in the list.
+     * makes in the list. ArrowLeft and ArrowRight choose the option before and
+     * after the chosen one.
      */
     private readonly handleTriggerKeydown;
+    /**
+     * Chooses from the closed trigger, and says the choice on Apple devices.
+     *
+     * The trigger is named by the label and the chosen words, so a choice made
+     * on it renames the control in focus. VoiceOver does not read a name that
+     * changes under focus, so a reader there heard nothing as a letter or an
+     * arrow changed the answer. The words are said in a live region, as React
+     * Aria says a combobox's choice for VoiceOver alone, since other screen
+     * readers read the new name.
+     */
+    private choose;
     /**
      * Tab closes the list and lets focus move on, as a native `<select>` does.
      *