@fusion.dev/helix-headless 0.146.0 → 0.147.0

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

@@ -4,20 +4,20 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { CopyController, capturePointer, colorName, customElement, drawIcon, fillTemplate, formatColor, HelixFormElement, HelixSampleEndEvent, HelixSampleStartEvent, hostAria, hueName, inlineStep, isRtl, MixinControllerValue, parseColor, rovingStop, splitValues, toCss, wordsConverter, } from '@fusion.dev/helix-core';
+import { CopyController, capturePointer, clamp, colorName, customElement, drawIcon, fillTemplate, formatColor, formatNumber, HelixFormElement, HelixSampleEndEvent, HelixSampleStartEvent, hostAria, hueName, isRtl, KeyboardNavigationController, localeOf, MixinControllerValue, MixinPickerFeedback, parseColor, rovingStop, splitValues, toCss, wordsConverter, } from '@fusion.dev/helix-core';
 import { eyedropper } from '@fusion.dev/helix-icons';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { live } from 'lit/directives/live.js';
 import { html } from 'lit/static-html.js';
 import { channelFields, writeChannel } from '../channels.js';
-import { swatchMove } from '../swatches.js';
+import { hueAt } from '../wheel.js';
 import '../../button/index.js';
 import '../../button-group/index.js';
 import '../../slider/index.js';
 const FORMATS = ['hex', 'rgb', 'hsl'];
 const START = { alpha: 100, brightness: 100, hue: 0, saturation: 100 };
-let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinControllerValue(HelixFormElement) {
+let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinPickerFeedback(MixinControllerValue(HelixFormElement)) {
     constructor() {
         super(...arguments);
         this.alpha = false;
@@ -29,11 +29,9 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinContr
         this.copiedLabel = 'Copied';
         this.copyLabel = 'Copy {value}';
         this.eyedropperLabel = 'Sample a color from the screen';
-        this.feedback = '';
         this.formatLabel = 'Syntax: {format}. Change it.';
         this.greenLabel = 'Green';
         this.hueLabel = 'Hue';
-        this.invalid = false;
         this.lightnessLabel = 'Lightness';
         this.noEyedropper = false;
         this.noFormat = false;
@@ -47,6 +45,7 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinContr
         this.swatches = '';
         this.toolsLabel = 'Color tools';
         this.valueLabel = 'Color';
+        this.wheel = false;
         this.sampling = false;
         this.owned = false;
         this.announcesInput = true;
@@ -96,19 +95,24 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinContr
             }
             this.settle();
         };
-        this.handleSwatchKeydown = (event) => {
-            const row = [
-                ...(this.renderRoot.querySelectorAll('[part="swatches"] [part="swatch"]') ?? []),
-            ];
-            const at = row.indexOf(event.target);
-            const next = swatchMove(event.key, inlineStep(this, event.key), at, row.length);
-            if (at < 0 || next === null) {
-                return;
-            }
-            event.preventDefault();
-            this.swatchAt = next;
-            row[next]?.focus();
-        };
+        this.swatchKeys = new KeyboardNavigationController(this, {
+            items: () => [
+                ...(this.renderRoot?.querySelectorAll('[part="swatches"] [part="swatch"]') ??
+                    []),
+            ].map((swatch, index) => ({
+                contains: (node) => swatch === node,
+                disabled: false,
+                focusItem: () => {
+                    this.swatchAt = index;
+                    swatch.focus();
+                },
+                select: () => { },
+                selected: false,
+            })),
+            origin: 'focus',
+            selects: () => false,
+            wrap: false,
+        });
         this.handleFormat = () => {
             if (this.readOnly) {
                 return;
@@ -166,20 +170,45 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinContr
             const down = Math.min(1, Math.max(0, (event.clientY - box.top) / box.height));
             this.move({ brightness: Math.round((1 - down) * 100), saturation: Math.round(across * 100) });
         };
+        this.handleWheelPointer = (event) => {
+            const wheel = event.currentTarget;
+            const grid = this.partNamed('grid');
+            if (this.isDisabled || (grid && event.composedPath().includes(grid))) {
+                return;
+            }
+            if (event.type === 'pointerup' || event.type === 'pointercancel') {
+                if (wheel.hasPointerCapture(event.pointerId)) {
+                    this.settle();
+                }
+                return;
+            }
+            if (event.type === 'pointerdown') {
+                capturePointer(wheel, event.pointerId);
+                this.partNamed('wheel-hue')?.focus();
+            }
+            else if (!wheel.hasPointerCapture(event.pointerId)) {
+                return;
+            }
+            event.preventDefault();
+            const box = wheel.getBoundingClientRect();
+            if (box.width > 0 && box.height > 0) {
+                this.move({ hue: hueAt(event.clientX, event.clientY, box) });
+            }
+        };
         this.handleAreaKeydown = (event) => {
             if (this.isDisabled || this.readOnly) {
                 return;
             }
             const color = this.color;
             const along = isRtl(this) ? -1 : 1;
-            const clamp = (at) => Math.min(100, Math.max(0, at));
+            const held = (at) => clamp(at, 0, 100);
             const moves = {
-                ArrowDown: { brightness: clamp(color.brightness - 1) },
-                ArrowLeft: { saturation: clamp(color.saturation - along) },
-                ArrowRight: { saturation: clamp(color.saturation + along) },
-                ArrowUp: { brightness: clamp(color.brightness + 1) },
-                PageDown: { brightness: clamp(color.brightness - 10) },
-                PageUp: { brightness: clamp(color.brightness + 10) },
+                ArrowDown: { brightness: held(color.brightness - 1) },
+                ArrowLeft: { saturation: held(color.saturation - along) },
+                ArrowRight: { saturation: held(color.saturation + along) },
+                ArrowUp: { brightness: held(color.brightness + 1) },
+                PageDown: { brightness: held(color.brightness - 10) },
+                PageUp: { brightness: held(color.brightness + 10) },
             };
             const next = moves[event.key];
             if (!next) {
@@ -239,9 +268,6 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinContr
         this.internals.setFormValue(this.value === '' ? null : this.value);
         this.reportRequired();
     }
-    get validityFeedback() {
-        return this.feedback;
-    }
     reportRequired() {
         if (this.required && this.value === '') {
             this.internals.setValidity({ valueMissing: true }, this.valueMissingMessage || 'Choose a color.', this.partNamed('grid') ?? undefined);
@@ -325,9 +351,10 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinContr
       part="channel"
       exportparts="control: channel-control, feedback: channel-feedback, field: channel-field,
         hint: channel-hint, label: channel-label, marker: channel-marker,
-        marker-label: channel-marker-label, markers: channel-markers, output: channel-output"
+        marker-label: channel-marker-label, markers: channel-markers, output: channel-output,
+        tooltip: channel-tooltip, tooltips: channel-tooltips"
       data-channel=${channel}
-      aria-invalid=${this.invalid ? 'true' : nothing}
+      aria-invalid=${this.marked ? 'true' : nothing}
       label=${label}
       max=${max}
       min="0"
@@ -365,7 +392,6 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinContr
     }
     willUpdate(changed) {
         super.willUpdate(changed);
-        this.internals.ariaInvalid = this.invalid ? 'true' : null;
         const outside = [...(this.internals.labels ?? [])];
         hostAria(this.internals, { labelledBy: outside, role: outside.length > 0 ? 'group' : '' });
         if (!this.hydrating) {
@@ -377,7 +403,7 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinContr
                 ${this.sampling && !this.noEyedropper
             ? html `<${this.tag('button')}
                         part="eyedropper"
-      exportparts="button: eyedropper-button, live: eyedropper-live, text: eyedropper-text"
+      exportparts="button: eyedropper-button, live: eyedropper-live, spinner: eyedropper-spinner, text: eyedropper-text"
                         label=${this.eyedropperLabel}
                         ?disabled=${this.isDisabled}
                         @click=${this.handleEyeDropper}
@@ -389,7 +415,7 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinContr
             ? nothing
             : html `<${this.tag('button')}
                         part="format"
-      exportparts="button: format-button, live: format-live, text: format-text"
+      exportparts="button: format-button, live: format-live, spinner: format-spinner, text: format-text"
                         label=${fillTemplate(this.formatLabel, { format: this.format ?? 'hex' })}
                         ?disabled=${this.isDisabled}
                         @click=${this.handleFormat}
@@ -411,7 +437,6 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinContr
       role="listbox"
       aria-label=${this.presetsLabel}
       aria-orientation="horizontal"
-      @keydown=${this.handleSwatchKeydown}
     >
       ${presets.map((preset, index) => {
             const parsed = parseColor(preset);
@@ -420,7 +445,7 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinContr
           type="button"
           role="option"
           tabindex=${index === stop ? '0' : '-1'}
-          aria-label=${parsed ? colorName(parsed, this.colorWords, this.lang) : preset}
+          aria-label=${parsed ? colorName(parsed, this.colorWords, localeOf(this)) : preset}
           aria-selected=${chosen[index] ? 'true' : 'false'}
           style="--color-picker-swatch: ${preset}"
           ?disabled=${this.isDisabled}
@@ -435,13 +460,13 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinContr
     render() {
         const color = this.color;
         const painted = toCss(color);
-        const named = colorName(color, this.colorWords, this.lang);
+        const named = colorName(color, this.colorWords, localeOf(this));
         const both = `${this.saturationLabel} ${color.saturation}%, ${this.brightnessLabel} ${color.brightness}%, ${named}`;
         const reversed = `${this.brightnessLabel} ${color.brightness}%, ${this.saturationLabel} ${color.saturation}%, ${named}`;
-        const hue = hueName({ alpha: 100, brightness: 100, hue: color.hue, saturation: 100 }, this.colorWords, this.lang);
+        const hue = hueName({ alpha: 100, brightness: 100, hue: color.hue, saturation: 100 }, this.colorWords, localeOf(this));
         const owner = this.getAttribute('aria-label')?.trim();
         const axisName = (channel) => (owner ? `${owner}, ${channel}` : channel);
-        return html `<div
+        const area = html `<div
         part="grid"
         style="--color-picker-hue: ${color.hue}; --color-picker-saturation: ${color.saturation}%; --color-picker-brightness: ${color.brightness}%"
         @pointerdown=${this.handleGridPointer}
@@ -458,7 +483,7 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinContr
           aria-label=${axisName(this.saturationLabel)}
           aria-describedby=${this.feedback === '' ? nothing : 'feedback'}
           aria-valuetext=${both}
-          aria-invalid=${this.invalid ? 'true' : nothing}
+          aria-invalid=${this.marked ? 'true' : nothing}
           .value=${String(color.saturation)}
           ?disabled=${this.isDisabled}
           @input=${(event) => this.takeArea('saturation', event)}
@@ -474,13 +499,41 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinContr
           aria-label=${axisName(this.brightnessLabel)}
           aria-describedby=${this.feedback === '' ? nothing : 'feedback'}
           aria-valuetext=${reversed}
-          aria-invalid=${this.invalid ? 'true' : nothing}
+          aria-invalid=${this.marked ? 'true' : nothing}
           .value=${String(color.brightness)}
           ?disabled=${this.isDisabled}
           @input=${(event) => this.takeArea('brightness', event)}
           @change=${() => this.settle()}
         />
-      </div>
+      </div>`;
+        return html `${this.wheel
+            ? html `<div
+            part="wheel"
+            style="--color-picker-hue: ${color.hue}"
+            @pointerdown=${this.handleWheelPointer}
+            @pointermove=${this.handleWheelPointer}
+            @pointerup=${this.handleWheelPointer}
+            @pointercancel=${this.handleWheelPointer}
+          >
+            ${''}
+            <input
+              part="wheel-hue"
+              type="range"
+              min="0"
+              max="360"
+              dir="ltr"
+              aria-label=${axisName(this.hueLabel)}
+              aria-describedby=${this.feedback === '' ? nothing : 'feedback'}
+              aria-valuetext=${`${color.hue}, ${hue}`}
+              aria-invalid=${this.marked ? 'true' : nothing}
+              .value=${String(color.hue)}
+              ?disabled=${this.isDisabled}
+              @input=${(event) => this.takeArea('hue', event)}
+              @change=${() => this.settle()}
+            />
+            ${area}
+          </div>`
+            : area}
 
       <div part="controls" style="--color-picker-hue: ${color.hue}; --color-picker-swatch: ${painted}">
         <button
@@ -494,9 +547,9 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinContr
           @click=${() => this.copier.copy(this.value)}
         ></button>
         <div part="channels">
-          ${this.renderChannel('hue', this.hueLabel, 360, color.hue, `{value}, ${hue}`)}
+          ${this.wheel ? nothing : this.renderChannel('hue', this.hueLabel, 360, color.hue, `{value}, ${hue}`)}
           ${this.alpha
-            ? this.renderChannel('alpha', this.opacityLabel, 100, color.alpha, new Intl.NumberFormat(this.lang || undefined, { style: 'percent' }).format(color.alpha / 100))
+            ? this.renderChannel('alpha', this.opacityLabel, 100, color.alpha, formatNumber(color.alpha / 100, localeOf(this), { style: 'percent' }))
             : nothing}
         </div>
       </div>
@@ -514,7 +567,7 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinContr
                 type="text"
                 aria-label=${this.valueLabel}
                 aria-describedby=${this.feedback === '' ? nothing : 'feedback'}
-                aria-invalid=${this.invalid ? 'true' : nothing}
+                aria-invalid=${this.marked ? 'true' : nothing}
                 autocomplete=${this.autocomplete || nothing}
                 spellcheck="false"
                 .value=${this.value}
@@ -530,7 +583,7 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinContr
       </div>
 
       ${this.presets.length === 0 ? nothing : this.renderSwatches(painted)}
-      ${this.feedback === '' ? nothing : html `<p part="feedback" id="feedback">${this.feedback}</p>`}`;
+      ${this.renderPickerFeedback()}`;
     }
 };
 __decorate([
@@ -563,9 +616,6 @@ __decorate([
 __decorate([
     property({ attribute: 'eyedropper-label' })
 ], HelixHeadlessColorPicker.prototype, "eyedropperLabel", void 0);
-__decorate([
-    property()
-], HelixHeadlessColorPicker.prototype, "feedback", void 0);
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessColorPicker.prototype, "format", void 0);
@@ -578,9 +628,6 @@ __decorate([
 __decorate([
     property({ attribute: 'hue-label' })
 ], HelixHeadlessColorPicker.prototype, "hueLabel", void 0);
-__decorate([
-    property({ reflect: true, type: Boolean })
-], HelixHeadlessColorPicker.prototype, "invalid", void 0);
 __decorate([
     property({ attribute: 'lightness-label' })
 ], HelixHeadlessColorPicker.prototype, "lightnessLabel", void 0);
@@ -623,6 +670,9 @@ __decorate([
 __decorate([
     property({ attribute: 'value-missing-message' })
 ], HelixHeadlessColorPicker.prototype, "valueMissingMessage", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HelixHeadlessColorPicker.prototype, "wheel", void 0);
 __decorate([
     state()
 ], HelixHeadlessColorPicker.prototype, "moved", void 0);

package/dist/color-picker/wheel.d.ts

@@ -0,0 +1,17 @@
+/** A box on the screen, as `getBoundingClientRect` gives one. */
+export interface WheelBox {
+    height: number;
+    left: number;
+    top: number;
+    width: number;
+}
+/**
+ * The hue at a point on a hue wheel: degrees clockwise from the top, 0 to
+ * 359, the way React Aria's ColorWheel and every paint program lay hue out.
+ *
+ * Measured from the box's center, so a press anywhere in the wheel answers,
+ * not only one on the ring: the ring is the target a reader aims at, and a
+ * press a little inside it still means the hue in that direction. Clockwise
+ * whatever the writing direction, since a circle has no line of text.
+ */
+export declare const hueAt: (x: number, y: number, box: WheelBox) => number;

package/dist/color-picker/wheel.js

@@ -0,0 +1,6 @@
+export const hueAt = (x, y, box) => {
+    const across = x - (box.left + box.width / 2);
+    const down = y - (box.top + box.height / 2);
+    const degrees = Math.round((Math.atan2(across, -down) * 180) / Math.PI);
+    return (degrees + 360) % 360;
+};

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

@@ -94,7 +94,9 @@ 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 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 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 {
@@ -334,6 +336,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.
      *

package/dist/combobox/root/combobox-root.js

@@ -245,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 === '') {
@@ -353,7 +362,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) : '';
     }
@@ -434,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) {

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

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 };
-};