@fusion.dev/helix-headless 0.0.0-dev → 0.0.2

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

@@ -38,10 +38,10 @@ import { parseColor, toCss } from '../../color-picker/color.js';
  * the value itself, for the reason Date Input gives about its dates: half-typed
  * input does not survive a round trip through a formatter.
  *
- * The properties below are written by this component and read by whoever draws
- * it. A consumer sets none of them: they carry a number this element computed
- * and CSS cannot, which is what lets a stylesheet on this tier draw the thing
- * without measuring anything itself.
+ * The custom property below is written by this component and never set by a
+ * consumer: it carries a value this element resolved and CSS cannot, which is
+ * what lets a stylesheet on this tier paint the swatch without parsing anything
+ * itself.
  *
  * @since 0.1.0
  * @status experimental
@@ -112,19 +112,19 @@ let HelixHeadlessColorInput = class HelixHeadlessColorInput extends MixinControl
         this.aria = new AriaForwardController(this, {
             target: () => this.renderRoot?.querySelector('[part="control"]') ?? null,
         });
+        /**
+         * Whether the color carries an alpha channel.
+         */
+        this.alpha = false;
         /**
          * What the browser may autofill in the text field, as a platform token.
          *
          * **Defaults to `off`, which is not the platform's default and is the
-         * point.** The field filters a list rather than collecting a value, so a
-         * browser offering to fill it with a saved address is competing for the same
-         * keystrokes as the listbox. A consumer who wants autofill can still ask.
+         * point.** The field holds a color, so a browser offering to fill it with a
+         * saved address is competing for the same keystrokes as the picker. A
+         * consumer who wants autofill can still ask.
          */
         this.autocomplete = 'off';
-        /**
-         * Whether the color carries an alpha channel.
-         */
-        this.alpha = false;
         /**
          * Whether the reader may change the format from the panel.
          */
@@ -148,15 +148,12 @@ let HelixHeadlessColorInput = class HelixHeadlessColorInput extends MixinControl
              *
              * A control is not always one element: the button that opens this panel is
              * part of it, and a press on it is not a press outside. Scoped to the
-             * surface alone, `pointerdown` on the trigger closed the panel and the
-             * trigger's own `toggleOpen` reopened it on the `click` that followed, so
-             * the panel could never be closed by the button that opened it. Measured
-             * across all five popover-bearing components: Menu, Popover and Tooltip
-             * already named their invoker; this one and its three siblings did not, and
-             * all four stayed open on a second press where Menu closed.
+             * surface alone, `pointerdown` on the trigger closes the panel and the
+             * trigger's own `toggleOpen` reopens it on the `click` that follows, so the
+             * panel can never be closed by the button that opened it.
              *
-             * `DismissController` documents this exact failure and takes a list for it.
-             * The list was the fix; using it was the part that did not happen here. */
+             * `DismissController` documents this exact failure and takes a list for
+             * it. */
             boundary: () => [
                 this.renderRoot?.querySelector('[part="surface"]'),
                 this.renderRoot?.querySelector('[part="trigger"]'),
@@ -296,10 +293,8 @@ let HelixHeadlessColorInput = class HelixHeadlessColorInput extends MixinControl
            `value` is an accessor over `valueState ?? defaultValue`, so a consumer
            moving `default-value` on an untouched control moves what the form
            submits without ever putting `value` in the changed map, and the reported
-           entry went stale. Native `<input>` updates in exactly that case, which is
-           the behavior the mixin's own notes take as the reference. Fifteen of the
-           twenty controls here already reported unconditionally; this is one of the
-           five that did not. */
+           entry goes stale. Native `<input>` updates in exactly that case, which is
+           the behavior the mixin's own notes take as the reference. */
         this.sync();
         if (changed.has('value') && parseColor(this.value)) {
             this.settled = this.value;
@@ -330,9 +325,9 @@ let HelixHeadlessColorInput = class HelixHeadlessColorInput extends MixinControl
      * editable field for the same value, which is two places to type with no
      * answer to which one is authoritative or which has the caret.
      *
-     * The other way round was considered, this element dropping its own field and
-     * letting the panel's be the only one. It is worse for a form: the value could
-     * not be read at a glance or pasted without opening a panel.
+     * Not the other way round, this element dropping its own field and letting the
+     * panel's be the only one: the value could then not be read at a glance or
+     * pasted without opening a panel.
      */
     /**
      * The picker the field opens, behind a seam the styled tier can move.
@@ -379,8 +374,8 @@ let HelixHeadlessColorInput = class HelixHeadlessColorInput extends MixinControl
         <!-- The same pair Input carries, in the same places: leading content
              before the text, trailing content after it and before the trigger.
              A label wanting to sit inside the field rather than over it goes
-             here, which is what the toggle group's own label-placement does and
-             what this had no way to express. Backticks stay out of this
+             here, which is what the toggle group's own label-placement does.
+             Backticks stay out of this
              comment: it is inside a tagged template, so one would end the
              literal and the error lands on a line further down. -->
         <slot name="start"></slot>
@@ -426,15 +421,12 @@ let HelixHeadlessColorInput = class HelixHeadlessColorInput extends MixinControl
       ${this.renderHint()}${this.renderFeedback()}`;
     }
 };
-__decorate([
-    property()
-], HelixHeadlessColorInput.prototype, "autocomplete", void 0);
-__decorate([
-    property({ reflect: true })
-], HelixHeadlessColorInput.prototype, "variant", void 0);
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessColorInput.prototype, "alpha", void 0);
+__decorate([
+    property()
+], HelixHeadlessColorInput.prototype, "autocomplete", void 0);
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessColorInput.prototype, "format", void 0);
@@ -450,6 +442,9 @@ __decorate([
 __decorate([
     property({ attribute: 'trigger-label' })
 ], HelixHeadlessColorInput.prototype, "triggerLabel", void 0);
+__decorate([
+    property({ reflect: true })
+], HelixHeadlessColorInput.prototype, "variant", void 0);
 HelixHeadlessColorInput = __decorate([
     customElement('helix-headless-color-input')
 ], HelixHeadlessColorInput);

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

@@ -14,9 +14,8 @@
  * set to, so a value stays in the shape the consumer asked for however it was
  * entered.
  *
- * **What is written is the comma form.** Both are valid and the space-separated
- * one is newer, which was the reason it was chosen first; the commas are what a
- * reader recognizes, what most code around them holds, and what pastes into
+ * **What is written is the comma form.** Both are valid, and the commas are what
+ * a reader recognizes, what most code around them holds, and what pastes into
  * anything without a second thought. A syntax a value is handed *out* in is not
  * the place to be early. `rgba` and `hsla` come with them, since a comma form
  * with a fourth argument is spelled that way.
@@ -42,11 +41,11 @@ export declare const toRgb: (color: Color) => {
 /**
  * Splits a comma-separated list of colors, ignoring the commas inside them.
  *
- * A plain `split(',')` is what this was, and it cannot hold the legacy syntaxes:
- * `#ef4444, rgb(249 115 22), rgba(34,197,94,.5)` came apart into six fragments,
- * four of them not colors, and the row quietly rendered three swatches instead
- * of four. The modern space-separated forms survived it, which is what made the
- * list look like it worked.
+ * A plain `split(',')` cannot hold the legacy syntaxes:
+ * `#ef4444, rgb(249 115 22), rgba(34,197,94,.5)` comes apart into six fragments,
+ * four of them not colors, and the row quietly renders three swatches instead of
+ * four. The modern space-separated forms survive it, which is what makes such a
+ * list look like it works.
  *
  * Depth rather than a regular expression, because the thing that matters is
  * whether a comma is inside a function call and that is exactly what a counter

package/dist/color-picker/color.js

@@ -14,9 +14,8 @@
  * set to, so a value stays in the shape the consumer asked for however it was
  * entered.
  *
- * **What is written is the comma form.** Both are valid and the space-separated
- * one is newer, which was the reason it was chosen first; the commas are what a
- * reader recognizes, what most code around them holds, and what pastes into
+ * **What is written is the comma form.** Both are valid, and the commas are what
+ * a reader recognizes, what most code around them holds, and what pastes into
  * anything without a second thought. A syntax a value is handed *out* in is not
  * the place to be early. `rgba` and `hsla` come with them, since a comma form
  * with a fourth argument is spelled that way.
@@ -108,11 +107,11 @@ const toHsl = (color) => {
 /**
  * Splits a comma-separated list of colors, ignoring the commas inside them.
  *
- * A plain `split(',')` is what this was, and it cannot hold the legacy syntaxes:
- * `#ef4444, rgb(249 115 22), rgba(34,197,94,.5)` came apart into six fragments,
- * four of them not colors, and the row quietly rendered three swatches instead
- * of four. The modern space-separated forms survived it, which is what made the
- * list look like it worked.
+ * A plain `split(',')` cannot hold the legacy syntaxes:
+ * `#ef4444, rgb(249 115 22), rgba(34,197,94,.5)` comes apart into six fragments,
+ * four of them not colors, and the row quietly renders three swatches instead of
+ * four. The modern space-separated forms survive it, which is what makes such a
+ * list look like it works.
  *
  * Depth rather than a regular expression, because the thing that matters is
  * whether a comma is inside a function call and that is exactly what a counter

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

@@ -79,7 +79,6 @@ declare const HelixHeadlessColorPicker_base: (new (...args: any[]) => import("@f
  * @csspart grid-brightness - The range input for its vertical axis.
  * @csspart grid-handle - The mark showing where in the square the color sits.
  * @csspart grid-saturation - The range input for the square's horizontal axis.
- * @csspart icon - A glyph this component draws.
  * @csspart sample - The chip of the current color, which copies it when pressed.
  * @csspart swatch - One preset.
  * @csspart swatches - The row of presets.
@@ -91,40 +90,47 @@ declare const HelixHeadlessColorPicker_base: (new (...args: any[]) => import("@f
  * @cssproperty --color-picker-swatch - A color to paint: the current one on the sample, a preset's on each preset.
  */
 export declare class HelixHeadlessColorPicker extends HelixHeadlessColorPicker_base {
+    /**
+     * Whether the color carries an alpha channel.
+     *
+     * Off by default, because it widens every value written, and a consumer who
+     * did not ask for transparency should not have to strip a byte off each one.
+     */
+    alpha: boolean;
     /**
      * What the browser may autofill in the text field, as a platform token.
      *
      * **Defaults to `off`, which is not the platform's default and is the
-     * point.** The field filters a list rather than collecting a value, so a
-     * browser offering to fill it with a saved address is competing for the same
-     * keystrokes as the listbox. A consumer who wants autofill can still ask.
+     * point.** The field holds a color, so a browser offering to fill it with a
+     * saved address is competing for the same keystrokes as the square and the
+     * ramps. A consumer who wants autofill can still ask.
      */
     autocomplete: string;
+    /**
+     * The syntax the value is written in: `hex`, `rgb` or `hsl`.
+     *
+     * Only what is written. Everything is read whatever this says, so a picker on
+     * `hex` still takes an `rgb()` handed to it and stores the hex for it.
+     */
+    format?: ColorFormat;
     /**
      * Whether the current selection fails validation.
      *
-     * A flag rather than a message, which is the split Date Picker already drew and
-     * these two now follow. 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.
+     * 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;
     /**
-     * Whether the color carries an alpha channel.
-     *
-     * Off by default, because it widens every value written, and a consumer who
-     * did not ask for transparency should not have to strip a byte off each one.
+     * Whether the eyedropper is offered where the browser has one.
      */
-    alpha: boolean;
+    noEyedropper: boolean;
     /**
-     * The syntax the value is written in: `hex`, `rgb` or `hsl`.
-     *
-     * Only what is written. Everything is read whatever this says, so a picker on
-     * `hex` still takes an `rgb()` handed to it and stores the hex for it.
+     * Whether the reader may change the format.
      */
-    format?: ColorFormat;
+    noFormat: boolean;
     /**
      * Whether to leave the value out, for a picker whose value is stated elsewhere.
      *
@@ -135,20 +141,11 @@ export declare class HelixHeadlessColorPicker extends HelixHeadlessColorPicker_b
      *
      * Color Input sets this, because its field is that input. Two editable fields
      * for one value is the outcome worth avoiding: two places to type, and no
-     * answer to which one is authoritative or which has the caret. The other way
-     * round was considered, Color Input dropping its own field and letting this be
-     * the only one, and it is worse for a form: the value cannot be read or pasted
-     * without opening a panel.
+     * answer to which one is authoritative or which has the caret. Do not close it
+     * the other way round, with Color Input dropping its own field: the value
+     * would then be unreadable and unpasteable without opening a panel.
      */
     noValue: boolean;
-    /**
-     * Whether the reader may change the format.
-     */
-    noFormat: boolean;
-    /**
-     * Whether the eyedropper is offered where the browser has one.
-     */
-    noEyedropper: boolean;
     /**
      * Colors offered under the picker, as a comma-separated list.
      */
@@ -210,12 +207,11 @@ export declare class HelixHeadlessColorPicker extends HelixHeadlessColorPicker_b
      *
      * A reader who has just built a color wants it in a stylesheet, and the
      * alternative is selecting text out of a field that may not be on screen. The
-     * chip is the obvious target: it is the color, at the size of a control, and
-     * it had no job at all before this.
+     * chip is the obvious target: it is the color, at the size of a control.
      *
-     * The controller rather than the four lines it replaces, because a copy button
-     * is coming and the two share everything that is easy to get wrong: the write,
-     * the confirmation, the timer that ends it, the event, and a failure that is
+     * The controller rather than four lines here, because Copy Button shares
+     * everything about this that is easy to get wrong: the write, the
+     * confirmation, the timer that ends it, the event, and a failure that is
      * correctly silent.
      */
     private readonly copier;
@@ -247,18 +243,21 @@ export declare class HelixHeadlessColorPicker extends HelixHeadlessColorPicker_b
     protected updated(changed: import('lit').PropertyValues): void;
     /** Puts the keyboard on the square, which is the control a reader wants. */
     focus(options?: FocusOptions): void;
-    /** One of the ramps under the square. */
+    /**
+     * One of the ramps under the square.
+     *
+     * `protected` rather than `private`, the method being the seam a tier above
+     * renders its own ramp through.
+     */
     protected renderChannel(channel: 'alpha' | 'hue', label: string, max: number, value: number): TemplateResult;
     /**
      * One axis of the area, taken the way `takeChannel` takes a rail.
      *
-     * **Named rather than inline because of the first line.** These were two arrow
-     * functions that moved the color and stopped nothing, so the `<input
-     * type="range">` behind each axis sent its own composed `input` straight past
-     * this element to whoever was listening on it: a consumer dragging the area
-     * received the range's event and not this component's. `takeChannel` beside it
-     * has stopped its own since it was written, which is what made the omission
-     * hard to see. Found by sweeping every family that renders a native control.
+     * **Named rather than inline because of the first line.** The `<input
+     * type="range">` behind each axis sends its own composed `input`, which
+     * reaches a consumer listening on this element beside this element's own
+     * unless it is stopped: a consumer dragging the area receives the range's
+     * event and not this component's.
      */
     private takeArea;
     /**
@@ -267,15 +266,15 @@ export declare class HelixHeadlessColorPicker extends HelixHeadlessColorPicker_b
      * **Both native events, because a slider sends both and at different
      * moments.** It is one of the controls a reader edits continuously, so it
      * announces `input` all the way through a drag and `change` when the drag
-     * ends. Listening only for the commit meant the picker heard nothing while a
-     * handle moved and the hue and alpha handles did not move at all.
+     * ends. Listening only for the commit leaves the picker deaf while a handle
+     * moves, and the hue and alpha handles do not move at all.
      *
-     * **Read off the target rather than out of a detail**, which is what changed
-     * on 26 Aug 2026. This bound `helix-input` and `helix-change` and took the
-     * proposed value out of the event. Those are requests: they announce what the
-     * slider is *about* to do, before anything has moved and while a listener may
-     * still refuse it. The native pair fires after the slider applied, so the
-     * value is on the element and cannot disagree with it. See 294.
+     * **Read off the target rather than out of a detail.** Do not bind
+     * `helix-input` and `helix-change` and take the proposed value out of the
+     * event: those are requests, announcing what the slider is *about* to do,
+     * before anything has moved and while a listener may still refuse it. The
+     * native pair fires after the slider applied, so the value is on the element
+     * and cannot disagree with it.
      *
      * Idempotent, so taking both costs nothing: the same value applied twice is
      * the same color.
@@ -287,10 +286,9 @@ export declare class HelixHeadlessColorPicker extends HelixHeadlessColorPicker_b
      *
      * A method rather than a fragment inline, so a tier above can render its own,
      * wrap this one, pass it a property the base does not know about, or leave it
-     * out, without reimplementing the whole template to do any of them. The tag is
-     * interpolated rather than written, so `tier` resolves it: this renders the
-     * headless element, and a styled subclass that sets `tier` renders the styled one
-     * from the same template.
+     * out, without reimplementing the whole template. The tag is interpolated
+     * rather than written, so `tier` resolves it and one template serves both
+     * tiers.
      */
     protected renderTools(): TemplateResult;
     protected render(): TemplateResult;

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

@@ -103,7 +103,6 @@ const START = { alpha: 100, brightness: 100, hue: 0, saturation: 100 };
  * @csspart grid-brightness - The range input for its vertical axis.
  * @csspart grid-handle - The mark showing where in the square the color sits.
  * @csspart grid-saturation - The range input for the square's horizontal axis.
- * @csspart icon - A glyph this component draws.
  * @csspart sample - The chip of the current color, which copies it when pressed.
  * @csspart swatch - One preset.
  * @csspart swatches - The row of presets.
@@ -117,33 +116,40 @@ const START = { alpha: 100, brightness: 100, hue: 0, saturation: 100 };
 let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinControllerValue(HelixFormElement) {
     constructor() {
         super(...arguments);
+        /**
+         * Whether the color carries an alpha channel.
+         *
+         * Off by default, because it widens every value written, and a consumer who
+         * did not ask for transparency should not have to strip a byte off each one.
+         */
+        this.alpha = false;
         /**
          * What the browser may autofill in the text field, as a platform token.
          *
          * **Defaults to `off`, which is not the platform's default and is the
-         * point.** The field filters a list rather than collecting a value, so a
-         * browser offering to fill it with a saved address is competing for the same
-         * keystrokes as the listbox. A consumer who wants autofill can still ask.
+         * point.** The field holds a color, so a browser offering to fill it with a
+         * saved address is competing for the same keystrokes as the square and the
+         * ramps. A consumer who wants autofill can still ask.
          */
         this.autocomplete = 'off';
         /**
          * Whether the current selection fails validation.
          *
-         * A flag rather than a message, which is the split Date Picker already drew and
-         * these two now follow. 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.
+         * 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.
          */
         this.invalid = false;
         /**
-         * Whether the color carries an alpha channel.
-         *
-         * Off by default, because it widens every value written, and a consumer who
-         * did not ask for transparency should not have to strip a byte off each one.
+         * Whether the eyedropper is offered where the browser has one.
          */
-        this.alpha = false;
+        this.noEyedropper = false;
+        /**
+         * Whether the reader may change the format.
+         */
+        this.noFormat = false;
         /**
          * Whether to leave the value out, for a picker whose value is stated elsewhere.
          *
@@ -154,20 +160,11 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinContr
          *
          * Color Input sets this, because its field is that input. Two editable fields
          * for one value is the outcome worth avoiding: two places to type, and no
-         * answer to which one is authoritative or which has the caret. The other way
-         * round was considered, Color Input dropping its own field and letting this be
-         * the only one, and it is worse for a form: the value cannot be read or pasted
-         * without opening a panel.
+         * answer to which one is authoritative or which has the caret. Do not close it
+         * the other way round, with Color Input dropping its own field: the value
+         * would then be unreadable and unpasteable without opening a panel.
          */
         this.noValue = false;
-        /**
-         * Whether the reader may change the format.
-         */
-        this.noFormat = false;
-        /**
-         * Whether the eyedropper is offered where the browser has one.
-         */
-        this.noEyedropper = false;
         /**
          * Colors offered under the picker, as a comma-separated list.
          */
@@ -223,12 +220,11 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinContr
          *
          * A reader who has just built a color wants it in a stylesheet, and the
          * alternative is selecting text out of a field that may not be on screen. The
-         * chip is the obvious target: it is the color, at the size of a control, and
-         * it had no job at all before this.
+         * chip is the obvious target: it is the color, at the size of a control.
          *
-         * The controller rather than the four lines it replaces, because a copy button
-         * is coming and the two share everything that is easy to get wrong: the write,
-         * the confirmation, the timer that ends it, the event, and a failure that is
+         * The controller rather than four lines here, because Copy Button shares
+         * everything about this that is easy to get wrong: the write, the
+         * confirmation, the timer that ends it, the event, and a failure that is
          * correctly silent.
          */
         this.copier = new CopyController(this);
@@ -351,9 +347,12 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinContr
     focus(options) {
         this.renderRoot?.querySelector('[part="grid-saturation"]')?.focus(options);
     }
-    /** One of the ramps under the square. */
-    /* `protected` rather than `private`: the method was already the seam and a
-       tier above simply could not reach it. */
+    /**
+     * One of the ramps under the square.
+     *
+     * `protected` rather than `private`, the method being the seam a tier above
+     * renders its own ramp through.
+     */
     renderChannel(channel, label, max, value) {
         return html `<${this.tag('slider')}
       part="channel"
@@ -373,13 +372,11 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinContr
     /**
      * One axis of the area, taken the way `takeChannel` takes a rail.
      *
-     * **Named rather than inline because of the first line.** These were two arrow
-     * functions that moved the color and stopped nothing, so the `<input
-     * type="range">` behind each axis sent its own composed `input` straight past
-     * this element to whoever was listening on it: a consumer dragging the area
-     * received the range's event and not this component's. `takeChannel` beside it
-     * has stopped its own since it was written, which is what made the omission
-     * hard to see. Found by sweeping every family that renders a native control.
+     * **Named rather than inline because of the first line.** The `<input
+     * type="range">` behind each axis sends its own composed `input`, which
+     * reaches a consumer listening on this element beside this element's own
+     * unless it is stopped: a consumer dragging the area receives the range's
+     * event and not this component's.
      */
     takeArea(axis, event) {
         event.stopPropagation();
@@ -392,15 +389,15 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinContr
      * **Both native events, because a slider sends both and at different
      * moments.** It is one of the controls a reader edits continuously, so it
      * announces `input` all the way through a drag and `change` when the drag
-     * ends. Listening only for the commit meant the picker heard nothing while a
-     * handle moved and the hue and alpha handles did not move at all.
+     * ends. Listening only for the commit leaves the picker deaf while a handle
+     * moves, and the hue and alpha handles do not move at all.
      *
-     * **Read off the target rather than out of a detail**, which is what changed
-     * on 26 Aug 2026. This bound `helix-input` and `helix-change` and took the
-     * proposed value out of the event. Those are requests: they announce what the
-     * slider is *about* to do, before anything has moved and while a listener may
-     * still refuse it. The native pair fires after the slider applied, so the
-     * value is on the element and cannot disagree with it. See 294.
+     * **Read off the target rather than out of a detail.** Do not bind
+     * `helix-input` and `helix-change` and take the proposed value out of the
+     * event: those are requests, announcing what the slider is *about* to do,
+     * before anything has moved and while a listener may still refuse it. The
+     * native pair fires after the slider applied, so the value is on the element
+     * and cannot disagree with it.
      *
      * Idempotent, so taking both costs nothing: the same value applied twice is
      * the same color.
@@ -423,10 +420,9 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinContr
      *
      * A method rather than a fragment inline, so a tier above can render its own,
      * wrap this one, pass it a property the base does not know about, or leave it
-     * out, without reimplementing the whole template to do any of them. The tag is
-     * interpolated rather than written, so `tier` resolves it: this renders the
-     * headless element, and a styled subclass that sets `tier` renders the styled one
-     * from the same template.
+     * out, without reimplementing the whole template. The tag is interpolated
+     * rather than written, so `tier` resolves it and one template serves both
+     * tiers.
      */
     renderTools() {
         return html `<${this.tag('button-group')} part="actions" label="Color tools">
@@ -540,27 +536,27 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinContr
       </div>`;
     }
 };
-__decorate([
-    property()
-], HelixHeadlessColorPicker.prototype, "autocomplete", void 0);
-__decorate([
-    property({ reflect: true, type: Boolean })
-], HelixHeadlessColorPicker.prototype, "invalid", void 0);
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessColorPicker.prototype, "alpha", void 0);
+__decorate([
+    property()
+], HelixHeadlessColorPicker.prototype, "autocomplete", void 0);
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessColorPicker.prototype, "format", void 0);
 __decorate([
-    property({ attribute: 'no-value', type: Boolean })
-], HelixHeadlessColorPicker.prototype, "noValue", void 0);
+    property({ reflect: true, type: Boolean })
+], HelixHeadlessColorPicker.prototype, "invalid", void 0);
+__decorate([
+    property({ attribute: 'no-eyedropper', type: Boolean })
+], HelixHeadlessColorPicker.prototype, "noEyedropper", void 0);
 __decorate([
     property({ attribute: 'no-format', type: Boolean })
 ], HelixHeadlessColorPicker.prototype, "noFormat", void 0);
 __decorate([
-    property({ attribute: 'no-eyedropper', type: Boolean })
-], HelixHeadlessColorPicker.prototype, "noEyedropper", void 0);
+    property({ attribute: 'no-value', type: Boolean })
+], HelixHeadlessColorPicker.prototype, "noValue", void 0);
 __decorate([
     property()
 ], HelixHeadlessColorPicker.prototype, "swatches", void 0);