@fusion.dev/helix-headless 0.154.0 → 0.156.0

package/dist/chat/root/chat-root.js

@@ -11,7 +11,7 @@ import { property, state } from 'lit/decorators.js';
 import { keyed } from 'lit/directives/keyed.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { html } from 'lit/static-html.js';
-import { TURN_WORDS } from '../naming.js';
+import { authorWords, TURN_WORDS } from '../naming.js';
 const REGIONS = ['header', 'actions', 'resume', 'status', 'composer'];
 const SECOND_NAMES = {
     author: {
@@ -40,6 +40,7 @@ const drawnInFull = ({ element }) => element.firstElementChild?.hasUpdated !== f
 let HelixHeadlessChat = class HelixHeadlessChat extends MixinCollection(HelixElement) {
     constructor() {
         super(...arguments);
+        this.arrivalLabel = '{author}: {text}';
         this.authorStyles = {};
         this.defaultPinned = true;
         this.failedLabel = 'Not sent';
@@ -180,6 +181,7 @@ let HelixHeadlessChat = class HelixHeadlessChat extends MixinCollection(HelixEle
         if (this.fed) {
             return this.turns.map((turn) => ({
                 author: turn.author,
+                by: authorWords(turn.author, turn.authorLabel ?? '', this.words),
                 failed: this.failedLabel,
                 id: this.identity(turn),
                 state: turn.state,
@@ -188,6 +190,7 @@ let HelixHeadlessChat = class HelixHeadlessChat extends MixinCollection(HelixEle
         }
         return this.messages.map((message) => ({
             author: message.author,
+            by: authorWords(message.author, message.authorLabel, this.words),
             failed: message.failedLabel,
             id: message,
             state: message.state,
@@ -349,9 +352,12 @@ let HelixHeadlessChat = class HelixHeadlessChat extends MixinCollection(HelixEle
         return at < 0 ? [] : turns.slice(at + 1);
     }
     phrase(turn) {
-        return turn.state === 'failed'
-            ? formatWords(this, 'failedTurnLabel', { failed: turn.failed, text: turn.text })
-            : turn.text;
+        if (turn.state === 'failed') {
+            return formatWords(this, 'failedTurnLabel', { failed: turn.failed, text: turn.text });
+        }
+        return turn.by === ''
+            ? turn.text
+            : formatWords(this, 'arrivalLabel', { author: turn.by, text: turn.text });
     }
     watchSizes() {
         if (typeof ResizeObserver === 'undefined') {
@@ -509,6 +515,10 @@ let HelixHeadlessChat = class HelixHeadlessChat extends MixinCollection(HelixEle
       </div>`;
     }
 };
+__decorate([
+    words,
+    property({ attribute: 'arrival-label' })
+], HelixHeadlessChat.prototype, "arrivalLabel", void 0);
 __decorate([
     property({ attribute: 'author-styles', converter: wordsConverter })
 ], HelixHeadlessChat.prototype, "authorStyles", void 0);

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