@fusion.dev/helix-headless 0.144.0 → 0.146.0

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

@@ -4,13 +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, colorName, customElement, drawIcon, fillTemplate, formatColor, HelixFormElement, HelixSampleEndEvent, HelixSampleStartEvent, hostAria, hueName, isRtl, MixinControllerValue, parseColor, splitValues, toCss, } from '@fusion.dev/helix-core';
+import { CopyController, capturePointer, colorName, customElement, drawIcon, fillTemplate, formatColor, HelixFormElement, HelixSampleEndEvent, HelixSampleStartEvent, hostAria, hueName, inlineStep, isRtl, MixinControllerValue, 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 { swatchMove } from '../swatches.js';
 import '../../button/index.js';
 import '../../button-group/index.js';
 import '../../slider/index.js';
@@ -28,6 +29,7 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinContr
         this.copiedLabel = 'Copied';
         this.copyLabel = 'Copy {value}';
         this.eyedropperLabel = 'Sample a color from the screen';
+        this.feedback = '';
         this.formatLabel = 'Syntax: {format}. Change it.';
         this.greenLabel = 'Green';
         this.hueLabel = 'Hue';
@@ -79,10 +81,33 @@ 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.handleSwatchKeydown = (event) => {
+            const row = [
+                ...(this.renderRoot.querySelectorAll('[part="swatches"] [part="swatch"]') ?? []),
+            ];
+            const at = row.indexOf(event.target);
+            const next = swatchMove(event.key, inlineStep(this, event.key), at, row.length);
+            if (at < 0 || next === null) {
+                return;
+            }
+            event.preventDefault();
+            this.swatchAt = next;
+            row[next]?.focus();
         };
         this.handleFormat = () => {
             if (this.readOnly) {
@@ -214,6 +239,9 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinContr
         this.internals.setFormValue(this.value === '' ? null : this.value);
         this.reportRequired();
     }
+    get validityFeedback() {
+        return this.feedback;
+    }
     reportRequired() {
         if (this.required && this.value === '') {
             this.internals.setValidity({ valueMissing: true }, this.valueMissingMessage || 'Choose a color.', this.partNamed('grid') ?? undefined);
@@ -370,6 +398,40 @@ 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"
+      @keydown=${this.handleSwatchKeydown}
+    >
+      ${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, this.lang) : 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);
@@ -394,6 +456,7 @@ 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}
           .value=${String(color.saturation)}
@@ -409,6 +472,7 @@ 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}
           .value=${String(color.brightness)}
@@ -431,7 +495,9 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinContr
         ></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.alpha
+            ? this.renderChannel('alpha', this.opacityLabel, 100, color.alpha, new Intl.NumberFormat(this.lang || undefined, { style: 'percent' }).format(color.alpha / 100))
+            : nothing}
         </div>
       </div>
       ${this.channelFields ? this.renderFields(color) : nothing}
@@ -447,6 +513,7 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinContr
                 part="value"
                 type="text"
                 aria-label=${this.valueLabel}
+                aria-describedby=${this.feedback === '' ? nothing : 'feedback'}
                 aria-invalid=${this.invalid ? 'true' : nothing}
                 autocomplete=${this.autocomplete || nothing}
                 spellcheck="false"
@@ -462,22 +529,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.feedback === '' ? nothing : html `<p part="feedback" id="feedback">${this.feedback}</p>`}`;
     }
 };
 __decorate([
@@ -499,7 +552,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' })
@@ -510,6 +563,9 @@ __decorate([
 __decorate([
     property({ attribute: 'eyedropper-label' })
 ], HelixHeadlessColorPicker.prototype, "eyedropperLabel", void 0);
+__decorate([
+    property()
+], HelixHeadlessColorPicker.prototype, "feedback", void 0);
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessColorPicker.prototype, "format", void 0);
@@ -573,6 +629,9 @@ __decorate([
 __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/swatches.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Where a key moves focus in a row of presets, or `null` for a key that moves
+ * nothing.
+ *
+ * The presets are a listbox, React Aria's ColorSwatchPicker: one tab stop, and
+ * the arrows move between the colors without choosing one. `along` is the
+ * horizontal arrow's direction along the line of text, from `inlineStep`, so
+ * the row reverses with it; Up and Down go to the previous and the next as a
+ * list does, since the row wraps. Home and End go to the ends. Focus stops at
+ * the ends; a row of colors does not wrap around.
+ */
+export declare const swatchMove: (key: string, along: -1 | 0 | 1, at: number, count: number) => number | null;

package/dist/color-picker/swatches.js

@@ -0,0 +1,26 @@
+export const swatchMove = (key, along, at, count) => {
+    if (count === 0) {
+        return null;
+    }
+    const last = count - 1;
+    let next;
+    if (along !== 0) {
+        next = at + along;
+    }
+    else if (key === 'ArrowUp') {
+        next = at - 1;
+    }
+    else if (key === 'ArrowDown') {
+        next = at + 1;
+    }
+    else if (key === 'Home') {
+        next = 0;
+    }
+    else if (key === 'End') {
+        next = last;
+    }
+    else {
+        return null;
+    }
+    return Math.min(last, Math.max(0, next));
+};

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.
@@ -133,10 +137,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 +188,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.
      */
@@ -358,6 +390,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.
      *

package/dist/combobox/root/combobox-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, afterLinkFollowed, customElement, fillTemplate, HelixCreateEvent, HelixFilterEvent, HelixFormElement, MixinControllerOpen, MixinControllerValue, MixinField, MixinTokens, PopoverController, reportValues, } from '@fusion.dev/helix-core';
+import { AriaForwardController, afterLinkFollowed, customElement, DelayController, fillTemplate, HelixCreateEvent, HelixFilterEvent, HelixFormElement, MixinControllerOpen, MixinControllerValue, MixinField, MixinTokens, PopoverController, reportValues, submitImplicitly, } from '@fusion.dev/helix-core';
 import { caretDown } from '@fusion.dev/helix-icons';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -26,10 +26,13 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
         this.creatable = false;
         this.createLabel = 'Add';
         this.emptyText = 'No matches';
+        this.filterDelay = 0;
         this.listLabel = 'Options';
+        this.loadError = '';
         this.loading = false;
         this.loadingText = 'Loading';
         this.multiple = false;
+        this.openOn = 'input';
         this.placeholder = '';
         this.readOnly = false;
         this.removeLabel = 'Remove {name}';
@@ -65,20 +68,37 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
             this.editing = true;
             this.onCreate = false;
             this.emptied = typed.trim() === '';
-            const narrowing = new HelixFilterEvent({ value: typed });
-            if (this.dispatchEvent(narrowing)) {
-                this.listbox?.requestFilter(typed);
-                void this.listbox?.updateComplete.then(() => this.linkActive());
+            const inserted = isInsertion(event);
+            this.narrowing.cancel();
+            if (this.filterDelay > 0) {
+                this.suggestion = '';
+                this.narrowing.start(this.filterDelay, () => this.narrow(typed, inserted));
             }
-            this.suggestion = this.suggest && isInsertion(event) ? this.completionFor(typed) : '';
-            if (!this.open) {
+            else {
+                this.narrow(typed, inserted);
+            }
+            if (!this.open && this.openOn !== 'manual') {
                 this.requestOpen(true);
             }
         };
+        this.handleFocus = () => {
+            if (this.openOn !== 'focus' || this.open || this.refocusing) {
+                return;
+            }
+            if (this.isDisabled || this.readOnly) {
+                return;
+            }
+            this.requestOpen(true);
+        };
+        this.refocusing = false;
+        this.narrowing = new DelayController(this, { renders: false });
         this.handleKeydown = (event) => {
             if (this.isDisabled) {
                 return;
             }
+            if (['ArrowDown', 'ArrowUp', 'Enter', 'Escape', 'PageDown', 'PageUp'].includes(event.key)) {
+                this.narrowing.flush();
+            }
             if (event.key === 'Escape') {
                 this.emptied = false;
                 if (this.open) {
@@ -98,6 +118,13 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
                 if (this.open) {
                     this.requestOpen(false);
                 }
+                else if (this.openOn === 'manual' && this.editing) {
+                    this.typed = '';
+                    this.suggestion = '';
+                    this.editing = false;
+                    this.listbox?.requestFilter('');
+                    this.requestUpdate();
+                }
                 return;
             }
             if (this.multiple && this.tokenKeydown(event, this.typed)) {
@@ -136,7 +163,7 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
         };
         this.handleKeypress = (event) => {
             if (event.key === 'Enter' && !this.open && !event.defaultPrevented) {
-                this.submitImplicitly();
+                submitImplicitly(this.form);
             }
         };
         this.handleChange = (event) => {
@@ -160,8 +187,11 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
             if (event.composedPath().some((node) => node instanceof HelixHeadlessTag)) {
                 return;
             }
+            const onText = event.composedPath().includes(this.partNamed('control'));
+            this.refocusing = true;
             this.partNamed('control')?.focus();
-            if (!this.open) {
+            this.refocusing = false;
+            if (!this.open && !(this.openOn === 'manual' && onText)) {
                 this.requestOpen(true);
             }
         };
@@ -261,7 +291,9 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
             return;
         }
         this.requestOpen(false);
+        this.refocusing = true;
         this.partNamed('control')?.focus();
+        this.refocusing = false;
     }
     commitEmptied() {
         if (this.emptied && !this.multiple && this.value !== '') {
@@ -316,6 +348,15 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
         }
         return false;
     }
+    narrow(typed, inserted) {
+        this.narrowing.cancel();
+        const narrowing = new HelixFilterEvent({ value: typed });
+        if (this.dispatchEvent(narrowing)) {
+            this.listbox?.requestFilter(typed);
+            void this.listbox?.updateComplete.then(() => this.linkActive());
+        }
+        this.suggestion = this.suggest && inserted ? this.completionFor(typed) : '';
+    }
     completionFor(typed) {
         if (typed === '') {
             return '';
@@ -401,7 +442,7 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
         if (control && this.suggestion !== '') {
             control.setSelectionRange(this.typed.length, this.suggestion.length);
         }
-        if (!this.open) {
+        if (!this.open && (this.openOn !== 'manual' || changed.has('open'))) {
             this.typed = '';
             this.suggestion = '';
             this.editing = false;
@@ -420,7 +461,7 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
         }
     }
     get fieldText() {
-        if (this.multiple || (this.open && this.editing)) {
+        if (this.multiple || ((this.open || this.openOn === 'manual') && this.editing)) {
             return this.suggestion || this.typed;
         }
         return this.word;
@@ -429,13 +470,15 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
         return html `<${this.tag('listbox')}
       part="listbox"
       id="listbox"
-      exportparts="empty: listbox-empty, feedback: listbox-feedback, filter-icon: listbox-filter-icon,
-        filter-mark: listbox-filter-mark, hint: listbox-hint, items: listbox-items,
-        label: listbox-label, live: listbox-live, loading: listbox-loading, search: listbox-search,
-        search-field: listbox-search-field"
+      exportparts="empty: listbox-empty, error: listbox-error, feedback: listbox-feedback,
+        filter-icon: listbox-filter-icon, filter-mark: listbox-filter-mark, hint: listbox-hint,
+        items: listbox-items, label: listbox-label, live: listbox-live, loading: listbox-loading,
+        search: listbox-search, search-field: listbox-search-field"
       aria-label=${this.listLabel}
       empty-text=${this.emptyText}
+      load-error=${this.loadError}
       loading-text=${this.loadingText}
+      no-results-text=${this.noResultsText ?? nothing}
       result-label=${this.resultLabel}
       results-label=${this.resultsLabel}
       ?loading=${this.loading}
@@ -457,6 +500,14 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
            fills it, so the list's fallback would never show. -->
       <slot name="empty" slot="empty">${this.emptyText}</slot>
       <slot name="loading" slot="loading">${this.loadingText}</slot>
+      <slot name="error" slot="error">${this.loadError}</slot>
+      <!-- Handed on only while something fills it: an assigned slot hides the
+           list's own fallback, which is no-results-text or empty-text. -->
+      <slot
+        name="no-results"
+        slot=${this.querySelector?.(':scope > [slot="no-results"]') ? 'no-results' : nothing}
+        @slotchange=${() => this.requestUpdate()}
+      ></slot>
     </${this.tag('listbox')}>`;
     }
     renderTag(option) {
@@ -512,6 +563,7 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
           ?disabled=${this.isDisabled}
           ?readonly=${this.readOnly}
           .value=${this.fieldText}
+          @focus=${this.handleFocus}
           @input=${this.handleInput}
           @keydown=${this.handleKeydown}
           @keypress=${this.handleKeypress}
@@ -541,9 +593,15 @@ __decorate([
 __decorate([
     property({ attribute: 'empty-text' })
 ], HelixHeadlessCombobox.prototype, "emptyText", void 0);
+__decorate([
+    property({ attribute: 'filter-delay', type: Number })
+], HelixHeadlessCombobox.prototype, "filterDelay", void 0);
 __decorate([
     property({ attribute: 'list-label' })
 ], HelixHeadlessCombobox.prototype, "listLabel", void 0);
+__decorate([
+    property({ attribute: 'load-error' })
+], HelixHeadlessCombobox.prototype, "loadError", void 0);
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessCombobox.prototype, "loading", void 0);
@@ -553,6 +611,12 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], HelixHeadlessCombobox.prototype, "multiple", void 0);
+__decorate([
+    property({ attribute: 'no-results-text' })
+], HelixHeadlessCombobox.prototype, "noResultsText", void 0);
+__decorate([
+    property({ attribute: 'open-on' })
+], HelixHeadlessCombobox.prototype, "openOn", void 0);
 __decorate([
     property()
 ], HelixHeadlessCombobox.prototype, "placeholder", void 0);

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

@@ -1,5 +1,5 @@
 import { HelixElement } from '@fusion.dev/helix-core';
-import type { PropertyValues, TemplateResult } from 'lit';
+import { type PropertyValues, type TemplateResult } from 'lit';
 import '../../dialog/index.js';
 import '../../listbox/index.js';
 declare const HelixHeadlessCommand_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerOpenInterface) & typeof HelixElement;
@@ -34,12 +34,15 @@ declare const HelixHeadlessCommand_base: (new (...args: any[]) => import("@fusio
  *
  * @slot - The commands, and any groups of them.
  * @slot empty - What the palette shows when typing matches no commands, for content richer than `empty-text`.
+ * @slot error - What the palette shows while `load-error` is set, for content richer than its text.
  * @slot footer - Content under the list, such as the keys that work in the palette.
  * @slot loading - What the palette shows while the commands load, for content richer than `loading-text`.
+ * @slot no-results - What the palette shows when typing matches no commands, for content richer than `no-results-text`.
  *
  * @event {HelixBeforeCloseEvent} helix-before-close - The palette is about to close. Cancelable: cancel it to keep it open.
  * @event {HelixBeforeOpenEvent} helix-before-open - The palette is about to open. Cancelable: cancel it to keep it closed.
  * @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 filter the commands yourself, for example on a server while `loading` is set.
+ * @event {HelixLoadMoreEvent} helix-load-more - Fired once the list is scrolled within a screen of its end, once for each number of commands, and not while `loading` is set. Add the next page and set `loading` while you fetch it.
  * @event {HelixSelectEvent} helix-select - A command was chosen, with its `href` where the option is a link. Cancelable: cancel it to keep the palette open, and to keep the browser from following the link.
  * @event {ToggleEvent} toggle - The palette opened or closed. The event carries `newState` and `oldState`.
  *
@@ -52,6 +55,7 @@ declare const HelixHeadlessCommand_base: (new (...args: any[]) => import("@fusio
  * @csspart footer - The row under the list.
  * @csspart listbox - The listbox inside the palette.
  * @csspart listbox-empty - The text shown when the filter matches no commands.
+ * @csspart listbox-error - The text shown while `load-error` is set.
  * @csspart listbox-feedback - The listbox's error message.
  * @csspart listbox-filter-icon - The icon beside the filter field.
  * @csspart listbox-filter-mark - The default icon beside the filter field, drawn when no icon is slotted.
@@ -88,6 +92,12 @@ export declare class HelixHeadlessCommand extends HelixHeadlessCommand_base {
      * Accessible name for the overlay, which has no visible heading.
      */
     label: string;
+    /**
+     * What the list says when its commands 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 commands there are and tells screen readers.
+     */
+    loadError: string;
     /**
      * Whether the commands are still loading, for a palette that asks a server
      * for them as the user types.
@@ -99,6 +109,11 @@ export declare class HelixHeadlessCommand extends HelixHeadlessCommand_base {
      * The text shown while the commands load.
      */
     loadingText: string;
+    /**
+     * The text shown when typing hides every one of the commands, where there are
+     * some. Absent, `empty-text` shows. See Listbox's `no-results-text`.
+     */
+    noResultsText?: string;
     /**
      * The text shown in the filter field before anything is typed.
      */