@cube-dev/ui-kit 0.204.0 → 0.206.0

package/dist/tokens/all-tokens.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.204.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.0 | Cube Dev Team */
 import { getPaletteVersion } from "./palette-config.js";
 import { BASE_TOKENS } from "./base.js";
 import { lazyStyles } from "./lazy-styles.js";

package/dist/tokens/base.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.204.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.0 | Cube Dev Team */
 //#region src/tokens/base.ts
 /**
 * Base design system tokens.

package/dist/tokens/color-seed.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.204.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.0 | Cube Dev Team */
 import { glaze } from "@tenphi/glaze";
 //#region src/tokens/color-seed.ts
 /**

package/dist/tokens/color-theme.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.204.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.0 | Cube Dev Team */
 import { colorSeed } from "./color-seed.js";
 import { DEFAULT_HUE, getPaletteConfig, getPaletteVersion, usePaletteValue } from "./palette-config.js";
 import { tintRecipe } from "./palette.js";

package/dist/tokens/colors.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.204.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.0 | Cube Dev Team */
 import { getPaletteVersion } from "./palette-config.js";
 import { BASE_TOKENS } from "./base.js";
 import { lazyStyles } from "./lazy-styles.js";

package/dist/tokens/layout.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.204.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.0 | Cube Dev Team */
 //#region src/tokens/layout.ts
 /**
 * Layout-related tokens for common UI dimensions.

package/dist/tokens/lazy-styles.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.204.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.0 | Cube Dev Team */
 //#region src/tokens/lazy-styles.ts
 /**
 * Proxy that defers to `factory()` on every property / enumeration access.

package/dist/tokens/legacy-color.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.204.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.0 | Cube Dev Team */
 import { parseSrgbColor } from "../utils/colors.js";
 import { srgbToHex } from "@tenphi/glaze";
 //#region src/tokens/legacy-color.ts

package/dist/tokens/palette-config.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.204.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.0 | Cube Dev Team */
 import { colorSeed } from "./color-seed.js";
 import { c } from "react/compiler-runtime";
 import { useSyncExternalStore } from "react";

package/dist/tokens/palette.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.204.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.0 | Cube Dev Team */
 import { SURFACE_SATURATION_SHARE, getPaletteConfig, getPaletteVersion, resolvePaletteConfig } from "./palette-config.js";
 import { lazyStyles } from "./lazy-styles.js";
 import { apcaContrast, glaze, okhslToLinearSrgb, variantToOkhsl } from "@tenphi/glaze";

package/dist/tokens/resolve.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.204.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.0 | Cube Dev Team */
 import { useLayoutEffect as useLayoutEffect$1 } from "../utils/react/useLayoutEffect.js";
 import { subscribeScheme } from "../utils/react/useScheme.js";
 import { warn } from "../utils/warnings.js";

package/dist/tokens/shadows.js

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

package/dist/tokens/sizes.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.204.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.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.204.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.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.204.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.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.204.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.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.204.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.204.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.204.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.204.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.204.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.204.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.204.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.204.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.204.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.204.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.204.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.204.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.204.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.204.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.204.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.204.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.204.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.204.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.204.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.204.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.204.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.204.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.204.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.204.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.204.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.204.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.204.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.204.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.204.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.204.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.204.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.204.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.204.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.204.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.204.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.204.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.204.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.204.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.204.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.204.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.204.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.204.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.204.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.204.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.0 | Cube Dev Team */
 //#region src/version.ts
-const VERSION = "0.204.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)