@cube-dev/ui-kit 0.200.0 → 0.201.0

package/dist/utils/react/index.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.200.0 | 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.0 | 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.0 | 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.0 | 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.0 | 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.0 | 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.0 | 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.0 | 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.0 | 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.0 | 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.0 | 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.0 | 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.0 | 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.0 | 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.0 | 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.0 | 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.0 | 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.0 | 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.0 | 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.0 | 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,10 +1,11 @@
-/** @license MIT | @cube-dev/ui-kit v0.200.0 | 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";
 //#region src/utils/react/useOverlayEscapeGuard.ts
 /**
-* Stops a CLOSED overlay from answering for `Escape` (CUB-4839).
+* Stops a CLOSED overlay from answering for `Escape` (CUB-4839), and keeps an
+* Escape already handled by a child inside its open overlay.
 *
 * `useOverlay`'s `Escape` handler calls `stopPropagation()` and
 * `preventDefault()` for every `Escape` it sees, and only THEN asks whether
@@ -32,6 +33,10 @@ function useOverlayEscapeGuard(overlayProps, isOpen) {
 	if ($[0] !== isOpen || $[1] !== overlayProps) {
 		t0 = (event) => {
 			if (event.key === "Escape" && !isOpen) return;
+			if (event.key === "Escape" && event.isDefaultPrevented()) {
+				event.stopPropagation();
+				return;
+			}
 			const target = getEventTarget(event);
 			if (event.key === "Escape" && !nodeContains(event.currentTarget, target)) {
 				overlayProps.onKeyDown?.({

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

@@ -1 +1 @@
-{"version":3,"file":"useOverlayEscapeGuard.js","names":["getEventTarget","nodeContains","useEvent","DOMAttributes","KeyboardEvent","OverlayDOMProps","useOverlayEscapeGuard","overlayProps","isOpen","$","_c","t0","event","key","target","currentTarget","onKeyDown","preventDefault","stopPropagation","t1","_c"],"sources":["../../../src/utils/react/useOverlayEscapeGuard.ts"],"sourcesContent":["import { getEventTarget, nodeContains } from '@react-aria/utils';\n\nimport { useEvent } from '../../_internal';\n\nimport type { DOMAttributes, KeyboardEvent } from 'react';\n\ntype OverlayDOMProps = DOMAttributes<any>;\n\n/**\n * Stops a CLOSED overlay from answering for `Escape` (CUB-4839).\n *\n * `useOverlay`'s `Escape` handler calls `stopPropagation()` and\n * `preventDefault()` for every `Escape` it sees, and only THEN asks whether\n * this overlay is the topmost one allowed to act on it — unlike\n * `onInteractOutside`, which it gates on `isOpen` up front. An overlay that has\n * already closed therefore consumes the key and does nothing with it, so the\n * `Escape` meant for the Dialog around it closes nothing at all.\n *\n * That is reachable here because our overlays stay mounted for their exit\n * transition while still holding DOM focus: pick an option from a list inside a\n * Dialog and the very next `Escape` lands in the closing list.\n *\n * Passing `useOverlay` an `isKeyboardDismissDisabled` of its own does NOT work,\n * and that is the reason this exists. `DisplayTransition` preserves content\n * across an exit by replaying the children it stored while the overlay was\n * open, so every value that subtree captured — `isKeyboardDismissDisabled`\n * included — stays frozen at its open-state reading for exactly the window\n * this has to guard. `useEvent` gets around it by returning a handler whose\n * identity never changes while its body always runs the latest render's\n * closure, so the frozen copy still sees the current `isOpen`.\n */\nexport function useOverlayEscapeGuard<T extends OverlayDOMProps>(\n  overlayProps: T,\n  isOpen: boolean | undefined,\n): T {\n  const onKeyDown = useEvent((event: KeyboardEvent<any>) => {\n    // Decline it, so it reaches whoever can actually act on it.\n    if (event.key === 'Escape' && !isOpen) return;\n\n    // Aria's shortcut handler ignores physical DOM outsiders. A closing\n    // popup still bubbles Escape through its logical React portal ancestry.\n    // Let the open ancestor's handler retain its topmost-overlay check.\n    const target = getEventTarget(event);\n    if (event.key === 'Escape' && !nodeContains(event.currentTarget, target)) {\n      overlayProps.onKeyDown?.({\n        ...event,\n        currentTarget: target,\n        preventDefault: () => event.preventDefault(),\n        stopPropagation: () => event.stopPropagation(),\n      });\n      return;\n    }\n\n    overlayProps.onKeyDown?.(event);\n  });\n\n  return { ...overlayProps, onKeyDown };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+BA,SAAOM,sBAAAC,cAAAC,QAAA;CAAA,MAAAC,IAAAC,EAAA,CAAA;CAAA,IAAAC;CAAA,IAAAF,EAAA,OAAAD,UAAAC,EAAA,OAAAF,cAAA;EAIsBI,MAAAC,UAAA;GAEzB,IAAIA,MAAKC,QAAS,YAAd,CAA2BL,QAAM;GAKrC,MAAAM,SAAed,eAAeY,KAAK;GACnC,IAAIA,MAAKC,QAAS,YAAd,CAA2BZ,aAAaW,MAAKG,eAAgBD,MAAM,GAAC;IACtEP,aAAYS,YAAa;KAAA,GACpBJ;KAAKG,eACOD;KAAMG,sBACCL,MAAKK,eAAgB;KAACC,uBACrBN,MAAKM,gBAAiB;IAC/C,CAAC;IAAC;GAAA;GAIJX,aAAYS,YAAaJ,KAAK;EAAC;EAChCH,EAAA,KAAAD;EAAAC,EAAA,KAAAF;EAAAE,EAAA,KAAAE;CAAA,OAAAA,KAAAF,EAAA;CAnBD,MAAAO,YAAkBd,SAASS,EAmB1B;CAAE,IAAAQ;CAAA,IAAAV,EAAA,OAAAO,aAAAP,EAAA,OAAAF,cAAA;EAEIY,KAAA;GAAA,GAAKZ;GAAYS;EAAY;EAACP,EAAA,KAAAO;EAAAP,EAAA,KAAAF;EAAAE,EAAA,KAAAU;CAAA,OAAAA,KAAAV,EAAA;CAAA,OAA9BU;AAA8B"}
+{"version":3,"file":"useOverlayEscapeGuard.js","names":["getEventTarget","nodeContains","useEvent","DOMAttributes","KeyboardEvent","OverlayDOMProps","useOverlayEscapeGuard","overlayProps","isOpen","$","_c","t0","event","key","isDefaultPrevented","stopPropagation","target","currentTarget","onKeyDown","preventDefault","t1","_c"],"sources":["../../../src/utils/react/useOverlayEscapeGuard.ts"],"sourcesContent":["import { getEventTarget, nodeContains } from '@react-aria/utils';\n\nimport { useEvent } from '../../_internal';\n\nimport type { DOMAttributes, KeyboardEvent } from 'react';\n\ntype OverlayDOMProps = DOMAttributes<any>;\n\n/**\n * Stops a CLOSED overlay from answering for `Escape` (CUB-4839), and keeps an\n * Escape already handled by a child inside its open overlay.\n *\n * `useOverlay`'s `Escape` handler calls `stopPropagation()` and\n * `preventDefault()` for every `Escape` it sees, and only THEN asks whether\n * this overlay is the topmost one allowed to act on it — unlike\n * `onInteractOutside`, which it gates on `isOpen` up front. An overlay that has\n * already closed therefore consumes the key and does nothing with it, so the\n * `Escape` meant for the Dialog around it closes nothing at all.\n *\n * That is reachable here because our overlays stay mounted for their exit\n * transition while still holding DOM focus: pick an option from a list inside a\n * Dialog and the very next `Escape` lands in the closing list.\n *\n * Passing `useOverlay` an `isKeyboardDismissDisabled` of its own does NOT work,\n * and that is the reason this exists. `DisplayTransition` preserves content\n * across an exit by replaying the children it stored while the overlay was\n * open, so every value that subtree captured — `isKeyboardDismissDisabled`\n * included — stays frozen at its open-state reading for exactly the window\n * this has to guard. `useEvent` gets around it by returning a handler whose\n * identity never changes while its body always runs the latest render's\n * closure, so the frozen copy still sees the current `isOpen`.\n */\nexport function useOverlayEscapeGuard<T extends OverlayDOMProps>(\n  overlayProps: T,\n  isOpen: boolean | undefined,\n): T {\n  const onKeyDown = useEvent((event: KeyboardEvent<any>) => {\n    // Decline it, so it reaches whoever can actually act on it.\n    if (event.key === 'Escape' && !isOpen) return;\n\n    // Code editors can close autocomplete by preventing default alone.\n    // Keep that Escape inside this overlay, including an enclosing dialog.\n    if (event.key === 'Escape' && event.isDefaultPrevented()) {\n      event.stopPropagation();\n      return;\n    }\n\n    // Aria's shortcut handler ignores physical DOM outsiders. A closing\n    // popup still bubbles Escape through its logical React portal ancestry.\n    // Let the open ancestor's handler retain its topmost-overlay check.\n    const target = getEventTarget(event);\n    if (event.key === 'Escape' && !nodeContains(event.currentTarget, target)) {\n      overlayProps.onKeyDown?.({\n        ...event,\n        currentTarget: target,\n        preventDefault: () => event.preventDefault(),\n        stopPropagation: () => event.stopPropagation(),\n      });\n      return;\n    }\n\n    overlayProps.onKeyDown?.(event);\n  });\n\n  return { ...overlayProps, onKeyDown };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgCA,SAAOM,sBAAAC,cAAAC,QAAA;CAAA,MAAAC,IAAAC,EAAA,CAAA;CAAA,IAAAC;CAAA,IAAAF,EAAA,OAAAD,UAAAC,EAAA,OAAAF,cAAA;EAIsBI,MAAAC,UAAA;GAEzB,IAAIA,MAAKC,QAAS,YAAd,CAA2BL,QAAM;GAIrC,IAAII,MAAKC,QAAS,YAAYD,MAAKE,mBAAoB,GAAC;IACtDF,MAAKG,gBAAiB;IAAC;GAAA;GAOzB,MAAAC,SAAehB,eAAeY,KAAK;GACnC,IAAIA,MAAKC,QAAS,YAAd,CAA2BZ,aAAaW,MAAKK,eAAgBD,MAAM,GAAC;IACtET,aAAYW,YAAa;KAAA,GACpBN;KAAKK,eACOD;KAAMG,sBACCP,MAAKO,eAAgB;KAACJ,uBACrBH,MAAKG,gBAAiB;IAC/C,CAAC;IAAC;GAAA;GAIJR,aAAYW,YAAaN,KAAK;EAAC;EAChCH,EAAA,KAAAD;EAAAC,EAAA,KAAAF;EAAAE,EAAA,KAAAE;CAAA,OAAAA,KAAAF,EAAA;CA1BD,MAAAS,YAAkBhB,SAASS,EA0B1B;CAAE,IAAAS;CAAA,IAAAX,EAAA,OAAAS,aAAAT,EAAA,OAAAF,cAAA;EAEIa,KAAA;GAAA,GAAKb;GAAYW;EAAY;EAACT,EAAA,KAAAS;EAAAT,EAAA,KAAAF;EAAAE,EAAA,KAAAW;CAAA,OAAAA,KAAAX,EAAA;CAAA,OAA9BW;AAA8B"}

package/dist/utils/react/usePopoverSync.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.200.0 | 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.0 | 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.0 | 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.0 | 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.0 | 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.0 | 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.0 | 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.0 | 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.0 | 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.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.201.0 | Cube Dev Team */
 //#region src/version.ts
-const VERSION = "0.200.0";
-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/components/overlays/Dialog.md

@@ -194,7 +194,7 @@ To clamp the width yourself, set `styles.width` (`styles={{ width: 'initial 520p
 
 - `Tab` - Moves focus between interactive elements within the dialog
 - `Shift + Tab` - Moves focus backward between interactive elements
-- `Escape` - Closes the dialog when its `DialogTrigger` or `DialogContainer` is dismissable (`isDismissable`, on by default) and `isKeyboardDismissDisabled` is not set
+- `Escape` - Closes the dialog when its `DialogTrigger` or `DialogContainer` is dismissable (`isDismissable`, on by default) and `isKeyboardDismissDisabled` is not set. If a control inside already prevents the key's default, the dialog stays open and keeps the handled Escape from reaching an enclosing dialog
 - `Enter/Space` - Activates focused buttons or interactive elements
 
 ### Screen Reader Support

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.0",
+  "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",