@cube-dev/ui-kit 0.200.1 → 0.201.0

package/dist/utils/react/forwardRefWithGenerics.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.200.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.201.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.200.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.201.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.200.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.201.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.200.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.201.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.200.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.201.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.200.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.201.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.200.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.201.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.200.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.201.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.200.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.201.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.200.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.201.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.200.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.201.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.200.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.201.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.200.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.201.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.200.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.201.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.200.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.201.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.200.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.201.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.200.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.201.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.200.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.201.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.200.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.201.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.200.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.201.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.200.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.201.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.200.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.201.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.200.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.201.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.200.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.201.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.200.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.201.0 | Cube Dev Team */
 import { useSyncExternalStore } from "react";
 //#region src/utils/react/useScheme.ts
 /**

package/dist/utils/react/useViewportSize.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.200.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.201.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.200.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.201.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.200.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.201.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.200.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.201.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.200.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.201.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.200.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.201.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.200.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.201.0 | Cube Dev Team */
 //#region src/version.ts
-const VERSION = "0.200.1";
-const TASTY_VERSION = "3.14.0";
+const VERSION = "0.201.0";
+const TASTY_VERSION = "3.15.0";
 if (typeof window !== "undefined") {
 	const version = VERSION;
 	const tastyVersion = TASTY_VERSION;

package/docs/components/data/ItemTable.md

@@ -212,7 +212,7 @@ const Compact = tasty(ItemTable, {
 });
 ```
 
-Rows publish their paint as inherited custom properties — `#row-base`, `#row-overlay`, `#row-text` and `$dim` — which cells consume. 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 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.
 
 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.
 
@@ -591,12 +591,18 @@ Unselectable rows are excluded from every scope. Pressing the header checkbox wh
 />
 ```
 
+When no visible column is marked `isRowHeader`, a table with `rowLink` uses its first visible data column eligible for the row header. Set `isRowHeader={false}` on a column to exclude it from that default. Selection and action columns do not affect the choice. If no data column is eligible, the table renders no row links.
+
 Because it is a real `<a href>`, ⌘-click, middle-click and "Open in new tab" all work natively — none of which an `onClick` handler can give you. The anchor sits below the cells' own content in the stacking order, so a button or `⋮` trigger inside a cell still takes its own clicks, and its accessible name comes from the row-header cell rather than being announced as "link".
 
 The row-header cell is styled as a link — `#purple-text` at weight 600, matching the kit's `Link`, with an underline while the row is hovered. The anchor itself is invisible, so without that the row would give no sign that it navigates.
 
 `onRowAction` is the non-navigational alternative — Enter, or a click that did not land on a control inside a cell. Use one or the other, not both.
 
+Flat tables with row links, row actions or exposed row menus have a resting body-row tab stop. Up/Down move between interactive rows, Home/End move to the first/last, and Enter activates the focused row's link or action. Down from a focused column header enters the body. Disabled rows are skipped; making a row unselectable only disables its checkbox. In-cell controls keep their own keys and Tab behavior. Reorderable rows retain their drag shortcuts.
+
+Keyboard focus emphasizes the row background, including selected rows, matching the kit's list items. Controls inside a row keep their own focus appearance.
+
 ### Row Menu
 
 `rowMenu` supplies `Menu.Item` children, and `rowContextMenu` decides where they are exposed. The split is deliberate: `rowMenu` alone renders nothing, so a row never grows a `⋮` nobody asked for.
@@ -624,6 +630,8 @@ The row-header cell is styled as a link — `#purple-text` at weight 600, matchi
 
 A row whose resolver returns `null` gets no trigger, and right-clicking it falls through to the browser's own context menu — more useful than an empty popover.
 
+From a focused flat row, Tab reaches its visible `⋮` trigger; Shift+F10 opens its context menu, including in `'context-only'` mode. Closing restores the opening row or control, or a surviving neighbor if the row was removed. A menu action that focuses another control keeps that focus.
+
 ### Bulk Actions
 
 `bulkActions` implies `selectionMode="multiple"` — a bulk action with no way to select rows is a contradiction, not a configuration.

package/docs/tasty/ai-agents.md

@@ -134,7 +134,7 @@ Directional modifiers beat placeholder zeros:
 - ❌ `padding: '2x 4x top right'` — a directional group takes one value, so `4x` is dropped → ✅ `padding: '2x top, 4x right'`
 - ❌ `fade: '3x 1x top bottom'` → ✅ `fade: '3x top, 1x bottom'`
 
-Value-only properties reject both colors and modifiers: `gap`, `columnGap`, `rowGap`, `opacity`, `zIndex`, `order`, `flexGrow`, `flexShrink`, `flexBasis`, `aspectRatio`, `lineClamp`, and `tabSize`. Logical axis category styles accept one or two values in start/end order and the `start`, `end`, and `longhand` modifiers. `fill`, `color`, `caretColor`, and `accentColor` take a color only (use `#clear` for transparent).
+Value-only properties reject both colors and modifiers: `gap`, `columnGap`, `rowGap`, `opacity`, `zIndex`, `order`, `flexGrow`, `flexShrink`, `flexBasis`, `aspectRatio`, `lineClamp`, and `tabSize`. Logical axis category styles accept one or two values in start/end order and the `start`, `end`, and `longhand` modifiers. `fill`, `color`, `caretColor`, and `accentColor` take a color only (use `#clear` for transparent). `fill` also mixes two colors with a comma, the weight as a percentage: ❌ `fill: '#surface #dark.04'` (deprecated overlay layer) · ❌ `fill: '#dark.04, #surface'` (half-transparent mix) → ✅ `fill: '#dark 4%, #surface'`.
 
 ### `transition`
 

package/docs/tasty/react-api.md

@@ -356,7 +356,7 @@ const Badge = tasty({
   variants: {
     primary: {
       border: { '': '#white.2', pressed: '#primary-text', disabled: '#clear' },
-      fill: { '': '#white #primary', hovered: '#white #primary-text' },
+      fill: { '': '#primary', hovered: '#primary-text' },
     },
     secondary: {
       border: { '': '#primary.15', pressed: '#primary.3' },

package/docs/tasty/styles.md

@@ -303,17 +303,51 @@ Avoid setting physical and logical declarations that resolve to the same edge in
 
 Background color with design token support. Preferred over `backgroundColor` and `background`.
 
-**Syntax:** `[color]` or `[base-color] [overlay-color]`
+**Syntax:** `[color]`, or two colors mixed with a comma: `[color] [weight%], [color]`
 
 | Value | Effect |
 |-------|--------|
 | `"#purple"` | Token-based background color |
 | `"#purple.10"` | Token color at 10% opacity |
-| `"#surface #primary.10"` | Background `#surface` with `#primary.10` overlay (two colors enable smooth transitions between both) |
+| `"#dark 4%, #surface"` | `#dark` mixed into `#surface` at 4% — the color `#dark` at 4% opacity over `#surface` would show |
 | `"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) |
 
-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. With `image` or `backgroundImage` on the same element, the image is layered over the overlay color in one `background-image`.
+#### Mixing two colors
+
+A comma between two colors mixes them into one:
+
+```jsx
+fill: '#dark 4%, #surface'
+// → background-color: color-mix(in srgb, var(--dark-color) 4%, var(--surface-color));
+```
+
+The comma-separated parts are the arguments of `color-mix()`, as written, mixed in sRGB: the space browsers composite layers in. When the weighted color is opaque, the mix is exactly what drawing it at that opacity over the other color shows. And because it is one `background-color`:
+
+- contrast checkers such as axe-core and Lighthouse can read it;
+- it transitions and animates between states like any other color;
+- an `image` on the same element stays the only `background-image` layer.
+
+The weight can come from a token or an expression: `'#dark $hover-weight, #surface'`, `'#dark ($hover * 100%), #surface'`.
+
+Give the weight as a percentage, not as an opacity. A color without a percentage takes half the weight, and its own alpha weighs it down again, so the mix comes out see-through: `'#dark.04, #surface'` is 52% opaque, not `#dark` at 4% over `#surface`. In development Tasty warns about a `#name.N` or `#clear` part without a percentage. It can't see into a token, though, so a token holding a translucent color mixes the same way with no warning: keep the token opaque and put its weight in the percentage.
+
+A mix takes two colors. Any more are ignored, with a development warning.
+
+#### Two colors separated by a space (deprecated)
+
+`fill: '#surface #dark.04'` paints the first color as `background-color` and the second as a `linear-gradient()` layer over it, through the `--tasty-second-fill-color` custom property. It still works, with a development warning, and is going away in the next major version: contrast checkers can't see through a `background-image`, so axe-core reports every text node over the layer as *incomplete*.
+
+| Before | After |
+|--------|-------|
+| `'#surface #dark.04'` | `'#dark 4%, #surface'` |
+| `'#surface #clear'` | `'#surface'` |
+| `'#surface #accent'` (an opaque overlay) | `'#accent'` |
+| `'#base #overlay'` (a token holding a translucent color) | `'#overlay $overlay-weight, #base'`, with `#overlay` opaque and `$overlay-weight` a percentage |
+
+The rewrites are exact when the overlay token is opaque. A state map no longer needs the same two-color shape in every state to transition smoothly: every state is now a plain background color.
+
+If an overlay has to stay a translucent token, draw the layer yourself with `fill: '#base', image: 'linear-gradient(#overlay, #overlay)'`. Contrast checkers can't read that either.
 
 There is no default fill color, so `fill: true` is ignored with a development warning. Use `false` for no fill.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cube-dev/ui-kit",
-  "version": "0.200.1",
+  "version": "0.201.0",
   "type": "module",
   "description": "UIKit for Cube Projects",
   "repository": {
@@ -59,7 +59,7 @@
     "@tabler/icons-react": "^3.31.0",
     "@tanstack/react-virtual": "^3.13.12",
     "@tenphi/glaze": "2.0.0",
-    "@tenphi/tasty": "3.14.0",
+    "@tenphi/tasty": "3.15.0",
     "clipboard-copy": "^4.0.1",
     "clsx": "^1.1.1",
     "diff": "^8.0.3",
@@ -97,7 +97,7 @@
     "@statoscope/cli": "^5.20.1",
     "@storybook/addon-docs": "^10.3.6",
     "@storybook/react-vite": "^10.3.6",
-    "@tenphi/eslint-plugin-tasty": "^1.12.0",
+    "@tenphi/eslint-plugin-tasty": "^1.14.0",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.7.0",
     "@testing-library/react": "^16.3.0",