@ctrl-ui/react 0.8.0 → 0.8.2

package/dist/extensions/create-track-highlight.js

@@ -2,11 +2,13 @@
 const STABLE_EPSILON = .5;
 const MAX_FOLLOW_FRAMES = 90;
 function isHighlightable(node) {
-	return node instanceof HTMLElement && node.getAttribute("aria-disabled") !== "true" && node.getAttribute("data-disabled") !== "true" && node.checkVisibility();
+	return node instanceof HTMLElement && !node.matches(":disabled, [aria-disabled=\"true\"], [data-disabled]:not([data-disabled=\"false\"]), :has([role=\"checkbox\"][data-disabled])") && node.checkVisibility();
 }
 function createTrackHighlight(track, highlight, options, hoverHighlight) {
 	const { itemSelector, activeSelector, range = false, followHover = true } = options;
+	highlight.setAttribute("data-measured", "");
 	let hovered = null;
+	let focused = null;
 	let rafId = 0;
 	let followFrames = 0;
 	const activeLayer = {
@@ -27,6 +29,9 @@ function createTrackHighlight(track, highlight, options, hoverHighlight) {
 			h: 0
 		}
 	};
+	function belongsToTrack(item) {
+		return track.hasAttribute("data-track") ? item.closest("[data-track]") === track : track.contains(item);
+	}
 	function measureBox(target, trackRect) {
 		const rect = target.getBoundingClientRect();
 		return {
@@ -37,7 +42,8 @@ function createTrackHighlight(track, highlight, options, hoverHighlight) {
 		};
 	}
 	function resolveActiveBox(trackRect) {
-		const actives = Array.from(track.querySelectorAll(activeSelector)).filter(isHighlightable);
+		if (track.dataset.track === "hover") return null;
+		const actives = Array.from(track.querySelectorAll(activeSelector)).filter((item) => isHighlightable(item) && belongsToTrack(item));
 		const firstActive = actives[0];
 		if (!firstActive) return null;
 		if (!range) return measureBox(firstActive, trackRect);
@@ -58,8 +64,9 @@ function createTrackHighlight(track, highlight, options, hoverHighlight) {
 		return box;
 	}
 	function resolveHoveredBox(trackRect) {
-		if (!followHover || !hovered || !track.contains(hovered) || !isHighlightable(hovered)) return null;
-		return measureBox(hovered, trackRect);
+		const target = focused ?? hovered;
+		if (!followHover || !target || !belongsToTrack(target) || !isHighlightable(target)) return null;
+		return measureBox(target, trackRect);
 	}
 	function place(element, state, next, visible) {
 		if (!next) {
@@ -85,7 +92,8 @@ function createTrackHighlight(track, highlight, options, hoverHighlight) {
 		const trackRect = track.getBoundingClientRect();
 		const activeBox = resolveActiveBox(trackRect);
 		const hoveredBox = resolveHoveredBox(trackRect);
-		const isAway = hoveredBox !== null && hovered !== null && !hovered.matches(activeSelector);
+		const target = focused ?? hovered;
+		const isAway = hoveredBox !== null && target !== null && !target.matches(activeSelector);
 		track.toggleAttribute("data-track-hover", isAway);
 		const activeMoved = place(highlight, activeLayer, hoverHighlight ? activeBox : hoveredBox ?? activeBox, Boolean(activeBox || hoveredBox));
 		if (!hoverHighlight) highlight.toggleAttribute("data-hover", isAway);
@@ -106,8 +114,9 @@ function createTrackHighlight(track, highlight, options, hoverHighlight) {
 	const onPointerOver = (event) => {
 		if (event.pointerType === "touch" || !(event.target instanceof Element)) return;
 		const item = event.target.closest(itemSelector);
-		if (!isHighlightable(item) || !track.contains(item) || item === hovered) return;
-		hovered = item;
+		const nextHovered = isHighlightable(item) && belongsToTrack(item) ? item : null;
+		if (nextHovered === hovered) return;
+		hovered = nextHovered;
 		scheduleFollow();
 	};
 	const onPointerLeave = () => {
@@ -115,9 +124,23 @@ function createTrackHighlight(track, highlight, options, hoverHighlight) {
 		hovered = null;
 		scheduleFollow();
 	};
+	const onFocusChange = () => {
+		const activeElement = document.activeElement;
+		const item = activeElement?.closest(itemSelector);
+		focused = item && belongsToTrack(item) && activeElement?.matches(":focus-visible") && isHighlightable(item) ? item : null;
+		scheduleFollow();
+	};
+	const onFocusOut = () => {
+		focused = null;
+		scheduleFollow();
+	};
 	if (followHover) {
+		if (matchMedia("(hover: hover)").matches) hovered = Array.from(track.querySelectorAll(itemSelector)).find((item) => item.matches(":hover") && isHighlightable(item) && belongsToTrack(item)) ?? null;
+		onFocusChange();
 		track.addEventListener("pointerover", onPointerOver);
 		track.addEventListener("pointerleave", onPointerLeave);
+		track.addEventListener("focusin", onFocusChange);
+		track.addEventListener("focusout", onFocusOut);
 	}
 	const resizeObserver = new ResizeObserver(() => scheduleFollow());
 	resizeObserver.observe(track);
@@ -130,17 +153,35 @@ function createTrackHighlight(track, highlight, options, hoverHighlight) {
 			"data-selected",
 			"aria-selected",
 			"data-active",
-			"data-state"
+			"data-state",
+			"data-disabled",
+			"aria-disabled",
+			"disabled",
+			"data-track"
 		]
 	});
 	scheduleFollow();
 	return () => {
+		highlight.removeAttribute("data-measured");
 		if (rafId) cancelAnimationFrame(rafId);
 		track.removeEventListener("pointerover", onPointerOver);
 		track.removeEventListener("pointerleave", onPointerLeave);
+		track.removeEventListener("focusin", onFocusChange);
+		track.removeEventListener("focusout", onFocusOut);
 		track.removeAttribute("data-track-hover");
 		resizeObserver.disconnect();
 		mutationObserver.disconnect();
+		for (const element of [highlight, hoverHighlight]) {
+			if (!element) continue;
+			for (const property of [
+				"top",
+				"left",
+				"right",
+				"bottom"
+			]) element.style.removeProperty(property);
+			element.removeAttribute("data-visible");
+			element.removeAttribute("data-hover");
+		}
 	};
 }
 //#endregion

package/dist/extensions/supports-anchor-transitions.d.ts

@@ -0,0 +1,4 @@
+//#region src/extensions/supports-anchor-transitions.d.ts
+declare function supportsAnchorTransitions(): boolean;
+//#endregion
+export { supportsAnchorTransitions };

package/dist/extensions/supports-anchor-transitions.js

@@ -0,0 +1,31 @@
+//#region src/extensions/supports-anchor-transitions.ts
+let anchorTransitionsSupported;
+function supportsAnchorTransitions() {
+	if (anchorTransitionsSupported !== void 0) return anchorTransitionsSupported;
+	if (!CSS.supports("(anchor-name: --_track-transition-probe) and (anchor-scope: --_track-transition-probe)")) {
+		anchorTransitionsSupported = false;
+		return false;
+	}
+	const probeTrack = document.createElement("div");
+	probeTrack.style.cssText = "position:fixed;left:-10000px;top:0;visibility:hidden;anchor-scope:--_track-transition-probe";
+	const initialAnchor = document.createElement("div");
+	initialAnchor.style.cssText = "position:absolute;top:0;width:1px;height:1px;anchor-name:--_track-transition-probe";
+	const nextAnchor = document.createElement("div");
+	nextAnchor.style.cssText = "position:absolute;top:10px;width:1px;height:1px";
+	const probeHighlight = document.createElement("div");
+	probeHighlight.style.cssText = "position:absolute;top:anchor(--_track-transition-probe top);width:1px;height:1px";
+	probeHighlight.style.setProperty("transition", "top 1s linear", "important");
+	probeTrack.append(initialAnchor, nextAnchor, probeHighlight);
+	document.body.append(probeTrack);
+	try {
+		probeHighlight.offsetTop;
+		initialAnchor.style.anchorName = "none";
+		nextAnchor.style.anchorName = "--_track-transition-probe";
+		anchorTransitionsSupported = probeHighlight.getAnimations().length > 0;
+		return anchorTransitionsSupported;
+	} finally {
+		probeTrack.remove();
+	}
+}
+//#endregion
+export { supportsAnchorTransitions };

package/dist/extensions/track-highlight.d.ts

@@ -2,17 +2,11 @@ import { TrackHighlightKnobStyle } from "../knob-contracts/track-highlight-knobs
 import { CSSProperties, ComponentProps, ReactNode, RefObject } from "react";
 //#region src/extensions/track-highlight.d.ts
 type TrackHighlightProps = Omit<ComponentProps<"div">, "children" | "ref" | "style"> & {
-  /** Track container (`relative isolate`) highlight is measured against. Defaults to highlight's parent element. */
   trackRef?: RefObject<HTMLElement | null>;
-  /** Selector for highlightable rows, resolved within track. */
   itemSelector?: string;
-  /** Selector for resting row (active/selected) used when nothing is hovered. */
   activeSelector?: string;
-  /** Span box across union of every active row (first..last) instead of single row. */
   range?: boolean;
-  /** Follow pointer to hovered row; turn off for purely selection/scroll-driven box. */
   followHover?: boolean;
-  /** Non-empty = second layer that follows hover while primary layer stays pinned on selection. */
   hoverClassName?: string;
   children?: ReactNode;
   style?: CSSProperties & TrackHighlightKnobStyle;

package/dist/extensions/track-highlight.js

@@ -1,32 +1,47 @@
 "use client";
 import { cn } from "../lib/cn.js";
-import { createTrackHighlight } from "./create-track-highlight.js";
+import { supportsAnchorTransitions } from "./supports-anchor-transitions.js";
 import { useEffect, useRef } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/extensions/track-highlight.tsx
 const trackHighlightStructureClasses = "pointer-events-none absolute -z-10";
-function TrackHighlight({ trackRef, itemSelector = "[data-track-item]", activeSelector = "[data-track-item][data-active=\"true\"]", range, followHover, hoverClassName, className, style, children, ...props }) {
+const defaultItemSelector = "[data-track-item]";
+const defaultActiveSelector = "[data-track-item][data-active=\"true\"]";
+const loadTrackHighlight = () => import("./create-track-highlight.js");
+function TrackHighlight({ trackRef, itemSelector = defaultItemSelector, activeSelector = defaultActiveSelector, range, followHover, hoverClassName, className, style, children, ...props }) {
 	const ref = useRef(null);
 	const hoverRef = useRef(null);
 	const layered = Boolean(hoverClassName);
+	const usesAnchorAnatomy = !trackRef && !range && !layered && followHover !== false && itemSelector === defaultItemSelector && activeSelector === defaultActiveSelector;
 	useEffect(() => {
 		const highlight = ref.current;
 		const track = trackRef?.current ?? highlight?.parentElement;
 		if (!track || !highlight) return;
+		if (usesAnchorAnatomy && track.hasAttribute("data-track") && supportsAnchorTransitions()) return;
 		const hoverHighlight = layered ? hoverRef.current ?? void 0 : void 0;
-		return createTrackHighlight(track, highlight, {
-			itemSelector,
-			activeSelector,
-			range,
-			followHover
-		}, hoverHighlight);
+		let cancelled = false;
+		let dispose;
+		loadTrackHighlight().then(({ createTrackHighlight }) => {
+			if (cancelled) return;
+			dispose = createTrackHighlight(track, highlight, {
+				itemSelector,
+				activeSelector,
+				range,
+				followHover
+			}, hoverHighlight);
+		});
+		return () => {
+			cancelled = true;
+			dispose?.();
+		};
 	}, [
 		trackRef,
 		itemSelector,
 		activeSelector,
 		range,
 		followHover,
-		layered
+		layered,
+		usesAnchorAnatomy
 	]);
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
 		...props,
@@ -34,6 +49,7 @@ function TrackHighlight({ trackRef, itemSelector = "[data-track-item]", activeSe
 		"data-control-ui": "track-highlight",
 		"data-control-family": "track-highlight",
 		"data-slot": "root",
+		"data-positioning": usesAnchorAnatomy ? "anchor" : void 0,
 		"aria-hidden": true,
 		style,
 		className: cn(trackHighlightStructureClasses, className),

package/dist/knob-contracts/button-knobs.d.ts

@@ -1,5 +1,5 @@
 //#region src/knob-contracts/button-knobs.d.ts
-declare const buttonKnobs: readonly ["--cui-button-radius", "--cui-button-gap", "--cui-button-icon", "--cui-button-height", "--cui-button-padding-inline", "--cui-button-font-size", "--cui-button-background", "--cui-button-background-image", "--cui-button-foreground", "--cui-button-hover-background", "--cui-button-hover-foreground", "--cui-button-press-background", "--cui-button-press-scale", "--cui-button-active-background", "--cui-button-active-foreground", "--cui-button-active-hover-background", "--cui-button-shadow", "--cui-button-hover-shadow", "--cui-button-press-shadow", "--cui-button-active-shadow"];
+declare const buttonKnobs: readonly ["--cui-button-radius", "--cui-button-gap", "--cui-button-icon", "--cui-button-height", "--cui-button-padding-inline", "--cui-button-font-size", "--cui-button-background", "--cui-button-background-image", "--cui-button-foreground", "--cui-button-hover-background", "--cui-button-hover-foreground", "--cui-button-press-background", "--cui-button-press-scale", "--cui-button-active-background", "--cui-button-active-foreground", "--cui-button-active-hover-background", "--cui-button-shadow", "--cui-button-hover-shadow", "--cui-button-press-shadow", "--cui-button-active-shadow", "--cui-button-open-background", "--cui-button-open-foreground", "--cui-button-open-shadow"];
 type ButtonKnobStyle = Partial<Record<(typeof buttonKnobs)[number], string>>;
 //#endregion
 export { ButtonKnobStyle, buttonKnobs };

package/dist/knob-contracts/button-knobs.js

@@ -19,7 +19,10 @@ const buttonKnobs = [
 	"--cui-button-shadow",
 	"--cui-button-hover-shadow",
 	"--cui-button-press-shadow",
-	"--cui-button-active-shadow"
+	"--cui-button-active-shadow",
+	"--cui-button-open-background",
+	"--cui-button-open-foreground",
+	"--cui-button-open-shadow"
 ];
 //#endregion
 export { buttonKnobs };

package/dist/knob-contracts/progressive-blur-knobs.d.ts

@@ -0,0 +1,5 @@
+//#region src/knob-contracts/progressive-blur-knobs.d.ts
+declare const progressiveBlurKnobs: readonly ["--cui-progressive-blur-size", "--cui-progressive-blur-backdrop-blur", "--cui-progressive-blur-transition-duration", "--cui-progressive-blur-transition-delay"];
+type ProgressiveBlurKnobStyle = Partial<Record<(typeof progressiveBlurKnobs)[number], string>>;
+//#endregion
+export { ProgressiveBlurKnobStyle, progressiveBlurKnobs };

package/dist/knob-contracts/progressive-blur-knobs.js

@@ -0,0 +1,9 @@
+//#region src/knob-contracts/progressive-blur-knobs.ts
+const progressiveBlurKnobs = [
+	"--cui-progressive-blur-size",
+	"--cui-progressive-blur-backdrop-blur",
+	"--cui-progressive-blur-transition-duration",
+	"--cui-progressive-blur-transition-delay"
+];
+//#endregion
+export { progressiveBlurKnobs };

package/dist/scripts/contrast-eval.d.ts

@@ -0,0 +1,46 @@
+//#region src/scripts/contrast-eval.d.mts
+declare const stripComments: (css: any) => any;
+declare function parseBlocks(css: any): {
+  prelude: any;
+  body: any;
+}[];
+declare function flattenBlocks(css: any): any;
+declare function declarations(body: any): Map<any, any>;
+/** Later source wins, so the order is Tailwind palette, core theme, skin theme, app overrides. */
+declare function tokenMaps(cssSources: any): {
+  light: Map<any, any>;
+  dark: Map<any, any>;
+};
+declare function rgbToOklch(r255: any, g255: any, b255: any): {
+  L: number;
+  C: number;
+  H: number;
+};
+declare function oklchToRgb(L: any, C: any, H: any): {
+  r: number;
+  g: number;
+  b: number;
+};
+declare const luminance: ({ r, g, b }: {
+  b: any;
+  g: any;
+  r: any;
+}) => number;
+declare function contrastRatio(a: any, b: any): number;
+declare function parseHex(value: any): {
+  r: number;
+  g: number;
+  b: number;
+  alpha: number;
+} | null;
+declare function resolveColor(value: any, tokens: any, seen?: Set<any>, depth?: number): any;
+declare function composite(over: any, under: any): {
+  r: number;
+  g: number;
+  b: number;
+  alpha: any;
+};
+declare function evaluatePair(pair: any, tokens: any): any;
+declare function evaluate(tokens: any, pairs: any): any;
+//#endregion
+export { composite, contrastRatio, declarations, evaluate, evaluatePair, flattenBlocks, luminance, oklchToRgb, parseBlocks, parseHex, resolveColor, rgbToOklch, stripComments, tokenMaps };

package/dist/scripts/contrast-eval.js

@@ -0,0 +1,327 @@
+//#region src/scripts/contrast-eval.mjs
+const stripComments = (css) => css.replaceAll(/\/\*[\s\S]*?\*\//g, " ");
+function parseBlocks(css) {
+	const blocks = [];
+	let depth = 0;
+	let preludeStart = 0;
+	let bodyStart = 0;
+	for (let index = 0; index < css.length; index += 1) {
+		const character = css[index];
+		if (character === "{") {
+			if (depth === 0) bodyStart = index + 1;
+			depth += 1;
+		} else if (character === "}") {
+			depth -= 1;
+			if (depth === 0) {
+				blocks.push({
+					prelude: css.slice(preludeStart, bodyStart - 1).trim(),
+					body: css.slice(bodyStart, index)
+				});
+				preludeStart = index + 1;
+			}
+		} else if (character === ";" && depth === 0) preludeStart = index + 1;
+	}
+	return blocks;
+}
+function flattenBlocks(css) {
+	return parseBlocks(css).flatMap((block) => /^@(layer|media|supports)\b/.test(block.prelude) ? flattenBlocks(block.body) : [block]);
+}
+function declarations(body) {
+	const properties = /* @__PURE__ */ new Map();
+	let depth = 0;
+	for (const statement of body.split(";")) {
+		const open = (statement.match(/{/g) ?? []).length;
+		const close = (statement.match(/}/g) ?? []).length;
+		if (depth === 0) {
+			const match = /^\s*(--[\w-]+)\s*:\s*([\s\S]*)$/.exec(statement);
+			if (match) properties.set(match[1], match[2].trim());
+		}
+		depth += open - close;
+	}
+	return properties;
+}
+const declaresTokens = (prelude) => prelude.includes("[data-skin") || prelude.startsWith("@theme") && !prelude.includes("inline");
+function modesOf(prelude) {
+	if (/\.dark\b/.test(prelude.replaceAll(/:not\([^)]*\)/g, ""))) return ["dark"];
+	if (/:not\([^)]*\.dark\b/.test(prelude)) return ["light"];
+	return ["light", "dark"];
+}
+/** Later source wins, so the order is Tailwind palette, core theme, skin theme, app overrides. */
+function tokenMaps(cssSources) {
+	const maps = {
+		light: /* @__PURE__ */ new Map(),
+		dark: /* @__PURE__ */ new Map()
+	};
+	for (const css of cssSources) for (const block of flattenBlocks(stripComments(css))) {
+		if (!declaresTokens(block.prelude)) continue;
+		const modes = modesOf(block.prelude);
+		for (const [name, value] of declarations(block.body)) for (const mode of modes) maps[mode].set(name, value);
+	}
+	return maps;
+}
+const clamp = (value, min, max) => Math.min(max, Math.max(min, value));
+const srgbToLinear = (c) => c <= .04045 ? c / 12.92 : ((c + .055) / 1.055) ** 2.4;
+const linearToSrgb = (c) => c <= .0031308 ? 12.92 * c : 1.055 * c ** (1 / 2.4) - .055;
+function rgbToOklch(r255, g255, b255) {
+	const r = srgbToLinear(clamp(r255, 0, 255) / 255);
+	const g = srgbToLinear(clamp(g255, 0, 255) / 255);
+	const b = srgbToLinear(clamp(b255, 0, 255) / 255);
+	const l = .4122214708 * r + .5363325363 * g + .0514459929 * b;
+	const m = .2119034982 * r + .6806995451 * g + .1073969566 * b;
+	const s = .0883024619 * r + .2817188376 * g + .6299787005 * b;
+	const l_ = Math.cbrt(l);
+	const m_ = Math.cbrt(m);
+	const s_ = Math.cbrt(s);
+	const L = .2104542553 * l_ + .793617785 * m_ - .0040720468 * s_;
+	const A = 1.9779984951 * l_ - 2.428592205 * m_ + .4505937099 * s_;
+	const B = .0259040371 * l_ + .7827717662 * m_ - .808675766 * s_;
+	const C = Math.hypot(A, B);
+	let H = Math.atan2(B, A) * 180 / Math.PI;
+	if (H < 0) H += 360;
+	return {
+		L,
+		C,
+		H
+	};
+}
+function oklchToRgb(L, C, H) {
+	const hr = H * Math.PI / 180;
+	const a = C * Math.cos(hr);
+	const b = C * Math.sin(hr);
+	const l_ = L + .3963377774 * a + .2158037573 * b;
+	const m_ = L - .1055613458 * a - .0638541728 * b;
+	const s_ = L - .0894841775 * a - 1.291485548 * b;
+	const l = l_ ** 3;
+	const m = m_ ** 3;
+	const s = s_ ** 3;
+	const r = 4.0767416621 * l - 3.3077115913 * m + .2309699292 * s;
+	const g = -1.2684380046 * l + 2.6097574011 * m - .3413193965 * s;
+	const bl = -.0041960863 * l - .7034186147 * m + 1.707614701 * s;
+	const to = (c) => clamp(Math.round(linearToSrgb(c) * 255), 0, 255);
+	return {
+		r: to(r),
+		g: to(g),
+		b: to(bl)
+	};
+}
+const channelLuminance = (c) => {
+	const s = c / 255;
+	return s <= .03928 ? s / 12.92 : ((s + .055) / 1.055) ** 2.4;
+};
+const luminance = ({ r, g, b }) => .2126 * channelLuminance(r) + .7152 * channelLuminance(g) + .0722 * channelLuminance(b);
+function contrastRatio(a, b) {
+	const la = luminance(a) + .05;
+	const lb = luminance(b) + .05;
+	return la > lb ? la / lb : lb / la;
+}
+function parseHex(value) {
+	const match = /^#([0-9a-f]{3,8})$/i.exec(value);
+	if (!match) return null;
+	const digits = match[1];
+	const expand = (pair) => Number.parseInt(pair.length === 1 ? pair + pair : pair, 16);
+	const step = digits.length <= 4 ? 1 : 2;
+	if (digits.length !== 3 && digits.length !== 4 && digits.length !== 6 && digits.length !== 8) return null;
+	const at = (index) => digits.slice(index * step, index * step + step);
+	const alphaDigits = digits.length === 4 || digits.length === 8 ? at(3) : null;
+	return {
+		r: expand(at(0)),
+		g: expand(at(1)),
+		b: expand(at(2)),
+		alpha: alphaDigits === null ? 1 : expand(alphaDigits) / 255
+	};
+}
+const NUMBER = /^[+-]?(?:\d+\.?\d*|\.\d+)$/;
+function scalar(text) {
+	const trimmed = text.trim();
+	if (trimmed.endsWith("%")) {
+		const percent = trimmed.slice(0, -1);
+		return NUMBER.test(percent) ? Number(percent) / 100 : null;
+	}
+	return NUMBER.test(trimmed) ? Number(trimmed) : null;
+}
+function splitTopLevel(text) {
+	const parts = [];
+	let depth = 0;
+	let current = "";
+	const flush = () => {
+		if (current) parts.push(current);
+		current = "";
+	};
+	for (const character of text) {
+		if (character === "(") depth += 1;
+		else if (character === ")") depth -= 1;
+		if (depth > 0 || !/[\s/]/.test(character)) {
+			current += character;
+			continue;
+		}
+		flush();
+		if (character === "/") parts.push("/");
+	}
+	flush();
+	return parts;
+}
+const unresolved = (reason) => ({ unresolved: reason });
+const isUnresolved = (result) => Boolean(result?.unresolved);
+/** `calc(<base> <op> <n>)`, `calc(<n> * var(--x))` and `calc(<base> * <n>)` — the only calc shapes the packs write. */
+function evaluateCalc(expression, base, tokens, seen, depth) {
+	const inner = expression.slice(5, -1).trim();
+	const match = /^(\S+)\s*([+\-*])\s*(\S+)$/.exec(inner);
+	if (!match) return null;
+	const [, leftText, operator, rightText] = match;
+	const operand = (text) => {
+		if (text === "l" || text === "alpha") return base;
+		const number = scalar(text);
+		if (number !== null) return number;
+		const nested = resolveScalar(text, tokens, seen, depth + 1);
+		return typeof nested === "number" ? nested : null;
+	};
+	const left = operand(leftText);
+	const right = operand(rightText);
+	if (left === null || right === null) return null;
+	if (operator === "+") return left + right;
+	if (operator === "-") return left - right;
+	return left * right;
+}
+function resolveScalar(value, tokens, seen, depth) {
+	const trimmed = value.trim();
+	const number = scalar(trimmed);
+	if (number !== null) return number;
+	const variable = /^var\(\s*(--[\w-]+)\s*(?:,([\s\S]*))?\)$/.exec(trimmed);
+	if (variable) {
+		if (depth > 16 || seen.has(variable[1])) return null;
+		const declared = tokens.get(variable[1]) ?? variable[2];
+		if (declared === void 0) return null;
+		return resolveScalar(declared, tokens, /* @__PURE__ */ new Set([...seen, variable[1]]), depth + 1);
+	}
+	return null;
+}
+const literalChannel = (text, allowPercent) => allowPercent || !text.endsWith("%") ? scalar(text) : null;
+const channelValue = (text, keyword, base, tokens, seen, depth) => {
+	if (text === keyword) return base;
+	if (text.startsWith("calc(")) return evaluateCalc(text, base, tokens, seen, depth);
+	return literalChannel(text, keyword === "l");
+};
+const alphaValue = (text, base, tokens, seen, depth) => text.startsWith("calc(") ? evaluateCalc(text, base, tokens, seen, depth) : resolveScalar(text, tokens, seen, depth);
+const CHANNEL_KEYWORDS = [
+	"l",
+	"c",
+	"h"
+];
+function relativeOklch(inner, tokens, seen, depth) {
+	const parts = splitTopLevel(inner.slice(5).trim());
+	const slash = parts.indexOf("/");
+	const channels = slash === -1 ? parts : parts.slice(0, slash);
+	if (channels.length !== 4) return unresolved(`unsupported relative color \`oklch(${inner})\``);
+	const base = resolveColor(channels[0], tokens, seen, depth + 1);
+	if (isUnresolved(base)) return base;
+	const { L, C, H } = rgbToOklch(base.r, base.g, base.b);
+	const resolved = CHANNEL_KEYWORDS.map((keyword, index) => channelValue(channels[index + 1], keyword, [
+		L,
+		C,
+		H
+	][index], tokens, seen, depth));
+	if (resolved.some((value) => value === null)) return unresolved(`unsupported channel in \`oklch(${inner})\``);
+	const alphaText = slash === -1 ? null : parts.slice(slash + 1).join(" ");
+	const alpha = alphaText === null ? base.alpha : alphaValue(alphaText, base.alpha, tokens, seen, depth);
+	if (alpha === null) return unresolved(`unsupported alpha \`${alphaText}\``);
+	return {
+		...oklchToRgb(resolved[0], resolved[1], resolved[2]),
+		alpha: clamp(alpha, 0, 1)
+	};
+}
+function literalOklch(inner, tokens, seen, depth) {
+	const parts = splitTopLevel(inner);
+	const slash = parts.indexOf("/");
+	const channels = slash === -1 ? parts : parts.slice(0, slash);
+	if (channels.length !== 3) return unresolved(`unsupported \`oklch(${inner})\``);
+	const numbers = channels.map((part, index) => literalChannel(part, index === 0));
+	if (numbers.some((number) => number === null)) return unresolved(`unsupported \`oklch(${inner})\``);
+	const alphaText = slash === -1 ? null : parts.slice(slash + 1).join(" ");
+	const alpha = alphaText === null ? 1 : resolveScalar(alphaText, tokens, seen, depth);
+	if (alpha === null) return unresolved(`unsupported alpha in \`oklch(${inner})\``);
+	return {
+		...oklchToRgb(numbers[0], numbers[1], numbers[2]),
+		alpha: clamp(alpha, 0, 1)
+	};
+}
+function resolveColor(value, tokens, seen = /* @__PURE__ */ new Set(), depth = 0) {
+	const trimmed = String(value ?? "").trim();
+	if (depth > 16) return unresolved("token chain deeper than 16 hops");
+	if (trimmed === "") return unresolved("empty value");
+	if (trimmed === "transparent") return {
+		r: 0,
+		g: 0,
+		b: 0,
+		alpha: 0
+	};
+	const hex = parseHex(trimmed);
+	if (hex) return hex;
+	const variable = /^var\(\s*(--[\w-]+)\s*(?:,([\s\S]*))?\)$/.exec(trimmed);
+	if (variable) {
+		if (seen.has(variable[1])) return unresolved(`\`${variable[1]}\` refers to itself`);
+		const declared = tokens.get(variable[1]) ?? variable[2];
+		if (declared === void 0) return unresolved(`\`${variable[1]}\` is declared by nobody`);
+		return resolveColor(declared, tokens, /* @__PURE__ */ new Set([...seen, variable[1]]), depth + 1);
+	}
+	const oklch = /^oklch\(([\s\S]*)\)$/.exec(trimmed);
+	if (oklch) {
+		const inner = oklch[1].trim();
+		return inner.startsWith("from ") ? relativeOklch(inner, tokens, seen, depth) : literalOklch(inner, tokens, seen, depth);
+	}
+	return unresolved(`unsupported value \`${trimmed}\``);
+}
+const WHITE = {
+	r: 255,
+	g: 255,
+	b: 255,
+	alpha: 1
+};
+function composite(over, under) {
+	const alpha = over.alpha + under.alpha * (1 - over.alpha);
+	if (alpha === 0) return {
+		r: 0,
+		g: 0,
+		b: 0,
+		alpha: 0
+	};
+	const channel = (key) => (over[key] * over.alpha + under[key] * under.alpha * (1 - over.alpha)) / alpha;
+	return {
+		r: channel("r"),
+		g: channel("g"),
+		b: channel("b"),
+		alpha
+	};
+}
+function evaluatePair(pair, tokens) {
+	const layers = [
+		...pair.underlays ?? [],
+		pair.surface,
+		pair.background,
+		pair.foreground
+	];
+	let stack = WHITE;
+	let backdrop = WHITE;
+	for (const [index, token] of layers.entries()) {
+		const resolved = resolveColor(`var(${token})`, tokens);
+		if (isUnresolved(resolved)) return {
+			...pair,
+			ratio: null,
+			status: "unverified",
+			reason: `${token}: ${resolved.unresolved}`
+		};
+		if (index === layers.length - 1) backdrop = stack;
+		stack = composite(resolved, stack);
+	}
+	const ratio = contrastRatio(stack, backdrop);
+	return {
+		...pair,
+		ratio,
+		status: ratio >= pair.threshold ? "pass" : "fail",
+		reason: null
+	};
+}
+function evaluate(tokens, pairs) {
+	return pairs.map((pair) => evaluatePair(pair, tokens));
+}
+//#endregion
+export { composite, contrastRatio, declarations, evaluate, evaluatePair, flattenBlocks, luminance, oklchToRgb, parseBlocks, parseHex, resolveColor, rgbToOklch, stripComments, tokenMaps };