@cube-dev/ui-kit 0.166.0 → 0.168.0

package/dist/tokens/resolve.js

@@ -0,0 +1,403 @@
+/** @license MIT | @cube-dev/ui-kit v0.168.0 | Cube Dev Team */
+import { useLayoutEffect as useLayoutEffect$1 } from "../utils/react/useLayoutEffect.js";
+import { warn } from "../utils/warnings.js";
+import { getPaletteVersion, usePaletteVersion } from "./palette-config.js";
+import { getTokens } from "./all-tokens.js";
+import { useState, useSyncExternalStore } from "react";
+
+//#region src/tokens/resolve.ts
+/**
+* Resolving a design token to a literal value, for consumers that render into a
+* surface our stylesheets do not reach — a third-party iframe (Stripe Elements),
+* a CodeMirror / Monaco theme object, a Vega spec. Those take colors, lengths and
+* font descriptors as values; `var(--purple-color)` means nothing to them.
+*
+* Doing it by hand fails silently, because a token read from the wrong element
+* does not come back empty. Tasty registers `@property` rules — its own defaults
+* plus one for every custom property whose type it can infer — and an undeclared
+* token reads back as that rule's `initial-value`. Some of those are obvious
+* duds (`rgba(0, 0, 0, 0)` for a `<color>`, `0px` for a `<length>`), but many are
+* ordinary-looking values: off the token block `--gap` reads `4px` rather than
+* the kit's `8px`, `--transition` reads `80ms`, `--radius` reads `6px`. So
+* inspecting the value cannot tell a real token from a miss, in either
+* direction — `#clear` really is `transparent` and `$h2-letter-spacing` really
+* is `0px`.
+*
+* The question that CAN be answered is "are the kit's tokens in effect on this
+* element?", and `$tokens-applied` (see `src/tokens/base.ts`) answers it: it is
+* declared alongside the tokens, so it is present exactly where they are. Off
+* that surface every read is reported as unresolved; on it, the computed value
+* is the truth.
+*/
+/**
+* Declared by the token block and nothing else — see `src/tokens/base.ts`.
+*
+* Matched by VALUE rather than by presence, because presence is not the signal
+* it looks like: tasty infers a type for the marker as readily as for any other
+* token, registers `@property --tokens-applied` with `initial-value: 0`, and so
+* hands back `0` off the block instead of an empty string. Comparing against the
+* declared value is right either way, and cannot drift from `base.ts`.
+*/
+const SURFACE_MARKER = "$tokens-applied";
+function isTokenSurface(computed) {
+	const declared = getTokens()[SURFACE_MARKER];
+	const name = tokenToProperty(SURFACE_MARKER);
+	if (typeof declared !== "string" || !name) return false;
+	return normalizeValue(computed.getPropertyValue(name)) === normalizeValue(declared);
+}
+/**
+* Values that mean "this property was never declared" once we already know the
+* token block IS in effect. Only used to catch a token the kit does not declare
+* at all — a typo, or a name from another design system — since for those there
+* is no marker to lean on.
+*/
+const PLACEHOLDER_VALUES = new Set([
+	"transparent",
+	"rgba(0,0,0,0)",
+	"0",
+	"0px",
+	"0deg",
+	"0s"
+]);
+/** Custom property names are CSS identifiers: a letter or `_`, then word chars or `-`. */
+const PROPERTY_NAME_RE = /^[a-zA-Z_][\w-]*$/;
+const PRESET_FIELD_SUFFIXES = {
+	fontFamily: "font-family",
+	fontSize: "font-size",
+	fontStyle: "font-style",
+	fontWeight: "font-weight",
+	lineHeight: "line-height",
+	letterSpacing: "letter-spacing",
+	textTransform: "text-transform",
+	boldFontWeight: "bold-font-weight",
+	iconSize: "icon-size"
+};
+const PRESET_FIELDS = Object.keys(PRESET_FIELD_SUFFIXES);
+/**
+* Map a token to its CSS custom property name, using the same convention tasty's
+* style DSL does: `#name` is a color (`--name-color`), `$name` is everything else
+* (`--name`). A raw `--name` or a bare `name` is taken as written.
+*
+* Returns `null` for anything that would not be a valid custom property.
+*/
+function tokenToProperty(token) {
+	const trimmed = token.trim();
+	let name;
+	if (trimmed.startsWith("--")) name = trimmed.slice(2);
+	else if (trimmed.startsWith("#")) name = `${trimmed.slice(1)}-color`;
+	else if (trimmed.startsWith("$")) name = trimmed.slice(1);
+	else name = trimmed;
+	return PROPERTY_NAME_RE.test(name) ? `--${name}` : null;
+}
+/** Whitespace and case are not meaningful in the values we compare against. */
+function normalizeValue(value) {
+	return value.replace(/\s+/g, "").toLowerCase();
+}
+/**
+* Every custom property the kit declares, by name. Membership only — the value
+* is deliberately not consulted, because a token's declared value tells you
+* nothing about whether it is in effect where you read it.
+*
+* Memoized against the palette version, like {@link getTokens} itself.
+*/
+let knownNamesCache = null;
+function getKnownTokenNames() {
+	const version = getPaletteVersion();
+	if (!knownNamesCache || knownNamesCache.version !== version) {
+		const names = /* @__PURE__ */ new Set();
+		for (const key of Object.keys(getTokens())) {
+			const name = tokenToProperty(key);
+			if (name) names.add(name);
+		}
+		knownNamesCache = {
+			version,
+			names
+		};
+	}
+	return knownNamesCache.names;
+}
+/** These fire per token, per page — once each, not once per render. */
+const warnedTokens = /* @__PURE__ */ new Set();
+function warnOnce(key, message) {
+	if (warnedTokens.has(key)) return;
+	warnedTokens.add(key);
+	warn(message);
+}
+/** The document `<body>` is where `<Root>` declares the token block. */
+function resolveTarget(element) {
+	if (element) return element;
+	if (typeof document === "undefined") return null;
+	return document.body ?? document.documentElement ?? null;
+}
+function readValue(computed, token, fallback, silent, onTokenSurface) {
+	const name = tokenToProperty(token);
+	if (!name) {
+		warnOnce(`name:${token}`, `"${token}" is not a valid design token name.`);
+		return fallback;
+	}
+	if (!onTokenSurface) {
+		if (!silent) warnOnce(`surface:${name}`, `Token "${token}" (${name}) was read from an element the design tokens are not in effect on, so any value there is tasty's @property default rather than the kit's. <Root> declares the token block on <body>, so <html>, a detached node, and a tree that has not mounted <Root> yet are all outside it. Pass \`element\` to read from a specific subtree, or \`fallback\` for a value to use instead.`);
+		return fallback;
+	}
+	const value = computed.getPropertyValue(name).trim();
+	if (!value) return fallback;
+	if (PLACEHOLDER_VALUES.has(normalizeValue(value)) && !getKnownTokenNames().has(name)) {
+		if (!silent) warnOnce(`unknown:${name}`, `Token "${token}" (${name}) is not declared by the kit, and read back as an unset custom property. Check the name, or pass \`fallback\`.`);
+		return fallback;
+	}
+	return value;
+}
+/**
+* Read the resolved value of one design token — a color, a length, a font
+* descriptor — as a literal string.
+*
+* ```ts
+* resolveTokenValue('#purple'); // 'oklch(0.52 0.24 285)'
+* resolveTokenValue('$space-md'); // '8px'
+* resolveTokenValue('$t3-font-size'); // '14px'
+* ```
+*
+* Returns `options.fallback ?? null` when the token is not declared on the
+* element it was read from — see {@link ResolveTokenOptions}.
+*/
+function resolveTokenValue(token, options = {}) {
+	return resolveTokenValues([token], options)[token];
+}
+/**
+* {@link resolveTokenValue} for several tokens at once, through a single
+* `getComputedStyle` call. Prefer this when building a theme object — a Stripe
+* `Appearance`, a CodeMirror theme — which needs a dozen values at a time.
+*
+* ```ts
+* const { '#surface': background, '#surface-text': color } = resolveTokenValues([
+*   '#surface',
+*   '#surface-text',
+* ]);
+* ```
+*/
+function resolveTokenValues(tokens, options = {}) {
+	return readTokens(tokens, options, false);
+}
+/** Shared by the public reader and the preset reader, which suppresses warnings. */
+function readTokens(tokens, options, silent) {
+	const { element, fallback = null } = options;
+	const result = {};
+	const target = resolveTarget(element);
+	const view = target?.ownerDocument?.defaultView;
+	if (!target || !view) {
+		for (const token of tokens) result[token] = fallback;
+		return result;
+	}
+	const computed = view.getComputedStyle(target);
+	const onTokenSurface = isTokenSurface(computed);
+	for (const token of tokens) result[token] = readValue(computed, token, fallback, silent, onTokenSurface);
+	return result;
+}
+/**
+* Resolve a typography preset — `'t3'`, `'h2'`, `'s3'` — to the literal font
+* descriptors behind it, for a surface that takes a font as values rather than
+* as a `preset` style.
+*
+* ```ts
+* const { fontFamily, fontSize, lineHeight } = resolvePresetValues('t3');
+* ```
+*
+* A preset legitimately leaves most of these unset — only headings carry an
+* `iconSize`, only the `s*` family names a `fontFamily` — so unlike
+* {@link resolveTokenValues} a miss here is expected and never warns.
+*/
+function resolvePresetValues(preset, options = {}) {
+	const { fallback = null } = options;
+	const names = PRESET_FIELDS.map((field) => `$${preset}-${PRESET_FIELD_SUFFIXES[field]}`);
+	const values = readTokens([...names, "--font-sans"], { element: options.element }, true);
+	const resolved = {};
+	PRESET_FIELDS.forEach((field, index) => {
+		resolved[field] = values[names[index]] ?? fallback;
+	});
+	resolved.fontFamily = values[names[PRESET_FIELDS.indexOf("fontFamily")]] ?? values["--font-sans"] ?? fallback;
+	return resolved;
+}
+/**
+* A token's resolved value changes for two reasons: the palette was re-seeded
+* (`setPaletteConfig()`, covered by `usePaletteVersion`), or the scheme /
+* contrast tier flipped. This store covers the second.
+*
+* Both axes are the ones `@dark` and `@hc` resolve against (see
+* `src/components/Root.tsx`): the `data-schema` / `data-contrast` attributes on
+* `<html>`, and the `prefers-color-scheme` / `prefers-contrast` media queries
+* they fall back to. An attribute flip is invisible to `matchMedia` and a system
+* flip is invisible to a `MutationObserver`, so both are watched.
+*/
+const APPEARANCE_QUERIES = ["(prefers-color-scheme: dark)", "(prefers-contrast: more)"];
+const APPEARANCE_ATTRIBUTES = ["data-schema", "data-contrast"];
+let appearanceVersion = 0;
+let stopWatchingAppearance = null;
+const appearanceListeners = /* @__PURE__ */ new Set();
+function onAppearanceChange() {
+	appearanceVersion++;
+	appearanceListeners.forEach((listener) => listener());
+}
+function watchAppearance() {
+	const teardowns = [];
+	if (typeof window.matchMedia === "function") for (const query of APPEARANCE_QUERIES) {
+		const list = window.matchMedia(query);
+		if (typeof list?.addEventListener !== "function") continue;
+		list.addEventListener("change", onAppearanceChange);
+		teardowns.push(() => list.removeEventListener("change", onAppearanceChange));
+	}
+	if (typeof MutationObserver === "function" && document.documentElement) {
+		const observer = new MutationObserver(onAppearanceChange);
+		observer.observe(document.documentElement, {
+			attributes: true,
+			attributeFilter: APPEARANCE_ATTRIBUTES
+		});
+		teardowns.push(() => observer.disconnect());
+	}
+	return () => teardowns.forEach((teardown) => teardown());
+}
+function subscribeAppearance(listener) {
+	appearanceListeners.add(listener);
+	if (appearanceListeners.size === 1 && typeof window !== "undefined") stopWatchingAppearance = watchAppearance();
+	return () => {
+		appearanceListeners.delete(listener);
+		if (!appearanceListeners.size) {
+			stopWatchingAppearance?.();
+			stopWatchingAppearance = null;
+		}
+	};
+}
+function getAppearanceVersion() {
+	return appearanceVersion;
+}
+/**
+* A version React only ever hands out while rendering on the server or
+* hydrating: `useSyncExternalStore` reads `getServerSnapshot` in exactly those
+* two cases and `getSnapshot` in every other. That makes it a reliable "this
+* render has to match the server's markup" flag — see {@link useResolvedTokens}.
+*
+* A plain client render (`createRoot`) never sees it, so a CSR app still
+* resolves on its first render rather than paying an extra pass.
+*/
+const HYDRATING = -1;
+function getServerAppearanceVersion() {
+	return HYDRATING;
+}
+/**
+* Re-render on a scheme / contrast change. Returns the version rather than the
+* state so the snapshot is a primitive — the same reason `usePaletteVersion`
+* does, see `src/tokens/palette-config.ts`.
+*/
+function useAppearanceVersion() {
+	return useSyncExternalStore(subscribeAppearance, getAppearanceVersion, getServerAppearanceVersion);
+}
+/**
+* The value is read out of the DOM, so it re-resolves whenever the palette is
+* re-seeded or the scheme / contrast tier flips, and it is `fallback ?? null`
+* during SSR. The layout effect is what covers the first commit: a consumer
+* rendered in the same pass as `<Root>` reads before the token block lands.
+*/
+function useResolvedTokens(tokens, key, options) {
+	const { element, fallback } = options;
+	const paletteVersion = usePaletteVersion();
+	const appearance = useAppearanceVersion();
+	const [values, setValues] = useState(() => appearance === HYDRATING ? unresolved(tokens, fallback) : resolveTokenValues(tokens, options));
+	useLayoutEffect$1(() => {
+		setValues((previous) => {
+			const next = resolveTokenValues(tokens, {
+				element,
+				fallback
+			});
+			return isSameRecord(previous, next) ? previous : next;
+		});
+	}, [
+		key,
+		element,
+		fallback,
+		paletteVersion,
+		appearance
+	]);
+	return values;
+}
+/**
+* What the server rendered: no DOM, so every token is the fallback. The first
+* client render has to agree with it or hydration reports a mismatch for any
+* consumer that renders the value; the layout effect above replaces it with the
+* resolved values before the browser paints.
+*/
+function unresolved(tokens, fallback) {
+	const result = {};
+	for (const token of tokens) result[token] = fallback ?? null;
+	return result;
+}
+/** Keeps the previous object when nothing moved, so it stays usable as a dep. */
+function isSameRecord(a, b) {
+	const keys = Object.keys(b);
+	if (Object.keys(a).length !== keys.length) return false;
+	return keys.every((key) => a[key] === b[key]);
+}
+/**
+* {@link resolveTokenValue} as a hook: re-renders when the palette is re-seeded
+* or the scheme / contrast tier flips.
+*
+* ```tsx
+* const accent = useTokenValue('#purple');
+*
+* return <Chart series={{ color: accent ?? '#000' }} />;
+* ```
+*/
+function useTokenValue(token, options = {}) {
+	return useResolvedTokens([token], token, options)[token];
+}
+/**
+* {@link resolveTokenValues} as a hook. The returned object keeps its identity
+* while the values are unchanged, so it is safe as a dependency of the theme
+* object built from it — and the token list may be an inline literal.
+*
+* ```tsx
+* const colors = useTokenValues(['#surface', '#surface-text', '#border']);
+*
+* const appearance = useMemo(() => toStripeAppearance(colors), [colors]);
+* ```
+*/
+function useTokenValues(tokens, options = {}) {
+	return useResolvedTokens(tokens, tokens.join(" "), options);
+}
+/**
+* {@link resolvePresetValues} as a hook.
+*
+* ```tsx
+* const { fontFamily, fontSize } = usePresetValues('s3');
+* ```
+*/
+function usePresetValues(preset, options = {}) {
+	const { element, fallback } = options;
+	const paletteVersion = usePaletteVersion();
+	const appearance = useAppearanceVersion();
+	const [values, setValues] = useState(() => appearance === HYDRATING ? unresolvedPreset(fallback) : resolvePresetValues(preset, options));
+	useLayoutEffect$1(() => {
+		setValues((previous) => {
+			const next = resolvePresetValues(preset, {
+				element,
+				fallback
+			});
+			return isSameRecord(previous, next) ? previous : next;
+		});
+	}, [
+		preset,
+		element,
+		fallback,
+		paletteVersion,
+		appearance
+	]);
+	return values;
+}
+/** {@link unresolved} for the fixed shape {@link resolvePresetValues} returns. */
+function unresolvedPreset(fallback) {
+	const resolved = {};
+	for (const field of PRESET_FIELDS) resolved[field] = fallback ?? null;
+	return resolved;
+}
+
+//#endregion
+export { resolvePresetValues, resolveTokenValue, resolveTokenValues, usePresetValues, useTokenValue, useTokenValues };
+//# sourceMappingURL=resolve.js.map

package/dist/tokens/resolve.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolve.js","names":[],"sources":["../../src/tokens/resolve.ts"],"sourcesContent":["import { useState, useSyncExternalStore } from 'react';\n\nimport { useLayoutEffect } from '../utils/react/useLayoutEffect';\nimport { warn } from '../utils/warnings';\n\nimport { getTokens } from './all-tokens';\nimport { getPaletteVersion, usePaletteVersion } from './palette-config';\n\n/**\n * Resolving a design token to a literal value, for consumers that render into a\n * surface our stylesheets do not reach — a third-party iframe (Stripe Elements),\n * a CodeMirror / Monaco theme object, a Vega spec. Those take colors, lengths and\n * font descriptors as values; `var(--purple-color)` means nothing to them.\n *\n * Doing it by hand fails silently, because a token read from the wrong element\n * does not come back empty. Tasty registers `@property` rules — its own defaults\n * plus one for every custom property whose type it can infer — and an undeclared\n * token reads back as that rule's `initial-value`. Some of those are obvious\n * duds (`rgba(0, 0, 0, 0)` for a `<color>`, `0px` for a `<length>`), but many are\n * ordinary-looking values: off the token block `--gap` reads `4px` rather than\n * the kit's `8px`, `--transition` reads `80ms`, `--radius` reads `6px`. So\n * inspecting the value cannot tell a real token from a miss, in either\n * direction — `#clear` really is `transparent` and `$h2-letter-spacing` really\n * is `0px`.\n *\n * The question that CAN be answered is \"are the kit's tokens in effect on this\n * element?\", and `$tokens-applied` (see `src/tokens/base.ts`) answers it: it is\n * declared alongside the tokens, so it is present exactly where they are. Off\n * that surface every read is reported as unresolved; on it, the computed value\n * is the truth.\n */\n\n/**\n * Declared by the token block and nothing else — see `src/tokens/base.ts`.\n *\n * Matched by VALUE rather than by presence, because presence is not the signal\n * it looks like: tasty infers a type for the marker as readily as for any other\n * token, registers `@property --tokens-applied` with `initial-value: 0`, and so\n * hands back `0` off the block instead of an empty string. Comparing against the\n * declared value is right either way, and cannot drift from `base.ts`.\n */\nconst SURFACE_MARKER = '$tokens-applied';\n\nfunction isTokenSurface(computed: CSSStyleDeclaration): boolean {\n  const declared = getTokens()[SURFACE_MARKER];\n  const name = tokenToProperty(SURFACE_MARKER);\n\n  if (typeof declared !== 'string' || !name) return false;\n\n  return (\n    normalizeValue(computed.getPropertyValue(name)) === normalizeValue(declared)\n  );\n}\n\n/**\n * Values that mean \"this property was never declared\" once we already know the\n * token block IS in effect. Only used to catch a token the kit does not declare\n * at all — a typo, or a name from another design system — since for those there\n * is no marker to lean on.\n */\nconst PLACEHOLDER_VALUES = new Set([\n  'transparent',\n  'rgba(0,0,0,0)',\n  '0',\n  '0px',\n  '0deg',\n  '0s',\n]);\n\n/** Custom property names are CSS identifiers: a letter or `_`, then word chars or `-`. */\nconst PROPERTY_NAME_RE = /^[a-zA-Z_][\\w-]*$/;\n\nexport interface ResolveTokenOptions {\n  /**\n   * Element to read the tokens off. Defaults to the document `<body>`, which is\n   * where `<Root>` declares them.\n   *\n   * Pass an element when the value has to reflect a *local* override — a subtree\n   * carrying its own `tokens` prop (`renderColorTokens()`), or one under a\n   * `data-schema` / `data-contrast` attribute that differs from the document's.\n   * The element's own document and view are used, so a node inside a same-origin\n   * iframe resolves against that iframe.\n   */\n  element?: Element | null;\n  /**\n   * Returned in place of `null` when a token is unset, unresolvable, or reads\n   * back as an `@property` placeholder — including on the server, where there is\n   * no DOM to read.\n   */\n  fallback?: string;\n}\n\n/**\n * Fields mirror {@link TypographyPreset}. A field the preset does not define is\n * `null`, except `fontFamily`, which falls back to the document's `--font-sans`\n * so the common case (`t1`–`t4`, `h1`–`h6`, which inherit the sans stack rather\n * than naming it) still hands back a usable stack.\n */\nexport type ResolvedPreset = {\n  fontFamily: string | null;\n  fontSize: string | null;\n  fontStyle: string | null;\n  fontWeight: string | null;\n  lineHeight: string | null;\n  letterSpacing: string | null;\n  textTransform: string | null;\n  boldFontWeight: string | null;\n  iconSize: string | null;\n};\n\nconst PRESET_FIELD_SUFFIXES: Record<keyof ResolvedPreset, string> = {\n  fontFamily: 'font-family',\n  fontSize: 'font-size',\n  fontStyle: 'font-style',\n  fontWeight: 'font-weight',\n  lineHeight: 'line-height',\n  letterSpacing: 'letter-spacing',\n  textTransform: 'text-transform',\n  boldFontWeight: 'bold-font-weight',\n  iconSize: 'icon-size',\n};\n\nconst PRESET_FIELDS = Object.keys(\n  PRESET_FIELD_SUFFIXES,\n) as (keyof ResolvedPreset)[];\n\n/**\n * Map a token to its CSS custom property name, using the same convention tasty's\n * style DSL does: `#name` is a color (`--name-color`), `$name` is everything else\n * (`--name`). A raw `--name` or a bare `name` is taken as written.\n *\n * Returns `null` for anything that would not be a valid custom property.\n */\nfunction tokenToProperty(token: string): string | null {\n  const trimmed = token.trim();\n\n  let name: string;\n\n  if (trimmed.startsWith('--')) {\n    name = trimmed.slice(2);\n  } else if (trimmed.startsWith('#')) {\n    name = `${trimmed.slice(1)}-color`;\n  } else if (trimmed.startsWith('$')) {\n    name = trimmed.slice(1);\n  } else {\n    name = trimmed;\n  }\n\n  return PROPERTY_NAME_RE.test(name) ? `--${name}` : null;\n}\n\n/** Whitespace and case are not meaningful in the values we compare against. */\nfunction normalizeValue(value: string): string {\n  return value.replace(/\\s+/g, '').toLowerCase();\n}\n\n/**\n * Every custom property the kit declares, by name. Membership only — the value\n * is deliberately not consulted, because a token's declared value tells you\n * nothing about whether it is in effect where you read it.\n *\n * Memoized against the palette version, like {@link getTokens} itself.\n */\nlet knownNamesCache: { version: number; names: Set<string> } | null = null;\n\nfunction getKnownTokenNames(): Set<string> {\n  const version = getPaletteVersion();\n\n  if (!knownNamesCache || knownNamesCache.version !== version) {\n    const names = new Set<string>();\n\n    for (const key of Object.keys(getTokens())) {\n      const name = tokenToProperty(key);\n\n      if (name) names.add(name);\n    }\n\n    knownNamesCache = { version, names };\n  }\n\n  return knownNamesCache.names;\n}\n\n/** These fire per token, per page — once each, not once per render. */\nconst warnedTokens = new Set<string>();\n\nfunction warnOnce(key: string, message: string) {\n  if (warnedTokens.has(key)) return;\n\n  warnedTokens.add(key);\n\n  warn(message);\n}\n\n/** The document `<body>` is where `<Root>` declares the token block. */\nfunction resolveTarget(element?: Element | null): Element | null {\n  if (element) return element;\n  if (typeof document === 'undefined') return null;\n\n  return document.body ?? document.documentElement ?? null;\n}\n\nfunction readValue(\n  computed: CSSStyleDeclaration,\n  token: string,\n  fallback: string | null,\n  silent: boolean,\n  onTokenSurface: boolean,\n): string | null {\n  const name = tokenToProperty(token);\n\n  if (!name) {\n    warnOnce(`name:${token}`, `\"${token}\" is not a valid design token name.`);\n\n    return fallback;\n  }\n\n  if (!onTokenSurface) {\n    if (!silent) {\n      warnOnce(\n        `surface:${name}`,\n        `Token \"${token}\" (${name}) was read from an element the design tokens are not in effect on, so any value there is tasty's @property default rather than the kit's. <Root> declares the token block on <body>, so <html>, a detached node, and a tree that has not mounted <Root> yet are all outside it. Pass \\`element\\` to read from a specific subtree, or \\`fallback\\` for a value to use instead.`,\n      );\n    }\n\n    return fallback;\n  }\n\n  const value = computed.getPropertyValue(name).trim();\n\n  if (!value) return fallback;\n\n  // On a token surface the computed value is the truth, including a genuinely\n  // transparent color or a real `0px`. The only thing left to catch is a name\n  // the kit never declares, where an @property default is all there is to read.\n  if (\n    PLACEHOLDER_VALUES.has(normalizeValue(value)) &&\n    !getKnownTokenNames().has(name)\n  ) {\n    if (!silent) {\n      warnOnce(\n        `unknown:${name}`,\n        `Token \"${token}\" (${name}) is not declared by the kit, and read back as an unset custom property. Check the name, or pass \\`fallback\\`.`,\n      );\n    }\n\n    return fallback;\n  }\n\n  return value;\n}\n\n/**\n * Read the resolved value of one design token — a color, a length, a font\n * descriptor — as a literal string.\n *\n * ```ts\n * resolveTokenValue('#purple'); // 'oklch(0.52 0.24 285)'\n * resolveTokenValue('$space-md'); // '8px'\n * resolveTokenValue('$t3-font-size'); // '14px'\n * ```\n *\n * Returns `options.fallback ?? null` when the token is not declared on the\n * element it was read from — see {@link ResolveTokenOptions}.\n */\nexport function resolveTokenValue(\n  token: string,\n  options: ResolveTokenOptions = {},\n): string | null {\n  return resolveTokenValues([token], options)[token];\n}\n\n/**\n * {@link resolveTokenValue} for several tokens at once, through a single\n * `getComputedStyle` call. Prefer this when building a theme object — a Stripe\n * `Appearance`, a CodeMirror theme — which needs a dozen values at a time.\n *\n * ```ts\n * const { '#surface': background, '#surface-text': color } = resolveTokenValues([\n *   '#surface',\n *   '#surface-text',\n * ]);\n * ```\n */\nexport function resolveTokenValues<T extends string>(\n  tokens: readonly T[],\n  options: ResolveTokenOptions = {},\n): Record<T, string | null> {\n  return readTokens(tokens, options, false);\n}\n\n/** Shared by the public reader and the preset reader, which suppresses warnings. */\nfunction readTokens<T extends string>(\n  tokens: readonly T[],\n  options: ResolveTokenOptions,\n  silent: boolean,\n): Record<T, string | null> {\n  const { element, fallback = null } = options;\n  const result = {} as Record<T, string | null>;\n  const target = resolveTarget(element);\n  const view = target?.ownerDocument?.defaultView;\n\n  if (!target || !view) {\n    for (const token of tokens) result[token] = fallback;\n\n    return result;\n  }\n\n  const computed = view.getComputedStyle(target);\n  // One read for the whole batch: the marker is a property of the element, not\n  // of any individual token.\n  const onTokenSurface = isTokenSurface(computed);\n\n  for (const token of tokens) {\n    result[token] = readValue(\n      computed,\n      token,\n      fallback,\n      silent,\n      onTokenSurface,\n    );\n  }\n\n  return result;\n}\n\n/**\n * Resolve a typography preset — `'t3'`, `'h2'`, `'s3'` — to the literal font\n * descriptors behind it, for a surface that takes a font as values rather than\n * as a `preset` style.\n *\n * ```ts\n * const { fontFamily, fontSize, lineHeight } = resolvePresetValues('t3');\n * ```\n *\n * A preset legitimately leaves most of these unset — only headings carry an\n * `iconSize`, only the `s*` family names a `fontFamily` — so unlike\n * {@link resolveTokenValues} a miss here is expected and never warns.\n */\nexport function resolvePresetValues(\n  preset: string,\n  options: ResolveTokenOptions = {},\n): ResolvedPreset {\n  const { fallback = null } = options;\n  const names = PRESET_FIELDS.map(\n    (field) => `$${preset}-${PRESET_FIELD_SUFFIXES[field]}`,\n  );\n  const values = readTokens(\n    [...names, '--font-sans'],\n    { element: options.element },\n    true,\n  );\n  const resolved = {} as ResolvedPreset;\n\n  PRESET_FIELDS.forEach((field, index) => {\n    resolved[field] = values[names[index]] ?? fallback;\n  });\n\n  // Every preset but the `s*` family inherits the sans stack rather than naming\n  // it, so the token is absent by design and `--font-sans` is the real answer.\n  resolved.fontFamily =\n    values[names[PRESET_FIELDS.indexOf('fontFamily')]] ??\n    values['--font-sans'] ??\n    fallback;\n\n  return resolved;\n}\n\n// ============================================================================\n// Appearance subscription\n// ============================================================================\n\n/**\n * A token's resolved value changes for two reasons: the palette was re-seeded\n * (`setPaletteConfig()`, covered by `usePaletteVersion`), or the scheme /\n * contrast tier flipped. This store covers the second.\n *\n * Both axes are the ones `@dark` and `@hc` resolve against (see\n * `src/components/Root.tsx`): the `data-schema` / `data-contrast` attributes on\n * `<html>`, and the `prefers-color-scheme` / `prefers-contrast` media queries\n * they fall back to. An attribute flip is invisible to `matchMedia` and a system\n * flip is invisible to a `MutationObserver`, so both are watched.\n */\nconst APPEARANCE_QUERIES = [\n  '(prefers-color-scheme: dark)',\n  '(prefers-contrast: more)',\n];\nconst APPEARANCE_ATTRIBUTES = ['data-schema', 'data-contrast'];\n\nlet appearanceVersion = 0;\nlet stopWatchingAppearance: (() => void) | null = null;\n\nconst appearanceListeners = new Set<() => void>();\n\nfunction onAppearanceChange() {\n  appearanceVersion++;\n\n  appearanceListeners.forEach((listener) => listener());\n}\n\nfunction watchAppearance(): () => void {\n  const teardowns: (() => void)[] = [];\n\n  // Guarded rather than assumed: jsdom ships neither `matchMedia` nor a\n  // `MediaQueryList` in every version, and a consumer's unit tests are exactly\n  // where a hook like this gets mounted. Losing one source of change is a stale\n  // value; throwing is a broken render.\n  if (typeof window.matchMedia === 'function') {\n    for (const query of APPEARANCE_QUERIES) {\n      const list = window.matchMedia(query);\n\n      if (typeof list?.addEventListener !== 'function') continue;\n\n      list.addEventListener('change', onAppearanceChange);\n      teardowns.push(() =>\n        list.removeEventListener('change', onAppearanceChange),\n      );\n    }\n  }\n\n  if (typeof MutationObserver === 'function' && document.documentElement) {\n    const observer = new MutationObserver(onAppearanceChange);\n\n    observer.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: APPEARANCE_ATTRIBUTES,\n    });\n\n    teardowns.push(() => observer.disconnect());\n  }\n\n  return () => teardowns.forEach((teardown) => teardown());\n}\n\nfunction subscribeAppearance(listener: () => void): () => void {\n  appearanceListeners.add(listener);\n\n  if (appearanceListeners.size === 1 && typeof window !== 'undefined') {\n    stopWatchingAppearance = watchAppearance();\n  }\n\n  return () => {\n    appearanceListeners.delete(listener);\n\n    if (!appearanceListeners.size) {\n      stopWatchingAppearance?.();\n      stopWatchingAppearance = null;\n    }\n  };\n}\n\nfunction getAppearanceVersion(): number {\n  return appearanceVersion;\n}\n\n/**\n * A version React only ever hands out while rendering on the server or\n * hydrating: `useSyncExternalStore` reads `getServerSnapshot` in exactly those\n * two cases and `getSnapshot` in every other. That makes it a reliable \"this\n * render has to match the server's markup\" flag — see {@link useResolvedTokens}.\n *\n * A plain client render (`createRoot`) never sees it, so a CSR app still\n * resolves on its first render rather than paying an extra pass.\n */\nconst HYDRATING = -1;\n\nfunction getServerAppearanceVersion(): number {\n  return HYDRATING;\n}\n\n/**\n * Re-render on a scheme / contrast change. Returns the version rather than the\n * state so the snapshot is a primitive — the same reason `usePaletteVersion`\n * does, see `src/tokens/palette-config.ts`.\n */\nfunction useAppearanceVersion(): number {\n  return useSyncExternalStore(\n    subscribeAppearance,\n    getAppearanceVersion,\n    getServerAppearanceVersion,\n  );\n}\n\n// ============================================================================\n// React bindings\n// ============================================================================\n\n/**\n * The value is read out of the DOM, so it re-resolves whenever the palette is\n * re-seeded or the scheme / contrast tier flips, and it is `fallback ?? null`\n * during SSR. The layout effect is what covers the first commit: a consumer\n * rendered in the same pass as `<Root>` reads before the token block lands.\n */\nfunction useResolvedTokens<T extends string>(\n  tokens: readonly T[],\n  key: string,\n  options: ResolveTokenOptions,\n): Record<T, string | null> {\n  const { element, fallback } = options;\n  const paletteVersion = usePaletteVersion();\n  const appearance = useAppearanceVersion();\n\n  const [values, setValues] = useState(() =>\n    appearance === HYDRATING\n      ? unresolved(tokens, fallback)\n      : resolveTokenValues(tokens, options),\n  );\n\n  useLayoutEffect(() => {\n    setValues((previous) => {\n      const next = resolveTokenValues(tokens, { element, fallback });\n\n      return isSameRecord(previous, next) ? previous : next;\n    });\n    // `tokens` is a fresh array on all but the first render, so `key` — its\n    // joined identity — is what belongs in the dependency list.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [key, element, fallback, paletteVersion, appearance]);\n\n  return values;\n}\n\n/**\n * What the server rendered: no DOM, so every token is the fallback. The first\n * client render has to agree with it or hydration reports a mismatch for any\n * consumer that renders the value; the layout effect above replaces it with the\n * resolved values before the browser paints.\n */\nfunction unresolved<T extends string>(\n  tokens: readonly T[],\n  fallback: string | undefined,\n): Record<T, string | null> {\n  const result = {} as Record<T, string | null>;\n\n  for (const token of tokens) result[token] = fallback ?? null;\n\n  return result;\n}\n\n/** Keeps the previous object when nothing moved, so it stays usable as a dep. */\nfunction isSameRecord<T extends Record<string, string | null>>(\n  a: T,\n  b: T,\n): boolean {\n  const keys = Object.keys(b);\n\n  if (Object.keys(a).length !== keys.length) return false;\n\n  return keys.every((key) => a[key] === b[key]);\n}\n\n/**\n * {@link resolveTokenValue} as a hook: re-renders when the palette is re-seeded\n * or the scheme / contrast tier flips.\n *\n * ```tsx\n * const accent = useTokenValue('#purple');\n *\n * return <Chart series={{ color: accent ?? '#000' }} />;\n * ```\n */\nexport function useTokenValue(\n  token: string,\n  options: ResolveTokenOptions = {},\n): string | null {\n  return useResolvedTokens([token], token, options)[token];\n}\n\n/**\n * {@link resolveTokenValues} as a hook. The returned object keeps its identity\n * while the values are unchanged, so it is safe as a dependency of the theme\n * object built from it — and the token list may be an inline literal.\n *\n * ```tsx\n * const colors = useTokenValues(['#surface', '#surface-text', '#border']);\n *\n * const appearance = useMemo(() => toStripeAppearance(colors), [colors]);\n * ```\n */\nexport function useTokenValues<T extends string>(\n  tokens: readonly T[],\n  options: ResolveTokenOptions = {},\n): Record<T, string | null> {\n  return useResolvedTokens(tokens, tokens.join(' '), options);\n}\n\n/**\n * {@link resolvePresetValues} as a hook.\n *\n * ```tsx\n * const { fontFamily, fontSize } = usePresetValues('s3');\n * ```\n */\nexport function usePresetValues(\n  preset: string,\n  options: ResolveTokenOptions = {},\n): ResolvedPreset {\n  const { element, fallback } = options;\n  const paletteVersion = usePaletteVersion();\n  const appearance = useAppearanceVersion();\n\n  const [values, setValues] = useState(() =>\n    appearance === HYDRATING\n      ? unresolvedPreset(fallback)\n      : resolvePresetValues(preset, options),\n  );\n\n  useLayoutEffect(() => {\n    setValues((previous) => {\n      const next = resolvePresetValues(preset, { element, fallback });\n\n      return isSameRecord(previous, next) ? previous : next;\n    });\n  }, [preset, element, fallback, paletteVersion, appearance]);\n\n  return values;\n}\n\n/** {@link unresolved} for the fixed shape {@link resolvePresetValues} returns. */\nfunction unresolvedPreset(fallback: string | undefined): ResolvedPreset {\n  const resolved = {} as ResolvedPreset;\n\n  for (const field of PRESET_FIELDS) resolved[field] = fallback ?? null;\n\n  return resolved;\n}\n"],"mappings":"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"}

package/dist/tokens/shadows.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.166.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.168.0 | Cube Dev Team */
 //#region src/tokens/shadows.ts
 /**
 * Shadow tokens using tasty shorthand syntax.

package/dist/tokens/sizes.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.166.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.168.0 | Cube Dev Team */
 //#region src/tokens/sizes.ts
 /**
 * Component size values in pixels.

package/dist/tokens/spacing.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.166.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.168.0 | Cube Dev Team */
 //#region src/tokens/spacing.ts
 /**
 * Spacing tokens using tasty multiplier syntax.

package/dist/tokens/typography.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.166.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.168.0 | Cube Dev Team */
 //#region src/tokens/typography.ts
 /**
 * Typography presets for headings, text, and special styles.

package/dist/utils/ResizeSensor.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.166.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.168.0 | Cube Dev Team */
 //#region src/utils/ResizeSensor.ts
 /**
 * Iterate over each of the provided element(s).

package/dist/utils/is-dev-env.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.166.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.168.0 | Cube Dev Team */
 //#region src/utils/is-dev-env.ts
 function isDevEnv() {
 	if (typeof window !== "undefined" && window.localStorage) try {

package/dist/utils/modules.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.166.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.168.0 | Cube Dev Team */
 //#region src/utils/modules.ts
 function extractModule(promise) {
 	return promise.then((module) => module.default || module);

package/dist/utils/promise.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.166.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.168.0 | Cube Dev Team */
 //#region src/utils/promise.ts
 function timeout(ms = 30) {
 	return new Promise((resolve) => {

package/dist/utils/raf.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.166.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.168.0 | Cube Dev Team */
 //#region src/utils/raf.ts
 /**
 * Chains N requestAnimationFrame calls and returns a cancel function.

package/dist/utils/random.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.166.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.168.0 | Cube Dev Team */
 //#region src/utils/random.ts
 function random(min, max) {
 	const realMin = min < max ? min : max;

package/dist/utils/range.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.166.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.168.0 | Cube Dev Team */
 //#region src/utils/range.ts
 function range(count) {
 	return Array.from({ length: count }, (_, i) => i);

package/dist/utils/react/RenderCache.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.166.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.168.0 | Cube Dev Team */
 import { useRef } from "react";
 import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
 

package/dist/utils/react/Slots.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.166.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.168.0 | Cube Dev Team */
 import { mergeProps } from "./mergeProps.js";
 import { Children, cloneElement, createContext, useContext, useMemo } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/utils/react/chain.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.166.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.168.0 | Cube Dev Team */
 //#region src/utils/react/chain.ts
 /**
 * Calls all functions in the order they were chained with the same arguments.

package/dist/utils/react/disabledProps.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.166.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.168.0 | Cube Dev Team */
 //#region src/utils/react/disabledProps.ts
 /**
 * Tags where `disabled` is a real HTML attribute. Browsers refuse to dispatch

package/dist/utils/react/forwardRefWithGenerics.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.166.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.168.0 | Cube Dev Team */
 //#region src/utils/react/forwardRefWithGenerics.tsx
 /**
 * A helper for creating forwardRef components with generic types.

package/dist/utils/react/index.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.166.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.168.0 | Cube Dev Team */
 import { chain } from "./chain.js";
 import { getDisabledElementProps, omitActivationEventProps } from "./disabledProps.js";
 import { forwardRefWithGenerics } from "./forwardRefWithGenerics.js";

package/dist/utils/react/interactions.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.166.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.168.0 | Cube Dev Team */
 import { useState } from "react";
 import { useFocus, useFocusVisible } from "react-aria";
 

package/dist/utils/react/isTextOnly.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.166.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.168.0 | Cube Dev Team */
 import { Children, isValidElement } from "react";
 
 //#region src/utils/react/isTextOnly.ts

package/dist/utils/react/mapProps.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.166.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.168.0 | Cube Dev Team */
 //#region src/utils/react/mapProps.ts
 /** Converts AriaButtonProps to CubeButtonProps */
 function ariaToCubeButtonProps(props) {

package/dist/utils/react/mergeProps.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.166.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.168.0 | Cube Dev Team */
 import { chain } from "./chain.js";
 import { mergeIds } from "./useId.js";
 import { mergeStyles } from "@tenphi/tasty";

package/dist/utils/react/nullableValue.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.166.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.168.0 | Cube Dev Team */
 //#region src/utils/react/nullableValue.ts
 function castNullableStringValue(props) {
 	return castNullableField(props, ["value", "defaultValue"], "string", (v) => String(v));

package/dist/utils/react/resolveIcon.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.166.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.168.0 | Cube Dev Team */
 //#region src/utils/react/resolveIcon.ts
 /**
 * Resolves a dynamic icon prop to its content and slot state.

package/dist/utils/react/sharedStore.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.166.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.168.0 | Cube Dev Team */
 import { useEvent } from "../../_internal/hooks/use-event.js";
 import { useSyncExternalStore } from "react";
 

package/dist/utils/react/useBufferedValue.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.166.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.168.0 | Cube Dev Team */
 import { useLayoutEffect as useLayoutEffect$1 } from "./useLayoutEffect.js";
 import { useCallback, useRef, useState } from "react";
 

package/dist/utils/react/useCombinedRefs.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.166.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.168.0 | Cube Dev Team */
 import { useEffect, useRef } from "react";
 
 //#region src/utils/react/useCombinedRefs.ts