@fusion.dev/helix-headless 0.147.0 → 0.149.0

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

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { AriaForwardController, colorName, customElement, HelixFormElement, localeOf, MixinControllerOpen, MixinControllerValue, MixinField, MixinPickerField, parseColor, toCss, wordsConverter, } from '@fusion.dev/helix-core';
+import { AriaForwardController, colorName, customElement, formatWords, HelixFormElement, MixinControllerOpen, MixinControllerValue, MixinField, MixinPickerField, parseColor, toCss, words, wordsConverter, wordsLocale, } from '@fusion.dev/helix-core';
 import { nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { html } from 'lit/static-html.js';
@@ -24,6 +24,7 @@ let HelixHeadlessColorInput = class HelixHeadlessColorInput extends MixinPickerF
         this.readOnly = false;
         this.announcesInput = true;
         this.swatches = '';
+        this.swatchLabel = '{name} {value}';
         this.triggerLabel = 'Choose a color';
         this.wheel = false;
         this.settled = '';
@@ -55,6 +56,7 @@ let HelixHeadlessColorInput = class HelixHeadlessColorInput extends MixinPickerF
             this.requestOpen(true);
         };
     }
+    static { this.words = 'helix-color-input'; }
     requestValue(next) {
         if (this.readOnly) {
             return false;
@@ -70,6 +72,11 @@ let HelixHeadlessColorInput = class HelixHeadlessColorInput extends MixinPickerF
     get anchor() {
         return this.control ?? this.partNamed('trigger');
     }
+    renderSwatchValue() {
+        return this.variant === 'swatch'
+            ? html `<span id="swatch-value" hidden>${this.swatchWords}</span>`
+            : nothing;
+    }
     get picked() {
         return parseColor(this.value) ? this.value : this.settled;
     }
@@ -78,7 +85,10 @@ let HelixHeadlessColorInput = class HelixHeadlessColorInput extends MixinPickerF
         if (!parsed) {
             return this.value || this.triggerLabel;
         }
-        return `${colorName(parsed, this.colorWords, localeOf(this))} ${this.value}`;
+        return formatWords(this, 'swatchLabel', {
+            name: colorName(parsed, this.colorWords, wordsLocale(this)),
+            value: this.value,
+        });
     }
     get painted() {
         const parsed = parseColor(this.value);
@@ -199,9 +209,7 @@ let HelixHeadlessColorInput = class HelixHeadlessColorInput extends MixinPickerF
             style="--color-input-swatch: ${this.value === '' ? 'transparent' : this.painted}"
           ></span>
           <slot name="trigger"></slot>
-          ${this.variant === 'swatch'
-            ? html `<span id="swatch-value" hidden>${this.swatchWords}</span>`
-            : nothing}
+          ${this.renderSwatchValue()}
         </button>
       </div>
 
@@ -249,6 +257,11 @@ __decorate([
     property()
 ], HelixHeadlessColorInput.prototype, "swatches", void 0);
 __decorate([
+    words,
+    property({ attribute: 'swatch-label' })
+], HelixHeadlessColorInput.prototype, "swatchLabel", void 0);
+__decorate([
+    words,
     property({ attribute: 'trigger-label' })
 ], HelixHeadlessColorInput.prototype, "triggerLabel", void 0);
 __decorate([

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

@@ -103,6 +103,11 @@ declare const HelixHeadlessColorPicker_base: (new (...args: any[]) => import("@f
  * @cssstate invalid - While `invalid` is set or `feedback` says what is wrong.
  */
 export declare class HelixHeadlessColorPicker extends HelixHeadlessColorPicker_base {
+    /**
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-color-picker': { hueLabel: 'Farbton' } })`.
+     */
+    static words: string;
     /**
      * Whether the color carries an alpha channel.
      *
@@ -122,7 +127,7 @@ export declare class HelixHeadlessColorPicker extends HelixHeadlessColorPicker_b
     /**
      * The message shown when the value is text that is not a color.
      */
-    badInputMessage?: string;
+    badInputMessage: string;
     /**
      * What the blue channel's field is called, in `channel-fields`.
      */
@@ -288,6 +293,16 @@ export declare class HelixHeadlessColorPicker extends HelixHeadlessColorPicker_b
      * What the square's horizontal ramp is called.
      */
     saturationLabel: string;
+    /**
+     * What a screen reader hears for the square's place, the color's two
+     * numbers and its name, on whichever of its two inputs it is on.
+     * `{first}` is `saturation` or `brightness`, the input's own channel, which
+     * is said first, so each order is its whole sentence. `{saturation}` and
+     * `{brightness}` are shares from 0 to 1, written as percentages with
+     * `number, percent`, `{saturationLabel}` and `{brightnessLabel}` the
+     * channels' names, and `{name}` the color's, such as "vibrant red".
+     */
+    squareText: string;
     /**
      * Colors offered under the picker, as a comma-separated list.
      */
@@ -305,9 +320,10 @@ export declare class HelixHeadlessColorPicker extends HelixHeadlessColorPicker_b
      *
      * **Every sentence a control raises in the browser's bubble is a property**,
      * named for the validity flag it reports, so a form in another language
-     * speaks it. Absent is the control's own sentence, in English.
+     * speaks it. Unset is the sentence registered for the page's language, then
+     * the English.
      */
-    valueMissingMessage?: string;
+    valueMissingMessage: string;
     /**
      * Draws the hue as a wheel around the square, in place of the hue ramp, as
      * React Aria's ColorWheel sits round its ColorArea.

package/dist/color-picker/root/color-picker-root.js

@@ -4,14 +4,14 @@ 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, clamp, colorName, customElement, drawIcon, fillTemplate, formatColor, formatNumber, HelixFormElement, HelixSampleEndEvent, HelixSampleStartEvent, hostAria, hueName, isRtl, KeyboardNavigationController, localeOf, MixinControllerValue, MixinPickerFeedback, parseColor, rovingStop, splitValues, toCss, wordsConverter, } from '@fusion.dev/helix-core';
+import { CopyController, capturePointer, clamp, colorName, customElement, drawIcon, focusItemOf, formatColor, formatNumber, formatWords, HelixFormElement, HelixSampleEndEvent, HelixSampleStartEvent, hostAria, hueName, isRtl, KeyboardNavigationController, MixinControllerValue, MixinPickerFeedback, parseColor, rovingStop, splitValues, toCss, words, wordsConverter, wordsLocale, } from '@fusion.dev/helix-core';
 import { eyedropper } from '@fusion.dev/helix-icons';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { live } from 'lit/directives/live.js';
 import { html } from 'lit/static-html.js';
 import { channelFields, writeChannel } from '../channels.js';
-import { hueAt } from '../wheel.js';
+import { areaAt, hueAt } from '../wheel.js';
 import '../../button/index.js';
 import '../../button-group/index.js';
 import '../../slider/index.js';
@@ -22,6 +22,7 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinPicke
         super(...arguments);
         this.alpha = false;
         this.autocomplete = 'off';
+        this.badInputMessage = 'Enter a color, like #ff0000, rgb(255 0 0) or hsl(0 100% 50%).';
         this.blueLabel = 'Blue';
         this.brightnessLabel = 'Brightness';
         this.channelFields = false;
@@ -42,9 +43,11 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinPicke
         this.redLabel = 'Red';
         this.required = false;
         this.saturationLabel = 'Saturation';
+        this.squareText = '{first, select, brightness {{brightnessLabel} {brightness, number, percent}, {saturationLabel} {saturation, number, percent}, {name}} other {{saturationLabel} {saturation, number, percent}, {brightnessLabel} {brightness, number, percent}, {name}}}';
         this.swatches = '';
         this.toolsLabel = 'Color tools';
         this.valueLabel = 'Color';
+        this.valueMissingMessage = 'Choose a color.';
         this.wheel = false;
         this.sampling = false;
         this.owned = false;
@@ -99,15 +102,12 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinPicke
             items: () => [
                 ...(this.renderRoot?.querySelectorAll('[part="swatches"] [part="swatch"]') ??
                     []),
-            ].map((swatch, index) => ({
-                contains: (node) => swatch === node,
-                disabled: false,
-                focusItem: () => {
+            ].map((swatch, index) => focusItemOf(swatch, {
+                focus: () => {
                     this.swatchAt = index;
                     swatch.focus();
                 },
-                select: () => { },
-                selected: false,
+                owns: (node) => node === swatch,
             })),
             origin: 'focus',
             selects: () => false,
@@ -165,10 +165,7 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinPicke
             if (box.width === 0 || box.height === 0) {
                 return;
             }
-            const fromLeft = Math.min(1, Math.max(0, (event.clientX - box.left) / box.width));
-            const across = isRtl(grid) ? 1 - fromLeft : fromLeft;
-            const down = Math.min(1, Math.max(0, (event.clientY - box.top) / box.height));
-            this.move({ brightness: Math.round((1 - down) * 100), saturation: Math.round(across * 100) });
+            this.move(areaAt(event.clientX, event.clientY, box, isRtl(grid)));
         };
         this.handleWheelPointer = (event) => {
             const wheel = event.currentTarget;
@@ -234,6 +231,7 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinPicke
             event.stopPropagation();
         };
     }
+    static { this.words = 'helix-color-picker'; }
     settle() {
         if (this.unsettled) {
             this.unsettled = false;
@@ -270,11 +268,11 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinPicke
     }
     reportRequired() {
         if (this.required && this.value === '') {
-            this.internals.setValidity({ valueMissing: true }, this.valueMissingMessage || 'Choose a color.', this.partNamed('grid') ?? undefined);
+            this.internals.setValidity({ valueMissing: true }, this.valueMissingMessage, this.partNamed('grid') ?? undefined);
             return;
         }
         if (this.value !== '' && parseColor(this.value) === null) {
-            this.internals.setValidity({ badInput: true }, this.badInputMessage || 'Enter a color, like #ff0000, rgb(255 0 0) or hsl(0 100% 50%).', this.partNamed('value') ?? this.partNamed('grid') ?? undefined);
+            this.internals.setValidity({ badInput: true }, this.badInputMessage, this.partNamed('value') ?? this.partNamed('grid') ?? undefined);
             return;
         }
         this.internals.setValidity({});
@@ -416,7 +414,7 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinPicke
             : html `<${this.tag('button')}
                         part="format"
       exportparts="button: format-button, live: format-live, spinner: format-spinner, text: format-text"
-                        label=${fillTemplate(this.formatLabel, { format: this.format ?? 'hex' })}
+                        label=${formatWords(this, 'formatLabel', { format: this.format ?? 'hex' })}
                         ?disabled=${this.isDisabled}
                         @click=${this.handleFormat}
                       >
@@ -445,7 +443,7 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinPicke
           type="button"
           role="option"
           tabindex=${index === stop ? '0' : '-1'}
-          aria-label=${parsed ? colorName(parsed, this.colorWords, localeOf(this)) : preset}
+          aria-label=${parsed ? colorName(parsed, this.colorWords, wordsLocale(this)) : preset}
           aria-selected=${chosen[index] ? 'true' : 'false'}
           style="--color-picker-swatch: ${preset}"
           ?disabled=${this.isDisabled}
@@ -460,10 +458,19 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinPicke
     render() {
         const color = this.color;
         const painted = toCss(color);
-        const named = colorName(color, this.colorWords, localeOf(this));
-        const both = `${this.saturationLabel} ${color.saturation}%, ${this.brightnessLabel} ${color.brightness}%, ${named}`;
-        const reversed = `${this.brightnessLabel} ${color.brightness}%, ${this.saturationLabel} ${color.saturation}%, ${named}`;
-        const hue = hueName({ alpha: 100, brightness: 100, hue: color.hue, saturation: 100 }, this.colorWords, localeOf(this));
+        const locale = wordsLocale(this);
+        const square = (first) => formatWords(this, 'squareText', {
+            brightness: color.brightness / 100,
+            brightnessLabel: this.brightnessLabel,
+            first,
+            name: colorName(color, this.colorWords, locale),
+            saturation: color.saturation / 100,
+            saturationLabel: this.saturationLabel,
+        });
+        const both = square('saturation');
+        const reversed = square('brightness');
+        const hue = hueName({ alpha: 100, brightness: 100, hue: color.hue, saturation: 100 }, this.colorWords, locale);
+        const hueSaid = (value) => new Intl.ListFormat(locale, { style: 'short', type: 'unit' }).format([String(value), hue]);
         const owner = this.getAttribute('aria-label')?.trim();
         const axisName = (channel) => (owner ? `${owner}, ${channel}` : channel);
         const area = html `<div
@@ -524,7 +531,7 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinPicke
               dir="ltr"
               aria-label=${axisName(this.hueLabel)}
               aria-describedby=${this.feedback === '' ? nothing : 'feedback'}
-              aria-valuetext=${`${color.hue}, ${hue}`}
+              aria-valuetext=${hueSaid(color.hue)}
               aria-invalid=${this.marked ? 'true' : nothing}
               .value=${String(color.hue)}
               ?disabled=${this.isDisabled}
@@ -541,15 +548,15 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinPicke
           type="button"
           aria-label=${this.copier.copied
             ? this.copiedLabel
-            : fillTemplate(this.copyLabel, { value: this.value }).trim()}
+            : formatWords(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.wheel ? nothing : this.renderChannel('hue', this.hueLabel, 360, color.hue, `{value}, ${hue}`)}
+          ${this.wheel ? nothing : this.renderChannel('hue', this.hueLabel, 360, color.hue, hueSaid('{value}'))}
           ${this.alpha
-            ? this.renderChannel('alpha', this.opacityLabel, 100, color.alpha, formatNumber(color.alpha / 100, localeOf(this), { style: 'percent' }))
+            ? this.renderChannel('alpha', this.opacityLabel, 100, color.alpha, formatNumber(color.alpha / 100, locale, { style: 'percent' }))
             : nothing}
         </div>
       </div>
@@ -593,12 +600,15 @@ __decorate([
     property()
 ], HelixHeadlessColorPicker.prototype, "autocomplete", void 0);
 __decorate([
+    words,
     property({ attribute: 'bad-input-message' })
 ], HelixHeadlessColorPicker.prototype, "badInputMessage", void 0);
 __decorate([
+    words,
     property({ attribute: 'blue-label' })
 ], HelixHeadlessColorPicker.prototype, "blueLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'brightness-label' })
 ], HelixHeadlessColorPicker.prototype, "brightnessLabel", void 0);
 __decorate([
@@ -608,27 +618,34 @@ __decorate([
     property({ attribute: 'color-words', converter: wordsConverter })
 ], HelixHeadlessColorPicker.prototype, "colorWords", void 0);
 __decorate([
+    words,
     property({ attribute: 'copied-label' })
 ], HelixHeadlessColorPicker.prototype, "copiedLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'copy-label' })
 ], HelixHeadlessColorPicker.prototype, "copyLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'eyedropper-label' })
 ], HelixHeadlessColorPicker.prototype, "eyedropperLabel", void 0);
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessColorPicker.prototype, "format", void 0);
 __decorate([
+    words,
     property({ attribute: 'format-label' })
 ], HelixHeadlessColorPicker.prototype, "formatLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'green-label' })
 ], HelixHeadlessColorPicker.prototype, "greenLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'hue-label' })
 ], HelixHeadlessColorPicker.prototype, "hueLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'lightness-label' })
 ], HelixHeadlessColorPicker.prototype, "lightnessLabel", void 0);
 __decorate([
@@ -641,33 +658,44 @@ __decorate([
     property({ attribute: 'no-value', type: Boolean })
 ], HelixHeadlessColorPicker.prototype, "noValue", void 0);
 __decorate([
+    words,
     property({ attribute: 'opacity-label' })
 ], HelixHeadlessColorPicker.prototype, "opacityLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'presets-label' })
 ], HelixHeadlessColorPicker.prototype, "presetsLabel", void 0);
 __decorate([
     property({ attribute: 'readonly', reflect: true, type: Boolean })
 ], HelixHeadlessColorPicker.prototype, "readOnly", void 0);
 __decorate([
+    words,
     property({ attribute: 'red-label' })
 ], HelixHeadlessColorPicker.prototype, "redLabel", void 0);
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessColorPicker.prototype, "required", void 0);
 __decorate([
+    words,
     property({ attribute: 'saturation-label' })
 ], HelixHeadlessColorPicker.prototype, "saturationLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'square-text' })
+], HelixHeadlessColorPicker.prototype, "squareText", void 0);
 __decorate([
     property()
 ], HelixHeadlessColorPicker.prototype, "swatches", void 0);
 __decorate([
+    words,
     property({ attribute: 'tools-label' })
 ], HelixHeadlessColorPicker.prototype, "toolsLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'value-label' })
 ], HelixHeadlessColorPicker.prototype, "valueLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'value-missing-message' })
 ], HelixHeadlessColorPicker.prototype, "valueMissingMessage", void 0);
 __decorate([

package/dist/color-picker/wheel.d.ts

@@ -15,3 +15,14 @@ export interface WheelBox {
  * whatever the writing direction, since a circle has no line of text.
  */
 export declare const hueAt: (x: number, y: number, box: WheelBox) => number;
+/**
+ * The saturation and brightness at a point in the color square, 0 to 100:
+ * brightness falls downward, and saturation runs along the line, the way the
+ * two ramps under the square do, being native ranges. On a right-to-left page
+ * (`rtl`) it grows toward the left. A point outside the square is held to its
+ * edge.
+ */
+export declare const areaAt: (x: number, y: number, box: WheelBox, rtl: boolean) => {
+    brightness: number;
+    saturation: number;
+};

package/dist/color-picker/wheel.js

@@ -1,6 +1,15 @@
+import { clamp } from '@fusion.dev/helix-core';
 export const hueAt = (x, y, box) => {
     const across = x - (box.left + box.width / 2);
     const down = y - (box.top + box.height / 2);
     const degrees = Math.round((Math.atan2(across, -down) * 180) / Math.PI);
     return (degrees + 360) % 360;
 };
+export const areaAt = (x, y, box, rtl) => {
+    const fromLeft = clamp((x - box.left) / box.width, 0, 1);
+    const down = clamp((y - box.top) / box.height, 0, 1);
+    return {
+        brightness: Math.round((1 - down) * 100),
+        saturation: Math.round((rtl ? 1 - fromLeft : fromLeft) * 100),
+    };
+};

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

@@ -17,13 +17,33 @@ declare const HelixHeadlessCombobox_base: (new (...args: any[]) => import("@fusi
  * reopened combobox starts from the whole list.
  *
  * Focus stays in the text field. The arrow keys move through the list with the
- * listbox's public `navigate` method. `role="combobox"` is on the input itself.
- * ArrowDown and ArrowUp open the list on the chosen option, and Enter chooses
- * the highlighted one. As typing narrows the list, a screen reader hears how
- * many options are left, such as "3 results". Space, Home, End and letters edit the text, and Enter in
- * a closed field is left to the form. Emptying the field and leaving it clears
- * a single choice; Escape puts the chosen words back, and a second Escape on
- * the closed field clears the choice.
+ * listbox's public `navigate` method. As typing narrows the list, a screen
+ * reader hears how many options are left, such as "3 results". Emptying the
+ * field and leaving it clears a single choice.
+ *
+ * **Keyboard.**
+ *
+ * | Key | What it does |
+ * |---|---|
+ * | Down, Up | On a closed field, opens the list on the chosen option, or the first or the last. In the open list, moves the highlight, round from the last option to the first. |
+ * | Page Down, Page Up | In the open list, moves the highlight by as many options as the list shows at once. |
+ * | Enter | Chooses the highlighted option. With nothing left in the list, creates what was typed with `creatable`, or takes it with `allows-custom-value`. On a closed field, submits the form. |
+ * | Escape | Closes the list and puts the chosen words back. On a closed field, a second Escape clears a single choice. |
+ * | Tab | Closes the list and moves on. |
+ * | Backspace | With `multiple`, on an empty field, removes the last tag. |
+ * | Space, Home, End, letters | Edit the text. |
+ *
+ * **ARIA.** The input is the `combobox`, named by the label, with
+ * `aria-expanded`, `aria-controls` naming the list, `aria-autocomplete`
+ * (`both` with `suggest`, `list` otherwise) and `aria-activedescendant` on
+ * the highlighted option. The list is the listbox `Listbox` describes.
+ *
+ * On Apple devices, where VoiceOver does not read the option the field points
+ * to, the field says it in a live region as the highlight moves, says how many
+ * options there are as the list opens, and says a choice once it is made, as
+ * React Aria's combobox does there.
+ *
+ * Set `autocomplete` to let a browser's autofill choose an option.
  *
  * With `multiple`, each chosen option is a tag in the field with its own remove
  * control. The panel stays open and the filter clears after each choice, so the
@@ -83,6 +103,7 @@ declare const HelixHeadlessCombobox_base: (new (...args: any[]) => import("@fusi
  * @csspart listbox-loading - Shown while the options are loading.
  * @csspart listbox-search - The region holding the field that narrows the list.
  * @csspart listbox-search-field - The filter field inside that region.
+ * @csspart live - The region VoiceOver hears the highlight, the count and a choice from on Apple devices, drawn once there is one to say. Visually hidden in the styled tier.
  * @csspart rest - The count of choices held beyond `max-tags`. A `<button>` with `expandable`, a `<span>` without it.
  * @csspart surface - The floating panel.
  * @csspart tag - One chosen option.
@@ -94,13 +115,27 @@ declare const HelixHeadlessCombobox_base: (new (...args: any[]) => import("@fusi
  * @csspart tag-start - The category before the label.
  * @csspart tags - The row of chosen options, when `multiple` is set.
  *
+ * @cssstate blank - While nothing is chosen.
  * @cssstate error - While `load-error` is set.
  * @cssstate invalid - The control has an error to show, from the browser's validation or from your `feedback`.
+ * @cssstate loading - While `loading` is set.
  * @cssstate no-results - What was typed hid every option of a list that has some.
  * @cssstate open - While the list is open.
  */
 export declare class HelixHeadlessCombobox extends HelixHeadlessCombobox_base {
+    /**
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-combobox': { emptyText: 'Keine Treffer' } })`.
+     */
+    static words: string;
     protected readonly aria: AriaForwardController;
+    /** The region VoiceOver hears the highlight, the count and a choice from. */
+    private readonly status;
+    /**
+     * The option, or the create row, the region last said: `null` for none,
+     * and `undefined` until it has spoken since the list opened.
+     */
+    private told;
     /**
      * Whether text that names no option is taken as the value, as React Aria's
      * `allowsCustomValue`.
@@ -113,12 +148,19 @@ export declare class HelixHeadlessCombobox extends HelixHeadlessCombobox_base {
      */
     allowsCustomValue: boolean;
     /**
-     * What the browser may autofill in the text field, as a platform token.
+     * What the browser may autofill, as a platform token such as `country`.
      *
      * **Defaults to `off`, which is not the platform's default and is the
      * point.** The field filters a list rather than collecting a value, so a
      * browser offering to fill it with a saved address is competing for the same
      * keystrokes as the listbox. A consumer who wants autofill can still ask.
+     *
+     * Set, a combobox whose answer is one of its options keeps a hidden native
+     * `<select>` with the same options for the browser to fill, as React Aria's
+     * combobox and Select do, and the option the browser picks, by its value or
+     * its words, becomes the value. The text field itself stays `off`, so the
+     * browser fills the answer and not the filter. With `allows-custom-value`
+     * the token goes on the text field, whose words are the answer.
      */
     autocomplete: string;
     /**
@@ -132,7 +174,10 @@ export declare class HelixHeadlessCombobox extends HelixHeadlessCombobox_base {
      */
     creatable: boolean;
     /**
-     * The text of the create row, shown before the typed words it adds.
+     * The text of the create row. `{value}` is what was typed.
+     *
+     * A sentence without `{value}`, such as `Create`, is followed by what was
+     * typed in quotes, as before `{value}` existed.
      */
     createLabel: string;
     /**
@@ -155,10 +200,11 @@ export declare class HelixHeadlessCombobox extends HelixHeadlessCombobox_base {
     listLabel: string;
     /**
      * What the list says when its options could not be loaded, such as after a
-     * request to a server fails. Empty is no error. Passed to the list, which
-     * shows it under any options there are and tells screen readers.
+     * request to a server fails. Empty, null or no attribute is no error, so
+     * removing the attribute clears it. Passed to the list, which shows it
+     * under any options there are and tells screen readers.
      */
-    loadError: string;
+    loadError: string | null;
     /**
      * Whether the options are still loading.
      *
@@ -170,6 +216,12 @@ export declare class HelixHeadlessCombobox extends HelixHeadlessCombobox_base {
      * Text the list shows while the options load.
      */
     loadingText: string;
+    /**
+     * The locale the words, plural forms, and numbers are in, as a BCP 47 tag
+     * such as `pl`. Empty reads the nearest `lang`, then the browser's
+     * language.
+     */
+    locale: string;
     /**
      * Whether more than one option can be chosen.
      *
@@ -226,16 +278,25 @@ export declare class HelixHeadlessCombobox extends HelixHeadlessCombobox_base {
      */
     removeLabel: string;
     /**
-     * What a screen reader hears when typing leaves one option. `{count}` is
-     * the count.
+     * What a screen reader hears when typing leaves one option, where
+     * `results-label` should not say it. `{count}` is the count.
+     *
+     * @deprecated Write every form in `results-label`, as `{count, plural, one
+     * {# result} other {# results}}`. Removed in the next major version.
      */
-    resultLabel: string;
+    resultLabel?: string;
     /**
-     * What a screen reader hears when typing leaves any other number of
-     * options. `{count}` is the count, and `Intl.PluralRules` picks between the
-     * two.
+     * What a screen reader hears when typing narrows the list. `{count}` is how
+     * many options are left, written in the locale, and each language writes
+     * the forms it has: `{count, plural, one {# wynik} few {# wyniki} many
+     * {# wyników} other {# wyniku}}`.
      */
     resultsLabel: string;
+    /**
+     * What VoiceOver hears for a chosen option, as the highlight reaches it and
+     * once it is chosen, on Apple devices. `{name}` is the option's words.
+     */
+    selectedLabel: string;
     /**
      * Whether the field completes the word as the user types.
      *
@@ -245,6 +306,12 @@ export declare class HelixHeadlessCombobox extends HelixHeadlessCombobox_base {
      * should not have to ask.
      */
     suggest: boolean;
+    /**
+     * The message reported when the field is required and nothing is chosen.
+     * Absent, or empty, is this sentence, or the words registered for the page's
+     * locale.
+     */
+    valueMissingMessage: string;
     /**
      * What the reader has typed, which narrows the list and is not the value.
      *
@@ -459,6 +526,25 @@ export declare class HelixHeadlessCombobox extends HelixHeadlessCombobox_base {
      * is missing.
      */
     private linkActive;
+    /**
+     * Says the highlight, and the count as the list opens, where VoiceOver
+     * would not.
+     *
+     * **VoiceOver does not read the option `aria-activedescendant` points to**
+     * while focus is in a text field, so on Apple devices the arrows moved
+     * through the list in silence. React Aria says the option there, with
+     * "selected" where it is chosen, and how many there are as the list opens.
+     * Only when the highlight moves to another option, so an update that leaves
+     * it where it was says nothing.
+     */
+    private tell;
+    /** How many options there are, said as the list opens, until an option is said with it. */
+    private counted;
+    /**
+     * How many options are left, in `results-label`, or in the deprecated
+     * `result-label` for one where a page still sets it.
+     */
+    private countSaid;
     /**
      * Takes what the list announced and stops it there.
      *
@@ -565,6 +651,8 @@ export declare class HelixHeadlessCombobox extends HelixHeadlessCombobox_base {
      */
     private renderCreate;
     protected render(): TemplateResult;
+    /** Whether a browser's autofill fills the hidden select, rather than the text field. */
+    private get fills();
 }
 declare global {
     interface HTMLElementTagNameMap {