@fusion.dev/helix-headless 0.143.0 → 0.144.0

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

@@ -19,9 +19,11 @@ declare const HelixHeadlessCombobox_base: (new (...args: any[]) => import("@fusi
  * 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. Space, Home, End and letters edit the text, and Enter in
+ * 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.
+ * a single choice; Escape puts the chosen words back, and a second Escape on
+ * the closed field clears the choice.
  *
  * 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
@@ -39,11 +41,13 @@ declare const HelixHeadlessCombobox_base: (new (...args: any[]) => import("@fusi
  * @documentation https://fusion.dev/helix/components/combobox
  *
  * @slot - The options.
+ * @slot empty - What the list shows when typing hides every option, for content richer than `empty-text`.
  * @slot end - After the text, for a unit or a clear button.
  * @slot feedback - The message that says what is wrong, for content richer than a string. It shows while there is a message.
  * @slot hint - The hint, for content richer than plain text.
  * @slot indicator - Replaces the caret that shows the field opens a list.
  * @slot label - The label, for content richer than plain text.
+ * @slot loading - What the list shows while the options load, for content richer than `loading-text`.
  * @slot start - Before the text, for an icon.
  *
  * @event {Event} change - Fired after the value changes.
@@ -71,16 +75,18 @@ declare const HelixHeadlessCombobox_base: (new (...args: any[]) => import("@fusi
  * @csspart listbox-hint - Help under the list.
  * @csspart listbox-items - The element that holds the options.
  * @csspart listbox-label - The label above the list.
- * @csspart listbox-live - The inner list's `live` part, the region screen readers announce its empty and loading messages from.
+ * @csspart listbox-live - The inner list's `live` part, the region screen readers announce its empty and loading messages, and how many options typing left, from.
  * @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 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.
+ * @csspart tag-cell - The tag's grid cell, which a tag draws only inside a tag group.
  * @csspart tag-dismiss - The remove button, when `dismissible`.
  * @csspart tag-dismiss-mark - The glyph on the dismiss control, where none is slotted.
  * @csspart tag-label - The label, trimmed to its capitals and baseline.
+ * @csspart tag-link - The tag's link around its label, which a tag draws only with `href`.
  * @csspart tag-start - The category before the label.
  * @csspart tags - The row of chosen options, when `multiple` is set.
  *
@@ -89,6 +95,17 @@ declare const HelixHeadlessCombobox_base: (new (...args: any[]) => import("@fusi
  */
 export declare class HelixHeadlessCombobox extends HelixHeadlessCombobox_base {
     protected readonly aria: AriaForwardController;
+    /**
+     * Whether text that names no option is taken as the value, as React Aria's
+     * `allowsCustomValue`.
+     *
+     * For a field where the list is a help and not the whole of the answer, a
+     * city or a job title. What was typed becomes the value when the reader
+     * leaves the field or presses Enter with nothing highlighted, and text that
+     * names an option takes that option. Unlike `creatable`, no event asks
+     * first and no option is expected to be added: the value is the text.
+     */
+    allowsCustomValue: boolean;
     /**
      * What the browser may autofill in the text field, as a platform token.
      *
@@ -174,6 +191,17 @@ export declare class HelixHeadlessCombobox extends HelixHeadlessCombobox_base {
      * removes rather than as "Remove" said once per chosen option.
      */
     removeLabel: string;
+    /**
+     * What a screen reader hears when typing leaves one option. `{count}` is
+     * the count.
+     */
+    resultLabel: string;
+    /**
+     * What a screen reader hears when typing leaves any other number of
+     * options. `{count}` is the count, and `Intl.PluralRules` picks between the
+     * two.
+     */
+    resultsLabel: string;
     /**
      * Whether the field completes the word as the user types.
      *
@@ -313,6 +341,11 @@ export declare class HelixHeadlessCombobox extends HelixHeadlessCombobox_base {
      * once answered.
      */
     private commitEmptied;
+    /**
+     * Takes what was typed as the answer, where `allows-custom-value` asks: the
+     * option its words name, or the text itself. Returns whether it took any.
+     */
+    private commitTyped;
     /** The options the arrows can reach. */
     private get reachable();
     /**
@@ -418,6 +451,8 @@ export declare class HelixHeadlessCombobox extends HelixHeadlessCombobox_base {
      * component: a form that received "jav" got the filter, not an option.
      */
     private sync;
+    /** A link option, once followed, closes the panel as a choice does. */
+    private readonly handleLinkFollowed;
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected willUpdate(changed: PropertyValues): void;

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';
@@ -32,6 +33,8 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
         this.placeholder = '';
         this.readOnly = false;
         this.removeLabel = 'Remove {name}';
+        this.resultLabel = '{count} result';
+        this.resultsLabel = '{count} results';
         this.suggest = false;
         this.typed = '';
         this.suggestion = '';
@@ -81,6 +84,12 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
                 if (this.open) {
                     event.preventDefault();
                     this.close();
+                    return;
+                }
+                if (!this.multiple && this.value !== '' && !this.readOnly) {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    this.requestValue('');
                 }
                 return;
             }
@@ -99,6 +108,16 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
                 this.create();
                 return;
             }
+            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();
@@ -151,6 +170,9 @@ 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) {
@@ -246,6 +268,28 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
             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);
@@ -312,6 +356,7 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
     }
     connectedCallback() {
         super.connectedCallback();
+        this.addEventListener('helix-select', this.handleLinkFollowed);
         this.watcher = new MutationObserver(() => this.requestUpdate());
         this.watcher.observe(this, {
             attributeFilter: ['label', 'value'],
@@ -322,6 +367,7 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
     }
     disconnectedCallback() {
         super.disconnectedCallback();
+        this.removeEventListener('helix-select', this.handleLinkFollowed);
         this.watcher?.disconnect();
         this.watcher = undefined;
     }
@@ -390,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}
@@ -404,12 +452,17 @@ 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 && !this.readOnly}
@@ -473,6 +526,9 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
       ${this.renderHint()}${this.renderFeedback()}`;
     }
 };
+__decorate([
+    property({ attribute: 'allows-custom-value', type: Boolean })
+], HelixHeadlessCombobox.prototype, "allowsCustomValue", void 0);
 __decorate([
     property()
 ], HelixHeadlessCombobox.prototype, "autocomplete", void 0);
@@ -506,6 +562,12 @@ __decorate([
 __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);

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,15 +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 {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. Cancelable: cancel it to keep the palette open.
+ * @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.
@@ -49,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.
@@ -61,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`.
      *
@@ -88,6 +103,17 @@ export declare class HelixHeadlessCommand extends HelixHeadlessCommand_base {
      * 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.
      *

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

@@ -22,11 +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 === '') {
@@ -73,9 +76,19 @@ 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() {
@@ -125,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=${() => {
@@ -142,8 +156,11 @@ 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}
@@ -151,6 +168,10 @@ let HelixHeadlessCommand = class HelixHeadlessCommand extends MixinControllerOpe
         @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
@@ -169,6 +190,9 @@ 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);
@@ -184,6 +208,12 @@ __decorate([
 __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;

package/dist/copy-button/from.js

@@ -0,0 +1,28 @@
+import { elementById } from '@fusion.dev/helix-core';
+export const parseFrom = (reference) => {
+    const written = reference.trim();
+    const bracket = /^([^[\].\s]+)\[([^\]\s]+)\]$/u.exec(written);
+    if (bracket) {
+        return { attribute: bracket[2], id: bracket[1] };
+    }
+    const dot = /^([^[\].\s]+)\.([^[\].\s]+)$/u.exec(written);
+    if (dot) {
+        return { id: dot[1], property: dot[2] };
+    }
+    return /^[^[\].\s]+$/u.test(written) ? { id: written } : null;
+};
+export const readFrom = (reference, scope) => {
+    const parsed = parseFrom(reference);
+    const element = parsed ? elementById(scope, parsed.id) : null;
+    if (!(parsed && element)) {
+        return null;
+    }
+    if (parsed.attribute !== undefined) {
+        return element.getAttribute(parsed.attribute);
+    }
+    if (parsed.property !== undefined) {
+        const read = element[parsed.property];
+        return read === undefined || read === null ? null : String(read);
+    }
+    return element.textContent;
+};

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

@@ -12,7 +12,13 @@ import '../../tooltip/index.js';
  * The confirmation and the event wait for the write to finish. The browser can
  * refuse a clipboard write, for example on an insecure origin, in a document
  * that is not focused, or after a gesture that does not qualify. A refused
- * write leaves the button unchanged.
+ * write, or nothing to copy, names the button with `error-label` for the same
+ * moment a copy shows `copied-label`, draws a cross, and sends
+ * `helix-copy-error`.
+ *
+ * `from` copies from another element on the page: its text, an attribute
+ * written `id[attribute]`, or a property written `id.property`, read at the
+ * press. It takes the place of `value`.
  *
  * It replaces Button's render and its press, so it never submits a form or
  * sends a command: `type`, `command`, `commandfor` and the `form*` overrides
@@ -28,10 +34,13 @@ import '../../tooltip/index.js';
  *
  * @slot - The icon shown before a copy. Defaults to a clipboard.
  * @slot copied - The icon shown after a successful copy. Defaults to a check mark.
+ * @slot failed - The icon shown after a copy that put nothing on the clipboard. Defaults to a cross.
  *
  * @event {HelixCopyEvent} helix-copy - Fired after the clipboard write succeeds.
+ * @event {Event} helix-copy-error - Fired when a press put nothing on the clipboard: the browser refused the write, or there was nothing to copy.
  *
  * @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 tooltip - The tooltip bubble, forwarded from the tooltip inside the button.
  * @csspart tooltip-arrow - The tooltip's arrow, which points at the button.
@@ -52,6 +61,18 @@ export declare class HelixHeadlessCopyButton extends HelixHeadlessIconButton {
      * dash-casing it, and `copiedlabel` is not what anyone would type.
      */
     copiedLabel: string;
+    /**
+     * The button's name and tooltip text after a press that put nothing on the
+     * clipboard.
+     */
+    errorLabel: string;
+    /**
+     * 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
+     * in place of `value`. An element that is not there copies nothing, which is
+     * a failed copy.
+     */
+    from: string;
     /**
      * The button's name and tooltip text before a copy.
      *
@@ -107,6 +128,9 @@ export declare class HelixHeadlessCopyButton extends HelixHeadlessIconButton {
      */
     private readonly clipboard;
     private get copied();
+    private get failed();
+    /** What a press copies: the text `from` names, or `value`. */
+    private get text();
     private readonly handleCopy;
     /**
      * Both faces, drawn rather than demanded.
@@ -139,6 +163,8 @@ export declare class HelixHeadlessCopyButton extends HelixHeadlessIconButton {
      * the focused element mid-press.
      */
     protected renderCopiedIcon(): TemplateResult;
+    /** The mark for a press that put nothing on the clipboard, behind a seam of its own. */
+    protected renderFailedIcon(): TemplateResult;
     /**
      * The bubble the control sits inside, behind a seam.
      *

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

@@ -6,30 +6,44 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 var HelixHeadlessCopyButton_1;
 import { CopyController, customElement } from '@fusion.dev/helix-core';
-import { check, copy } from '@fusion.dev/helix-icons';
+import { check, copy, x } from '@fusion.dev/helix-icons';
 import { nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 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.from = '';
         this.label = 'Copy';
         this.value = '';
         this.namedBy = null;
         this.clipboard = new CopyController(this, { after: CONFIRM });
-        this.handleCopy = async () => {
+        this.handleCopy = async (event) => {
+            if (this.pending) {
+                event.preventDefault();
+                event.stopImmediatePropagation();
+                return;
+            }
             if (this.isDisabled) {
                 return;
             }
-            await this.clipboard.copy(this.value);
+            const wrote = await this.clipboard.copy(this.text);
+            if (!wrote && this.isConnected) {
+                this.dispatchEvent(new Event('helix-copy-error', { bubbles: true, composed: true }));
+            }
         };
     }
     get says() {
+        if (this.failed) {
+            return this.errorLabel;
+        }
         return this.copied ? this.copiedLabel : this.namedBy || this.label;
     }
     get forwardsLabel() {
@@ -41,32 +55,48 @@ let HelixHeadlessCopyButton = HelixHeadlessCopyButton_1 = class HelixHeadlessCop
     get copied() {
         return this.clipboard.copied;
     }
+    get failed() {
+        return this.clipboard.failed;
+    }
+    get text() {
+        return this.from === '' ? this.value : (readFrom(this.from, this) ?? '');
+    }
     static icon(glyph) {
         return html `<svg part="mark" fill="currentColor" viewBox=${glyph.viewBox} aria-hidden="true">
       ${unsafeSVG(glyph.content)}
     </svg>`;
     }
     render() {
-        return this.renderTooltip(html `<button
+        return html `${this.renderTooltip(html `<button
       part="button"
       type="button"
+      aria-busy=${this.pending ? 'true' : nothing}
+      aria-disabled=${this.pending ? 'true' : nothing}
       aria-label=${this.says}
       data-copied=${this.copied ? '' : nothing}
+      data-failed=${this.failed ? '' : nothing}
       tabindex=${this.focusable ? nothing : '-1'}
       ?disabled=${this.isDisabled}
       @click=${this.handleCopy}
     >
-      ${this.renderCopiedIcon()} ${this.renderCopyIcon()}
-      </button>`);
+      ${this.renderCopiedIcon()} ${this.renderFailedIcon()} ${this.renderCopyIcon()}
+      </button>`)}${this.renderLive()}`;
     }
     renderCopyIcon() {
-        return html `<slot ?hidden=${this.copied}>${HelixHeadlessCopyButton_1.icon(copy)}</slot>`;
+        return html `<slot ?hidden=${this.copied || this.failed}
+      >${HelixHeadlessCopyButton_1.icon(copy)}</slot
+    >`;
     }
     renderCopiedIcon() {
         return html `<slot name="copied" ?hidden=${!this.copied}
       >${HelixHeadlessCopyButton_1.icon(check)}</slot
     >`;
     }
+    renderFailedIcon() {
+        return html `<slot name="failed" ?hidden=${!this.failed}
+      >${HelixHeadlessCopyButton_1.icon(x)}</slot
+    >`;
+    }
     renderTooltip(control) {
         return html `<${this.tag('tooltip')} content=${this.says} persist
     exportparts="arrow: tooltip-arrow, arrow-bottom: tooltip-arrow-bottom,
@@ -80,6 +110,12 @@ let HelixHeadlessCopyButton = HelixHeadlessCopyButton_1 = class HelixHeadlessCop
 __decorate([
     property({ attribute: 'copied-label' })
 ], HelixHeadlessCopyButton.prototype, "copiedLabel", void 0);
+__decorate([
+    property({ attribute: 'error-label' })
+], HelixHeadlessCopyButton.prototype, "errorLabel", void 0);
+__decorate([
+    property()
+], HelixHeadlessCopyButton.prototype, "from", void 0);
 __decorate([
     property()
 ], HelixHeadlessCopyButton.prototype, "label", void 0);