@fusion.dev/helix-headless 0.57.0 → 0.58.1

package/custom-elements.json

@@ -18896,169 +18896,11 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/color-picker/color.ts",
-      "declarations": [
-        {
-          "kind": "function",
-          "name": "toRgb",
-          "return": {
-            "type": {
-              "text": "{ blue: number; green: number; red: number }"
-            }
-          },
-          "parameters": [
-            {
-              "name": "color",
-              "type": {
-                "text": "Color"
-              }
-            }
-          ],
-          "description": "HSB to bytes, which is the road every written syntax goes down."
-        },
-        {
-          "kind": "function",
-          "name": "splitColors",
-          "return": {
-            "type": {
-              "text": "string[]"
-            }
-          },
-          "parameters": [
-            {
-              "name": "value",
-              "type": {
-                "text": "string"
-              }
-            }
-          ],
-          "description": "Splits a comma-separated list of colors, ignoring the commas inside them.\n\nA plain `split(',')` cannot hold the legacy syntaxes:\n`#ef4444, rgb(249 115 22), rgba(34,197,94,.5)` comes apart into six fragments,\nfour of them not colors, and the row quietly renders three swatches instead of\nfour. The modern space-separated forms survive it, which is what makes such a\nlist look like it works.\n\nDepth rather than a regular expression, because the thing that matters is\nwhether a comma is inside a function call and that is exactly what a counter\nanswers. No color syntax nests, so a single counter is enough."
-        },
-        {
-          "kind": "function",
-          "name": "parseColor",
-          "return": {
-            "type": {
-              "text": "Color | null"
-            }
-          },
-          "parameters": [
-            {
-              "name": "value",
-              "type": {
-                "text": "string"
-              }
-            }
-          ],
-          "description": "Any of the syntaxes to the working model, or `null` where it is not a color.\n\nNamed colors are not here. Resolving `rebeccapurple` means either shipping\nthe table of a hundred and forty or asking the browser, and the browser is not\npresent on the server: a field that accepted a name client-side and rejected\nit during a server render would be worse than one that never took it."
-        },
-        {
-          "kind": "function",
-          "name": "formatColor",
-          "return": {
-            "type": {
-              "text": "string"
-            }
-          },
-          "parameters": [
-            {
-              "name": "color",
-              "type": {
-                "text": "Color"
-              }
-            },
-            {
-              "name": "format",
-              "type": {
-                "text": "ColorFormat"
-              }
-            },
-            {
-              "name": "withAlpha",
-              "type": {
-                "text": "boolean"
-              }
-            }
-          ],
-          "description": "The working model back out, in the syntax asked for.\n\nThe alpha is written only where the component carries one. A consumer who did\nnot ask for transparency should not have to strip `ff` off every hex or read\npast a fourth argument they never wanted."
-        },
-        {
-          "kind": "function",
-          "name": "toCss",
-          "return": {
-            "type": {
-              "text": "string"
-            }
-          },
-          "parameters": [
-            {
-              "name": "color",
-              "type": {
-                "text": "Color"
-              }
-            }
-          ],
-          "description": "The color as CSS, for the swatches and the tracks. Always with its alpha."
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "toRgb",
-          "declaration": {
-            "name": "toRgb",
-            "module": "src/color-picker/color.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "splitColors",
-          "declaration": {
-            "name": "splitColors",
-            "module": "src/color-picker/color.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "parseColor",
-          "declaration": {
-            "name": "parseColor",
-            "module": "src/color-picker/color.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "formatColor",
-          "declaration": {
-            "name": "formatColor",
-            "module": "src/color-picker/color.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "toCss",
-          "declaration": {
-            "name": "toCss",
-            "module": "src/color-picker/color.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/color-picker/index.ts",
       "declarations": [],
       "exports": [
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "module": "src/color-picker/color.js"
-          }
-        },
         {
           "kind": "js",
           "name": "*",
@@ -94129,7 +93971,7 @@
               }
             }
           ],
-          "description": "Whether a string is a time the rest of this component can reason about."
+          "description": "Whether a string is a time the rest of this component can reason about.\n\n**Narrower than core's `valueAsTime` on purpose, and the difference is\nseconds.** That one takes them because `<input type=\"time\">` does, at a step\nbelow a minute. This library has no such step: `step` here is minutes and is\nfloored at one, so nothing it offers or writes ever carries a second, and\n`toMinutes` below would drop one silently if this let it through. Widening\nthis to the platform's shape would let a value in that the rest of the family\ncannot hold."
         },
         {
           "kind": "function",

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

@@ -1,7 +1,6 @@
-import { AriaForwardController, HelixFormElement } from '@fusion.dev/helix-core';
+import { AriaForwardController, type ColorFormat, HelixFormElement } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
 import '../../color-picker/index.js';
-import { type ColorFormat } from '../../color-picker/color.js';
 declare const HelixHeadlessColorInput_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinPickerFieldInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerOpenInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerValueInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinFieldInterface) & typeof HelixFormElement;
 /**
  * @summary A color, typed in any syntax or picked from a panel.

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

@@ -4,12 +4,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { AriaForwardController, customElement, HelixFormElement, MixinControllerOpen, MixinControllerValue, MixinField, MixinPickerField, } from '@fusion.dev/helix-core';
+import { AriaForwardController, customElement, HelixFormElement, MixinControllerOpen, MixinControllerValue, MixinField, MixinPickerField, parseColor, toCss, } from '@fusion.dev/helix-core';
 import { nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { html } from 'lit/static-html.js';
 import '../../color-picker/index.js';
-import { parseColor, toCss } from '../../color-picker/color.js';
 let HelixHeadlessColorInput = class HelixHeadlessColorInput extends MixinPickerField(MixinControllerOpen(MixinControllerValue(MixinField(HelixFormElement)))) {
     constructor() {
         super(...arguments);

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

@@ -1,2 +1 @@
-export * from './color.js';
 export * from './root/color-picker-root.js';

package/dist/color-picker/index.js

@@ -1,2 +1 @@
-export * from './color.js';
 export * from './root/color-picker-root.js';

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

@@ -1,9 +1,8 @@
-import { HelixFormElement } from '@fusion.dev/helix-core';
+import { type Color, type ColorFormat, HelixFormElement } 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';
-import { type Color, type ColorFormat } from '../color.js';
 declare const HelixHeadlessColorPicker_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerValueInterface) & typeof HelixFormElement;
 /**
  * @summary Picks a color, from a square and two ramps.

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

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { CopyController, capturePointer, customElement, drawIcon, HelixFormElement, HelixSampleEndEvent, HelixSampleStartEvent, MixinControllerValue, } from '@fusion.dev/helix-core';
+import { CopyController, capturePointer, customElement, drawIcon, formatColor, HelixFormElement, HelixSampleEndEvent, HelixSampleStartEvent, MixinControllerValue, parseColor, splitColors, toCss, } from '@fusion.dev/helix-core';
 import { eyedropper } from '@fusion.dev/helix-icons';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -12,7 +12,6 @@ import { html } from 'lit/static-html.js';
 import '../../button/index.js';
 import '../../button-group/index.js';
 import '../../slider/index.js';
-import { formatColor, parseColor, splitColors, toCss, } from '../color.js';
 const FORMATS = ['hex', 'rgb', 'hsl'];
 const START = { alpha: 100, brightness: 100, hue: 0, saturation: 100 };
 let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinControllerValue(HelixFormElement) {

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

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { AriaForwardController, valueAsDate as asDate, customElement, dateAsValue as fromDate, HelixFormElement, MixinControllerOpen, MixinControllerValue, MixinField, MixinPickerEditing, MixinPickerField, MixinTokens, } from '@fusion.dev/helix-core';
+import { AriaForwardController, valueAsDate as asDate, customElement, dateAsValue as fromDate, HelixFormElement, isDateValue, MixinControllerOpen, MixinControllerValue, MixinField, MixinPickerEditing, MixinPickerField, MixinTokens, } from '@fusion.dev/helix-core';
 import { calendarBlank } from '@fusion.dev/helix-icons';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -12,7 +12,6 @@ import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 import { html } from 'lit/static-html.js';
 import '../../date-picker/index.js';
 import '../../tag/index.js';
-const isIso = (value) => /^\d{4}-\d{2}-\d{2}$/.test(value);
 const dates = (value) => value
     .replace(/\s+[–-]\s+/g, ',')
     .split(',')
@@ -47,7 +46,7 @@ let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinPickerEdi
                 return;
             }
             const held = dates(typed);
-            const whole = held.length > 0 && held.every(isIso);
+            const whole = held.length > 0 && held.every(isDateValue);
             this.requestValue(whole ? held.join(',') : typed);
             this.restore();
         };
@@ -56,7 +55,7 @@ let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinPickerEdi
                 return;
             }
             const held = dates(this.value);
-            if (event.key === 'Enter' && isIso(this.draft)) {
+            if (event.key === 'Enter' && isDateValue(this.draft)) {
                 event.preventDefault();
                 if (!held.includes(this.draft)) {
                     this.requestValue([...held, this.draft].join(','));
@@ -107,10 +106,10 @@ let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinPickerEdi
     }
     get picked() {
         const held = dates(this.value);
-        return held.length > 0 && held.every(isIso) ? held.join(',') : '';
+        return held.length > 0 && held.every(isDateValue) ? held.join(',') : '';
     }
     written(date) {
-        if (this.dateStyle === 'iso' || !isIso(date)) {
+        if (this.dateStyle === 'iso' || !isDateValue(date)) {
             return date;
         }
         const at = new Date(`${date}T00:00:00Z`);
@@ -141,7 +140,7 @@ let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinPickerEdi
     }
     validate() {
         const held = dates(this.value);
-        if (held.length > 0 && !held.every(isIso)) {
+        if (held.length > 0 && !held.every(isDateValue)) {
             return this.mode === undefined
                 ? 'Enter a date as YYYY-MM-DD.'
                 : 'Enter dates as YYYY-MM-DD, separated by commas.';

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

@@ -21,15 +21,6 @@ const KEYS = new Set([
     'PageUp',
     ' ',
 ]);
-const toUtc = (iso) => {
-    const parts = /^(\d{4})-(\d{2})-(\d{2})$/.exec(iso);
-    if (!parts) {
-        return null;
-    }
-    const date = new Date(Date.UTC(Number(parts[1]), Number(parts[2]) - 1, Number(parts[3])));
-    return Number.isNaN(date.getTime()) ? null : date;
-};
-const toIso = (date) => date.toISOString().slice(0, 10);
 const localToday = () => {
     const now = new Date();
     const month = `${now.getMonth() + 1}`.padStart(2, '0');
@@ -104,7 +95,7 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinControl
         this.step = 1;
     }
     get month() {
-        return this.monthState ?? (this.defaultMonth || toIso(this.derivedMonth).slice(0, 7));
+        return this.monthState ?? (this.defaultMonth || fromDate(this.derivedMonth).slice(0, 7));
     }
     set month(next) {
         const previous = this.month;
@@ -137,12 +128,12 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinControl
         return this.derivedMonth;
     }
     get derivedMonth() {
-        const from = toUtc(this.selected[0] ?? '') ?? new Date();
+        const from = asDate(this.selected[0] ?? '') ?? new Date();
         return new Date(Date.UTC(from.getUTCFullYear(), from.getUTCMonth(), 1));
     }
     get anchor() {
         const shown = this.shown;
-        for (const candidate of [toUtc(this.focused), toUtc(this.selected[0] ?? '')]) {
+        for (const candidate of [asDate(this.focused), asDate(this.selected[0] ?? '')]) {
             if (candidate && sameMonth(candidate, shown)) {
                 return candidate;
             }
@@ -155,7 +146,7 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinControl
         return Array.from({ length: 6 }, (_, week) => Array.from({ length: 7 }, (_, day) => addDays(start, week * 7 + day)));
     }
     barred(date) {
-        const iso = toIso(date);
+        const iso = fromDate(date);
         if (this.min !== '' && iso < this.min) {
             return true;
         }
@@ -195,7 +186,7 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinControl
         });
     }
     moveTo(date) {
-        this.focused = toIso(date);
+        this.focused = fromDate(date);
         this.show(date);
         this.updateComplete.then(() => {
             this.renderRoot.querySelector('[part~="cell"][tabindex="0"]')?.focus();
@@ -208,7 +199,7 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinControl
         if (this.barred(date)) {
             return;
         }
-        const iso = toIso(date);
+        const iso = fromDate(date);
         const held = this.selected;
         let next;
         if (this.mode === 'range') {
@@ -309,7 +300,7 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinControl
     renderMonth(month, index) {
         const { full, heading, weekday } = this.formats;
         const weeks = this.weeksOf(month);
-        const anchor = toIso(this.anchor);
+        const anchor = fromDate(this.anchor);
         const today = localToday();
         const range = this.range;
         const first = index === 0;
@@ -349,7 +340,7 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinControl
         </div>
         ${weeks.map((week) => html `<div part="week" role="row">
             ${week.map((date) => {
-            const iso = toIso(date);
+            const iso = fromDate(date);
             const disabled = this.barred(date);
             const selected = this.isSelected(iso);
             const outside = !sameMonth(date, month);

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

@@ -2,7 +2,17 @@ import { HelixFormElement } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
 import '../../listbox/index.js';
 import '../../option/index.js';
-/** Whether a string is a time the rest of this component can reason about. */
+/**
+ * Whether a string is a time the rest of this component can reason about.
+ *
+ * **Narrower than core's `valueAsTime` on purpose, and the difference is
+ * seconds.** That one takes them because `<input type="time">` does, at a step
+ * below a minute. This library has no such step: `step` here is minutes and is
+ * floored at one, so nothing it offers or writes ever carries a second, and
+ * `toMinutes` below would drop one silently if this let it through. Widening
+ * this to the platform's shape would let a value in that the rest of the family
+ * cannot hold.
+ */
 export declare const isTime: (value: string) => boolean;
 /** Minutes since midnight, or `null` where it is not a time. */
 export declare const toMinutes: (value: string) => number | null;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fusion.dev/helix-headless",
   "description": "Headless component tier. Structure, accessibility, state, and form participation. No styling.",
-  "version": "0.57.0",
+  "version": "0.58.1",
   "license": "MIT",
   "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
   "repository": {
@@ -46,14 +46,14 @@
   },
   "bugs": "https://github.com/project-fusion/fusion/issues",
   "dependencies": {
-    "@fusion.dev/helix-core": "0.57.0",
-    "@fusion.dev/helix-icons": "0.57.0",
+    "@fusion.dev/helix-core": "0.58.1",
+    "@fusion.dev/helix-icons": "0.58.1",
     "uqr": "^0.1.3"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.11.0",
-    "@fusion.dev/helix-cem": "0.57.0",
-    "@fusion.dev/helix-testing": "0.57.0",
+    "@fusion.dev/helix-cem": "0.58.1",
+    "@fusion.dev/helix-testing": "0.58.1",
     "@fusion.dev/scripts": "0.0.0-dev",
     "@happy-dom/global-registrator": "^20.0.0",
     "@lit-labs/ssr": "^4.1.0",

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

@@ -1,73 +0,0 @@
-/**
- * Reading and writing the color syntaxes a field is allowed to hold.
- *
- * **The working model is HSB**, hue and saturation and brightness, because that
- * is what the panel is: a square of saturation against brightness with a hue
- * ramp beside it. HSL would put the square's corners somewhere a reader does not
- * expect, since full saturation in HSL is a mid-lightness band rather than a
- * corner.
- *
- * **Every syntax here is read; three are written.** A field that refuses
- * `rgb(255 0 0)` because it prefers hex is a field arguing with the person using
- * it, so the space-separated forms, the comma forms, `rgba` and `hsla` are all
- * taken. What is written back is whichever of hex, rgb or hsl the component is
- * set to, so a value stays in the shape the consumer asked for however it was
- * entered.
- *
- * **What is written is the comma form.** Both are valid, and the commas are what
- * a reader recognizes, what most code around them holds, and what pastes into
- * anything without a second thought. A syntax a value is handed *out* in is not
- * the place to be early. `rgba` and `hsla` come with them, since a comma form
- * with a fourth argument is spelled that way.
- *
- * Its own module rather than sitting in the element, because it is arithmetic
- * with no DOM in it: this is the half worth testing directly.
- */
-/** A color as the panel holds it. Alpha and the two percentages are 0 to 100. */
-export interface Color {
-    alpha: number;
-    brightness: number;
-    hue: number;
-    saturation: number;
-}
-/** The syntaxes a value can be written in. */
-export type ColorFormat = 'hex' | 'hsl' | 'rgb';
-/** HSB to bytes, which is the road every written syntax goes down. */
-export declare const toRgb: (color: Color) => {
-    blue: number;
-    green: number;
-    red: number;
-};
-/**
- * Splits a comma-separated list of colors, ignoring the commas inside them.
- *
- * A plain `split(',')` cannot hold the legacy syntaxes:
- * `#ef4444, rgb(249 115 22), rgba(34,197,94,.5)` comes apart into six fragments,
- * four of them not colors, and the row quietly renders three swatches instead of
- * four. The modern space-separated forms survive it, which is what makes such a
- * list look like it works.
- *
- * Depth rather than a regular expression, because the thing that matters is
- * whether a comma is inside a function call and that is exactly what a counter
- * answers. No color syntax nests, so a single counter is enough.
- */
-export declare const splitColors: (value: string) => string[];
-/**
- * Any of the syntaxes to the working model, or `null` where it is not a color.
- *
- * Named colors are not here. Resolving `rebeccapurple` means either shipping
- * the table of a hundred and forty or asking the browser, and the browser is not
- * present on the server: a field that accepted a name client-side and rejected
- * it during a server render would be worse than one that never took it.
- */
-export declare const parseColor: (value: string) => Color | null;
-/**
- * The working model back out, in the syntax asked for.
- *
- * The alpha is written only where the component carries one. A consumer who did
- * not ask for transparency should not have to strip `ff` off every hex or read
- * past a fourth argument they never wanted.
- */
-export declare const formatColor: (color: Color, format: ColorFormat, withAlpha: boolean) => string;
-/** The color as CSS, for the swatches and the tracks. Always with its alpha. */
-export declare const toCss: (color: Color) => string;

package/dist/color-picker/color.js

@@ -1,168 +0,0 @@
-const clamp = (value, low, high) => Math.min(high, Math.max(low, value));
-const toAlpha = (token) => {
-    if (token === undefined) {
-        return 100;
-    }
-    const number = Number.parseFloat(token);
-    if (Number.isNaN(number)) {
-        return 100;
-    }
-    return clamp(token.includes('%') ? number : number * 100, 0, 100);
-};
-const toByte = (token) => {
-    const number = Number.parseFloat(token);
-    return clamp(token.includes('%') ? (number / 100) * 255 : number, 0, 255);
-};
-const rgbToHsb = (red, green, blue, alpha) => {
-    const r = red / 255;
-    const g = green / 255;
-    const b = blue / 255;
-    const high = Math.max(r, g, b);
-    const low = Math.min(r, g, b);
-    const span = high - low;
-    let hue = 0;
-    if (span !== 0) {
-        if (high === r) {
-            hue = (g - b) / span + (g < b ? 6 : 0);
-        }
-        else if (high === g) {
-            hue = (b - r) / span + 2;
-        }
-        else {
-            hue = (r - g) / span + 4;
-        }
-        hue *= 60;
-    }
-    return {
-        alpha,
-        brightness: Math.round(high * 100),
-        hue: Math.round(hue),
-        saturation: Math.round(high === 0 ? 0 : (span / high) * 100),
-    };
-};
-export const toRgb = (color) => {
-    const hue = (((color.hue % 360) + 360) % 360) / 60;
-    const saturation = color.saturation / 100;
-    const brightness = color.brightness / 100;
-    const chroma = brightness * saturation;
-    const middle = chroma * (1 - Math.abs((hue % 2) - 1));
-    const base = brightness - chroma;
-    const sextants = [
-        [chroma, middle, 0],
-        [middle, chroma, 0],
-        [0, chroma, middle],
-        [0, middle, chroma],
-        [middle, 0, chroma],
-        [chroma, 0, middle],
-    ];
-    const [red, green, blue] = sextants[Math.floor(hue) % 6] ?? [0, 0, 0];
-    return {
-        blue: Math.round((blue + base) * 255),
-        green: Math.round((green + base) * 255),
-        red: Math.round((red + base) * 255),
-    };
-};
-const toHsl = (color) => {
-    const saturation = color.saturation / 100;
-    const brightness = color.brightness / 100;
-    const lightness = (brightness * (2 - saturation)) / 2;
-    return {
-        hue: ((color.hue % 360) + 360) % 360,
-        lightness: Math.round(lightness * 100),
-        saturation: Math.round((lightness === 0 || lightness === 1
-            ? 0
-            : (brightness - lightness) / Math.min(lightness, 1 - lightness)) * 100),
-    };
-};
-export const splitColors = (value) => {
-    const found = [];
-    let depth = 0;
-    let current = '';
-    for (const character of value) {
-        if (character === '(') {
-            depth += 1;
-        }
-        else if (character === ')') {
-            depth = Math.max(0, depth - 1);
-        }
-        if (character === ',' && depth === 0) {
-            found.push(current.trim());
-            current = '';
-        }
-        else {
-            current += character;
-        }
-    }
-    found.push(current.trim());
-    return found.filter(Boolean);
-};
-export const parseColor = (value) => {
-    const text = value.trim().toLowerCase();
-    if (text === '') {
-        return null;
-    }
-    if (text.startsWith('#')) {
-        const digits = text.slice(1);
-        const short = digits.length === 3 || digits.length === 4;
-        const long = digits.length === 6 || digits.length === 8;
-        if ((!short && !long) || !/^[\da-f]+$/.test(digits)) {
-            return null;
-        }
-        const width = short ? 1 : 2;
-        const channel = (index) => {
-            const piece = digits.slice(index * width, index * width + width);
-            return Number.parseInt(short ? piece + piece : piece, 16);
-        };
-        const carriesAlpha = digits.length === 4 || digits.length === 8;
-        return rgbToHsb(channel(0), channel(1), channel(2), carriesAlpha ? Math.round((channel(3) / 255) * 100) : 100);
-    }
-    const call = /^(rgba?|hsla?)\(([^)]*)\)$/.exec(text);
-    if (!call?.[1] || call[2] === undefined) {
-        return null;
-    }
-    const [first = '', second = '', third = '', fourth] = call[2]
-        .replace(/[,/]/g, ' ')
-        .split(/\s+/)
-        .filter(Boolean);
-    if (first === '' || second === '' || third === '') {
-        return null;
-    }
-    const alpha = toAlpha(fourth);
-    if (call[1].startsWith('rgb')) {
-        return rgbToHsb(toByte(first), toByte(second), toByte(third), alpha);
-    }
-    const hue = Number.parseFloat(first);
-    const saturation = clamp(Number.parseFloat(second), 0, 100) / 100;
-    const lightness = clamp(Number.parseFloat(third), 0, 100) / 100;
-    if (Number.isNaN(hue) || Number.isNaN(saturation) || Number.isNaN(lightness)) {
-        return null;
-    }
-    const brightness = lightness + saturation * Math.min(lightness, 1 - lightness);
-    return {
-        alpha,
-        brightness: Math.round(brightness * 100),
-        hue: Math.round(((hue % 360) + 360) % 360),
-        saturation: Math.round((brightness === 0 ? 0 : 2 * (1 - lightness / brightness)) * 100),
-    };
-};
-export const formatColor = (color, format, withAlpha) => {
-    const alpha = clamp(color.alpha, 0, 100) / 100;
-    const opacity = Number(alpha.toFixed(2));
-    if (format === 'hsl') {
-        const { hue, lightness, saturation } = toHsl(color);
-        const body = `${Math.round(hue)}, ${saturation}%, ${lightness}%`;
-        return withAlpha ? `hsla(${body}, ${opacity})` : `hsl(${body})`;
-    }
-    const { blue, green, red } = toRgb(color);
-    if (format === 'rgb') {
-        const body = `${red}, ${green}, ${blue}`;
-        return withAlpha ? `rgba(${body}, ${opacity})` : `rgb(${body})`;
-    }
-    const byte = (one) => one.toString(16).padStart(2, '0');
-    const hex = `#${byte(red)}${byte(green)}${byte(blue)}`;
-    return withAlpha ? hex + byte(Math.round(alpha * 255)) : hex;
-};
-export const toCss = (color) => {
-    const { blue, green, red } = toRgb(color);
-    return `rgb(${red} ${green} ${blue} / ${clamp(color.alpha, 0, 100)}%)`;
-};