@fusion.dev/helix-headless 0.143.0 → 0.144.0

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

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { AriaForwardController, customElement, HelixFormElement, MixinControllerOpen, MixinControllerValue, MixinField, MixinPickerField, parseColor, toCss, } from '@fusion.dev/helix-core';
+import { AriaForwardController, colorName, customElement, HelixFormElement, MixinControllerOpen, MixinControllerValue, MixinField, MixinPickerField, parseColor, toCss, } from '@fusion.dev/helix-core';
 import { nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { html } from 'lit/static-html.js';
@@ -17,6 +17,8 @@ let HelixHeadlessColorInput = class HelixHeadlessColorInput extends MixinPickerF
         });
         this.alpha = false;
         this.autocomplete = 'off';
+        this.channelFields = false;
+        this.colorWords = {};
         this.noFormat = false;
         this.placeholder = '#000000';
         this.readOnly = false;
@@ -70,6 +72,13 @@ let HelixHeadlessColorInput = class HelixHeadlessColorInput extends MixinPickerF
     get picked() {
         return parseColor(this.value) ? this.value : this.settled;
     }
+    get swatchWords() {
+        const parsed = parseColor(this.value);
+        if (!parsed) {
+            return this.value || this.triggerLabel;
+        }
+        return `${colorName(parsed, this.colorWords, this.lang)} ${this.value}`;
+    }
     get painted() {
         const parsed = parseColor(this.value);
         return parsed ? toCss(parsed) : 'transparent';
@@ -107,15 +116,19 @@ let HelixHeadlessColorInput = class HelixHeadlessColorInput extends MixinPickerF
         channel-marker: picker-channel-marker, channel-marker-label: picker-channel-marker-label,
         channel-markers: picker-channel-markers, channel-output: picker-channel-output,
         channels: picker-channels, controls: picker-controls, eyedropper: picker-eyedropper,
-        eyedropper-button: picker-eyedropper-button, eyedropper-text: picker-eyedropper-text, footer: picker-footer, format: picker-format,
-        format-button: picker-format-button, format-text: picker-format-text, grid: picker-grid,
+        eyedropper-button: picker-eyedropper-button, eyedropper-live: picker-eyedropper-live, eyedropper-text: picker-eyedropper-text,
+        field: picker-field, field-input: picker-field-input, field-label: picker-field-label,
+        fields: picker-fields, footer: picker-footer, format: picker-format,
+        format-button: picker-format-button, format-live: picker-format-live, format-text: picker-format-text, grid: picker-grid,
         grid-brightness: picker-grid-brightness, grid-handle: picker-grid-handle,
         grid-saturation: picker-grid-saturation, icon: picker-icon, sample: picker-sample,
         swatch: picker-swatch, swatches: picker-swatches, value: picker-value"
       ?invalid=${this.resolvedFeedback !== ''}
       ?alpha=${this.alpha}
+      ?channel-fields=${this.channelFields}
       ?no-format=${this.noFormat}
       ?no-value=${this.variant !== 'swatch'}
+      .colorWords=${this.colorWords}
       .format=${this.format ?? 'hex'}
       .value=${this.picked}
       swatches=${this.swatches || nothing}
@@ -182,7 +195,7 @@ let HelixHeadlessColorInput = class HelixHeadlessColorInput extends MixinPickerF
           ></span>
           <slot name="trigger"></slot>
           ${this.variant === 'swatch'
-            ? html `<span id="swatch-value" hidden>${this.value || this.triggerLabel}</span>`
+            ? html `<span id="swatch-value" hidden>${this.swatchWords}</span>`
             : nothing}
         </button>
       </div>
@@ -207,6 +220,12 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessColorInput.prototype, "autocomplete", void 0);
+__decorate([
+    property({ attribute: 'channel-fields', type: Boolean })
+], HelixHeadlessColorInput.prototype, "channelFields", void 0);
+__decorate([
+    property({ attribute: 'color-words', type: Object })
+], HelixHeadlessColorInput.prototype, "colorWords", void 0);
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessColorInput.prototype, "format", void 0);

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

@@ -0,0 +1,26 @@
+import { type Color, type ColorFormat } from '@fusion.dev/helix-core';
+/** One number a color is written with, in the syntax the picker writes. */
+export type ChannelName = 'alpha' | 'blue' | 'green' | 'hue' | 'lightness' | 'red' | 'saturation';
+/** A channel as a field shows it: its number and the range it may take. */
+export interface ChannelField {
+    channel: ChannelName;
+    max: number;
+    min: number;
+    value: number;
+}
+/**
+ * The numbers a color is written with in `format`, for a field each, as React
+ * Aria's ColorField takes a `channel`: red, green and blue for hex and rgb,
+ * hue, saturation and lightness for hsl, and the opacity where the picker
+ * carries one.
+ *
+ * Hex is written as bytes, so its fields are the bytes: a field of two hex
+ * digits would ask a reader to count in base sixteen.
+ */
+export declare const channelFields: (value: string, color: Color, format: ColorFormat, alpha: boolean) => ChannelField[];
+/**
+ * The value with one channel set, kept inside the channel's range and written
+ * in `format` the way the picker writes every value: the comma form, and the
+ * opacity only with `alpha`. `null` where the number is no number.
+ */
+export declare const writeChannel: (fields: readonly ChannelField[], format: ColorFormat, alpha: boolean, channel: ChannelName, value: number) => string | null;

package/dist/color-picker/channels.js

@@ -0,0 +1,84 @@
+import { toHsl, toRgb } from '@fusion.dev/helix-core';
+const clamp = (value, low, high) => Math.min(high, Math.max(low, value));
+const percent = (token) => {
+    if (token === undefined) {
+        return 100;
+    }
+    const number = Number.parseFloat(token);
+    return Number.isNaN(number) ? 100 : clamp(token.includes('%') ? number : number * 100, 0, 100);
+};
+const readWritten = (value, format) => {
+    const text = value.trim().toLowerCase();
+    if (format !== 'hsl' && /^#([\da-f]{3,4}|[\da-f]{6}|[\da-f]{8})$/.test(text)) {
+        const digits = text.slice(1);
+        const width = digits.length <= 4 ? 1 : 2;
+        const byte = (index) => {
+            const piece = digits.slice(index * width, index * width + width);
+            return Number.parseInt(width === 1 ? piece + piece : piece, 16);
+        };
+        const count = digits.length / width;
+        return [byte(0), byte(1), byte(2), count === 4 ? Math.round((byte(3) / 255) * 100) : 100];
+    }
+    const call = /^(rgba?|hsla?)\(([^)]*)\)$/.exec(text);
+    if (!call?.[1] || call[2] === undefined) {
+        return null;
+    }
+    if (call[1].startsWith('hsl') !== (format === 'hsl')) {
+        return null;
+    }
+    const [first, second, third, fourth] = call[2].replace(/[,/]/g, ' ').split(/\s+/).filter(Boolean);
+    const numbers = [first, second, third].map((one) => Number.parseFloat(one ?? ''));
+    if (numbers.some(Number.isNaN)) {
+        return null;
+    }
+    return [...numbers, percent(fourth)].map((one) => Math.round(one));
+};
+export const channelFields = (value, color, format, alpha) => {
+    const written = readWritten(value, format);
+    const fromModel = () => {
+        if (format === 'hsl') {
+            const { hue, lightness, saturation } = toHsl(color);
+            return [Math.round(hue), saturation, lightness, Math.round(color.alpha)];
+        }
+        const { blue, green, red } = toRgb(color);
+        return [red, green, blue, Math.round(color.alpha)];
+    };
+    const [one = 0, two = 0, three = 0, four = 100] = written ?? fromModel();
+    const fields = format === 'hsl'
+        ? [
+            { channel: 'hue', max: 360, min: 0, value: one },
+            { channel: 'saturation', max: 100, min: 0, value: two },
+            { channel: 'lightness', max: 100, min: 0, value: three },
+        ]
+        : [
+            { channel: 'red', max: 255, min: 0, value: one },
+            { channel: 'green', max: 255, min: 0, value: two },
+            { channel: 'blue', max: 255, min: 0, value: three },
+        ];
+    return alpha ? [...fields, { channel: 'alpha', max: 100, min: 0, value: four }] : fields;
+};
+export const writeChannel = (fields, format, alpha, channel, value) => {
+    if (Number.isNaN(value)) {
+        return null;
+    }
+    const numbers = new Map(fields.map((field) => [field.channel, field.value]));
+    const field = fields.find((one) => one.channel === channel);
+    if (field === undefined) {
+        return null;
+    }
+    numbers.set(channel, clamp(Math.round(value), field.min, field.max));
+    const get = (name, fallback = 0) => numbers.get(name) ?? fallback;
+    const opacity = get('alpha', 100);
+    const fraction = Number((opacity / 100).toFixed(2));
+    if (format === 'hsl') {
+        const body = `${get('hue')}, ${get('saturation')}%, ${get('lightness')}%`;
+        return alpha ? `hsla(${body}, ${fraction})` : `hsl(${body})`;
+    }
+    if (format === 'rgb') {
+        const body = `${get('red')}, ${get('green')}, ${get('blue')}`;
+        return alpha ? `rgba(${body}, ${fraction})` : `rgb(${body})`;
+    }
+    const byte = (one) => one.toString(16).padStart(2, '0');
+    const hex = `#${byte(get('red'))}${byte(get('green'))}${byte(get('blue'))}`;
+    return alpha ? hex + byte(Math.round((opacity / 100) * 255)) : hex;
+};

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

@@ -1,4 +1,4 @@
-import { type Color, type ColorFormat, HelixFormElement } from '@fusion.dev/helix-core';
+import { type Color, type ColorFormat, type ColorWords, HelixFormElement } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
 import '../../button/index.js';
 import '../../button-group/index.js';
@@ -27,6 +27,11 @@ declare const HelixHeadlessColorPicker_base: (new (...args: any[]) => import("@f
  * when a drag, a key, a typed value or a preset settles it, as
  * `<input type="color">` does.
  *
+ * A screen reader hears the color's name, such as "vibrant red", after the two
+ * numbers on the square and after the number on the hue ramp, and each preset
+ * is named by its color. Set `color-words` to speak the names in another
+ * language.
+ *
  * @since 0.1.0
  * @status stable
  * @category forms
@@ -57,11 +62,17 @@ declare const HelixHeadlessColorPicker_base: (new (...args: any[]) => import("@f
  * @csspart controls - The row under the square.
  * @csspart eyedropper - The control that samples a color from the screen.
  * @csspart eyedropper-button - The button inside `eyedropper`.
- * @csspart eyedropper-text - The words on that button, trimmed to their capitals and baseline.
+ * @csspart eyedropper-live - The live region of the button inside `eyedropper`, which says its pending label.
+ * @csspart eyedropper-text - The words on the button inside `eyedropper`, trimmed to their capitals and baseline.
+ * @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.
+ * @csspart fields - The row of channel number fields, in `channel-fields`.
  * @csspart footer - The row holding the value and the tools.
  * @csspart format - The control that changes the syntax the value is written in.
  * @csspart format-button - The button inside `format`.
- * @csspart format-text - The words on that button, trimmed to their capitals and baseline.
+ * @csspart format-live - The live region of the button inside `format`, which says its pending label.
+ * @csspart format-text - The words on the button inside `format`, trimmed to their capitals and baseline.
  * @csspart grid - The saturation and brightness square. Draw the mark that shows
  * where the color sits with `::part(grid)::after` in your stylesheet. The
  * square carries the two channels as `--color-picker-saturation` and
@@ -99,6 +110,10 @@ export declare class HelixHeadlessColorPicker extends HelixHeadlessColorPicker_b
      * The message shown when the value is text that is not a color.
      */
     badInputMessage?: string;
+    /**
+     * What the blue channel's field is called, in `channel-fields`.
+     */
+    blueLabel: string;
     /**
      * What the square's vertical ramp is called.
      *
@@ -106,6 +121,32 @@ export declare class HelixHeadlessColorPicker extends HelixHeadlessColorPicker_b
      * language hears its own rather than English between its own labels.
      */
     brightnessLabel: string;
+    /**
+     * Whether the picker shows a number field for each channel of the color, as
+     * React Aria's ColorField does with `channel`: red, green and blue for hex
+     * and rgb, hue, saturation and lightness for hsl, and the opacity with
+     * `alpha`.
+     *
+     * For a reader who has the numbers from a brand guide, and for a keyboard,
+     * where typing 128 is quicker than holding an arrow key. The fields follow
+     * the syntax the format toggle sets.
+     */
+    channelFields: boolean;
+    /**
+     * The words a color's name is spoken in, as JSON keyed by their English,
+     * such as `{"red": "rot", "vibrant": "kräftiges"}`.
+     *
+     * **A color is named the way React Aria names one**, as "vibrant red" or
+     * "dark grayish blue", and the keys are the ones `@react-stately/color`
+     * translates, so a table a page already has for it can be handed over whole.
+     * `colorName` and `transparentColorName` are the two sentences that put the
+     * words together. A word left out is spoken in English.
+     *
+     * The name follows the numbers on the square, follows the number on the hue
+     * ramp, and names each preset, so a reader who cannot see the color hears
+     * which one it is.
+     */
+    colorWords: Partial<ColorWords>;
     /**
      * The text the sample shows for a moment after it copies the value.
      */
@@ -130,6 +171,10 @@ export declare class HelixHeadlessColorPicker extends HelixHeadlessColorPicker_b
      * What the syntax toggle is called, with `{format}` filled in.
      */
     formatLabel: string;
+    /**
+     * What the green channel's field is called, in `channel-fields`.
+     */
+    greenLabel: string;
     /**
      * What the hue channel is called.
      */
@@ -144,6 +189,11 @@ export declare class HelixHeadlessColorPicker extends HelixHeadlessColorPicker_b
      * thing the field cannot draw from outside, the mark on the answer itself.
      */
     invalid: boolean;
+    /**
+     * What the lightness channel's field is called, in `channel-fields` with
+     * hsl.
+     */
+    lightnessLabel: string;
     /**
      * Hides the eyedropper. Without it, the eyedropper appears in browsers that
      * support one.
@@ -204,6 +254,10 @@ export declare class HelixHeadlessColorPicker extends HelixHeadlessColorPicker_b
      * letting it open would take a color from the reader and drop it.
      */
     readOnly: boolean;
+    /**
+     * What the red channel's field is called, in `channel-fields`.
+     */
+    redLabel: string;
     /**
      * Requires a color before the form can submit.
      *
@@ -407,13 +461,35 @@ export declare class HelixHeadlessColorPicker extends HelixHeadlessColorPicker_b
     protected updated(changed: import('lit').PropertyValues): void;
     /** Moves focus to the square. */
     focus(options?: FocusOptions): void;
+    /** What each channel's field is called, from the words a page gives. */
+    private channelWord;
+    /**
+     * Takes a number typed into a channel's field. A field emptied or holding
+     * something that is not a number moves nothing, so a reader can clear it to
+     * type afresh.
+     */
+    private readonly handleField;
+    /**
+     * Takes a value written out whole, as `move` takes a part of the model: the
+     * square follows it, keeping its hue where the value is a gray with none to
+     * give, and a refusal puts the square back.
+     */
+    private takeWritten;
+    /**
+     * A number field for each channel, behind a seam the styled tier can move.
+     *
+     * `live` on the value, so a number put back inside its range, 300 for a byte,
+     * is redrawn though the value it settles on is the one drawn before.
+     */
+    protected renderFields(color: Color): TemplateResult;
     /**
      * One of the ramps under the square.
      *
      * `protected` rather than `private`, the method being the seam a tier above
-     * renders its own ramp through.
+     * renders its own ramp through. `spoken` is what a screen reader says for the
+     * ramp's value, with `{value}` filled in, and empty says the number alone.
      */
-    protected renderChannel(channel: 'alpha' | 'hue', label: string, max: number, value: number): TemplateResult;
+    protected renderChannel(channel: 'alpha' | 'hue', label: string, max: number, value: number, spoken?: string): TemplateResult;
     /**
      * A slider's own request, kept inside.
      *

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

@@ -4,11 +4,13 @@ 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 { CopyController, capturePointer, customElement, drawIcon, fillTemplate, formatColor, HelixFormElement, HelixSampleEndEvent, HelixSampleStartEvent, hostAria, isRtl, MixinControllerValue, parseColor, splitValues, toCss, } from '@fusion.dev/helix-core';
+import { CopyController, capturePointer, colorName, customElement, drawIcon, fillTemplate, formatColor, HelixFormElement, HelixSampleEndEvent, HelixSampleStartEvent, hostAria, hueName, isRtl, MixinControllerValue, parseColor, splitValues, toCss, } from '@fusion.dev/helix-core';
 import { eyedropper } from '@fusion.dev/helix-icons';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
+import { live } from 'lit/directives/live.js';
 import { html } from 'lit/static-html.js';
+import { channelFields, writeChannel } from '../channels.js';
 import '../../button/index.js';
 import '../../button-group/index.js';
 import '../../slider/index.js';
@@ -19,19 +21,25 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinContr
         super(...arguments);
         this.alpha = false;
         this.autocomplete = 'off';
+        this.blueLabel = 'Blue';
         this.brightnessLabel = 'Brightness';
+        this.channelFields = false;
+        this.colorWords = {};
         this.copiedLabel = 'Copied';
         this.copyLabel = 'Copy {value}';
         this.eyedropperLabel = 'Sample a color from the screen';
         this.formatLabel = 'Syntax: {format}. Change it.';
+        this.greenLabel = 'Green';
         this.hueLabel = 'Hue';
         this.invalid = false;
+        this.lightnessLabel = 'Lightness';
         this.noEyedropper = false;
         this.noFormat = false;
         this.noValue = false;
         this.opacityLabel = 'Opacity';
         this.presetsLabel = 'Presets';
         this.readOnly = false;
+        this.redLabel = 'Red';
         this.required = false;
         this.saturationLabel = 'Saturation';
         this.swatches = '';
@@ -156,6 +164,18 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinContr
             this.move(next);
             this.settle();
         };
+        this.handleField = (channel, event) => {
+            event.stopPropagation();
+            const typed = event.target.value;
+            if (typed.trim() === '') {
+                return;
+            }
+            const format = this.format ?? 'hex';
+            const written = writeChannel(channelFields(this.value, this.color, format, this.alpha), format, this.alpha, channel, Number(typed));
+            if (written !== null) {
+                this.takeWritten(written);
+            }
+        };
         this.keepChannelRequest = (event) => {
             event.stopPropagation();
         };
@@ -223,7 +243,56 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinContr
     focus(options) {
         this.partNamed('grid-saturation')?.focus(options);
     }
-    renderChannel(channel, label, max, value) {
+    channelWord(channel) {
+        return {
+            alpha: this.opacityLabel,
+            blue: this.blueLabel,
+            green: this.greenLabel,
+            hue: this.hueLabel,
+            lightness: this.lightnessLabel,
+            red: this.redLabel,
+            saturation: this.saturationLabel,
+        }[channel];
+    }
+    takeWritten(next) {
+        const parsed = parseColor(next);
+        if (this.readOnly || parsed === null) {
+            return;
+        }
+        const before = this.moved;
+        const hueless = parsed.saturation === 0 || parsed.brightness === 0;
+        this.moved = hueless ? { ...parsed, hue: this.color.hue } : parsed;
+        this.owned = next !== this.value;
+        if (!this.requestValue(next)) {
+            this.moved = before;
+            this.owned = false;
+        }
+    }
+    renderFields(color) {
+        return html `<div part="fields">
+      ${channelFields(this.value, color, this.format ?? 'hex', this.alpha).map((field) => html `<label part="field">
+          <span part="field-label">${this.channelWord(field.channel)}</span>
+          <input
+            part="field-input"
+            type="number"
+            inputmode="numeric"
+            min=${field.min}
+            max=${field.max}
+            step="1"
+            .value=${live(String(field.value))}
+            ?disabled=${this.isDisabled}
+            ?readonly=${this.readOnly}
+            @input=${(event) => this.handleField(field.channel, event)}
+            @change=${(event) => {
+            event.stopPropagation();
+            this.settle();
+            this.requestUpdate();
+        }}
+          />
+        </label>`)}
+    </div>`;
+    }
+    renderChannel(channel, label, max, value, spoken = '') {
         return html `<${this.tag('slider')}
       part="channel"
       exportparts="control: channel-control, feedback: channel-feedback, field: channel-field,
@@ -234,6 +303,7 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinContr
       label=${label}
       max=${max}
       min="0"
+      value-text=${spoken || nothing}
       .value=${String(value)}
       ?disabled=${this.isDisabled}
       @input=${(event) => this.takeChannel(channel, event)}
@@ -279,7 +349,7 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinContr
                 ${this.sampling && !this.noEyedropper
             ? html `<${this.tag('button')}
                         part="eyedropper"
-      exportparts="button: eyedropper-button, text: eyedropper-text"
+      exportparts="button: eyedropper-button, live: eyedropper-live, text: eyedropper-text"
                         label=${this.eyedropperLabel}
                         ?disabled=${this.isDisabled}
                         @click=${this.handleEyeDropper}
@@ -291,7 +361,7 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinContr
             ? nothing
             : html `<${this.tag('button')}
                         part="format"
-      exportparts="button: format-button, text: format-text"
+      exportparts="button: format-button, live: format-live, text: format-text"
                         label=${fillTemplate(this.formatLabel, { format: this.format ?? 'hex' })}
                         ?disabled=${this.isDisabled}
                         @click=${this.handleFormat}
@@ -303,8 +373,12 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinContr
     render() {
         const color = this.color;
         const painted = toCss(color);
-        const both = `${this.saturationLabel} ${color.saturation}%, ${this.brightnessLabel} ${color.brightness}%`;
-        const reversed = `${this.brightnessLabel} ${color.brightness}%, ${this.saturationLabel} ${color.saturation}%`;
+        const named = colorName(color, this.colorWords, this.lang);
+        const both = `${this.saturationLabel} ${color.saturation}%, ${this.brightnessLabel} ${color.brightness}%, ${named}`;
+        const reversed = `${this.brightnessLabel} ${color.brightness}%, ${this.saturationLabel} ${color.saturation}%, ${named}`;
+        const hue = hueName({ alpha: 100, brightness: 100, hue: color.hue, saturation: 100 }, this.colorWords, this.lang);
+        const owner = this.getAttribute('aria-label')?.trim();
+        const axisName = (channel) => (owner ? `${owner}, ${channel}` : channel);
         return html `<div
         part="grid"
         style="--color-picker-hue: ${color.hue}; --color-picker-saturation: ${color.saturation}%; --color-picker-brightness: ${color.brightness}%"
@@ -319,7 +393,7 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinContr
           type="range"
           min="0"
           max="100"
-          aria-label=${this.saturationLabel}
+          aria-label=${axisName(this.saturationLabel)}
           aria-valuetext=${both}
           aria-invalid=${this.invalid ? 'true' : nothing}
           .value=${String(color.saturation)}
@@ -334,7 +408,7 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinContr
           min="0"
           max="100"
           tabindex="-1"
-          aria-label=${this.brightnessLabel}
+          aria-label=${axisName(this.brightnessLabel)}
           aria-valuetext=${reversed}
           aria-invalid=${this.invalid ? 'true' : nothing}
           .value=${String(color.brightness)}
@@ -356,10 +430,11 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinContr
           @click=${() => this.copier.copy(this.value)}
         ></button>
         <div part="channels">
-          ${this.renderChannel('hue', this.hueLabel, 360, color.hue)}
+          ${this.renderChannel('hue', this.hueLabel, 360, color.hue, `{value}, ${hue}`)}
           ${this.alpha ? this.renderChannel('alpha', this.opacityLabel, 100, color.alpha) : nothing}
         </div>
       </div>
+      ${this.channelFields ? this.renderFields(color) : nothing}
 
       <!-- The syntax and the presets share a row, because neither fills one.
            Above them the ramps get the whole width, which is what they need:
@@ -395,7 +470,7 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinContr
                 return html `<button
                     part="swatch"
                     type="button"
-                    aria-label=${preset}
+                    aria-label=${parsed ? colorName(parsed, this.colorWords, this.lang) : preset}
                     aria-pressed=${parsed !== null && toCss(parsed) === painted ? 'true' : 'false'}
                     style="--color-picker-swatch: ${preset}"
                     ?disabled=${this.isDisabled}
@@ -414,9 +489,18 @@ __decorate([
 __decorate([
     property({ attribute: 'bad-input-message' })
 ], HelixHeadlessColorPicker.prototype, "badInputMessage", void 0);
+__decorate([
+    property({ attribute: 'blue-label' })
+], HelixHeadlessColorPicker.prototype, "blueLabel", void 0);
 __decorate([
     property({ attribute: 'brightness-label' })
 ], HelixHeadlessColorPicker.prototype, "brightnessLabel", void 0);
+__decorate([
+    property({ attribute: 'channel-fields', type: Boolean })
+], HelixHeadlessColorPicker.prototype, "channelFields", void 0);
+__decorate([
+    property({ attribute: 'color-words', type: Object })
+], HelixHeadlessColorPicker.prototype, "colorWords", void 0);
 __decorate([
     property({ attribute: 'copied-label' })
 ], HelixHeadlessColorPicker.prototype, "copiedLabel", void 0);
@@ -432,12 +516,18 @@ __decorate([
 __decorate([
     property({ attribute: 'format-label' })
 ], HelixHeadlessColorPicker.prototype, "formatLabel", void 0);
+__decorate([
+    property({ attribute: 'green-label' })
+], HelixHeadlessColorPicker.prototype, "greenLabel", void 0);
 __decorate([
     property({ attribute: 'hue-label' })
 ], HelixHeadlessColorPicker.prototype, "hueLabel", void 0);
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessColorPicker.prototype, "invalid", void 0);
+__decorate([
+    property({ attribute: 'lightness-label' })
+], HelixHeadlessColorPicker.prototype, "lightnessLabel", void 0);
 __decorate([
     property({ attribute: 'no-eyedropper', type: Boolean })
 ], HelixHeadlessColorPicker.prototype, "noEyedropper", void 0);
@@ -456,6 +546,9 @@ __decorate([
 __decorate([
     property({ attribute: 'readonly', reflect: true, type: Boolean })
 ], HelixHeadlessColorPicker.prototype, "readOnly", void 0);
+__decorate([
+    property({ attribute: 'red-label' })
+], HelixHeadlessColorPicker.prototype, "redLabel", void 0);
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessColorPicker.prototype, "required", void 0);