@fusion.dev/helix-headless 0.153.0 → 0.155.0

package/dist/card/root/card-root.js

@@ -4,15 +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 { customElement, HelixElement, hostAria, slotFilled } from '@fusion.dev/helix-core';
+import { customElement, HelixElement, headingIn, hostAria, slotFilled, } from '@fusion.dev/helix-core';
 import { html } from 'lit';
 import { property, state } from 'lit/decorators.js';
 let HelixHeadlessCard = class HelixHeadlessCard extends HelixElement {
     constructor() {
         super(...arguments);
         this.label = '';
-        this.labelledBy = null;
-        this.namedBy = null;
         this.footerActions = false;
         this.headerActions = false;
         this.readRegions = () => {
@@ -22,12 +20,34 @@ let HelixHeadlessCard = class HelixHeadlessCard extends HelixElement {
             this.toggleState('has-media', filled('media'));
             this.toggleState('has-header', this.headerActions || filled('header'));
             this.toggleState('has-footer', this.footerActions || filled('footer'));
+            this.writeName();
         };
     }
+    static get observedAttributes() {
+        return [...super.observedAttributes, 'aria-label', 'aria-labelledby'];
+    }
+    attributeChangedCallback(name, old, value) {
+        super.attributeChangedCallback(name, old, value);
+        if (name === 'aria-label' || name === 'aria-labelledby') {
+            this.requestUpdate();
+        }
+    }
     willUpdate(changed) {
         super.willUpdate(changed);
-        const named = Boolean(this.label.trim() || this.namedBy?.trim() || this.labelledBy?.trim());
-        hostAria(this.internals, { label: this.label, role: named ? 'group' : '' });
+        this.writeName();
+    }
+    writeName() {
+        const attribute = (name) => Boolean(this.getAttribute?.(name)?.trim());
+        const named = this.label.trim() !== '' || attribute('aria-label') || attribute('aria-labelledby');
+        const heading = named
+            ? null
+            : headingIn(this.knownChildren.filter((child) => child.slot === 'header'));
+        const references = 'ariaLabelledByElements' in this.internals;
+        hostAria(this.internals, {
+            label: heading && !references ? (heading.textContent ?? '').trim() : this.label,
+            labelledBy: heading ? [heading] : [],
+            role: named || heading ? 'group' : '',
+        });
     }
     updated(changed) {
         super.updated(changed);
@@ -64,12 +84,6 @@ __decorate([
 __decorate([
     property({ attribute: 'media-placement', reflect: true })
 ], HelixHeadlessCard.prototype, "mediaPlacement", void 0);
-__decorate([
-    property({ attribute: 'aria-labelledby' })
-], HelixHeadlessCard.prototype, "labelledBy", void 0);
-__decorate([
-    property({ attribute: 'aria-label' })
-], HelixHeadlessCard.prototype, "namedBy", void 0);
 __decorate([
     state()
 ], HelixHeadlessCard.prototype, "footerActions", void 0);

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

@@ -8,6 +8,13 @@ import { type TemplateResult } from 'lit';
  * tools and document search. A styled span carries no such meaning, and a
  * screen reader announces nothing about it.
  *
+ * **Set `translate="no"` on the element to keep a page translator off the
+ * code.** A translator that rewrites prose would also rewrite an identifier.
+ * The slotted text takes its translation mode from the element, its parent in
+ * the page, and the element writes nothing onto itself, so the attribute is
+ * yours to set. The `<code>` inside carries `translate="no"` for anything the
+ * element draws itself.
+ *
  * `Code` is inline only and never scrolls. For a block of code with its own
  * box, its own overflow, and copying, use `CodeBlock`, which is a separate
  * family.

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

@@ -8,7 +8,7 @@ import { customElement, HelixElement } from '@fusion.dev/helix-core';
 import { html } from 'lit';
 let HelixHeadlessCode = class HelixHeadlessCode extends HelixElement {
     render() {
-        return html `<code part="code"><slot></slot></code>`;
+        return html `<code part="code" translate="no"><slot></slot></code>`;
     }
 };
 HelixHeadlessCode = __decorate([

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

@@ -38,6 +38,18 @@ import '../../copy-button/index.js';
  * and its copy button copies the new version of the file. `variant="split"`
  * shows the old version beside the new, each removal opposite its replacement.
  *
+ * **A block that scrolls is a tab stop.** While its lines run past its width or
+ * its cap, the scroller is a region named for the block, such as "Code,
+ * app.ts", that Tab reaches, so a keyboard scrolls it with the arrow keys in
+ * every browser. Chromium and Firefox make a scrolling box focusable on their
+ * own, and Safari does not. A block that fits is no stop at all.
+ *
+ * **The code the block draws is marked untranslated**, `translate="no"` on
+ * its `<pre>`, so a page translator leaves highlighted lines and a diff as
+ * written. Code in the slot takes its translation mode from the element, which
+ * writes nothing onto itself, so set `translate="no"` on the element to keep a
+ * translator off plain code too.
+ *
  * On the server, the slot renders as ordinary code, so a diff first appears as
  * the patch text in a `<pre>`. The client makes the same first render, which
  * keeps hydration clean, and draws the diff once it can read the content. Diff
@@ -95,6 +107,18 @@ export declare class HelixHeadlessCodeBlock extends HelixElement {
      * `registerWords('de', { 'helix-code-block': { copyLabel: 'Code kopieren' } })`.
      */
     static words: string;
+    /**
+     * The name of a block that scrolls, which is a tab stop while it does.
+     *
+     * Where the block has a name, the scroller says it too, such as "Code,
+     * app.ts", as `code-name-label` puts it.
+     */
+    codeLabel: string;
+    /**
+     * The name of a block that scrolls, where the block has a name. `{code}` is
+     * `code-label` and `{name}` the block's name.
+     */
+    codeNameLabel: string;
     /**
      * The expand button's words while the block shows every line.
      */
@@ -249,7 +273,7 @@ export declare class HelixHeadlessCodeBlock extends HelixElement {
     private capped;
     /** Whether the expand button has shown every line. */
     private expanded;
-    /** Watches the block's size, while it is expandable. */
+    /** Watches the block's size. */
     private sizes;
     /**
      * Reads whether the cap hides lines: the scroller is taller inside than it
@@ -258,6 +282,18 @@ export declare class HelixHeadlessCodeBlock extends HelixElement {
      * everything.
      */
     private readonly measure;
+    /**
+     * Makes each box that scrolls a tab stop and a region named for its block,
+     * and takes both away from a box that fits.
+     *
+     * **A reader on a keyboard scrolls the code from the box itself.** Chromium
+     * and Firefox make a scrolling box focusable on their own, and Safari does
+     * not, so there the arrow keys could not reach the end of a long line. A
+     * box counts while its sheet lets it scroll and its content is wider or
+     * taller than it is drawn: an unstyled `<pre>` overflows without scrolling,
+     * and a stop on it would scroll nothing.
+     */
+    private markScrollers;
     protected updated(changed: PropertyValues): void;
     connectedCallback(): void;
     disconnectedCallback(): void;

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

@@ -16,6 +16,8 @@ import { pairLines, parsePatch } from '../patch.js';
 let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
     constructor() {
         super(...arguments);
+        this.codeLabel = 'Code';
+        this.codeNameLabel = '{code}, {name}';
         this.collapseLabel = 'Show fewer lines';
         this.copiedLabel = 'Copied';
         this.copyLabel = 'Copy code';
@@ -31,6 +33,7 @@ let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
         this.capped = false;
         this.expanded = false;
         this.measure = () => {
+            this.markScrollers();
             if (!this.expanded) {
                 this.capped =
                     this.expandable &&
@@ -60,9 +63,31 @@ let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
             .map((node) => node.textContent ?? '')
             .join('');
     }
+    markScrollers() {
+        for (const box of this.renderRoot.querySelectorAll('[part="block"], [part="code"], [part="old"], [part="new"]')) {
+            const style = getComputedStyle(box);
+            const scrolls = (value) => value === 'auto' || value === 'scroll';
+            const overflows = (scrolls(style.overflowX) && box.scrollWidth > box.clientWidth + 1) ||
+                (scrolls(style.overflowY) && box.scrollHeight > box.clientHeight + 1);
+            if (overflows) {
+                const name = box.closest('[part="file"]')?.querySelector('[part="label"]')?.textContent;
+                const named = name ?? (this.label || this.language);
+                box.tabIndex = 0;
+                box.setAttribute('role', 'region');
+                box.setAttribute('aria-label', named
+                    ? formatWords(this, 'codeNameLabel', { code: this.codeLabel, name: named })
+                    : this.codeLabel);
+            }
+            else {
+                box.removeAttribute('tabindex');
+                box.removeAttribute('role');
+                box.removeAttribute('aria-label');
+            }
+        }
+    }
     updated(changed) {
         super.updated(changed);
-        if (this.expandable && typeof ResizeObserver !== 'undefined') {
+        if (typeof ResizeObserver !== 'undefined') {
             this.sizes ??= new ResizeObserver(this.measure);
             this.sizes.observe(this);
         }
@@ -114,7 +139,7 @@ let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
         const name = this.label || this.language;
         return html `${this.renderHeader(name)}
       <div part="frame">
-        <pre id="block" part="block">${gutter}${code}</pre>
+        <pre id="block" part="block" translate="no">${gutter}${code}</pre>
         ${name ? nothing : this.renderCopy()}
       </div>${this.renderExpand()}`;
     }
@@ -179,8 +204,8 @@ let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
         const hunks = file.hunks.map((hunk) => ({ hunk, rows: pairLines(hunk.lines) }));
         const filler = html `<span part="filler" aria-hidden="true">\n</span>`;
         return html `<div part="split">
-      <pre part="old"><code part="code">${hunks.map(({ hunk, rows }) => html `${this.renderHunk(hunk)}${rows.map(({ left }) => left ? this.renderLine(left, width, 'old') : filler)}`)}</code></pre>
-      <pre part="new"><code part="code">${hunks.map(({ hunk, rows }) => html `${this.renderHunk(hunk, true)}${rows.map(({ right }) => right ? this.renderLine(right, width, 'new') : filler)}`)}</code></pre>
+      <pre part="old" translate="no"><code part="code">${hunks.map(({ hunk, rows }) => html `${this.renderHunk(hunk)}${rows.map(({ left }) => left ? this.renderLine(left, width, 'old') : filler)}`)}</code></pre>
+      <pre part="new" translate="no"><code part="code">${hunks.map(({ hunk, rows }) => html `${this.renderHunk(hunk, true)}${rows.map(({ right }) => right ? this.renderLine(right, width, 'new') : filler)}`)}</code></pre>
     </div>`;
     }
     renderDiff(files) {
@@ -197,13 +222,21 @@ let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
         <div part="frame">
           ${this.variant === 'split'
                 ? this.renderSplit(file, width)
-                : html `<pre part="block"><code part="code">${file.hunks.map((hunk) => html `${this.renderHunk(hunk)}${hunk.lines.map((line) => this.renderLine(line, width))}`)}</code></pre>`}
+                : html `<pre part="block" translate="no"><code part="code">${file.hunks.map((hunk) => html `${this.renderHunk(hunk)}${hunk.lines.map((line) => this.renderLine(line, width))}`)}</code></pre>`}
           ${name ? nothing : this.renderCopy(now)}
         </div>
       </div>`;
         })}<slot hidden @slotchange=${() => this.requestUpdate()}></slot>`;
     }
 };
+__decorate([
+    words,
+    property({ attribute: 'code-label' })
+], HelixHeadlessCodeBlock.prototype, "codeLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'code-name-label' })
+], HelixHeadlessCodeBlock.prototype, "codeNameLabel", void 0);
 __decorate([
     words,
     property({ attribute: 'collapse-label' })

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

@@ -17,8 +17,9 @@ declare const HelixHeadlessColorInput_base: (new (...args: any[]) => import("@fu
  * style the panel to match your interface.
  *
  * The field reads every color syntax, including `#f00`, `#ff0000`,
- * `rgb(255 0 0)`, `rgba(255,0,0,.5)`, `rgb(255 0 0 / 50%)`, and
- * `hsl(0 100% 50%)`. It writes colors in the syntax that `format` names. The
+ * `rgb(255 0 0)`, `rgba(255,0,0,.5)`, `rgb(255 0 0 / 50%)`,
+ * `hsl(0 100% 50%)`, `oklch(62.8% 0.258 29.2)`, and `hsb(0, 100%, 100%)`. It
+ * writes colors in the syntax that `format` names. The
  * field shows the value without reformatting it, because half-typed input does
  * not survive a round trip through a formatter. Date Input does the same with
  * dates.
@@ -75,6 +76,8 @@ declare const HelixHeadlessColorInput_base: (new (...args: any[]) => import("@fu
  * @csspart picker-channel-marker-label - The value a mark stands at, when `marker-labels` is set.
  * @csspart picker-channel-markers - The row of marks along the track.
  * @csspart picker-channel-output - The current value, shown beside the track.
+ * @csspart picker-channel-thumb - A ramp's thumb box, which holds no content in a picker.
+ * @csspart picker-channel-thumbs - The layer over a ramp's track that holds its thumb box.
  * @csspart picker-channel-tooltip - A ramp's value in a bubble, where a ramp shows one.
  * @csspart picker-channel-tooltips - The layer over a ramp's track that holds its bubble.
  * @csspart picker-channels - The channel sliders beside the sample.
@@ -99,7 +102,9 @@ declare const HelixHeadlessColorInput_base: (new (...args: any[]) => import("@fu
  * @csspart picker-grid-brightness - The range input for the square's vertical axis.
  * @csspart picker-grid-handle - The mark showing where in the square the color sits.
  * @csspart picker-grid-saturation - The range input for the square's horizontal axis.
+ * @csspart picker-hint - The picker's own help, which the field's `hint` stands in for here, so it stays hidden.
  * @csspart picker-icon - An icon drawn by the picker.
+ * @csspart picker-label - The picker's own name, which the field's `label` stands in for here, so it stays hidden.
  * @csspart picker-sample - A chip of the current color. Pressing it copies the value.
  * @csspart picker-swatch - One preset.
  * @csspart picker-swatches - The row of presets.
@@ -150,7 +155,8 @@ export declare class HelixHeadlessColorInput extends HelixHeadlessColorInput_bas
      */
     colorWords: Partial<ColorWords>;
     /**
-     * The syntax the value is written in: `hex`, `rgb`, or `hsl`.
+     * The syntax the value is written in: `hex`, `rgb`, `hsl`, `oklch`, or
+     * `hsb`, as Color Picker's `format`.
      *
      * **Undefaulted, because it reflects.** The two together stamp an attribute
      * onto every host anybody renders, including the ones nobody configured: the

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

@@ -126,6 +126,7 @@ let HelixHeadlessColorInput = class HelixHeadlessColorInput extends MixinPickerF
         channel-hint: picker-channel-hint, channel-label: picker-channel-label,
         channel-marker: picker-channel-marker, channel-marker-label: picker-channel-marker-label,
         channel-markers: picker-channel-markers, channel-output: picker-channel-output,
+        channel-thumb: picker-channel-thumb, channel-thumbs: picker-channel-thumbs,
         channel-tooltip: picker-channel-tooltip, channel-tooltips: picker-channel-tooltips,
         channels: picker-channels, controls: picker-controls, eyedropper: picker-eyedropper,
         eyedropper-button: picker-eyedropper-button, eyedropper-live: picker-eyedropper-live, eyedropper-spinner: picker-eyedropper-spinner, eyedropper-text: picker-eyedropper-text,
@@ -133,7 +134,8 @@ let HelixHeadlessColorInput = class HelixHeadlessColorInput extends MixinPickerF
         fields: picker-fields, footer: picker-footer, format: picker-format,
         format-button: picker-format-button, format-live: picker-format-live, format-spinner: picker-format-spinner, 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,
+        grid-saturation: picker-grid-saturation, hint: picker-hint, icon: picker-icon,
+        label: picker-label, sample: picker-sample,
         swatch: picker-swatch, swatches: picker-swatches, value: picker-value,
         wheel: picker-wheel, wheel-hue: picker-wheel-hue"
       ?invalid=${this.resolvedFeedback !== ''}

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

@@ -1,17 +1,19 @@
 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 type ChannelName = 'alpha' | 'blue' | 'brightness' | 'chroma' | 'green' | 'hue' | 'lightness' | 'red' | 'saturation';
+/** A channel as a field shows it: its number, the range it may take, and its step. */
 export interface ChannelField {
     channel: ChannelName;
     max: number;
     min: number;
+    step: 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
+ * hue, saturation and lightness for hsl, hue, saturation and brightness for
+ * hsb, lightness, chroma and hue for oklch, and the opacity where the picker
  * carries one.
  *
  * Hex is written as bytes, so its fields are the bytes: a field of two hex

package/dist/color-picker/channels.js

@@ -1,4 +1,16 @@
-import { clamp, toHsl, toRgb } from '@fusion.dev/helix-core';
+import { clamp, toHsl, toOklch, toRgb } from '@fusion.dev/helix-core';
+const onStep = (value, step) => {
+    const decimals = String(step).split('.')[1]?.length ?? 0;
+    return Number((Math.round(value / step) * step).toFixed(decimals));
+};
+const FAMILY = {
+    hex: /^rgba?$/,
+    hsb: /^hsba?$/,
+    hsl: /^hsla?$/,
+    oklch: /^oklch$/,
+    rgb: /^rgba?$/,
+};
+const OKLCH_STEPS = [0.1, 0.001, 0.1];
 const percent = (token) => {
     if (token === undefined) {
         return 100;
@@ -8,7 +20,8 @@ const percent = (token) => {
 };
 const readWritten = (value, format) => {
     const text = value.trim().toLowerCase();
-    if (format !== 'hsl' && /^#([\da-f]{3,4}|[\da-f]{6}|[\da-f]{8})$/.test(text)) {
+    if ((format === 'hex' || format === 'rgb') &&
+        /^#([\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) => {
@@ -18,23 +31,46 @@ const readWritten = (value, format) => {
         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')) {
+    const call = /^(rgba?|hsla?|hsba?|oklch)\(([^)]*)\)$/.exec(text);
+    if (!call?.[1] || call[2] === undefined || !FAMILY[format].test(call[1])) {
         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 ?? ''));
+    const numbers = [first, second, third].map((one) => one === 'none' ? 0 : Number.parseFloat(one ?? ''));
     if (numbers.some(Number.isNaN)) {
         return null;
     }
+    if (format === 'oklch') {
+        const [lightness = 0, chroma = 0, hue = 0] = numbers;
+        return [
+            onStep(first?.endsWith('%') ? lightness : lightness * 100, OKLCH_STEPS[0]),
+            onStep(second?.endsWith('%') ? (chroma / 100) * 0.4 : chroma, OKLCH_STEPS[1]),
+            onStep(hue, OKLCH_STEPS[2]),
+            Math.round(percent(fourth)),
+        ];
+    }
     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 === 'hsb') {
+            return [
+                Math.round(color.hue),
+                Math.round(color.saturation),
+                Math.round(color.brightness),
+                Math.round(color.alpha),
+            ];
+        }
+        if (format === 'oklch') {
+            const { chroma, hue, lightness } = toOklch(color);
+            return [
+                onStep(lightness * 100, OKLCH_STEPS[0]),
+                onStep(chroma, OKLCH_STEPS[1]),
+                onStep(hue, OKLCH_STEPS[2]),
+                Math.round(color.alpha),
+            ];
+        }
         if (format === 'hsl') {
             const { hue, lightness, saturation } = toHsl(color);
             return [Math.round(hue), saturation, lightness, Math.round(color.alpha)];
@@ -43,18 +79,32 @@ export const channelFields = (value, color, format, alpha) => {
         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;
+    const byFormat = {
+        hex: [],
+        hsb: [
+            { channel: 'hue', max: 360, min: 0, step: 1, value: one },
+            { channel: 'saturation', max: 100, min: 0, step: 1, value: two },
+            { channel: 'brightness', max: 100, min: 0, step: 1, value: three },
+        ],
+        hsl: [
+            { channel: 'hue', max: 360, min: 0, step: 1, value: one },
+            { channel: 'saturation', max: 100, min: 0, step: 1, value: two },
+            { channel: 'lightness', max: 100, min: 0, step: 1, value: three },
+        ],
+        oklch: [
+            { channel: 'lightness', max: 100, min: 0, step: OKLCH_STEPS[0], value: one },
+            { channel: 'chroma', max: 0.4, min: 0, step: OKLCH_STEPS[1], value: two },
+            { channel: 'hue', max: 360, min: 0, step: OKLCH_STEPS[2], value: three },
+        ],
+        rgb: [],
+    };
+    const bytes = [
+        { channel: 'red', max: 255, min: 0, step: 1, value: one },
+        { channel: 'green', max: 255, min: 0, step: 1, value: two },
+        { channel: 'blue', max: 255, min: 0, step: 1, value: three },
+    ];
+    const fields = byFormat[format].length > 0 ? byFormat[format] : bytes;
+    return alpha ? [...fields, { channel: 'alpha', max: 100, min: 0, step: 1, value: four }] : fields;
 };
 export const writeChannel = (fields, format, alpha, channel, value) => {
     if (Number.isNaN(value)) {
@@ -65,7 +115,7 @@ export const writeChannel = (fields, format, alpha, channel, value) => {
     if (field === undefined) {
         return null;
     }
-    numbers.set(channel, clamp(Math.round(value), field.min, field.max));
+    numbers.set(channel, clamp(onStep(value, field.step), 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));
@@ -73,6 +123,14 @@ export const writeChannel = (fields, format, alpha, channel, value) => {
         const body = `${get('hue')}, ${get('saturation')}%, ${get('lightness')}%`;
         return alpha ? `hsla(${body}, ${fraction})` : `hsl(${body})`;
     }
+    if (format === 'hsb') {
+        const body = `${get('hue')}, ${get('saturation')}%, ${get('brightness')}%`;
+        return alpha ? `hsba(${body}, ${fraction})` : `hsb(${body})`;
+    }
+    if (format === 'oklch') {
+        const body = `${get('lightness')}% ${get('chroma')} ${get('hue')}`;
+        return alpha ? `oklch(${body} / ${fraction})` : `oklch(${body})`;
+    }
     if (format === 'rgb') {
         const body = `${get('red')}, ${get('green')}, ${get('blue')}`;
         return alpha ? `rgba(${body}, ${fraction})` : `rgb(${body})`;

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

@@ -32,6 +32,11 @@ declare const HelixHeadlessColorPicker_base: (new (...args: any[]) => import("@f
  * is named by its color. The opacity ramp is heard as a percentage. Set
  * `color-words` to speak the names in another language.
  *
+ * `label` names the picker, which is then a group with that name, and the
+ * square's ramps say it before their own, as "Brand, Saturation". `hint`
+ * writes help under the picker, which the square, the ramps and the value
+ * field are described by. Inside Color Input the field carries both.
+ *
  * The presets are a listbox with the current color selected, and one tab
  * stop. The arrow keys move between them, Home and End go to the ends, and
  * Enter, Space or a press chooses one.
@@ -43,6 +48,8 @@ declare const HelixHeadlessColorPicker_base: (new (...args: any[]) => import("@f
  * @documentation https://fusion.dev/helix/components/color-picker
  *
  * @slot eyedropper-icon - The icon on the eyedropper button, usually a dropper.
+ * @slot hint - Help under the picker, for content richer than the `hint` text.
+ * @slot label - The name above the picker, for content richer than the `label` text.
  *
  * @event {Event} change - Fired after the value changes.
  * @event {HelixBeforeChangeEvent} helix-before-change - Fired before the color changes. Cancelable: call `preventDefault()` to keep the current color.
@@ -62,6 +69,8 @@ declare const HelixHeadlessColorPicker_base: (new (...args: any[]) => import("@f
  * @csspart channel-marker-label - The value a mark stands at, when `marker-labels` is set.
  * @csspart channel-markers - The row of marks along the track.
  * @csspart channel-output - The current value, shown beside the track.
+ * @csspart channel-thumb - A ramp's thumb box, which holds no content in a picker.
+ * @csspart channel-thumbs - The layer over a ramp's track that holds its thumb box.
  * @csspart channel-tooltip - A ramp's value in a bubble, where a ramp shows one.
  * @csspart channel-tooltips - The layer over a ramp's track that holds its bubble.
  * @csspart channels - The ramps beside the sample.
@@ -88,6 +97,8 @@ declare const HelixHeadlessColorPicker_base: (new (...args: any[]) => import("@f
  * `--color-picker-brightness`, and this tier ships no CSS.
  * @csspart grid-brightness - The range input for the square's vertical axis.
  * @csspart grid-saturation - The range input for the square's horizontal axis.
+ * @csspart hint - The help under the picker, while `hint` is set or the `hint` slot has content.
+ * @csspart label - The name above the picker, while `label` is set or the `label` slot has content.
  * @csspart sample - A chip of the current color. Pressing it copies the value.
  * @csspart swatch - One preset, an option in the `swatches` listbox.
  * @csspart swatches - The row of presets, a listbox.
@@ -100,7 +111,10 @@ declare const HelixHeadlessColorPicker_base: (new (...args: any[]) => import("@f
  * @cssproperty --color-picker-saturation - The chosen saturation, 0 to 100, as a percentage.
  * @cssproperty --color-picker-swatch - The color a chip shows: the current color on the sample, and the preset's color on each preset.
  *
+ * @cssstate copied - The moment after the sample copies the value, while it says `copied-label`.
+ * @cssstate dragging - While a pointer drags the square's handle.
  * @cssstate invalid - While `invalid` is set or `feedback` says what is wrong.
+ * @cssstate sampling - While the eyedropper is open over the screen.
  */
 export declare class HelixHeadlessColorPicker extends HelixHeadlessColorPicker_base {
     /**
@@ -142,14 +156,20 @@ export declare class HelixHeadlessColorPicker extends HelixHeadlessColorPicker_b
     /**
      * 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`.
+     * and rgb, hue, saturation and lightness for hsl, hue, saturation and
+     * brightness for hsb, lightness, chroma and hue for oklch, 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;
+    /**
+     * What the chroma channel's field is called, in `channel-fields` with
+     * oklch.
+     */
+    chromaLabel: string;
     /**
      * The words a color's name is spoken in, as JSON keyed by their English,
      * such as `{"red": "rot", "vibrant": "kräftiges"}`.
@@ -179,10 +199,16 @@ export declare class HelixHeadlessColorPicker extends HelixHeadlessColorPicker_b
      */
     eyedropperLabel: string;
     /**
-     * The syntax the value is written in: `hex`, `rgb`, or `hsl`.
+     * The syntax the value is written in: `hex`, `rgb`, `hsl`, `oklch`, or
+     * `hsb`.
      *
      * 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.
+     * `hex` still takes an `rgb()` or an `oklch()` handed to it and stores the
+     * hex for it. `oklch` writes the sRGB color the picker holds, such as
+     * `oklch(62.8% 0.258 29.2)`; a color outside sRGB that is handed in is
+     * clipped to it. `hsb` writes the picker's own model, `hsb(0, 100%, 100%)`,
+     * as React Aria's and Zag's color strings do. It is not CSS, so the toggle
+     * walks the other four.
      */
     format?: ColorFormat;
     /**
@@ -193,13 +219,23 @@ export declare class HelixHeadlessColorPicker extends HelixHeadlessColorPicker_b
      * What the green channel's field is called, in `channel-fields`.
      */
     greenLabel: string;
+    /**
+     * Help under the picker, such as what the color is used for. The `hint`
+     * slot takes richer content.
+     */
+    hint: string;
     /**
      * What the hue channel is called.
      */
     hueLabel: string;
+    /**
+     * The name above the picker, such as "Brand color". The picker is then a
+     * group with this name. The `label` slot takes richer content.
+     */
+    label: string;
     /**
      * What the lightness channel's field is called, in `channel-fields` with
-     * hsl.
+     * hsl and oklch.
      */
     lightnessLabel: string;
     /**
@@ -353,6 +389,23 @@ export declare class HelixHeadlessColorPicker extends HelixHeadlessColorPicker_b
     private sampling;
     /** The preset the reader was last on, which holds the row's one tab stop. */
     private swatchAt;
+    /**
+     * The children in a slot, read off the children rather than heard from
+     * `slotchange`: a declarative shadow root fires that before anything
+     * listens, so a served picker kept its label hidden.
+     */
+    private slottedIn;
+    private readonly handleNamingSlot;
+    /** The picker's own name, from `label` or the `label` slot's words. */
+    private get named();
+    /** Whether help is shown under the picker. */
+    private get hinted();
+    /** The ids a control in the picker is described by: the help, then the message. */
+    private get describedBy();
+    /** Whether a pointer is dragging the square's handle, said as `:state(dragging)`. */
+    private dragging;
+    /** Whether the eyedropper is open, said as `:state(sampling)`. */
+    private picking;
     /**
      * Whether the value on this element was produced here.
      *