@cube-dev/ui-kit 0.205.0 → 0.206.0

package/dist/utils/colors.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.205.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.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.205.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.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.205.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.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.205.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.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.205.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.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.205.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.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.205.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.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.205.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.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.205.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.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.205.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.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.205.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.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.205.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.0 | Cube Dev Team */
 import { mergeProps } from "./mergeProps.js";
 //#region src/utils/react/disabledProps.ts
 /**

package/dist/utils/react/forwardRefWithGenerics.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.205.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.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.205.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.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.205.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.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.205.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.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.205.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.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.205.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.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.205.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.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.205.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.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.205.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.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.205.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.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.205.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.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.205.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.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.205.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.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.205.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.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.205.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.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.205.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.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.205.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.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.205.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.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.205.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.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.205.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.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.205.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.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.205.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.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.205.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.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.205.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.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.205.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.0 | Cube Dev Team */
 import { useSyncExternalStore } from "react";
 //#region src/utils/react/useScheme.ts
 /**
@@ -40,10 +40,11 @@ const CONTRAST_ATTR = `data-${CONTRAST_KEY}`;
 const DARK_QUERY = "(prefers-color-scheme: dark)";
 const HIGH_CONTRAST_QUERY = "(prefers-contrast: more)";
 /**
-* The `@dark` / `@hc` state aliases, in tasty's DSL — registered globally by
-* `<Root>` via `setGlobalPredefinedStates()`.
+* The `@dark` / `@hc` / `@reduced-motion` state aliases, in tasty's DSL —
+* registered globally by `<Root>` via `setGlobalPredefinedStates()`.
 *
-* The attribute opt-in wins over the system preference, and the fallback is
+* `@reduced-motion` follows the system preference alone. For the two schemes,
+* the attribute opt-in wins over the system preference, and the fallback is
 * gated on the attribute being *absent* (`!@root(scheme)`) rather than on it
 * being some other value — so `<html data-scheme="light">` stays light inside a
 * dark OS, which is the whole point of an opt-in. {@link resolveScheme} and
@@ -51,7 +52,8 @@ const HIGH_CONTRAST_QUERY = "(prefers-contrast: more)";
 */
 const AMBIENT_PREDEFINED_STATES = {
 	"@dark": `@root(${SCHEME_KEY}=dark) | (!@root(${SCHEME_KEY}) & @media${DARK_QUERY})`,
-	"@hc": `@root(${CONTRAST_KEY}=high) | (!@root(${CONTRAST_KEY}) & @media${HIGH_CONTRAST_QUERY})`
+	"@hc": `@root(${CONTRAST_KEY}=high) | (!@root(${CONTRAST_KEY}) & @media${HIGH_CONTRAST_QUERY})`,
+	"@reduced-motion": `@media(prefers-reduced-motion: reduce)`
 };
 /**
 * `matchMedia` is called per read rather than cached, so a test that stubs it

package/dist/utils/react/useScheme.js.map

@@ -1 +1 @@
-{"version":3,"file":"useScheme.js","names":["useSyncExternalStore","SCHEME_KEY","CONTRAST_KEY","SCHEME_ATTR","CONTRAST_ATTR","DARK_QUERY","HIGH_CONTRAST_QUERY","AMBIENT_PREDEFINED_STATES","const","ColorScheme","mediaMatches","query","window","matchMedia","matches","rootAttribute","name","document","documentElement","getAttribute","resolveScheme","attribute","resolveHighContrast","listeners","Set","stopWatching","notify","forEach","listener","startWatching","teardowns","list","addEventListener","push","removeEventListener","MutationObserver","observer","observe","attributes","attributeFilter","disconnect","teardown","subscribeScheme","add","delete","size","getServerScheme","getServerHighContrast","useScheme","useHighContrast"],"sources":["../../../src/utils/react/useScheme.ts"],"sourcesContent":["import { useSyncExternalStore } from 'react';\n\n/**\n * The ambient viewing conditions — the color scheme and the contrast tier the\n * document is showing right now.\n *\n * This module is the single owner of the definition: it builds the `@dark` /\n * `@hc` predefined states that `src/components/Root.tsx` registers with tasty,\n * *and* it answers the same question in JS. One definition, two readers, so the\n * CSS and the JS answers cannot drift apart.\n *\n * **For styling, do not use this.** `{ '': light, '@dark': dark, '@hc': hc }` is\n * the answer, and branching styles in JS gives up the conditionality that lets a\n * scheme flip repaint without a re-render. Two cases the state map cannot serve:\n *\n * 1. **Surfaces the stylesheet does not reach** — a Vega spec, a CodeMirror or\n *    Monaco theme, a third-party iframe. They take values, not CSS, so `@dark`\n *    never applies and the branch has to happen in JS.\n * 2. **Control state that is not styling** — seeding or labelling a control from\n *    the ambient condition, e.g. a Light/Dark or Normal/High-contrast preview\n *    selector that starts on whatever the page is already showing.\n *\n * Root-level only, and deliberately not a generic state reader: tasty's state\n * vocabulary mixes element-local states (`hovered`, `pressed`, `disabled`) with\n * ambient ones (`@media(…)`, `@root(…)`), and only the ambient half is\n * answerable without an element. Evaluating the state language in JS would mean\n * a second implementation of the state algebra to keep in agreement with the CSS\n * one, for a question almost every caller asks about the root anyway.\n */\n\n// ============================================================================\n// The definition\n// ============================================================================\n\n/**\n * The `data-*` attribute names the opt-in uses, and the media queries it falls\n * back to. `@root(scheme=dark)` compiles to `:root[data-scheme=\"dark\"]`, hence\n * the `data-` prefix on the DOM side and the bare key on the tasty side.\n */\nconst SCHEME_KEY = 'scheme';\nconst CONTRAST_KEY = 'contrast';\nconst SCHEME_ATTR = `data-${SCHEME_KEY}`;\nconst CONTRAST_ATTR = `data-${CONTRAST_KEY}`;\nconst DARK_QUERY = '(prefers-color-scheme: dark)';\nconst HIGH_CONTRAST_QUERY = '(prefers-contrast: more)';\n\n/**\n * The `@dark` / `@hc` state aliases, in tasty's DSL — registered globally by\n * `<Root>` via `setGlobalPredefinedStates()`.\n *\n * The attribute opt-in wins over the system preference, and the fallback is\n * gated on the attribute being *absent* (`!@root(scheme)`) rather than on it\n * being some other value — so `<html data-scheme=\"light\">` stays light inside a\n * dark OS, which is the whole point of an opt-in. {@link resolveScheme} and\n * {@link resolveHighContrast} read the same way.\n */\nexport const AMBIENT_PREDEFINED_STATES = {\n  '@dark': `@root(${SCHEME_KEY}=dark) | (!@root(${SCHEME_KEY}) & @media${DARK_QUERY})`,\n  '@hc': `@root(${CONTRAST_KEY}=high) | (!@root(${CONTRAST_KEY}) & @media${HIGH_CONTRAST_QUERY})`,\n} as const;\n\n/** The color scheme the document resolves to — the two arms of the `@dark` state. */\nexport type ColorScheme = 'light' | 'dark';\n\n// ============================================================================\n// Reading\n// ============================================================================\n\n/**\n * `matchMedia` is called per read rather than cached, so a test that stubs it\n * takes effect immediately. Missing (older jsdom, non-DOM runtimes) reads as\n * \"no preference\", which lands on the light / normal-contrast defaults.\n */\nfunction mediaMatches(query: string): boolean {\n  return typeof window !== 'undefined' &&\n    typeof window.matchMedia === 'function'\n    ? window.matchMedia(query).matches\n    : false;\n}\n\nfunction rootAttribute(name: string): string | null {\n  return typeof document === 'undefined'\n    ? null\n    : document.documentElement.getAttribute(name);\n}\n\n/**\n * The document's current color scheme, read once — the JS answer to `@dark`.\n *\n * Outside React (a chart spec built in a module, an editor theme registered at\n * import time). In React use {@link useScheme}, which also re-renders on change.\n * Returns `'light'` with no DOM.\n */\nexport function resolveScheme(): ColorScheme {\n  const attribute = rootAttribute(SCHEME_ATTR);\n\n  if (attribute !== null) {\n    return attribute === 'dark' ? 'dark' : 'light';\n  }\n\n  return mediaMatches(DARK_QUERY) ? 'dark' : 'light';\n}\n\n/**\n * Whether the document is showing the high-contrast tier, read once — the JS\n * answer to `@hc`.\n *\n * Note this is an *ambient* condition, not the theme's `contrastLevel`: the\n * level is a `PaletteConfig` seed the app supplies (read it with\n * `getPaletteConfig()`), while this is the tier the viewer asked for.\n * Returns `false` with no DOM.\n */\nexport function resolveHighContrast(): boolean {\n  const attribute = rootAttribute(CONTRAST_ATTR);\n\n  if (attribute !== null) {\n    return attribute === 'high';\n  }\n\n  return mediaMatches(HIGH_CONTRAST_QUERY);\n}\n\n// ============================================================================\n// Watching\n// ============================================================================\n\nconst listeners = new Set<() => void>();\n\nlet stopWatching: (() => void) | null = null;\n\nfunction notify() {\n  listeners.forEach((listener) => listener());\n}\n\n/**\n * Both inputs have to be watched, because either can decide the answer: the\n * attribute when the opt-in is set, the media query otherwise — an attribute flip\n * is invisible to `matchMedia` and a system flip is invisible to a\n * `MutationObserver`. One observer and one pair of query listeners are shared by\n * every subscriber, and torn down when the last one leaves.\n */\nfunction startWatching(): () => void {\n  if (typeof document === 'undefined') {\n    return () => {};\n  }\n\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 (\n    typeof window !== 'undefined' &&\n    typeof window.matchMedia === 'function'\n  ) {\n    for (const query of [DARK_QUERY, HIGH_CONTRAST_QUERY]) {\n      const list = window.matchMedia(query);\n\n      if (typeof list?.addEventListener !== 'function') continue;\n\n      list.addEventListener('change', notify);\n      teardowns.push(() => list.removeEventListener('change', notify));\n    }\n  }\n\n  if (typeof MutationObserver === 'function' && document.documentElement) {\n    const observer = new MutationObserver(notify);\n\n    observer.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: [SCHEME_ATTR, CONTRAST_ATTR],\n    });\n\n    teardowns.push(() => observer.disconnect());\n  }\n\n  return () => teardowns.forEach((teardown) => teardown());\n}\n\n/**\n * Subscribe to ambient condition changes — either the scheme or the contrast\n * tier. Returns an unsubscribe function.\n *\n * The listener takes no argument: re-read with {@link resolveScheme} /\n * {@link resolveHighContrast}, which is what the hooks below do. For non-React\n * consumers that own a surface the stylesheet cannot reach — re-theming a Monaco\n * instance, re-rendering a chart.\n */\nexport function subscribeScheme(listener: () => void): () => void {\n  listeners.add(listener);\n\n  if (!stopWatching) {\n    stopWatching = startWatching();\n  }\n\n  return () => {\n    listeners.delete(listener);\n\n    if (!listeners.size && stopWatching) {\n      stopWatching();\n      stopWatching = null;\n    }\n  };\n}\n\n// ============================================================================\n// React bindings\n// ============================================================================\n\n/**\n * Snapshots are primitives, so React bails out on an unchanged value and no\n * memoization is needed — a contrast change re-runs a `useScheme()` reader's\n * `getSnapshot` and stops there.\n */\nconst getServerScheme = (): ColorScheme => 'light';\nconst getServerHighContrast = () => false;\n\n/**\n * The document's color scheme, kept live — `'light'` or `'dark'`.\n *\n * ```tsx\n * const scheme = useScheme();\n *\n * <VegaChart spec={useMemo(() => buildSpec(scheme), [scheme])} />;\n * ```\n *\n * Follows both the `<html data-scheme>` opt-in and `prefers-color-scheme`,\n * exactly as the `@dark` state does. Under SSR it renders `'light'` and\n * re-renders with the real value after hydration.\n */\nexport function useScheme(): ColorScheme {\n  return useSyncExternalStore(subscribeScheme, resolveScheme, getServerScheme);\n}\n\n/**\n * Whether the document is showing the high-contrast tier, kept live — the hook\n * form of {@link resolveHighContrast}, following `<html data-contrast>` and\n * `prefers-contrast` exactly as the `@hc` state does.\n *\n * Under SSR it renders `false` and re-renders with the real value after\n * hydration.\n */\nexport function useHighContrast(): boolean {\n  return useSyncExternalStore(\n    subscribeScheme,\n    resolveHighContrast,\n    getServerHighContrast,\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuCA,MAAMC,aAAa;AACnB,MAAMC,eAAe;AACrB,MAAMC,cAAc,QAAQF;AAC5B,MAAMG,gBAAgB,QAAQF;AAC9B,MAAMG,aAAa;AACnB,MAAMC,sBAAsB;;;;;;;;;;;AAY5B,MAAaC,4BAA4B;CACvC,SAAS,SAASN,WAAU,mBAAoBA,WAAU,YAAaI,WAAU;CACjF,OAAO,SAASH,aAAY,mBAAoBA,aAAY,YAAaI,oBAAmB;AAC9F;;;;;;AAcA,SAASI,aAAaC,OAAwB;CAC5C,OAAO,OAAOC,WAAW,eACvB,OAAOA,OAAOC,eAAe,aAC3BD,OAAOC,WAAWF,KAAK,CAAC,CAACG,UACzB;AACN;AAEA,SAASC,cAAcC,MAA6B;CAClD,OAAO,OAAOC,aAAa,cACvB,OACAA,SAASC,gBAAgBC,aAAaH,IAAI;AAChD;;;;;;;;AASA,SAAgBI,gBAA6B;CAC3C,MAAMC,YAAYN,cAAcZ,WAAW;CAE3C,IAAIkB,cAAc,MAChB,OAAOA,cAAc,SAAS,SAAS;CAGzC,OAAOX,aAAaL,UAAU,IAAI,SAAS;AAC7C;;;;;;;;;;AAWA,SAAgBiB,sBAA+B;CAC7C,MAAMD,YAAYN,cAAcX,aAAa;CAE7C,IAAIiB,cAAc,MAChB,OAAOA,cAAc;CAGvB,OAAOX,aAAaJ,mBAAmB;AACzC;AAMA,MAAMiB,4BAAY,IAAIC,IAAgB;AAEtC,IAAIC,eAAoC;AAExC,SAASC,SAAS;CAChBH,UAAUI,SAASC,aAAaA,SAAS,CAAC;AAC5C;;;;;;;;AASA,SAASC,gBAA4B;CACnC,IAAI,OAAOZ,aAAa,aACtB,aAAa,CAAC;CAGhB,MAAMa,YAA4B,CAAA;CAMlC,IACE,OAAOlB,WAAW,eAClB,OAAOA,OAAOC,eAAe,YAE7B,KAAK,MAAMF,SAAS,CAACN,YAAYC,mBAAmB,GAAG;EACrD,MAAMyB,OAAOnB,OAAOC,WAAWF,KAAK;EAEpC,IAAI,OAAOoB,MAAMC,qBAAqB,YAAY;EAElDD,KAAKC,iBAAiB,UAAUN,MAAM;EACtCI,UAAUG,WAAWF,KAAKG,oBAAoB,UAAUR,MAAM,CAAC;CACjE;CAGF,IAAI,OAAOS,qBAAqB,cAAclB,SAASC,iBAAiB;EACtE,MAAMkB,WAAW,IAAID,iBAAiBT,MAAM;EAE5CU,SAASC,QAAQpB,SAASC,iBAAiB;GACzCoB,YAAY;GACZC,iBAAiB,CAACpC,aAAaC,aAAa;EAC9C,CAAC;EAED0B,UAAUG,WAAWG,SAASI,WAAW,CAAC;CAC5C;CAEA,aAAaV,UAAUH,SAASc,aAAaA,SAAS,CAAC;AACzD;;;;;;;;;;AAWA,SAAgBC,gBAAgBd,UAAkC;CAChEL,UAAUoB,IAAIf,QAAQ;CAEtB,IAAI,CAACH,cACHA,eAAeI,cAAc;CAG/B,aAAa;EACXN,UAAUqB,OAAOhB,QAAQ;EAEzB,IAAI,CAACL,UAAUsB,QAAQpB,cAAc;GACnCA,aAAa;GACbA,eAAe;EACjB;CACF;AACF;;;;;;AAWA,MAAMqB,wBAAqC;AAC3C,MAAMC,8BAA8B;;;;;;;;;;;;;;AAepC,SAAOC,YAAA;CAAA,OACEhD,qBAAqB0C,iBAAiBtB,eAAe0B,eAAe;AAAC;;;;;;;;;AAW9E,SAAOG,kBAAA;CAAA,OACEjD,qBACL0C,iBACApB,qBACAyB,qBACF;AAAC"}
+{"version":3,"file":"useScheme.js","names":["useSyncExternalStore","SCHEME_KEY","CONTRAST_KEY","SCHEME_ATTR","CONTRAST_ATTR","DARK_QUERY","HIGH_CONTRAST_QUERY","REDUCED_MOTION_QUERY","AMBIENT_PREDEFINED_STATES","const","ColorScheme","mediaMatches","query","window","matchMedia","matches","rootAttribute","name","document","documentElement","getAttribute","resolveScheme","attribute","resolveHighContrast","listeners","Set","stopWatching","notify","forEach","listener","startWatching","teardowns","list","addEventListener","push","removeEventListener","MutationObserver","observer","observe","attributes","attributeFilter","disconnect","teardown","subscribeScheme","add","delete","size","getServerScheme","getServerHighContrast","useScheme","useHighContrast"],"sources":["../../../src/utils/react/useScheme.ts"],"sourcesContent":["import { useSyncExternalStore } from 'react';\n\n/**\n * The ambient viewing conditions — the color scheme and the contrast tier the\n * document is showing right now.\n *\n * This module is the single owner of the definition: it builds the `@dark` /\n * `@hc` predefined states that `src/components/Root.tsx` registers with tasty,\n * *and* it answers the same question in JS. One definition, two readers, so the\n * CSS and the JS answers cannot drift apart.\n *\n * **For styling, do not use this.** `{ '': light, '@dark': dark, '@hc': hc }` is\n * the answer, and branching styles in JS gives up the conditionality that lets a\n * scheme flip repaint without a re-render. Two cases the state map cannot serve:\n *\n * 1. **Surfaces the stylesheet does not reach** — a Vega spec, a CodeMirror or\n *    Monaco theme, a third-party iframe. They take values, not CSS, so `@dark`\n *    never applies and the branch has to happen in JS.\n * 2. **Control state that is not styling** — seeding or labelling a control from\n *    the ambient condition, e.g. a Light/Dark or Normal/High-contrast preview\n *    selector that starts on whatever the page is already showing.\n *\n * Root-level only, and deliberately not a generic state reader: tasty's state\n * vocabulary mixes element-local states (`hovered`, `pressed`, `disabled`) with\n * ambient ones (`@media(…)`, `@root(…)`), and only the ambient half is\n * answerable without an element. Evaluating the state language in JS would mean\n * a second implementation of the state algebra to keep in agreement with the CSS\n * one, for a question almost every caller asks about the root anyway.\n */\n\n// ============================================================================\n// The definition\n// ============================================================================\n\n/**\n * The `data-*` attribute names the opt-in uses, and the media queries it falls\n * back to. `@root(scheme=dark)` compiles to `:root[data-scheme=\"dark\"]`, hence\n * the `data-` prefix on the DOM side and the bare key on the tasty side.\n */\nconst SCHEME_KEY = 'scheme';\nconst CONTRAST_KEY = 'contrast';\nconst SCHEME_ATTR = `data-${SCHEME_KEY}`;\nconst CONTRAST_ATTR = `data-${CONTRAST_KEY}`;\nconst DARK_QUERY = '(prefers-color-scheme: dark)';\nconst HIGH_CONTRAST_QUERY = '(prefers-contrast: more)';\nconst REDUCED_MOTION_QUERY = '(prefers-reduced-motion: reduce)';\n\n/**\n * The `@dark` / `@hc` / `@reduced-motion` state aliases, in tasty's DSL —\n * registered globally by `<Root>` via `setGlobalPredefinedStates()`.\n *\n * `@reduced-motion` follows the system preference alone. For the two schemes,\n * the attribute opt-in wins over the system preference, and the fallback is\n * gated on the attribute being *absent* (`!@root(scheme)`) rather than on it\n * being some other value — so `<html data-scheme=\"light\">` stays light inside a\n * dark OS, which is the whole point of an opt-in. {@link resolveScheme} and\n * {@link resolveHighContrast} read the same way.\n */\nexport const AMBIENT_PREDEFINED_STATES = {\n  '@dark': `@root(${SCHEME_KEY}=dark) | (!@root(${SCHEME_KEY}) & @media${DARK_QUERY})`,\n  '@hc': `@root(${CONTRAST_KEY}=high) | (!@root(${CONTRAST_KEY}) & @media${HIGH_CONTRAST_QUERY})`,\n  '@reduced-motion': `@media${REDUCED_MOTION_QUERY}`,\n} as const;\n\n/** The color scheme the document resolves to — the two arms of the `@dark` state. */\nexport type ColorScheme = 'light' | 'dark';\n\n// ============================================================================\n// Reading\n// ============================================================================\n\n/**\n * `matchMedia` is called per read rather than cached, so a test that stubs it\n * takes effect immediately. Missing (older jsdom, non-DOM runtimes) reads as\n * \"no preference\", which lands on the light / normal-contrast defaults.\n */\nfunction mediaMatches(query: string): boolean {\n  return typeof window !== 'undefined' &&\n    typeof window.matchMedia === 'function'\n    ? window.matchMedia(query).matches\n    : false;\n}\n\nfunction rootAttribute(name: string): string | null {\n  return typeof document === 'undefined'\n    ? null\n    : document.documentElement.getAttribute(name);\n}\n\n/**\n * The document's current color scheme, read once — the JS answer to `@dark`.\n *\n * Outside React (a chart spec built in a module, an editor theme registered at\n * import time). In React use {@link useScheme}, which also re-renders on change.\n * Returns `'light'` with no DOM.\n */\nexport function resolveScheme(): ColorScheme {\n  const attribute = rootAttribute(SCHEME_ATTR);\n\n  if (attribute !== null) {\n    return attribute === 'dark' ? 'dark' : 'light';\n  }\n\n  return mediaMatches(DARK_QUERY) ? 'dark' : 'light';\n}\n\n/**\n * Whether the document is showing the high-contrast tier, read once — the JS\n * answer to `@hc`.\n *\n * Note this is an *ambient* condition, not the theme's `contrastLevel`: the\n * level is a `PaletteConfig` seed the app supplies (read it with\n * `getPaletteConfig()`), while this is the tier the viewer asked for.\n * Returns `false` with no DOM.\n */\nexport function resolveHighContrast(): boolean {\n  const attribute = rootAttribute(CONTRAST_ATTR);\n\n  if (attribute !== null) {\n    return attribute === 'high';\n  }\n\n  return mediaMatches(HIGH_CONTRAST_QUERY);\n}\n\n// ============================================================================\n// Watching\n// ============================================================================\n\nconst listeners = new Set<() => void>();\n\nlet stopWatching: (() => void) | null = null;\n\nfunction notify() {\n  listeners.forEach((listener) => listener());\n}\n\n/**\n * Both inputs have to be watched, because either can decide the answer: the\n * attribute when the opt-in is set, the media query otherwise — an attribute flip\n * is invisible to `matchMedia` and a system flip is invisible to a\n * `MutationObserver`. One observer and one pair of query listeners are shared by\n * every subscriber, and torn down when the last one leaves.\n */\nfunction startWatching(): () => void {\n  if (typeof document === 'undefined') {\n    return () => {};\n  }\n\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 (\n    typeof window !== 'undefined' &&\n    typeof window.matchMedia === 'function'\n  ) {\n    for (const query of [DARK_QUERY, HIGH_CONTRAST_QUERY]) {\n      const list = window.matchMedia(query);\n\n      if (typeof list?.addEventListener !== 'function') continue;\n\n      list.addEventListener('change', notify);\n      teardowns.push(() => list.removeEventListener('change', notify));\n    }\n  }\n\n  if (typeof MutationObserver === 'function' && document.documentElement) {\n    const observer = new MutationObserver(notify);\n\n    observer.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: [SCHEME_ATTR, CONTRAST_ATTR],\n    });\n\n    teardowns.push(() => observer.disconnect());\n  }\n\n  return () => teardowns.forEach((teardown) => teardown());\n}\n\n/**\n * Subscribe to ambient condition changes — either the scheme or the contrast\n * tier. Returns an unsubscribe function.\n *\n * The listener takes no argument: re-read with {@link resolveScheme} /\n * {@link resolveHighContrast}, which is what the hooks below do. For non-React\n * consumers that own a surface the stylesheet cannot reach — re-theming a Monaco\n * instance, re-rendering a chart.\n */\nexport function subscribeScheme(listener: () => void): () => void {\n  listeners.add(listener);\n\n  if (!stopWatching) {\n    stopWatching = startWatching();\n  }\n\n  return () => {\n    listeners.delete(listener);\n\n    if (!listeners.size && stopWatching) {\n      stopWatching();\n      stopWatching = null;\n    }\n  };\n}\n\n// ============================================================================\n// React bindings\n// ============================================================================\n\n/**\n * Snapshots are primitives, so React bails out on an unchanged value and no\n * memoization is needed — a contrast change re-runs a `useScheme()` reader's\n * `getSnapshot` and stops there.\n */\nconst getServerScheme = (): ColorScheme => 'light';\nconst getServerHighContrast = () => false;\n\n/**\n * The document's color scheme, kept live — `'light'` or `'dark'`.\n *\n * ```tsx\n * const scheme = useScheme();\n *\n * <VegaChart spec={useMemo(() => buildSpec(scheme), [scheme])} />;\n * ```\n *\n * Follows both the `<html data-scheme>` opt-in and `prefers-color-scheme`,\n * exactly as the `@dark` state does. Under SSR it renders `'light'` and\n * re-renders with the real value after hydration.\n */\nexport function useScheme(): ColorScheme {\n  return useSyncExternalStore(subscribeScheme, resolveScheme, getServerScheme);\n}\n\n/**\n * Whether the document is showing the high-contrast tier, kept live — the hook\n * form of {@link resolveHighContrast}, following `<html data-contrast>` and\n * `prefers-contrast` exactly as the `@hc` state does.\n *\n * Under SSR it renders `false` and re-renders with the real value after\n * hydration.\n */\nexport function useHighContrast(): boolean {\n  return useSyncExternalStore(\n    subscribeScheme,\n    resolveHighContrast,\n    getServerHighContrast,\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuCA,MAAMC,aAAa;AACnB,MAAMC,eAAe;AACrB,MAAMC,cAAc,QAAQF;AAC5B,MAAMG,gBAAgB,QAAQF;AAC9B,MAAMG,aAAa;AACnB,MAAMC,sBAAsB;;;;;;;;;;;;AAc5B,MAAaE,4BAA4B;CACvC,SAAS,SAASP,WAAU,mBAAoBA,WAAU,YAAaI,WAAU;CACjF,OAAO,SAASH,aAAY,mBAAoBA,aAAY,YAAaI,oBAAmB;CAC5F,mBAAmB;AACrB;;;;;;AAcA,SAASK,aAAaC,OAAwB;CAC5C,OAAO,OAAOC,WAAW,eACvB,OAAOA,OAAOC,eAAe,aAC3BD,OAAOC,WAAWF,KAAK,CAAC,CAACG,UACzB;AACN;AAEA,SAASC,cAAcC,MAA6B;CAClD,OAAO,OAAOC,aAAa,cACvB,OACAA,SAASC,gBAAgBC,aAAaH,IAAI;AAChD;;;;;;;;AASA,SAAgBI,gBAA6B;CAC3C,MAAMC,YAAYN,cAAcb,WAAW;CAE3C,IAAImB,cAAc,MAChB,OAAOA,cAAc,SAAS,SAAS;CAGzC,OAAOX,aAAaN,UAAU,IAAI,SAAS;AAC7C;;;;;;;;;;AAWA,SAAgBkB,sBAA+B;CAC7C,MAAMD,YAAYN,cAAcZ,aAAa;CAE7C,IAAIkB,cAAc,MAChB,OAAOA,cAAc;CAGvB,OAAOX,aAAaL,mBAAmB;AACzC;AAMA,MAAMkB,4BAAY,IAAIC,IAAgB;AAEtC,IAAIC,eAAoC;AAExC,SAASC,SAAS;CAChBH,UAAUI,SAASC,aAAaA,SAAS,CAAC;AAC5C;;;;;;;;AASA,SAASC,gBAA4B;CACnC,IAAI,OAAOZ,aAAa,aACtB,aAAa,CAAC;CAGhB,MAAMa,YAA4B,CAAA;CAMlC,IACE,OAAOlB,WAAW,eAClB,OAAOA,OAAOC,eAAe,YAE7B,KAAK,MAAMF,SAAS,CAACP,YAAYC,mBAAmB,GAAG;EACrD,MAAM0B,OAAOnB,OAAOC,WAAWF,KAAK;EAEpC,IAAI,OAAOoB,MAAMC,qBAAqB,YAAY;EAElDD,KAAKC,iBAAiB,UAAUN,MAAM;EACtCI,UAAUG,WAAWF,KAAKG,oBAAoB,UAAUR,MAAM,CAAC;CACjE;CAGF,IAAI,OAAOS,qBAAqB,cAAclB,SAASC,iBAAiB;EACtE,MAAMkB,WAAW,IAAID,iBAAiBT,MAAM;EAE5CU,SAASC,QAAQpB,SAASC,iBAAiB;GACzCoB,YAAY;GACZC,iBAAiB,CAACrC,aAAaC,aAAa;EAC9C,CAAC;EAED2B,UAAUG,WAAWG,SAASI,WAAW,CAAC;CAC5C;CAEA,aAAaV,UAAUH,SAASc,aAAaA,SAAS,CAAC;AACzD;;;;;;;;;;AAWA,SAAgBC,gBAAgBd,UAAkC;CAChEL,UAAUoB,IAAIf,QAAQ;CAEtB,IAAI,CAACH,cACHA,eAAeI,cAAc;CAG/B,aAAa;EACXN,UAAUqB,OAAOhB,QAAQ;EAEzB,IAAI,CAACL,UAAUsB,QAAQpB,cAAc;GACnCA,aAAa;GACbA,eAAe;EACjB;CACF;AACF;;;;;;AAWA,MAAMqB,wBAAqC;AAC3C,MAAMC,8BAA8B;;;;;;;;;;;;;;AAepC,SAAOC,YAAA;CAAA,OACEjD,qBAAqB2C,iBAAiBtB,eAAe0B,eAAe;AAAC;;;;;;;;;AAW9E,SAAOG,kBAAA;CAAA,OACElD,qBACL2C,iBACApB,qBACAyB,qBACF;AAAC"}

package/dist/utils/react/useViewportSize.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.205.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.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.205.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.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.205.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.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.205.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.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.205.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.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.205.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.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.205.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.0 | Cube Dev Team */
 //#region src/version.ts
-const VERSION = "0.205.0";
-const TASTY_VERSION = "3.15.0";
+const VERSION = "0.206.0";
+const TASTY_VERSION = "3.17.1";
 if (typeof window !== "undefined") {
 	const version = VERSION;
 	const tastyVersion = TASTY_VERSION;

package/docs/Theming.md

@@ -451,7 +451,7 @@ invalidatePaletteTokens(); // only needed once the kit is already mounted
 
 `contrastLevel` is the one field the kit writes to Glaze's global config, and it only ever does so if you asked for a level. A host that sets its own `glaze.configure({ contrastLevel })` and never passes `contrastLevel` here keeps it.
 
-**Some things are not tunable at all.** Tasty locks its configuration on the first style injection, so the `@dark` / `@hc` state definitions (set in `Root`) are fixed for the lifetime of the page. Only token _values_ stay mutable — which is all re-seeding needs.
+**Some things are not tunable at all.** Tasty locks its configuration on the first style injection, so the `@dark` / `@hc` / `@reduced-motion` state definitions (set in `Root`) are fixed for the lifetime of the page. Only token _values_ stay mutable — which is all re-seeding needs.
 
 ## See also
 

package/docs/Usage.md

@@ -447,6 +447,17 @@ An intended override takes a disable comment with its reason on the line before
 
 With this rule on, `tasty/no-styles-prop` can stay off, so the primitives keep their `styles`.
 
+The same `extends` gives the plugin's other rules the names UI Kit defines: its tokens, presets and recipes, and the `@dark`, `@hc` and `@reduced-motion` state aliases. `tasty/valid-color-token`, `tasty/valid-custom-property`, `tasty/valid-preset`, `tasty/valid-recipe`, `tasty/valid-state-key` and `tasty/no-unknown-state-alias` then report only names that don't exist. List what your app defines itself, in its own `configure()` or `tokens`, in its own config, which adds to the lists it extends:
+
+```ts
+// tasty.config.ts
+export default {
+  extends: '@cube-dev/ui-kit',
+  states: ['@mobile'],
+  tokens: ['#brand'],
+};
+```
+
 ## Recipes
 
 Reusable style presets applied via the `recipe` style property. Defined in `src/components/Root.tsx`.
@@ -499,6 +510,21 @@ fill: {
 }
 ```
 
+### Reduced Motion
+
+`<Root>` registers a global `@reduced-motion` state beside [`@dark` and `@hc`](#color-schemes). It matches `@media (prefers-reduced-motion: reduce)`. Use it to stop or shorten motion for users who ask for less:
+
+```tsx
+const Spinner = tasty({
+  styles: {
+    animation: 'spin 1s linear infinite',
+    animationPlayState: { '': 'running', '@reduced-motion': 'paused' },
+  },
+});
+```
+
+It follows the system preference alone, with no attribute opt-in.
+
 ## Icons
 
 Icons live in `src/icons/`. Use existing icons when possible; otherwise use `@tabler/icons-react`.

package/docs/components/content/Item.md

@@ -399,7 +399,7 @@ By default, Item shows an auto tooltip when content overflows. The label and a s
 - `string` - Shows tooltip with the specified text (always visible, not auto)
 - `object` - Advanced configuration:
   - `title?: string` - Custom tooltip text (when provided, always shows tooltip unless `auto: true`)
-  - `auto?: boolean` - Enable/disable auto overflow behavior (defaults to `true` when no `title` is provided)
+  - `auto?: boolean` - Enable/disable auto overflow behavior (defaults to `true` when no `title` is provided). The automatic tooltip measures only a string label or description, because it shows the text that is cut off. With a `title`, `auto: true` measures a label or description of any kind, an element one included, and shows the `title` only while one of them is cut off. Only their own boxes are measured, so a child that clips its own text doesn't count. The check reruns when they resize or the `title` text changes, so derive a string `title` from the same text.
   - `placement?: string` - Tooltip position (top, bottom, left, right, etc.)
   - Plus other [TooltipProvider props](../overlays/Tooltip.md)
 

package/docs/components/content/TextItem.md

@@ -20,7 +20,7 @@ TextItem renders one line truncated with an ellipsis, so Text's `ellipsis` and `
 - **`highlight`** `string` — String to highlight within children (only works when children is a plain string)
 - **`highlightCaseSensitive`** `boolean` (default: `false`) — Whether highlight matching is case-sensitive
 - **`highlightStyles`** `Styles` — Custom styles for highlighted text portions
-- **`tooltip`** `string | boolean | TooltipProviderProps` (default: `true`) — Tooltip configuration. `true` enables auto tooltip on overflow, a string shows fixed tooltip text, an object supports advanced configuration.
+- **`tooltip`** `string | boolean | TooltipProviderProps` (default: `true`) — Tooltip configuration. `true` enables auto tooltip on overflow for string children, a string shows fixed tooltip text, an object supports advanced configuration. `{ title, auto: true }` shows `title` only on overflow, for any children (see [Overflow Tooltip for an Element Label](#overflow-tooltip-for-an-element-label)).
 - **`tooltipPlacement`** `Placement` (default: `top`) — Default tooltip placement
 - **`monospace`** `boolean` — Use monospace font
 - **`italic`** `string` — Font style (e.g. `'italic'`)
@@ -66,6 +66,18 @@ When text overflows its container, hovering reveals a tooltip with the full cont
 </Block>
 ```
 
+### Overflow Tooltip for an Element Label
+
+The automatic tooltip shows the text that is cut off, so it needs string children. When the label is built from elements, such as a commit hash coloured apart from its message, give the tooltip its own `title` with `auto: true`. It then shows only while the label is cut off:
+
+```jsx
+<TextItem tooltip={{ title: `${hash}: ${message}`, auto: true }}>
+  <Text color="#dark">{hash}:</Text> {message}
+</TextItem>
+```
+
+Only the label's own box is measured. A child that clips its own text, such as a nested `Text` with its own `ellipsis`, never makes the label overflow, so it shows no tooltip. The check reruns when the label resizes or the `title` text changes, so derive a string `title` from the same text as the label.
+
 ### Text Highlighting
 
 Highlight matching text within the content - useful for search results:

package/docs/components/data/ItemTable.md

@@ -215,7 +215,7 @@ const Compact = tasty(ItemTable, {
 });
 ```
 
-Rows publish their paint as inherited custom properties — `#row-base`, `#row-overlay`, `$row-overlay-weight`, `#row-text` and `$dim` — which cells consume. `#row-overlay` is an opaque color that cells mix into `#row-base` at `$row-overlay-weight` (a percentage), so each cell paints one solid background color. That is what lets a pinned (and therefore opaque) cell match its row's state without duplicating the state matrix.
+Rows publish their paint as inherited custom properties — `#row-base`, `#row-overlay`, `$row-overlay-weight`, `#row-text` and `$dim` — which cells consume. `#row-overlay` is an opaque color that cells layer over `#row-base` at `$row-overlay-weight`, a number from 0 to 1 read as its opacity (`#row-base+#row-overlay.$row-overlay-weight`), so each cell paints one solid background color. That is what lets a pinned (and therefore opaque) cell match its row's state without duplicating the state matrix.
 
 Geometry runs through tokens too: `$row-height`, `$header-height`, `$cell-padding-x` (16px) and `$cell-padding-y`. Height lives on the **cells**, not the `<tr>` — table layout ignores `min-height` on a row and sizes it from its cells instead.
 

package/docs/components/fields/RadioGroup.md

@@ -100,6 +100,7 @@ The `mods` property accepts the following modifiers you can override:
 
 - **`horizontal`** `boolean` — Whether the radio group is oriented horizontally
 - **`tabs`** `boolean` — Whether the radio group uses tabs styling
+- **`segmented`** `boolean` — Set with `tabs`: the segmented control look, shared with `Tabs type="radio"`, applies to it. Each `Radio` in the group carries it too
 - **`inside-form`** `boolean` — Whether the radio group is inside a form field
 - **`side-label`** `boolean` — Whether the label is positioned at the side
 - **`fill-width`** `boolean` — Set when the group's style props size its field's width (`width`, `inlineSize`, `flex*`); the group then fills it
@@ -112,7 +113,7 @@ Each `Radio` carries **`readonly`** while its group is `isReadOnly`. A classic r
 
 - `radio` - Traditional radio button appearance (default)
 - `button` - Button-style radio options with spacing
-- `tabs` - Connected tab-style buttons (compact, clear styling)
+- `tabs` - A segmented control. It takes the look of [Tabs](../navigation/Tabs.md) `type="radio"` from one shared style definition: the track, the white chip on the selected option, hover, the keyboard focus ring on the focused option, the disabled look (the selected chip stays, the labels fade) and the text size. Recolor it through the tokens [Tabs → Theming](../navigation/Tabs.md#theming) lists. An invalid or valid group also tints its idle labels. Only the layout differs: its options size to their labels, while tabs share the track equally.
 
 **Default Orientation:**
 
@@ -141,10 +142,10 @@ Controls the size of all radio buttons in the group:
 
 **Size Mapping in Tabs Mode:** When `type="tabs"`, sizes are automatically mapped to maintain visual consistency:
 
-- `large` → `medium`
-- every other size → `xsmall`
+- `large` → `medium` (a 40px control, t3m text)
+- every other size → `xsmall` (a 32px control, t4 text)
 
-Only `large` is carried through; `xsmall`, `small`, `medium` and `xlarge` all collapse to `xsmall`. This ensures tab groups remain compact and cohesive.
+Only `large` is carried through; `xsmall`, `small`, `medium` and `xlarge` all collapse to `xsmall`. These are the sizes `Tabs type="radio"` uses, so the two controls match at either size.
 
 ### Button Type
 

package/docs/components/navigation/Tabs.md

@@ -85,6 +85,7 @@ These properties allow direct style application without using the `styles` prop:
 The `mods` property accepts the following modifiers:
 
 - **`type`** `'default' \| 'narrow' \| 'file' \| 'radio'` — Current tab type
+- **`segmented`** `boolean` — True for the `radio` type, the segmented control it shares with `Radio.Tabs`
 - **`placement`** `'top' \| 'bottom' \| 'left' \| 'right'` — Current bar placement
 - **`deletable`** `boolean` — True when onDelete callback is provided
 - **`scrolling`** `boolean` — True when tabs are being scrolled
@@ -95,6 +96,7 @@ The `mods` property accepts the following modifiers:
 For individual tabs:
 
 - **`type`** `'default' \| 'narrow' \| 'file' \| 'radio'` — Current tab type
+- **`segmented`** `boolean` — True for a `radio` tab, a segment of the shared segmented control
 - **`active`** `boolean` — True when the tab is selected
 - **`deletable`** `boolean` — True when delete button is visible
 - **`disabled`** `boolean` — True when tab is disabled
@@ -159,16 +161,16 @@ A navigation strip with no panels, themed with your own tokens:
 - `default` - Standard tabs with selection indicator below (default)
 - `narrow` - Same as default but with collapsed horizontal label padding for compact layouts
 - `file` - File-style tabs with border bottom highlight on selection, delimiter between tabs
-- `radio` - Radio button style for tab selection. This is the right choice for a compact switcher that is _not_ a form field — a view toolbar, a segmented control over page content. [`Radio.Tabs`](../fields/RadioGroup.md) looks the same but is a form control, so keep it for choices inside a `Form`
+- `radio` - Radio button style for tab selection. This is the right choice for a compact switcher that is _not_ a form field — a view toolbar, a segmented control over page content. [`Radio.Tabs`](../fields/RadioGroup.md) takes the same segmented look from one shared style definition (only the layout differs: its options size to their labels, while tabs share the track equally), but it is a form control, so keep it for choices inside a `Form`
 
 ### Sizes
 
 - `xsmall` - Extra small size with t4 typography
-- `small` - Small size with t3m typography (default)
+- `small` - Small size with t3m typography
 - `medium` - Default size with t3m typography
 - `large` - Larger tabs with t3m typography
 
-**Note:** Radio type supports `large` (default, 40px total) and `medium` (32px total) sizes, mapped to Item button sizes `medium` (32px) and `xsmall` (24px) respectively. A radio tab given less room than its title (an explicit `width`, say) truncates the title and shows it in a tooltip.
+**Note:** Radio type supports `medium` (default, 32px total) and `large` (40px total) sizes, mapped to Item button sizes `xsmall` (24px, t4 text) and `medium` (32px, t3m text) respectively. `Radio.Tabs` maps its sizes the same way. A radio tab given less room than its title (an explicit `width`, say) truncates the title and shows it in a tooltip.
 
 ### Placement / Vertical Tabs