@cube-dev/ui-kit 0.137.0 → 0.138.0

package/dist/utils/react/useKeySymbols.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.137.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.138.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.137.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.138.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.137.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.138.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.137.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.138.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.137.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.138.0 | Cube Dev Team */
 import { useEventBus } from "./useEventBus.js";
 import { useEffect, useRef } from "react";
 

package/dist/utils/react/useQaProps.js

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

package/dist/version.d.ts

@@ -4,9 +4,12 @@ declare global {
   interface Window {
     CubeUIKit: {
       version: string;
+      tastyVersion: string;
     };
   }
   /** Replaced at build time by tsdown `define` */
   const __UIKIT_VERSION__: string;
+  /** Replaced at build time by tsdown `define` */
+  const __TASTY_VERSION__: string;
 }
 //# sourceMappingURL=version.d.ts.map

package/dist/version.js

@@ -1,13 +1,21 @@
-/** @license MIT | @cube-dev/ui-kit v0.137.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.138.0 | Cube Dev Team */
 //#region src/version.ts
-const VERSION = "0.137.0";
+const VERSION = "0.138.0";
+const TASTY_VERSION = "2.6.0";
 if (typeof window !== "undefined") {
 	const version = VERSION;
-	window.CubeUIKit = window.CubeUIKit || { version };
+	const tastyVersion = TASTY_VERSION;
+	window.CubeUIKit = window.CubeUIKit || {
+		version,
+		tastyVersion
+	};
 	if (window.CubeUIKit.version && window.CubeUIKit.version !== version) console.error("More than one version of CubeUIKit is loaded", { loadedVersions: [window.CubeUIKit.version, version] });
-	else window.CubeUIKit.version = version;
+	else {
+		window.CubeUIKit.version = version;
+		window.CubeUIKit.tastyVersion = tastyVersion;
+	}
 }
 
 //#endregion
-export { VERSION };
+export { TASTY_VERSION, VERSION };
 //# sourceMappingURL=version.js.map

package/dist/version.js.map

@@ -1 +1 @@
-{"version":3,"file":"version.js","names":[],"sources":["../src/version.ts"],"sourcesContent":["declare global {\n  interface Window {\n    CubeUIKit: {\n      version: string;\n    };\n  }\n\n  /** Replaced at build time by tsdown `define` */\n  const __UIKIT_VERSION__: string;\n}\n\n// eslint-disable-next-line no-undef -- replaced at build time by tsdown `define`\nexport const VERSION: string = __UIKIT_VERSION__;\n\nif (typeof window !== 'undefined') {\n  const version = VERSION;\n\n  // Ensure CubeUIKit is defined on window in a way bundlers recognize\n  window.CubeUIKit = window.CubeUIKit || { version };\n\n  // Check for multiple versions\n  if (window.CubeUIKit.version && window.CubeUIKit.version !== version) {\n    console.error('More than one version of CubeUIKit is loaded', {\n      loadedVersions: [window.CubeUIKit.version, version],\n    });\n  } else {\n    // Set version if not already set\n    window.CubeUIKit.version = version;\n  }\n}\n"],"mappings":";;AAYA,MAAa;AAEb,IAAI,OAAO,WAAW,aAAa;CACjC,MAAM,UAAU;AAGhB,QAAO,YAAY,OAAO,aAAa,EAAE,SAAS;AAGlD,KAAI,OAAO,UAAU,WAAW,OAAO,UAAU,YAAY,QAC3D,SAAQ,MAAM,gDAAgD,EAC5D,gBAAgB,CAAC,OAAO,UAAU,SAAS,QAAQ,EACpD,CAAC;KAGF,QAAO,UAAU,UAAU"}
+{"version":3,"file":"version.js","names":[],"sources":["../src/version.ts"],"sourcesContent":["declare global {\n  interface Window {\n    CubeUIKit: {\n      version: string;\n      tastyVersion: string;\n    };\n  }\n\n  /** Replaced at build time by tsdown `define` */\n  const __UIKIT_VERSION__: string;\n  /** Replaced at build time by tsdown `define` */\n  const __TASTY_VERSION__: string;\n}\n\n// eslint-disable-next-line no-undef -- replaced at build time by tsdown `define`\nexport const VERSION: string = __UIKIT_VERSION__;\n// eslint-disable-next-line no-undef -- replaced at build time by tsdown `define`\nexport const TASTY_VERSION: string = __TASTY_VERSION__;\n\nif (typeof window !== 'undefined') {\n  const version = VERSION;\n  const tastyVersion = TASTY_VERSION;\n\n  // Ensure CubeUIKit is defined on window in a way bundlers recognize\n  window.CubeUIKit = window.CubeUIKit || { version, tastyVersion };\n\n  // Check for multiple versions\n  if (window.CubeUIKit.version && window.CubeUIKit.version !== version) {\n    console.error('More than one version of CubeUIKit is loaded', {\n      loadedVersions: [window.CubeUIKit.version, version],\n    });\n  } else {\n    window.CubeUIKit.version = version;\n    window.CubeUIKit.tastyVersion = tastyVersion;\n  }\n}\n"],"mappings":";;AAeA,MAAa;AAEb,MAAa;AAEb,IAAI,OAAO,WAAW,aAAa;CACjC,MAAM,UAAU;CAChB,MAAM,eAAe;AAGrB,QAAO,YAAY,OAAO,aAAa;EAAE;EAAS;EAAc;AAGhE,KAAI,OAAO,UAAU,WAAW,OAAO,UAAU,YAAY,QAC3D,SAAQ,MAAM,gDAAgD,EAC5D,gBAAgB,CAAC,OAAO,UAAU,SAAS,QAAQ,EACpD,CAAC;MACG;AACL,SAAO,UAAU,UAAU;AAC3B,SAAO,UAAU,eAAe"}

package/docs/Usage.md

@@ -69,13 +69,14 @@ Defined in `src/tokens/sizes.ts`. Used for component heights and icon sizes.
 
 ## Shadow Tokens
 
-Defined in `src/tokens/shadows.ts`.
+Defined in `src/tokens/shadows.ts`. Shadow colors (`#shadow-sm`, `#shadow-md`, `#shadow-lg`) are generated by Glaze and adapt automatically to dark / high-contrast schemes.
 
 | Token | Value |
 |-------|-------|
-| `$item-shadow` | `0 1bw 0.375x #dark.15` |
-| `$card-shadow` | `0 0.5x 2x #shadow` |
-| `$dialog-shadow` | `0 1x 4x #dark.15` |
+| `$item-shadow` | `0 1bw 0.375x #shadow-sm` |
+| `$card-shadow` | `0 0.5x 2x #shadow-md` |
+| `$shadow` | `0 0.5x 2x #shadow-md` |
+| `$dialog-shadow` | `0 1x 4x #shadow-lg` |
 
 ## Layout Tokens
 
@@ -89,43 +90,110 @@ Defined in `src/tokens/layout.ts`.
 
 ## Color Tokens
 
-All color tokens use `#name` syntax in styles. Opacity variants use `#name.NN` (e.g. `#dark.06` for 6% opacity). Defined in `src/tokens/colors.ts`.
+All color tokens use `#name` syntax in styles. Opacity variants use `#name.NN` (e.g. `#surface-text.06` for 6% opacity).
 
-### Base Colors
+The palette is generated by [`@tenphi/glaze`](https://github.com/tenphi/glaze) (see `src/tokens/palette.ts`). Every color token is emitted as a state map with `light`, `@dark`, and `@hc` (high-contrast) variants, so the entire UI Kit adapts to dark / high-contrast schemes automatically.
 
-| Token | Description |
-|-------|-------------|
-| `#white`, `#black`, `#clear` | Absolute white, black, and transparent |
-| `#text` | Default text color |
+### Color Schemes
+
+The `@dark` and `@hc` predefined states are wired up in `src/components/Root.tsx` to support both an attribute opt-in and the user's system preference:
+
+```html
+<!-- Force dark scheme -->
+<html data-schema="dark">
+
+<!-- Force high-contrast scheme -->
+<html data-contrast="high">
+
+<!-- Both can be combined -->
+<html data-schema="dark" data-contrast="high">
+```
+
+When the attribute is absent, the scheme falls back to `@media (prefers-color-scheme: dark)` and `@media (prefers-contrast: more)`.
+
+### Surface & Text Vocabulary
+
+The neutral palette uses a `surface` / `surface-text` model. Each surface depth has its own AAA text color, plus a soft (AA) variant for secondary copy:
+
+| Token | Role |
+|-------|------|
+| `#surface` | Primary background |
+| `#surface-2` | Slightly recessed background (cards, inputs) |
+| `#surface-3` | Deepest background (panels, code blocks) |
+| `#surface-text` | AAA text on `#surface` |
+| `#surface-text-soft` | AA text on `#surface` (secondary copy, body text) |
+| `#surface-text-soft-2` | AA-large text on `#surface` (placeholders, captions) |
+| `#surface-2-text`, `#surface-2-text-soft` | Same scale, anchored to `#surface-2` |
+| `#surface-3-text`, `#surface-3-text-soft` | Same scale, anchored to `#surface-3` |
+
+### Other Neutral Tokens
+
+| Token | Role |
+|-------|------|
 | `#border` | Default border color |
 | `#placeholder` | Input placeholder text |
-| `#shadow` | Shadow color |
-| `#minor` | Secondary/muted text |
 | `#focus` | Focus ring color |
-| `#pink` | Accent pink |
-| `#light` | Light background |
-
-### Semantic Color Groups
+| `#disabled` | Disabled state fill / text |
+| `#pink` | Accent pink (independent hue) |
+| `#shadow-sm` / `#shadow-md` / `#shadow-lg` | Tinted shadow colors (used by `$*-shadow` tokens) |
+| `#overlay` | Dim backdrop (50% transparent) |
+| `#clear` | `transparent` |
 
-Each semantic group provides a base color and variants following the pattern: `#name`, `#name-text`, `#name-bg`, `#name-icon`, `#name-desaturated`, `#name-disabled`.
+### Accent System
 
-| Group | Hue | Purpose |
-|-------|-----|---------|
-| `#primary` / `#purple` | 280.3° | Primary actions, brand color |
-| `#danger` | 23.1° | Errors, destructive actions |
-| `#success` | 156.9° | Success states, confirmations |
-| `#warning` | 84.3° | Warning states, caution |
-| `#note` | 302.3° | Informational notes |
+Each themed color (default, primary, success, danger, warning, note) provides an `accent-*` family anchored to a fixed white "accent surface text". These tokens stay recognizable across schemes (used for branded buttons, CTAs, etc.):
 
-### Neutral Scales
+| Token (default theme; prefixed in others) | Role |
+|-------|------|
+| `#accent-surface` | Saturated brand fill (button bg) |
+| `#accent-surface-2`, `#accent-surface-3` | Darker / more saturated variants |
+| `#accent-surface-text` | Near-white text on accent fill |
+| `#accent-text` | Saturated colored text (used on neutral surface) |
+| `#accent-icon` | Saturated colored icon |
 
-**Dark scale:** `#dark`, `#dark-01` through `#dark-05` — neutral scale from near-black to light gray. **Surfaces:** `#surface`, `#surface-2`, `#surface-3` — layered UI backgrounds.
+In the `default` theme these tokens are unprefixed (`#accent-surface`). In colored themes they are prefixed (`#success-accent-surface`, `#danger-accent-text`, …).
 
-**Purple scale:** `#purple-01` through `#purple-04` — additional purple shades for gradients and accents.
+### Themed Surfaces
 
-### Disabled Colors
+Each colored theme (`primary`, `purple`, `success`, `danger`, `warning`, `note`) also provides its own tinted `<theme>-surface` (banner / chip background) and `<theme>-surface-text` (banner text):
 
-`#disabled`, `#disabled-text`, `#disabled-bg` — dedicated colors for disabled UI elements.
+| Group | Hue | Purpose |
+|-------|-----|---------|
+| `#primary-*` / `#purple-*` | 280.3° | Primary actions, brand color |
+| `#success-*` | 156.9° | Success states, confirmations |
+| `#danger-*` | 23.1° | Errors, destructive actions |
+| `#warning-*` | 84.3° | Warning states, caution |
+| `#note-*` | 302.3° | Informational notes |
+
+For example, a success banner uses `fill: '#success-surface'` + `color: '#success-surface-text'`, while a primary button uses `fill: '#primary-accent-surface'` + `color: '#primary-accent-surface-text'`.
+
+### Legacy Aliases
+
+The previous token names continue to work as aliases (defined at the bottom of `src/tokens/colors.ts`). New code should prefer the Glaze tokens, but existing components do not need to be migrated:
+
+| Legacy | Resolves to |
+|-------|------------|
+| `#text` | `#surface-text-soft` |
+| `#dark` / `#dark-01` | `#surface-text` |
+| `#dark-02` | `#surface-text-soft` |
+| `#dark-03` | `#surface-text-soft-2` |
+| `#dark-04` | `#placeholder` |
+| `#dark-05` | `#border` |
+| `#minor` | `#surface-text-soft.65` |
+| `#shadow` | `#shadow-md` |
+| `#light` | `#surface-3` |
+| `#dark-bg` | `#surface-2` |
+| `#primary` / `#purple` | `#primary-accent-surface` |
+| `#primary-text` / `#purple-text` | `#primary-accent-text` |
+| `#primary-bg` / `#purple-bg` | `#primary-surface` |
+| `#primary-icon` / `#purple-icon` | `#primary-accent-icon` |
+| `#<status>` | `#<status>-accent-surface` |
+| `#<status>-text` | `#<status>-accent-text` |
+| `#<status>-bg` | `#<status>-surface` |
+| `#<status>-icon` | `#<status>-accent-icon` |
+| `#<status>-disabled` | `#disabled` |
+
+`#white`, `#black`, and `#clear` are not defined in the palette — `#white` and `#black` are tasty's built-in named colors, and `#clear` is an alias for `transparent`.
 
 ## Typography Presets
 
@@ -242,7 +310,7 @@ In style value maps, keys define when styles apply. States can be combined with
 fill: {
   '': '#surface',              // default
   ':hover': '#surface-hover',  // pseudo-class
-  disabled: '#disabled-bg',    // data-attribute modifier
+  disabled: '#disabled-surface', // data-attribute modifier
   'type=danger': '#danger',    // data-attribute with value
   '@media(w < 768px)': '...',  // media query
   '@(panel, w >= 300px)': '...', // container query

package/docs/components/content/Card.md

@@ -17,7 +17,7 @@ No component-specific props. Use style props directly.
 - `display` — `block`
 - `flow` — `column`
 - `radius` — `(1cr + 1bw)`
-- `fill` — `#white`
+- `fill` — `#surface`
 - `border` — `#border`
 - `padding` — `1.5x`
 - `preset` — `t3`

package/docs/components/content/InlineInput.md

@@ -31,6 +31,7 @@ Unlike `TextInput`, `InlineInput` is intentionally **not** a form field. It mana
 - **`onSubmit`** `(value: string) => void` — Fires every commit (Enter / submit-on-blur / `ref.stopEditing(true)`), even when the value did not change. Use for side effects (analytics, save toasts).
 - **`onCancel`** `() => void` — Called when editing is cancelled (Escape or empty submit when `allowEmpty` is `false`).
 - **`editTrigger`** `'dblclick' | 'click' | 'none'` (default: `dblclick`) — How edit mode is activated from the display element. Programmatic entry via `ref.startEditing()` works regardless.
+- **`keyboardActivation`** `boolean` (default: `true`) — When `true`, the display element is keyboard-focusable (`tabIndex=0`, `role="button"`) and responds to `Enter`, `F2` and `Space` to enter edit mode. Set to `false` when the host already owns keyboard activation (e.g. an editable tab inside a `<button>`) — exposing the display as a separate tab stop would otherwise nest focus inside the host.
 - **`submitOnBlur`** `boolean` (default: `true`) — Whether to submit when focus leaves the input.
 - **`trimOnSubmit`** `boolean` (default: `true`) — Whether to trim the value on submit.
 - **`allowEmpty`** `boolean` (default: `false`) — When `false`, submitting an empty/whitespace value cancels instead.
@@ -38,6 +39,8 @@ Unlike `TextInput`, `InlineInput` is intentionally **not** a form field. It mana
 - **`isReadOnly`** `boolean` (default: `false`) — When `true`, edit mode cannot be entered, but the display reads as enabled.
 - **`placeholder`** `string` — Placeholder text shown in the input when the draft is empty.
 - **`renderDisplay`** `(value: string) => ReactNode` — Custom render for display (non-editing) mode.
+- **`tooltip`** `boolean | string | AutoTooltipValue` (default: `true`) — Tooltip behaviour for the display value. `true` enables auto-tooltip on overflow (showing the full text when truncated). A string always shows that text. `false` disables the tooltip. Suppressed automatically while editing and when `renderDisplay` is used.
+- **`tooltipPlacement`** `'top' | 'bottom' | 'left' | 'right' | ...` (default: `'top'`) — Default tooltip placement.
 - **`inputStyles`** `Styles` — Convenience prop for styling the `Input` sub-element.
 
 ### Base Properties
@@ -57,10 +60,11 @@ The component exposes a ref with these methods:
 
 #### styles
 
-Customizes the root element of the component.
+Customizes the root element of the component. The root is `inline-flex` with `align-items: baseline` so it integrates cleanly into any inline text context (tabs, headings, paragraphs) without shifting surrounding text. Truncation lives on the inner `Display` sub-element so the root's baseline is not perturbed.
 
 **Sub-elements:**
 
+- `Display` — The block-level wrapper that holds the value in display mode and applies `overflow: hidden` / `text-overflow: ellipsis` for truncation
 - `Input` — The text input rendered in edit mode
 - `Placeholder` — The placeholder text rendered in display mode when the value is empty
 - `Measure` — The hidden text used to auto-size the input (rarely targeted)
@@ -82,13 +86,14 @@ These properties allow direct style application without using the `styles` prop:
 
 The `mods` property is automatically populated. Consumers can target these in their own `styles`:
 
-| Modifier   | Type      | Description                                                          |
-| ---------- | --------- | -------------------------------------------------------------------- |
-| editing    | `boolean` | Currently in edit mode                                               |
-| editable   | `boolean` | `editTrigger` is `dblclick` or `click` and not disabled/read-only    |
-| disabled   | `boolean` | `isDisabled` is `true`                                               |
-| read-only  | `boolean` | `isReadOnly` is `true`                                               |
-| empty      | `boolean` | The committed value is empty                                         |
+| Modifier   | Type      | Description                                                                |
+| ---------- | --------- | -------------------------------------------------------------------------- |
+| editing    | `boolean` | Currently in edit mode                                                     |
+| editable   | `boolean` | `editTrigger` is `dblclick` or `click` and not disabled/read-only          |
+| focused    | `boolean` | Display element is keyboard-focused (`isFocusVisible`) and editable        |
+| disabled   | `boolean` | `isDisabled` is `true`                                                     |
+| read-only  | `boolean` | `isReadOnly` is `true`                                                     |
+| empty      | `boolean` | The committed value is empty                                               |
 
 ## Examples
 
@@ -186,10 +191,48 @@ By default, submitting an empty value cancels. Set `allowEmpty` to keep the empt
 <InlineInput defaultValue="Read-only value" isReadOnly />
 ```
 
+### Overflow & Tooltip
+
+When the value is wider than its container, the display text is truncated with an ellipsis. The full value is shown as a tooltip on hover/focus — no extra props required.
+
+```jsx
+<div style={{ width: 200 }}>
+  <InlineInput defaultValue="A very long inline value that gets truncated…" />
+</div>
+```
+
+To always show a custom tooltip (regardless of overflow), pass a string. To disable the tooltip entirely, pass `false`:
+
+```jsx
+<InlineInput defaultValue="Hover me" tooltip="Click to rename" />
+<InlineInput defaultValue="No tooltip" tooltip={false} />
+```
+
+The truncation behaviour is automatically disabled while editing so the input is never visually clipped while the user types.
+
+### Keyboard Activation
+
+By default the display element is keyboard-focusable (`tabIndex=0`, `role="button"`, `aria-roledescription="editable text"`). Pressing `Enter`, `F2` or `Space` enters edit mode without requiring a pointer. A keyboard focus ring (`#primary` token, rounded) is shown only when the element receives keyboard focus — clicks never trigger the ring.
+
+When `InlineInput` is embedded in a host that already owns keyboard activation (e.g. `Tabs` — each tab is a `<button>` that listens for `F2` itself), pass `keyboardActivation={false}` to avoid creating a nested tab stop inside the host. The imperative `ref.startEditing()` always works regardless of this setting, and the focus ring is suppressed in this mode (the host's focus ring is the one users see).
+
+```jsx
+<InlineInput defaultValue="Press Enter to edit" />
+
+<InlineInput keyboardActivation={false} defaultValue="Host owns the keyboard" />
+```
+
 ## Accessibility
 
 ### Keyboard Navigation
 
+**Display mode** (when `keyboardActivation` is `true`):
+
+- `Tab` — Moves focus to the value
+- `Enter`, `F2`, `Space` — Enter edit mode
+
+**Edit mode**:
+
 - `Enter` — Commit the current draft
 - `Escape` — Cancel and revert to the previous value
 - `Tab` / focus loss — Commits when `submitOnBlur` is `true` (default), otherwise no-op
@@ -197,8 +240,10 @@ By default, submitting an empty value cancels. Set `allowEmpty` to keep the empt
 
 ### ARIA Properties
 
-- **`aria-label`** — Provide a label when the input has no visible label associated. Recommended in all cases.
-- **`aria-labelledby`** — Reference the id of a visible label element.
+- The display element receives `role="button"` and `aria-roledescription="editable text"` when keyboard-focusable, so screen readers announce that the value can be activated for editing.
+- **`aria-label`** — Provide a label when the value alone doesn't convey purpose. Forwarded to both the display element (when focusable) and the inner input. Recommended in all cases.
+- **`aria-labelledby`** — Reference the id of a visible label element. Forwarded the same way.
+- **`aria-disabled`** / **`aria-readonly`** — Set automatically from `isDisabled` / `isReadOnly`.
 
 ### Focus Management
 

package/docs/components/content/PrismCode.md

@@ -24,6 +24,27 @@ Syntax-highlighted code block using Prism. Supports multiple languages.
 
 Supports [Base properties](../../BaseProperties.md).
 
+## Theme
+
+Syntax colors are driven by a dedicated, scheme-aware palette of `code-*`
+tokens. Each token uses a different hue so token classes stay visually
+separable, and every token meets at least **WCAG AA (4.5:1)** contrast
+against `#surface` in light, dark, and high-contrast schemes (AAA in HC).
+
+| Token                | Hue            | Used for                                                       |
+| -------------------- | -------------- | -------------------------------------------------------------- |
+| `#code-comment`      | gray           | comments, prolog, doctype, cdata                               |
+| `#code-punctuation`  | muted pink     | operators, punctuation                                         |
+| `#code-keyword`      | pink           | keywords, booleans, constants, atrules (`font-weight: 500`)    |
+| `#code-string`       | primary purple | strings, characters, attribute values, URLs                    |
+| `#code-number`       | green          | numbers, numeric entities                                      |
+| `#code-function`     | pink           | functions, class names, regex, variables                       |
+| `#code-attribute`    | cyan           | tags, attribute names, properties, selectors, built-ins, keys  |
+
+Diff insertion (`+`) and deletion (`-`) intentionally re-use the existing
+`#success-*` / `#danger-*` ramps — both the line background tint and the
+foreground color adapt to the active scheme.
+
 ## Examples
 
 ```jsx

package/docs/components/form/Field.md

@@ -197,7 +197,7 @@ const InputElement = tasty({
     padding: '1x 1.5x',
     border: true,
     radius: '1r',
-    fill: '#white',
+    fill: '#surface',
     color: '#dark-02',
     transition: 'theme',
 

package/docs/components/layout/ResizablePanel.md

@@ -50,7 +50,7 @@ These properties allow direct style application without using the `styles` prop:
 ### Resizable sidebar
 
 ```jsx
-<Panel isFlex isStretched height="min 30x" fill="#white">
+<Panel isFlex isStretched height="min 30x" fill="#surface">
   <ResizablePanel direction="right">
     <Block padding="1x">Sidebar content</Block>
   </ResizablePanel>

package/docs/components/navigation/Tabs.md

@@ -345,6 +345,8 @@ Add dropdown menus to tabs using the `menu` prop. This replaces the need for man
 
 Combine editable tabs with a menu for rename, duplicate, and delete actions. The inline editing UI is provided by [InlineInput](../content/InlineInput.md), which can also be used standalone elsewhere.
 
+> For editable tabs the `tooltip` prop is rendered by `InlineInput` rather than by the surrounding tab button. This keeps the tooltip in sync with the editing UI (and avoids a double tooltip) — the trigger area is the title content, not the entire tab button. Long titles also get an automatic ellipsis + overflow tooltip without any extra configuration.
+
 ```jsx
 <Tabs
   isEditable

package/docs/components/organisms/FileTabs.md

@@ -21,7 +21,7 @@ A tab bar for file-like items with close buttons and dirty state indicators. Des
 
 - Tab `radius` — `1r 1r 0 0`
 - Tab `padding` — `1x 1.5x`
-- Tab `fill` — `#dark.04` (active tabs use `#white`)
+- Tab `fill` — `#dark.04` (active tabs use `#surface`)
 - Tab gap — `.5x`
 
 ### Base Properties

package/docs/components/organisms/StatsCard.md

@@ -22,7 +22,7 @@ Extends Card with:
 - `placeContent` — `space-between`
 - `gap` — `1x`
 - `border` — none
-- `shadow` — `0 2px 6px #dark.10`
+- `shadow` — `$shadow` (design-system elevation token, scheme-aware via `#shadow-md`)
 - `padding` — `2.5x`
 
 ### Base Properties

package/docs/tasty/configuration.md

@@ -61,6 +61,7 @@ These docs use `data-schema="dark"` in examples. If your app already standardize
 | `presets` | `Record<string, TypographyPreset>` | - | Typography presets — shorthand for `generateTypographyTokens()` |
 | `globalStyles` | `Record<string, Styles>` | - | Global Tasty styles keyed by CSS selector |
 | `colorSpace` | `'rgb' \| 'hsl' \| 'oklch'` | `'oklch'` | Color space for decomposed color token companion variables |
+| `namePrefix` | `string` | `'t'` (runtime) / `'ts'` (zero-runtime) | Prefix prepended to every generated identifier (class, keyframe, counter-style names). See [Name prefix](#name-prefix). |
 
 ---
 
@@ -84,6 +85,49 @@ The `oklch` color space is the default because it provides perceptually uniform
 
 ---
 
+## Name Prefix
+
+Every identifier Tasty generates — class names, keyframe names, counter-style names — starts with a configurable prefix. The runtime, SSR, and RSC paths default to `'t'`; the zero-runtime build path (`tastyStatic` via the Babel plugin) defaults to `'ts'` so static-extracted classes can never collide with runtime classes when both are loaded on the same page.
+
+```jsx
+configure({
+  namePrefix: 'mb',
+});
+```
+
+The prefix is prepended verbatim to the hash, so include any separator inside the prefix string itself:
+
+| Setting | Class | Keyframe | Counter-style |
+|---|---|---|---|
+| `'t'` (runtime default) | `t1a2b3` | `tk1a2b3` | `tc1a2b3` |
+| `'ts'` (zero-runtime default) | `ts1a2b3` | `tsk1a2b3` | `tsc1a2b3` |
+| `'mb'` | `mb1a2b3` | `mbk1a2b3` | `mbc1a2b3` |
+| `'myapp-'` | `myapp-1a2b3` | `myapp-k1a2b3` | `myapp-c1a2b3` |
+
+The single-letter discriminators (`k` for keyframes, `c` for counter-styles) keep the three kinds visually distinct in devtools — they are not required for correctness because CSS keeps these in separate namespaces.
+
+### Rules
+
+- Must match `^[a-zA-Z_][a-zA-Z0-9_-]{0,31}$`. Examples that pass: `'t'`, `'ts'`, `'app'`, `'myapp-'`, `'_foo'`. Examples that fail: `''`, `'1foo'`, `'my app'`.
+- Validated at `configure()` time; an invalid prefix throws synchronously rather than silently producing broken hydration.
+- Locked once styles have been generated, like all other config.
+
+### Coexistence with the zero-runtime build
+
+The runtime and zero-runtime builds **must use different prefixes** when both are loaded on the same page. Defaults already guarantee this; if you customize one, customize the other accordingly:
+
+```jsx
+// app config (runtime / SSR / RSC)
+configure({ namePrefix: 'mb' });
+
+// tasty-zero.config.ts (Babel plugin)
+export default { namePrefix: 'mbs' };
+```
+
+If you only use one of the two builds, you only need to set `namePrefix` on that path.
+
+---
+
 ## Design Tokens
 
 Design tokens define CSS custom properties on `:root`. They are injected automatically when the first style is rendered. Values are parsed through the Tasty DSL, so you can use units, color syntax, and other DSL features.

package/docs/tasty/dsl.md

@@ -52,22 +52,23 @@ styles: { Title: { preset: 'h3' } }
 
 #### Selector Affix (`$`)
 
-Control how a sub-element selector attaches to the root selector using the `$` property inside the sub-element's styles:
+Control how a sub-element selector attaches to the root selector using the `$` property inside the sub-element's styles.
+
+Examples below assume the sub-element key is **Cell** (i.e. `[data-element="Cell"]` in CSS):
 
 | Pattern | Result | Description |
 |---------|--------|-------------|
-| *(none)* | ` [el]` | Descendant (default) |
-| `>` | `> [el]` | Direct child |
-| `>Body>Row>` | `> [Body] > [Row] > [el]` | Chained elements |
-| `> SubElementName` | `> [SubElementName]` | Self-name shorthand — when the trailing element name matches the sub-element's own key, it acts as the placeholder (same as `@`); no duplication |
-| `h1` | ` h1` | Tag selector (no key injection) |
-| `h1 >` | ` h1 > [el]` | Key is direct child of tag |
-| `h1 *` | ` h1 *` | Any descendant of tag |
-| `*` | ` *` | All descendants |
-| `::before` | `::before` | Root pseudo (no key) |
-| `@::before` | `[el]::before` | Pseudo on the sub-element |
-| `>@:hover` | `> [el]:hover` | Pseudo-class on the sub-element |
-| `>@.active` | `> [el].active` | Class on the sub-element |
+| *(none)* | `[data-element="Cell"]` | Descendant (default) |
+| `>` | `> [data-element="Cell"]` | Direct child |
+| `>Body>` | `> [data-element="Body"] > [data-element="Cell"]` | Chained elements |
+| `> Cell` | `> [data-element="Cell"]` | Self-name shorthand — when the trailing element name matches the sub-element's own key, it acts as the placeholder (same as `@`); no duplication |
+| `h1` | `h1` | Tag selector (no key injection) |
+| `h1 >` | `h1 > [data-element="Cell"]` | Key is direct child of tag |
+| `h1 *` | `h1 *` | Any descendant of tag |
+| `*` | `*` | All descendants |
+| `&::before` | `::before` | Root pseudo (no key); `&` is required |
+| `@::before` | `[data-element="Cell"]::before` | Pseudo on the sub-element |
+| `>@.active` | `> [data-element="Cell"].active` | Class on the sub-element |
 
 Rules for key injection (`[data-element="..."]`):