@fusion.dev/helix-core 0.143.0 → 0.145.0

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

@@ -0,0 +1,117 @@
+/**
+ * Today, in the reader's own timezone.
+ *
+ * **`toISOString` converts to UTC first, which makes "today" a different day
+ * for most of the planet.** Anywhere west of UTC, from late afternoon onward,
+ * `fromDate(new Date())` names tomorrow. The parts are read locally instead and
+ * pasted together, which is the only way to get a calendar date out of a `Date`
+ * without a conversion happening on the way.
+ */
+export declare const localToday: (now?: Date) => string;
+/**
+ * The first day of the week where a language is spoken, `0` for Sunday.
+ *
+ * From `Intl.Locale`'s week information, which an engine offers as
+ * `getWeekInfo()` or, in older versions, as `weekInfo`. Sunday where it offers
+ * neither, as Firefox does not, or where the tag cannot be read.
+ */
+export declare const weekStartOf: (locale: string) => number;
+/** A month as `YYYY-MM`. */
+export declare const monthOf: (date: Date) => string;
+/** A date some days away, which may be negative, at midnight UTC. */
+export declare const addDays: (date: Date, days: number) => Date;
+/** Whether two dates fall in the same month of the same year. */
+export declare const sameMonth: (left: Date, right: Date) => boolean;
+/**
+ * A date some months away, clamped, so the last of a long month lands on the
+ * last of a short one instead of rolling into the month after it.
+ */
+export declare const addMonths: (date: Date, months: number) => Date;
+/** What bars a date, besides `min` and `max`. */
+export interface Barring {
+    /** Dates as `YYYY-MM-DD`, separated by commas or spaces. */
+    disableDates: string;
+    /** Days of the week, `0` for Sunday, separated by commas or spaces. */
+    disableDays: string;
+    /** A consumer's own rule, asked of each date. */
+    isDateUnavailable?: ((date: string) => boolean) | undefined;
+    /** Where `step` counts from, or empty for 1 January 1970. */
+    min: string;
+    /** How far apart the selectable dates are, in days. */
+    step: number;
+}
+/**
+ * Why a date cannot be chosen, besides `min` and `max`, or `null` where it can.
+ *
+ * `listed` is a date the rules name: in `disable-dates`, on a day in
+ * `disable-days`, or one `isDateUnavailable` refuses. `step` is a date `step`
+ * skips, counted from `min` where there is one and from the epoch where there is
+ * not, which is the platform's own base. Whole days, because both ends are
+ * midnight UTC and neither carries a time.
+ */
+export declare const barredBy: (date: Date, rules: Barring) => 'listed' | 'step' | null;
+/** The views a calendar can show: the days of a month, the months of a year, or a page of years. */
+export type CalendarView = 'day' | 'month' | 'year';
+/** How many years the year view shows at once, in rows of three. */
+export declare const YEARS_SHOWN = 12;
+/** The first year on the page of years that holds `year`. */
+export declare const yearPageOf: (year: number) => number;
+/**
+ * Where a key moves within the months of a year or a page of years, laid out
+ * in rows of three, as an offset from `at`, the index on the page.
+ *
+ * `along` is which way the inline keys go, `1` or `-1`, or `0` for a key that
+ * is not one. The vertical keys move a row, Home and End to the ends of a row,
+ * and PageUp and PageDown a whole page. `null` is a key the grid leaves alone.
+ */
+export declare const periodMove: (key: string, at: number, along: number) => number | null;
+/** Whether a month, as its first day, lies wholly outside `min` and `max`, either of which may be empty. */
+export declare const monthOut: (first: Date, min: string, max: string) => boolean;
+/** Whether a year lies wholly outside `min` and `max`, either of which may be empty. */
+export declare const yearOut: (year: number, min: string, max: string) => boolean;
+/** One month or year in the months or the years view. */
+export interface PeriodCell {
+    /** The month's index in its year, or the year. */
+    at: number;
+    /** Whether it is the month or year the calendar shows. */
+    chosen: boolean;
+    /** Whether today falls in it. */
+    current: boolean;
+    /** Its first day. */
+    first: Date;
+    /** Whether it lies wholly outside `min` and `max`. */
+    out: boolean;
+}
+/** What the months or the years view is drawn from. */
+export interface PeriodPage {
+    /** The latest date, or empty. */
+    max: string;
+    /** The earliest date, or empty. */
+    min: string;
+    /** The year the months view is on, or any year on the page of years. */
+    page: number;
+    /** The first of the month the calendar shows. */
+    shown: Date;
+    /** Today, as `YYYY-MM-DD`. */
+    today: string;
+    /** Which view: `month` for the months of a year, `year` for a page of years. */
+    view: 'month' | 'year';
+}
+/**
+ * The twelve cells of the months or the years view, in reading order: the
+ * months of `page`, or the page of years that holds it.
+ */
+export declare const periodCells: ({ max, min, page, shown, today, view }: PeriodPage) => PeriodCell[];
+/**
+ * Where a key takes the tab stop in the months or the years, or `null` for a
+ * key the grid leaves alone.
+ *
+ * `stop` is the month's index or the year the stop is on, `year` the year the
+ * months view shows, and `along` which way the inline keys go, as
+ * `periodMove` takes it. A move off the months of one year lands in the next
+ * or the last, and a move off a page of years turns the page.
+ */
+export declare const periodKey: (view: 'month' | 'year', stop: number, year: number, key: string, along: number) => {
+    focus: number;
+    pageYear: number;
+} | null;

package/dist/utils/calendar/calendar.js

@@ -0,0 +1,96 @@
+import { valueAsDate as asDate, dateAsValue as fromDate } from '../value-as/value-as.js';
+import { writtenList } from '../written-list/written-list.js';
+export const localToday = (now = new Date()) => {
+    const month = `${now.getMonth() + 1}`.padStart(2, '0');
+    const day = `${now.getDate()}`.padStart(2, '0');
+    return `${now.getFullYear()}-${month}-${day}`;
+};
+export const weekStartOf = (locale) => {
+    try {
+        const tag = new Intl.Locale(locale);
+        const first = tag.getWeekInfo?.().firstDay ?? tag.weekInfo?.firstDay;
+        return first === undefined ? 0 : first % 7;
+    }
+    catch {
+        return 0;
+    }
+};
+export const monthOf = (date) => `${date.getUTCFullYear()}-${String(date.getUTCMonth() + 1).padStart(2, '0')}`;
+export const addDays = (date, days) => new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate() + days));
+export const sameMonth = (left, right) => left.getUTCFullYear() === right.getUTCFullYear() && left.getUTCMonth() === right.getUTCMonth();
+export const addMonths = (date, months) => {
+    const target = new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth() + months, 1));
+    const last = new Date(Date.UTC(target.getUTCFullYear(), target.getUTCMonth() + 1, 0)).getUTCDate();
+    return new Date(Date.UTC(target.getUTCFullYear(), target.getUTCMonth(), Math.min(date.getUTCDate(), last)));
+};
+export const barredBy = (date, rules) => {
+    const iso = fromDate(date);
+    if (writtenList(rules.disableDates).includes(iso) ||
+        writtenList(rules.disableDays).includes(String(date.getUTCDay())) ||
+        rules.isDateUnavailable?.(iso) === true) {
+        return 'listed';
+    }
+    const step = Math.max(1, Math.floor(rules.step) || 1);
+    if (step > 1) {
+        const base = rules.min === '' ? 0 : (asDate(rules.min)?.getTime() ?? 0);
+        if (Math.round((date.getTime() - base) / 86_400_000) % step !== 0) {
+            return 'step';
+        }
+    }
+    return null;
+};
+export const YEARS_SHOWN = 12;
+export const yearPageOf = (year) => Math.floor(year / YEARS_SHOWN) * YEARS_SHOWN;
+export const periodMove = (key, at, along) => {
+    if (along !== 0) {
+        return along;
+    }
+    switch (key) {
+        case 'ArrowUp':
+            return -3;
+        case 'ArrowDown':
+            return 3;
+        case 'Home':
+            return -(at % 3);
+        case 'End':
+            return 2 - (at % 3);
+        case 'PageUp':
+            return -12;
+        case 'PageDown':
+            return 12;
+        default:
+            return null;
+    }
+};
+export const monthOut = (first, min, max) => {
+    const month = monthOf(first);
+    return (min !== '' && month < min.slice(0, 7)) || (max !== '' && month > max.slice(0, 7));
+};
+export const yearOut = (year, min, max) => (min !== '' && year < Number(min.slice(0, 4))) || (max !== '' && year > Number(max.slice(0, 4)));
+export const periodCells = ({ max, min, page, shown, today, view }) => {
+    const years = view === 'year';
+    const start = years ? yearPageOf(page) : page;
+    return Array.from({ length: 12 }, (_, index) => {
+        const at = years ? start + index : index;
+        const first = new Date(Date.UTC(years ? at : start, years ? 0 : index, 1));
+        return {
+            at,
+            chosen: years ? at === shown.getUTCFullYear() : monthOf(first) === monthOf(shown),
+            current: years ? String(at) === today.slice(0, 4) : monthOf(first) === today.slice(0, 7),
+            first,
+            out: years ? yearOut(at, min, max) : monthOut(first, min, max),
+        };
+    });
+};
+export const periodKey = (view, stop, year, key, along) => {
+    const index = view === 'year' ? stop - yearPageOf(stop) : stop;
+    const delta = periodMove(key, index, along);
+    if (delta === null) {
+        return null;
+    }
+    if (view === 'year') {
+        return { focus: stop + delta, pageYear: stop + delta };
+    }
+    const months = year * 12 + stop + delta;
+    return { focus: ((months % 12) + 12) % 12, pageYear: Math.floor(months / 12) };
+};

package/dist/utils/chord/chord.d.ts

@@ -0,0 +1,43 @@
+/** The keys of a chord, in the order written, with spaces and empty entries dropped. */
+export declare const chordParts: (keys: string) => string[];
+/**
+ * A chord as `aria-keyshortcuts` writes it: `mod+k` is `Meta+K` on an Apple
+ * keyboard and `Control+K` elsewhere. A letter is written in capitals and a
+ * symbol as itself. Empty for no keys.
+ */
+export declare const ariaChord: (keys: string, apple: boolean) => string;
+/**
+ * Whether a chord types a character, and so is indistinguishable from typing.
+ *
+ * One code point means a character rather than a name: `/` and `?` are
+ * printable, `escape` and `enter` are not. **Shift is allowed beside it**,
+ * because Shift is how a character is typed: `shift+?` and `shift+a` are a
+ * question mark and a capital A in a field.
+ */
+export declare const printableChord: (keys: string) => boolean;
+/** What a key press carries that a chord is compared against. */
+export interface ChordPress {
+    altKey: boolean;
+    ctrlKey: boolean;
+    key: string;
+    metaKey: boolean;
+    shiftKey: boolean;
+}
+/**
+ * Whether a press is the chord, modifiers and all.
+ *
+ * `mod` is one key, the platform's: Command where `apple` and Control
+ * elsewhere. The other one is then checked like any modifier the chord does
+ * not name, so Control and Command together do not answer `mod+k`. `cmd` and
+ * `meta` are Command, `alt` and `opt` are Option.
+ *
+ * **A symbol is typed with Shift, so Shift says nothing about it.** On a US
+ * layout `?` arrives as `?` with `shiftKey` set, and a chord of `?` that
+ * refused Shift could never be pressed at all. A letter has a shifted form of
+ * its own, so `a` still refuses Shift and `shift+a` still asks for it.
+ *
+ * Every other modifier is checked in both directions, so `mod+k` is not
+ * answered by `shift+mod+k`: a chord a reader did not press is a chord that
+ * should go to whatever did want it.
+ */
+export declare const matchesChord: (press: ChordPress, keys: string, apple: boolean) => boolean;

package/dist/utils/chord/chord.js

@@ -0,0 +1,53 @@
+export const chordParts = (keys) => keys
+    .split('+')
+    .map((part) => part.trim())
+    .filter((part) => part !== '');
+const ARIA = {
+    alt: 'Alt',
+    backspace: 'Backspace',
+    cmd: 'Meta',
+    ctrl: 'Control',
+    del: 'Delete',
+    down: 'ArrowDown',
+    enter: 'Enter',
+    esc: 'Escape',
+    escape: 'Escape',
+    left: 'ArrowLeft',
+    meta: 'Meta',
+    opt: 'Alt',
+    right: 'ArrowRight',
+    shift: 'Shift',
+    space: 'Space',
+    tab: 'Tab',
+    up: 'ArrowUp',
+};
+export const ariaChord = (keys, apple) => chordParts(keys)
+    .map((part) => {
+    const name = part.toLowerCase();
+    if (name === 'mod') {
+        return apple ? 'Meta' : 'Control';
+    }
+    return ARIA[name] ?? (part.length === 1 ? part.toUpperCase() : part);
+})
+    .join('+');
+export const printableChord = (keys) => {
+    const parts = chordParts(keys).map((part) => part.toLowerCase());
+    const key = parts.at(-1) ?? '';
+    return [...key].length === 1 && parts.slice(0, -1).every((modifier) => modifier === 'shift');
+};
+export const matchesChord = (press, keys, apple) => {
+    const parts = chordParts(keys).map((part) => part.toLowerCase());
+    if (parts.length === 0) {
+        return false;
+    }
+    const wanted = parts[parts.length - 1] ?? '';
+    const modifiers = new Set(parts.slice(0, -1));
+    const ctrl = modifiers.has('ctrl') || (modifiers.has('mod') && !apple);
+    const meta = modifiers.has('cmd') || modifiers.has('meta') || (modifiers.has('mod') && apple);
+    const symbol = wanted.toLowerCase() === wanted.toUpperCase() && [...wanted].length === 1;
+    return (press.key.toLowerCase() === wanted &&
+        (modifiers.has('shift') ? press.shiftKey : symbol || !press.shiftKey) &&
+        (modifiers.has('alt') || modifiers.has('opt') ? press.altKey : !press.altKey) &&
+        (ctrl ? press.ctrlKey : !press.ctrlKey) &&
+        (meta ? press.metaKey : !press.metaKey));
+};

package/dist/utils/clock/clock.d.ts

@@ -0,0 +1,87 @@
+/** The two clocks a time is written on: twelve hours, or twenty-four. */
+export type HourCycle = 'h12' | 'h23';
+/**
+ * The locale with its clock set, or the locale as given where no clock is.
+ *
+ * Through the locale's own `-u-hc-` extension, which every `Intl` formatter
+ * reads, so a time written, a meridiem named and the question of whether the
+ * locale writes twelve hours all answer to the one tag. Empty stays empty
+ * without a clock, which is the runtime's own locale.
+ */
+export declare const clockLocale: (locale: string, hourCycle?: HourCycle) => string;
+/**
+ * Whether a locale writes times on a twelve hour clock.
+ *
+ * Asked of `Intl` rather than derived from a list of locales, because it is
+ * exactly the question `resolvedOptions` answers and the list is long and
+ * changes. `en-US` is true, `en-GB`, `fr-FR` and `ja-JP` are false, measured.
+ */
+export declare const isTwelveHour: (locale?: string) => boolean;
+/**
+ * What a locale calls the half of the day before or after noon, such as `AM`,
+ * `PM`, `오전` or `오후`.
+ *
+ * Read off `Intl`'s own rendering of a time in that half, which is the one
+ * place every engine states it.
+ */
+export declare const dayPeriod: (half: 'AM' | 'PM', locale?: string) => string;
+/**
+ * Every time on offer, as seconds since midnight, from `min` to `max` by
+ * `step`.
+ *
+ * `step` is in minutes, or in seconds with `seconds`, the unit
+ * `<input type="time">` counts in. Built from `min` upward, so a list that
+ * starts at `09:00` steps from nine rather than from midnight.
+ */
+export declare const offeredTimes: (min: string, max: string, step: number, seconds?: boolean) => number[];
+/**
+ * The time on offer nearest to one, the earlier winning a tie, or the time
+ * itself where nothing is on offer.
+ */
+export declare const nearestTime: (times: readonly number[], at: number) => number;
+/**
+ * The parts a wheel shows for a time: the hour as the clock writes it, the
+ * minute, the second, and which half of the day.
+ */
+export declare const wheelParts: (at: number, twelve: boolean) => {
+    hour: number;
+    meridiem: 'AM' | 'PM';
+    minute: number;
+    second: number;
+    shown: number;
+};
+/**
+ * The hour of the day a wheel's hour means: on a twelve hour clock the wheel
+ * says 1 to 12 and the meridiem says which half, and 12 AM is midnight.
+ */
+export declare const wholeHour: (shown: number, half?: 'AM' | 'PM') => number;
+/** What a time is checked against: its bounds, the times barred by name, and the times on offer. */
+export interface TimeRules {
+    /** Times barred by name, separated by commas or spaces. */
+    disableTimes: string;
+    /** The latest time, or empty for the end of the day. */
+    max: string;
+    /** The earliest time, or empty for midnight. */
+    min: string;
+    /**
+     * The times on offer, as seconds since midnight, where a time off them is a
+     * fault. Left out, the step is not checked.
+     */
+    offered?: readonly number[] | undefined;
+}
+/** What is wrong with a time, as the validity flag a control reports, or `unavailable` for a barred one. */
+export type TimeFault = 'rangeOverflow' | 'rangeUnderflow' | 'stepMismatch' | 'unavailable';
+/**
+ * Whether a time, as seconds since midnight, is one `disable-times` names,
+ * matching `09:30` and `09:30:00` alike.
+ */
+export declare const timeBarred: (at: number, disableTimes: string) => boolean;
+/**
+ * What is wrong with a time a control can read, or `null`: before `min`, past
+ * `max`, barred by name, or off the times on offer, asked in that order.
+ *
+ * Time Picker reports the first fault of each time it holds, and Time Input
+ * the first fault any of its times has, so each asks this of every time and
+ * keeps the order its own message has always taken.
+ */
+export declare const timeFault: (value: string, rules: TimeRules) => TimeFault | null;

package/dist/utils/clock/clock.js

@@ -0,0 +1,68 @@
+import { valueAsSeconds } from '../value-as/value-as.js';
+import { writtenList } from '../written-list/written-list.js';
+const DAY = 86_400;
+export const clockLocale = (locale, hourCycle) => {
+    if (!hourCycle) {
+        return locale;
+    }
+    try {
+        const base = new Intl.DateTimeFormat(locale || undefined).resolvedOptions().locale;
+        return new Intl.Locale(base, { hourCycle }).toString();
+    }
+    catch {
+        return locale;
+    }
+};
+export const isTwelveHour = (locale) => new Intl.DateTimeFormat(locale || undefined, { timeStyle: 'short' }).resolvedOptions().hour12 ===
+    true;
+export const dayPeriod = (half, locale) => new Intl.DateTimeFormat(locale || undefined, { hour: 'numeric', hour12: true, timeZone: 'UTC' })
+    .formatToParts(new Date(Date.UTC(1970, 0, 1, half === 'AM' ? 9 : 21)))
+    .find((part) => part.type === 'dayPeriod')?.value ?? half;
+export const offeredTimes = (min, max, step, seconds = false) => {
+    const from = valueAsSeconds(min) ?? 0;
+    const to = valueAsSeconds(max) ?? (seconds ? DAY - 1 : DAY - 60);
+    const every = Math.max(1, Math.round(step)) * (seconds ? 1 : 60);
+    const found = [];
+    for (let at = from; at <= to; at += every) {
+        found.push(at);
+    }
+    return found;
+};
+export const nearestTime = (times, at) => {
+    let best = times[0] ?? at;
+    for (const one of times) {
+        if (Math.abs(one - at) < Math.abs(best - at)) {
+            best = one;
+        }
+    }
+    return best;
+};
+export const wheelParts = (at, twelve) => {
+    const hour = Math.floor(at / 3600);
+    return {
+        hour,
+        meridiem: hour < 12 ? 'AM' : 'PM',
+        minute: Math.floor(at / 60) % 60,
+        second: at % 60,
+        shown: twelve ? (hour % 12 === 0 ? 12 : hour % 12) : hour,
+    };
+};
+export const wholeHour = (shown, half) => half === undefined ? shown : (shown % 12) + (half === 'PM' ? 12 : 0);
+export const timeBarred = (at, disableTimes) => writtenList(disableTimes).some((one) => valueAsSeconds(one) === at);
+export const timeFault = (value, rules) => {
+    const read = valueAsSeconds(value);
+    const at = read ?? 0;
+    if (at < (valueAsSeconds(rules.min) ?? 0)) {
+        return 'rangeUnderflow';
+    }
+    if (at > (valueAsSeconds(rules.max) ?? DAY - 1)) {
+        return 'rangeOverflow';
+    }
+    if (read !== null && timeBarred(at, rules.disableTimes)) {
+        return 'unavailable';
+    }
+    if (rules.offered && !rules.offered.includes(at)) {
+        return 'stepMismatch';
+    }
+    return null;
+};

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

@@ -0,0 +1,28 @@
+import type { Color } from '../css-color/css-color.js';
+/**
+ * The words a color's name is made of, keyed by their English, with the two
+ * sentences that put them together.
+ *
+ * **The keys are React Aria's**, the strings `@react-stately/color` ships for
+ * `Color.getColorName`, so a page that already translates those can hand the
+ * same table over. `colorName` and `transparentColorName` are the sentences,
+ * with `{lightness}`, `{chroma}`, `{hue}` and `{percentTransparent}` filled in;
+ * every other key is one word or one pair of words. A pair is its own entry,
+ * because a language may join two hues in a way that is not two words with a
+ * space between them.
+ */
+export type ColorWords = Record<'black' | 'blue' | 'blue purple' | 'brown' | 'brown yellow' | 'colorName' | 'cyan' | 'cyan blue' | 'dark' | 'gray' | 'grayish' | 'green' | 'green cyan' | 'light' | 'magenta' | 'magenta pink' | 'orange' | 'orange yellow' | 'pale' | 'pink' | 'pink red' | 'purple' | 'purple magenta' | 'red' | 'red orange' | 'transparentColorName' | 'very dark' | 'very light' | 'vibrant' | 'white' | 'yellow' | 'yellow green', string>;
+/** The English the names are spoken in where a page gives no words of its own. */
+export declare const COLOR_WORDS: ColorWords;
+/**
+ * A color's name, such as "vibrant red" or "dark grayish blue", in the words
+ * given.
+ *
+ * The same reading React Aria's `Color.getColorName` gives, from the same
+ * thresholds: a hue from where the color sits on the OKLCH wheel, a lightness
+ * from very dark to very light, and a chroma from grayish to vibrant. A color
+ * with any transparency says how much, in a percentage written for `locale`.
+ */
+export declare const colorName: (color: Color, given?: Partial<ColorWords>, locale?: string) => string;
+/** The name of a color's hue alone, such as "red orange", in the words given. */
+export declare const hueName: (color: Color, given?: Partial<ColorWords>, locale?: string) => string;

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

@@ -0,0 +1,150 @@
+export const COLOR_WORDS = {
+    black: 'black',
+    blue: 'blue',
+    'blue purple': 'blue purple',
+    brown: 'brown',
+    'brown yellow': 'brown yellow',
+    colorName: '{lightness} {chroma} {hue}',
+    cyan: 'cyan',
+    'cyan blue': 'cyan blue',
+    dark: 'dark',
+    gray: 'gray',
+    grayish: 'grayish',
+    green: 'green',
+    'green cyan': 'green cyan',
+    light: 'light',
+    magenta: 'magenta',
+    'magenta pink': 'magenta pink',
+    orange: 'orange',
+    'orange yellow': 'orange yellow',
+    pale: 'pale',
+    pink: 'pink',
+    'pink red': 'pink red',
+    purple: 'purple',
+    'purple magenta': 'purple magenta',
+    red: 'red',
+    'red orange': 'red orange',
+    transparentColorName: '{lightness} {chroma} {hue}, {percentTransparent} transparent',
+    'very dark': 'very dark',
+    'very light': 'very light',
+    vibrant: 'vibrant',
+    white: 'white',
+    yellow: 'yellow',
+    'yellow green': 'yellow green',
+};
+const HUES = [
+    [0, 'pink'],
+    [15, 'red'],
+    [48, 'orange'],
+    [94, 'yellow'],
+    [135, 'green'],
+    [175, 'cyan'],
+    [264, 'blue'],
+    [284, 'purple'],
+    [320, 'magenta'],
+    [349, 'pink'],
+];
+const BROWN_BELOW = 0.68;
+const YELLOW_GREEN_BELOW = 0.85;
+const DARK_BELOW = 0.55;
+const GRAY_BELOW = 0.001;
+const linear = (channel) => channel <= 0.04045 ? channel / 12.92 : ((channel + 0.055) / 1.055) ** 2.4;
+const oklch = (color) => {
+    const hue = (((color.hue % 360) + 360) % 360) / 60;
+    const value = color.brightness / 100;
+    const chroma = value * (color.saturation / 100);
+    const middle = chroma * (1 - Math.abs((hue % 2) - 1));
+    const base = value - 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]).map((one) => linear(one + base));
+    const l = Math.cbrt(0.4122214708 * red + 0.5363325363 * green + 0.0514459929 * blue);
+    const m = Math.cbrt(0.2119034982 * red + 0.6806995451 * green + 0.1073969566 * blue);
+    const s = Math.cbrt(0.0883024619 * red + 0.2817188376 * green + 0.6299787005 * blue);
+    const lightness = 0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s;
+    const a = 1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s;
+    const b = 0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s;
+    const angle = (Math.atan2(b, a) * 180) / Math.PI;
+    return [lightness, Math.hypot(a, b), angle >= 0 ? angle : angle + 360];
+};
+const hueOf = (lightness, chroma, hue, words) => {
+    if (chroma < GRAY_BELOW) {
+        return [words.gray, lightness];
+    }
+    for (let at = 0; at < HUES.length; at += 1) {
+        const [from, named] = HUES[at];
+        const [to, after] = HUES[at + 1] ?? [360, 'pink'];
+        if (hue < from || hue >= to) {
+            continue;
+        }
+        let name = named;
+        let light = lightness;
+        if (name === 'orange') {
+            if (lightness < BROWN_BELOW) {
+                name = 'brown';
+            }
+            else {
+                light = lightness - BROWN_BELOW + DARK_BELOW;
+            }
+        }
+        if (hue > from + (to - from) / 2 && name !== after) {
+            name = `${name} ${after}`;
+        }
+        else if (name === 'yellow' && lightness < YELLOW_GREEN_BELOW) {
+            name = 'yellow green';
+        }
+        return [words[name] ?? COLOR_WORDS[name] ?? name, light];
+    }
+    return [words.gray, lightness];
+};
+export const colorName = (color, given = {}, locale = '') => {
+    const words = { ...COLOR_WORDS, ...given };
+    const [lightness, chroma, angle] = oklch(color);
+    if (lightness > 0.999) {
+        return words.white;
+    }
+    if (lightness < 0.001) {
+        return words.black;
+    }
+    const [hue, light] = hueOf(lightness, chroma, angle, words);
+    let tone = '';
+    if (chroma <= 0.1 && chroma >= GRAY_BELOW) {
+        tone = light >= 0.7 ? words.pale : words.grayish;
+    }
+    else if (chroma >= 0.15) {
+        tone = words.vibrant;
+    }
+    let shade = '';
+    if (light < 0.3) {
+        shade = words['very dark'];
+    }
+    else if (light < DARK_BELOW) {
+        shade = words.dark;
+    }
+    else if (light >= 0.85) {
+        shade = words['very light'];
+    }
+    else if (light >= 0.7) {
+        shade = words.light;
+    }
+    const alpha = Math.min(100, Math.max(0, color.alpha)) / 100;
+    const sentence = alpha < 1 ? words.transparentColorName : words.colorName;
+    const percent = new Intl.NumberFormat(locale || undefined, { style: 'percent' }).format(1 - alpha);
+    return sentence
+        .replaceAll('{lightness}', () => shade)
+        .replaceAll('{chroma}', () => tone)
+        .replaceAll('{hue}', () => hue.toLocaleLowerCase(locale || undefined))
+        .replaceAll('{percentTransparent}', () => percent)
+        .replace(/\s+/g, ' ')
+        .trim();
+};
+export const hueName = (color, given = {}, locale = '') => {
+    const [lightness, chroma, angle] = oklch(color);
+    return hueOf(lightness, chroma, angle, { ...COLOR_WORDS, ...given })[0].toLocaleLowerCase(locale || undefined);
+};

package/dist/utils/count-label/count-label.d.ts

@@ -0,0 +1,13 @@
+/**
+ * A count said in one of two sentences, the one for a single thing or the one
+ * for any other number, with `{count}` filled in for `locale`.
+ *
+ * **`Intl.PluralRules` picks the sentence**, because the line between "one"
+ * and "other" is the language's: French says "0 résultat" where English says
+ * "0 results". A language with more forms than two writes its `one` in the
+ * first sentence and the rest in the second.
+ *
+ * Data Table says how many rows a search left this way, and Listbox how many
+ * options a filter left, which Combobox and Command hand down to it.
+ */
+export declare const countLabel: (count: number, one: string, other: string, locale?: string) => string;

package/dist/utils/count-label/count-label.js

@@ -0,0 +1,5 @@
+import { fillTemplate } from '../fill-template/fill-template.js';
+import { formatNumbers } from '../format-numbers/format-numbers.js';
+export const countLabel = (count, one, other, locale = '') => fillTemplate(new Intl.PluralRules(locale || undefined).select(count) === 'one' ? one : other, {
+    count: formatNumbers(locale)(count),
+});