@cube-dev/ui-kit 0.157.3 → 0.159.0

package/dist/utils/react/disabledProps.js

@@ -0,0 +1,82 @@
+/** @license MIT | @cube-dev/ui-kit v0.159.0 | Cube Dev Team */
+//#region src/utils/react/disabledProps.ts
+/**
+* Tags where `disabled` is a real HTML attribute. Browsers refuse to dispatch
+* mouse events on those elements while the attribute is set, so nothing that
+* listens for hover — a tooltip trigger above all — ever hears from them.
+* On every other tag the attribute is invalid markup that does nothing.
+*/
+const FORM_CONTROL_TAGS = new Set([
+	"button",
+	"input",
+	"select",
+	"textarea",
+	"fieldset",
+	"option",
+	"optgroup"
+]);
+/**
+* Handlers that can activate an element. They are dropped while the element is
+* disabled through `aria-disabled` alone, so it stays as inert as a natively
+* disabled one.
+*/
+const ACTIVATION_EVENT_PROPS = [
+	"onClick",
+	"onDoubleClick",
+	"onMouseDown",
+	"onMouseUp",
+	"onPointerDown",
+	"onPointerUp",
+	"onTouchStart",
+	"onTouchEnd",
+	"onKeyDown",
+	"onKeyUp",
+	"onKeyPress"
+];
+function preventActivation(event) {
+	event.preventDefault();
+}
+const INERT_PROPS = {
+	"aria-disabled": true,
+	onClick: preventActivation
+};
+const EMPTY_PROPS = {};
+/**
+* Decides how the disabled state reaches the DOM.
+*
+* The native `disabled` attribute is the strongest option, but it also makes
+* the browser swallow the events the element needs to open a tooltip. When
+* such an element has to stay hoverable, it is marked `aria-disabled` instead
+* and kept inert by blocking activation — the outcome a user sees is the same,
+* except the tooltip now opens and screen readers still announce the state.
+*/
+function getDisabledElementProps({ isDisabled, keepEvents, as = "div" }) {
+	if (!isDisabled) return {
+		isNativelyDisabled: false,
+		isInert: false,
+		inertProps: EMPTY_PROPS
+	};
+	if (FORM_CONTROL_TAGS.has(as) && !keepEvents) return {
+		isNativelyDisabled: true,
+		isInert: false,
+		inertProps: EMPTY_PROPS
+	};
+	return {
+		isNativelyDisabled: false,
+		isInert: true,
+		inertProps: INERT_PROPS
+	};
+}
+/**
+* Removes the handlers that would activate an element which is disabled
+* without the native attribute.
+*/
+function omitActivationEventProps(props) {
+	const result = { ...props };
+	for (const prop of ACTIVATION_EVENT_PROPS) delete result[prop];
+	return result;
+}
+
+//#endregion
+export { getDisabledElementProps, omitActivationEventProps };
+//# sourceMappingURL=disabledProps.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"disabledProps.js","names":[],"sources":["../../../src/utils/react/disabledProps.ts"],"sourcesContent":["import type { SyntheticEvent } from 'react';\nimport type { Props } from '../../props';\n\n/**\n * Tags where `disabled` is a real HTML attribute. Browsers refuse to dispatch\n * mouse events on those elements while the attribute is set, so nothing that\n * listens for hover — a tooltip trigger above all — ever hears from them.\n * On every other tag the attribute is invalid markup that does nothing.\n */\nconst FORM_CONTROL_TAGS = new Set([\n  'button',\n  'input',\n  'select',\n  'textarea',\n  'fieldset',\n  'option',\n  'optgroup',\n]);\n\n/**\n * Handlers that can activate an element. They are dropped while the element is\n * disabled through `aria-disabled` alone, so it stays as inert as a natively\n * disabled one.\n */\nconst ACTIVATION_EVENT_PROPS = [\n  'onClick',\n  'onDoubleClick',\n  'onMouseDown',\n  'onMouseUp',\n  'onPointerDown',\n  'onPointerUp',\n  'onTouchStart',\n  'onTouchEnd',\n  'onKeyDown',\n  'onKeyUp',\n  'onKeyPress',\n] as const;\n\nfunction preventActivation(event: SyntheticEvent) {\n  // Without the native attribute a click (or Enter/Space, which the browser\n  // turns into a click) still runs the default action and would submit the\n  // surrounding form.\n  event.preventDefault();\n}\n\nconst INERT_PROPS: Props = {\n  'aria-disabled': true,\n  onClick: preventActivation,\n};\n\nconst EMPTY_PROPS: Props = {};\n\nexport interface DisabledElementOptions {\n  /** Whether the component is disabled. */\n  isDisabled?: boolean;\n  /**\n   * Whether the element has to keep receiving pointer and focus events while\n   * disabled. Set it when the element hosts a tooltip: the tooltip is there to\n   * explain why the element is unavailable, so hover has to reach it.\n   */\n  keepEvents?: boolean;\n  /** The tag the component renders. */\n  as?: string;\n}\n\nexport interface DisabledElementProps {\n  /** Whether the element has to carry the native `disabled` attribute. */\n  isNativelyDisabled: boolean;\n  /**\n   * Whether the element is disabled through `aria-disabled` only and therefore\n   * has to be kept inert by hand.\n   */\n  isInert: boolean;\n  /** Props that mark the element disabled and inert. Spread them last. */\n  inertProps: Props;\n}\n\n/**\n * Decides how the disabled state reaches the DOM.\n *\n * The native `disabled` attribute is the strongest option, but it also makes\n * the browser swallow the events the element needs to open a tooltip. When\n * such an element has to stay hoverable, it is marked `aria-disabled` instead\n * and kept inert by blocking activation — the outcome a user sees is the same,\n * except the tooltip now opens and screen readers still announce the state.\n */\nexport function getDisabledElementProps({\n  isDisabled,\n  keepEvents,\n  as = 'div',\n}: DisabledElementOptions): DisabledElementProps {\n  if (!isDisabled) {\n    return {\n      isNativelyDisabled: false,\n      isInert: false,\n      inertProps: EMPTY_PROPS,\n    };\n  }\n\n  // The attribute only means something on form controls, and there it can be\n  // kept whenever nothing depends on the element's events.\n  if (FORM_CONTROL_TAGS.has(as) && !keepEvents) {\n    return {\n      isNativelyDisabled: true,\n      isInert: false,\n      inertProps: EMPTY_PROPS,\n    };\n  }\n\n  return { isNativelyDisabled: false, isInert: true, inertProps: INERT_PROPS };\n}\n\n/**\n * Removes the handlers that would activate an element which is disabled\n * without the native attribute.\n */\nexport function omitActivationEventProps<T extends Props>(props: T): T {\n  const result = { ...props };\n\n  for (const prop of ACTIVATION_EVENT_PROPS) {\n    delete result[prop];\n  }\n\n  return result;\n}\n"],"mappings":";;;;;;;;AASA,MAAM,oBAAoB,IAAI,IAAI;CAChC;CACA;CACA;CACA;CACA;CACA;CACA;CACD,CAAC;;;;;;AAOF,MAAM,yBAAyB;CAC7B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD;AAED,SAAS,kBAAkB,OAAuB;AAIhD,OAAM,gBAAgB;;AAGxB,MAAM,cAAqB;CACzB,iBAAiB;CACjB,SAAS;CACV;AAED,MAAM,cAAqB,EAAE;;;;;;;;;;AAoC7B,SAAgB,wBAAwB,EACtC,YACA,YACA,KAAK,SAC0C;AAC/C,KAAI,CAAC,WACH,QAAO;EACL,oBAAoB;EACpB,SAAS;EACT,YAAY;EACb;AAKH,KAAI,kBAAkB,IAAI,GAAG,IAAI,CAAC,WAChC,QAAO;EACL,oBAAoB;EACpB,SAAS;EACT,YAAY;EACb;AAGH,QAAO;EAAE,oBAAoB;EAAO,SAAS;EAAM,YAAY;EAAa;;;;;;AAO9E,SAAgB,yBAA0C,OAAa;CACrE,MAAM,SAAS,EAAE,GAAG,OAAO;AAE3B,MAAK,MAAM,QAAQ,uBACjB,QAAO,OAAO;AAGhB,QAAO"}

package/dist/utils/react/forwardRefWithGenerics.js

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

package/dist/utils/react/index.d.ts

@@ -1,5 +1,6 @@
 
 import { chain } from "./chain.js";
+import { DisabledElementOptions, DisabledElementProps, getDisabledElementProps, omitActivationEventProps } from "./disabledProps.js";
 import { forwardRefWithGenerics } from "./forwardRefWithGenerics.js";
 import { isTextOnly } from "./isTextOnly.js";
 import { mergeProps } from "./mergeProps.js";

package/dist/utils/react/index.js

@@ -1,5 +1,6 @@
-/** @license MIT | @cube-dev/ui-kit v0.157.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.159.0 | Cube Dev Team */
 import { chain } from "./chain.js";
+import { getDisabledElementProps, omitActivationEventProps } from "./disabledProps.js";
 import { forwardRefWithGenerics } from "./forwardRefWithGenerics.js";
 import { isTextOnly } from "./isTextOnly.js";
 import { useLayoutEffect } from "./useLayoutEffect.js";

package/dist/utils/react/interactions.js

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

package/dist/version.js

@@ -1,6 +1,6 @@
-/** @license MIT | @cube-dev/ui-kit v0.157.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.159.0 | Cube Dev Team */
 //#region src/version.ts
-const VERSION = "0.157.3";
+const VERSION = "0.159.0";
 const TASTY_VERSION = "3.0.1";
 if (typeof window !== "undefined") {
 	const version = VERSION;

package/docs/Theming.md

@@ -25,11 +25,11 @@ value so this stays true.
 | ---------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------- |
 | `hue`                        | **Accent** hue in degrees — the brand. Drives the `accent-*` family, `primary` / `purple` / `special`, and the brand-tinted `focus`, loading faces and disabled chip. | `280.3`                             |
 | `baseHue`                    | **Base** hue in degrees — the neutral chrome: `surface` and its ladder, the `surface-text*` ramp, `border`, `placeholder`.                                            | inherits `hue`                      |
-| `saturation`                 | Seed saturation (0–100) for the `default` theme, and the fallback for every theme that sets none.                                                                     | `80`                                |
+| `saturation`                 | Seed saturation (0–100) for the `default` theme, and the fallback for every theme that sets none.                                                                     | `100`                               |
 | `themes.<status>.hue`        | Hue for `success` / `danger` / `warning` / `note`.                                                                                                                    | `156.9` / `23.1` / `84.3` / `302.3` |
 | `themes.<status>.saturation` | Saturation for that status theme.                                                                                                                                     | inherits `saturation`               |
-| `themes.code.saturation`     | Saturation for the `code-*` syntax family. Hues are fixed, and this does **not** inherit `saturation`.                                                                | `80`                                |
-| `pastel`                     | Global. Relaxes the sRGB-safe chroma limit. Every theme except `code`.                                                                                                | `false`                             |
+| `themes.code.saturation`     | Saturation for the `code-*` syntax family. Hues are fixed, and this does **not** inherit `saturation`, nor track its default.                                         | `80`                                |
+| `pastel`                     | Global. Relaxes the sRGB-safe chroma limit. Every theme except `code`.                                                                                                | `true`                              |
 | `contrastLevel`              | Global. `'auto'`, or a manual `0`–`100` level.                                                                                                                        | `'auto'`                            |
 
 ### The setter replaces
@@ -101,9 +101,12 @@ Syntax colors are their own theme with their own seed, so neither the brand hue
 the palette saturation reaches them. Hues are absolute literals — a brand re-seeded
 toward green would otherwise collide `code-string` with `code-number` (156°) — and
 the saturation is fixed at `80` rather than inheriting, so muting the app cannot
-wash out a code block. `pastel` skips them for the same reason: it lowers the chroma
-ceiling far enough to take `code-keyword` from ~0.19 to ~0.07, collapsing the spread
-that keeps the syntax hues apart.
+wash out a code block. That `80` is its own constant (`DEFAULT_CODE_SATURATION`),
+deliberately not the palette default it once shared a value with: the app seed moved
+to `100` with the pastel palette and the syntax colors stayed put, which is the whole
+point of them not inheriting. `pastel` skips them for the same reason: it lowers
+the chroma ceiling far enough to take `code-keyword` from ~0.19 to ~0.07,
+collapsing the spread that keeps the syntax hues apart.
 
 So `themes.code.saturation` is the only thing that moves them. Tune it on its own:
 
@@ -117,7 +120,8 @@ and saturation are pinned.
 
 That separate seed is also a hard requirement, not a preference: a Glaze colour can
 never exceed its own theme seed, and four of these sit at factor `1.0`. Inside a
-default theme seeded below 80 they simply could not hold their chroma.
+default theme seeded below `80` they simply could not hold their chroma — which is
+also why the pinned seed is a floor to respect rather than a number to tidy up.
 
 ### Inherited vs pinned
 
@@ -141,7 +145,7 @@ setPaletteConfig(({ baseHue, ...config }) => config);
 An explicit `baseHue: undefined` is equivalent to omitting it; neither is a value.
 
 `getPaletteConfig()` resolves everything, which loses that distinction — it cannot
-tell you whether `80` was chosen or inherited. `getPaletteConfigInput()` returns the
+tell you whether `100` was chosen or inherited. `getPaletteConfigInput()` returns the
 sparse config as set, which is what a settings UI needs to render an inherited value
 as inherited and offer a way back:
 
@@ -337,11 +341,14 @@ and not per request:
 
 ## Caveats
 
-**`pastel: true` is a redesign, not a filter.** It changes every resolved color
-outside the `code-*` family. The per-color saturation factors in this palette were
-tuned for the non-pastel space — pastel equalizes chroma across hues, so a pastel
-palette on the shipped seeds resolves more saturated than you may expect. Re-tune
-the seeds alongside it.
+**`pastel` is a redesign, not a filter — in either direction.** It changes every
+resolved color outside the `code-*` family, and the shipped palette is now pastel
+(`pastel: true`, seed `100`), so it is `pastel: false` that is the departure. The two
+spaces want different seeds: pastel equalizes the chroma ceiling across hues, where
+the non-pastel one is per-hue and lets warm hues run further. Flipping the flag alone
+therefore re-tunes nothing — a seed picked in one space lands somewhere else in the
+other, and the warm statuses move most. Re-tune the seeds alongside it, in whichever
+direction you flip.
 
 **Re-seeding costs about 10 ms.** Rebuilding the eight themes and re-solving
 ~156 tokens across four scheme variants is not free, though it is inside a frame.

package/docs/components/actions/Button.md

@@ -179,8 +179,23 @@ import { IconPlus } from '@tabler/icons-react';
 <Button tooltip={true} width="100px">
   This text will be truncated
 </Button>;
+
+{
+  /* Explain why the button is unavailable */
+}
+<Button isDisabled tooltip="Not enough permissions">
+  Delete
+</Button>;
 ```
 
+A disabled button keeps showing its tooltip. Browsers stop dispatching mouse
+events on elements carrying the native `disabled` attribute, so a button that
+has a tooltip is marked with `aria-disabled` instead and kept inert: `onPress`
+never fires and clicks (including the ones Enter and Space produce) do nothing.
+Such a button also stays in the tab order, so keyboard users can focus it and
+read the tooltip. Buttons rendered as links (`to`) are always marked this way,
+since `disabled` is not a valid attribute on an anchor.
+
 ### Custom Size
 
 ```jsx
@@ -212,6 +227,8 @@ import { IconPlus } from '@tabler/icons-react';
 
 - `aria-label`, `aria-labelledby` – Accessible name.
 - `aria-pressed` – Managed automatically when `isSelected` is used.
+- `aria-disabled` – Announces the disabled state whenever the native `disabled`
+  attribute cannot be used: on links, and on buttons that carry a tooltip.
 - Additional ARIA attributes supported by React Aria's `useButton`.
 
 ## Behaviour Inside Popovers

package/docs/components/content/Item.md

@@ -388,8 +388,15 @@ By default, Item shows an auto tooltip when content overflows.
 >
   This shows custom tooltip only when text overflows
 </Item>
+
+{/* Explain why the item is unavailable */}
+<Item isDisabled tooltip="Available on the Enterprise plan">
+  Row-level security
+</Item>
 ```
 
+A disabled item keeps showing its tooltip — that is usually where the reason for being unavailable is written. Browsers stop dispatching mouse events on elements carrying the native `disabled` attribute, so an item that has a tooltip is marked with `aria-disabled` instead and kept inert: activation handlers are dropped and clicks (including the ones Enter and Space produce) do nothing.
+
 ## Accessibility
 
 ### Keyboard Navigation
@@ -408,7 +415,7 @@ By default, Item shows an auto tooltip when content overflows.
 ### ARIA Properties
 
 - `aria-label` - Provides accessible label when no visible label exists
-- `aria-disabled` - Indicates disabled state
+- `aria-disabled` - Indicates disabled state. The native `disabled` attribute is only added on top of it when the item renders as a form control (`as="button"`, for instance) and has no tooltip to keep hoverable
 - `aria-selected` - Indicates selection state when applicable
 - `tabIndex` - Controls focus behavior
 

package/docs/components/data/DataTable.md

@@ -61,7 +61,8 @@ and everything it knows about the query, in Cloud.
 
 - **`shape`** `'plain' | 'card'` (default: `'plain'`)
 - **`size`** `SizeName` (default: `'small'`) — An analytical grid packs more rows than a list.
-- **`rowHeight`** `number` — Overrides the height implied by `size`.
+- **`rowSize`** `'small' | 'medium' | 'large'` — Row height as a named step: 28px / 32px / 40px. Rows only; the header keeps answering to `size`. Unset, the height comes from `size`.
+- **`rowHeight`** `number` — An exact height, when none of the named steps is the answer. Wins over both `rowSize` and `size`.
 - **`headerHeight`** `number`
 - **`isStriped`** `boolean` (default: `true`) — Banding is what makes a wide row readable across.
 - **`isHeaderHidden`** `boolean`
@@ -109,6 +110,20 @@ and everything it knows about the query, in Cloud.
 - **`columnWidths`** `Record<string, number>`
 - **`defaultColumnWidths`** `Record<string, number>`
 - **`onColumnResize`** `(columnKey: string, width: number, all: Record<string, number>) => void`
+- **`isColumnReorderable`** `boolean` (default: `false`) — Drag column headers sideways to reorder them.
+- **`columnOrder`** `string[]` — Controlled order, as column keys. Works with or without dragging.
+- **`defaultColumnOrder`** `string[]`
+- **`onColumnOrderChange`** `(order: string[]) => void` — The full key list, including hidden and pinned columns.
+
+Per column, on `CubeDataTableColumn`: `isReorderable`, `color` and `colorScope` —
+see [Column Colors](#column-colors) for the last two.
+
+#### Column menu
+
+- **`columnContextMenu`** `boolean | 'context-only'` (default: `true`) — Where a column's `header.menu` is exposed.
+- **`onColumnMenuAction`** `(action: string, columnKey: string) => void` — The pressed key, as written.
+- **`columnMenuTriggerProps`** `Record<string, any>`
+- **`columnMenuProps`** `Record<string, any>`
 
 #### Virtualization
 
@@ -119,7 +134,7 @@ and everything it knows about the query, in Cloud.
 #### Other
 
 - **`getRowProps`** `(ctx: CubeTableRowContext<T>) => Record<string, any>` — Per-row mods, styles and height.
-- **`storageKey`** `string` — Persists page size and column widths.
+- **`storageKey`** `string` — Persists page size, column widths and column order.
 - **`ariaLabel`** `string`
 
 #### `dataType`
@@ -286,12 +301,113 @@ succeeds.
 
 ### States
 
+### Sorting Affordance
+
+A sortable header shows nothing at rest. Hover it — or focus it from the keyboard
+— and the sort arrow fades in at 40%, pointing the way a press would sort it
+(ascending, for a column that is currently unsorted). Press it and the arrow goes
+solid and stays that way with the pointer gone, which is what separates a hint
+from a state.
+
+The arrow keeps its slot throughout, so none of this shifts the label. A
+non-sortable column has no arrow at all — the hint is not a reason to render one.
+
+### Column Menu
+
+A column exposes a menu through `header.menu`, opened from a `⋮` trigger in the
+header, by right-click, or with `Shift`+`F10`. The contents are opaque — the grid
+mounts the node and reports the pressed key back through `onColumnMenuAction`,
+which is what keeps Cube vocabulary out of the kit.
+
+Sorting is the exception, because it is the one thing the table itself can do.
+`columnSortMenu()` returns `sort-asc` / `sort-desc` / `clear-sort` items that the
+table labels from the current locale, disables when they would do nothing, and
+applies before telling the consumer. Everything else is yours:
+
+```tsx
+import { columnSortMenu, Menu } from '@cube-dev/ui-kit';
+
+const columns = [
+  {
+    key: 'revenue',
+    title: 'Revenue',
+    isSortable: true,
+    header: {
+      menu: (
+        <>
+          {columnSortMenu()}
+          <Menu.Item key="pin">Pin column</Menu.Item>
+        </>
+      ),
+    },
+  },
+];
+
+<DataTable
+  columns={columns}
+  onColumnMenuAction={(action, columnKey) => {
+    if (action === 'pin') pinColumn(columnKey);
+  }}
+/>;
+```
+
+Pressing the trigger never sorts the column: the header's `Item` swallows the
+click, which is why it sits *inside* the `<th>` rather than being it.
+
+### Column Reordering
+
+`isColumnReorderable` lets a user drag a header sideways, or move the focused
+column with `Alt`+`←` / `→`. Clicking still sorts and the resize handle still
+resizes.
+
+Structural and pinned columns stay put — `pin` is already the ordering authority
+for a pinned column — and a single column opts out with `isReorderable: false`.
+`columnOrder` works on its own too, so a column manager elsewhere in the page can
+drive the order without any dragging.
+
+A stale order is safe: keys for columns that no longer exist are ignored, and a
+column missing from the list lands after the neighbour it had in `columns`
+rather than being swept to the end.
+
+### Column Colors
+
+`column.color` tints a whole column — header, cells and pinned totals. It takes a
+palette theme name, any CSS color, a `{ hue, saturation }` seed, or a
+`{ fill, text }` pair for full manual control.
+
+Every form but the last is *derived*: only the hue and saturation are kept, and
+the tone ramp plus an AA/AAA text floor are re-solved for light, dark and
+high-contrast. A column cannot end up unreadable in a scheme nobody checked.
+
+```tsx
+const columns = [
+  { key: 'orders', title: 'Orders', color: 'note' },
+  { key: 'revenue', title: 'Revenue', color: 'success' },
+  { key: 'conversion', title: 'Conversion', color: '#0ea5e9' },
+  // Header only, cells left neutral.
+  { key: 'region', title: 'Region', color: 'danger', colorScope: ['header'] },
+];
+```
+
+Row banding survives inside a tinted column: the tint carries its own band one
+tone step away, so the stripe still reads down the column instead of being
+painted over.
+
+Under the hood each distinct color becomes a small adaptive theme named by a hash
+of its config, registered once per document — so ten columns sharing a color cost
+one set of tokens. That machinery is public as `useColorTheme` if you want it
+elsewhere.
+
 ## Accessibility
 
 The table is a `role="grid"` with document-absolute `aria-rowindex` /
 `aria-colindex`, and `aria-rowcount` counts pinned rows. Every sorted column
 carries `aria-sort`, not just the first.
 
+A header cell takes a tab stop when it is interactive — sortable, carrying a
+menu, or reorderable. `Shift`+`F10` opens the column menu from the keyboard, and
+`Alt`+`←` / `→` moves a reorderable column, so neither needs a pointer.
+
 ## Related Components
 
 - ItemTable — a list of things to act on.