@fusion.dev/helix-headless 0.146.0 → 0.148.0

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

@@ -1,9 +1,9 @@
-import { type Color, type ColorFormat, type ColorWords, HelixFormElement } from '@fusion.dev/helix-core';
+import { type Color, type ColorFormat, type ColorWords, HelixFormElement, KeyboardNavigationController } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
 import '../../button/index.js';
 import '../../button-group/index.js';
 import '../../slider/index.js';
-declare const HelixHeadlessColorPicker_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerValueInterface) & typeof HelixFormElement;
+declare const HelixHeadlessColorPicker_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinPickerFeedbackInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerValueInterface) & typeof HelixFormElement;
 /**
  * @summary A color picker made of a square and two ramps.
  *
@@ -62,11 +62,14 @@ 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-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.
  * @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-live - The live region of the button inside `eyedropper`, which says its pending label.
+ * @csspart eyedropper-spinner - The ring the eyedropper button turns while it is pending.
  * @csspart eyedropper-text - The words on the button inside `eyedropper`, trimmed to their capitals and baseline.
  * @csspart feedback - The message under the picker, while `feedback` is set.
  * @csspart field - One channel's number field with its label, in `channel-fields`.
@@ -77,6 +80,7 @@ declare const HelixHeadlessColorPicker_base: (new (...args: any[]) => import("@f
  * @csspart format - The control that changes the syntax the value is written in.
  * @csspart format-button - The button inside `format`.
  * @csspart format-live - The live region of the button inside `format`, which says its pending label.
+ * @csspart format-spinner - The ring the syntax button turns while it is pending.
  * @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
@@ -88,11 +92,15 @@ declare const HelixHeadlessColorPicker_base: (new (...args: any[]) => import("@f
  * @csspart swatch - One preset, an option in the `swatches` listbox.
  * @csspart swatches - The row of presets, a listbox.
  * @csspart value - The text field that holds the color. It accepts a typed or pasted color.
+ * @csspart wheel - The hue ring round the square, with `wheel`. Draw the ring and its mark from `--color-picker-hue`.
+ * @csspart wheel-hue - The range input behind the ring, which a reader turns with the keys.
  *
  * @cssproperty --color-picker-brightness - The chosen brightness, 0 to 100, as a percentage.
  * @cssproperty --color-picker-hue - The chosen hue, 0 to 360, unitless.
  * @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 invalid - While `invalid` is set or `feedback` says what is wrong.
  */
 export declare class HelixHeadlessColorPicker extends HelixHeadlessColorPicker_base {
     /**
@@ -165,15 +173,6 @@ export declare class HelixHeadlessColorPicker extends HelixHeadlessColorPicker_b
      * What the eyedropper is called.
      */
     eyedropperLabel: string;
-    /**
-     * A message under the picker, such as what is wrong with the color.
-     *
-     * While set, the picker is invalid and does not submit, as a field's
-     * `feedback` is, and the square and the value text are described by it.
-     * Color Input shows its own message here, so a reader in the open panel
-     * still sees it.
-     */
-    feedback: string;
     /**
      * The syntax the value is written in: `hex`, `rgb`, or `hsl`.
      *
@@ -193,16 +192,6 @@ export declare class HelixHeadlessColorPicker extends HelixHeadlessColorPicker_b
      * What the hue channel is called.
      */
     hueLabel: string;
-    /**
-     * Whether the current selection fails validation.
-     *
-     * A flag rather than a message, the split Date Picker also draws. A flat
-     * picker has no room of its own for a sentence: the field that wraps one owns
-     * the label, the hint and the feedback, and a second message inside the panel
-     * would be the same error said twice. What is left for the picker is the one
-     * 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.
@@ -319,6 +308,16 @@ export declare class HelixHeadlessColorPicker extends HelixHeadlessColorPicker_b
      * speaks it. Absent is the control's own sentence, in English.
      */
     valueMissingMessage?: string;
+    /**
+     * Draws the hue as a wheel around the square, in place of the hue ramp, as
+     * React Aria's ColorWheel sits round its ColorArea.
+     *
+     * The ring is one stop, a slider a reader turns with the arrow keys, Home
+     * and End, the same way round in either writing direction, and a press or a
+     * drag on it takes the hue in that direction. Off, the picker keeps its
+     * ramp.
+     */
+    wheel: boolean;
     /**
      * The color the reader has moved to, or nothing while they have moved none.
      *
@@ -412,8 +411,14 @@ export declare class HelixHeadlessColorPicker extends HelixHeadlessColorPicker_b
     /**
      * The arrows, Home and End in the presets: focus moves, and nothing is
      * chosen until Enter, Space or a press, as in React Aria's swatch picker.
+     *
+     * Core's roving set, as Legend's toggles are: the arrows follow the line of
+     * text, so the row reverses in a right-to-left page, Up and Down are the
+     * previous and the next since the row wraps onto lines, and focus stops at
+     * the ends, since a row of colors is no ring. A press from anywhere else in
+     * the picker is not the row's to move.
      */
-    private readonly handleSwatchKeydown;
+    protected readonly swatchKeys: KeyboardNavigationController;
     /** Walks the format on, and rewrites the value in it. */
     private readonly handleFormat;
     /**
@@ -436,6 +441,11 @@ export declare class HelixHeadlessColorPicker extends HelixHeadlessColorPicker_b
      * reaches a corner, and without it the handle stops wherever the pointer left.
      */
     private readonly handleGridPointer;
+    /**
+     * A press or a drag on the hue wheel: the hue in that direction from its
+     * center. A press in the square inside it is the square's.
+     */
+    private readonly handleWheelPointer;
     protected firstUpdated(changed: import('lit').PropertyValues): void;
     /**
      * Reports the color to the form.
@@ -470,8 +480,6 @@ export declare class HelixHeadlessColorPicker extends HelixHeadlessColorPicker_b
      * what React Aria's ColorArea does.
      */
     private readonly handleAreaKeydown;
-    /** @internal `feedback` marks the picker invalid, as a field's does. */
-    protected get validityFeedback(): string;
     /**
      * Reports "required and empty", or clears it.
      *

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

@@ -4,20 +4,20 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { CopyController, capturePointer, colorName, customElement, drawIcon, fillTemplate, formatColor, HelixFormElement, HelixSampleEndEvent, HelixSampleStartEvent, hostAria, hueName, inlineStep, isRtl, MixinControllerValue, parseColor, rovingStop, splitValues, toCss, wordsConverter, } from '@fusion.dev/helix-core';
+import { CopyController, capturePointer, clamp, colorName, customElement, drawIcon, fillTemplate, focusItemOf, formatColor, formatNumber, HelixFormElement, HelixSampleEndEvent, HelixSampleStartEvent, hostAria, hueName, isRtl, KeyboardNavigationController, localeOf, MixinControllerValue, MixinPickerFeedback, parseColor, rovingStop, splitValues, toCss, wordsConverter, } from '@fusion.dev/helix-core';
 import { eyedropper } from '@fusion.dev/helix-icons';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { live } from 'lit/directives/live.js';
 import { html } from 'lit/static-html.js';
 import { channelFields, writeChannel } from '../channels.js';
-import { swatchMove } from '../swatches.js';
+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 START = { alpha: 100, brightness: 100, hue: 0, saturation: 100 };
-let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinControllerValue(HelixFormElement) {
+let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinPickerFeedback(MixinControllerValue(HelixFormElement)) {
     constructor() {
         super(...arguments);
         this.alpha = false;
@@ -29,11 +29,9 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinContr
         this.copiedLabel = 'Copied';
         this.copyLabel = 'Copy {value}';
         this.eyedropperLabel = 'Sample a color from the screen';
-        this.feedback = '';
         this.formatLabel = 'Syntax: {format}. Change it.';
         this.greenLabel = 'Green';
         this.hueLabel = 'Hue';
-        this.invalid = false;
         this.lightnessLabel = 'Lightness';
         this.noEyedropper = false;
         this.noFormat = false;
@@ -47,6 +45,7 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinContr
         this.swatches = '';
         this.toolsLabel = 'Color tools';
         this.valueLabel = 'Color';
+        this.wheel = false;
         this.sampling = false;
         this.owned = false;
         this.announcesInput = true;
@@ -96,19 +95,21 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinContr
             }
             this.settle();
         };
-        this.handleSwatchKeydown = (event) => {
-            const row = [
-                ...(this.renderRoot.querySelectorAll('[part="swatches"] [part="swatch"]') ?? []),
-            ];
-            const at = row.indexOf(event.target);
-            const next = swatchMove(event.key, inlineStep(this, event.key), at, row.length);
-            if (at < 0 || next === null) {
-                return;
-            }
-            event.preventDefault();
-            this.swatchAt = next;
-            row[next]?.focus();
-        };
+        this.swatchKeys = new KeyboardNavigationController(this, {
+            items: () => [
+                ...(this.renderRoot?.querySelectorAll('[part="swatches"] [part="swatch"]') ??
+                    []),
+            ].map((swatch, index) => focusItemOf(swatch, {
+                focus: () => {
+                    this.swatchAt = index;
+                    swatch.focus();
+                },
+                owns: (node) => node === swatch,
+            })),
+            origin: 'focus',
+            selects: () => false,
+            wrap: false,
+        });
         this.handleFormat = () => {
             if (this.readOnly) {
                 return;
@@ -161,10 +162,32 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinContr
             if (box.width === 0 || box.height === 0) {
                 return;
             }
-            const fromLeft = Math.min(1, Math.max(0, (event.clientX - box.left) / box.width));
-            const across = isRtl(grid) ? 1 - fromLeft : fromLeft;
-            const down = Math.min(1, Math.max(0, (event.clientY - box.top) / box.height));
-            this.move({ brightness: Math.round((1 - down) * 100), saturation: Math.round(across * 100) });
+            this.move(areaAt(event.clientX, event.clientY, box, isRtl(grid)));
+        };
+        this.handleWheelPointer = (event) => {
+            const wheel = event.currentTarget;
+            const grid = this.partNamed('grid');
+            if (this.isDisabled || (grid && event.composedPath().includes(grid))) {
+                return;
+            }
+            if (event.type === 'pointerup' || event.type === 'pointercancel') {
+                if (wheel.hasPointerCapture(event.pointerId)) {
+                    this.settle();
+                }
+                return;
+            }
+            if (event.type === 'pointerdown') {
+                capturePointer(wheel, event.pointerId);
+                this.partNamed('wheel-hue')?.focus();
+            }
+            else if (!wheel.hasPointerCapture(event.pointerId)) {
+                return;
+            }
+            event.preventDefault();
+            const box = wheel.getBoundingClientRect();
+            if (box.width > 0 && box.height > 0) {
+                this.move({ hue: hueAt(event.clientX, event.clientY, box) });
+            }
         };
         this.handleAreaKeydown = (event) => {
             if (this.isDisabled || this.readOnly) {
@@ -172,14 +195,14 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinContr
             }
             const color = this.color;
             const along = isRtl(this) ? -1 : 1;
-            const clamp = (at) => Math.min(100, Math.max(0, at));
+            const held = (at) => clamp(at, 0, 100);
             const moves = {
-                ArrowDown: { brightness: clamp(color.brightness - 1) },
-                ArrowLeft: { saturation: clamp(color.saturation - along) },
-                ArrowRight: { saturation: clamp(color.saturation + along) },
-                ArrowUp: { brightness: clamp(color.brightness + 1) },
-                PageDown: { brightness: clamp(color.brightness - 10) },
-                PageUp: { brightness: clamp(color.brightness + 10) },
+                ArrowDown: { brightness: held(color.brightness - 1) },
+                ArrowLeft: { saturation: held(color.saturation - along) },
+                ArrowRight: { saturation: held(color.saturation + along) },
+                ArrowUp: { brightness: held(color.brightness + 1) },
+                PageDown: { brightness: held(color.brightness - 10) },
+                PageUp: { brightness: held(color.brightness + 10) },
             };
             const next = moves[event.key];
             if (!next) {
@@ -239,9 +262,6 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinContr
         this.internals.setFormValue(this.value === '' ? null : this.value);
         this.reportRequired();
     }
-    get validityFeedback() {
-        return this.feedback;
-    }
     reportRequired() {
         if (this.required && this.value === '') {
             this.internals.setValidity({ valueMissing: true }, this.valueMissingMessage || 'Choose a color.', this.partNamed('grid') ?? undefined);
@@ -325,9 +345,10 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinContr
       part="channel"
       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"
+        marker-label: channel-marker-label, markers: channel-markers, output: channel-output,
+        tooltip: channel-tooltip, tooltips: channel-tooltips"
       data-channel=${channel}
-      aria-invalid=${this.invalid ? 'true' : nothing}
+      aria-invalid=${this.marked ? 'true' : nothing}
       label=${label}
       max=${max}
       min="0"
@@ -365,7 +386,6 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinContr
     }
     willUpdate(changed) {
         super.willUpdate(changed);
-        this.internals.ariaInvalid = this.invalid ? 'true' : null;
         const outside = [...(this.internals.labels ?? [])];
         hostAria(this.internals, { labelledBy: outside, role: outside.length > 0 ? 'group' : '' });
         if (!this.hydrating) {
@@ -377,7 +397,7 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinContr
                 ${this.sampling && !this.noEyedropper
             ? html `<${this.tag('button')}
                         part="eyedropper"
-      exportparts="button: eyedropper-button, live: eyedropper-live, text: eyedropper-text"
+      exportparts="button: eyedropper-button, live: eyedropper-live, spinner: eyedropper-spinner, text: eyedropper-text"
                         label=${this.eyedropperLabel}
                         ?disabled=${this.isDisabled}
                         @click=${this.handleEyeDropper}
@@ -389,7 +409,7 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinContr
             ? nothing
             : html `<${this.tag('button')}
                         part="format"
-      exportparts="button: format-button, live: format-live, text: format-text"
+      exportparts="button: format-button, live: format-live, spinner: format-spinner, text: format-text"
                         label=${fillTemplate(this.formatLabel, { format: this.format ?? 'hex' })}
                         ?disabled=${this.isDisabled}
                         @click=${this.handleFormat}
@@ -411,7 +431,6 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinContr
       role="listbox"
       aria-label=${this.presetsLabel}
       aria-orientation="horizontal"
-      @keydown=${this.handleSwatchKeydown}
     >
       ${presets.map((preset, index) => {
             const parsed = parseColor(preset);
@@ -420,7 +439,7 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinContr
           type="button"
           role="option"
           tabindex=${index === stop ? '0' : '-1'}
-          aria-label=${parsed ? colorName(parsed, this.colorWords, this.lang) : preset}
+          aria-label=${parsed ? colorName(parsed, this.colorWords, localeOf(this)) : preset}
           aria-selected=${chosen[index] ? 'true' : 'false'}
           style="--color-picker-swatch: ${preset}"
           ?disabled=${this.isDisabled}
@@ -435,13 +454,13 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinContr
     render() {
         const color = this.color;
         const painted = toCss(color);
-        const named = colorName(color, this.colorWords, this.lang);
+        const named = colorName(color, this.colorWords, localeOf(this));
         const both = `${this.saturationLabel} ${color.saturation}%, ${this.brightnessLabel} ${color.brightness}%, ${named}`;
         const reversed = `${this.brightnessLabel} ${color.brightness}%, ${this.saturationLabel} ${color.saturation}%, ${named}`;
-        const hue = hueName({ alpha: 100, brightness: 100, hue: color.hue, saturation: 100 }, this.colorWords, this.lang);
+        const hue = hueName({ alpha: 100, brightness: 100, hue: color.hue, saturation: 100 }, this.colorWords, localeOf(this));
         const owner = this.getAttribute('aria-label')?.trim();
         const axisName = (channel) => (owner ? `${owner}, ${channel}` : channel);
-        return html `<div
+        const area = html `<div
         part="grid"
         style="--color-picker-hue: ${color.hue}; --color-picker-saturation: ${color.saturation}%; --color-picker-brightness: ${color.brightness}%"
         @pointerdown=${this.handleGridPointer}
@@ -458,7 +477,7 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinContr
           aria-label=${axisName(this.saturationLabel)}
           aria-describedby=${this.feedback === '' ? nothing : 'feedback'}
           aria-valuetext=${both}
-          aria-invalid=${this.invalid ? 'true' : nothing}
+          aria-invalid=${this.marked ? 'true' : nothing}
           .value=${String(color.saturation)}
           ?disabled=${this.isDisabled}
           @input=${(event) => this.takeArea('saturation', event)}
@@ -474,13 +493,41 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinContr
           aria-label=${axisName(this.brightnessLabel)}
           aria-describedby=${this.feedback === '' ? nothing : 'feedback'}
           aria-valuetext=${reversed}
-          aria-invalid=${this.invalid ? 'true' : nothing}
+          aria-invalid=${this.marked ? 'true' : nothing}
           .value=${String(color.brightness)}
           ?disabled=${this.isDisabled}
           @input=${(event) => this.takeArea('brightness', event)}
           @change=${() => this.settle()}
         />
-      </div>
+      </div>`;
+        return html `${this.wheel
+            ? html `<div
+            part="wheel"
+            style="--color-picker-hue: ${color.hue}"
+            @pointerdown=${this.handleWheelPointer}
+            @pointermove=${this.handleWheelPointer}
+            @pointerup=${this.handleWheelPointer}
+            @pointercancel=${this.handleWheelPointer}
+          >
+            ${''}
+            <input
+              part="wheel-hue"
+              type="range"
+              min="0"
+              max="360"
+              dir="ltr"
+              aria-label=${axisName(this.hueLabel)}
+              aria-describedby=${this.feedback === '' ? nothing : 'feedback'}
+              aria-valuetext=${`${color.hue}, ${hue}`}
+              aria-invalid=${this.marked ? 'true' : nothing}
+              .value=${String(color.hue)}
+              ?disabled=${this.isDisabled}
+              @input=${(event) => this.takeArea('hue', event)}
+              @change=${() => this.settle()}
+            />
+            ${area}
+          </div>`
+            : area}
 
       <div part="controls" style="--color-picker-hue: ${color.hue}; --color-picker-swatch: ${painted}">
         <button
@@ -494,9 +541,9 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinContr
           @click=${() => this.copier.copy(this.value)}
         ></button>
         <div part="channels">
-          ${this.renderChannel('hue', this.hueLabel, 360, color.hue, `{value}, ${hue}`)}
+          ${this.wheel ? nothing : this.renderChannel('hue', this.hueLabel, 360, color.hue, `{value}, ${hue}`)}
           ${this.alpha
-            ? this.renderChannel('alpha', this.opacityLabel, 100, color.alpha, new Intl.NumberFormat(this.lang || undefined, { style: 'percent' }).format(color.alpha / 100))
+            ? this.renderChannel('alpha', this.opacityLabel, 100, color.alpha, formatNumber(color.alpha / 100, localeOf(this), { style: 'percent' }))
             : nothing}
         </div>
       </div>
@@ -514,7 +561,7 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinContr
                 type="text"
                 aria-label=${this.valueLabel}
                 aria-describedby=${this.feedback === '' ? nothing : 'feedback'}
-                aria-invalid=${this.invalid ? 'true' : nothing}
+                aria-invalid=${this.marked ? 'true' : nothing}
                 autocomplete=${this.autocomplete || nothing}
                 spellcheck="false"
                 .value=${this.value}
@@ -530,7 +577,7 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinContr
       </div>
 
       ${this.presets.length === 0 ? nothing : this.renderSwatches(painted)}
-      ${this.feedback === '' ? nothing : html `<p part="feedback" id="feedback">${this.feedback}</p>`}`;
+      ${this.renderPickerFeedback()}`;
     }
 };
 __decorate([
@@ -563,9 +610,6 @@ __decorate([
 __decorate([
     property({ attribute: 'eyedropper-label' })
 ], HelixHeadlessColorPicker.prototype, "eyedropperLabel", void 0);
-__decorate([
-    property()
-], HelixHeadlessColorPicker.prototype, "feedback", void 0);
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessColorPicker.prototype, "format", void 0);
@@ -578,9 +622,6 @@ __decorate([
 __decorate([
     property({ attribute: 'hue-label' })
 ], HelixHeadlessColorPicker.prototype, "hueLabel", void 0);
-__decorate([
-    property({ reflect: true, type: Boolean })
-], HelixHeadlessColorPicker.prototype, "invalid", void 0);
 __decorate([
     property({ attribute: 'lightness-label' })
 ], HelixHeadlessColorPicker.prototype, "lightnessLabel", void 0);
@@ -623,6 +664,9 @@ __decorate([
 __decorate([
     property({ attribute: 'value-missing-message' })
 ], HelixHeadlessColorPicker.prototype, "valueMissingMessage", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HelixHeadlessColorPicker.prototype, "wheel", void 0);
 __decorate([
     state()
 ], HelixHeadlessColorPicker.prototype, "moved", void 0);

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

@@ -0,0 +1,28 @@
+/** A box on the screen, as `getBoundingClientRect` gives one. */
+export interface WheelBox {
+    height: number;
+    left: number;
+    top: number;
+    width: number;
+}
+/**
+ * The hue at a point on a hue wheel: degrees clockwise from the top, 0 to
+ * 359, the way React Aria's ColorWheel and every paint program lay hue out.
+ *
+ * Measured from the box's center, so a press anywhere in the wheel answers,
+ * not only one on the ring: the ring is the target a reader aims at, and a
+ * press a little inside it still means the hue in that direction. Clockwise
+ * whatever the writing direction, since a circle has no line of text.
+ */
+export declare const hueAt: (x: number, y: number, box: WheelBox) => number;
+/**
+ * The saturation and brightness at a point in the color square, 0 to 100:
+ * brightness falls downward, and saturation runs along the line, the way the
+ * two ramps under the square do, being native ranges. On a right-to-left page
+ * (`rtl`) it grows toward the left. A point outside the square is held to its
+ * edge.
+ */
+export declare const areaAt: (x: number, y: number, box: WheelBox, rtl: boolean) => {
+    brightness: number;
+    saturation: number;
+};

package/dist/color-picker/wheel.js

@@ -0,0 +1,15 @@
+import { clamp } from '@fusion.dev/helix-core';
+export const hueAt = (x, y, box) => {
+    const across = x - (box.left + box.width / 2);
+    const down = y - (box.top + box.height / 2);
+    const degrees = Math.round((Math.atan2(across, -down) * 180) / Math.PI);
+    return (degrees + 360) % 360;
+};
+export const areaAt = (x, y, box, rtl) => {
+    const fromLeft = clamp((x - box.left) / box.width, 0, 1);
+    const down = clamp((y - box.top) / box.height, 0, 1);
+    return {
+        brightness: Math.round((1 - down) * 100),
+        saturation: Math.round((rtl ? 1 - fromLeft : fromLeft) * 100),
+    };
+};