@cube-dev/ui-kit 0.0.0-canary-5bbff30 → 0.0.0-canary-604857b

package/dist/utils/ResizeSensor.js

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

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

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

package/dist/utils/modules.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5bbff30 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-604857b | 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.0.0-canary-5bbff30 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-604857b | 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.0.0-canary-5bbff30 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-604857b | 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.0.0-canary-5bbff30 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-604857b | 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.0.0-canary-5bbff30 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-604857b | 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.0.0-canary-5bbff30 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-604857b | Cube Dev Team */
 import { useRef } from "react";
 import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
 

package/dist/utils/react/Slots.js

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

package/dist/utils/react/chain.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5bbff30 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-604857b | 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.0.0-canary-5bbff30 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-604857b | Cube Dev Team */
 //#region src/utils/react/disabledProps.ts
 /**
 * Tags where `disabled` is a real HTML attribute. Browsers refuse to dispatch

package/dist/utils/react/forwardRefWithGenerics.js

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

package/dist/utils/react/index.js

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

package/dist/utils/react/interactions.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5bbff30 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-604857b | Cube Dev Team */
 import { useState } from "react";
 import { useFocus, useFocusVisible } from "react-aria";
 

package/dist/utils/react/isTextOnly.js

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

package/dist/utils/react/mapProps.js

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

package/dist/utils/react/resolveIcon.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5bbff30 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-604857b | 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.0.0-canary-5bbff30 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-604857b | Cube Dev Team */
 import { useEvent } from "../../_internal/hooks/use-event.js";
 import { useSyncExternalStore } from "react";
 

package/dist/utils/react/useBufferedValue.js

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

package/dist/utils/react/useCombinedRefs.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5bbff30 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-604857b | Cube Dev Team */
 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.0.0-canary-5bbff30 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-604857b | Cube Dev Team */
 import { createSharedStore } from "./sharedStore.js";
 import { useEffect } from "react";
 import { useFocusVisible } from "react-aria";

package/dist/utils/react/useEventBus.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5bbff30 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-604857b | Cube Dev Team */
 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.0.0-canary-5bbff30 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-604857b | Cube Dev Team */
 import { useLayoutEffect as useLayoutEffect$1 } from "./useLayoutEffect.js";
 import { useEffect, useRef, useState } from "react";
 import { useSSRSafeId } from "@react-aria/ssr";

package/dist/utils/react/useIsDarwin.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5bbff30 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-604857b | Cube Dev Team */
 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.0.0-canary-5bbff30 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-604857b | Cube Dev Team */
 import { useIsDarwin } from "./useIsDarwin.js";
 import { useMemo } from "react";
 

package/dist/utils/react/useLayoutEffect.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5bbff30 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-604857b | Cube Dev Team */
 import * as React$1 from "react";
 
 //#region src/utils/react/useLayoutEffect.tsx

package/dist/utils/react/useLocalStorage.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5bbff30 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-604857b | Cube Dev Team */
 import { useEvent } from "../../_internal/hooks/use-event.js";
 import { useCallback, useSyncExternalStore } from "react";
 

package/dist/utils/react/useMergeStyles.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5bbff30 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-604857b | Cube Dev Team */
 import { mergeStyles } from "@tenphi/tasty";
 import { useMemo } from "react";
 

package/dist/utils/react/usePopoverSync.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5bbff30 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-604857b | Cube Dev Team */
 import { EventBusContext, useEventBus } from "./useEventBus.js";
 import { useCallback, useContext, useEffect, useRef } from "react";
 

package/dist/utils/react/useQaProps.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5bbff30 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-604857b | Cube Dev Team */
 //#region src/utils/react/useQaProps.ts
 /**
 * Processes QA props.

package/dist/utils/react/useViewportSize.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5bbff30 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-604857b | Cube Dev Team */
 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.0.0-canary-5bbff30 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-604857b | Cube Dev Team */
 import { isValidElement } from "react";
 import { isFragment } from "react-is";
 

package/dist/utils/selection.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5bbff30 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-604857b | 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.0.0-canary-5bbff30 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-604857b | Cube Dev Team */
 //#region src/utils/styles.ts
 /**
 * Split properties into style and non-style properties.

package/dist/utils/tree.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5bbff30 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-604857b | 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.0.0-canary-5bbff30 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-604857b | Cube Dev Team */
 //#region src/utils/warnings.ts
 const SUGGESTED_PROP_MAP = {
 	disabled: "isDisabled",

package/dist/version.js

@@ -1,7 +1,7 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5bbff30 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-604857b | Cube Dev Team */
 //#region src/version.ts
-const VERSION = "0.0.0-canary-5bbff30";
-const TASTY_VERSION = "3.0.2";
+const VERSION = "0.0.0-canary-604857b";
+const TASTY_VERSION = "0.0.0-snapshot.73ab317";
 if (typeof window !== "undefined") {
 	const version = VERSION;
 	const tastyVersion = TASTY_VERSION;

package/docs/tasty/configuration.md

@@ -78,7 +78,7 @@ These docs use `data-schema="dark"` in examples. If your app already standardize
 
 ## Color Space
 
-Controls the CSS color space used for decomposed color token companion variables. When you define `#name` color tokens, tasty generates both `--name-color` (full color) and `--name-color-{suffix}` (decomposed components for alpha composition).
+Controls the CSS color space used for decomposed color token companion variables. When you define `#name` color tokens, tasty generates both `--name-color` (the color) and `--name-color-{suffix}` (its channels, decomposed).
 
 ```jsx
 configure({
@@ -86,13 +86,17 @@ configure({
 });
 ```
 
-| Color Space | Suffix | Components Format | Alpha Syntax |
+| Color Space | Suffix | Components Format | Channel Reference |
 |---|---|---|---|
-| `rgb` | `-rgb` | `255 128 0` | `rgb(var(--name-color-rgb) / .5)` |
-| `hsl` | `-hsl` | `300 100% 25%` | `hsl(var(--name-color-hsl) / .5)` |
-| `oklch` | `-oklch` | `0.42 0.16 328` | `oklch(var(--name-color-oklch) / .5)` |
+| `rgb` | `-rgb` | `255 128 0` | `rgb(var(--name-color-rgb))` |
+| `hsl` | `-hsl` | `300 100% 25%` | `hsl(var(--name-color-hsl))` |
+| `oklch` | `-oklch` | `0.42 0.16 328` | `oklch(var(--name-color-oklch))` |
 
-The `oklch` color space is the default because it provides perceptually uniform color manipulation — alpha fading and color mixing produce more natural-looking results.
+The `oklch` color space is the default because it provides perceptually uniform color manipulation — reaching for a channel to shift lightness or hue produces more natural-looking results.
+
+The companion is there so you can *address the channels*: shift a lightness, animate a hue, build a derived color. It is not how the [opacity suffix](dsl.md#color-tokens--opacity) works — that sets the alpha on `--name-color` itself with relative color syntax, so it needs nothing from the companion and works on any color.
+
+A color the engine cannot evaluate at build time — a `color-mix()`, a `light-dark()`, a `color()` in a space it has no conversion for — has no channels to decompose, so its companion is expressed *by reference* using CSS relative color syntax (`--name-color-oklch: from color-mix(…) l c h`). Reading a channel off it still works; the browser resolves them.
 
 ---
 

package/docs/tasty/dsl.md

@@ -111,7 +111,7 @@ const List = tasty({
 Named color prefixed with `#` that maps to CSS custom properties. Supports opacity with `.N` suffix:
 
 ```jsx
-fill: '#purple.5'  // → var(--purple-color) with 50% opacity
+fill: '#purple.5'  // → oklch(from var(--purple-color) l c h / .5)
 ```
 
 ### Modifier
@@ -133,11 +133,108 @@ Modifiers can also be exposed as top-level component props via `modProps` — se
 color: '#purple',           // Full opacity
 color: '#purple.5',         // 50% opacity
 color: '#purple.05',        // 5% opacity
+color: '#purple.$fade',     // Opacity from a custom property
 fill: '#current',           // → currentcolor
-fill: '#current.5',         // → color-mix(in oklab, currentcolor 50%, transparent)
 color: '(#primary, #secondary)',  // Fallback syntax
 ```
 
+The suffix sets the alpha on the token's color with CSS relative color syntax:
+
+```jsx
+fill: '#purple.5';
+// → oklch(from var(--purple-color) l c h / .5)
+```
+
+The channels are copied over and the alpha slot is written, which asks nothing of
+the color beyond *being* a color. That means the suffix works on every one of
+these:
+
+- a token holding a `color-mix()`, a `light-dark()`, or a `color()` in a space
+  Tasty cannot convert — none of which have channels to decompose
+- `#current`, which resolves to `currentcolor`
+- a `--name-color` variable declared in your own CSS, with no Tasty token
+  definition and no companion variable behind it
+
+Two properties follow from writing the alpha slot rather than compositing:
+
+- **Alpha is replaced, not multiplied.** A token holding `rgb(255 0 0 / .8)`
+  faded to `.5` is alpha `.5`, not `.4`.
+- **The alpha may be a number or a percentage.** `#purple.$fade` emits
+  `/ var(--fade)` unchanged, so it works whether `$fade` holds `.5` or `50%` —
+  which is what `--*-opacity` properties are registered to accept.
+
+### `#current` composes instead
+
+`#current` is the one exception, and the difference is deliberate. A token *names*
+a color, so fading it sets its alpha. `currentcolor` is the color an element
+**inherits**, which an ancestor may already have faded — `#current.4` means "40%
+of what reaches me":
+
+```jsx
+fill: '#current.4';
+// → color-mix(in oklab, currentcolor 40%, transparent)
+```
+
+So a `#current` fade nested inside another one composes: a label at `#current.4`
+with a fill of `#current.18` under it lands at `.072`. Color ramps built on
+`#current` depend on that — replacing would double the opacity of every nested
+step. Because a `color-mix()` percentage cannot be a `<number>`, an opacity
+custom property used as `#current.$fade` must hold a unitless number; a token
+accepts either form.
+
+The space is always `oklch`, whatever [`colorSpace`](configuration.md#color-space)
+is set to: it is unbounded, so a wide-gamut color survives a round trip that a
+gamut-limited space would clamp.
+
+---
+
+## CSS Color Functions
+
+Every CSS color function is recognized as a color, so it lands in the color slot
+of whichever style property you use it in — and tokens inside it are expanded:
+
+```jsx
+fill: 'color-mix(in oklab, #primary 50%, #surface)',
+color: 'light-dark(#dark, #light)',
+color: 'contrast-color(#primary)',
+fill: 'color(display-p3 1 .5 0)',
+border: '1bw solid oklch(from #primary l c h / 50%)',  // relative color syntax
+shadow: '0 0 1x color-mix(in oklab, #dark 20%, transparent)',
+```
+
+`light-dark()` is the one exception to "always a color": CSS lets it pick between
+values of any type, so it is treated as a color only when its arguments are
+colors. `padding: 'light-dark(1x, 2x)'` still reaches the padding slot.
+
+A color token defined as one of these functions takes the
+[opacity suffix](#color-tokens--opacity) like any other:
+
+```jsx
+const Card = tasty({
+  styles: {
+    '#brand': 'color-mix(in oklab, #primary 50%, #surface)',
+    fill: '#brand.5',
+  },
+});
+```
+
+A [replace token](configuration.md#replace-tokens-parse-time-substitution) is
+substituted while parsing, so its color is right there to fade in place. A
+channel function takes the alpha after a slash; a derived function has no alpha
+channel, so it gets wrapped:
+
+```jsx
+configure({
+  replaceTokens: {
+    '#solid': 'hsl(220 90% 50%)',
+    '#adaptive': 'light-dark(#dark, #light)',
+  },
+});
+
+fill: '#solid.5';     // → hsl(220 90% 50% / .5)
+fill: '#adaptive.5';  // → oklch(from light-dark(…) l c h / .5)
+```
+
 ---
 
 ## Built-in Units

package/docs/tasty/styles.md

@@ -254,6 +254,7 @@ Background color with design token support. Preferred over `backgroundColor` and
 | `"#purple.10"` | Token color at 10% opacity |
 | `"#surface #primary.10"` | Background `#surface` with `#primary.10` overlay (two colors enable smooth transitions between both) |
 | `"rgb(255 128 0)"` | CSS color value |
+| `"color-mix(in oklab, #primary 50%, #surface)"` | CSS color function — see [CSS Color Functions](dsl.md#css-color-functions) |
 | `true` | Default fill color |
 
 When two colors are provided, the first sets the background color and the second is applied as an overlay gradient layer. This enables independent CSS transitions on each color. The overlay is only applied when no explicit `image` or `backgroundImage` is set.
@@ -286,9 +287,10 @@ Text color with design token support.
 | `"#current"` | Current inherited color |
 | `"#current.5"` | Current inherited color at 50% opacity |
 | `"(#primary, #secondary)"` | Fallback: use `#primary`, fall back to `#secondary` |
+| `"light-dark(#dark, #light)"` | CSS color function — see [CSS Color Functions](dsl.md#css-color-functions) |
 | `true` | `currentColor` |
 
-When set to a named color token, also sets `$current-color` and `$current-color-{colorSpace}` custom properties for downstream use (suffix depends on the configured `colorSpace`, default `oklch`).
+When set to a named color token, also sets `$current-color` and `$current-color-{colorSpace}` custom properties for downstream use (suffix depends on the configured `colorSpace`, default `oklch`). An opacity suffix does not move the companion: `color="#purple.5"` still reports `#purple`'s channels, since components carry no alpha.
 
 ### `svgFill`
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cube-dev/ui-kit",
-  "version": "0.0.0-canary-5bbff30",
+  "version": "0.0.0-canary-604857b",
   "type": "module",
   "description": "UIKit for Cube Projects",
   "repository": {
@@ -93,7 +93,7 @@
     "@tabler/icons-react": "^3.31.0",
     "@tanstack/react-virtual": "^3.13.12",
     "@tenphi/glaze": "2.0.0",
-    "@tenphi/tasty": "^3.0.2",
+    "@tenphi/tasty": "0.0.0-snapshot.73ab317",
     "clipboard-copy": "^4.0.1",
     "clsx": "^1.1.1",
     "diff": "^8.0.3",

package/dist/components/fields/TextInput/useAutoSizeTextArea.js

@@ -1,146 +0,0 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5bbff30 | Cube Dev Team */
-import { useEvent } from "../../../_internal/hooks/use-event.js";
-import { useEffect, useLayoutEffect, useRef } from "react";
-
-//#region src/components/fields/TextInput/useAutoSizeTextArea.ts
-/**
-* Computed properties that decide where text wraps and how tall a line box is.
-* Copied onto the mirror so it wraps exactly like the live textarea.
-*/
-const MIRROR_TYPOGRAPHY_PROPS = [
-	"direction",
-	"fontFamily",
-	"fontFeatureSettings",
-	"fontKerning",
-	"fontSize",
-	"fontStretch",
-	"fontStyle",
-	"fontVariant",
-	"fontVariationSettings",
-	"fontWeight",
-	"letterSpacing",
-	"lineHeight",
-	"overflowWrap",
-	"tabSize",
-	"textIndent",
-	"textTransform",
-	"whiteSpace",
-	"wordBreak",
-	"wordSpacing"
-];
-const FALLBACK_LINE_HEIGHT = 20;
-/**
-* An off-screen textarea used to measure how tall the content wants to be.
-*
-* It carries no padding and no border, and its width is set to the live
-* element's *content* width, so `scrollHeight` is the content height and
-* nothing else. `height: 0` is what makes shrinking measurable: a textarea's
-* `scrollHeight` never drops below its own client height, so measuring the live
-* element can only ever report "at least what it already is".
-*/
-function createMirror() {
-	const mirror = document.createElement("textarea");
-	mirror.setAttribute("aria-hidden", "true");
-	mirror.setAttribute("tabindex", "-1");
-	mirror.readOnly = true;
-	mirror.rows = 1;
-	Object.assign(mirror.style, {
-		position: "absolute",
-		top: "0",
-		left: "-9999px",
-		boxSizing: "content-box",
-		margin: "0",
-		padding: "0",
-		border: "0",
-		height: "0",
-		minHeight: "0",
-		maxHeight: "none",
-		overflow: "hidden",
-		resize: "none",
-		visibility: "hidden",
-		pointerEvents: "none"
-	});
-	return mirror;
-}
-/** The width the text actually has to wrap in, scrollbar and padding removed. */
-function getContentWidth(textarea, style) {
-	const paddingLeft = parseFloat(style.paddingLeft) || 0;
-	const paddingRight = parseFloat(style.paddingRight) || 0;
-	const borderLeft = parseFloat(style.borderLeftWidth) || 0;
-	const borderRight = parseFloat(style.borderRightWidth) || 0;
-	const scrollbar = Math.max(0, Math.round(textarea.offsetWidth - textarea.clientWidth - borderLeft - borderRight));
-	return Math.max(0, textarea.getBoundingClientRect().width - borderLeft - borderRight - scrollbar - paddingLeft - paddingRight);
-}
-/** `line-height: normal` has no px value to read, so measure one line instead. */
-function getLineHeight(style, mirror) {
-	const parsed = parseFloat(style.lineHeight);
-	if (Number.isFinite(parsed) && parsed > 0) return parsed;
-	const previousValue = mirror.value;
-	mirror.value = "x";
-	const measured = mirror.scrollHeight;
-	mirror.value = previousValue;
-	return measured > 0 ? measured : FALLBACK_LINE_HEIGHT;
-}
-/**
-* Keeps an `autoSize` textarea's height in step with its content, and returns
-* the `adjustHeight` callback so a change handler can resize in the same tick
-* as the keystroke.
-*
-* The height is derived from an off-screen mirror rather than from the live
-* element. Measuring the live element — `height: auto`, read `scrollHeight`,
-* restore — re-lays out every ancestor mid-keystroke: in a chat-style column
-* the input box collapses to one row and the scroll viewport grows by the
-* difference, and the browser's scroll anchoring has to undo that. It does so
-* imperfectly, which is visible as the whole conversation bouncing by a pixel
-* on every keystroke (CUB-4042). Measuring off-screen touches no ancestor, so
-* there is nothing to undo.
-*/
-function useAutoSizeTextArea({ inputRef, autoSize, rows, maxRows, value }) {
-	const mirrorRef = useRef(null);
-	const adjustHeight = useEvent(() => {
-		const textarea = inputRef.current;
-		if (!textarea || !autoSize) return;
-		let mirror = mirrorRef.current;
-		if (!mirror) {
-			mirror = createMirror();
-			mirrorRef.current = mirror;
-			document.body.appendChild(mirror);
-		}
-		const style = getComputedStyle(textarea);
-		const contentWidth = getContentWidth(textarea, style);
-		if (contentWidth === 0) return;
-		for (const prop of MIRROR_TYPOGRAPHY_PROPS) mirror.style[prop] = style[prop];
-		mirror.style.width = `${contentWidth}px`;
-		mirror.value = textarea.value;
-		const lineHeight = getLineHeight(style, mirror);
-		const contentRows = Math.max(1, Math.round(mirror.scrollHeight / lineHeight));
-		const targetRows = Math.max(Math.min(contentRows, maxRows), rows);
-		const paddingTop = parseFloat(style.paddingTop) || 0;
-		const paddingBottom = parseFloat(style.paddingBottom) || 0;
-		const borderTop = parseFloat(style.borderTopWidth) || 0;
-		const borderBottom = parseFloat(style.borderBottomWidth) || 0;
-		const box = style.boxSizing === "border-box" ? paddingTop + paddingBottom + borderTop + borderBottom : 0;
-		const nextHeight = `${targetRows * lineHeight + box}px`;
-		if (textarea.style.height !== nextHeight) textarea.style.height = nextHeight;
-	});
-	const useEnvironmentalEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
-	useEnvironmentalEffect(() => {
-		if (!autoSize || !inputRef.current) return;
-		adjustHeight();
-		const resizeObserver = new ResizeObserver(adjustHeight);
-		resizeObserver.observe(inputRef.current);
-		return () => resizeObserver.disconnect();
-	}, [autoSize, inputRef.current]);
-	useEnvironmentalEffect(() => {
-		if (autoSize && inputRef.current) adjustHeight();
-	}, [value]);
-	useEffect(() => () => {
-		mirrorRef.current?.remove();
-		mirrorRef.current = null;
-	}, []);
-	return adjustHeight;
-}
-
-//#endregion
-export { useAutoSizeTextArea };
-//# sourceMappingURL=useAutoSizeTextArea.js.map