@fusion.dev/helix-headless 0.146.0 → 0.148.0

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

@@ -1,4 +1,4 @@
-import { HelixElement } from '@fusion.dev/helix-core';
+import { ChildrenController, HelixElement } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
 import { type HelixHeadlessChatMessage } from '../message/chat-message.js';
 /** One turn handed over as data, which is what `turns` holds. */
@@ -67,7 +67,11 @@ declare const HelixHeadlessChat_base: (new (...args: any[]) => import("@fusion.d
  * the forwarded `message-*` parts. A turn by `me` also gets each part with
  * `-mine` added, and the turn's state adds `message-meta-failed`,
  * `message-content-sending`, and `message-content-streaming`. To style each
- * participant differently, pass the turns as children.
+ * participant differently, give `author-styles` the declarations for each
+ * author, such as `{"ada": "--chat-message-background-color: …"}`: the message
+ * drawn for each of their turns takes them as its `style`, so the message's
+ * custom properties change for that author alone. Turns passed as children are
+ * styled by their `author`, such as `helix-chat-message[author="ada"]`.
  *
  * @since 0.1.0
  * @status stable
@@ -136,6 +140,16 @@ export declare class HelixHeadlessChat extends HelixHeadlessChat_base {
     static shadowRootOptions: ShadowRootInit;
     /** How tall a turn is assumed to be before it has been drawn, in pixels. */
     static readonly ESTIMATE = 72;
+    /**
+     * Declarations for the turns from `turns` by each author, keyed by `author`,
+     * as JSON in the attribute: `{"ada": "--chat-message-background-color: …"}`.
+     *
+     * The message drawn for each turn by that author takes them as its `style`,
+     * so the custom properties a message reads, its fill, text color, radius and
+     * padding, change for that author alone. A turn by an author with no entry
+     * takes none, and looks as it did. JSON that does not parse is no entries.
+     */
+    authorStyles: Record<string, string>;
     /**
      * Whether the transcript opens pinned to the bottom, when `pinned` is not
      * set.
@@ -239,8 +253,18 @@ export declare class HelixHeadlessChat extends HelixHeadlessChat_base {
      * a turn is told again only when they change.
      */
     private words;
-    /** Watches for turns arriving, since a manual slot hears nothing about them. */
-    private watcher;
+    /**
+     * Watches for turns arriving, since a manual slot hears nothing about them.
+     *
+     * **A turn that arrives after first paint reaches nothing on its own.**
+     * Slots are assigned by hand here, so appending a child assigns it to
+     * nothing, fires no `slotchange`, and schedules no render: the transcript
+     * went on showing "Nothing to show" over six children it already had, and
+     * the one thing a conversation does is grow. Measured with
+     * `assignedElements()` at zero against `children` at nine. Children only,
+     * never a turn's own text, which a streaming turn rewrites every frame.
+     */
+    protected readonly childWatch: ChildrenController;
     /** Watches the turns' own `state`, which is when one of them settles. */
     private settling;
     /** Watches the turns and the log for size, which scrolling does not report. */

package/dist/chat/root/chat-root.js

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 var HelixHeadlessChat_1;
-import { customElement, fillTemplate, HelixBeforePinEvent, HelixElement, HelixHistoryEvent, HelixPinEvent, hostAria, MixinCollection, onUnlessFalse, requestChange, VirtualizeController, whenHydrated, } from '@fusion.dev/helix-core';
+import { ChildrenController, customElement, fillTemplate, HelixBeforePinEvent, HelixElement, HelixHistoryEvent, HelixPinEvent, hostAria, MixinCollection, onUnlessFalse, requestChange, VirtualizeController, whenHydrated, wordsConverter, } from '@fusion.dev/helix-core';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { keyed } from 'lit/directives/keyed.js';
@@ -24,7 +24,11 @@ const SECOND_NAMES = {
         streaming: 'content: message-content-streaming',
     },
 };
-const secondNames = (table, key) => key !== undefined && Object.hasOwn(table, key) ? `, ${table[key]}` : '';
+const ownEntry = (table, key) => (key !== undefined && Object.hasOwn(table, key) ? table[key] : undefined);
+const secondNames = (table, key) => {
+    const names = ownEntry(table, key);
+    return names === undefined ? '' : `, ${names}`;
+};
 const settled = (turn) => turn.state !== 'sending' && turn.state !== 'streaming';
 const newsworthy = (turn) => turn.author !== 'me' || turn.state === 'failed';
 const spoken = (message) => [...message.childNodes]
@@ -36,6 +40,7 @@ const spoken = (message) => [...message.childNodes]
 let HelixHeadlessChat = class HelixHeadlessChat extends MixinCollection(HelixElement) {
     constructor() {
         super(...arguments);
+        this.authorStyles = {};
         this.defaultPinned = true;
         this.history = '';
         this.historyText = 'Loading earlier messages';
@@ -51,7 +56,7 @@ let HelixHeadlessChat = class HelixHeadlessChat extends MixinCollection(HelixEle
         this.announcement = '';
         this.said = 0;
         this.words = TURN_WORDS;
-        this.watcher = undefined;
+        this.childWatch = new ChildrenController(this, () => this.handleSlotChange());
         this.settling = undefined;
         this.grower = undefined;
         this.watched = [];
@@ -344,8 +349,6 @@ let HelixHeadlessChat = class HelixHeadlessChat extends MixinCollection(HelixEle
     }
     connectedCallback() {
         super.connectedCallback();
-        this.watcher = new MutationObserver(this.handleSlotChange);
-        this.watcher.observe(this, { childList: true });
         this.settling = new MutationObserver(this.handleSettle);
         this.settling.observe(this, { attributeFilter: ['state'], subtree: true });
         this.opening = true;
@@ -358,8 +361,6 @@ let HelixHeadlessChat = class HelixHeadlessChat extends MixinCollection(HelixEle
     }
     disconnectedCallback() {
         super.disconnectedCallback();
-        this.watcher?.disconnect();
-        this.watcher = undefined;
         this.settling?.disconnect();
         this.settling = undefined;
         this.grower?.disconnect();
@@ -434,6 +435,7 @@ let HelixHeadlessChat = class HelixHeadlessChat extends MixinCollection(HelixEle
               author=${turn.author ?? nothing}
               author-label=${turn.authorLabel ?? nothing}
               at=${turn.at ?? nothing}
+              style=${ownEntry(this.authorStyles, turn.author) ?? nothing}
               .turnWords=${this.words}
               state=${turn.state ?? nothing}
             >${turn.text}</${message}>
@@ -482,6 +484,9 @@ let HelixHeadlessChat = class HelixHeadlessChat extends MixinCollection(HelixEle
       </div>`;
     }
 };
+__decorate([
+    property({ attribute: 'author-styles', converter: wordsConverter })
+], HelixHeadlessChat.prototype, "authorStyles", void 0);
 __decorate([
     property({ attribute: 'default-pinned', converter: onUnlessFalse })
 ], HelixHeadlessChat.prototype, "defaultPinned", void 0);

package/dist/checkbox/root/checkbox-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, HelixFormElement, HostClickController, MixinControllerChecked, MixinField, } from '@fusion.dev/helix-core';
+import { AriaForwardController, customElement, HelixFormElement, HostClickController, MixinControllerChecked, MixinField, slotFilled, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 let HelixHeadlessCheckbox = class HelixHeadlessCheckbox extends MixinControllerChecked(MixinField(HelixFormElement)) {
@@ -34,7 +34,7 @@ let HelixHeadlessCheckbox = class HelixHeadlessCheckbox extends MixinControllerC
         };
         this.handleMarkChange = (event) => {
             const slot = event.target;
-            const filled = slot.assignedNodes().length > 0;
+            const filled = slotFilled(slot);
             if (slot.name === 'dash') {
                 this.toggleState('has-dash', filled);
             }
@@ -74,11 +74,9 @@ let HelixHeadlessCheckbox = class HelixHeadlessCheckbox extends MixinControllerC
     }
     syncLabelPresence() {
         const slot = this.renderRoot.querySelector('[part="label"] slot');
-        const meaningful = (node) => node.textContent?.trim() !== '' || node.nodeType === Node.ELEMENT_NODE;
-        const filled = (slot?.assignedNodes({ flatten: true }) ?? []).some(meaningful);
-        const hidden = this.label === '' &&
-            Boolean(this.getAttribute('aria-label')) &&
-            !(slot?.assignedNodes() ?? []).some(meaningful);
+        const filled = slotFilled(slot);
+        const written = (slot?.assignedNodes() ?? []).some((node) => node.nodeType === Node.ELEMENT_NODE || node.textContent?.trim() !== '');
+        const hidden = this.label === '' && Boolean(this.getAttribute('aria-label')) && !written;
         this.partNamed('label')?.toggleAttribute('data-hidden', hidden);
         this.toggleState('has-label', filled && !hidden);
         this.partNamed('label')?.toggleAttribute('hidden', !filled);

package/dist/checkbox-group/root/checkbox-group-root.d.ts

@@ -96,8 +96,21 @@ export declare class HelixHeadlessCheckboxGroup extends HelixHeadlessCheckboxGro
      */
     get values(): string[];
     set values(next: string[]);
+    /**
+     * Writes the set the boxes are given at the next update: by value, or, for
+     * a set a press decided, by box.
+     */
+    private choose;
     /** The values last written, which the boxes are given at the next update. */
     private declared;
+    /**
+     * The boxes to check at the next update, where a press on a box or on the
+     * select-all box decided the set.
+     *
+     * **By box, since boxes can share a value.** Boxes written with no `value`
+     * all submit `on`, and pushed by value, a press on one checked every one.
+     */
+    private checking;
     /**
      * Whether `declared` has yet to reach the boxes.
      *

package/dist/checkbox-group/root/checkbox-group-root.js

@@ -18,6 +18,7 @@ let HelixHeadlessCheckboxGroup = HelixHeadlessCheckboxGroup_1 = class HelixHeadl
         this.selectAll = false;
         this.selectAllLabel = 'Select all';
         this.declared = [];
+        this.checking = undefined;
         this.pending = false;
         this.watched = new Set();
         this.member = {
@@ -41,14 +42,13 @@ let HelixHeadlessCheckboxGroup = HelixHeadlessCheckboxGroup_1 = class HelixHeadl
                 return;
             }
             const wanted = event.detail.checked;
-            const next = this.boxes
-                .filter((box) => (box === changed ? wanted : box.checked))
-                .map((box) => box.value);
+            const checking = this.boxes.filter((box) => (box === changed ? wanted : box.checked));
+            const next = checking.map((box) => box.value);
             if (!this.dispatchEvent(new HelixBeforeChangeEvent({ value: next.join(',') }))) {
                 event.preventDefault();
                 return;
             }
-            this.values = next;
+            this.choose(next, checking);
             this.announceInput();
             this.announceChange();
         };
@@ -60,11 +60,14 @@ let HelixHeadlessCheckboxGroup = HelixHeadlessCheckboxGroup_1 = class HelixHeadl
         this.handleSelectAll = (event) => {
             event.preventDefault();
             event.stopPropagation();
-            const next = selectAllPress(this.setBoxes());
+            const boxes = this.boxes;
+            const pressed = selectAllPress(this.setBoxes());
+            const checking = boxes.filter((_, at) => pressed[at]);
+            const next = checking.map((box) => box.value);
             if (!this.dispatchEvent(new HelixBeforeChangeEvent({ value: next.join(',') }))) {
                 return;
             }
-            this.values = next;
+            this.choose(next, checking);
             this.announceInput();
             this.announceChange();
         };
@@ -85,8 +88,12 @@ let HelixHeadlessCheckboxGroup = HelixHeadlessCheckboxGroup_1 = class HelixHeadl
             : boxes.filter((box) => box.checked).map((box) => box.value);
     }
     set values(next) {
+        this.choose(next);
+    }
+    choose(next, boxes) {
         const previous = this.value;
         this.declared = [...next];
+        this.checking = boxes ? new Set(boxes) : undefined;
         this.pending = true;
         this.requestUpdate('value', previous);
     }
@@ -124,8 +131,10 @@ let HelixHeadlessCheckboxGroup = HelixHeadlessCheckboxGroup_1 = class HelixHeadl
         }
         this.pending = false;
         const wanted = new Set(this.declared);
+        const checking = this.checking;
+        this.checking = undefined;
         for (const box of boxes) {
-            box.checked = wanted.has(box.value);
+            box.checked = checking ? checking.has(box) : wanted.has(box.value);
         }
     }
     connectedCallback() {

package/dist/checkbox-group/select-all.d.ts

@@ -20,8 +20,13 @@ export declare const selectAllState: (boxes: readonly SetBox[]) => {
     indeterminate: boolean;
 };
 /**
- * The values a press on the select-all box leaves, in the set's order: every
- * enabled box checked, or every enabled box clear once all of them are
- * checked. A disabled box keeps its state either way.
+ * What a press on the select-all box does to each box, in the set's order:
+ * every enabled box checked, or every one cleared once all of them are, with a
+ * disabled box keeping its state. A set with no enabled box stays as it is.
+ *
+ * **By box and not by value**, so boxes that share a value, such as boxes
+ * written with none, which all submit `on`, are each moved on their own: by
+ * value, one checked box made every box with its value count as checked, and
+ * the press cleared the set where it should have filled it.
  */
-export declare const selectAllPress: (boxes: readonly SetBox[]) => string[];
+export declare const selectAllPress: (boxes: readonly SetBox[]) => boolean[];

package/dist/checkbox-group/select-all.js

@@ -8,5 +8,5 @@ export const selectAllState = (boxes) => {
 export const selectAllPress = (boxes) => {
     const enabled = boxes.filter((box) => !box.disabled);
     const every = enabled.length > 0 && enabled.every((box) => box.checked);
-    return boxes.filter((box) => (box.disabled ? box.checked : !every)).map((box) => box.value);
+    return boxes.map((box) => (box.disabled ? box.checked : !every));
 };

package/dist/code-block/root/code-block-root.d.ts

@@ -17,14 +17,17 @@ import '../../copy-button/index.js';
  * Set `line-numbers` to number the lines in a gutter beside the code, hidden
  * from the accessibility tree and left out of a copy. Set `highlight` to a
  * function that turns the code into highlighted markup, such as one wrapping
- * Shiki or Prism, and the block draws what it returns; the code stays in the
- * slot, so the copy button and the page's own text are the code as written.
+ * Shiki or Prism, and the block draws what it returns; it is handed the
+ * block's `language`, so one function serves every block. The code stays in
+ * the slot, so the copy button and the page's own text are the code as
+ * written.
  *
  * Set `expandable` on a block whose height is capped, such as by
  * `--code-block-max-block-size`, and a button under it shows every line and
  * then fewer again, as a docs site's long example does. The button is drawn
- * only while the cap hides something, says whether the block is expanded, and
- * the block carries `:state(expanded)` while it is.
+ * only while the cap hides something, says whether the block is expanded with
+ * `aria-expanded`, names the block it opens with `aria-controls`, and the block
+ * carries `:state(expanded)` while it is.
  *
  * Set `diff` to show a change. Put a unified diff, the output of `git diff` or
  * `diff -u`, in the same slot, and the block draws the lines it added and
@@ -56,6 +59,7 @@ import '../../copy-button/index.js';
  * @csspart copy-button - The inner button.
  * @csspart copy-live - The copy button's live region, which speaks while the button is pending.
  * @csspart copy-mark - The clipboard icon, and the check mark that replaces it after a copy.
+ * @csspart copy-spinner - The ring the copy button turns while it is pending.
  * @csspart copy-text - The words on that button, trimmed to their capitals and baseline.
  * @csspart copy-tooltip - The copy button's tooltip.
  * @csspart copy-tooltip-arrow - The tooltip's arrow, which points at the copy button.
@@ -74,7 +78,7 @@ import '../../copy-button/index.js';
  * @csspart gutter - The line numbers beside the code, shown when `line-numbers` is set.
  * @csspart header - The bar that holds the name and the copy button, shown when there is a name.
  * @csspart hunk - In a diff, a `@@` line saying where the lines under it are.
- * @csspart label - The file name or language, where one is given.
+ * @csspart label - The block's name: its `label`, or its `language` where it has no label.
  * @csspart marker - In a diff, the `+`, `-`, or space that starts a line.
  * @csspart new - In a split diff, the new version's `<pre>`.
  * @csspart number - In a diff, a line number.
@@ -126,24 +130,43 @@ export declare class HelixHeadlessCodeBlock extends HelixElement {
      * Turns the code into highlighted markup, which the block draws in place of
      * the plain text.
      *
-     * Called with the code as written and returning HTML, such as the output of
-     * Shiki's `codeToHtml` or Prism's `highlight`. **The markup is drawn as
-     * given**, so it has to escape the code it was handed, which those
-     * highlighters do. A `<pre>` and `<code>` around the whole of it, which
-     * Shiki writes, are taken off, so the lines sit level with the gutter's
-     * numbers and the block keeps one tab stop. Bind the language in the function you pass. The code
-     * stays in the slot, so the copy button copies it as written and a reader
-     * without the script still has it. Not called on a server, which has no code
-     * to read, nor for a diff.
+     * Called with the code as written and the block's `language`, and returning
+     * HTML, such as the output of Shiki's `codeToHtml` or Prism's `highlight`.
+     * One function serves every block on a page, each block saying its own
+     * language:
+     *
+     * ```js
+     * for (const block of document.querySelectorAll('helix-code-block')) {
+     *   block.highlight = (code, lang) => codeToHtml(code, { lang, theme: 'github-light' })
+     * }
+     * ```
+     *
+     * **The markup is drawn as given**, so it has to escape the code it was
+     * handed, which those highlighters do. A `<pre>` and `<code>` around the
+     * whole of it, which Shiki writes, are taken off, so the lines sit level
+     * with the gutter's numbers and the block keeps one tab stop. The code stays
+     * in the slot, so the copy button copies it as written and a reader without
+     * the script still has it. Not called on a server, which has no code to
+     * read, nor for a diff.
      */
-    highlight?: (code: string) => string;
+    highlight?: (code: string, language: string) => string;
     /**
-     * The block's name, usually a file name or a language.
+     * The block's name, usually a file name, drawn in the header.
      *
-     * In a diff, each file is named from the patch, and this names a patch that
-     * carries no name of its own.
+     * Absent, the block is named by `language` where there is one. In a diff,
+     * each file is named from the patch, and this names a patch that carries no
+     * name of its own.
      */
     label: string;
+    /**
+     * The language the code is written in, such as `ts` or `css`, handed to
+     * `highlight` as its second argument.
+     *
+     * A block with no `label` is named by it, in the header and on the copy
+     * button, as a docs site names a snippet by its language. Absent hands
+     * `highlight` an empty string and names nothing.
+     */
+    language: string;
     /**
      * Whether the lines are numbered in a gutter beside the code.
      *

package/dist/code-block/root/code-block-root.js

@@ -23,6 +23,7 @@ let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
         this.expandable = false;
         this.expandLabel = 'Show all lines';
         this.label = '';
+        this.language = '';
         this.lineNumbers = false;
         this.noCopy = false;
         this.parsed = { files: [], text: '' };
@@ -88,7 +89,16 @@ let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
             return this.renderDiff(files);
         }
         const text = this.text;
-        const highlighted = this.highlight && text !== '' ? highlightedLines(this.highlight(text)) : undefined;
+        let highlighted;
+        try {
+            highlighted =
+                this.highlight && text !== ''
+                    ? highlightedLines(this.highlight(text, this.language))
+                    : undefined;
+        }
+        catch (error) {
+            globalThis.reportError?.(error);
+        }
         const code = highlighted === undefined
             ? html `<code part="code"><slot @slotchange=${() => this.requestUpdate()}></slot></code>`
             : html `<code part="code">${unsafeHTML(highlighted)}</code><slot
@@ -99,10 +109,11 @@ let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
         const gutter = this.lineNumbers
             ? html `<span part="gutter" aria-hidden="true">${lines === 0 ? nothing : gutterNumbers(lines)}</span>`
             : nothing;
-        return html `${this.renderHeader(this.label)}
+        const name = this.label || this.language;
+        return html `${this.renderHeader(name)}
       <div part="frame">
-        <pre part="block">${gutter}${code}</pre>
-        ${this.label ? nothing : this.renderCopy()}
+        <pre id="block" part="block">${gutter}${code}</pre>
+        ${name ? nothing : this.renderCopy()}
       </div>${this.renderExpand()}`;
     }
     renderExpand() {
@@ -110,6 +121,7 @@ let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
             return nothing;
         }
         return html `<button
+      aria-controls="block"
       aria-expanded=${this.expanded ? 'true' : 'false'}
       part="expand"
       type="button"
@@ -129,10 +141,10 @@ let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
     renderCopy(value, name) {
         return this.noCopy ? nothing : this.renderCopyButton(value, name);
     }
-    renderCopyButton(value = this.text, name = this.label) {
+    renderCopyButton(value = this.text, name = this.label || this.language) {
         return html `<${this.tag('copy-button')}
       part="copy"
-      exportparts="button: copy-button, text: copy-text, mark: copy-mark, live: copy-live, tooltip: copy-tooltip,
+      exportparts="button: copy-button, text: copy-text, mark: copy-mark, live: copy-live, spinner: copy-spinner, tooltip: copy-tooltip,
         tooltip-arrow: copy-tooltip-arrow, tooltip-arrow-bottom: copy-tooltip-arrow-bottom,
         tooltip-arrow-left: copy-tooltip-arrow-left, tooltip-arrow-right: copy-tooltip-arrow-right,
         tooltip-arrow-top: copy-tooltip-arrow-top, tooltip-bottom: copy-tooltip-bottom,
@@ -214,6 +226,9 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessCodeBlock.prototype, "label", void 0);
+__decorate([
+    property()
+], HelixHeadlessCodeBlock.prototype, "language", void 0);
 __decorate([
     property({ attribute: 'line-numbers', reflect: true, type: Boolean })
 ], HelixHeadlessCodeBlock.prototype, "lineNumbers", void 0);

package/dist/color-input/root/color-input-root.d.ts

@@ -74,11 +74,14 @@ declare const HelixHeadlessColorInput_base: (new (...args: any[]) => import("@fu
  * @csspart picker-channel-marker-label - The value a mark stands at, when `marker-labels` is set.
  * @csspart picker-channel-markers - The row of marks along the track.
  * @csspart picker-channel-output - The current value, shown beside the track.
+ * @csspart picker-channel-tooltip - A ramp's value in a bubble, where a ramp shows one.
+ * @csspart picker-channel-tooltips - The layer over a ramp's track that holds its bubble.
  * @csspart picker-channels - The channel sliders beside the sample.
  * @csspart picker-controls - The row under the square.
  * @csspart picker-eyedropper - The control that samples a color from the screen.
  * @csspart picker-eyedropper-button - The button inside `picker-eyedropper`.
  * @csspart picker-eyedropper-live - The live region of the button inside `picker-eyedropper`, which says its pending label.
+ * @csspart picker-eyedropper-spinner - The ring the eyedropper button turns while it is pending.
  * @csspart picker-eyedropper-text - The words on the button inside `picker-eyedropper`.
  * @csspart picker-feedback - The field's message inside the open panel, under the picker, where the panel covers the one under the field.
  * @csspart picker-field - One channel's number field with its label, in `channel-fields`.
@@ -89,6 +92,7 @@ declare const HelixHeadlessColorInput_base: (new (...args: any[]) => import("@fu
  * @csspart picker-format - The control that changes the syntax the value is written in.
  * @csspart picker-format-button - The button inside `picker-format`.
  * @csspart picker-format-live - The live region of the button inside `picker-format`, which says its pending label.
+ * @csspart picker-format-spinner - The ring the syntax button turns while it is pending.
  * @csspart picker-format-text - The words on the button inside `picker-format`.
  * @csspart picker-grid - The saturation and brightness square.
  * @csspart picker-grid-brightness - The range input for the square's vertical axis.
@@ -99,6 +103,8 @@ declare const HelixHeadlessColorInput_base: (new (...args: any[]) => import("@fu
  * @csspart picker-swatch - One preset.
  * @csspart picker-swatches - The row of presets.
  * @csspart picker-value - The text field that holds the color. It accepts a typed or pasted color.
+ * @csspart picker-wheel - The hue ring round the square, with `wheel`.
+ * @csspart picker-wheel-hue - The range input behind the hue ring.
  * @csspart preview - The chip showing the color, inside the trigger.
  * @csspart surface - The floating panel.
  * @csspart trigger - The control that opens the panel.
@@ -196,6 +202,11 @@ export declare class HelixHeadlessColorInput extends HelixHeadlessColorInput_bas
      * where the color is the answer rather than a setting.
      */
     variant?: 'swatch';
+    /**
+     * Draws the panel's hue as a wheel around the square, in place of the hue
+     * ramp. See Color Picker's `wheel`.
+     */
+    wheel: boolean;
     /**
      * The last value that was a color.
      *

package/dist/color-input/root/color-input-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, colorName, customElement, HelixFormElement, MixinControllerOpen, MixinControllerValue, MixinField, MixinPickerField, parseColor, toCss, wordsConverter, } from '@fusion.dev/helix-core';
+import { AriaForwardController, colorName, customElement, HelixFormElement, localeOf, MixinControllerOpen, MixinControllerValue, MixinField, MixinPickerField, parseColor, toCss, wordsConverter, } from '@fusion.dev/helix-core';
 import { nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { html } from 'lit/static-html.js';
@@ -25,6 +25,7 @@ let HelixHeadlessColorInput = class HelixHeadlessColorInput extends MixinPickerF
         this.announcesInput = true;
         this.swatches = '';
         this.triggerLabel = 'Choose a color';
+        this.wheel = false;
         this.settled = '';
         this.handleInput = (event) => {
             event.stopPropagation();
@@ -77,7 +78,7 @@ let HelixHeadlessColorInput = class HelixHeadlessColorInput extends MixinPickerF
         if (!parsed) {
             return this.value || this.triggerLabel;
         }
-        return `${colorName(parsed, this.colorWords, this.lang)} ${this.value}`;
+        return `${colorName(parsed, this.colorWords, localeOf(this))} ${this.value}`;
     }
     get painted() {
         const parsed = parseColor(this.value);
@@ -115,17 +116,20 @@ let HelixHeadlessColorInput = class HelixHeadlessColorInput extends MixinPickerF
         channel-hint: picker-channel-hint, channel-label: picker-channel-label,
         channel-marker: picker-channel-marker, channel-marker-label: picker-channel-marker-label,
         channel-markers: picker-channel-markers, channel-output: picker-channel-output,
+        channel-tooltip: picker-channel-tooltip, channel-tooltips: picker-channel-tooltips,
         channels: picker-channels, controls: picker-controls, eyedropper: picker-eyedropper,
-        eyedropper-button: picker-eyedropper-button, eyedropper-live: picker-eyedropper-live, eyedropper-text: picker-eyedropper-text,
+        eyedropper-button: picker-eyedropper-button, eyedropper-live: picker-eyedropper-live, eyedropper-spinner: picker-eyedropper-spinner, eyedropper-text: picker-eyedropper-text,
         feedback: picker-feedback, field: picker-field, field-input: picker-field-input, field-label: picker-field-label,
         fields: picker-fields, footer: picker-footer, format: picker-format,
-        format-button: picker-format-button, format-live: picker-format-live, format-text: picker-format-text, grid: picker-grid,
+        format-button: picker-format-button, format-live: picker-format-live, format-spinner: picker-format-spinner, format-text: picker-format-text, grid: picker-grid,
         grid-brightness: picker-grid-brightness, grid-handle: picker-grid-handle,
         grid-saturation: picker-grid-saturation, icon: picker-icon, sample: picker-sample,
-        swatch: picker-swatch, swatches: picker-swatches, value: picker-value"
+        swatch: picker-swatch, swatches: picker-swatches, value: picker-value,
+        wheel: picker-wheel, wheel-hue: picker-wheel-hue"
       ?invalid=${this.resolvedFeedback !== ''}
       .feedback=${this.resolvedFeedback}
       ?alpha=${this.alpha}
+      ?wheel=${this.wheel}
       ?channel-fields=${this.channelFields}
       ?no-format=${this.noFormat}
       ?no-value=${this.variant !== 'swatch'}
@@ -250,6 +254,9 @@ __decorate([
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessColorInput.prototype, "variant", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HelixHeadlessColorInput.prototype, "wheel", void 0);
 HelixHeadlessColorInput = __decorate([
     customElement('helix-headless-color-input')
 ], HelixHeadlessColorInput);

package/dist/color-picker/channels.js

@@ -1,5 +1,4 @@
-import { toHsl, toRgb } from '@fusion.dev/helix-core';
-const clamp = (value, low, high) => Math.min(high, Math.max(low, value));
+import { clamp, toHsl, toRgb } from '@fusion.dev/helix-core';
 const percent = (token) => {
     if (token === undefined) {
         return 100;