@fusion.dev/helix-headless 0.142.1 → 0.144.0

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

@@ -4,11 +4,13 @@ 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, fillTemplate, formatColor, HelixFormElement, HelixSampleEndEvent, HelixSampleStartEvent, isRtl, MixinControllerValue, parseColor, splitValues, toCss, } from '@fusion.dev/helix-core';
+import { CopyController, capturePointer, colorName, customElement, drawIcon, fillTemplate, formatColor, HelixFormElement, HelixSampleEndEvent, HelixSampleStartEvent, hostAria, hueName, 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';
+import { live } from 'lit/directives/live.js';
 import { html } from 'lit/static-html.js';
+import { channelFields, writeChannel } from '../channels.js';
 import '../../button/index.js';
 import '../../button-group/index.js';
 import '../../slider/index.js';
@@ -19,19 +21,25 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinContr
         super(...arguments);
         this.alpha = false;
         this.autocomplete = 'off';
+        this.blueLabel = 'Blue';
         this.brightnessLabel = 'Brightness';
+        this.channelFields = false;
+        this.colorWords = {};
         this.copiedLabel = 'Copied';
         this.copyLabel = 'Copy {value}';
         this.eyedropperLabel = 'Sample a color from the screen';
         this.formatLabel = 'Syntax: {format}. Change it.';
+        this.greenLabel = 'Green';
         this.hueLabel = 'Hue';
         this.invalid = false;
+        this.lightnessLabel = 'Lightness';
         this.noEyedropper = false;
         this.noFormat = false;
         this.noValue = false;
         this.opacityLabel = 'Opacity';
         this.presetsLabel = 'Presets';
         this.readOnly = false;
+        this.redLabel = 'Red';
         this.required = false;
         this.saturationLabel = 'Saturation';
         this.swatches = '';
@@ -39,6 +47,8 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinContr
         this.valueLabel = 'Color';
         this.sampling = false;
         this.owned = false;
+        this.announcesInput = true;
+        this.unsettled = false;
         this.settled = '';
         this.handleValueInput = (event) => {
             event.stopPropagation();
@@ -57,16 +67,21 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinContr
             if (this.readOnly) {
                 return;
             }
+            const before = this.moved;
             this.moved = { ...this.color, ...next };
             const value = formatColor(this.moved, this.format ?? 'hex', this.alpha);
             this.owned = value !== this.value;
-            this.requestValue(value);
+            if (!this.requestValue(value)) {
+                this.moved = before;
+                this.owned = false;
+            }
         };
         this.copier = new CopyController(this);
         this.handleSwatch = (preset) => {
             const parsed = parseColor(preset);
             if (parsed) {
                 this.move(parsed);
+                this.settle();
             }
         };
         this.handleFormat = () => {
@@ -76,6 +91,7 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinContr
             this.format = FORMATS[(FORMATS.indexOf(this.format ?? 'hex') + 1) % FORMATS.length] ?? 'hex';
             if (this.value !== '') {
                 this.move({});
+                this.settle();
             }
         };
         this.handleEyeDropper = async () => {
@@ -92,6 +108,7 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinContr
                 const parsed = parseColor(sRGBHex);
                 if (parsed) {
                     this.move({ ...parsed, alpha: this.color.alpha });
+                    this.settle();
                 }
             }
             catch {
@@ -99,7 +116,14 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinContr
             this.dispatchEvent(new HelixSampleEndEvent());
         };
         this.handleGridPointer = (event) => {
+            if (this.isDisabled) {
+                return;
+            }
             const grid = event.currentTarget;
+            if (event.type === 'pointerup' || event.type === 'pointercancel') {
+                this.settle();
+                return;
+            }
             if (event.type === 'pointerdown') {
                 capturePointer(grid, event.pointerId);
                 this.partNamed('grid-saturation')?.focus();
@@ -117,10 +141,51 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinContr
             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.handleAreaKeydown = (event) => {
+            if (this.isDisabled || this.readOnly) {
+                return;
+            }
+            const color = this.color;
+            const along = isRtl(this) ? -1 : 1;
+            const clamp = (at) => Math.min(100, Math.max(0, at));
+            const moves = {
+                ArrowDown: { brightness: clamp(color.brightness - 1) },
+                ArrowLeft: { saturation: clamp(color.saturation - along) },
+                ArrowRight: { saturation: clamp(color.saturation + along) },
+                ArrowUp: { brightness: clamp(color.brightness + 1) },
+                PageDown: { brightness: clamp(color.brightness - 10) },
+                PageUp: { brightness: clamp(color.brightness + 10) },
+            };
+            const next = moves[event.key];
+            if (!next) {
+                return;
+            }
+            event.preventDefault();
+            this.move(next);
+            this.settle();
+        };
+        this.handleField = (channel, event) => {
+            event.stopPropagation();
+            const typed = event.target.value;
+            if (typed.trim() === '') {
+                return;
+            }
+            const format = this.format ?? 'hex';
+            const written = writeChannel(channelFields(this.value, this.color, format, this.alpha), format, this.alpha, channel, Number(typed));
+            if (written !== null) {
+                this.takeWritten(written);
+            }
+        };
         this.keepChannelRequest = (event) => {
             event.stopPropagation();
         };
     }
+    settle() {
+        if (this.unsettled) {
+            this.unsettled = false;
+            this.announceChange();
+        }
+    }
     get color() {
         return this.moved ?? parseColor(this.value) ?? parseColor(this.settled) ?? START;
     }
@@ -134,7 +199,12 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinContr
         if (this.readOnly) {
             return false;
         }
-        return super.requestValue(next);
+        const before = this.value;
+        const taken = super.requestValue(next);
+        if (taken && this.value !== before) {
+            this.unsettled = true;
+        }
+        return taken;
     }
     firstUpdated(changed) {
         super.firstUpdated(changed);
@@ -149,6 +219,10 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinContr
             this.internals.setValidity({ valueMissing: true }, this.valueMissingMessage || 'Choose a color.', 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);
+            return;
+        }
         this.internals.setValidity({});
     }
     updated(changed) {
@@ -169,7 +243,56 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinContr
     focus(options) {
         this.partNamed('grid-saturation')?.focus(options);
     }
-    renderChannel(channel, label, max, value) {
+    channelWord(channel) {
+        return {
+            alpha: this.opacityLabel,
+            blue: this.blueLabel,
+            green: this.greenLabel,
+            hue: this.hueLabel,
+            lightness: this.lightnessLabel,
+            red: this.redLabel,
+            saturation: this.saturationLabel,
+        }[channel];
+    }
+    takeWritten(next) {
+        const parsed = parseColor(next);
+        if (this.readOnly || parsed === null) {
+            return;
+        }
+        const before = this.moved;
+        const hueless = parsed.saturation === 0 || parsed.brightness === 0;
+        this.moved = hueless ? { ...parsed, hue: this.color.hue } : parsed;
+        this.owned = next !== this.value;
+        if (!this.requestValue(next)) {
+            this.moved = before;
+            this.owned = false;
+        }
+    }
+    renderFields(color) {
+        return html `<div part="fields">
+      ${channelFields(this.value, color, this.format ?? 'hex', this.alpha).map((field) => html `<label part="field">
+          <span part="field-label">${this.channelWord(field.channel)}</span>
+          <input
+            part="field-input"
+            type="number"
+            inputmode="numeric"
+            min=${field.min}
+            max=${field.max}
+            step="1"
+            .value=${live(String(field.value))}
+            ?disabled=${this.isDisabled}
+            ?readonly=${this.readOnly}
+            @input=${(event) => this.handleField(field.channel, event)}
+            @change=${(event) => {
+            event.stopPropagation();
+            this.settle();
+            this.requestUpdate();
+        }}
+          />
+        </label>`)}
+    </div>`;
+    }
+    renderChannel(channel, label, max, value, spoken = '') {
         return html `<${this.tag('slider')}
       part="channel"
       exportparts="control: channel-control, feedback: channel-feedback, field: channel-field,
@@ -180,10 +303,14 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinContr
       label=${label}
       max=${max}
       min="0"
+      value-text=${spoken || nothing}
       .value=${String(value)}
       ?disabled=${this.isDisabled}
       @input=${(event) => this.takeChannel(channel, event)}
-      @change=${(event) => this.takeChannel(channel, event)}
+      @change=${(event) => {
+            this.takeChannel(channel, event);
+            this.settle();
+        }}
       @helix-before-change=${this.keepChannelRequest}
     ></${this.tag('slider')}>`;
     }
@@ -211,6 +338,8 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinContr
     willUpdate(changed) {
         super.willUpdate(changed);
         this.internals.ariaInvalid = this.invalid ? 'true' : null;
+        const outside = [...(this.internals.labels ?? [])];
+        hostAria(this.internals, { labelledBy: outside, role: outside.length > 0 ? 'group' : '' });
         if (!this.hydrating) {
             this.sampling = 'EyeDropper' in globalThis;
         }
@@ -220,8 +349,8 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinContr
                 ${this.sampling && !this.noEyedropper
             ? html `<${this.tag('button')}
                         part="eyedropper"
-      exportparts="button: eyedropper-button, text: eyedropper-text"
-                        aria-label=${this.eyedropperLabel}
+      exportparts="button: eyedropper-button, live: eyedropper-live, text: eyedropper-text"
+                        label=${this.eyedropperLabel}
                         ?disabled=${this.isDisabled}
                         @click=${this.handleEyeDropper}
                       >
@@ -232,8 +361,8 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinContr
             ? nothing
             : html `<${this.tag('button')}
                         part="format"
-      exportparts="button: format-button, text: format-text"
-                        aria-label=${fillTemplate(this.formatLabel, { format: this.format ?? 'hex' })}
+      exportparts="button: format-button, live: format-live, text: format-text"
+                        label=${fillTemplate(this.formatLabel, { format: this.format ?? 'hex' })}
                         ?disabled=${this.isDisabled}
                         @click=${this.handleFormat}
                       >
@@ -244,33 +373,48 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinContr
     render() {
         const color = this.color;
         const painted = toCss(color);
+        const named = colorName(color, this.colorWords, this.lang);
+        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, this.lang);
+        const owner = this.getAttribute('aria-label')?.trim();
+        const axisName = (channel) => (owner ? `${owner}, ${channel}` : channel);
         return html `<div
         part="grid"
         style="--color-picker-hue: ${color.hue}; --color-picker-saturation: ${color.saturation}%; --color-picker-brightness: ${color.brightness}%"
         @pointerdown=${this.handleGridPointer}
         @pointermove=${this.handleGridPointer}
+        @pointerup=${this.handleGridPointer}
+        @pointercancel=${this.handleGridPointer}
+        @keydown=${this.handleAreaKeydown}
       >
         <input
           part="grid-saturation"
           type="range"
           min="0"
           max="100"
-          aria-label=${this.saturationLabel}
+          aria-label=${axisName(this.saturationLabel)}
+          aria-valuetext=${both}
           aria-invalid=${this.invalid ? 'true' : nothing}
           .value=${String(color.saturation)}
           ?disabled=${this.isDisabled}
           @input=${(event) => this.takeArea('saturation', event)}
+          @change=${() => this.settle()}
         />
+        ${''}
         <input
           part="grid-brightness"
           type="range"
           min="0"
           max="100"
-          aria-label=${this.brightnessLabel}
+          tabindex="-1"
+          aria-label=${axisName(this.brightnessLabel)}
+          aria-valuetext=${reversed}
           aria-invalid=${this.invalid ? 'true' : nothing}
           .value=${String(color.brightness)}
           ?disabled=${this.isDisabled}
           @input=${(event) => this.takeArea('brightness', event)}
+          @change=${() => this.settle()}
         />
       </div>
 
@@ -286,10 +430,11 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinContr
           @click=${() => this.copier.copy(this.value)}
         ></button>
         <div part="channels">
-          ${this.renderChannel('hue', this.hueLabel, 360, color.hue)}
+          ${this.renderChannel('hue', this.hueLabel, 360, color.hue, `{value}, ${hue}`)}
           ${this.alpha ? this.renderChannel('alpha', this.opacityLabel, 100, color.alpha) : nothing}
         </div>
       </div>
+      ${this.channelFields ? this.renderFields(color) : nothing}
 
       <!-- The syntax and the presets share a row, because neither fills one.
            Above them the ramps get the whole width, which is what they need:
@@ -309,6 +454,10 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinContr
                 ?disabled=${this.isDisabled}
                 ?readonly=${this.readOnly}
                 @input=${this.handleValueInput}
+                @change=${(event) => {
+                event.stopPropagation();
+                this.settle();
+            }}
               />`}
         ${this.tools ? html `${this.renderTools()}` : nothing}
       </div>
@@ -321,7 +470,7 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinContr
                 return html `<button
                     part="swatch"
                     type="button"
-                    aria-label=${preset}
+                    aria-label=${parsed ? colorName(parsed, this.colorWords, this.lang) : preset}
                     aria-pressed=${parsed !== null && toCss(parsed) === painted ? 'true' : 'false'}
                     style="--color-picker-swatch: ${preset}"
                     ?disabled=${this.isDisabled}
@@ -337,9 +486,21 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessColorPicker.prototype, "autocomplete", void 0);
+__decorate([
+    property({ attribute: 'bad-input-message' })
+], HelixHeadlessColorPicker.prototype, "badInputMessage", void 0);
+__decorate([
+    property({ attribute: 'blue-label' })
+], HelixHeadlessColorPicker.prototype, "blueLabel", void 0);
 __decorate([
     property({ attribute: 'brightness-label' })
 ], HelixHeadlessColorPicker.prototype, "brightnessLabel", void 0);
+__decorate([
+    property({ attribute: 'channel-fields', type: Boolean })
+], HelixHeadlessColorPicker.prototype, "channelFields", void 0);
+__decorate([
+    property({ attribute: 'color-words', type: Object })
+], HelixHeadlessColorPicker.prototype, "colorWords", void 0);
 __decorate([
     property({ attribute: 'copied-label' })
 ], HelixHeadlessColorPicker.prototype, "copiedLabel", void 0);
@@ -355,12 +516,18 @@ __decorate([
 __decorate([
     property({ attribute: 'format-label' })
 ], HelixHeadlessColorPicker.prototype, "formatLabel", void 0);
+__decorate([
+    property({ attribute: 'green-label' })
+], HelixHeadlessColorPicker.prototype, "greenLabel", void 0);
 __decorate([
     property({ attribute: 'hue-label' })
 ], HelixHeadlessColorPicker.prototype, "hueLabel", void 0);
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessColorPicker.prototype, "invalid", void 0);
+__decorate([
+    property({ attribute: 'lightness-label' })
+], HelixHeadlessColorPicker.prototype, "lightnessLabel", void 0);
 __decorate([
     property({ attribute: 'no-eyedropper', type: Boolean })
 ], HelixHeadlessColorPicker.prototype, "noEyedropper", void 0);
@@ -379,6 +546,9 @@ __decorate([
 __decorate([
     property({ attribute: 'readonly', reflect: true, type: Boolean })
 ], HelixHeadlessColorPicker.prototype, "readOnly", void 0);
+__decorate([
+    property({ attribute: 'red-label' })
+], HelixHeadlessColorPicker.prototype, "redLabel", void 0);
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessColorPicker.prototype, "required", void 0);

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

@@ -18,6 +18,12 @@ declare const HelixHeadlessCombobox_base: (new (...args: any[]) => import("@fusi
  *
  * 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.
  *
  * 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
@@ -35,8 +41,13 @@ declare const HelixHeadlessCombobox_base: (new (...args: any[]) => import("@fusi
  * @documentation https://fusion.dev/helix/components/combobox
  *
  * @slot - The options.
+ * @slot empty - What the list shows when typing hides every option, for content richer than `empty-text`.
  * @slot end - After the text, for a unit or a clear button.
+ * @slot feedback - The message that says what is wrong, for content richer than a string. It shows while there is a message.
+ * @slot hint - The hint, for content richer than plain text.
  * @slot indicator - Replaces the caret that shows the field opens a list.
+ * @slot label - The label, for content richer than plain text.
+ * @slot loading - What the list shows while the options load, for content richer than `loading-text`.
  * @slot start - Before the text, for an icon.
  *
  * @event {Event} change - Fired after the value changes.
@@ -46,10 +57,11 @@ declare const HelixHeadlessCombobox_base: (new (...args: any[]) => import("@fusi
  * @event {HelixCreateEvent} helix-create - Fired when the user adds a value that is not in the list. Cancelable.
  * @event {HelixFilterEvent} helix-filter - Fired as the user types, with the text the list is filtered by. Cancelable: cancel it to leave the list unfiltered and do the filtering yourself.
  * @event {Event} input - Fired after the value changes.
- * @event {Event} toggle - Fired when the panel opens or closes, with `newState` and `oldState`.
+ * @event {ToggleEvent} toggle - Fired when the panel opens or closes, with `newState` and `oldState`.
  *
  * @csspart control - The text field itself.
  * @csspart create - The row offering to add what was typed.
+ * @csspart create-active - The create row while the keyboard is on it. Set alongside `create`.
  * @csspart feedback - The message that explains what is wrong with the value.
  * @csspart field - The box around the text and its marks.
  * @csspart hint - Help text under the field, shown while there is no error.
@@ -63,16 +75,18 @@ declare const HelixHeadlessCombobox_base: (new (...args: any[]) => import("@fusi
  * @csspart listbox-hint - Help under the list.
  * @csspart listbox-items - The element that holds the options.
  * @csspart listbox-label - The label above the list.
- * @csspart listbox-live - The inner list's `live` part, the region screen readers announce its empty and loading messages from.
+ * @csspart listbox-live - The inner list's `live` part, the region screen readers announce its empty and loading messages, and how many options typing left, from.
  * @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 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.
+ * @csspart tag-cell - The tag's grid cell, which a tag draws only inside a tag group.
  * @csspart tag-dismiss - The remove button, when `dismissible`.
  * @csspart tag-dismiss-mark - The glyph on the dismiss control, where none is slotted.
  * @csspart tag-label - The label, trimmed to its capitals and baseline.
+ * @csspart tag-link - The tag's link around its label, which a tag draws only with `href`.
  * @csspart tag-start - The category before the label.
  * @csspart tags - The row of chosen options, when `multiple` is set.
  *
@@ -81,6 +95,17 @@ declare const HelixHeadlessCombobox_base: (new (...args: any[]) => import("@fusi
  */
 export declare class HelixHeadlessCombobox extends HelixHeadlessCombobox_base {
     protected readonly aria: AriaForwardController;
+    /**
+     * Whether text that names no option is taken as the value, as React Aria's
+     * `allowsCustomValue`.
+     *
+     * For a field where the list is a help and not the whole of the answer, a
+     * city or a job title. What was typed becomes the value when the reader
+     * leaves the field or presses Enter with nothing highlighted, and text that
+     * names an option takes that option. Unlike `creatable`, no event asks
+     * first and no option is expected to be added: the value is the text.
+     */
+    allowsCustomValue: boolean;
     /**
      * What the browser may autofill in the text field, as a platform token.
      *
@@ -96,7 +121,8 @@ export declare class HelixHeadlessCombobox extends HelixHeadlessCombobox_base {
      * The row appears while what is typed matches no option's words exactly, so
      * it is offered next to near misses too: a reader typing "Ruby on Rails" with
      * "Ruby" in the list wants the one they are typing, not the one they are
-     * halfway through.
+     * halfway through. The arrow keys reach it after the last option, and Enter
+     * on it adds what was typed.
      */
     creatable: boolean;
     /**
@@ -146,6 +172,17 @@ export declare class HelixHeadlessCombobox extends HelixHeadlessCombobox_base {
      * Text shown while nothing has been chosen.
      */
     placeholder: string;
+    /**
+     * Whether the choice is locked. A read-only combobox still submits its value.
+     *
+     * The field can be read and focused, the list does not open, and the tags of
+     * a `multiple` combobox cannot be dismissed.
+     */
+    readOnly: boolean;
+    /** Requests a new value. While `readOnly` is set, nothing changes. */
+    requestValue(next: string): boolean;
+    /** Requests the list open or closed. While `readOnly` is set, it does not open. */
+    requestOpen(next: boolean): boolean;
     /**
      * The name of the control that removes one chosen option, with `{name}`
      * filled in.
@@ -154,6 +191,17 @@ export declare class HelixHeadlessCombobox extends HelixHeadlessCombobox_base {
      * removes rather than as "Remove" said once per chosen option.
      */
     removeLabel: string;
+    /**
+     * What a screen reader hears when typing leaves one option. `{count}` is
+     * the count.
+     */
+    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.
+     */
+    resultsLabel: string;
     /**
      * Whether the field completes the word as the user types.
      *
@@ -180,6 +228,23 @@ export declare class HelixHeadlessCombobox extends HelixHeadlessCombobox_base {
      * what the reader is offered.
      */
     private suggestion;
+    /**
+     * Whether the reader has typed since the list opened, which decides what the
+     * field shows: their text while they type, and the chosen words otherwise.
+     */
+    private editing;
+    /** Whether the keyboard is on the create row rather than on an option. */
+    private onCreate;
+    /**
+     * Whether the reader emptied the field, so leaving it clears the choice.
+     *
+     * Escape takes it back, being a reader putting things as they were.
+     */
+    private emptied;
+    /** Where the highlight goes when an arrow opens the list. */
+    private opening;
+    /** Hears an option's words change, which no slot reports. See `Select`. */
+    private watcher;
     /**
      * Which option is chosen, as an index, or `-1` where none is.
      *
@@ -268,6 +333,30 @@ export declare class HelixHeadlessCombobox extends HelixHeadlessCombobox_base {
      */
     private drop;
     private close;
+    /**
+     * Clears a single choice whose words the reader deleted, as they leave.
+     *
+     * Measured before this: emptying the field and pressing Tab put the old
+     * choice back, so a combobox that was not required could not be emptied
+     * once answered.
+     */
+    private commitEmptied;
+    /**
+     * Takes what was typed as the answer, where `allows-custom-value` asks: the
+     * option its words name, or the text itself. Returns whether it took any.
+     */
+    private commitTyped;
+    /** The options the arrows can reach. */
+    private get reachable();
+    /**
+     * Moves between the options and the create row, which sits after the last
+     * option, and returns whether the key was taken.
+     *
+     * The row is outside the list, so the list's own keys never reach it. While
+     * it is showing, a Down past the last option lands on it and an Up from the
+     * first one does, and either arrow from it goes back into the list.
+     */
+    private moveAroundCreate;
     private readonly handleInput;
     /**
      * The words of the first option the typing begins, or nothing.
@@ -286,6 +375,18 @@ export declare class HelixHeadlessCombobox extends HelixHeadlessCombobox_base {
      * the panel rather than about the options in it.
      */
     private readonly handleKeydown;
+    /**
+     * Enter in a closed field submits the form, as it does in a native text
+     * field.
+     *
+     * The field is in a shadow root and has no form owner, so the platform never
+     * runs implicit submission for it. On `keypress`, which a prevented
+     * `keydown` suppresses, so an Enter that chose an option or created one
+     * submits nothing.
+     */
+    private readonly handleKeypress;
+    /** @internal A single line of text counts against implicit submission. */
+    protected get blocksImplicitSubmission(): boolean;
     /**
      * Tells the input which option is highlighted.
      *
@@ -350,8 +451,21 @@ export declare class HelixHeadlessCombobox extends HelixHeadlessCombobox_base {
      * component: a form that received "jav" got the filter, not an option.
      */
     private sync;
+    /** A link option, once followed, closes the panel as a choice does. */
+    private readonly handleLinkFollowed;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected willUpdate(changed: PropertyValues): void;
     protected firstUpdated(changed: PropertyValues): void;
     protected updated(changed: PropertyValues): void;
+    /**
+     * What the field shows: the typed text while the reader types, and the
+     * chosen words otherwise, open or closed.
+     *
+     * Measured before this: opening the list emptied the field, so a reader
+     * arrowing in to check the choice lost sight of it.
+     */
+    private get fieldText();
     /**
      * The list the field filters, behind a seam the styled tier can move.
      *
@@ -385,6 +499,15 @@ export declare class HelixHeadlessCombobox extends HelixHeadlessCombobox_base {
      * cannot change.
      */
     protected renderIndicator(): TemplateResult;
+    /**
+     * The row offering to add what was typed, after the list.
+     *
+     * Written out twice rather than bound through `part=${…}`: a part is read
+     * from the template as a literal, so a bound one is a `::part(create)` the
+     * checks cannot pair with its `@csspart`. The keyboard arriving swaps the
+     * element, and `linkActive` runs after the render that swaps it.
+     */
+    private renderCreate;
     protected render(): TemplateResult;
 }
 declare global {