@fusion.dev/helix-headless 0.145.0 → 0.147.0

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

@@ -4,19 +4,20 @@ 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, colorName, customElement, drawIcon, fillTemplate, formatColor, HelixFormElement, HelixSampleEndEvent, HelixSampleStartEvent, hostAria, hueName, isRtl, MixinControllerValue, parseColor, splitValues, toCss, } from '@fusion.dev/helix-core';
+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 { 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 '../../button/index.js';
 import '../../button-group/index.js';
 import '../../slider/index.js';
 const FORMATS = ['hex', 'rgb', 'hsl'];
 const START = { alpha: 100, brightness: 100, hue: 0, saturation: 100 };
-let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinControllerValue(HelixFormElement) {
+let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinPickerFeedback(MixinControllerValue(HelixFormElement)) {
     constructor() {
         super(...arguments);
         this.alpha = false;
@@ -31,7 +32,6 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinContr
         this.formatLabel = 'Syntax: {format}. Change it.';
         this.greenLabel = 'Green';
         this.hueLabel = 'Hue';
-        this.invalid = false;
         this.lightnessLabel = 'Lightness';
         this.noEyedropper = false;
         this.noFormat = false;
@@ -45,6 +45,7 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinContr
         this.swatches = '';
         this.toolsLabel = 'Color tools';
         this.valueLabel = 'Color';
+        this.wheel = false;
         this.sampling = false;
         this.owned = false;
         this.announcesInput = true;
@@ -79,11 +80,39 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinContr
         this.copier = new CopyController(this);
         this.handleSwatch = (preset) => {
             const parsed = parseColor(preset);
-            if (parsed) {
+            if (!parsed) {
+                return;
+            }
+            const format = this.format ?? 'hex';
+            const fields = channelFields(preset, parsed, format, this.alpha);
+            const first = fields[0];
+            const exact = first && writeChannel(fields, format, this.alpha, first.channel, first.value);
+            if (exact) {
+                this.takeWritten(exact);
+            }
+            else {
                 this.move(parsed);
-                this.settle();
             }
+            this.settle();
         };
+        this.swatchKeys = new KeyboardNavigationController(this, {
+            items: () => [
+                ...(this.renderRoot?.querySelectorAll('[part="swatches"] [part="swatch"]') ??
+                    []),
+            ].map((swatch, index) => ({
+                contains: (node) => swatch === node,
+                disabled: false,
+                focusItem: () => {
+                    this.swatchAt = index;
+                    swatch.focus();
+                },
+                select: () => { },
+                selected: false,
+            })),
+            origin: 'focus',
+            selects: () => false,
+            wrap: false,
+        });
         this.handleFormat = () => {
             if (this.readOnly) {
                 return;
@@ -141,20 +170,45 @@ 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.handleWheelPointer = (event) => {
+            const wheel = event.currentTarget;
+            const grid = this.partNamed('grid');
+            if (this.isDisabled || (grid && event.composedPath().includes(grid))) {
+                return;
+            }
+            if (event.type === 'pointerup' || event.type === 'pointercancel') {
+                if (wheel.hasPointerCapture(event.pointerId)) {
+                    this.settle();
+                }
+                return;
+            }
+            if (event.type === 'pointerdown') {
+                capturePointer(wheel, event.pointerId);
+                this.partNamed('wheel-hue')?.focus();
+            }
+            else if (!wheel.hasPointerCapture(event.pointerId)) {
+                return;
+            }
+            event.preventDefault();
+            const box = wheel.getBoundingClientRect();
+            if (box.width > 0 && box.height > 0) {
+                this.move({ hue: hueAt(event.clientX, event.clientY, box) });
+            }
+        };
         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 held = (at) => clamp(at, 0, 100);
             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) },
+                ArrowDown: { brightness: held(color.brightness - 1) },
+                ArrowLeft: { saturation: held(color.saturation - along) },
+                ArrowRight: { saturation: held(color.saturation + along) },
+                ArrowUp: { brightness: held(color.brightness + 1) },
+                PageDown: { brightness: held(color.brightness - 10) },
+                PageUp: { brightness: held(color.brightness + 10) },
             };
             const next = moves[event.key];
             if (!next) {
@@ -297,9 +351,10 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinContr
       part="channel"
       exportparts="control: channel-control, feedback: channel-feedback, field: channel-field,
         hint: channel-hint, label: channel-label, marker: channel-marker,
-        marker-label: channel-marker-label, markers: channel-markers, output: channel-output"
+        marker-label: channel-marker-label, markers: channel-markers, output: channel-output,
+        tooltip: channel-tooltip, tooltips: channel-tooltips"
       data-channel=${channel}
-      aria-invalid=${this.invalid ? 'true' : nothing}
+      aria-invalid=${this.marked ? 'true' : nothing}
       label=${label}
       max=${max}
       min="0"
@@ -337,7 +392,6 @@ 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) {
@@ -349,7 +403,7 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinContr
                 ${this.sampling && !this.noEyedropper
             ? html `<${this.tag('button')}
                         part="eyedropper"
-      exportparts="button: eyedropper-button, live: eyedropper-live, text: eyedropper-text"
+      exportparts="button: eyedropper-button, live: eyedropper-live, spinner: eyedropper-spinner, text: eyedropper-text"
                         label=${this.eyedropperLabel}
                         ?disabled=${this.isDisabled}
                         @click=${this.handleEyeDropper}
@@ -361,7 +415,7 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinContr
             ? nothing
             : html `<${this.tag('button')}
                         part="format"
-      exportparts="button: format-button, live: format-live, text: format-text"
+      exportparts="button: format-button, live: format-live, spinner: format-spinner, text: format-text"
                         label=${fillTemplate(this.formatLabel, { format: this.format ?? 'hex' })}
                         ?disabled=${this.isDisabled}
                         @click=${this.handleFormat}
@@ -370,16 +424,49 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinContr
                       </${this.tag('button')}>`}
               </${this.tag('button-group')}>`;
     }
+    renderSwatches(painted) {
+        const presets = this.presets;
+        const chosen = presets.map((preset) => {
+            const parsed = parseColor(preset);
+            return parsed !== null && toCss(parsed) === painted;
+        });
+        const indexes = presets.map((_, index) => index);
+        const stop = rovingStop(indexes, this.swatchAt, { selected: (index) => chosen[index] === true });
+        return html `<div
+      part="swatches"
+      role="listbox"
+      aria-label=${this.presetsLabel}
+      aria-orientation="horizontal"
+    >
+      ${presets.map((preset, index) => {
+            const parsed = parseColor(preset);
+            return html `<button
+          part="swatch"
+          type="button"
+          role="option"
+          tabindex=${index === stop ? '0' : '-1'}
+          aria-label=${parsed ? colorName(parsed, this.colorWords, localeOf(this)) : preset}
+          aria-selected=${chosen[index] ? 'true' : 'false'}
+          style="--color-picker-swatch: ${preset}"
+          ?disabled=${this.isDisabled}
+          @click=${() => {
+                this.swatchAt = index;
+                this.handleSwatch(preset);
+            }}
+        ></button>`;
+        })}
+    </div>`;
+    }
     render() {
         const color = this.color;
         const painted = toCss(color);
-        const named = colorName(color, this.colorWords, this.lang);
+        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, this.lang);
+        const hue = hueName({ alpha: 100, brightness: 100, hue: color.hue, saturation: 100 }, this.colorWords, localeOf(this));
         const owner = this.getAttribute('aria-label')?.trim();
         const axisName = (channel) => (owner ? `${owner}, ${channel}` : channel);
-        return html `<div
+        const area = html `<div
         part="grid"
         style="--color-picker-hue: ${color.hue}; --color-picker-saturation: ${color.saturation}%; --color-picker-brightness: ${color.brightness}%"
         @pointerdown=${this.handleGridPointer}
@@ -394,8 +481,9 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinContr
           min="0"
           max="100"
           aria-label=${axisName(this.saturationLabel)}
+          aria-describedby=${this.feedback === '' ? nothing : 'feedback'}
           aria-valuetext=${both}
-          aria-invalid=${this.invalid ? 'true' : nothing}
+          aria-invalid=${this.marked ? 'true' : nothing}
           .value=${String(color.saturation)}
           ?disabled=${this.isDisabled}
           @input=${(event) => this.takeArea('saturation', event)}
@@ -409,14 +497,43 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinContr
           max="100"
           tabindex="-1"
           aria-label=${axisName(this.brightnessLabel)}
+          aria-describedby=${this.feedback === '' ? nothing : 'feedback'}
           aria-valuetext=${reversed}
-          aria-invalid=${this.invalid ? 'true' : nothing}
+          aria-invalid=${this.marked ? 'true' : nothing}
           .value=${String(color.brightness)}
           ?disabled=${this.isDisabled}
           @input=${(event) => this.takeArea('brightness', event)}
           @change=${() => this.settle()}
         />
-      </div>
+      </div>`;
+        return html `${this.wheel
+            ? html `<div
+            part="wheel"
+            style="--color-picker-hue: ${color.hue}"
+            @pointerdown=${this.handleWheelPointer}
+            @pointermove=${this.handleWheelPointer}
+            @pointerup=${this.handleWheelPointer}
+            @pointercancel=${this.handleWheelPointer}
+          >
+            ${''}
+            <input
+              part="wheel-hue"
+              type="range"
+              min="0"
+              max="360"
+              dir="ltr"
+              aria-label=${axisName(this.hueLabel)}
+              aria-describedby=${this.feedback === '' ? nothing : 'feedback'}
+              aria-valuetext=${`${color.hue}, ${hue}`}
+              aria-invalid=${this.marked ? 'true' : nothing}
+              .value=${String(color.hue)}
+              ?disabled=${this.isDisabled}
+              @input=${(event) => this.takeArea('hue', event)}
+              @change=${() => this.settle()}
+            />
+            ${area}
+          </div>`
+            : area}
 
       <div part="controls" style="--color-picker-hue: ${color.hue}; --color-picker-swatch: ${painted}">
         <button
@@ -430,8 +547,10 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinContr
           @click=${() => this.copier.copy(this.value)}
         ></button>
         <div part="channels">
-          ${this.renderChannel('hue', this.hueLabel, 360, color.hue, `{value}, ${hue}`)}
-          ${this.alpha ? this.renderChannel('alpha', this.opacityLabel, 100, color.alpha) : nothing}
+          ${this.wheel ? nothing : this.renderChannel('hue', this.hueLabel, 360, color.hue, `{value}, ${hue}`)}
+          ${this.alpha
+            ? this.renderChannel('alpha', this.opacityLabel, 100, color.alpha, formatNumber(color.alpha / 100, localeOf(this), { style: 'percent' }))
+            : nothing}
         </div>
       </div>
       ${this.channelFields ? this.renderFields(color) : nothing}
@@ -447,7 +566,8 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinContr
                 part="value"
                 type="text"
                 aria-label=${this.valueLabel}
-                aria-invalid=${this.invalid ? 'true' : nothing}
+                aria-describedby=${this.feedback === '' ? nothing : 'feedback'}
+                aria-invalid=${this.marked ? 'true' : nothing}
                 autocomplete=${this.autocomplete || nothing}
                 spellcheck="false"
                 .value=${this.value}
@@ -462,22 +582,8 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinContr
         ${this.tools ? html `${this.renderTools()}` : nothing}
       </div>
 
-      ${this.presets.length === 0
-            ? nothing
-            : html `<div part="swatches" role="group" aria-label=${this.presetsLabel}>
-                ${this.presets.map((preset) => {
-                const parsed = parseColor(preset);
-                return html `<button
-                    part="swatch"
-                    type="button"
-                    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}
-                    @click=${() => this.handleSwatch(preset)}
-                  ></button>`;
-            })}
-              </div>`}`;
+      ${this.presets.length === 0 ? nothing : this.renderSwatches(painted)}
+      ${this.renderPickerFeedback()}`;
     }
 };
 __decorate([
@@ -499,7 +605,7 @@ __decorate([
     property({ attribute: 'channel-fields', type: Boolean })
 ], HelixHeadlessColorPicker.prototype, "channelFields", void 0);
 __decorate([
-    property({ attribute: 'color-words', type: Object })
+    property({ attribute: 'color-words', converter: wordsConverter })
 ], HelixHeadlessColorPicker.prototype, "colorWords", void 0);
 __decorate([
     property({ attribute: 'copied-label' })
@@ -522,9 +628,6 @@ __decorate([
 __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);
@@ -567,12 +670,18 @@ __decorate([
 __decorate([
     property({ attribute: 'value-missing-message' })
 ], HelixHeadlessColorPicker.prototype, "valueMissingMessage", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HelixHeadlessColorPicker.prototype, "wheel", void 0);
 __decorate([
     state()
 ], HelixHeadlessColorPicker.prototype, "moved", void 0);
 __decorate([
     state()
 ], HelixHeadlessColorPicker.prototype, "sampling", void 0);
+__decorate([
+    state()
+], HelixHeadlessColorPicker.prototype, "swatchAt", void 0);
 HelixHeadlessColorPicker = __decorate([
     customElement('helix-headless-color-picker')
 ], HelixHeadlessColorPicker);

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

@@ -0,0 +1,17 @@
+/** A box on the screen, as `getBoundingClientRect` gives one. */
+export interface WheelBox {
+    height: number;
+    left: number;
+    top: number;
+    width: number;
+}
+/**
+ * The hue at a point on a hue wheel: degrees clockwise from the top, 0 to
+ * 359, the way React Aria's ColorWheel and every paint program lay hue out.
+ *
+ * Measured from the box's center, so a press anywhere in the wheel answers,
+ * not only one on the ring: the ring is the target a reader aims at, and a
+ * press a little inside it still means the hue in that direction. Clockwise
+ * whatever the writing direction, since a circle has no line of text.
+ */
+export declare const hueAt: (x: number, y: number, box: WheelBox) => number;

package/dist/color-picker/wheel.js

@@ -0,0 +1,6 @@
+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;
+};

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

@@ -43,11 +43,13 @@ declare const HelixHeadlessCombobox_base: (new (...args: any[]) => import("@fusi
  * @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 error - What the list shows while `load-error` is set, for content richer than its text.
  * @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 no-results - What the list shows when typing hides every option, for content richer than `no-results-text`.
  * @slot start - Before the text, for an icon.
  *
  * @event {Event} change - Fired after the value changes.
@@ -56,6 +58,7 @@ declare const HelixHeadlessCombobox_base: (new (...args: any[]) => import("@fusi
  * @event {HelixBeforeOpenEvent} helix-before-open - Fired before the panel opens. Cancelable: cancel it to keep the panel closed.
  * @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 {HelixLoadMoreEvent} helix-load-more - Fired once the list is scrolled within a screen of its end, once for each number of options, and not while `loading` is set. Add the next page and set `loading` while you fetch it.
  * @event {Event} input - Fired after the value changes.
  * @event {ToggleEvent} toggle - Fired when the panel opens or closes, with `newState` and `oldState`.
  *
@@ -69,6 +72,7 @@ declare const HelixHeadlessCombobox_base: (new (...args: any[]) => import("@fusi
  * @csspart label - The label above the field.
  * @csspart listbox - The list inside the panel.
  * @csspart listbox-empty - Shown when a filter has hidden everything.
+ * @csspart listbox-error - Shown while `load-error` is set.
  * @csspart listbox-feedback - The inner list's error message.
  * @csspart listbox-filter-icon - The icon beside the list's filter field.
  * @csspart listbox-filter-mark - The glyph beside the filter field, where none is slotted.
@@ -90,7 +94,9 @@ 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 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 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 {
@@ -133,10 +139,26 @@ export declare class HelixHeadlessCombobox extends HelixHeadlessCombobox_base {
      * Text shown when the filter hides every option.
      */
     emptyText: string;
+    /**
+     * How long typing rests before the list is narrowed and `helix-filter` is
+     * sent, in milliseconds.
+     *
+     * For options filtered on a server, where `helix-filter` starts a request: a
+     * delay sends one request for a word instead of one per letter. The arrow
+     * keys, Enter and Escape narrow at once on what was typed. `0` narrows on
+     * every keystroke. See Listbox's `filter-delay`.
+     */
+    filterDelay: number;
     /**
      * The list's name, read by screen readers. The list has no visible name.
      */
     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.
+     */
+    loadError: string;
     /**
      * Whether the options are still loading.
      *
@@ -168,6 +190,18 @@ export declare class HelixHeadlessCombobox extends HelixHeadlessCombobox_base {
      * element is responsible for.
      */
     multiple: boolean;
+    /**
+     * The text shown when typing hides every one of the options, where there are
+     * some. Absent, `empty-text` shows. See Listbox's `no-results-text`.
+     */
+    noResultsText?: string;
+    /**
+     * What opens the list: `input`, typing or pressing Down; `focus`, also
+     * arriving in the field, by Tab or a press; or `manual`, only Down, Alt+Down
+     * or a press on the caret, so typing narrows a list the reader has asked
+     * for. React Aria's `menuTrigger`.
+     */
+    openOn: 'focus' | 'input' | 'manual';
     /**
      * Text shown while nothing has been chosen.
      */
@@ -302,6 +336,17 @@ export declare class HelixHeadlessCombobox extends HelixHeadlessCombobox_base {
      * is a thing a consumer may do.
      */
     private get showing();
+    /**
+     * The list's `error` and `no-results` states on the host too, so a page
+     * styles the whole control from them, as WA's combobox and its status slots
+     * allow. The list keeps its own, which only a stylesheet inside this shadow
+     * root could reach.
+     *
+     * Read once the list has drawn the filter, since `hidden` is what the
+     * filter writes onto an option: a filter that hid every option of a list
+     * that has some, with nothing loading.
+     */
+    private markStatus;
     /**
      * What the create row would add, or nothing where there is nothing to add.
      *
@@ -358,6 +403,17 @@ export declare class HelixHeadlessCombobox extends HelixHeadlessCombobox_base {
      */
     private moveAroundCreate;
     private readonly handleInput;
+    /**
+     * Arriving in the field opens the list where `open-on` is `focus`, unless
+     * this element is handing focus back to it as the list closes.
+     */
+    private readonly handleFocus;
+    /** Whether `close` is putting focus back in the field, which opens nothing. */
+    private refocusing;
+    /** The narrowing waiting out `filterDelay`, if any. */
+    private readonly narrowing;
+    /** Narrows the list to what was typed, and finds the completion in what is left. */
+    private narrow;
     /**
      * The words of the first option the typing begins, or nothing.
      *