@fusion.dev/helix-headless 0.146.0 → 0.148.0

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

@@ -17,13 +17,33 @@ declare const HelixHeadlessCombobox_base: (new (...args: any[]) => import("@fusi
  * reopened combobox starts from the whole list.
  *
  * Focus stays in the text field. The arrow keys move through the list with the
- * listbox's public `navigate` method. `role="combobox"` is on the input itself.
- * ArrowDown and ArrowUp open the list on the chosen option, and Enter chooses
- * the highlighted one. As typing narrows the list, a screen reader hears how
- * many options are left, such as "3 results". Space, Home, End and letters edit the text, and Enter in
- * a closed field is left to the form. Emptying the field and leaving it clears
- * a single choice; Escape puts the chosen words back, and a second Escape on
- * the closed field clears the choice.
+ * listbox's public `navigate` method. As typing narrows the list, a screen
+ * reader hears how many options are left, such as "3 results". Emptying the
+ * field and leaving it clears a single choice.
+ *
+ * **Keyboard.**
+ *
+ * | Key | What it does |
+ * |---|---|
+ * | Down, Up | On a closed field, opens the list on the chosen option, or the first or the last. In the open list, moves the highlight, round from the last option to the first. |
+ * | Page Down, Page Up | In the open list, moves the highlight by as many options as the list shows at once. |
+ * | Enter | Chooses the highlighted option. With nothing left in the list, creates what was typed with `creatable`, or takes it with `allows-custom-value`. On a closed field, submits the form. |
+ * | Escape | Closes the list and puts the chosen words back. On a closed field, a second Escape clears a single choice. |
+ * | Tab | Closes the list and moves on. |
+ * | Backspace | With `multiple`, on an empty field, removes the last tag. |
+ * | Space, Home, End, letters | Edit the text. |
+ *
+ * **ARIA.** The input is the `combobox`, named by the label, with
+ * `aria-expanded`, `aria-controls` naming the list, `aria-autocomplete`
+ * (`both` with `suggest`, `list` otherwise) and `aria-activedescendant` on
+ * the highlighted option. The list is the listbox `Listbox` describes.
+ *
+ * On Apple devices, where VoiceOver does not read the option the field points
+ * to, the field says it in a live region as the highlight moves, says how many
+ * options there are as the list opens, and says a choice once it is made, as
+ * React Aria's combobox does there.
+ *
+ * Set `autocomplete` to let a browser's autofill choose an option.
  *
  * With `multiple`, each chosen option is a tag in the field with its own remove
  * control. The panel stays open and the filter clears after each choice, so the
@@ -83,6 +103,7 @@ declare const HelixHeadlessCombobox_base: (new (...args: any[]) => import("@fusi
  * @csspart listbox-loading - Shown while the options are loading.
  * @csspart listbox-search - The region holding the field that narrows the list.
  * @csspart listbox-search-field - The filter field inside that region.
+ * @csspart live - The region VoiceOver hears the highlight, the count and a choice from on Apple devices, drawn once there is one to say. Visually hidden in the styled tier.
  * @csspart rest - The count of choices held beyond `max-tags`. A `<button>` with `expandable`, a `<span>` without it.
  * @csspart surface - The floating panel.
  * @csspart tag - One chosen option.
@@ -94,11 +115,22 @@ declare const HelixHeadlessCombobox_base: (new (...args: any[]) => import("@fusi
  * @csspart tag-start - The category before the label.
  * @csspart tags - The row of chosen options, when `multiple` is set.
  *
+ * @cssstate blank - While nothing is chosen.
+ * @cssstate error - While `load-error` is set.
  * @cssstate invalid - The control has an error to show, from the browser's validation or from your `feedback`.
+ * @cssstate loading - While `loading` is set.
+ * @cssstate no-results - What was typed hid every option of a list that has some.
  * @cssstate open - While the list is open.
  */
 export declare class HelixHeadlessCombobox extends HelixHeadlessCombobox_base {
     protected readonly aria: AriaForwardController;
+    /** The region VoiceOver hears the highlight, the count and a choice from. */
+    private readonly status;
+    /**
+     * The option, or the create row, the region last said: `null` for none,
+     * and `undefined` until it has spoken since the list opened.
+     */
+    private told;
     /**
      * Whether text that names no option is taken as the value, as React Aria's
      * `allowsCustomValue`.
@@ -111,12 +143,19 @@ export declare class HelixHeadlessCombobox extends HelixHeadlessCombobox_base {
      */
     allowsCustomValue: boolean;
     /**
-     * What the browser may autofill in the text field, as a platform token.
+     * What the browser may autofill, as a platform token such as `country`.
      *
      * **Defaults to `off`, which is not the platform's default and is the
      * point.** The field filters a list rather than collecting a value, so a
      * browser offering to fill it with a saved address is competing for the same
      * keystrokes as the listbox. A consumer who wants autofill can still ask.
+     *
+     * Set, a combobox whose answer is one of its options keeps a hidden native
+     * `<select>` with the same options for the browser to fill, as React Aria's
+     * combobox and Select do, and the option the browser picks, by its value or
+     * its words, becomes the value. The text field itself stays `off`, so the
+     * browser fills the answer and not the filter. With `allows-custom-value`
+     * the token goes on the text field, whose words are the answer.
      */
     autocomplete: string;
     /**
@@ -153,10 +192,11 @@ export declare class HelixHeadlessCombobox extends HelixHeadlessCombobox_base {
     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.
+     * request to a server fails. Empty, null or no attribute is no error, so
+     * removing the attribute clears it. Passed to the list, which shows it
+     * under any options there are and tells screen readers.
      */
-    loadError: string;
+    loadError: string | null;
     /**
      * Whether the options are still loading.
      *
@@ -234,6 +274,11 @@ export declare class HelixHeadlessCombobox extends HelixHeadlessCombobox_base {
      * two.
      */
     resultsLabel: string;
+    /**
+     * What VoiceOver hears for a chosen option, as the highlight reaches it and
+     * once it is chosen, on Apple devices. `{name}` is the option's words.
+     */
+    selectedLabel: string;
     /**
      * Whether the field completes the word as the user types.
      *
@@ -334,6 +379,17 @@ export declare class HelixHeadlessCombobox extends HelixHeadlessCombobox_base {
      * is a thing a consumer may do.
      */
     private get showing();
+    /**
+     * The list's `error` and `no-results` states on the host too, so a page
+     * styles the whole control from them, as WA's combobox and its status slots
+     * allow. The list keeps its own, which only a stylesheet inside this shadow
+     * root could reach.
+     *
+     * Read once the list has drawn the filter, since `hidden` is what the
+     * filter writes onto an option: a filter that hid every option of a list
+     * that has some, with nothing loading.
+     */
+    private markStatus;
     /**
      * What the create row would add, or nothing where there is nothing to add.
      *
@@ -446,6 +502,20 @@ export declare class HelixHeadlessCombobox extends HelixHeadlessCombobox_base {
      * is missing.
      */
     private linkActive;
+    /**
+     * Says the highlight, and the count as the list opens, where VoiceOver
+     * would not.
+     *
+     * **VoiceOver does not read the option `aria-activedescendant` points to**
+     * while focus is in a text field, so on Apple devices the arrows moved
+     * through the list in silence. React Aria says the option there, with
+     * "selected" where it is chosen, and how many there are as the list opens.
+     * Only when the highlight moves to another option, so an update that leaves
+     * it where it was says nothing.
+     */
+    private tell;
+    /** How many options there are, said as the list opens, until an option is said with it. */
+    private counted;
     /**
      * Takes what the list announced and stops it there.
      *
@@ -552,6 +622,8 @@ export declare class HelixHeadlessCombobox extends HelixHeadlessCombobox_base {
      */
     private renderCreate;
     protected render(): TemplateResult;
+    /** Whether a browser's autofill fills the hidden select, rather than the text field. */
+    private get fills();
 }
 declare global {
     interface HTMLElementTagNameMap {

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, DelayController, fillTemplate, HelixCreateEvent, HelixFilterEvent, HelixFormElement, MixinControllerOpen, MixinControllerValue, MixinField, MixinTokens, PopoverController, reportValues, submitImplicitly, } from '@fusion.dev/helix-core';
+import { AriaForwardController, afterLinkFollowed, countLabel, customElement, DelayController, drawAutofill, drawStatus, fillTemplate, HelixCreateEvent, HelixFilterEvent, HelixFormElement, MixinControllerOpen, MixinControllerValue, MixinField, MixinTokens, onApple, PopoverController, reportValues, StatusController, submitImplicitly, } 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,8 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
         this.aria = new AriaForwardController(this, {
             target: () => this.partNamed('control'),
         });
+        this.status = new StatusController(this);
+        this.told = undefined;
         this.allowsCustomValue = false;
         this.autocomplete = 'off';
         this.creatable = false;
@@ -38,6 +40,7 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
         this.removeLabel = 'Remove {name}';
         this.resultLabel = '{count} result';
         this.resultsLabel = '{count} results';
+        this.selectedLabel = '{name}, selected';
         this.suggest = false;
         this.typed = '';
         this.suggestion = '';
@@ -166,12 +169,17 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
                 submitImplicitly(this.form);
             }
         };
+        this.counted = '';
         this.handleChange = (event) => {
             event.stopPropagation();
             const { value } = event.detail;
             if (!this.requestValue(value)) {
                 return;
             }
+            const chosen = this.listbox?.options.find((option) => option.value === value);
+            if (chosen && onApple()) {
+                this.status.say(fillTemplate(this.selectedLabel, { name: chosen.text }));
+            }
             this.emptied = false;
             this.typed = '';
             this.suggestion = '';
@@ -245,6 +253,17 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
     get showing() {
         return (this.listbox?.options ?? []).some((option) => !option.hidden);
     }
+    markStatus() {
+        const list = this.listbox;
+        this.toggleState('blank', this.value === '');
+        this.toggleState('loading', this.loading);
+        this.toggleState('error', Boolean(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 === '') {
@@ -353,7 +372,10 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
         const narrowing = new HelixFilterEvent({ value: typed });
         if (this.dispatchEvent(narrowing)) {
             this.listbox?.requestFilter(typed);
-            void this.listbox?.updateComplete.then(() => this.linkActive());
+            void this.listbox?.updateComplete.then(() => {
+                this.linkActive();
+                this.markStatus();
+            });
         }
         this.suggestion = this.suggest && inserted ? this.completionFor(typed) : '';
     }
@@ -370,16 +392,47 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
     }
     linkActive() {
         const control = this.partNamed('control');
-        if (!control || !('ariaActiveDescendantElement' in control)) {
-            return;
-        }
         const active = !this.open
             ? undefined
             : this.onCreate
                 ? this.partNamed('create')
                 : (this.listbox?.options ?? []).find((option) => option.active && !option.hidden);
+        this.tell(active);
+        if (!control || !('ariaActiveDescendantElement' in control)) {
+            return;
+        }
+        ;
         control.ariaActiveDescendantElement = active ?? null;
     }
+    tell(active) {
+        if (!this.open) {
+            this.told = undefined;
+            return;
+        }
+        if ((active ?? null) === this.told ||
+            !onApple() ||
+            this.renderRoot.activeElement !== this.partNamed('control')) {
+            return;
+        }
+        if (this.listbox?.isUpdatePending) {
+            void this.listbox.updateComplete.then(() => this.linkActive());
+            return;
+        }
+        if (this.told === undefined) {
+            this.counted = countLabel(this.reachable.length, this.resultLabel, this.resultsLabel, this.lang);
+        }
+        this.told = active ?? null;
+        const option = active;
+        const words = option?.text === undefined
+            ? (active?.textContent?.trim() ?? '')
+            : option.selected
+                ? fillTemplate(this.selectedLabel, { name: option.text })
+                : option.text;
+        this.status.say([this.counted, words].filter(Boolean).join('. '));
+        if (active) {
+            this.counted = '';
+        }
+    }
     removeLastToken() {
         const last = this.values.at(-1);
         if (last !== undefined) {
@@ -434,6 +487,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) {
@@ -455,7 +509,11 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
                 this.opening = undefined;
                 void this.listbox?.updateComplete.then(() => this.linkActive());
             }
-            if (control && !this.editing && !this.multiple && control.value !== '') {
+            if (control &&
+                !this.editing &&
+                !this.multiple &&
+                control.value !== '' &&
+                this.renderRoot.activeElement === control) {
                 control.select();
             }
         }
@@ -484,25 +542,16 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
       ?loading=${this.loading}
       ?multiple=${this.multiple}
       .value=${this.value}
+      .chosenAgain=${() => this.close()}
       @helix-before-change=${this.handleChange}
       @change=${this.stopInner}
       @helix-filter=${this.stopInner}
       @input=${this.stopInner}
     >
-      <!-- The field's words are read off the options, and on the first
-           render there are none: the slot has not been assigned yet, so a
-           combobox with a value comes up empty. Assignment changes no
-           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>
       <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}
@@ -552,7 +601,7 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
           id=${this.controlId}
           type="text"
           role="combobox"
-          autocomplete=${this.autocomplete || nothing}
+          autocomplete=${(this.fills ? 'off' : this.autocomplete) || nothing}
           spellcheck="false"
           aria-controls="listbox"
           aria-autocomplete=${this.suggest ? 'both' : 'list'}
@@ -575,7 +624,18 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
         ${this.renderListbox()}
         ${this.renderCreate()}
       </div>
-      ${this.renderHint()}${this.renderFeedback()}`;
+      ${this.renderHint()}${this.renderFeedback()}${drawStatus(this.status)}
+      ${drawAutofill({
+            autocomplete: this.fills ? this.autocomplete : '',
+            disabled: this.isDisabled || this.readOnly,
+            multiple: this.multiple,
+            onFill: (value) => this.requestValue(value),
+            options: optionsAmong(this.knownChildren),
+            value: this.value,
+        })}`;
+    }
+    get fills() {
+        return !this.allowsCustomValue && this.autocomplete !== 'off' && this.autocomplete !== '';
     }
 };
 __decorate([
@@ -632,6 +692,9 @@ __decorate([
 __decorate([
     property({ attribute: 'results-label' })
 ], HelixHeadlessCombobox.prototype, "resultsLabel", void 0);
+__decorate([
+    property({ attribute: 'selected-label' })
+], HelixHeadlessCombobox.prototype, "selectedLabel", void 0);
 __decorate([
     property({ type: Boolean })
 ], HelixHeadlessCombobox.prototype, "suggest", void 0);

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

@@ -81,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
@@ -94,10 +96,11 @@ export declare class HelixHeadlessCommand extends HelixHeadlessCommand_base {
     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.
+     * request to a server fails. Empty, null or no attribute is no error, so
+     * removing the attribute clears it. Passed to the list, which shows it
+     * under any commands there are and tells screen readers.
      */
-    loadError: string;
+    loadError: string | null;
     /**
      * Whether the commands are still loading, for a palette that asks a server
      * for them as the user types.

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

@@ -4,21 +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);
@@ -34,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();

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 {
     /**
@@ -135,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

@@ -24,7 +24,7 @@ let HelixHeadlessCopyButton = HelixHeadlessCopyButton_1 = class HelixHeadlessCop
         this.label = 'Copy';
         this.value = '';
         this.namedBy = null;
-        this.clipboard = new CopyController(this, Object.defineProperty({}, 'after', { get: () => this.feedbackDuration }));
+        this.clipboard = new CopyController(this, { after: () => this.feedbackDuration });
         this.handleCopy = async (event) => {
             if (this.pending) {
                 event.preventDefault();
@@ -51,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;
     }
@@ -83,7 +88,7 @@ let HelixHeadlessCopyButton = HelixHeadlessCopyButton_1 = class HelixHeadlessCop
       @keydown=${this.notePress}
       @pointerdown=${this.notePress}
     >
-      ${this.renderCopiedIcon()} ${this.renderFailedIcon()} ${this.renderCopyIcon()}
+      ${this.renderCopiedIcon()} ${this.renderFailedIcon()} ${this.renderCopyIcon()}${this.renderSpinner()}
       </button>`)}${this.renderLive()}`;
     }
     renderCopyIcon() {

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

@@ -1,24 +1,6 @@
-/**
- * `keys` in the order the rows are, which is `order`: the keys of the whole
- * result. A key the result does not hold, a selected row a search has hidden
- * say, keeps its place after them in the order it was given.
- *
- * So `selected` and `expanded`, and the events that carry them, read in row
- * order whatever order the rows were chosen in.
- */
-export declare const inRowOrder: (keys: Iterable<string>, order: readonly string[]) => string[];
 /**
  * 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;
-/**
- * Where a Shift range runs from, as an index into the page's `keys`: the row
- * last chosen while it is on the page, and otherwise the row the reader is on,
- * `from`, which becomes the one to run from.
- */
-export declare const anchorAt: (keys: readonly string[], anchorKey: string | undefined, from: number) => {
-    anchor: number;
-    anchorKey: string | undefined;
-};

package/dist/data-table/keys.js

@@ -1,10 +1,4 @@
-import { commaList } from '@fusion.dev/helix-core';
-export const inRowOrder = (keys, order) => {
-    const wanted = new Set(keys);
-    const placed = order.filter((key) => wanted.has(key));
-    const seen = new Set(placed);
-    return [...placed, ...[...wanted].filter((key) => !seen.has(key))];
-};
+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) {
@@ -18,7 +12,3 @@ export const toggledOpen = (expanded, key, open, order) => {
     }
     return inRowOrder(keys, order).join(',');
 };
-export const anchorAt = (keys, anchorKey, from) => {
-    const anchor = anchorKey === undefined ? -1 : keys.indexOf(anchorKey);
-    return anchor < 0 ? { anchor: from, anchorKey: keys[from] } : { anchor, anchorKey };
-};