@fusion.dev/helix-headless 0.143.0 → 0.145.0

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

@@ -7,8 +7,10 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { customElement, HelixElement } from '@fusion.dev/helix-core';
 import { nothing } from 'lit';
 import { property } from 'lit/decorators.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { html } from 'lit/static-html.js';
 import '../../copy-button/index.js';
+import { gutterNumbers, lineCount } from '../lines.js';
 import { pairLines, parsePatch } from '../patch.js';
 let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
     constructor() {
@@ -17,6 +19,7 @@ let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
         this.copyLabel = 'Copy code';
         this.diff = false;
         this.label = '';
+        this.lineNumbers = false;
         this.noCopy = false;
         this.parsed = { files: [], text: '' };
     }
@@ -60,30 +63,42 @@ let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
         if (files.length > 0) {
             return this.renderDiff(files);
         }
+        const text = this.text;
+        const highlighted = this.highlight && text !== '' ? this.highlight(text) : undefined;
+        const code = highlighted === undefined
+            ? html `<code part="code"><slot @slotchange=${() => this.requestUpdate()}></slot></code>`
+            : html `<code part="code">${unsafeHTML(highlighted)}</code><slot
+              hidden
+              @slotchange=${() => this.requestUpdate()}
+            ></slot>`;
+        const lines = lineCount(text);
+        const gutter = this.lineNumbers
+            ? html `<span part="gutter" aria-hidden="true">${lines === 0 ? nothing : gutterNumbers(lines)}</span>`
+            : nothing;
         return html `${this.renderHeader(this.label)}
       <div part="frame">
-        <pre part="block"><code part="code"><slot @slotchange=${() => this.requestUpdate()}></slot></code></pre>
+        <pre part="block">${gutter}${code}</pre>
         ${this.label ? nothing : this.renderCopy()}
       </div>`;
     }
     renderHeader(name, value) {
         return name
-            ? html `<div part="header"><span part="label">${name}</span>${this.renderCopy(value)}</div>`
+            ? html `<div part="header"><span part="label">${name}</span>${this.renderCopy(value, name)}</div>`
             : nothing;
     }
-    renderCopy(value) {
-        return this.noCopy ? nothing : this.renderCopyButton(value);
+    renderCopy(value, name) {
+        return this.noCopy ? nothing : this.renderCopyButton(value, name);
     }
-    renderCopyButton(value = this.text) {
+    renderCopyButton(value = this.text, name = this.label) {
         return html `<${this.tag('copy-button')}
       part="copy"
-      exportparts="button: copy-button, text: copy-text, mark: copy-mark, tooltip: copy-tooltip,
+      exportparts="button: copy-button, text: copy-text, mark: copy-mark, live: copy-live, tooltip: copy-tooltip,
         tooltip-arrow: copy-tooltip-arrow, tooltip-arrow-bottom: copy-tooltip-arrow-bottom,
         tooltip-arrow-left: copy-tooltip-arrow-left, tooltip-arrow-right: copy-tooltip-arrow-right,
         tooltip-arrow-top: copy-tooltip-arrow-top, tooltip-bottom: copy-tooltip-bottom,
         tooltip-left: copy-tooltip-left, tooltip-right: copy-tooltip-right, tooltip-top: copy-tooltip-top"
       copied-label=${this.copiedLabel}
-      label=${this.copyLabel}
+      label=${name ? `${this.copyLabel}, ${name}` : this.copyLabel}
       .value=${value}
     ></${this.tag('copy-button')}>`;
     }
@@ -144,9 +159,15 @@ __decorate([
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessCodeBlock.prototype, "diff", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessCodeBlock.prototype, "highlight", void 0);
 __decorate([
     property()
 ], HelixHeadlessCodeBlock.prototype, "label", void 0);
+__decorate([
+    property({ attribute: 'line-numbers', reflect: true, type: Boolean })
+], HelixHeadlessCodeBlock.prototype, "lineNumbers", void 0);
 __decorate([
     property({ attribute: 'no-copy', reflect: true, type: Boolean })
 ], HelixHeadlessCodeBlock.prototype, "noCopy", void 0);

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

@@ -1,4 +1,4 @@
-import { AriaForwardController, type ColorFormat, HelixFormElement } from '@fusion.dev/helix-core';
+import { AriaForwardController, type ColorFormat, type ColorWords, HelixFormElement } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
 import '../../color-picker/index.js';
 declare const HelixHeadlessColorInput_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinPickerFieldInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerOpenInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerValueInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinFieldInterface) & typeof HelixFormElement;
@@ -28,6 +28,10 @@ declare const HelixHeadlessColorInput_base: (new (...args: any[]) => import("@fu
  * waits until you are done. Dragging in the panel sends `input` as the color
  * moves and `change` when it settles.
  *
+ * The trigger and ArrowDown open the panel with focus in the square. Tab moves
+ * between the panel's controls without leaving it, and Escape closes it and
+ * returns focus to the field.
+ *
  * The component sets `--color-input-swatch`, so do not set it yourself. It
  * holds the resolved color, so the styled tier can paint the swatch without
  * parsing the value.
@@ -72,10 +76,16 @@ declare const HelixHeadlessColorInput_base: (new (...args: any[]) => import("@fu
  * @csspart picker-controls - The row under the square.
  * @csspart picker-eyedropper - The control that samples a color from the screen.
  * @csspart picker-eyedropper-button - The button inside `picker-eyedropper`.
+ * @csspart picker-eyedropper-live - The live region of the button inside `picker-eyedropper`, which says its pending label.
  * @csspart picker-eyedropper-text - The words on the button inside `picker-eyedropper`.
+ * @csspart picker-field - One channel's number field with its label, in `channel-fields`.
+ * @csspart picker-field-input - The number input in a channel's field.
+ * @csspart picker-field-label - The name above a channel's number input.
+ * @csspart picker-fields - The row of channel number fields, in `channel-fields`.
  * @csspart picker-footer - The row holding the value and the tools.
  * @csspart picker-format - The control that changes the syntax the value is written in.
  * @csspart picker-format-button - The button inside `picker-format`.
+ * @csspart picker-format-live - The live region of the button inside `picker-format`, which says its pending label.
  * @csspart picker-format-text - The words on the button inside `picker-format`.
  * @csspart picker-grid - The saturation and brightness square.
  * @csspart picker-grid-brightness - The range input for the square's vertical axis.
@@ -110,6 +120,20 @@ export declare class HelixHeadlessColorInput extends HelixHeadlessColorInput_bas
      * consumer who wants autofill can still ask.
      */
     autocomplete: string;
+    /**
+     * Whether the panel shows a number field for each channel of the color.
+     * Passed to the panel; see Color Picker's `channel-fields`.
+     */
+    channelFields: boolean;
+    /**
+     * The words a color's name is spoken in, as JSON keyed by their English,
+     * such as `{"red": "rot", "vibrant": "kräftiges"}`.
+     *
+     * Passed to the panel, whose square, hue ramp and presets say the color's
+     * name, and read by the swatch in `swatch`, which says it before the value.
+     * Color Picker lists the keys.
+     */
+    colorWords: Partial<ColorWords>;
     /**
      * The syntax the value is written in: `hex`, `rgb`, or `hsl`.
      *
@@ -196,6 +220,15 @@ export declare class HelixHeadlessColorInput extends HelixHeadlessColorInput_bas
     protected get anchor(): HTMLElement | null;
     /** What the picker should show, which is only ever a color. */
     private get picked();
+    /**
+     * What the swatch says in `swatch`: the color's name and then the value, or
+     * the trigger's words where there is no color yet.
+     *
+     * The name first, because it is what a sighted reader takes from the block of
+     * color, and the value after it, because it is what the field holds and what
+     * a reader may need to copy.
+     */
+    private get swatchWords();
     /** What the trigger's swatch paints, which is only ever a color. */
     private get painted();
     /** Relayed under this element's name, so a consumer hears one control. */

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.
      *