@fusion.dev/helix-core 0.154.0 → 0.156.0

package/custom-elements.json

@@ -14633,6 +14633,30 @@
             "module": "./utils/calendar/calendar.js"
           }
         },
+        {
+          "kind": "js",
+          "name": "MONTH_CALENDARS",
+          "declaration": {
+            "name": "MONTH_CALENDARS",
+            "module": "./utils/calendar/calendar.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "MonthCalendar",
+          "declaration": {
+            "name": "MonthCalendar",
+            "module": "./utils/calendar/calendar.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "MonthSystem",
+          "declaration": {
+            "name": "MonthSystem",
+            "module": "./utils/calendar/calendar.js"
+          }
+        },
         {
           "kind": "js",
           "name": "monthOf",
@@ -14649,6 +14673,14 @@
             "module": "./utils/calendar/calendar.js"
           }
         },
+        {
+          "kind": "js",
+          "name": "monthSystem",
+          "declaration": {
+            "name": "monthSystem",
+            "module": "./utils/calendar/calendar.js"
+          }
+        },
         {
           "kind": "js",
           "name": "PeriodCell",
@@ -14697,6 +14729,22 @@
             "module": "./utils/calendar/calendar.js"
           }
         },
+        {
+          "kind": "js",
+          "name": "todayIn",
+          "declaration": {
+            "name": "todayIn",
+            "module": "./utils/calendar/calendar.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "weekendOf",
+          "declaration": {
+            "name": "weekendOf",
+            "module": "./utils/calendar/calendar.js"
+          }
+        },
         {
           "kind": "js",
           "name": "weekStartOf",
@@ -15017,6 +15065,14 @@
             "module": "./utils/css-color/css-color.js"
           }
         },
+        {
+          "kind": "js",
+          "name": "toOklch",
+          "declaration": {
+            "name": "toOklch",
+            "module": "./utils/css-color/css-color.js"
+          }
+        },
         {
           "kind": "js",
           "name": "toRgb",
@@ -19770,6 +19826,17 @@
               "default": "'label'",
               "description": "The id the label carries, for an element in the template to be named by.\n\n**What a template draws is not the host**, which is what `hostAria`\nnames: a rating's radiogroup, a pin input's row of cells, a listbox's\nlist and a range slider's two thumbs are elements of their own, and they\nhad no name but a `label` string, or none at all. In the same tree as\nthe label, so a plain `aria-labelledby` resolves, and it names them by\nwhatever the label holds, a slotted one included. One id for both shapes,\nsince a family draws one or the other."
             },
+            {
+              "kind": "field",
+              "name": "namedBy",
+              "type": {
+                "text": "string | null"
+              },
+              "privacy": "protected",
+              "default": "null",
+              "description": "The name a screen reader says for the field where it shows no label, as\nthe platform's `aria-label`. It is drawn as a label and clipped, so it\nnames the control inside, and a new one renders at once.\n\n**An `aria-label` is read when the field renders, and nothing else would\nrender it again.** It is the platform's attribute and no property of this\nelement's, so writing a new one scheduled no update and the label kept\nthe old words. Data Table meets this on every column move: each row's\ncheckbox is named by the first column, so reordering renames every one.\n\nA reactive property on the attribute, which is the one way Lit observes\none. Overriding `observedAttributes` in a mixin compiled `this` to the\nmixin's own class, so every field observed only this mixin's attributes\nand dropped its own. Not reflected: the attribute is the consumer's.",
+              "attribute": "aria-label"
+            },
             {
               "kind": "field",
               "name": "labeled",
@@ -20026,7 +20093,9 @@
               "type": {
                 "text": "string | null"
               },
-              "default": "null"
+              "default": "null",
+              "description": "The name a screen reader says for the field where it shows no label, as\nthe platform's `aria-label`. It is drawn as a label and clipped, so it\nnames the control inside, and a new one renders at once.\n\n**An `aria-label` is read when the field renders, and nothing else would\nrender it again.** It is the platform's attribute and no property of this\nelement's, so writing a new one scheduled no update and the label kept\nthe old words. Data Table meets this on every column move: each row's\ncheckbox is named by the first column, so reordering renames every one.\n\nA reactive property on the attribute, which is the one way Lit observes\none. Overriding `observedAttributes` in a mixin compiled `this` to the\nmixin's own class, so every field observed only this mixin's attributes\nand dropped its own. Not reflected: the attribute is the consumer's.",
+              "fieldName": "namedBy"
             },
             {
               "name": "feedback",
@@ -23727,6 +23796,44 @@
           ],
           "description": "Today, in the reader's own timezone.\n\n**`toISOString` converts to UTC first, which makes \"today\" a different day\nfor most of the planet.** Anywhere west of UTC, from late afternoon onward,\n`fromDate(new Date())` names tomorrow. The parts are read locally instead and\npasted together, which is the only way to get a calendar date out of a `Date`\nwithout a conversion happening on the way."
         },
+        {
+          "kind": "function",
+          "name": "todayIn",
+          "return": {
+            "type": {
+              "text": "string"
+            }
+          },
+          "parameters": [
+            {
+              "name": "timeZone",
+              "default": "''"
+            },
+            {
+              "name": "now",
+              "default": "new Date()"
+            }
+          ],
+          "description": "Today in a time zone, such as `America/New_York`, as `YYYY-MM-DD`: the\nreader's own where `timeZone` is empty, as `localToday` reads it. A zone\n`Intl` does not know is read as the reader's own too."
+        },
+        {
+          "kind": "function",
+          "name": "weekendOf",
+          "return": {
+            "type": {
+              "text": "number[]"
+            }
+          },
+          "parameters": [
+            {
+              "name": "locale",
+              "type": {
+                "text": "string"
+              }
+            }
+          ],
+          "description": "The days of the weekend where a language is spoken, `0` for Sunday.\n\nFrom `Intl.Locale`'s week information, as `weekStartOf` reads it: Friday and\nSaturday in `ar-EG`, Sunday alone in `hi-IN`. Saturday and Sunday where the\nengine offers none."
+        },
         {
           "kind": "function",
           "name": "weekStartOf",
@@ -23857,6 +23964,31 @@
           ],
           "description": "A date some months away, clamped, so the last of a long month lands on the\nlast of a short one instead of rolling into the month after it."
         },
+        {
+          "kind": "variable",
+          "name": "MONTH_CALENDARS",
+          "type": {
+            "text": "readonly string[]"
+          },
+          "default": "[ 'coptic', 'ethiopic', 'hebrew', 'indian', 'islamic-civil', 'islamic-umalqura', 'persian', ]",
+          "description": "The `MonthCalendar` names, for a check at run time."
+        },
+        {
+          "kind": "function",
+          "name": "monthSystem",
+          "return": {
+            "type": {
+              "text": "MonthSystem"
+            }
+          },
+          "parameters": [
+            {
+              "name": "calendar",
+              "default": "''"
+            }
+          ],
+          "description": "The months a calendar pages through: its own for a `MonthCalendar` name,\nand the Gregorian months for every other."
+        },
         {
           "kind": "function",
           "name": "barredBy",
@@ -24068,6 +24200,22 @@
             "module": "src/utils/calendar/calendar.ts"
           }
         },
+        {
+          "kind": "js",
+          "name": "todayIn",
+          "declaration": {
+            "name": "todayIn",
+            "module": "src/utils/calendar/calendar.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "weekendOf",
+          "declaration": {
+            "name": "weekendOf",
+            "module": "src/utils/calendar/calendar.ts"
+          }
+        },
         {
           "kind": "js",
           "name": "weekStartOf",
@@ -24116,6 +24264,22 @@
             "module": "src/utils/calendar/calendar.ts"
           }
         },
+        {
+          "kind": "js",
+          "name": "MONTH_CALENDARS",
+          "declaration": {
+            "name": "MONTH_CALENDARS",
+            "module": "src/utils/calendar/calendar.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "monthSystem",
+          "declaration": {
+            "name": "monthSystem",
+            "module": "src/utils/calendar/calendar.ts"
+          }
+        },
         {
           "kind": "js",
           "name": "barredBy",
@@ -25170,6 +25334,24 @@
           ],
           "description": "HSB to HSL, which is a different pair of numbers for the same color."
         },
+        {
+          "kind": "function",
+          "name": "toOklch",
+          "return": {
+            "type": {
+              "text": "{ chroma: number; hue: number; lightness: number }"
+            }
+          },
+          "parameters": [
+            {
+              "name": "color",
+              "type": {
+                "text": "Color"
+              }
+            }
+          ],
+          "description": "Bytes to OKLCH: lightness 0 to 1, chroma from 0, hue in degrees. Björn\nOttosson's OKLab matrices, as CSS Color 4 defines `oklch()`."
+        },
         {
           "kind": "function",
           "name": "parseColor",
@@ -25254,6 +25436,14 @@
             "module": "src/utils/css-color/css-color.ts"
           }
         },
+        {
+          "kind": "js",
+          "name": "toOklch",
+          "declaration": {
+            "name": "toOklch",
+            "module": "src/utils/css-color/css-color.ts"
+          }
+        },
         {
           "kind": "js",
           "name": "parseColor",
@@ -32230,7 +32420,7 @@
           "type": {
             "text": "string"
           },
-          "default": "'0.154.0'",
+          "default": "'0.156.0'",
           "description": "The version of the package this file ships in.\n\n**Written by `fusion/scripts/version.mjs`** wherever it writes the package's\n`package.json`, and stamped back into the repository beside it after a\nrelease, so the two never disagree; a spec beside this holds them to it.\nNothing else in the running code knows which release it is."
         }
       ],
@@ -32790,6 +32980,6 @@
   ],
   "helix": {
     "package": "@fusion.dev/helix-core",
-    "version": "0.154.0"
+    "version": "0.156.0"
   }
 }

package/dist/events/details.d.ts

@@ -281,6 +281,13 @@ export interface ReorderDetail extends ChangeDetail {
     keys: string[];
     /** What moved: a column of a data table, an item of a list, or a row of a data table. */
     kind: 'column' | 'item' | 'row';
+    /**
+     * The key of the branch a tree item moves into, and `''` for the top level,
+     * where a `reorderable` tree moves an item into another branch. `keys` are
+     * then that branch's items in their new order. Absent for a move among
+     * siblings.
+     */
+    parent?: string;
     /** Where the key is after the move, counting from 0 in `keys`. */
     to: number;
     /**

package/dist/index.d.ts

@@ -56,7 +56,7 @@ export { anchorElement } from './utils/anchor-element/anchor-element.js';
 export { arrowReach, sideOf } from './utils/arrow/arrow.js';
 export { assignSlots } from './utils/assign-slots/assign-slots.js';
 export { type DrawAutofillOptions, drawAutofill, } from './utils/autofill-select/autofill-select.js';
-export { addDays, addMonths, type Barring, barredBy, type CalendarView, calendarLocale, type DateCalendar, localToday, monthOf, monthOut, type PeriodCell, type PeriodPage, periodCells, periodKey, periodMove, sameMonth, weekStartOf, YEARS_SHOWN, yearOut, yearPageOf, } from './utils/calendar/calendar.js';
+export { addDays, addMonths, type Barring, barredBy, type CalendarView, calendarLocale, type DateCalendar, localToday, MONTH_CALENDARS, type MonthCalendar, type MonthSystem, monthOf, monthOut, monthSystem, type PeriodCell, type PeriodPage, periodCells, periodKey, periodMove, sameMonth, todayIn, weekendOf, weekStartOf, YEARS_SHOWN, yearOut, yearPageOf, } from './utils/calendar/calendar.js';
 export { capturePointer } from './utils/capture-pointer/capture-pointer.js';
 export { centerInView } from './utils/center-in-view/center-in-view.js';
 export { ariaChord, type ChordPress, chordParts, matchesChord, printableChord, selectsAll, } from './utils/chord/chord.js';
@@ -68,7 +68,7 @@ export { type ColorWords, colorName, hueName } from './utils/color-name/color-na
 export { columnStep } from './utils/column-step/column-step.js';
 export { countLabel } from './utils/count-label/count-label.js';
 export { createSheet } from './utils/create-sheet/create-sheet.js';
-export { type Color, type ColorFormat, formatColor, parseColor, toCss, toHsl, toRgb, } from './utils/css-color/css-color.js';
+export { type Color, type ColorFormat, formatColor, parseColor, toCss, toHsl, toOklch, toRgb, } from './utils/css-color/css-color.js';
 export { customElement, definedTags, duplicateRegistrations, } from './utils/custom-element/custom-element.js';
 export { type DataOption, type DataOptionItem, dataOptions, drawOptions, windowOf, } from './utils/data-options/data-options.js';
 export { segmentName } from './utils/date-segments/date-segments.js';

package/dist/index.js

@@ -56,7 +56,7 @@ export { anchorElement } from './utils/anchor-element/anchor-element.js';
 export { arrowReach, sideOf } from './utils/arrow/arrow.js';
 export { assignSlots } from './utils/assign-slots/assign-slots.js';
 export { drawAutofill, } from './utils/autofill-select/autofill-select.js';
-export { addDays, addMonths, barredBy, calendarLocale, localToday, monthOf, monthOut, periodCells, periodKey, periodMove, sameMonth, weekStartOf, YEARS_SHOWN, yearOut, yearPageOf, } from './utils/calendar/calendar.js';
+export { addDays, addMonths, barredBy, calendarLocale, localToday, MONTH_CALENDARS, monthOf, monthOut, monthSystem, periodCells, periodKey, periodMove, sameMonth, todayIn, weekendOf, weekStartOf, YEARS_SHOWN, yearOut, yearPageOf, } from './utils/calendar/calendar.js';
 export { capturePointer } from './utils/capture-pointer/capture-pointer.js';
 export { centerInView } from './utils/center-in-view/center-in-view.js';
 export { ariaChord, chordParts, matchesChord, printableChord, selectsAll, } from './utils/chord/chord.js';
@@ -68,7 +68,7 @@ export { colorName, hueName } from './utils/color-name/color-name.js';
 export { columnStep } from './utils/column-step/column-step.js';
 export { countLabel } from './utils/count-label/count-label.js';
 export { createSheet } from './utils/create-sheet/create-sheet.js';
-export { formatColor, parseColor, toCss, toHsl, toRgb, } from './utils/css-color/css-color.js';
+export { formatColor, parseColor, toCss, toHsl, toOklch, toRgb, } from './utils/css-color/css-color.js';
 export { customElement, definedTags, duplicateRegistrations, } from './utils/custom-element/custom-element.js';
 export { dataOptions, drawOptions, windowOf, } from './utils/data-options/data-options.js';
 export { segmentName } from './utils/date-segments/date-segments.js';

package/dist/utils/calendar/calendar.d.ts

@@ -8,6 +8,20 @@
  * without a conversion happening on the way.
  */
 export declare const localToday: (now?: Date) => string;
+/**
+ * Today in a time zone, such as `America/New_York`, as `YYYY-MM-DD`: the
+ * reader's own where `timeZone` is empty, as `localToday` reads it. A zone
+ * `Intl` does not know is read as the reader's own too.
+ */
+export declare const todayIn: (timeZone?: string, now?: Date) => string;
+/**
+ * The days of the weekend where a language is spoken, `0` for Sunday.
+ *
+ * From `Intl.Locale`'s week information, as `weekStartOf` reads it: Friday and
+ * Saturday in `ar-EG`, Sunday alone in `hi-IN`. Saturday and Sunday where the
+ * engine offers none.
+ */
+export declare const weekendOf: (locale: string) => number[];
 /**
  * The first day of the week where a language is spoken, `0` for Sunday.
  *
@@ -54,6 +68,37 @@ export declare const sameMonth: (left: Date, right: Date) => boolean;
  * last of a short one instead of rolling into the month after it.
  */
 export declare const addMonths: (date: Date, months: number) => Date;
+/**
+ * The calendars Date Picker draws with months of their own, when `calendar`
+ * names one: the months of the year in Iran, Israel, Saudi Arabia, Ethiopia,
+ * Egypt's Coptic church, and India's national calendar. React Aria's
+ * `createCalendar` offers the same set.
+ */
+export type MonthCalendar = 'coptic' | 'ethiopic' | 'hebrew' | 'indian' | 'islamic-civil' | 'islamic-umalqura' | 'persian';
+/** The `MonthCalendar` names, for a check at run time. */
+export declare const MONTH_CALENDARS: readonly string[];
+/**
+ * The months of a calendar, as Date Picker pages through them. Every date is
+ * still a Gregorian `Date` at midnight UTC, and a month is the run of days
+ * from its first.
+ */
+export interface MonthSystem {
+    /** A date some months away, its day kept where the month is long enough. */
+    add(date: Date, months: number): Date;
+    /** The day of its month, from 1. */
+    day(date: Date): number;
+    /** The month a date is in, as `month` writes it: `YYYY-MM`, or its first day where the months are the calendar's own. */
+    key(date: Date): string;
+    /** Whether two dates fall in one month. */
+    same(left: Date, right: Date): boolean;
+    /** The first day of the month a date is in. */
+    start(date: Date): Date;
+}
+/**
+ * The months a calendar pages through: its own for a `MonthCalendar` name,
+ * and the Gregorian months for every other.
+ */
+export declare const monthSystem: (calendar?: string) => MonthSystem;
 /** What bars a date, besides `min` and `max`. */
 export interface Barring {
     /** Dates as `YYYY-MM-DD`, separated by commas or spaces. */

package/dist/utils/calendar/calendar.js

@@ -5,6 +5,34 @@ export const localToday = (now = new Date()) => {
     const day = `${now.getDate()}`.padStart(2, '0');
     return `${now.getFullYear()}-${month}-${day}`;
 };
+export const todayIn = (timeZone = '', now = new Date()) => {
+    if (timeZone === '') {
+        return localToday(now);
+    }
+    try {
+        const parts = new Intl.DateTimeFormat('en-US', {
+            day: '2-digit',
+            month: '2-digit',
+            timeZone,
+            year: 'numeric',
+        }).formatToParts(now);
+        const part = (type) => parts.find((one) => one.type === type)?.value ?? '';
+        return `${part('year').padStart(4, '0')}-${part('month')}-${part('day')}`;
+    }
+    catch {
+        return localToday(now);
+    }
+};
+export const weekendOf = (locale) => {
+    try {
+        const tag = new Intl.Locale(locale);
+        const days = tag.getWeekInfo?.().weekend ?? tag.weekInfo?.weekend;
+        return days === undefined ? [0, 6] : days.map((day) => day % 7);
+    }
+    catch {
+        return [0, 6];
+    }
+};
 export const weekStartOf = (locale) => {
     try {
         const tag = new Intl.Locale(locale);
@@ -40,6 +68,80 @@ export const addMonths = (date, months) => {
     const last = utcDate(target.getUTCFullYear(), target.getUTCMonth() + 1, 0).getUTCDate();
     return utcDate(target.getUTCFullYear(), target.getUTCMonth(), Math.min(date.getUTCDate(), last));
 };
+export const MONTH_CALENDARS = [
+    'coptic',
+    'ethiopic',
+    'hebrew',
+    'indian',
+    'islamic-civil',
+    'islamic-umalqura',
+    'persian',
+];
+const GREGORIAN = {
+    add: (date, months) => addMonths(date, months),
+    day: (date) => date.getUTCDate(),
+    key: (date) => monthOf(date),
+    same: (left, right) => sameMonth(left, right),
+    start: (date) => utcDate(date.getUTCFullYear(), date.getUTCMonth(), 1),
+};
+const intlMonths = (calendar) => {
+    const format = new Intl.DateTimeFormat(`en-u-ca-${calendar}-nu-latn`, {
+        day: 'numeric',
+        timeZone: 'UTC',
+    });
+    const days = new Map();
+    const day = (date) => {
+        const at = date.getTime();
+        let found = days.get(at);
+        if (found === undefined) {
+            found = Number(format.formatToParts(date).find((part) => part.type === 'day')?.value);
+            if (days.size > 4000) {
+                days.clear();
+            }
+            days.set(at, found);
+        }
+        return found;
+    };
+    const start = (date) => addDays(date, 1 - day(date));
+    const length = (first) => {
+        for (const count of [29, 30, 31, 28, 32]) {
+            if (day(addDays(first, count)) === 1 && day(addDays(first, count - 1)) === count) {
+                return count;
+            }
+        }
+        for (let count = 1; count < 28; count += 1) {
+            if (day(addDays(first, count)) === 1) {
+                return count;
+            }
+        }
+        return 30;
+    };
+    return {
+        add: (date, months) => {
+            let first = start(date);
+            for (let step = 0; step < Math.abs(months); step += 1) {
+                first = months > 0 ? addDays(first, length(first)) : start(addDays(first, -1));
+            }
+            return addDays(first, Math.min(day(date), length(first)) - 1);
+        },
+        day,
+        key: (date) => fromDate(start(date)),
+        same: (left, right) => start(left).getTime() === start(right).getTime(),
+        start,
+    };
+};
+const systems = new Map();
+export const monthSystem = (calendar = '') => {
+    if (!MONTH_CALENDARS.includes(calendar)) {
+        return GREGORIAN;
+    }
+    let system = systems.get(calendar);
+    if (system === undefined) {
+        system = intlMonths(calendar);
+        systems.set(calendar, system);
+    }
+    return system;
+};
 export const barredBy = (date, rules) => {
     const iso = fromDate(date);
     if (writtenList(rules.disableDates).includes(iso) ||

package/dist/utils/css-color/css-color.d.ts

@@ -7,12 +7,20 @@
  * 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
+ * **Every syntax here is read and 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.
+ * it, so the space-separated forms, the comma forms, `rgba`, `hsla`, `hsba` and
+ * `oklch` are all taken. What is written back is whichever of hex, rgb, hsl,
+ * hsb or oklch the component is set to, so a value stays in the shape the
+ * consumer asked for however it was entered.
+ *
+ * **`oklch` is read into sRGB.** The working model is sRGB, so a color outside
+ * it, such as a display-P3 green written in `oklch`, is clipped to the nearest
+ * sRGB channel values. What is written in `oklch` is that sRGB color, exactly.
+ *
+ * `hsb()` is not CSS. It is the working model written out, as React Aria's and
+ * Zag's color strings write it, for a value handed to code that thinks in hue,
+ * saturation and brightness. A stylesheet wants one of the other three.
  *
  * **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
@@ -40,7 +48,7 @@ export interface Color {
     saturation: number;
 }
 /** The syntaxes a value can be written in. */
-export type ColorFormat = 'hex' | 'hsl' | 'rgb';
+export type ColorFormat = 'hex' | 'hsb' | 'hsl' | 'oklch' | 'rgb';
 /** HSB to bytes, which is the road every written syntax goes down. */
 export declare const toRgb: (color: Color) => {
     blue: number;
@@ -53,6 +61,15 @@ export declare const toHsl: (color: Color) => {
     lightness: number;
     saturation: number;
 };
+/**
+ * Bytes to OKLCH: lightness 0 to 1, chroma from 0, hue in degrees. Björn
+ * Ottosson's OKLab matrices, as CSS Color 4 defines `oklch()`.
+ */
+export declare const toOklch: (color: Color) => {
+    chroma: number;
+    hue: number;
+    lightness: number;
+};
 /**
  * Any of the syntaxes to the working model, or `null` where it is not a color.
  *

package/dist/utils/css-color/css-color.js

@@ -74,6 +74,40 @@ export const toHsl = (color) => {
             : (brightness - lightness) / Math.min(lightness, 1 - lightness)) * 100),
     };
 };
+const linear = (channel) => channel <= 0.04045 ? channel / 12.92 : ((channel + 0.055) / 1.055) ** 2.4;
+const gamma = (channel) => channel <= 0.0031308 ? channel * 12.92 : 1.055 * channel ** (1 / 2.4) - 0.055;
+export const toOklch = (color) => {
+    const { blue, green, red } = toRgb(color);
+    const [r, g, b] = [red, green, blue].map((one) => linear(one / 255));
+    const l = Math.cbrt(0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b);
+    const m = Math.cbrt(0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b);
+    const s = Math.cbrt(0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b);
+    const lightness = 0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s;
+    const a = 1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s;
+    const bb = 0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s;
+    const chroma = Math.hypot(a, bb);
+    const hue = chroma < 0.0001 ? 0 : ((((Math.atan2(bb, a) * 180) / Math.PI) % 360) + 360) % 360;
+    return { chroma, hue, lightness };
+};
+const oklchToRgb = (lightness, chroma, hue) => {
+    const angle = (hue * Math.PI) / 180;
+    const a = chroma * Math.cos(angle);
+    const b = chroma * Math.sin(angle);
+    const l = (lightness + 0.3963377774 * a + 0.2158037573 * b) ** 3;
+    const m = (lightness - 0.1055613458 * a - 0.0638541728 * b) ** 3;
+    const s = (lightness - 0.0894841775 * a - 1.291485548 * b) ** 3;
+    return [
+        4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s,
+        -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s,
+        -0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s,
+    ].map((one) => Math.round(clamp(gamma(clamp(one, 0, 1)), 0, 1) * 255));
+};
+const oklchParts = (first, second, third) => {
+    const number = (token) => (token === 'none' ? 0 : Number.parseFloat(token));
+    const lightness = first.endsWith('%') ? number(first) / 100 : number(first);
+    const chroma = second.endsWith('%') ? (number(second) / 100) * 0.4 : number(second);
+    return [clamp(lightness, 0, 1), Math.max(0, chroma), number(third)];
+};
 export const parseColor = (value) => {
     const text = value.trim().toLowerCase();
     if (text === '') {
@@ -94,7 +128,7 @@ export const parseColor = (value) => {
         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);
+    const call = /^(rgba?|hsla?|hsba?|oklch)\(([^)]*)\)$/.exec(text);
     if (!call?.[1] || call[2] === undefined) {
         return null;
     }
@@ -109,12 +143,27 @@ export const parseColor = (value) => {
     if (call[1].startsWith('rgb')) {
         return rgbToHsb(toByte(first), toByte(second), toByte(third), alpha);
     }
+    if (call[1] === 'oklch') {
+        const parts = oklchParts(first, second, third);
+        if (parts.some(Number.isNaN)) {
+            return null;
+        }
+        return rgbToHsb(...oklchToRgb(...parts), 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;
     }
+    if (call[1].startsWith('hsb')) {
+        return {
+            alpha,
+            brightness: Math.round(lightness * 100),
+            hue: Math.round(((hue % 360) + 360) % 360),
+            saturation: Math.round(saturation * 100),
+        };
+    }
     const brightness = lightness + saturation * Math.min(lightness, 1 - lightness);
     return {
         alpha,
@@ -126,6 +175,15 @@ export const parseColor = (value) => {
 export const formatColor = (color, format, withAlpha) => {
     const alpha = clamp(color.alpha, 0, 100) / 100;
     const opacity = Number(alpha.toFixed(2));
+    if (format === 'oklch') {
+        const { chroma, hue, lightness } = toOklch(color);
+        const body = `${Number((lightness * 100).toFixed(1))}% ${Number(chroma.toFixed(3))} ${Number(hue.toFixed(1))}`;
+        return withAlpha ? `oklch(${body} / ${opacity})` : `oklch(${body})`;
+    }
+    if (format === 'hsb') {
+        const body = `${Math.round(((color.hue % 360) + 360) % 360)}, ${Math.round(clamp(color.saturation, 0, 100))}%, ${Math.round(clamp(color.brightness, 0, 100))}%`;
+        return withAlpha ? `hsba(${body}, ${opacity})` : `hsb(${body})`;
+    }
     if (format === 'hsl') {
         const { hue, lightness, saturation } = toHsl(color);
         const body = `${Math.round(hue)}, ${saturation}%, ${lightness}%`;

package/dist/utils/report-runtime/report-runtime.d.ts

@@ -22,6 +22,8 @@ export type RuntimeKind =
 'cite-not-url'
 /** A deprecated property, attribute or slot was used; the message names what replaces it. */
  | 'deprecated'
+/** Two landmarks of one kind share a name, so a screen reader lists them alike. */
+ | 'duplicate-name'
 /** Another class asked for a tag that is already registered: two copies of Helix. */
  | 'duplicate-registration'
 /** The browser refused fullscreen, usually for a frame without the permission. */

package/dist/version.d.ts

@@ -6,4 +6,4 @@
  * release, so the two never disagree; a spec beside this holds them to it.
  * Nothing else in the running code knows which release it is.
  */
-export declare const VERSION = "0.154.0";
+export declare const VERSION = "0.156.0";

package/dist/version.js

@@ -1 +1 @@
-export const VERSION = '0.154.0';
+export const VERSION = '0.156.0';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fusion.dev/helix-core",
   "description": "Helix element primitives: base classes, mixins, decorators, utilities.",
-  "version": "0.154.0",
+  "version": "0.156.0",
   "license": "MIT",
   "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
   "repository": {
@@ -56,11 +56,11 @@
   "bugs": "https://github.com/project-fusion/fusion/issues",
   "dependencies": {
     "@floating-ui/dom": "^1.8.0",
-    "@fusion.dev/helix-icons": "0.154.0"
+    "@fusion.dev/helix-icons": "0.156.0"
   },
   "devDependencies": {
-    "@fusion.dev/helix-cem": "0.154.0",
-    "@fusion.dev/helix-testing": "0.154.0",
+    "@fusion.dev/helix-cem": "0.156.0",
+    "@fusion.dev/helix-testing": "0.156.0",
     "@lit-labs/ssr": "^4.1.0",
     "lit": "^3.2.1"
   },