@fusion.dev/helix-headless 0.142.1 → 0.144.0

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

@@ -4,18 +4,31 @@ 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, DisabledCascadeController, HelixBeforeChangeEvent, HelixFormElement, hostAria, MixinField, } from '@fusion.dev/helix-core';
-import { html } from 'lit';
+var HelixHeadlessCheckboxGroup_1;
+import { commaList, customElement, DisabledCascadeController, HelixBeforeChangeEvent, HelixFormElement, hostAria, MixinField, } from '@fusion.dev/helix-core';
+import { nothing } from 'lit';
 import { property } from 'lit/decorators.js';
+import { html } from 'lit/static-html.js';
 import { HelixHeadlessCheckbox } from '../../checkbox/root/checkbox-root.js';
-let HelixHeadlessCheckboxGroup = class HelixHeadlessCheckboxGroup extends MixinField(HelixFormElement) {
+import '../../checkbox/index.js';
+let HelixHeadlessCheckboxGroup = HelixHeadlessCheckboxGroup_1 = class HelixHeadlessCheckboxGroup extends MixinField(HelixFormElement) {
     constructor() {
         super(...arguments);
-        this.value = '';
+        this.selectAll = false;
+        this.selectAllLabel = 'Select all';
+        this.declared = [];
+        this.pending = false;
+        this.watched = new Set();
+        this.member = {
+            hostUpdated: () => {
+                if (this.isConnected && (this.selectAll || this.value !== this.judged)) {
+                    this.requestUpdate();
+                }
+            },
+        };
         this.cascade = new DisabledCascadeController(this, {
             items: () => this.boxes,
         });
-        this.seeded = false;
         this.handleToggle = (event) => {
             const target = event.target;
             const changed = this.boxes.find((box) => box === target);
@@ -29,40 +42,93 @@ let HelixHeadlessCheckboxGroup = class HelixHeadlessCheckboxGroup extends MixinF
             const wanted = event.detail.checked;
             const next = this.boxes
                 .filter((box) => (box === changed ? wanted : box.checked))
-                .map((box) => box.value)
-                .join(',');
-            if (!this.dispatchEvent(new HelixBeforeChangeEvent({ value: next }))) {
+                .map((box) => box.value);
+            if (!this.dispatchEvent(new HelixBeforeChangeEvent({ value: next.join(',') }))) {
+                event.preventDefault();
                 return;
             }
-            this.value = next;
+            this.values = next;
             this.announceInput();
             this.announceChange();
         };
         this.handleMemberNative = (event) => {
-            if (event.target !== this) {
+            if (event.target instanceof HelixHeadlessCheckbox && this.holds(event.target)) {
                 event.stopImmediatePropagation();
             }
         };
+        this.handleSelectAll = (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            const enabled = this.boxes.filter((box) => !box.isDisabled);
+            const every = enabled.length > 0 && enabled.every((box) => box.checked);
+            const next = this.boxes
+                .filter((box) => (enabled.includes(box) ? !every : box.checked))
+                .map((box) => box.value);
+            if (!this.dispatchEvent(new HelixBeforeChangeEvent({ value: next.join(',') }))) {
+                return;
+            }
+            this.values = next;
+            this.announceInput();
+            this.announceChange();
+        };
+    }
+    get value() {
+        return this.values.join(',');
+    }
+    set value(next) {
+        this.values = commaList(next);
+    }
+    get values() {
+        if (this.pending || !this.hasUpdated || !this.childrenKnown) {
+            return [...this.declared];
+        }
+        const boxes = this.boxes;
+        return boxes.length === 0
+            ? [...this.declared]
+            : boxes.filter((box) => box.checked).map((box) => box.value);
+    }
+    set values(next) {
+        const previous = this.value;
+        this.declared = [...next];
+        this.pending = true;
+        this.requestUpdate('value', previous);
     }
     get boxes() {
-        return [...this.children].filter((child) => child instanceof HelixHeadlessCheckbox);
+        return [...this.querySelectorAll('*')].filter((element) => element instanceof HelixHeadlessCheckbox && this.holds(element));
+    }
+    holds(box) {
+        let parent = box.parentElement;
+        while (parent && parent !== this) {
+            if (parent instanceof HelixHeadlessCheckboxGroup_1) {
+                return false;
+            }
+            parent = parent.parentElement;
+        }
+        return parent === this;
     }
     sync() {
-        const wanted = new Set(this.value
-            .split(',')
-            .map((entry) => entry.trim())
-            .filter(Boolean));
-        for (const box of this.boxes) {
+        const boxes = this.boxes;
+        for (const box of boxes) {
             if (this.name !== '' && box.name === '') {
                 box.name = this.name;
             }
-            box.checked = wanted.has(box.value);
+            if (!this.watched.has(box)) {
+                box.addController(this.member);
+                this.watched.add(box);
+            }
         }
-    }
-    seed() {
-        const checked = this.boxes.filter((box) => box.checked).map((box) => box.value);
-        if (checked.length > 0) {
-            this.value = checked.join(',');
+        for (const box of this.watched) {
+            if (!boxes.includes(box)) {
+                this.unwatch(box);
+            }
+        }
+        if (!this.pending || boxes.length === 0) {
+            return;
+        }
+        this.pending = false;
+        const wanted = new Set(this.declared);
+        for (const box of boxes) {
+            box.checked = wanted.has(box.value);
         }
     }
     connectedCallback() {
@@ -70,49 +136,71 @@ let HelixHeadlessCheckboxGroup = class HelixHeadlessCheckboxGroup extends MixinF
         this.addEventListener('helix-before-toggle', this.handleToggle);
         this.addEventListener('change', this.handleMemberNative);
         this.addEventListener('input', this.handleMemberNative);
+        this.observer = new MutationObserver(() => this.requestUpdate());
+        this.observer.observe(this, { childList: true, subtree: true });
     }
     disconnectedCallback() {
         super.disconnectedCallback();
         this.removeEventListener('helix-before-toggle', this.handleToggle);
         this.removeEventListener('change', this.handleMemberNative);
         this.removeEventListener('input', this.handleMemberNative);
+        this.observer?.disconnect();
+        this.observer = undefined;
+        for (const box of this.watched) {
+            this.unwatch(box);
+        }
+    }
+    unwatch(box) {
+        box.removeController(this.member);
+        this.watched.delete(box);
     }
     willUpdate(changed) {
         super.willUpdate(changed);
         hostAria(this.internals, { label: this.label, role: 'group' });
         this.internals.ariaRequired = this.required ? 'true' : null;
-        if (!this.seeded && this.childrenKnown) {
-            this.seeded = true;
-            if (this.value === '') {
-                this.seed();
-            }
-        }
-    }
-    firstUpdated(changed) {
-        super.firstUpdated(changed);
-        if (!this.seeded && this.children !== undefined) {
-            this.seeded = true;
-            if (this.value === '') {
-                this.seed();
-            }
-        }
     }
     formResetCallback() {
         super.formResetCallback();
-        this.value = this.getAttribute('value') ?? '';
-        this.seeded = false;
+        const declared = this.getAttribute('value');
+        if (declared !== null) {
+            this.value = declared;
+        }
+        this.requestUpdate();
     }
     validate() {
-        this.reportRequired(this.value === '', 'Choose at least one to continue.', 'items');
+        this.judged = this.value;
+        this.reportRequired(this.judged === '', 'Choose at least one to continue.', 'items');
     }
     updated(changed) {
         super.updated(changed);
-        this.validate();
         this.sync();
+        this.validate();
         this.linkHost();
     }
+    renderSelectAll() {
+        if (!this.selectAll) {
+            return nothing;
+        }
+        const boxes = this.childrenKnown ? this.boxes : [];
+        const ticked = boxes.filter((box) => box.checked).length;
+        const every = boxes.length > 0 && ticked === boxes.length;
+        const box = this.tag('checkbox');
+        return html `<${box}
+      part="select-all"
+      exportparts="box: select-all-box, control: select-all-control,
+        feedback: select-all-feedback, field: select-all-field, hint: select-all-hint,
+        label: select-all-label, mark: select-all-mark, mark-checked: select-all-mark-checked,
+        mark-dash: select-all-mark-dash, mark-indeterminate: select-all-mark-indeterminate"
+      .checked=${every}
+      .indeterminate=${ticked > 0 && !every}
+      ?disabled=${this.isDisabled}
+      label=${this.selectAllLabel}
+      @helix-before-toggle=${this.handleSelectAll}
+      @input=${(event) => event.stopPropagation()}
+    ></${box}>`;
+    }
     render() {
-        return html `${this.renderGroupLabel()}
+        return html `${this.renderGroupLabel()}${this.renderSelectAll()}
       <div part="items">
         ${''}
         <slot @slotchange=${() => this.requestUpdate()}></slot>
@@ -120,10 +208,19 @@ let HelixHeadlessCheckboxGroup = class HelixHeadlessCheckboxGroup extends MixinF
       ${this.renderHint()}${this.renderFeedback()}`;
     }
 };
+__decorate([
+    property({ attribute: 'select-all', type: Boolean })
+], HelixHeadlessCheckboxGroup.prototype, "selectAll", void 0);
+__decorate([
+    property({ attribute: 'select-all-label' })
+], HelixHeadlessCheckboxGroup.prototype, "selectAllLabel", void 0);
 __decorate([
     property()
-], HelixHeadlessCheckboxGroup.prototype, "value", void 0);
-HelixHeadlessCheckboxGroup = __decorate([
+], HelixHeadlessCheckboxGroup.prototype, "value", null);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessCheckboxGroup.prototype, "values", null);
+HelixHeadlessCheckboxGroup = HelixHeadlessCheckboxGroup_1 = __decorate([
     customElement('helix-headless-checkbox-group')
 ], HelixHeadlessCheckboxGroup);
 export { HelixHeadlessCheckboxGroup };

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

@@ -15,7 +15,7 @@ import { type TemplateResult } from 'lit';
  * @since 0.1.0
  * @status stable
  * @category typography
- * @aliases Inline code, Kbd
+ * @aliases Inline code
  * @documentation https://fusion.dev/helix/components/code
  *
  * @slot - The code.

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

@@ -0,0 +1,13 @@
+/**
+ * How many lines a block of code shows.
+ *
+ * A final line break ends the last line rather than starting another, which is
+ * how an editor counts a file and how the block draws one: `a\nb\n` is two
+ * lines. A Windows line break is one break. Empty code has no lines.
+ */
+export declare const lineCount: (code: string) => number;
+/**
+ * The numbers for a gutter of `count` lines, one to a line, as the text a
+ * `<pre>` draws beside the code. The stylesheet aligns them to the end.
+ */
+export declare const gutterNumbers: (count: number) => string;

package/dist/code-block/lines.js

@@ -0,0 +1,2 @@
+export const lineCount = (code) => code === '' ? 0 : code.replace(/\r?\n$/, '').split(/\r?\n/).length;
+export const gutterNumbers = (count) => Array.from({ length: count }, (_, index) => String(index + 1)).join('\n');

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

@@ -14,6 +14,12 @@ import '../../copy-button/index.js';
  *
  * For a fragment of code inside a sentence, use `Code`.
  *
+ * 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.
+ *
  * 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
  * removed. The block never computes a diff itself. Line numbers come from the
@@ -42,6 +48,7 @@ import '../../copy-button/index.js';
  * @csspart context - In a diff, a line both versions share.
  * @csspart copy - The copy button. It sits in the header when there is one, and beside the code otherwise.
  * @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-text - The words on that button, trimmed to their capitals and baseline.
  * @csspart copy-tooltip - The copy button's tooltip.
@@ -57,6 +64,7 @@ import '../../copy-button/index.js';
  * @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.
+ * @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.
@@ -69,6 +77,14 @@ import '../../copy-button/index.js';
  * @csspart text - In a diff, a line's code.
  */
 export declare class HelixHeadlessCodeBlock extends HelixElement {
+    /**
+     * The copy button's name and tooltip text after a copy.
+     */
+    copiedLabel: string;
+    /**
+     * The copy button's name and tooltip text before a copy.
+     */
+    copyLabel: string;
     /**
      * Whether the content is a unified diff, drawn as the lines it changed.
      *
@@ -76,6 +92,19 @@ export declare class HelixHeadlessCodeBlock extends HelixElement {
      * `false` reflects as no attribute at all.
      */
     diff: boolean;
+    /**
+     * 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.
+     */
+    highlight?: (code: string) => string;
     /**
      * The block's name, usually a file name or a language.
      *
@@ -83,6 +112,15 @@ export declare class HelixHeadlessCodeBlock extends HelixElement {
      * carries no name of its own.
      */
     label: string;
+    /**
+     * Whether the lines are numbered in a gutter beside the code.
+     *
+     * The numbers are hidden from the accessibility tree and are not part of a
+     * copy, which takes the code alone. Reflected, because the stylesheet lays
+     * the gutter out beside the code. A diff numbers its lines from its hunks
+     * whether or not this is set.
+     */
+    lineNumbers: boolean;
     /**
      * Whether to leave the copy button off.
      *
@@ -133,6 +171,17 @@ export declare class HelixHeadlessCodeBlock extends HelixElement {
      * server sent, which rendered it empty.
      */
     private get text();
+    /**
+     * Watches the code for edits that change no slot assignment.
+     *
+     * A framework updating one string child writes the text node's data in
+     * place, which React does, and that fires no `slotchange`. The block showed
+     * the new code while its button copied the old, and a diff edited that way
+     * was not redrawn.
+     */
+    private observer;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     protected firstUpdated(changed: PropertyValues): void;
     protected render(): TemplateResult;
     /**

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

@@ -7,14 +7,19 @@ 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 { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { html } from 'lit/static-html.js';
 import '../../copy-button/index.js';
+import { gutterNumbers, lineCount } from '../lines.js';
 import { pairLines, parsePatch } from '../patch.js';
 let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
     constructor() {
         super(...arguments);
+        this.copiedLabel = 'Copied';
+        this.copyLabel = 'Copy code';
         this.diff = false;
         this.label = '';
+        this.lineNumbers = false;
         this.noCopy = false;
         this.parsed = { files: [], text: '' };
     }
@@ -38,6 +43,17 @@ let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
             .map((node) => node.textContent ?? '')
             .join('');
     }
+    connectedCallback() {
+        super.connectedCallback();
+        if (typeof MutationObserver !== 'undefined') {
+            this.observer ??= new MutationObserver(() => this.requestUpdate());
+            this.observer.observe(this, { characterData: true, childList: true, subtree: true });
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.observer?.disconnect();
+    }
     firstUpdated(changed) {
         super.firstUpdated(changed);
         this.finishHydration();
@@ -47,9 +63,21 @@ let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
         if (files.length > 0) {
             return this.renderDiff(files);
         }
+        const text = this.text;
+        const highlighted = this.highlight && text !== '' ? this.highlight(text) : undefined;
+        const code = highlighted === undefined
+            ? html `<code part="code"><slot @slotchange=${() => this.requestUpdate()}></slot></code>`
+            : html `<code part="code">${unsafeHTML(highlighted)}</code><slot
+              hidden
+              @slotchange=${() => this.requestUpdate()}
+            ></slot>`;
+        const lines = lineCount(text);
+        const gutter = this.lineNumbers
+            ? html `<span part="gutter" aria-hidden="true">${lines === 0 ? nothing : gutterNumbers(lines)}</span>`
+            : nothing;
         return html `${this.renderHeader(this.label)}
       <div part="frame">
-        <pre part="block"><code part="code"><slot @slotchange=${() => this.requestUpdate()}></slot></code></pre>
+        <pre part="block">${gutter}${code}</pre>
         ${this.label ? nothing : this.renderCopy()}
       </div>`;
     }
@@ -64,12 +92,13 @@ let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
     renderCopyButton(value = this.text) {
         return html `<${this.tag('copy-button')}
       part="copy"
-      exportparts="button: copy-button, text: copy-text, mark: copy-mark, tooltip: copy-tooltip,
+      exportparts="button: copy-button, text: copy-text, mark: copy-mark, live: copy-live, 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,
         tooltip-left: copy-tooltip-left, tooltip-right: copy-tooltip-right, tooltip-top: copy-tooltip-top"
-      label="Copy code"
+      copied-label=${this.copiedLabel}
+      label=${this.copyLabel}
       .value=${value}
     ></${this.tag('copy-button')}>`;
     }
@@ -121,12 +150,24 @@ let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
         })}<slot hidden @slotchange=${() => this.requestUpdate()}></slot>`;
     }
 };
+__decorate([
+    property({ attribute: 'copied-label' })
+], HelixHeadlessCodeBlock.prototype, "copiedLabel", void 0);
+__decorate([
+    property({ attribute: 'copy-label' })
+], HelixHeadlessCodeBlock.prototype, "copyLabel", void 0);
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessCodeBlock.prototype, "diff", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessCodeBlock.prototype, "highlight", void 0);
 __decorate([
     property()
 ], HelixHeadlessCodeBlock.prototype, "label", void 0);
+__decorate([
+    property({ attribute: 'line-numbers', reflect: true, type: Boolean })
+], HelixHeadlessCodeBlock.prototype, "lineNumbers", void 0);
 __decorate([
     property({ attribute: 'no-copy', reflect: true, type: Boolean })
 ], HelixHeadlessCodeBlock.prototype, "noCopy", void 0);

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

@@ -1,4 +1,4 @@
-import { AriaForwardController, type ColorFormat, HelixFormElement } from '@fusion.dev/helix-core';
+import { AriaForwardController, type ColorFormat, type ColorWords, HelixFormElement } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
 import '../../color-picker/index.js';
 declare const HelixHeadlessColorInput_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinPickerFieldInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerOpenInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerValueInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinFieldInterface) & typeof HelixFormElement;
@@ -23,6 +23,15 @@ declare const HelixHeadlessColorInput_base: (new (...args: any[]) => import("@fu
  * not survive a round trip through a formatter. Date Input does the same with
  * dates.
  *
+ * Typing sends `input` on each keystroke and `change` when you leave the
+ * field, as a text field does, so the message about a color it cannot read
+ * waits until you are done. Dragging in the panel sends `input` as the color
+ * moves and `change` when it settles.
+ *
+ * The trigger and ArrowDown open the panel with focus in the square. Tab moves
+ * between the panel's controls without leaving it, and Escape closes it and
+ * returns focus to the field.
+ *
  * The component sets `--color-input-swatch`, so do not set it yourself. It
  * holds the resolved color, so the styled tier can paint the swatch without
  * parsing the value.
@@ -44,7 +53,7 @@ declare const HelixHeadlessColorInput_base: (new (...args: any[]) => import("@fu
  * @event {HelixBeforeCloseEvent} helix-before-close - The panel is about to close. Cancelable: cancel it to keep it open.
  * @event {HelixBeforeOpenEvent} helix-before-open - The panel is about to open. Cancelable: cancel it to keep it closed.
  * @event {Event} input - Fired as the value changes.
- * @event {Event} toggle - The panel opened or closed. The event carries `newState` and `oldState`.
+ * @event {ToggleEvent} toggle - The panel opened or closed. The event carries `newState` and `oldState`.
  *
  * @csspart control - The text input that holds the value. Absent in the `swatch` variant.
  * @csspart feedback - The message that says what is wrong with the value.
@@ -67,10 +76,16 @@ declare const HelixHeadlessColorInput_base: (new (...args: any[]) => import("@fu
  * @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-text - The words on the button inside `picker-eyedropper`.
+ * @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.
+ * @csspart picker-fields - The row of channel number fields, in `channel-fields`.
  * @csspart picker-footer - The row holding the value and the tools.
  * @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-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.
@@ -105,6 +120,20 @@ export declare class HelixHeadlessColorInput extends HelixHeadlessColorInput_bas
      * consumer who wants autofill can still ask.
      */
     autocomplete: string;
+    /**
+     * Whether the panel shows a number field for each channel of the color.
+     * Passed to the panel; see Color Picker's `channel-fields`.
+     */
+    channelFields: boolean;
+    /**
+     * The words a color's name is spoken in, as JSON keyed by their English,
+     * such as `{"red": "rot", "vibrant": "kräftiges"}`.
+     *
+     * Passed to the panel, whose square, hue ramp and presets say the color's
+     * name, and read by the swatch in `swatch`, which says it before the value.
+     * Color Picker lists the keys.
+     */
+    colorWords: Partial<ColorWords>;
     /**
      * The syntax the value is written in: `hex`, `rgb`, or `hsl`.
      *
@@ -125,6 +154,19 @@ export declare class HelixHeadlessColorInput extends HelixHeadlessColorInput_bas
      * The text the field shows before a color is entered.
      */
     placeholder: string;
+    /**
+     * Whether the color is locked. A read-only field still submits its value.
+     *
+     * The field can be read and copied from, and the panel does not open, as on
+     * Date Input and Time Input.
+     */
+    readOnly: boolean;
+    /** Typed, so a keystroke is announced as `input` alone. See `announcesInput`. */
+    protected readonly announcesInput = true;
+    /** Requests a new value. While `readOnly` is set, nothing changes. */
+    requestValue(next: string): boolean;
+    /** Requests the panel open or closed. While `readOnly` is set, it does not open. */
+    requestOpen(next: boolean): boolean;
     /**
      * Colors offered under the picker, as a comma-separated list.
      */
@@ -178,6 +220,15 @@ export declare class HelixHeadlessColorInput extends HelixHeadlessColorInput_bas
     protected get anchor(): HTMLElement | null;
     /** What the picker should show, which is only ever a color. */
     private get picked();
+    /**
+     * What the swatch says in `swatch`: the color's name and then the value, or
+     * the trigger's words where there is no color yet.
+     *
+     * The name first, because it is what a sighted reader takes from the block of
+     * color, and the value after it, because it is what the field holds and what
+     * a reader may need to copy.
+     */
+    private get swatchWords();
     /** What the trigger's swatch paints, which is only ever a color. */
     private get painted();
     /** Relayed under this element's name, so a consumer hears one control. */
@@ -193,6 +244,13 @@ export declare class HelixHeadlessColorInput extends HelixHeadlessColorInput_bas
      * not mean.
      */
     private readonly handlePickerChange;
+    /**
+     * The picker's `change`, said under this element's name.
+     *
+     * The picker sends it when a drag, a key or a preset settles the color, so
+     * this field does too, and a drag is one `change` rather than one a frame.
+     */
+    private readonly handlePickerSettled;
     /**
      * The picker is about to take the pointer over, so the panel gets out of the
      * way and comes back after.