@fusion.dev/helix-headless 0.145.0 → 0.147.0

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

@@ -0,0 +1,21 @@
+/** What the select-all helper reads from one box in the set. */
+export interface SetBox {
+    /** Whether the box is checked. */
+    readonly checked: boolean;
+    /** Whether the box refuses a press, so select-all leaves it as it is. */
+    readonly disabled: boolean;
+    /** What the box submits when checked. */
+    readonly value: string;
+}
+/**
+ * What the select-all box shows: checked while every enabled box is checked,
+ * mixed while only some are, and clear while none is.
+ *
+ * A disabled box counts for nothing, because a press leaves it as it is. A
+ * set whose every box is disabled reads every box, so the select-all box still
+ * shows what the set holds.
+ */
+export declare const selectAllState: (boxes: readonly SetBox[]) => {
+    checked: boolean;
+    indeterminate: boolean;
+};

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

@@ -0,0 +1,7 @@
+export const selectAllState = (boxes) => {
+    const enabled = boxes.filter((box) => !box.disabled);
+    const counted = enabled.length > 0 ? enabled : boxes;
+    const ticked = counted.filter((box) => box.checked).length;
+    const checked = counted.length > 0 && ticked === counted.length;
+    return { checked, indeterminate: ticked > 0 && !checked };
+};

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

@@ -0,0 +1,15 @@
+/**
+ * The highlighted lines out of what a highlighter returned, without the
+ * `<pre>` and `<code>` around them that some highlighters write.
+ *
+ * Shiki's `codeToHtml` returns a whole block, `<pre class="shiki" tabindex="0"
+ * style="…"><code>…</code></pre>`. Drawn as given inside the block's own
+ * `<pre>`, that second `<pre>` sat 13px below the gutter's first number, and
+ * its `tabindex` was a second tab stop inside the block's scroller. Prism's
+ * `highlight` and highlight.js return the lines alone, which pass through
+ * unchanged.
+ *
+ * Only a wrapper around the whole markup is taken off, and only one. The block draws its own
+ * box and colors, so the wrapper's `style` and `class` go with it.
+ */
+export declare const highlightedLines: (markup: string) => string;

package/dist/code-block/highlight.js

@@ -0,0 +1,4 @@
+export const highlightedLines = (markup) => {
+    const lines = /^\s*<pre\b[^>]*>\s*<code\b[^>]*>([\s\S]*)<\/code>\s*<\/pre>\s*$/i.exec(markup)?.[1];
+    return lines === undefined || /<\/?pre\b/i.test(lines) ? markup : lines;
+};

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

@@ -17,8 +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 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
@@ -50,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.
@@ -61,6 +71,7 @@ import '../../copy-button/index.js';
  * @csspart copy-tooltip-left - The tooltip while it is left of the copy button. Applied with `copy-tooltip`.
  * @csspart copy-tooltip-right - The tooltip while it is right of the copy button. Applied with `copy-tooltip`.
  * @csspart copy-tooltip-top - The tooltip while it is above the copy button. Applied with `copy-tooltip`.
+ * @csspart expand - The button under a capped block that shows every line, and fewer again. Drawn when `expandable` is set and the cap hides something.
  * @csspart file - In a diff, one file's header and block.
  * @csspart filler - In a split diff, the empty row opposite a line the other side does not have.
  * @csspart frame - The code, and the copy button beside it where there is no header.
@@ -75,8 +86,14 @@ import '../../copy-button/index.js';
  * @csspart removed - In a diff, a line only the old version has, a `<del>`.
  * @csspart split - In a split diff, the two versions side by side.
  * @csspart text - In a diff, a line's code.
+ *
+ * @cssstate expanded - The expand button has shown every line of a capped block.
  */
 export declare class HelixHeadlessCodeBlock extends HelixElement {
+    /**
+     * The expand button's words while the block shows every line.
+     */
+    collapseLabel: string;
     /**
      * The copy button's name and tooltip text after a copy.
      */
@@ -96,19 +113,43 @@ export declare class HelixHeadlessCodeBlock extends HelixElement {
      * `false` reflects as no attribute at all.
      */
     diff: boolean;
+    /**
+     * Whether a block whose height is capped takes a button that shows every
+     * line, and fewer again.
+     *
+     * The cap is the page's, `--code-block-max-block-size` on the styled tier;
+     * the button is drawn only while the cap hides something, measured as the
+     * block lays out. Not for a diff, whose files each scroll on their own.
+     */
+    expandable: boolean;
+    /**
+     * The expand button's words while the cap hides lines.
+     */
+    expandLabel: string;
     /**
      * 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. 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.
      *
@@ -116,6 +157,14 @@ export declare class HelixHeadlessCodeBlock extends HelixElement {
      * 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.
+     *
+     * Absent hands it an empty string. It draws nothing of its own: the block's
+     * name is `label`.
+     */
+    language: string;
     /**
      * Whether the lines are numbered in a gutter beside the code.
      *
@@ -184,10 +233,30 @@ export declare class HelixHeadlessCodeBlock extends HelixElement {
      * was not redrawn.
      */
     private observer;
+    /** Whether the cap hides lines, measured from the drawn block. */
+    private capped;
+    /** Whether the expand button has shown every line. */
+    private expanded;
+    /** Watches the block's size, while it is expandable. */
+    private sizes;
+    /**
+     * Reads whether the cap hides lines: the scroller is taller inside than it
+     * is drawn. The styled tier caps the `<code>`, and a page may cap the
+     * `<pre>`, so both are asked. Left as it was while expanded, which shows
+     * everything.
+     */
+    private readonly measure;
+    protected updated(changed: PropertyValues): void;
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected firstUpdated(changed: PropertyValues): void;
     protected render(): TemplateResult;
+    /**
+     * The button that shows every line of a capped block, and fewer again, or
+     * nothing while the cap hides nothing. Not on a server, which cannot
+     * measure, so a served block draws none and the client adds it.
+     */
+    private renderExpand;
     /**
      * The name with the copy button beside it, or nothing when there is no name.
      *

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

@@ -6,22 +6,37 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { customElement, HelixElement } from '@fusion.dev/helix-core';
 import { nothing } from 'lit';
-import { property } from 'lit/decorators.js';
+import { property, state } from 'lit/decorators.js';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { html } from 'lit/static-html.js';
 import '../../copy-button/index.js';
+import { highlightedLines } from '../highlight.js';
 import { gutterNumbers, lineCount } from '../lines.js';
 import { pairLines, parsePatch } from '../patch.js';
 let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
     constructor() {
         super(...arguments);
+        this.collapseLabel = 'Show fewer lines';
         this.copiedLabel = 'Copied';
         this.copyLabel = 'Copy code';
         this.diff = false;
+        this.expandable = false;
+        this.expandLabel = 'Show all lines';
         this.label = '';
+        this.language = '';
         this.lineNumbers = false;
         this.noCopy = false;
         this.parsed = { files: [], text: '' };
+        this.capped = false;
+        this.expanded = false;
+        this.measure = () => {
+            if (!this.expanded) {
+                this.capped =
+                    this.expandable &&
+                        !this.diff &&
+                        [...this.renderRoot.querySelectorAll('[part="block"], [part="code"]')].some((box) => box.scrollHeight > box.clientHeight + 1);
+            }
+        };
     }
     get files() {
         if (!this.diff) {
@@ -43,6 +58,14 @@ let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
             .map((node) => node.textContent ?? '')
             .join('');
     }
+    updated(changed) {
+        super.updated(changed);
+        if (this.expandable && typeof ResizeObserver !== 'undefined') {
+            this.sizes ??= new ResizeObserver(this.measure);
+            this.sizes.observe(this);
+        }
+        this.measure();
+    }
     connectedCallback() {
         super.connectedCallback();
         if (typeof MutationObserver !== 'undefined') {
@@ -52,6 +75,8 @@ let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
     }
     disconnectedCallback() {
         super.disconnectedCallback();
+        this.sizes?.disconnect();
+        this.sizes = undefined;
         this.observer?.disconnect();
     }
     firstUpdated(changed) {
@@ -64,7 +89,16 @@ let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
             return this.renderDiff(files);
         }
         const text = this.text;
-        const highlighted = this.highlight && text !== '' ? 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
@@ -77,9 +111,26 @@ let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
             : nothing;
         return html `${this.renderHeader(this.label)}
       <div part="frame">
-        <pre part="block">${gutter}${code}</pre>
+        <pre id="block" part="block">${gutter}${code}</pre>
         ${this.label ? nothing : this.renderCopy()}
-      </div>`;
+      </div>${this.renderExpand()}`;
+    }
+    renderExpand() {
+        if (!this.expandable || !(this.capped || this.expanded)) {
+            return nothing;
+        }
+        return html `<button
+      aria-controls="block"
+      aria-expanded=${this.expanded ? 'true' : 'false'}
+      part="expand"
+      type="button"
+      @click=${() => {
+            this.expanded = !this.expanded;
+            this.toggleState('expanded', this.expanded);
+        }}
+    >
+      ${this.expanded ? this.collapseLabel : this.expandLabel}
+    </button>`;
     }
     renderHeader(name, value) {
         return name
@@ -92,7 +143,7 @@ let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
     renderCopyButton(value = this.text, name = this.label) {
         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,
@@ -150,6 +201,9 @@ let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
         })}<slot hidden @slotchange=${() => this.requestUpdate()}></slot>`;
     }
 };
+__decorate([
+    property({ attribute: 'collapse-label' })
+], HelixHeadlessCodeBlock.prototype, "collapseLabel", void 0);
 __decorate([
     property({ attribute: 'copied-label' })
 ], HelixHeadlessCodeBlock.prototype, "copiedLabel", void 0);
@@ -159,12 +213,21 @@ __decorate([
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessCodeBlock.prototype, "diff", void 0);
+__decorate([
+    property({ type: Boolean })
+], HelixHeadlessCodeBlock.prototype, "expandable", void 0);
+__decorate([
+    property({ attribute: 'expand-label' })
+], HelixHeadlessCodeBlock.prototype, "expandLabel", void 0);
 __decorate([
     property({ attribute: false })
 ], HelixHeadlessCodeBlock.prototype, "highlight", void 0);
 __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);
@@ -174,6 +237,12 @@ __decorate([
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessCodeBlock.prototype, "variant", void 0);
+__decorate([
+    state()
+], HelixHeadlessCodeBlock.prototype, "capped", void 0);
+__decorate([
+    state()
+], HelixHeadlessCodeBlock.prototype, "expanded", void 0);
 HelixHeadlessCodeBlock = __decorate([
     customElement('helix-headless-code-block')
 ], HelixHeadlessCodeBlock);

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

@@ -45,6 +45,8 @@ declare const HelixHeadlessColorInput_base: (new (...args: any[]) => import("@fu
  * @slot end - Content at the trailing end, before the trigger.
  * @slot feedback - The message that says what is wrong with the value.
  * @slot hint - Help text under the field.
+ * @slot panel-footer - Content in the panel under the picker, such as a note or an action.
+ * @slot panel-header - Content in the panel above the picker, such as a heading or a shortcut.
  * @slot start - Content at the leading end of the field, inside its border.
  * @slot trigger - The icon on the trigger, which shows that the field opens a panel.
  *
@@ -72,12 +74,16 @@ 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`.
  * @csspart picker-field-input - The number input in a channel's field.
  * @csspart picker-field-label - The name above a channel's number input.
@@ -86,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.
@@ -96,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.
@@ -193,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, } 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,16 +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,
-        field: picker-field, field-input: picker-field-input, field-label: picker-field-label,
+        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'}
@@ -209,7 +214,9 @@ let HelixHeadlessColorInput = class HelixHeadlessColorInput extends MixinPickerF
         popover="manual"
         ?hidden=${!this.open}
       >
+        <slot name="panel-header"></slot>
         ${this.renderPicker()}
+        <slot name="panel-footer"></slot>
       </div>
       ${this.renderHint()}${this.renderFeedback()}`;
     }
@@ -224,7 +231,7 @@ __decorate([
     property({ attribute: 'channel-fields', type: Boolean })
 ], HelixHeadlessColorInput.prototype, "channelFields", void 0);
 __decorate([
-    property({ attribute: 'color-words', type: Object })
+    property({ attribute: 'color-words', converter: wordsConverter })
 ], HelixHeadlessColorInput.prototype, "colorWords", void 0);
 __decorate([
     property({ reflect: true })
@@ -247,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;

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

@@ -1,9 +1,9 @@
-import { type Color, type ColorFormat, type ColorWords, HelixFormElement } from '@fusion.dev/helix-core';
+import { type Color, type ColorFormat, type ColorWords, HelixFormElement, KeyboardNavigationController } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
 import '../../button/index.js';
 import '../../button-group/index.js';
 import '../../slider/index.js';
-declare const HelixHeadlessColorPicker_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerValueInterface) & typeof HelixFormElement;
+declare const HelixHeadlessColorPicker_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinPickerFeedbackInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerValueInterface) & typeof HelixFormElement;
 /**
  * @summary A color picker made of a square and two ramps.
  *
@@ -29,8 +29,12 @@ declare const HelixHeadlessColorPicker_base: (new (...args: any[]) => import("@f
  *
  * A screen reader hears the color's name, such as "vibrant red", after the two
  * numbers on the square and after the number on the hue ramp, and each preset
- * is named by its color. Set `color-words` to speak the names in another
- * language.
+ * is named by its color. The opacity ramp is heard as a percentage. Set
+ * `color-words` to speak the names in another language.
+ *
+ * The presets are a listbox with the current color selected, and one tab
+ * stop. The arrow keys move between them, Home and End go to the ends, and
+ * Enter, Space or a press chooses one.
  *
  * @since 0.1.0
  * @status stable
@@ -58,12 +62,16 @@ declare const HelixHeadlessColorPicker_base: (new (...args: any[]) => import("@f
  * @csspart channel-marker-label - The value a mark stands at, when `marker-labels` is set.
  * @csspart channel-markers - The row of marks along the track.
  * @csspart channel-output - The current value, shown beside the track.
+ * @csspart channel-tooltip - A ramp's value in a bubble, where a ramp shows one.
+ * @csspart channel-tooltips - The layer over a ramp's track that holds its bubble.
  * @csspart channels - The ramps beside the sample.
  * @csspart controls - The row under the square.
  * @csspart eyedropper - The control that samples a color from the screen.
  * @csspart eyedropper-button - The button inside `eyedropper`.
  * @csspart eyedropper-live - The live region of the button inside `eyedropper`, which says its pending label.
+ * @csspart eyedropper-spinner - The ring the eyedropper button turns while it is pending.
  * @csspart eyedropper-text - The words on the button inside `eyedropper`, trimmed to their capitals and baseline.
+ * @csspart feedback - The message under the picker, while `feedback` is set.
  * @csspart field - One channel's number field with its label, in `channel-fields`.
  * @csspart field-input - The number input in a channel's field.
  * @csspart field-label - The name above a channel's number input.
@@ -72,6 +80,7 @@ declare const HelixHeadlessColorPicker_base: (new (...args: any[]) => import("@f
  * @csspart format - The control that changes the syntax the value is written in.
  * @csspart format-button - The button inside `format`.
  * @csspart format-live - The live region of the button inside `format`, which says its pending label.
+ * @csspart format-spinner - The ring the syntax button turns while it is pending.
  * @csspart format-text - The words on the button inside `format`, trimmed to their capitals and baseline.
  * @csspart grid - The saturation and brightness square. Draw the mark that shows
  * where the color sits with `::part(grid)::after` in your stylesheet. The
@@ -80,14 +89,18 @@ declare const HelixHeadlessColorPicker_base: (new (...args: any[]) => import("@f
  * @csspart grid-brightness - The range input for the square's vertical axis.
  * @csspart grid-saturation - The range input for the square's horizontal axis.
  * @csspart sample - A chip of the current color. Pressing it copies the value.
- * @csspart swatch - One preset.
- * @csspart swatches - The row of presets.
+ * @csspart swatch - One preset, an option in the `swatches` listbox.
+ * @csspart swatches - The row of presets, a listbox.
  * @csspart value - The text field that holds the color. It accepts a typed or pasted color.
+ * @csspart wheel - The hue ring round the square, with `wheel`. Draw the ring and its mark from `--color-picker-hue`.
+ * @csspart wheel-hue - The range input behind the ring, which a reader turns with the keys.
  *
  * @cssproperty --color-picker-brightness - The chosen brightness, 0 to 100, as a percentage.
  * @cssproperty --color-picker-hue - The chosen hue, 0 to 360, unitless.
  * @cssproperty --color-picker-saturation - The chosen saturation, 0 to 100, as a percentage.
  * @cssproperty --color-picker-swatch - The color a chip shows: the current color on the sample, and the preset's color on each preset.
+ *
+ * @cssstate invalid - While `invalid` is set or `feedback` says what is wrong.
  */
 export declare class HelixHeadlessColorPicker extends HelixHeadlessColorPicker_base {
     /**
@@ -179,16 +192,6 @@ export declare class HelixHeadlessColorPicker extends HelixHeadlessColorPicker_b
      * What the hue channel is called.
      */
     hueLabel: string;
-    /**
-     * Whether the current selection fails validation.
-     *
-     * A flag rather than a message, the split Date Picker also draws. A flat
-     * picker has no room of its own for a sentence: the field that wraps one owns
-     * the label, the hint and the feedback, and a second message inside the panel
-     * would be the same error said twice. What is left for the picker is the one
-     * thing the field cannot draw from outside, the mark on the answer itself.
-     */
-    invalid: boolean;
     /**
      * What the lightness channel's field is called, in `channel-fields` with
      * hsl.
@@ -305,6 +308,16 @@ export declare class HelixHeadlessColorPicker extends HelixHeadlessColorPicker_b
      * speaks it. Absent is the control's own sentence, in English.
      */
     valueMissingMessage?: string;
+    /**
+     * Draws the hue as a wheel around the square, in place of the hue ramp, as
+     * React Aria's ColorWheel sits round its ColorArea.
+     *
+     * The ring is one stop, a slider a reader turns with the arrow keys, Home
+     * and End, the same way round in either writing direction, and a press or a
+     * drag on it takes the hue in that direction. Off, the picker keeps its
+     * ramp.
+     */
+    wheel: boolean;
     /**
      * The color the reader has moved to, or nothing while they have moved none.
      *
@@ -322,6 +335,8 @@ export declare class HelixHeadlessColorPicker extends HelixHeadlessColorPicker_b
      * server's markup, which was rendered without it.
      */
     private sampling;
+    /** The preset the reader was last on, which holds the row's one tab stop. */
+    private swatchAt;
     /**
      * Whether the value on this element was produced here.
      *
@@ -393,6 +408,17 @@ export declare class HelixHeadlessColorPicker extends HelixHeadlessColorPicker_b
     private readonly copier;
     /** Takes a preset, in this picker's syntax rather than as the preset spelled it. */
     private readonly handleSwatch;
+    /**
+     * The arrows, Home and End in the presets: focus moves, and nothing is
+     * chosen until Enter, Space or a press, as in React Aria's swatch picker.
+     *
+     * Core's roving set, as Legend's toggles are: the arrows follow the line of
+     * text, so the row reverses in a right-to-left page, Up and Down are the
+     * previous and the next since the row wraps onto lines, and focus stops at
+     * the ends, since a row of colors is no ring. A press from anywhere else in
+     * the picker is not the row's to move.
+     */
+    protected readonly swatchKeys: KeyboardNavigationController;
     /** Walks the format on, and rewrites the value in it. */
     private readonly handleFormat;
     /**
@@ -415,6 +441,11 @@ export declare class HelixHeadlessColorPicker extends HelixHeadlessColorPicker_b
      * reaches a corner, and without it the handle stops wherever the pointer left.
      */
     private readonly handleGridPointer;
+    /**
+     * A press or a drag on the hue wheel: the hue in that direction from its
+     * center. A press in the square inside it is the square's.
+     */
+    private readonly handleWheelPointer;
     protected firstUpdated(changed: import('lit').PropertyValues): void;
     /**
      * Reports the color to the form.
@@ -557,6 +588,12 @@ export declare class HelixHeadlessColorPicker extends HelixHeadlessColorPicker_b
      * tiers.
      */
     protected renderTools(): TemplateResult;
+    /**
+     * The presets, as a listbox of colors with the current one selected, which
+     * is React Aria's ColorSwatchPicker: one tab stop, held by the preset the
+     * reader was last on, then the selected one, then the first.
+     */
+    private renderSwatches;
     protected render(): TemplateResult;
 }
 declare global {