@fusion.dev/helix-headless 0.148.0 → 0.149.0

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

@@ -90,6 +90,11 @@ import '../../copy-button/index.js';
  * @cssstate expanded - The expand button has shown every line of a capped block.
  */
 export declare class HelixHeadlessCodeBlock extends HelixElement {
+    /**
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-code-block': { copyLabel: 'Code kopieren' } })`.
+     */
+    static words: string;
     /**
      * The expand button's words while the block shows every line.
      */
@@ -102,10 +107,15 @@ export declare class HelixHeadlessCodeBlock extends HelixElement {
      * The copy button's name and tooltip text before a copy.
      *
      * Where the block has a name, the button says it too, such as "Copy code,
-     * app.ts", so each copy button on a page with several blocks is told apart.
-     * In a diff, that is each file's own name.
+     * app.ts", as `copy-name-label` puts it, so each copy button on a page with
+     * several blocks is told apart. In a diff, that is each file's own name.
      */
     copyLabel: string;
+    /**
+     * The copy button's name and tooltip text before a copy, where the block
+     * has a name. `{copy}` is `copy-label` and `{name}` the block's name.
+     */
+    copyNameLabel: string;
     /**
      * Whether the content is a unified diff, drawn as the lines it changed.
      *

package/dist/code-block/root/code-block-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 } from '@fusion.dev/helix-core';
+import { customElement, formatWords, HelixElement, words } from '@fusion.dev/helix-core';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
@@ -19,6 +19,7 @@ let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
         this.collapseLabel = 'Show fewer lines';
         this.copiedLabel = 'Copied';
         this.copyLabel = 'Copy code';
+        this.copyNameLabel = '{copy}, {name}';
         this.diff = false;
         this.expandable = false;
         this.expandLabel = 'Show all lines';
@@ -38,6 +39,7 @@ let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
             }
         };
     }
+    static { this.words = 'helix-code-block'; }
     get files() {
         if (!this.diff) {
             return [];
@@ -150,7 +152,7 @@ let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
         tooltip-arrow-top: copy-tooltip-arrow-top, tooltip-bottom: copy-tooltip-bottom,
         tooltip-left: copy-tooltip-left, tooltip-right: copy-tooltip-right, tooltip-top: copy-tooltip-top"
       copied-label=${this.copiedLabel}
-      label=${name ? `${this.copyLabel}, ${name}` : this.copyLabel}
+      label=${name ? formatWords(this, 'copyNameLabel', { copy: this.copyLabel, name }) : this.copyLabel}
       .value=${value}
     ></${this.tag('copy-button')}>`;
     }
@@ -203,14 +205,21 @@ let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
     }
 };
 __decorate([
+    words,
     property({ attribute: 'collapse-label' })
 ], HelixHeadlessCodeBlock.prototype, "collapseLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'copied-label' })
 ], HelixHeadlessCodeBlock.prototype, "copiedLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'copy-label' })
 ], HelixHeadlessCodeBlock.prototype, "copyLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'copy-name-label' })
+], HelixHeadlessCodeBlock.prototype, "copyNameLabel", void 0);
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessCodeBlock.prototype, "diff", void 0);
@@ -218,6 +227,7 @@ __decorate([
     property({ type: Boolean })
 ], HelixHeadlessCodeBlock.prototype, "expandable", void 0);
 __decorate([
+    words,
     property({ attribute: 'expand-label' })
 ], HelixHeadlessCodeBlock.prototype, "expandLabel", void 0);
 __decorate([

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

@@ -115,6 +115,11 @@ declare const HelixHeadlessColorInput_base: (new (...args: any[]) => import("@fu
  * @cssstate open - While the picker is open.
  */
 export declare class HelixHeadlessColorInput extends HelixHeadlessColorInput_base {
+    /**
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-color-input': { triggerLabel: 'Farbe auswählen' } })`.
+     */
+    static words: string;
     protected readonly aria: AriaForwardController;
     /**
      * Whether the color carries an alpha channel.
@@ -180,6 +185,12 @@ export declare class HelixHeadlessColorInput extends HelixHeadlessColorInput_bas
      * Colors offered under the picker, as a comma-separated list.
      */
     swatches: string;
+    /**
+     * What the swatch says in `variant="swatch"`, after the field's label, once
+     * there is a color. `{name}` is the color's name, such as "vibrant red", and
+     * `{value}` the value as written.
+     */
+    swatchLabel: string;
     /**
      * Accessible name for the control that opens the panel.
      */
@@ -232,6 +243,8 @@ export declare class HelixHeadlessColorInput extends HelixHeadlessColorInput_bas
      * field. It carries `id="control"` there for the same reason.
      */
     protected get anchor(): HTMLElement | null;
+    /** The swatch's words in `swatch`, which its label points at, and never drawn. */
+    private renderSwatchValue;
     /** What the picker should show, which is only ever a color. */
     private get picked();
     /**

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,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, clamp, colorName, customElement, drawIcon, fillTemplate, focusItemOf, 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';
@@ -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;
@@ -228,6 +231,7 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinPicke
             event.stopPropagation();
         };
     }
+    static { this.words = 'helix-color-picker'; }
     settle() {
         if (this.unsettled) {
             this.unsettled = false;
@@ -264,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({});
@@ -410,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}
                       >
@@ -439,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}
@@ -454,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
@@ -518,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}
@@ -535,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>
@@ -587,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([
@@ -602,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([
@@ -635,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/combobox/root/combobox-root.d.ts

@@ -123,6 +123,11 @@ declare const HelixHeadlessCombobox_base: (new (...args: any[]) => import("@fusi
  * @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;
@@ -169,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;
     /**
@@ -208,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.
      *
@@ -264,14 +278,18 @@ 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;
     /**
@@ -288,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.
      *
@@ -516,6 +540,11 @@ export declare class HelixHeadlessCombobox extends HelixHeadlessCombobox_base {
     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.
      *