@cube-dev/ui-kit 0.199.1 → 0.200.0

package/dist/tokens/resolve.js.map

@@ -1 +1 @@
-{"version":3,"file":"resolve.js","names":["useState","useSyncExternalStore","useLayoutEffect","subscribeScheme","warn","getTokens","getPaletteVersion","usePaletteVersion","SURFACE_MARKER","isTokenSurface","computed","CSSStyleDeclaration","declared","name","tokenToProperty","normalizeValue","getPropertyValue","PLACEHOLDER_VALUES","Set","PROPERTY_NAME_RE","ResolveTokenOptions","element","Element","fallback","ResolvedPreset","fontFamily","fontSize","fontStyle","fontWeight","lineHeight","letterSpacing","textTransform","boldFontWeight","iconSize","PRESET_FIELD_SUFFIXES","Record","PRESET_FIELDS","Object","keys","token","trimmed","trim","startsWith","slice","test","value","replace","toLowerCase","knownNamesCache","version","names","getKnownTokenNames","key","add","warnedTokens","warnOnce","message","has","resolveTarget","document","body","documentElement","readValue","silent","onTokenSurface","resolveTokenValue","options","resolveTokenValues","tokens","T","readTokens","result","target","view","ownerDocument","defaultView","getComputedStyle","resolvePresetValues","preset","map","field","values","resolved","forEach","index","indexOf","appearanceVersion","stopWatchingAppearance","appearanceListeners","onAppearanceChange","listener","subscribeAppearance","size","delete","getAppearanceVersion","HYDRATING","getServerAppearanceVersion","useAppearanceVersion","useResolvedTokens","paletteVersion","appearance","setValues","unresolved","previous","next","isSameRecord","a","b","length","every","useTokenValue","t0","$","_c","t1","undefined","t2","useTokenValues","join","usePresetValues","unresolvedPreset","t3","t4","_c"],"sources":["../../src/tokens/resolve.ts"],"sourcesContent":["import { useState, useSyncExternalStore } from 'react';\n\nimport { useLayoutEffect } from '../utils/react/useLayoutEffect';\nimport { subscribeScheme } from '../utils/react/useScheme';\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 `8px`,\n * `--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-scheme` / `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 * The watching itself belongs to `subscribeScheme()` (`src/utils/react/useScheme.ts`),\n * which owns the definition of both axes — the `data-scheme` / `data-contrast`\n * attributes and the media queries they fall back to are the same strings\n * `<Root>` registers `@dark` and `@hc` from. This store only counts the changes,\n * so there is one observer for the document rather than one per concern.\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 subscribeAppearance(listener: () => void): () => void {\n  appearanceListeners.add(listener);\n\n  if (appearanceListeners.size === 1) {\n    stopWatchingAppearance = subscribeScheme(onAppearanceChange);\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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"}
+{"version":3,"file":"resolve.js","names":["useState","useSyncExternalStore","useLayoutEffect","subscribeScheme","warn","getTokens","getPaletteVersion","usePaletteVersion","SURFACE_MARKER","isTokenSurface","computed","CSSStyleDeclaration","declared","name","tokenToProperty","normalizeValue","getPropertyValue","PLACEHOLDER_VALUES","Set","PROPERTY_NAME_RE","ResolveTokenOptions","element","Element","fallback","ResolvedPreset","fontFamily","fontSize","fontStyle","fontWeight","lineHeight","letterSpacing","textTransform","boldFontWeight","iconSize","PRESET_FIELD_SUFFIXES","Record","PRESET_FIELDS","Object","keys","token","trimmed","trim","startsWith","slice","test","value","replace","toLowerCase","knownNamesCache","version","names","getKnownTokenNames","key","add","warnedTokens","warnOnce","message","has","resolveTarget","document","body","documentElement","readValue","silent","onTokenSurface","resolveTokenValue","options","resolveTokenValues","tokens","T","readTokens","result","target","view","ownerDocument","defaultView","getComputedStyle","resolvePresetValues","preset","map","field","values","resolved","forEach","index","indexOf","appearanceVersion","stopWatchingAppearance","appearanceListeners","onAppearanceChange","listener","subscribeAppearance","size","delete","getAppearanceVersion","HYDRATING","getServerAppearanceVersion","useAppearanceVersion","useResolvedTokens","paletteVersion","appearance","setValues","unresolved","previous","next","isSameRecord","a","b","length","every","useTokenValue","t0","$","_c","t1","undefined","t2","useTokenValues","join","usePresetValues","unresolvedPreset","t3","t4","_c"],"sources":["../../src/tokens/resolve.ts"],"sourcesContent":["import { useState, useSyncExternalStore } from 'react';\n\nimport { useLayoutEffect } from '../utils/react/useLayoutEffect';\nimport { subscribeScheme } from '../utils/react/useScheme';\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 `8px`,\n * `--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-scheme` / `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 * The watching itself belongs to `subscribeScheme()` (`src/utils/react/useScheme.ts`),\n * which owns the definition of both axes — the `data-scheme` / `data-contrast`\n * attributes and the media queries they fall back to are the same strings\n * `<Root>` registers `@dark` and `@hc` from. This store only counts the changes,\n * so there is one observer for the document rather than one per concern.\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 subscribeAppearance(listener: () => void): () => void {\n  appearanceListeners.add(listener);\n\n  if (appearanceListeners.size === 1) {\n    stopWatchingAppearance = subscribeScheme(onAppearanceChange);\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 -- `key` stands in for the `tokens` array, see above\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.d.ts

@@ -5,7 +5,6 @@ import { Styles } from "@tenphi/tasty";
  * Shadow tokens using tasty shorthand syntax.
  *
  * Format: `<offset-y> <blur> <spread?> <color>`
- * - `1bw` = 1 × border-width
  * - `.5x` = 0.5 × gap
  *
  * The shadow colors (`#shadow-sm` / `#shadow-md` / `#shadow-lg`) are

package/dist/tokens/shadows.js

@@ -1,10 +1,9 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | Cube Dev Team */
 //#region src/tokens/shadows.ts
 /**
 * Shadow tokens using tasty shorthand syntax.
 *
 * Format: `<offset-y> <blur> <spread?> <color>`
-* - `1bw` = 1 × border-width
 * - `.5x` = 0.5 × gap
 *
 * The shadow colors (`#shadow-sm` / `#shadow-md` / `#shadow-lg`) are
@@ -15,7 +14,7 @@
 */
 const SHADOW_TOKENS = {
 	/** Subtle shadow for list items */
-	"$item-shadow": "0 1bw .375x #shadow-sm",
+	"$item-shadow": "0 1px .375x #shadow-sm",
 	/** Standard card shadow */
 	"$card-shadow": "0 .5x 2x #shadow-md",
 	/** Standard elevation */

package/dist/tokens/shadows.js.map

@@ -1 +1 @@
-{"version":3,"file":"shadows.js","names":["Styles","SHADOW_TOKENS","$shadow"],"sources":["../../src/tokens/shadows.ts"],"sourcesContent":["import type { Styles } from '@tenphi/tasty';\n\n/**\n * Shadow tokens using tasty shorthand syntax.\n *\n * Format: `<offset-y> <blur> <spread?> <color>`\n * - `1bw` = 1 × border-width\n * - `.5x` = 0.5 × gap\n *\n * The shadow colors (`#shadow-sm` / `#shadow-md` / `#shadow-lg`) are\n * generated by Glaze and adapt automatically to dark / high-contrast\n * schemes — see `src/tokens/palette.ts`.\n *\n * Keys use $ prefix for CSS custom properties.\n */\nexport const SHADOW_TOKENS: Styles = {\n  /** Subtle shadow for list items */\n  '$item-shadow': '0 1bw .375x #shadow-sm',\n  /** Standard card shadow */\n  '$card-shadow': '0 .5x 2x #shadow-md',\n  /** Standard elevation */\n  $shadow: '0 .5x 2x #shadow-md',\n  /** Elevated dialog shadow */\n  '$dialog-shadow': '0 1x 4x #shadow-lg',\n};\n"],"mappings":";;;;;;;;;;;;;;;AAeA,MAAaC,gBAAwB;;CAEnC,gBAAgB;;CAEhB,gBAAgB;;CAEhBC,SAAS;;CAET,kBAAkB;AACpB"}
+{"version":3,"file":"shadows.js","names":["Styles","SHADOW_TOKENS","$shadow"],"sources":["../../src/tokens/shadows.ts"],"sourcesContent":["import type { Styles } from '@tenphi/tasty';\n\n/**\n * Shadow tokens using tasty shorthand syntax.\n *\n * Format: `<offset-y> <blur> <spread?> <color>`\n * - `.5x` = 0.5 × gap\n *\n * The shadow colors (`#shadow-sm` / `#shadow-md` / `#shadow-lg`) are\n * generated by Glaze and adapt automatically to dark / high-contrast\n * schemes — see `src/tokens/palette.ts`.\n *\n * Keys use $ prefix for CSS custom properties.\n */\nexport const SHADOW_TOKENS: Styles = {\n  /** Subtle shadow for list items */\n  '$item-shadow': '0 1px .375x #shadow-sm',\n  /** Standard card shadow */\n  '$card-shadow': '0 .5x 2x #shadow-md',\n  /** Standard elevation */\n  $shadow: '0 .5x 2x #shadow-md',\n  /** Elevated dialog shadow */\n  '$dialog-shadow': '0 1x 4x #shadow-lg',\n};\n"],"mappings":";;;;;;;;;;;;;;AAcA,MAAaC,gBAAwB;;CAEnC,gBAAgB;;CAEhB,gBAAgB;;CAEhBC,SAAS;;CAET,kBAAkB;AACpB"}

package/dist/tokens/sizes.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.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.199.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.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.199.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.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.199.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | Cube Dev Team */
 //#region src/utils/ResizeSensor.ts
 /**
 * Iterate over each of the provided element(s).

package/dist/utils/colors.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | Cube Dev Team */
 import { hslToSrgb, okhslToOklch, okhslToSrgb, okhstToOkhsl, oklabToOkhsl, parseHexAlpha } from "@tenphi/glaze";
 //#region src/utils/colors.ts
 /**

package/dist/utils/dotize.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | Cube Dev Team */
 //#region src/utils/dotize.ts
 /**
 * Flattens a nested object into dot paths: `{ a: { b: 1 } }` becomes

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | Cube Dev Team */
 //#region src/utils/is-dev-env.ts
 /**
 * `NODE_ENV` as the environment that is actually running reports it, or

package/dist/utils/modules.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.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.199.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.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.199.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.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.199.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.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.199.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.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.199.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | Cube Dev Team */
 import { useRef } from "react";
 import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
 //#region src/utils/react/RenderCache.tsx

package/dist/utils/react/Slots.js

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

package/dist/utils/react/chain.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.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.199.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.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.199.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | Cube Dev Team */
 //#region src/utils/react/forwardRefWithGenerics.tsx
 /**
 * @deprecated Declare a ref prop on a generic component, or preserve an

package/dist/utils/react/index.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | Cube Dev Team */
 import { chain } from "./chain.js";
 import { useLayoutEffect } from "./useLayoutEffect.js";
 import { mergeProps } from "./mergeProps.js";

package/dist/utils/react/interactions.js

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

package/dist/utils/react/isTextOnly.js

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

package/dist/utils/react/mapProps.js

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

package/dist/utils/react/overlayKeyPropagation.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | Cube Dev Team */
 //#region src/utils/react/overlayKeyPropagation.ts
 /**
 * Keys whose final handling belongs to the overlay around a control, not to

package/dist/utils/react/programmaticFocus.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | Cube Dev Team */
 //#region src/utils/react/programmaticFocus.ts
 /**
 * Telling focus the user moved from focus a component moved for them.

package/dist/utils/react/resolveIcon.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.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.199.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | Cube Dev Team */
 import { useEvent } from "../../_internal/hooks/use-event.js";
 import { isDevEnv } from "../is-dev-env.js";
 import { c } from "react/compiler-runtime";

package/dist/utils/react/useBufferedValue.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | Cube Dev Team */
 import { useLayoutEffect as useLayoutEffect$1 } from "./useLayoutEffect.js";
 import { useCallback, useRef, useState } from "react";
 //#region src/utils/react/useBufferedValue.ts

package/dist/utils/react/useCombinedRefs.js

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

package/dist/utils/react/useControlledFocusVisible.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | Cube Dev Team */
 import { createSharedStore } from "./sharedStore.js";
 import { c } from "react/compiler-runtime";
 import { useEffect } from "react";

package/dist/utils/react/useEventBus.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | Cube Dev Team */
 import { c } from "react/compiler-runtime";
 import React, { createContext, useCallback, useContext, useEffect, useMemo, useRef } from "react";
 //#region src/utils/react/useEventBus.ts

package/dist/utils/react/useId.js

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

package/dist/utils/react/useIsDarwin.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | Cube Dev Team */
 import { c } from "react/compiler-runtime";
 import { useEffect, useState } from "react";
 //#region src/utils/react/useIsDarwin.ts

package/dist/utils/react/useKeySymbols.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | Cube Dev Team */
 import { useIsDarwin } from "./useIsDarwin.js";
 import { c } from "react/compiler-runtime";
 //#region src/utils/react/useKeySymbols.ts

package/dist/utils/react/useLayoutEffect.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | Cube Dev Team */
 import * as React$1 from "react";
 //#region src/utils/react/useLayoutEffect.tsx
 const useLayoutEffect$1 = typeof window !== "undefined" ? React$1.useLayoutEffect : React$1.useEffect;

package/dist/utils/react/useLocalStorage.js

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

package/dist/utils/react/useMergeStyles.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | Cube Dev Team */
 import { mergeStyles } from "@tenphi/tasty";
 import { useMemo } from "react";
 //#region src/utils/react/useMergeStyles.ts

package/dist/utils/react/useOverlayEscapeGuard.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | Cube Dev Team */
 import { useEvent } from "../../_internal/hooks/use-event.js";
 import { c } from "react/compiler-runtime";
 import { getEventTarget, nodeContains } from "@react-aria/utils";

package/dist/utils/react/usePopoverSync.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | Cube Dev Team */
 import { EventBusContext, useEventBus } from "./useEventBus.js";
 import { c } from "react/compiler-runtime";
 import { useContext, useEffect, useEffectEvent, useRef } from "react";

package/dist/utils/react/useQaProps.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | Cube Dev Team */
 //#region src/utils/react/useQaProps.ts
 /**
 * Processes QA props.

package/dist/utils/react/useScheme.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | Cube Dev Team */
 import { useSyncExternalStore } from "react";
 //#region src/utils/react/useScheme.ts
 /**

package/dist/utils/react/useViewportSize.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | Cube Dev Team */
 import { c } from "react/compiler-runtime";
 import { useEffect, useState } from "react";
 //#region src/utils/react/useViewportSize.ts

package/dist/utils/react/wrapNodeIfPlain.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | Cube Dev Team */
 import { Fragment, isValidElement } from "react";
 //#region src/utils/react/wrapNodeIfPlain.ts
 function wrapNodeIfPlain(children, render) {

package/dist/utils/selection.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | Cube Dev Team */
 //#region src/utils/selection.ts
 /**
 * Deduplicate/toggle keys in a selection: if a key appears twice it is

package/dist/utils/styles.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | Cube Dev Team */
 import { isSelector, mergeStyles } from "@tenphi/tasty";
 //#region src/utils/styles.ts
 function isRecord(value) {

package/dist/utils/tree.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | Cube Dev Team */
 //#region src/utils/tree.ts
 function toFlatTree(tree, includingFolders) {
 	return tree.reduce((result, node) => {

package/dist/utils/warnings.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | Cube Dev Team */
 import { isDevEnvOrTest } from "./is-dev-env.js";
 //#region src/utils/warnings.ts
 const SUGGESTED_PROP_MAP = {

package/dist/version.js

@@ -1,7 +1,7 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | Cube Dev Team */
 //#region src/version.ts
-const VERSION = "0.199.1";
-const TASTY_VERSION = "3.13.0";
+const VERSION = "0.200.0";
+const TASTY_VERSION = "3.14.0";
 if (typeof window !== "undefined") {
 	const version = VERSION;
 	const tastyVersion = TASTY_VERSION;

package/docs/BaseProperties.md

@@ -10,6 +10,8 @@ All UI Kit components support a common set of base properties from the `tasty` s
 - **`styles`** `Styles` — Tasty styles object
 - **`css`** `string` — Raw CSS string
 - **`mods`** `Mods` — State modifiers for conditional styling
+- **`tokens`** `Tokens` — Custom-property values, applied as inline custom properties on the element
+- **`theme`** `string` — Renders `data-theme`. Components with their own `theme` prop, such as `Button`, `Alert` and `ItemAction`, give it their own meaning
 - **`breakpoints`** — Responsive breakpoint configuration
 - **`hidden`** `boolean` — Hide the element
 - **`isHidden`** `boolean` — Hide the element

package/docs/ComplexLayout.md

@@ -49,7 +49,7 @@ Use `Layout.Panel` for side navigation. Panels are absolutely positioned and aut
 <Layout height="400px">              {/* block, Inner: flex column ↓ */}
   <Layout.Panel side="left" size={200} isOpen={isOpen}> {/* absolute left, pushes content via insets */}
     <Layout.PanelHeader isClosable title="Menu" onClose={() => setIsOpen(false)} />
-    <Layout.Content padding=".5x" gap="1bw"> {/* flex column ↓, scrollable */}
+    <Layout.Content padding=".5x" gap="$item-gap"> {/* flex column ↓, scrollable */}
       <ItemButton type="clear">Dashboard</ItemButton>
       <ItemButton type="clear">Settings</ItemButton>
     </Layout.Content>