@fusion.dev/helix-headless 0.154.0 → 0.155.0

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

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

@@ -15,7 +15,7 @@ import { areaAt, hueAt } from '../wheel.js';
 import '../../button/index.js';
 import '../../button-group/index.js';
 import '../../slider/index.js';
-const FORMATS = ['hex', 'rgb', 'hsl'];
+const FORMATS = ['hex', 'rgb', 'hsl', 'oklch'];
 const START = { alpha: 100, brightness: 100, hue: 0, saturation: 100 };
 let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinPickerFeedback(MixinControllerValue(HelixFormElement)) {
     constructor() {
@@ -26,13 +26,16 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinPicke
         this.blueLabel = 'Blue';
         this.brightnessLabel = 'Brightness';
         this.channelFields = false;
+        this.chromaLabel = 'Chroma';
         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.hint = '';
         this.hueLabel = 'Hue';
+        this.label = '';
         this.lightnessLabel = 'Lightness';
         this.noEyedropper = false;
         this.noFormat = false;
@@ -50,6 +53,11 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinPicke
         this.valueMissingMessage = 'Choose a color.';
         this.wheel = false;
         this.sampling = false;
+        this.handleNamingSlot = () => {
+            this.requestUpdate();
+        };
+        this.dragging = false;
+        this.picking = false;
         this.owned = false;
         this.announcesInput = true;
         this.unsettled = false;
@@ -132,6 +140,7 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinPicke
                 return;
             }
             this.dispatchEvent(new HelixSampleStartEvent());
+            this.picking = true;
             try {
                 const { sRGBHex } = await new Dropper().open();
                 const parsed = parseColor(sRGBHex);
@@ -142,6 +151,7 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinPicke
             }
             catch {
             }
+            this.picking = false;
             this.dispatchEvent(new HelixSampleEndEvent());
         };
         this.handleGridPointer = (event) => {
@@ -150,12 +160,14 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinPicke
             }
             const grid = event.currentTarget;
             if (event.type === 'pointerup' || event.type === 'pointercancel') {
+                this.dragging = false;
                 this.settle();
                 return;
             }
             if (event.type === 'pointerdown') {
+                this.dragging = true;
                 capturePointer(grid, event.pointerId);
-                this.partNamed('grid-saturation')?.focus();
+                this.partNamed('grid-saturation')?.focus({ preventScroll: true });
             }
             else if (!grid.hasPointerCapture(event.pointerId)) {
                 return;
@@ -181,7 +193,7 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinPicke
             }
             if (event.type === 'pointerdown') {
                 capturePointer(wheel, event.pointerId);
-                this.partNamed('wheel-hue')?.focus();
+                this.partNamed('wheel-hue')?.focus({ preventScroll: true });
             }
             else if (!wheel.hasPointerCapture(event.pointerId)) {
                 return;
@@ -232,6 +244,23 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinPicke
         };
     }
     static { this.words = 'helix-color-picker'; }
+    slottedIn(name) {
+        return this.knownChildren.filter((child) => child.slot === name);
+    }
+    get named() {
+        return (this.label ||
+            this.slottedIn('label')
+                .map((child) => child.textContent ?? '')
+                .join(' ')
+                .trim());
+    }
+    get hinted() {
+        return this.hint !== '' || this.slottedIn('hint').length > 0;
+    }
+    get describedBy() {
+        const ids = [this.hinted ? 'hint' : '', this.feedback === '' ? '' : 'feedback'].filter(Boolean);
+        return ids.length > 0 ? ids.join(' ') : nothing;
+    }
     settle() {
         if (this.unsettled) {
             this.unsettled = false;
@@ -299,6 +328,8 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinPicke
         return {
             alpha: this.opacityLabel,
             blue: this.blueLabel,
+            brightness: this.brightnessLabel,
+            chroma: this.chromaLabel,
             green: this.greenLabel,
             hue: this.hueLabel,
             lightness: this.lightnessLabel,
@@ -327,10 +358,10 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinPicke
           <input
             part="field-input"
             type="number"
-            inputmode="numeric"
+            inputmode=${field.step < 1 ? 'decimal' : 'numeric'}
             min=${field.min}
             max=${field.max}
-            step="1"
+            step=${field.step}
             .value=${live(String(field.value))}
             ?disabled=${this.isDisabled}
             ?readonly=${this.readOnly}
@@ -350,7 +381,8 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinPicke
       exportparts="control: channel-control, feedback: channel-feedback, field: channel-field,
         hint: channel-hint, label: channel-label, marker: channel-marker,
         marker-label: channel-marker-label, markers: channel-markers, output: channel-output,
-        tooltip: channel-tooltip, tooltips: channel-tooltips"
+        thumb: channel-thumb, thumbs: channel-thumbs, tooltip: channel-tooltip,
+        tooltips: channel-tooltips"
       data-channel=${channel}
       aria-invalid=${this.marked ? 'true' : nothing}
       label=${label}
@@ -391,10 +423,18 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinPicke
     willUpdate(changed) {
         super.willUpdate(changed);
         const outside = [...(this.internals.labels ?? [])];
-        hostAria(this.internals, { labelledBy: outside, role: outside.length > 0 ? 'group' : '' });
+        const named = this.named;
+        hostAria(this.internals, {
+            label: outside.length > 0 ? '' : named,
+            labelledBy: outside,
+            role: outside.length > 0 || named !== '' ? 'group' : '',
+        });
         if (!this.hydrating) {
             this.sampling = 'EyeDropper' in globalThis;
         }
+        this.toggleState('copied', this.copier.copied);
+        this.toggleState('dragging', this.dragging);
+        this.toggleState('sampling', this.picking);
     }
     renderTools() {
         return html `<${this.tag('button-group')} part="actions" label=${this.toolsLabel}>
@@ -471,7 +511,7 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinPicke
         const reversed = square('brightness');
         const hue = hueName({ alpha: 100, brightness: 100, hue: color.hue, saturation: 100 }, this.colorWords, locale);
         const hueSaid = (value) => new Intl.ListFormat(locale, { style: 'short', type: 'unit' }).format([String(value), hue]);
-        const owner = this.getAttribute('aria-label')?.trim();
+        const owner = this.getAttribute('aria-label')?.trim() || this.named;
         const axisName = (channel) => (owner ? `${owner}, ${channel}` : channel);
         const area = html `<div
         part="grid"
@@ -488,7 +528,7 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinPicke
           min="0"
           max="100"
           aria-label=${axisName(this.saturationLabel)}
-          aria-describedby=${this.feedback === '' ? nothing : 'feedback'}
+          aria-describedby=${this.describedBy}
           aria-valuetext=${both}
           aria-invalid=${this.marked ? 'true' : nothing}
           .value=${String(color.saturation)}
@@ -505,7 +545,7 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinPicke
           tabindex="-1"
           style="writing-mode: vertical-lr; direction: rtl"
           aria-label=${axisName(this.brightnessLabel)}
-          aria-describedby=${this.feedback === '' ? nothing : 'feedback'}
+          aria-describedby=${this.describedBy}
           aria-valuetext=${reversed}
           aria-invalid=${this.marked ? 'true' : nothing}
           .value=${String(color.brightness)}
@@ -514,7 +554,10 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinPicke
           @change=${() => this.settle()}
         />
       </div>`;
-        return html `${this.wheel
+        return html `<div part="label" ?hidden=${this.named === ''}>
+        <slot name="label" @slotchange=${this.handleNamingSlot}>${this.label}</slot>
+      </div>
+      ${this.wheel
             ? html `<div
             part="wheel"
             style="--color-picker-hue: ${color.hue}"
@@ -531,7 +574,7 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinPicke
               max="360"
               dir="ltr"
               aria-label=${axisName(this.hueLabel)}
-              aria-describedby=${this.feedback === '' ? nothing : 'feedback'}
+              aria-describedby=${this.describedBy}
               aria-valuetext=${hueSaid(color.hue)}
               aria-invalid=${this.marked ? 'true' : nothing}
               .value=${String(color.hue)}
@@ -574,7 +617,7 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinPicke
                 part="value"
                 type="text"
                 aria-label=${this.valueLabel}
-                aria-describedby=${this.feedback === '' ? nothing : 'feedback'}
+                aria-describedby=${this.describedBy}
                 aria-invalid=${this.marked ? 'true' : nothing}
                 autocomplete=${this.autocomplete || nothing}
                 spellcheck="false"
@@ -591,6 +634,9 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinPicke
       </div>
 
       ${this.presets.length === 0 ? nothing : this.renderSwatches(painted)}
+      <div part="hint" id="hint" ?hidden=${!this.hinted}>
+        <slot name="hint" @slotchange=${this.handleNamingSlot}>${this.hint}</slot>
+      </div>
       ${this.renderPickerFeedback()}`;
     }
 };
@@ -615,6 +661,10 @@ __decorate([
 __decorate([
     property({ attribute: 'channel-fields', type: Boolean })
 ], HelixHeadlessColorPicker.prototype, "channelFields", void 0);
+__decorate([
+    words,
+    property({ attribute: 'chroma-label' })
+], HelixHeadlessColorPicker.prototype, "chromaLabel", void 0);
 __decorate([
     property({ attribute: 'color-words', converter: wordsConverter })
 ], HelixHeadlessColorPicker.prototype, "colorWords", void 0);
@@ -641,10 +691,16 @@ __decorate([
     words,
     property({ attribute: 'green-label' })
 ], HelixHeadlessColorPicker.prototype, "greenLabel", void 0);
+__decorate([
+    property()
+], HelixHeadlessColorPicker.prototype, "hint", void 0);
 __decorate([
     words,
     property({ attribute: 'hue-label' })
 ], HelixHeadlessColorPicker.prototype, "hueLabel", void 0);
+__decorate([
+    property()
+], HelixHeadlessColorPicker.prototype, "label", void 0);
 __decorate([
     words,
     property({ attribute: 'lightness-label' })
@@ -711,6 +767,12 @@ __decorate([
 __decorate([
     state()
 ], HelixHeadlessColorPicker.prototype, "swatchAt", void 0);
+__decorate([
+    state()
+], HelixHeadlessColorPicker.prototype, "dragging", void 0);
+__decorate([
+    state()
+], HelixHeadlessColorPicker.prototype, "picking", void 0);
 HelixHeadlessColorPicker = __decorate([
     customElement('helix-headless-color-picker')
 ], HelixHeadlessColorPicker);

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

@@ -72,6 +72,7 @@ declare const HelixHeadlessDateInput_base: (new (...args: any[]) => import("@fus
  * @csspart picker-day-outside - A day from a neighboring month. Applied with `picker-day`.
  * @csspart picker-day-selected - The chosen day, or either end of a chosen range. Applied with `picker-day`.
  * @csspart picker-day-today - Today. Applied with `picker-day`.
+ * @csspart picker-day-weekend - A day of the weekend where the calendar's language is spoken, beside `picker-day`.
  * @csspart picker-feedback - The calendar's own message, under it, while the calendar's `feedback` is set.
  * @csspart picker-grid - The grid of days.
  * @csspart picker-header - The month name and its controls.

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

@@ -218,7 +218,8 @@ let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinSegmented
       exportparts="cell: picker-cell, cell-range-end: picker-cell-range-end,
         cell-range-middle: picker-cell-range-middle, cell-range-start: picker-cell-range-start,
         day: picker-day, day-disabled: picker-day-disabled, day-outside: picker-day-outside,
-        day-selected: picker-day-selected, day-today: picker-day-today, feedback: picker-feedback, grid: picker-grid,
+        day-selected: picker-day-selected, day-today: picker-day-today, day-weekend: picker-day-weekend,
+        feedback: picker-feedback, grid: picker-grid,
         header: picker-header, heading: picker-heading, heading-button: picker-heading-button,
         month: picker-month, months: picker-months, next: picker-next,
         next-mark: picker-next-mark, period: picker-period, period-current: picker-period-current,