@fusion.dev/helix-headless 0.145.0 → 0.147.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, 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);
             }
         };
@@ -215,6 +245,15 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
     get showing() {
         return (this.listbox?.options ?? []).some((option) => !option.hidden);
     }
+    markStatus() {
+        const list = this.listbox;
+        this.toggleState('error', this.loadError !== '');
+        this.toggleState('no-results', list !== null &&
+            !this.loading &&
+            list.filter !== '' &&
+            list.options.length > 0 &&
+            !this.showing);
+    }
     get creation() {
         const typed = this.typed.trim();
         if (!this.creatable || typed === '') {
@@ -261,7 +300,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 +357,18 @@ 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.markStatus();
+            });
+        }
+        this.suggestion = this.suggest && inserted ? this.completionFor(typed) : '';
+    }
     completionFor(typed) {
         if (typed === '') {
             return '';
@@ -393,6 +446,7 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
         super.updated?.(changed);
         this.sync();
         this.linkActive();
+        void (this.listbox?.updateComplete ?? Promise.resolve()).then(() => this.markStatus());
         const control = this.partNamed('control');
         const wanted = this.fieldText;
         if (control && control.value !== wanted) {
@@ -401,7 +455,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 +474,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 +483,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 +513,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 +576,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 +606,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 +624,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.
@@ -77,7 +81,9 @@ export declare class HelixHeadlessCommand extends HelixHeadlessCommand_base {
      */
     filterDelay: number;
     /**
-     * The key that opens the palette, written as `mod+k`, `shift+p`, or `k`.
+     * The key that opens the palette, written as `mod+k`, `shift+p`, or `k`,
+     * in Kbd's chord spelling: `mod` is Command or Control, `ctrl`, `cmd`,
+     * `alt` and `shift` the keys they name.
      *
      * Empty turns it off, for a consumer who opens the palette from a button or
      * from their own shortcut handler. There is no list of defaults to fight
@@ -88,6 +94,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 +111,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.
      */

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

@@ -4,20 +4,12 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { customElement, HelixElement, HelixSelectEvent, MixinControllerOpen, } from '@fusion.dev/helix-core';
+import { customElement, HelixElement, HelixSelectEvent, MixinControllerOpen, matchesChord, } from '@fusion.dev/helix-core';
+import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { html } from 'lit/static-html.js';
 import '../../dialog/index.js';
 import '../../listbox/index.js';
-const parse = (hotkey) => {
-    const parts = hotkey.toLowerCase().split('+');
-    return {
-        alt: parts.includes('alt'),
-        key: parts.at(-1) ?? '',
-        mod: parts.includes('mod'),
-        shift: parts.includes('shift'),
-    };
-};
 let HelixHeadlessCommand = class HelixHeadlessCommand extends MixinControllerOpen(HelixElement) {
     constructor() {
         super(...arguments);
@@ -25,6 +17,7 @@ let HelixHeadlessCommand = class HelixHeadlessCommand extends MixinControllerOpe
         this.filterDelay = 0;
         this.hotkey = 'mod+k';
         this.label = 'Commands';
+        this.loadError = '';
         this.loading = false;
         this.loadingText = 'Loading';
         this.placeholder = 'Search commands';
@@ -32,15 +25,7 @@ let HelixHeadlessCommand = class HelixHeadlessCommand extends MixinControllerOpe
         this.resultsLabel = '{count} commands';
         this.footed = false;
         this.handleHotkey = (event) => {
-            if (this.hotkey === '') {
-                return;
-            }
-            const wanted = parse(this.hotkey);
-            const mod = event.metaKey || event.ctrlKey;
-            if (event.key.toLowerCase() !== wanted.key ||
-                mod !== wanted.mod ||
-                event.shiftKey !== wanted.shift ||
-                event.altKey !== wanted.alt) {
+            if (!matchesChord(event, this.hotkey, true) && !matchesChord(event, this.hotkey, false)) {
                 return;
             }
             event.preventDefault();
@@ -150,15 +135,17 @@ let HelixHeadlessCommand = class HelixHeadlessCommand extends MixinControllerOpe
     >
       <${this.tag('listbox')}
         part="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.label}
         empty-text=${this.emptyText}
         filter-delay=${this.filterDelay}
         filter-label=${this.placeholder}
+        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}
@@ -172,6 +159,14 @@ let HelixHeadlessCommand = class HelixHeadlessCommand extends MixinControllerOpe
              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>
+        <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')}>
       <div ?hidden=${!this.footed} part="footer" slot="footer">
         <slot
@@ -199,12 +194,18 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessCommand.prototype, "label", void 0);
+__decorate([
+    property({ attribute: 'load-error' })
+], HelixHeadlessCommand.prototype, "loadError", 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({ attribute: 'no-results-text' })
+], HelixHeadlessCommand.prototype, "noResultsText", void 0);
 __decorate([
     property()
 ], HelixHeadlessCommand.prototype, "placeholder", void 0);

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

@@ -1,4 +1,4 @@
-import { type TemplateResult } from 'lit';
+import { type PropertyValues, type TemplateResult } from 'lit';
 import { HelixHeadlessIconButton } from '../../icon-button/root/icon-button-root.js';
 import '../../tooltip/index.js';
 /**
@@ -26,6 +26,12 @@ import '../../tooltip/index.js';
  * rendered. An `aria-label` on the element names it before a copy, in place of
  * `label`.
  *
+ * **Keyboard.** Enter and Space copy, as they press a native button.
+ *
+ * The button is named `label`, or the host's `aria-label`, and its name
+ * changes to `copied-label` or `error-label` for the moment after a press,
+ * which is what a screen reader on it hears. The tooltip shows the same words.
+ *
  * @since 0.1.0
  * @status stable
  * @category actions
@@ -42,6 +48,7 @@ import '../../tooltip/index.js';
  * @csspart button - The inner button.
  * @csspart live - The live region that says `pending-label` when the button becomes pending under focus. It is rendered from the first time the button is pending.
  * @csspart mark - The clipboard icon, and the confirmation icon that replaces it.
+ * @csspart spinner - The ring a pending button turns, an empty element the styled button draws over the icon. It is rendered only while the button is pending.
  * @csspart tooltip - The tooltip bubble, forwarded from the tooltip inside the button.
  * @csspart tooltip-arrow - The tooltip's arrow, which points at the button.
  * @csspart tooltip-arrow-bottom - The arrow while the bubble is below the button, on the bubble's top edge. Set together with `tooltip-arrow`.
@@ -52,6 +59,13 @@ import '../../tooltip/index.js';
  * @csspart tooltip-left - The bubble while it is left of the button. Set together with `tooltip`.
  * @csspart tooltip-right - The bubble while it is right of the button. Set together with `tooltip`.
  * @csspart tooltip-top - The bubble while it is above the button. Set together with `tooltip`.
+ *
+ * @cssstate copied - The moment after a successful copy, while `copied-label` names the button.
+ * @cssstate failed - The moment after a press that put nothing on the clipboard, while `error-label` names the button.
+ *
+ * @withheld csspart text - Button's words, which this does not render: the label is the icon's name.
+ * @withheld slot end - Button's, which this does not render.
+ * @withheld slot start - Button's, which this does not render.
  */
 export declare class HelixHeadlessCopyButton extends HelixHeadlessIconButton {
     /**
@@ -66,6 +80,11 @@ export declare class HelixHeadlessCopyButton extends HelixHeadlessIconButton {
      * clipboard.
      */
     errorLabel: string;
+    /**
+     * How long the confirmation or the failure stands, in milliseconds, before
+     * the button goes back to `label`.
+     */
+    feedbackDuration: number;
     /**
      * The element to copy from, by its id: `key` for its text, `key[value]` for
      * an attribute, and `key.value` for a property. Read at the press, and used
@@ -130,6 +149,7 @@ export declare class HelixHeadlessCopyButton extends HelixHeadlessIconButton {
      * cover the confirmation.
      */
     protected get forwardsLabel(): boolean;
+    protected willUpdate(changed: PropertyValues): void;
     /** @internal A copy button never submits, so it is no form's default button. */
     protected get submitsForm(): boolean;
     /**

package/dist/copy-button/root/copy-button-root.js

@@ -14,17 +14,17 @@ import { html } from 'lit/static-html.js';
 import { HelixHeadlessIconButton } from '../../icon-button/root/icon-button-root.js';
 import { readFrom } from '../from.js';
 import '../../tooltip/index.js';
-const CONFIRM = 1600;
 let HelixHeadlessCopyButton = HelixHeadlessCopyButton_1 = class HelixHeadlessCopyButton extends HelixHeadlessIconButton {
     constructor() {
         super(...arguments);
         this.copiedLabel = 'Copied';
         this.errorLabel = 'Could not copy';
+        this.feedbackDuration = 1600;
         this.from = '';
         this.label = 'Copy';
         this.value = '';
         this.namedBy = null;
-        this.clipboard = new CopyController(this, { after: CONFIRM });
+        this.clipboard = new CopyController(this, { after: () => this.feedbackDuration });
         this.handleCopy = async (event) => {
             if (this.pending) {
                 event.preventDefault();
@@ -34,7 +34,9 @@ let HelixHeadlessCopyButton = HelixHeadlessCopyButton_1 = class HelixHeadlessCop
             if (this.isDisabled) {
                 return;
             }
-            const wrote = await this.clipboard.copy(this.text);
+            const copying = this.clipboard.copy(this.text);
+            this.announcePress(event);
+            const wrote = await copying;
             if (!wrote && this.isConnected) {
                 this.dispatchEvent(new HelixCopyErrorEvent());
             }
@@ -49,6 +51,11 @@ let HelixHeadlessCopyButton = HelixHeadlessCopyButton_1 = class HelixHeadlessCop
     get forwardsLabel() {
         return false;
     }
+    willUpdate(changed) {
+        super.willUpdate(changed);
+        this.toggleState('copied', this.copied);
+        this.toggleState('failed', this.failed);
+    }
     get submitsForm() {
         return false;
     }
@@ -78,8 +85,10 @@ let HelixHeadlessCopyButton = HelixHeadlessCopyButton_1 = class HelixHeadlessCop
       tabindex=${this.focusable ? nothing : '-1'}
       ?disabled=${this.isDisabled}
       @click=${this.handleCopy}
+      @keydown=${this.notePress}
+      @pointerdown=${this.notePress}
     >
-      ${this.renderCopiedIcon()} ${this.renderFailedIcon()} ${this.renderCopyIcon()}
+      ${this.renderCopiedIcon()} ${this.renderFailedIcon()} ${this.renderCopyIcon()}${this.renderSpinner()}
       </button>`)}${this.renderLive()}`;
     }
     renderCopyIcon() {
@@ -113,6 +122,9 @@ __decorate([
 __decorate([
     property({ attribute: 'error-label' })
 ], HelixHeadlessCopyButton.prototype, "errorLabel", void 0);
+__decorate([
+    property({ attribute: 'feedback-duration', type: Number })
+], HelixHeadlessCopyButton.prototype, "feedbackDuration", void 0);
 __decorate([
     property()
 ], HelixHeadlessCopyButton.prototype, "from", void 0);

package/dist/data-table/index.d.ts

@@ -1,2 +1,2 @@
+export { type Axis, cycle, type DataRow, filter, format, ordered, parse, type Sort, sort, window_, } from '@fusion.dev/helix-core';
 export { HelixHeadlessDataTable } from './root/data-table-root.js';
-export { type Axis, cycle, type DataRow, filter, format, ordered, parse, type Sort, sort, window_, } from './root/order.js';

package/dist/data-table/index.js

@@ -1,2 +1,2 @@
+export { cycle, filter, format, ordered, parse, sort, window_, } from '@fusion.dev/helix-core';
 export { HelixHeadlessDataTable } from './root/data-table-root.js';
-export { cycle, filter, format, ordered, parse, sort, window_, } from './root/order.js';

package/dist/data-table/keys.d.ts

@@ -0,0 +1,6 @@
+/**
+ * The `expanded` a toggle of row `key` leaves, in row order, or `undefined`
+ * where the row is open or closed already. Keys are split on commas only, so a
+ * key may hold a space.
+ */
+export declare const toggledOpen: (expanded: string, key: string, open: boolean, order: readonly string[]) => string | undefined;

package/dist/data-table/keys.js

@@ -0,0 +1,14 @@
+import { commaList, inRowOrder } from '@fusion.dev/helix-core';
+export const toggledOpen = (expanded, key, open, order) => {
+    const keys = new Set(commaList(expanded));
+    if (keys.has(key) === open) {
+        return undefined;
+    }
+    if (open) {
+        keys.add(key);
+    }
+    else {
+        keys.delete(key);
+    }
+    return inRowOrder(keys, order).join(',');
+};

package/dist/data-table/root/data-table-root.d.ts

@@ -1,9 +1,8 @@
-import { HelixElement } from '@fusion.dev/helix-core';
+import { type DataRow, HelixElement } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
 import { type HelixHeadlessTableColumn } from '../../table/column/table-column.js';
 import '../../checkbox/index.js';
 import '../../pagination/index.js';
-import { type DataRow } from './order.js';
 declare const HelixHeadlessDataTable_base: (new (...args: any[]) => import("@fusion.dev/helix-core").CollectionElement) & typeof HelixElement;
 /**
  * @summary A table drawn from an array of rows, with sorting, filtering, and paging.
@@ -44,20 +43,29 @@ declare const HelixHeadlessDataTable_base: (new (...args: any[]) => import("@fus
  *
  * To act on a single row, such as opening it, put a link or a button in a cell.
  *
- * The grid is one tab stop, and the arrow keys move between its cells, the
- * headings included:
+ * **Keyboard.** The grid is one tab stop, and the arrow keys move between its
+ * cells, the headings included.
  *
- * - The arrow keys move one cell, and Home and End to the ends of the row.
- * - Control with Home or End moves to the first or the last cell of the grid.
- * - Page Up and Page Down move by the rows that fit in view.
- * - Enter or F2 moves into the cell's controls, and Escape moves back to the
- *   cell. Tab moves between the controls of one cell.
- * - Enter or Space on a sortable heading sorts by it, and Space on a row of a
- *   `selectable` table selects it.
- * - In a `selectable` table, Shift with Up or Down selects the rows it moves
- *   across, Shift with Space selects every row from the one last chosen, and
- *   Control or Command with A selects every row.
- * - Typing letters moves to the next row whose row header starts with them.
+ * | Key | What it does |
+ * |---|---|
+ * | Right, Left | Moves one cell along the row. Left moves on, on a right-to-left page. |
+ * | Down, Up | Moves one row, the heading row and the `load-more` row included. |
+ * | Home, End | Moves to the first or the last cell of the row. |
+ * | Control with Home or End | Moves to the first or the last cell of the grid. |
+ * | Page Down, Page Up | Moves by the rows that fit in view. |
+ * | Enter, F2 | Moves into the cell's controls. Escape moves back to the cell, and Tab moves between the controls of one cell. |
+ * | Enter, Space on a sortable heading | Sorts by the column. |
+ * | Enter, Space on the `load-more` row | Sends `helix-load-more`. |
+ * | Space on a row | Selects the row, in a `selectable` table. |
+ * | Shift with Down or Up | Selects the rows it moves across, in a `selectable` table. |
+ * | Shift with Space | Selects every row from the one last chosen, in a `selectable` table. |
+ * | Control or Command with A | Selects every row, in a `selectable` table. |
+ * | Right on a row header in a tree grid | Opens a closed row, and moves one cell along an open one. |
+ * | Left on a row header in a tree grid | Closes an open row, and moves to the parent of a closed one. |
+ * | A letter or a word | Moves to the next row whose row header starts with what you typed. |
+ *
+ * `selected` and `expanded` hold their keys in the order of the rows, as do
+ * `helix-select`, `helix-selected` and `helix-expand`.
  *
  * Each row is named by its row header, the column marked `row-header`, or the
  * first column with a `field` where none is. A screen reader says it as a reader
@@ -485,8 +493,6 @@ export declare class HelixHeadlessDataTable extends HelixHeadlessDataTable_base
     private anchorKey;
     /** Whether Shift was held on the last press, for a checkbox that asks to range. */
     private shiftPressed;
-    /** The number of rows when `helix-load-more` last went out on its own. */
-    private askedAt;
     /** The grid's size as the last render counted it, for the internals. */
     private counts;
     /** The order while a grip is being dragged, before anybody has been asked. */
@@ -540,7 +546,10 @@ export declare class HelixHeadlessDataTable extends HelixHeadlessDataTable_base
      * sorts them.
      */
     private tree;
-    /** The keys of the open rows. */
+    /**
+     * The keys of the open rows. Split on commas only, as every other list of
+     * keys is, so a key may hold a space.
+     */
     private get opened();
     /**
      * The result in order: the tree laid out flat in a tree grid, and the