@fusion.dev/helix-headless 0.142.1 → 0.144.0

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, customElement, fillTemplate, HelixCreateEvent, HelixFilterEvent, HelixFormElement, MixinControllerOpen, MixinControllerValue, MixinField, MixinTokens, PopoverController, reportValues, } from '@fusion.dev/helix-core';
+import { AriaForwardController, afterLinkFollowed, customElement, fillTemplate, HelixCreateEvent, HelixFilterEvent, HelixFormElement, MixinControllerOpen, MixinControllerValue, MixinField, MixinTokens, PopoverController, reportValues, } from '@fusion.dev/helix-core';
 import { caretDown } from '@fusion.dev/helix-icons';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -21,6 +21,7 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
         this.aria = new AriaForwardController(this, {
             target: () => this.partNamed('control'),
         });
+        this.allowsCustomValue = false;
         this.autocomplete = 'off';
         this.creatable = false;
         this.createLabel = 'Add';
@@ -30,10 +31,18 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
         this.loadingText = 'Loading';
         this.multiple = false;
         this.placeholder = '';
+        this.readOnly = false;
         this.removeLabel = 'Remove {name}';
+        this.resultLabel = '{count} result';
+        this.resultsLabel = '{count} results';
         this.suggest = false;
         this.typed = '';
         this.suggestion = '';
+        this.editing = false;
+        this.onCreate = false;
+        this.emptied = false;
+        this.opening = undefined;
+        this.watcher = undefined;
         this.panel = new PopoverController(this, {
             anchor: () => this.partNamed('field'),
             boundary: () => [
@@ -41,7 +50,10 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
                 this.partNamed('field'),
             ],
             offset: () => 4,
-            onDismiss: () => this.close(),
+            onDismiss: () => {
+                this.commitEmptied();
+                this.close();
+            },
             open: () => this.open,
             placement: 'bottom-start',
             surface: () => this.partNamed('surface'),
@@ -50,6 +62,9 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
             event.stopPropagation();
             const typed = event.target.value;
             this.typed = typed;
+            this.editing = true;
+            this.onCreate = false;
+            this.emptied = typed.trim() === '';
             const narrowing = new HelixFilterEvent({ value: typed });
             if (this.dispatchEvent(narrowing)) {
                 this.listbox?.requestFilter(typed);
@@ -65,13 +80,21 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
                 return;
             }
             if (event.key === 'Escape') {
+                this.emptied = false;
                 if (this.open) {
                     event.preventDefault();
                     this.close();
+                    return;
+                }
+                if (!this.multiple && this.value !== '' && !this.readOnly) {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    this.requestValue('');
                 }
                 return;
             }
             if (event.key === 'Tab') {
+                this.commitEmptied();
                 if (this.open) {
                     this.requestOpen(false);
                 }
@@ -80,23 +103,49 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
             if (this.multiple && this.tokenKeydown(event, this.typed)) {
                 return;
             }
-            if (event.key === 'Enter' && this.creation !== '' && !this.showing) {
+            if (event.key === 'Enter' && this.creation !== '' && (this.onCreate || !this.showing)) {
                 event.preventDefault();
                 this.create();
                 return;
             }
-            if (!this.open && (event.key === 'ArrowDown' || event.key === 'ArrowUp')) {
-                this.requestOpen(true);
+            if (event.key === 'Enter' &&
+                this.allowsCustomValue &&
+                !this.reachable.some((option) => option.active) &&
+                this.commitTyped()) {
+                event.preventDefault();
+                if (!this.multiple) {
+                    this.close();
+                }
+                return;
+            }
+            if (!this.open) {
+                if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+                    event.preventDefault();
+                    const fallback = event.key === 'ArrowDown' ? 'first' : 'last';
+                    this.opening = this.values.length > 0 ? 'selected' : fallback;
+                    this.requestOpen(true);
+                }
+                return;
+            }
+            if (this.moveAroundCreate(event)) {
+                void this.updateComplete.then(() => this.linkActive());
+                return;
             }
             this.listbox?.navigate(event);
             void this.listbox?.updateComplete.then(() => this.linkActive());
         };
+        this.handleKeypress = (event) => {
+            if (event.key === 'Enter' && !this.open && !event.defaultPrevented) {
+                this.submitImplicitly();
+            }
+        };
         this.handleChange = (event) => {
             event.stopPropagation();
             const { value } = event.detail;
             if (!this.requestValue(value)) {
                 return;
             }
+            this.emptied = false;
             this.typed = '';
             this.suggestion = '';
             this.listbox?.requestFilter('');
@@ -121,15 +170,27 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
             const tag = event.currentTarget;
             this.drop(tag.dataset.value ?? '');
         };
+        this.handleLinkFollowed = (event) => {
+            afterLinkFollowed(event, () => this.requestOpen(false));
+        };
+    }
+    requestValue(next) {
+        if (this.readOnly) {
+            return false;
+        }
+        return super.requestValue(next);
+    }
+    requestOpen(next) {
+        if (next && this.readOnly) {
+            return false;
+        }
+        return super.requestOpen(next);
     }
     get selectedIndex() {
         return this.listbox?.selectedIndex ?? -1;
     }
     set selectedIndex(at) {
-        const listbox = this.listbox;
-        if (listbox) {
-            listbox.selectedIndex = at;
-        }
+        this.value = this.listbox?.options[at]?.value ?? '';
     }
     get type() {
         return this.multiple ? 'select-multiple' : 'select-one';
@@ -202,6 +263,59 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
         this.requestOpen(false);
         this.partNamed('control')?.focus();
     }
+    commitEmptied() {
+        if (this.emptied && !this.multiple && this.value !== '') {
+            this.requestValue('');
+        }
+        this.emptied = false;
+        this.commitTyped();
+    }
+    commitTyped() {
+        const typed = this.typed.trim();
+        if (!this.allowsCustomValue || !this.editing || typed === '') {
+            return false;
+        }
+        const named = (this.listbox?.options ?? []).find((option) => option.text.trim().toLowerCase() === typed.toLowerCase());
+        const answer = named?.value ?? typed;
+        if (this.multiple) {
+            if (!this.values.includes(answer)) {
+                this.requestValue([...this.values, answer].join(','));
+            }
+        }
+        else if (answer !== this.value) {
+            this.requestValue(answer);
+        }
+        this.typed = '';
+        this.suggestion = '';
+        this.editing = false;
+        this.listbox?.requestFilter('');
+        return true;
+    }
+    get reachable() {
+        return (this.listbox?.options ?? []).filter((option) => !option.hidden && !option.disabled);
+    }
+    moveAroundCreate(event) {
+        if (this.creation === '' || (event.key !== 'ArrowDown' && event.key !== 'ArrowUp')) {
+            return false;
+        }
+        const down = event.key === 'ArrowDown';
+        if (this.onCreate) {
+            event.preventDefault();
+            this.onCreate = false;
+            this.listbox?.highlight(down ? 'first' : 'last');
+            return true;
+        }
+        const reachable = this.reachable;
+        const at = reachable.findIndex((option) => option.active);
+        const edge = down ? reachable.length - 1 : 0;
+        if (reachable.length === 0 || at === edge) {
+            event.preventDefault();
+            this.onCreate = true;
+            this.listbox?.highlight('none');
+            return true;
+        }
+        return false;
+    }
     completionFor(typed) {
         if (typed === '') {
             return '';
@@ -210,14 +324,19 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
         const match = (this.listbox?.options ?? []).find((option) => !option.hidden && !option.disabled && option.text.toLowerCase().startsWith(needle));
         return match && match.text.length > typed.length ? match.text : '';
     }
+    get blocksImplicitSubmission() {
+        return true;
+    }
     linkActive() {
         const control = this.partNamed('control');
         if (!control || !('ariaActiveDescendantElement' in control)) {
             return;
         }
-        const active = this.open
-            ? (this.listbox?.options ?? []).find((option) => option.active && !option.hidden)
-            : undefined;
+        const active = !this.open
+            ? undefined
+            : this.onCreate
+                ? this.partNamed('create')
+                : (this.listbox?.options ?? []).find((option) => option.active && !option.hidden);
         control.ariaActiveDescendantElement = active ?? null;
     }
     removeLastToken() {
@@ -235,6 +354,37 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
         }
         this.reportRequired(this.value === '', 'Choose one to continue.', 'control');
     }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('helix-select', this.handleLinkFollowed);
+        this.watcher = new MutationObserver(() => this.requestUpdate());
+        this.watcher.observe(this, {
+            attributeFilter: ['label', 'value'],
+            characterData: true,
+            childList: true,
+            subtree: true,
+        });
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('helix-select', this.handleLinkFollowed);
+        this.watcher?.disconnect();
+        this.watcher = undefined;
+    }
+    willUpdate(changed) {
+        super.willUpdate(changed);
+        if (this.childrenKnown && this.defaultValue === '' && !this.hasAttribute('default-value')) {
+            const declared = optionsAmong(this.knownChildren)
+                .filter((option) => option.defaultSelected)
+                .map((option) => option.value);
+            if (declared.length > 0) {
+                this.defaultValue = this.multiple ? declared.join(',') : (declared.at(-1) ?? '');
+            }
+        }
+        if (this.creation === '') {
+            this.onCreate = false;
+        }
+    }
     firstUpdated(changed) {
         super.firstUpdated(changed);
         this.finishHydration();
@@ -244,7 +394,7 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
         this.sync();
         this.linkActive();
         const control = this.partNamed('control');
-        const wanted = this.multiple || this.open ? this.suggestion || this.typed : this.word;
+        const wanted = this.fieldText;
         if (control && control.value !== wanted) {
             control.value = wanted;
         }
@@ -254,8 +404,26 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
         if (!this.open) {
             this.typed = '';
             this.suggestion = '';
+            this.editing = false;
+            this.onCreate = false;
             this.listbox?.requestFilter('');
         }
+        else if (changed.has('open')) {
+            if (this.opening !== undefined) {
+                this.listbox?.highlight(this.opening);
+                this.opening = undefined;
+                void this.listbox?.updateComplete.then(() => this.linkActive());
+            }
+            if (control && !this.editing && !this.multiple && control.value !== '') {
+                control.select();
+            }
+        }
+    }
+    get fieldText() {
+        if (this.multiple || (this.open && this.editing)) {
+            return this.suggestion || this.typed;
+        }
+        return this.word;
     }
     renderListbox() {
         return html `<${this.tag('listbox')}
@@ -268,6 +436,8 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
       aria-label=${this.listLabel}
       empty-text=${this.emptyText}
       loading-text=${this.loadingText}
+      result-label=${this.resultLabel}
+      results-label=${this.resultsLabel}
       ?loading=${this.loading}
       ?multiple=${this.multiple}
       .value=${this.value}
@@ -282,15 +452,20 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
            property, so nothing else would schedule the update that fixes
            it. -->
       <slot @slotchange=${() => this.requestUpdate()}></slot>
+      <!-- Handed on to the list's own, with the text as this slot's fallback:
+           a slot passed into another is assigned there whether or not anything
+           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>
     </${this.tag('listbox')}>`;
     }
     renderTag(option) {
         return html `<${this.tag('tag')}
                     part="tag"
-      exportparts="dismiss: tag-dismiss, dismiss-mark: tag-dismiss-mark, label: tag-label, start: tag-start"
+      exportparts="cell: tag-cell, dismiss: tag-dismiss, dismiss-mark: tag-dismiss-mark, label: tag-label, link: tag-link, start: tag-start"
                     data-value=${option.value}
                     dismiss-label=${fillTemplate(this.removeLabel, { name: option.text })}
-                    ?dismissible=${!this.isDisabled}
+                    ?dismissible=${!this.isDisabled && !this.readOnly}
                     @helix-dismiss=${this.handleDismiss}
                     >${option.text}</${this.tag('tag')}
                   >`;
@@ -302,6 +477,18 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
       </svg>
     </slot>`;
     }
+    renderCreate() {
+        if (this.creation === '') {
+            return nothing;
+        }
+        return this.onCreate
+            ? html `<button part="create create-active" id="create" type="button" @click=${() => this.create()}>
+          ${this.createLabel} "${this.creation}"
+        </button>`
+            : html `<button part="create" id="create" type="button" @click=${() => this.create()}>
+          ${this.createLabel} "${this.creation}"
+        </button>`;
+    }
     render() {
         return html `${this.renderLabel()}
       <div part="field" @click=${this.handleFieldClick}>
@@ -323,24 +510,25 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
           aria-invalid=${this.invalidity ?? nothing}
           placeholder=${(this.chosen.length > 0 || this.unresolved ? '' : this.placeholder) || nothing}
           ?disabled=${this.isDisabled}
-          .value=${this.multiple || this.open ? this.suggestion || this.typed : this.word}
+          ?readonly=${this.readOnly}
+          .value=${this.fieldText}
           @input=${this.handleInput}
           @keydown=${this.handleKeydown}
+          @keypress=${this.handleKeypress}
         />
         <slot name="end"></slot>
         ${this.renderIndicator()}
       </div>
       <div part="surface" popover="manual" ?hidden=${!this.open}>
         ${this.renderListbox()}
-        ${this.creation === ''
-            ? nothing
-            : html `<button part="create" type="button" @click=${() => this.create()}>
-                ${this.createLabel} "${this.creation}"
-              </button>`}
+        ${this.renderCreate()}
       </div>
       ${this.renderHint()}${this.renderFeedback()}`;
     }
 };
+__decorate([
+    property({ attribute: 'allows-custom-value', type: Boolean })
+], HelixHeadlessCombobox.prototype, "allowsCustomValue", void 0);
 __decorate([
     property()
 ], HelixHeadlessCombobox.prototype, "autocomplete", void 0);
@@ -368,9 +556,18 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessCombobox.prototype, "placeholder", void 0);
+__decorate([
+    property({ attribute: 'readonly', reflect: true, type: Boolean })
+], HelixHeadlessCombobox.prototype, "readOnly", void 0);
 __decorate([
     property({ attribute: 'remove-label' })
 ], HelixHeadlessCombobox.prototype, "removeLabel", void 0);
+__decorate([
+    property({ attribute: 'result-label' })
+], HelixHeadlessCombobox.prototype, "resultLabel", void 0);
+__decorate([
+    property({ attribute: 'results-label' })
+], HelixHeadlessCombobox.prototype, "resultsLabel", void 0);
 __decorate([
     property({ type: Boolean })
 ], HelixHeadlessCombobox.prototype, "suggest", void 0);
@@ -380,6 +577,12 @@ __decorate([
 __decorate([
     state()
 ], HelixHeadlessCombobox.prototype, "suggestion", void 0);
+__decorate([
+    state()
+], HelixHeadlessCombobox.prototype, "editing", void 0);
+__decorate([
+    state()
+], HelixHeadlessCombobox.prototype, "onCreate", void 0);
 HelixHeadlessCombobox = __decorate([
     customElement('helix-headless-combobox')
 ], HelixHeadlessCombobox);

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

@@ -14,7 +14,8 @@ declare const HelixHeadlessCommand_base: (new (...args: any[]) => import("@fusio
  *
  * The palette keeps no value. It is not a form control and submits nothing.
  * Choosing an option dispatches `helix-select` once. To remember the last
- * command, store it yourself.
+ * command, store it yourself. An option with `href` is a link to a page, which
+ * the browser follows once the palette has closed.
  *
  * The hotkey listener is on the document, so the hotkey works from anywhere on
  * the page, including inside another control's text field, whether or not the
@@ -22,7 +23,8 @@ declare const HelixHeadlessCommand_base: (new (...args: any[]) => import("@fusio
  * write one binding.
  *
  * The filter is cleared when the palette closes, so each opening starts from
- * the full list. Combobox and Select do the same.
+ * the full list. Combobox and Select do the same. As typing narrows the list, a
+ * screen reader hears how many commands are left, such as "3 commands".
  *
  * @since 0.1.0
  * @status stable
@@ -31,14 +33,22 @@ declare const HelixHeadlessCommand_base: (new (...args: any[]) => import("@fusio
  * @documentation https://fusion.dev/helix/components/command
  *
  * @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 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`.
  *
  * @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 {HelixSelectEvent} helix-select - A command was chosen. Cancelable: cancel it to keep the palette open.
- * @event {Event} toggle - The palette opened or closed. The event carries `newState` and `oldState`.
+ * @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 {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`.
  *
  * @csspart dialog - The box of the dialog the palette opens in, forwarded from `Dialog`.
+ * @csspart dialog-body - The dialog's slot for its content, which holds the list. It draws no box until you give it one.
+ * @csspart dialog-dismiss - The dialog's close control, drawn when the dialog is `dismissible`.
+ * @csspart dialog-dismiss-mark - The glyph on the dialog's close control, where none is slotted.
+ * @csspart dialog-footer - The dialog's slot for its actions, which holds the `footer` row. It draws no box until you give it one.
+ * @csspart dialog-header - The dialog's slot for its title. It draws no box until you give it one.
  * @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.
@@ -48,7 +58,7 @@ declare const HelixHeadlessCommand_base: (new (...args: any[]) => import("@fusio
  * @csspart listbox-hint - Help text under the list.
  * @csspart listbox-items - The list of commands.
  * @csspart listbox-label - The label above the list.
- * @csspart listbox-live - The listbox's `live` part, a live region that holds the empty and loading text for screen readers.
+ * @csspart listbox-live - The listbox's `live` part, a live region that holds the empty and loading text, and how many commands typing left, for screen readers.
  * @csspart listbox-loading - The text shown while the commands are loading.
  * @csspart listbox-search - The region that holds the filter field.
  * @csspart listbox-search-field - The filter field.
@@ -60,6 +70,12 @@ export declare class HelixHeadlessCommand extends HelixHeadlessCommand_base {
      * The text shown when the filter matches no commands.
      */
     emptyText: string;
+    /**
+     * How long typing rests before the commands are filtered, in milliseconds,
+     * so a palette filtered on a server sends one `helix-filter` for a word.
+     * `0` filters on every keystroke. See Listbox's `filter-delay`.
+     */
+    filterDelay: number;
     /**
      * The key that opens the palette, written as `mod+k`, `shift+p`, or `k`.
      *
@@ -72,10 +88,32 @@ export declare class HelixHeadlessCommand extends HelixHeadlessCommand_base {
      * Accessible name for the overlay, which has no visible heading.
      */
     label: string;
+    /**
+     * Whether the commands are still loading, for a palette that asks a server
+     * for them as the user types.
+     *
+     * Passed to the list, which shows `loading-text` and tells screen readers.
+     */
+    loading: boolean;
+    /**
+     * The text shown while the commands load.
+     */
+    loadingText: string;
     /**
      * The text shown in the filter field before anything is typed.
      */
     placeholder: string;
+    /**
+     * What a screen reader hears when typing leaves one command. `{count}` is
+     * the count.
+     */
+    resultLabel: string;
+    /**
+     * What a screen reader hears when typing leaves any other number of
+     * commands. `{count}` is the count, and `Intl.PluralRules` picks between the
+     * two.
+     */
+    resultsLabel: string;
     /**
      * Whether the consumer put anything under the list.
      *
@@ -119,12 +157,11 @@ export declare class HelixHeadlessCommand extends HelixHeadlessCommand_base {
      */
     private readonly handleChange;
     /**
-     * The row under the keyboard, read from the attribute the listbox writes.
+     * The row under the keyboard, read from the `active` property the listbox
+     * writes on each option.
      *
-     * `data-active` rather than a reference the listbox hands over, because the
-     * options are this element's own light DOM children and the attribute is
-     * already published: asking the listbox would mean a second channel saying
-     * what the markup says.
+     * Off the options rather than a reference the listbox hands over, because
+     * they are this element's own light DOM children and already say it.
      */
     private get activeOption();
     /**

package/dist/command/root/command-root.js

@@ -22,9 +22,14 @@ let HelixHeadlessCommand = class HelixHeadlessCommand extends MixinControllerOpe
     constructor() {
         super(...arguments);
         this.emptyText = 'No commands';
+        this.filterDelay = 0;
         this.hotkey = 'mod+k';
         this.label = 'Commands';
+        this.loading = false;
+        this.loadingText = 'Loading';
         this.placeholder = 'Search commands';
+        this.resultLabel = '{count} command';
+        this.resultsLabel = '{count} commands';
         this.footed = false;
         this.handleHotkey = (event) => {
             if (this.hotkey === '') {
@@ -71,16 +76,27 @@ let HelixHeadlessCommand = class HelixHeadlessCommand extends MixinControllerOpe
             }
         };
         this.swallowOptionSelect = (event) => {
-            if (event.target !== this) {
-                event.stopImmediatePropagation();
+            if (event.target === this) {
+                return;
+            }
+            event.stopImmediatePropagation();
+            const { href, value } = event.detail;
+            if (href === undefined) {
+                return;
+            }
+            if (!this.dispatchEvent(new HelixSelectEvent({ href, value }))) {
+                event.preventDefault();
+                return;
             }
+            this.requestOpen(false);
         };
     }
     get listbox() {
         return this.partNamed('listbox');
     }
     get activeOption() {
-        return this.querySelector('[data-active]');
+        return (this.listbox?.options.find((option) => option.active && !option.hidden) ??
+            this.querySelector('[data-active]'));
     }
     connectedCallback() {
         super.connectedCallback();
@@ -122,7 +138,8 @@ let HelixHeadlessCommand = class HelixHeadlessCommand extends MixinControllerOpe
     }
     renderDialog() {
         return html `<${this.tag('dialog')}
-    exportparts="dialog"
+    exportparts="body: dialog-body, dialog, dismiss: dialog-dismiss, dismiss-mark: dialog-dismiss-mark,
+      footer: dialog-footer, header: dialog-header"
       label=${this.label}
       .open=${this.open}
       @helix-before-close=${() => {
@@ -139,13 +156,22 @@ let HelixHeadlessCommand = class HelixHeadlessCommand extends MixinControllerOpe
         search-field: listbox-search-field"
         aria-label=${this.label}
         empty-text=${this.emptyText}
+        filter-delay=${this.filterDelay}
         filter-label=${this.placeholder}
+        loading-text=${this.loadingText}
+        result-label=${this.resultLabel}
+        results-label=${this.resultsLabel}
+        ?loading=${this.loading}
         filterable
         @helix-before-change=${this.handleChange}
         @change=${this.stopInner}
         @input=${this.stopInner}
       >
         <slot></slot>
+        <!-- Handed on with the text as the fallback, for the reason Combobox
+             gives: the list's own fallback never shows behind a passed slot. -->
+        <slot name="empty" slot="empty">${this.emptyText}</slot>
+        <slot name="loading" slot="loading">${this.loadingText}</slot>
       </${this.tag('listbox')}>
       <div ?hidden=${!this.footed} part="footer" slot="footer">
         <slot
@@ -164,15 +190,30 @@ let HelixHeadlessCommand = class HelixHeadlessCommand extends MixinControllerOpe
 __decorate([
     property({ attribute: 'empty-text' })
 ], HelixHeadlessCommand.prototype, "emptyText", void 0);
+__decorate([
+    property({ attribute: 'filter-delay', type: Number })
+], HelixHeadlessCommand.prototype, "filterDelay", void 0);
 __decorate([
     property()
 ], HelixHeadlessCommand.prototype, "hotkey", void 0);
 __decorate([
     property()
 ], HelixHeadlessCommand.prototype, "label", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HelixHeadlessCommand.prototype, "loading", void 0);
+__decorate([
+    property({ attribute: 'loading-text' })
+], HelixHeadlessCommand.prototype, "loadingText", void 0);
 __decorate([
     property()
 ], HelixHeadlessCommand.prototype, "placeholder", void 0);
+__decorate([
+    property({ attribute: 'result-label' })
+], HelixHeadlessCommand.prototype, "resultLabel", void 0);
+__decorate([
+    property({ attribute: 'results-label' })
+], HelixHeadlessCommand.prototype, "resultsLabel", void 0);
 __decorate([
     state()
 ], HelixHeadlessCommand.prototype, "footed", void 0);

package/dist/copy-button/from.d.ts

@@ -0,0 +1,22 @@
+/** What a `from` reference names: an element by its id, and what to read from it. */
+export interface FromReference {
+    /** An attribute to read, written `id[attribute]`. */
+    readonly attribute?: string;
+    /** The id of the element. */
+    readonly id: string;
+    /** A property to read, written `id.property`. */
+    readonly property?: string;
+}
+/**
+ * Reads a `from` reference: `id` for the element's text, `id[attribute]` for
+ * an attribute, and `id.property` for a property. Web Awesome's Copy Button
+ * takes the same three shapes.
+ *
+ * `null` for a reference with no id, or with anything after the brackets.
+ */
+export declare const parseFrom: (reference: string) => FromReference | null;
+/**
+ * The text a `from` reference names, looked up in the tree `scope` is in, or
+ * `null` where the element or its attribute is not there.
+ */
+export declare const readFrom: (reference: string, scope: Element) => string | null;