@fusion.dev/helix-headless 0.170.0 → 0.171.0

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

@@ -25,7 +25,8 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * field taking more. A draft that fails them does not send, and the composer
  * takes `:state(invalid)` and `aria-invalid` once the reader has tried to send
  * it, the form was submitted, or the reader edited the field and left it.
- * Tabbing past an empty composer marks nothing.
+ * Sending an empty required composer counts as trying. Tabbing past an empty
+ * composer marks nothing.
  *
  * **`typing` says whether the user is writing**, and `helix-typing` is sent
  * each time it changes: when they start, and when they send or stop for

package/dist/chat/composer/chat-composer.js

@@ -69,7 +69,13 @@ let HelixHeadlessChatComposer = class HelixHeadlessChatComposer extends HelixFor
     }
     send() {
         const value = this.value.trim();
-        if (value === '' || this.isDisabled) {
+        if (this.isDisabled) {
+            return false;
+        }
+        if (value === '') {
+            if (this.required) {
+                this.touch();
+            }
             return false;
         }
         if (!this.internals.validity.valid) {

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

@@ -43,8 +43,10 @@ declare const HelixHeadlessChat_base: (new (...args: any[]) => import("@fusion.d
  * there when the transcript opened. A turn is said with its author first, such
  * as "Ada: It ships today" (`arrival-label`), where its author can be named.
  *
- * Pass the turns as children or as `turns` data. Do not use both. Children
- * render from the server and suit most conversations. `turns` draws a long
+ * Pass the turns as children or as `turns` data. Do not use both: a chat given
+ * both draws every turn from `turns` and then the children, and says so once
+ * in the console. Children render from the server and suit most
+ * conversations. `turns` draws a long
  * transcript one window at a time, so the log needs a block size of its own.
  *
  * **A conversation is built from three elements.** The chat holds the
@@ -60,7 +62,10 @@ declare const HelixHeadlessChat_base: (new (...args: any[]) => import("@fusion.d
  * it takes them away. Anything slotted into `status` is drawn first.
  *
  * **Keyboard.** The transcript moves between turns the way a feed does. Each
- * turn says its place, such as "3 of 40", windowed or not.
+ * turn says its place, such as "3 of 40", windowed or not. The transcript is
+ * a tab stop while it holds a turn, and the turn a reader moved to is one
+ * too. Moving to an older turn unpins a transcript that scrolls and scrolls
+ * the turn into view, and moving to the newest pins it again.
  *
  * | Key | What it does |
  * |---|---|
@@ -142,6 +147,11 @@ declare const HelixHeadlessChat_base: (new (...args: any[]) => import("@fusion.d
  * @csspart status - The status region, outside the log.
  * @csspart turn - The wrapper around the message drawn for one turn from `turns`.
  * @csspart typing - The words that say who is typing, in the status band, while `typing` names someone.
+ *
+ * @cssstate empty - The conversation has no turns.
+ * @cssstate loading - Older turns are loading: `history` is `loading`.
+ * @cssstate pinned - The transcript follows its newest turn.
+ * @cssstate typing - `typing` names someone on the other side.
  */
 export declare class HelixHeadlessChat extends HelixHeadlessChat_base {
     /**
@@ -362,13 +372,16 @@ export declare class HelixHeadlessChat extends HelixHeadlessChat_base {
     /** The element that scrolls, once there is one. */
     private get log();
     /**
-     * Makes the log a tab stop while it scrolls, and takes the stop away when it
-     * does not.
+     * Makes the log a tab stop while it holds a turn or scrolls, and takes the
+     * stop away from an empty log.
      *
      * **A reader on a keyboard scrolls the history from the log itself.**
      * Chromium and Firefox make a box that scrolls focusable on their own, and
      * Safari does not, so there the arrow keys could not reach a long history.
-     * A log that fits is no stop at all, so Tab goes straight to the composer.
+     *
+     * **And it is where the turns are entered.** Page Down from the log goes to
+     * the turn at the top of the view. A log that fits was no stop at all, so a
+     * conversation whose turns held no control had no way into them by keyboard.
      */
     private markScroller;
     /** Whether the reader is within `threshold` of the bottom right now. */
@@ -491,6 +504,10 @@ export declare class HelixHeadlessChat extends HelixHeadlessChat_base {
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected willUpdate(changed: PropertyValues): void;
+    /** Whether the chat has said it was given turns both ways. */
+    private warnedMixed;
+    /** Says once that turns arrived both as children and as `turns`. */
+    private warnMixed;
     /**
      * Keeps the window on the same turns when the set changes around them.
      *
@@ -522,6 +539,8 @@ export declare class HelixHeadlessChat extends HelixHeadlessChat_base {
      * and never on a turn nobody moved to.
      */
     private focusTurn;
+    /** Draws turn `at` where it is windowed and not drawn, and visits it. */
+    private showTurn;
     /** The turn that is a tab stop because a reader moved to it. */
     private stop;
     /**
@@ -534,6 +553,17 @@ export declare class HelixHeadlessChat extends HelixHeadlessChat_base {
      * `tabindex` you wrote on a turn is left as it is.
      */
     private visit;
+    /** Where this element last scrolled the transcript to show a turn, until the scroll that follows. */
+    private placed;
+    /**
+     * Scrolls the transcript, and nothing around it, until `turn` is in view,
+     * and notes the turn at the top as the reader's place. A pinned transcript
+     * is left at the bottom, which is where whoever holds the pin wants it.
+     *
+     * The edge nearest the turn moves the least, and a turn taller than the
+     * transcript is shown from its start.
+     */
+    private reveal;
     /** The first control in the regions `names` holds, in their order. */
     private firstControlIn;
     /**

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 { ChildrenController, customElement, drawIcon, focusableElements, formatWords, HelixBeforePinEvent, HelixElement, HelixHistoryEvent, HelixPinEvent, hostAria, MixinCollection, onUnlessFalse, requestChange, UpgradeController, VirtualizeController, whenHydrated, words, wordsConverter, } from '@fusion.dev/helix-core';
+import { ChildrenController, customElement, drawIcon, focusableElements, formatWords, HelixBeforePinEvent, HelixElement, HelixHistoryEvent, HelixPinEvent, hostAria, MixinCollection, onUnlessFalse, reportRuntime, requestChange, UpgradeController, VirtualizeController, whenHydrated, words, wordsConverter, } from '@fusion.dev/helix-core';
 import { arrowDown } from '@fusion.dev/helix-icons';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -97,6 +97,7 @@ let HelixHeadlessChat = class HelixHeadlessChat extends MixinCollection(HelixEle
         this.handleResume = () => {
             this.resume();
         };
+        this.warnedMixed = false;
         this.handleKeydown = (event) => {
             if (event.defaultPrevented || event.altKey || event.metaKey || event.shiftKey) {
                 return;
@@ -138,6 +139,13 @@ let HelixHeadlessChat = class HelixHeadlessChat extends MixinCollection(HelixEle
         };
         this.handleScroll = () => {
             const log = this.log;
+            const placed = this.placed;
+            this.placed = undefined;
+            if (log && placed !== undefined && Math.abs(log.scrollTop - placed) < 1 && !this.pinned) {
+                this.remember();
+                this.reachHistory();
+                return;
+            }
             if (this.pinned && log && log.scrollTop >= this.stuckAt - 1 && !this.atBottom) {
                 this.stick();
             }
@@ -183,7 +191,8 @@ let HelixHeadlessChat = class HelixHeadlessChat extends MixinCollection(HelixEle
         if (!log) {
             return;
         }
-        if (log.scrollHeight > log.clientHeight) {
+        const turns = this.fed ? this.turns.length : this.messages.length;
+        if (turns > 0 || log.scrollHeight > log.clientHeight) {
             log.tabIndex = 0;
         }
         else {
@@ -449,6 +458,22 @@ let HelixHeadlessChat = class HelixHeadlessChat extends MixinCollection(HelixEle
         if (changed.has('turns')) {
             this.follow(changed.get('turns'));
         }
+        this.warnMixed();
+        this.toggleState('pinned', this.pinned);
+        this.toggleState('typing', this.typing !== '');
+        this.toggleState('loading', this.history === 'loading');
+        this.toggleState('empty', this.childrenKnown && this.turns.length === 0 && this.messages.length === 0);
+    }
+    warnMixed() {
+        if (this.warnedMixed || this.turns.length === 0 || this.messages.length === 0) {
+            return;
+        }
+        this.warnedMixed = true;
+        reportRuntime({
+            kind: 'mixed-turns',
+            message: `A chat was given ${this.messages.length} turns as children and ${this.turns.length} as \`turns\`, and draws the children after every turn from \`turns\`. Pass one or the other.`,
+            tag: this.localName,
+        });
     }
     follow(previous) {
         if (!previous?.length || this.turns.length === 0) {
@@ -526,9 +551,15 @@ let HelixHeadlessChat = class HelixHeadlessChat extends MixinCollection(HelixEle
         const count = this.fed ? this.turns.length : this.messages.length;
         const log = this.log;
         const scrolls = log !== null && log !== undefined && log.scrollHeight > log.clientHeight;
-        if (at < count - 1 && this.pinned && scrolls) {
-            this.requestPinned(false);
+        if (at < count - 1 && this.pinned && scrolls && this.requestPinned(false)) {
+            await this.updateComplete;
+        }
+        await this.showTurn(at);
+        if (at === count - 1 && !this.pinned && this.atBottom) {
+            this.requestPinned(true);
         }
+    }
+    async showTurn(at) {
         if (this.fed) {
             const drawn = () => this.renderRoot
                 ?.querySelector(`[part="turn"][data-index="${at}"]`)
@@ -559,7 +590,24 @@ let HelixHeadlessChat = class HelixHeadlessChat extends MixinCollection(HelixEle
                 this.stop = turn;
             }
         }
-        turn.focus();
+        turn.focus({ preventScroll: true });
+        this.reveal(turn);
+    }
+    reveal(turn) {
+        const log = this.log;
+        if (!log || this.pinned) {
+            return;
+        }
+        const box = log.getBoundingClientRect();
+        const rect = turn.getBoundingClientRect();
+        const by = rect.top < box.top || rect.height > box.height
+            ? rect.top - box.top
+            : Math.max(0, rect.bottom - box.bottom);
+        if (Math.abs(by) >= 1) {
+            log.scrollTop += by;
+            this.placed = log.scrollTop;
+        }
+        this.remember();
     }
     firstControlIn(names) {
         for (const name of names) {

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

@@ -18,7 +18,11 @@ import '../../copy-button/index.js';
  * from the accessibility tree and left out of a copy. Set `mark-lines` to
  * mark lines a reader should look at, such as `2, 4-6`: the block draws a
  * band behind each run, placed where the lines are laid out, so it follows a
- * highlighter's markup and lines that wrap. Set `wrap` to wrap long lines
+ * highlighter's markup and lines that wrap. `added-lines` and
+ * `removed-lines` mark lines the same way as inserted and deleted, as
+ * Expressive Code's `ins` and `del` do, in code that is not a diff. The bands
+ * are drawn and hidden from screen readers, so say in the text around the
+ * block what a marked line means. Set `wrap` to wrap long lines
  * rather than scroll them; a gutter then numbers each line where it starts.
  * Set `wrappable` for a button in the header that turns `wrap` on and off,
  * pressed while the lines wrap.
@@ -93,6 +97,8 @@ import '../../copy-button/index.js';
  * @slot actions - Controls for the block, in the header before the copy button.
  * @slot copied-icon - The copy button's icon after a copy. Defaults to a check mark.
  * @slot copy-icon - The copy button's icon before a copy. Defaults to a clipboard.
+ * @slot expand-icon - An icon on the button that shows every line of a capped block, before its words.
+ * @slot label - The block's name in the header, such as a file icon beside the file name. Replaces `label` and `language` there, and draws the header.
  *
  * @event {Event} change - A file tab showed its file, whose name `file` now holds.
  * @event {HelixBeforeChangeEvent} helix-before-change - A file tab is about to show its file, with the file's name in `detail.value`. Cancelable: cancel it to keep the file shown.
@@ -134,7 +140,9 @@ import '../../copy-button/index.js';
  * @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 block's name: its `label`, or its `language` where it has no label.
- * @csspart mark - The band behind a run of lines `mark-lines` names. The block writes where the run is laid out into `--code-block-mark-start`, `--code-block-mark-size`, and `--code-block-mark-inline-size` on it. Hidden from the accessibility tree.
+ * @csspart mark - The band behind a run of lines `mark-lines`, `added-lines` or `removed-lines` names. The block writes where the run is laid out into `--code-block-mark-start`, `--code-block-mark-size`, and `--code-block-mark-inline-size` on it. Hidden from the accessibility tree.
+ * @csspart mark-added - The band behind a run of lines `added-lines` names. Applied with `mark`.
+ * @csspart mark-removed - The band behind a run of lines `removed-lines` names. Applied with `mark`.
  * @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. In a `wrap` block with `line-numbers`, one line's number in the gutter, which the block makes as tall as the line it numbers through `--code-block-line-size`.
@@ -158,6 +166,11 @@ export declare class HelixHeadlessCodeBlock extends HelixElement {
      * `registerWords('de', { 'helix-code-block': { copyLabel: 'Code kopieren' } })`.
      */
     static words: string;
+    /**
+     * The lines to mark as inserted, as numbers and ranges counted from 1, such
+     * as `3-4`. Drawn as `mark-lines` is, in the added color. Not for a diff.
+     */
+    addedLines: string;
     /**
      * The name of a block that scrolls, which is a tab stop while it does.
      *
@@ -312,6 +325,11 @@ export declare class HelixHeadlessCodeBlock extends HelixElement {
      * `false`.
      */
     noCopy: boolean;
+    /**
+     * The lines to mark as deleted, as numbers and ranges counted from 1. Drawn
+     * as `mark-lines` is, in the removed color. Not for a diff.
+     */
+    removedLines: string;
     /**
      * The words of a button that shows a folded run of unchanged lines, in a
      * diff with `context-lines`. `{count}` is how many.

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

@@ -27,6 +27,7 @@ const nameOf = (block) => {
 let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
     constructor() {
         super(...arguments);
+        this.addedLines = '';
         this.codeLabel = 'Code';
         this.codeNameLabel = '{code}, {name}';
         this.collapseLabel = 'Show fewer lines';
@@ -43,6 +44,7 @@ let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
         this.lineNumbers = false;
         this.markLines = '';
         this.noCopy = false;
+        this.removedLines = '';
         this.showUnchangedLabel = '{count, plural, one {Show # unchanged line} other {Show # unchanged lines}}';
         this.wrap = false;
         this.wrapLabel = 'Wrap lines';
@@ -223,7 +225,7 @@ let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
     }
     placeLines() {
         const code = this.renderRoot.querySelector('[part="code"]');
-        const marks = [...this.renderRoot.querySelectorAll('[part="mark"]')];
+        const marks = [...this.renderRoot.querySelectorAll('[part~="mark"]')];
         const numbers = [
             ...this.renderRoot.querySelectorAll('[part="gutter"] > [part="number"]'),
         ];
@@ -356,8 +358,13 @@ let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
         catch (error) {
             globalThis.reportError?.(error);
         }
-        const runs = this.childrenKnown ? lineRuns(this.markLines) : [];
-        const marks = runs.map(([first, last]) => html `<span part="mark" aria-hidden="true" data-lines="${first}-${last}"></span>`);
+        const marks = this.childrenKnown
+            ? [
+                ...lineRuns(this.markLines).map(([first, last]) => html `<span part="mark" aria-hidden="true" data-lines="${first}-${last}"></span>`),
+                ...lineRuns(this.addedLines).map(([first, last]) => html `<span part="mark mark-added" aria-hidden="true" data-lines="${first}-${last}"></span>`),
+                ...lineRuns(this.removedLines).map(([first, last]) => html `<span part="mark mark-removed" aria-hidden="true" data-lines="${first}-${last}"></span>`),
+            ]
+            : [];
         const code = highlighted === undefined
             ? html `<code part="code">${marks}<slot @slotchange=${() => this.requestUpdate()}></slot></code>`
             : html `<code part="code">${marks}${unsafeHTML(highlighted)}</code><slot
@@ -376,7 +383,7 @@ let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
             : nothing;
         const name = this.label || this.language;
         const drawn = this.tabbed ? '' : name;
-        return html `${this.renderHeader(name, undefined, drawn)}
+        return html `${this.renderHeader(name, undefined, drawn, true)}
       <div part="frame">
         <pre id="block" part="block" translate="no">${gutter}${code}</pre>
         ${this.headed(drawn) ? nothing : this.renderCopy()}
@@ -396,16 +403,24 @@ let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
             this.toggleState('expanded', this.expanded);
         }}
     >
-      ${this.expanded ? this.collapseLabel : this.expandLabel}
+      ${this.slotted('expand-icon') ? html `<slot name="expand-icon"></slot>` : nothing}${this.expanded ? this.collapseLabel : this.expandLabel}
     </button>`;
     }
     headed(name) {
-        return name !== '' || (this.wrappable && !this.diff) || this.slotted('actions');
+        return (name !== '' ||
+            (this.wrappable && !this.diff) ||
+            this.slotted('actions') ||
+            (!this.diff && !this.tabbed && this.slotted('label')));
     }
-    renderHeader(name, value, drawn = name) {
+    renderHeader(name, value, drawn = name, own = false) {
         const acting = this.slotted('actions');
+        const label = own && !this.tabbed && this.slotted('label')
+            ? html `<span part="label"><slot name="label">${drawn}</slot></span>`
+            : drawn
+                ? html `<span part="label">${drawn}</span>`
+                : nothing;
         return this.headed(drawn)
-            ? html `<div part="header">${drawn ? html `<span part="label">${drawn}</span>` : nothing}${acting ? html `<span part="actions"><slot name="actions"></slot></span>` : nothing}${this.renderWrapToggle()}${this.renderCopy(value, name)}</div>`
+            ? html `<div part="header">${label}${acting ? html `<span part="actions"><slot name="actions"></slot></span>` : nothing}${this.renderWrapToggle()}${this.renderCopy(value, name)}</div>`
             : nothing;
     }
     renderWrapToggle() {
@@ -501,6 +516,9 @@ let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
         })}<slot hidden @slotchange=${() => this.requestUpdate()}></slot>`;
     }
 };
+__decorate([
+    property({ attribute: 'added-lines' })
+], HelixHeadlessCodeBlock.prototype, "addedLines", void 0);
 __decorate([
     words,
     property({ attribute: 'code-label' })
@@ -567,6 +585,9 @@ __decorate([
 __decorate([
     property({ attribute: 'no-copy', reflect: true, type: Boolean })
 ], HelixHeadlessCodeBlock.prototype, "noCopy", void 0);
+__decorate([
+    property({ attribute: 'removed-lines' })
+], HelixHeadlessCodeBlock.prototype, "removedLines", void 0);
 __decorate([
     words,
     property({ attribute: 'show-unchanged-label' })

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

@@ -1,5 +1,5 @@
-import { type Color, type ColorFormat, type ColorWords, HelixFormElement, KeyboardNavigationController } from '@fusion.dev/helix-core';
-import { type PropertyValues, type TemplateResult } from 'lit';
+import { type Color, type ColorFormat, type ColorWords, HelixFormElement, KeyboardNavigationController, type PickerFailure } from '@fusion.dev/helix-core';
+import { nothing, type PropertyValues, type TemplateResult } from 'lit';
 import '../../button/index.js';
 import '../../button-group/index.js';
 import '../../slider/index.js';
@@ -82,7 +82,7 @@ declare const HelixHeadlessColorPicker_base: (new (...args: any[]) => import("@f
  * @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 feedback - The message under the picker: `feedback`, or what is wrong with the answer once the picker is marked invalid.
  * @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.
@@ -321,10 +321,11 @@ export declare class HelixHeadlessColorPicker extends HelixHeadlessColorPicker_b
      * the anchor the browser points its bubble at.
      *
      * **Text that is not a color is bad input**, so a form does not submit
-     * `#00` from a half-typed value. The picker draws no message of its own, so
-     * reporting it as each keystroke arrives shows nothing until the form asks;
-     * Color Input shows its own message against the field the reader typed
-     * into.
+     * `#00` from a half-typed value. The picker marks it, and says
+     * `badInputMessage` under itself, once the reader leaves the value field or
+     * presses Enter, and a missing color once the reader has committed one or a
+     * form has refused the picker. Color Input shows its own message against the
+     * field the reader typed into.
      */
     required: boolean;
     /**
@@ -404,6 +405,48 @@ export declare class HelixHeadlessColorPicker extends HelixHeadlessColorPicker_b
     private get hinted();
     /** The ids a control in the picker is described by: the help, then the message. */
     private get describedBy();
+    /**
+     * Whether the reader is typing into the value field, between the first
+     * keystroke and the `change` that ends it.
+     *
+     * Half-typed text is rarely a color: `#00ff00` passes through `#0` and
+     * `#00ff0` on the way. So text that is not a color is refused once the
+     * reader leaves the field or presses Enter, and not on every keystroke.
+     */
+    private typing;
+    /**
+     * Text in the value field that is not a color, or undefined while the field
+     * holds the value.
+     *
+     * **Kept in the field and out of the value**, as a native number field keeps
+     * "12e": the text stays where the reader can correct it, the value stays the
+     * last color, and the picker reports `badInput` until the text is a color or
+     * the value moves. Measured before this: typed "nonsense" became the value,
+     * so a form read `brand=nonsense` and the square had no color to show.
+     */
+    private draft;
+    /**
+     * A required picker with no color is missing, and text that is not a color
+     * is refused, once the reader has finished typing it. See
+     * `MixinPickerFeedback.marked`.
+     *
+     * Measured before this: typed "nonsense" and a required picker its form
+     * refused both failed `checkValidity()` while `:state(invalid)` stayed off,
+     * the value field had no `aria-invalid`, and nothing was said.
+     */
+    protected get failure(): PickerFailure | undefined;
+    /**
+     * The line under the picker: `feedback`, or, where the picker is marked by
+     * its own validation, what is wrong.
+     */
+    private get said();
+    /**
+     * A reset ends any typing and takes back text that was not a color, so the
+     * field shows the color the reset put back.
+     */
+    formResetCallback(): void;
+    /** The line `said` holds, or nothing while it is empty. */
+    protected renderPickerFeedback(): TemplateResult | typeof nothing;
     /** Whether a pointer is dragging the square's handle, said as `:state(dragging)`. */
     private dragging;
     /** Whether the eyedropper is open, said as `:state(sampling)`. */

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

@@ -56,6 +56,8 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinPicke
         this.handleNamingSlot = () => {
             this.requestUpdate();
         };
+        this.typing = false;
+        this.draft = undefined;
         this.dragging = false;
         this.picking = false;
         this.owned = false;
@@ -68,7 +70,14 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinPicke
                 return;
             }
             const typed = event.target.value;
+            this.typing = true;
             const parsed = parseColor(typed);
+            if (!parsed && typed.trim() !== '') {
+                this.draft = typed;
+                this.sync();
+                return;
+            }
+            this.draft = undefined;
             if (parsed) {
                 this.moved = parsed;
                 this.owned = typed !== this.value;
@@ -261,9 +270,47 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinPicke
         return this.hint !== '' || this.slottedIn('hint').length > 0;
     }
     get describedBy() {
-        const ids = [this.hinted ? 'hint' : '', this.feedback === '' ? '' : 'feedback'].filter(Boolean);
+        const ids = [this.hinted ? 'hint' : '', this.said === '' ? '' : 'feedback'].filter(Boolean);
         return ids.length > 0 ? ids.join(' ') : nothing;
     }
+    get failure() {
+        if (this.draft !== undefined) {
+            return this.typing ? undefined : 'refused';
+        }
+        if (this.value === '') {
+            return this.required ? 'missing' : undefined;
+        }
+        return parseColor(this.value) === null ? 'refused' : undefined;
+    }
+    get said() {
+        if (this.feedback !== '') {
+            return this.feedback;
+        }
+        if (!this.marked || this.invalid) {
+            return '';
+        }
+        const failure = this.failure;
+        return failure === 'refused'
+            ? this.badInputMessage
+            : failure === 'missing'
+                ? this.valueMissingMessage
+                : '';
+    }
+    formResetCallback() {
+        super.formResetCallback();
+        this.typing = false;
+        if (this.draft !== undefined) {
+            this.draft = undefined;
+            const field = this.partNamed('value');
+            if (field) {
+                field.value = this.value;
+            }
+        }
+    }
+    renderPickerFeedback() {
+        const said = this.said;
+        return said === '' ? nothing : html `<p part="feedback" id="feedback">${said}</p>`;
+    }
     settle() {
         if (this.unsettled) {
             this.unsettled = false;
@@ -299,6 +346,10 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinPicke
         this.reportRequired();
     }
     reportRequired() {
+        if (this.draft !== undefined) {
+            this.internals.setValidity({ badInput: true }, this.badInputMessage, this.partNamed('value') ?? this.partNamed('grid') ?? undefined);
+            return;
+        }
         if (this.required && this.value === '') {
             this.internals.setValidity({ valueMissing: true }, this.valueMissingMessage, this.partNamed('grid') ?? undefined);
             return;
@@ -424,6 +475,9 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinPicke
         this.move({ [channel]: Number(control.value) });
     }
     willUpdate(changed) {
+        if (changed.has('value')) {
+            this.draft = undefined;
+        }
         super.willUpdate(changed);
         const outside = [...(this.internals.labels ?? [])];
         const named = this.named;
@@ -630,6 +684,7 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinPicke
                 @input=${this.handleValueInput}
                 @change=${(event) => {
                 event.stopPropagation();
+                this.typing = false;
                 this.settle();
             }}
               />`}
@@ -770,6 +825,12 @@ __decorate([
 __decorate([
     state()
 ], HelixHeadlessColorPicker.prototype, "swatchAt", void 0);
+__decorate([
+    state()
+], HelixHeadlessColorPicker.prototype, "typing", void 0);
+__decorate([
+    state()
+], HelixHeadlessColorPicker.prototype, "draft", void 0);
 __decorate([
     state()
 ], HelixHeadlessColorPicker.prototype, "dragging", void 0);

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

@@ -240,12 +240,13 @@ export declare class HelixHeadlessCombobox extends HelixHeadlessCombobox_base {
     /**
      * Whether more than one option can be chosen.
      *
-     * The list already does the work: `value` comes apart on commas, a press
-     * toggles rather than replaces, and the arrows move without choosing. What
-     * this adds is the tags, and keeping the panel open between picks.
+     * The list already does the work: `value` is the chosen values joined with
+     * commas, a press toggles rather than replaces, and the arrows move without
+     * choosing. What this adds is the tags, and keeping the panel open between
+     * picks.
      *
-     * A comma is therefore not available inside an option's value, which is the
-     * listbox's contract and not this element's to change.
+     * An option's value may hold a comma, and it is read as one value, as
+     * `Select` and `Listbox` read it. So may an answer the reader created.
      *
      * **The list is told, and the field is not.** `aria-multiselectable` belongs
      * to `listbox`, `grid`, `tree` and `tablist`, and `combobox` dropped it in
@@ -385,8 +386,17 @@ export declare class HelixHeadlessCombobox extends HelixHeadlessCombobox_base {
      */
     protected readonly upgradeWatch: UpgradeController;
     protected readonly panel: PopoverController;
-    /** The values chosen, in the order they were chosen. */
+    /**
+     * The values chosen, in the order they were chosen, read against the
+     * options' values and the answers created here, so a value that holds a
+     * comma is one value. See `chosenValues`.
+     *
+     * Measured before this: choosing `Paris, France` drew two tags, "Paris" and
+     * "France", and the form received two entries.
+     */
     private get values();
+    /** The answers created here, which no option holds, kept so their commas read as theirs. */
+    private readonly created;
     /**
      * The chosen options themselves, for their words.
      *