@cube-dev/ui-kit 0.188.0 → 0.190.0

package/dist/utils/styles.js

@@ -1,5 +1,53 @@
-/** @license MIT | @cube-dev/ui-kit v0.188.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.190.0 | Cube Dev Team */
+import { isSelector, mergeStyles } from "@tenphi/tasty";
+
 //#region src/utils/styles.ts
+function isRecord(value) {
+	return !!value && typeof value === "object" && !Array.isArray(value);
+}
+/**
+* The keys whose last explicit value across `layers` is a reset: `null`, or
+* `false` too where `allowFalse` (a sub-element key, which tasty drops for
+* either).
+*/
+function finalResets(layers, allowFalse) {
+	const last = /* @__PURE__ */ new Map();
+	for (const layer of layers) for (const key of Object.keys(layer)) if (layer[key] !== void 0) last.set(key, layer[key]);
+	return [...last].filter(([key, value]) => value === null || value === false && allowFalse && isSelector(key));
+}
+/**
+* Merge runtime style layers with tasty's `mergeStyles`, later layers winning.
+* This is the algorithm tasty applies between an element's own styles and its
+* `styles` prop: a state map without a `''` key extends the one below it,
+* sub-elements merge key by key, and `undefined` keeps the lower value.
+*
+* Resets are the one difference. The result is not final: it is passed on as
+* some element's `styles`, which tasty merges over that element's own styles
+* once more. `mergeStyles` applies a `null` by deleting the key, so a consumer's
+* `{ padding: null }` would vanish here, before it reached the element whose
+* padding it was meant to remove. Every reset that is the last word on its key,
+* top-level or inside a sub-element, is therefore written back into the result.
+*/
+function mergeStyleLayers(...layers) {
+	const present = layers.filter(isRecord);
+	const merged = mergeStyles(...present);
+	for (const [key, value] of finalResets(present, true)) merged[key] = value;
+	for (const key of Object.keys(merged)) {
+		if (!isSelector(key) || !isRecord(merged[key])) continue;
+		let subLayers = [];
+		for (const layer of present) {
+			const sub = layer[key];
+			if (sub === null || sub === false) subLayers = [];
+			else if (isRecord(sub)) subLayers.push(sub);
+		}
+		const resets = finalResets(subLayers, false);
+		if (resets.length) merged[key] = {
+			...merged[key],
+			...Object.fromEntries(resets)
+		};
+	}
+	return merged;
+}
 /**
 * Split properties into style and non-style properties.
 * Collects style-related props from `props` (based on `styleList`)
@@ -15,10 +63,7 @@ function extractStyles(props, styleList = [], defaultStyles, propMap, ignoreList
 	const ignoreSet = new Set(ignoreList);
 	const styleSet = new Set(styleList);
 	const record = props;
-	const styles = {
-		...defaultStyles,
-		...!ignoreSet.has("styles") && record.styles && typeof record.styles === "object" ? record.styles : void 0
-	};
+	const styles = mergeStyleLayers(defaultStyles, !ignoreSet.has("styles") && record.styles && typeof record.styles === "object" ? record.styles : void 0);
 	for (const prop of Object.keys(record)) {
 		if (ignoreSet.has(prop)) continue;
 		const styleName = propMap?.[prop] ?? prop;
@@ -28,5 +73,5 @@ function extractStyles(props, styleList = [], defaultStyles, propMap, ignoreList
 }
 
 //#endregion
-export { extractStyles };
+export { extractStyles, mergeStyleLayers };
 //# sourceMappingURL=styles.js.map

package/dist/utils/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","names":["Styles","extractStyles","props","styleList","defaultStyles","propMap","Record","ignoreList","ignoreSet","Set","styleSet","record","styles","has","undefined","prop","Object","keys","styleName"],"sources":["../../src/utils/styles.ts"],"sourcesContent":["import type { Styles } from '@tenphi/tasty';\n\n/**\n * Split properties into style and non-style properties.\n * Collects style-related props from `props` (based on `styleList`)\n * and merges them with `defaultStyles` and `props.styles`.\n *\n * @param props - Component prop map.\n * @param styleList - List of style property names to extract.\n * @param defaultStyles - Default style map of the component.\n * @param propMap - Props-to-style alias map (e.g. `{ bg: 'fill' }`).\n * @param ignoreList - Properties to skip during extraction.\n */\nexport function extractStyles(\n  props: object,\n  styleList: readonly string[] = [],\n  defaultStyles?: Styles,\n  propMap?: Record<string, string>,\n  ignoreList: readonly string[] = [],\n): Styles {\n  const ignoreSet = new Set(ignoreList);\n  const styleSet = new Set(styleList);\n  const record = props as Record<string, unknown>;\n\n  const styles: Styles = {\n    ...defaultStyles,\n    ...(!ignoreSet.has('styles') &&\n    record.styles &&\n    typeof record.styles === 'object'\n      ? (record.styles as Styles)\n      : undefined),\n  };\n\n  for (const prop of Object.keys(record)) {\n    if (ignoreSet.has(prop)) continue;\n\n    const styleName = propMap?.[prop] ?? prop;\n\n    if (styleSet.has(styleName)) {\n      styles[styleName] = record[prop] as Styles[keyof Styles];\n    }\n  }\n\n  return styles;\n}\n"],"mappings":";;;;;;;;;;;;;AAaA,SAAgBC,cACdC,OACAC,YAA+B,EAAE,EACjCC,eACAC,SACAE,aAAgC,EAAE,EAC1B;CACR,MAAMC,YAAY,IAAIC,IAAIF,WAAW;CACrC,MAAMG,WAAW,IAAID,IAAIN,UAAU;CACnC,MAAMQ,SAAST;CAEf,MAAMU,SAAiB;EACrB,GAAGR;EACH,GAAI,CAACI,UAAUK,IAAI,SAAS,IAC5BF,OAAOC,UACP,OAAOD,OAAOC,WAAW,WACpBD,OAAOC,SACRE;EACL;AAED,MAAK,MAAMC,QAAQC,OAAOC,KAAKN,OAAO,EAAE;AACtC,MAAIH,UAAUK,IAAIE,KAAK,CAAE;EAEzB,MAAMG,YAAYb,UAAUU,SAASA;AAErC,MAAIL,SAASG,IAAIK,UAAU,CACzBN,QAAOM,aAAaP,OAAOI;;AAI/B,QAAOH"}
+{"version":3,"file":"styles.js","names":["isSelector","mergeStyles","Styles","StyleLayer","StyleRecord","Record","isRecord","value","Array","isArray","finalResets","layers","allowFalse","last","Map","layer","key","Object","keys","undefined","set","filter","mergeStyleLayers","present","merged","subLayers","sub","push","resets","length","fromEntries","extractStyles","props","styleList","defaultStyles","propMap","ignoreList","ignoreSet","Set","styleSet","record","styles","has","prop","styleName"],"sources":["../../src/utils/styles.ts"],"sourcesContent":["import { isSelector, mergeStyles } from '@tenphi/tasty';\n\nimport type { Styles } from '@tenphi/tasty';\n\ntype StyleLayer = Styles | null | undefined;\ntype StyleRecord = Record<string, unknown>;\n\nfunction isRecord(value: unknown): value is StyleRecord {\n  return !!value && typeof value === 'object' && !Array.isArray(value);\n}\n\n/**\n * The keys whose last explicit value across `layers` is a reset: `null`, or\n * `false` too where `allowFalse` (a sub-element key, which tasty drops for\n * either).\n */\nfunction finalResets(layers: StyleRecord[], allowFalse: boolean) {\n  const last = new Map<string, unknown>();\n\n  for (const layer of layers) {\n    for (const key of Object.keys(layer)) {\n      if (layer[key] !== undefined) last.set(key, layer[key]);\n    }\n  }\n\n  return [...last].filter(\n    ([key, value]) =>\n      value === null || (value === false && allowFalse && isSelector(key)),\n  );\n}\n\n/**\n * Merge runtime style layers with tasty's `mergeStyles`, later layers winning.\n * This is the algorithm tasty applies between an element's own styles and its\n * `styles` prop: a state map without a `''` key extends the one below it,\n * sub-elements merge key by key, and `undefined` keeps the lower value.\n *\n * Resets are the one difference. The result is not final: it is passed on as\n * some element's `styles`, which tasty merges over that element's own styles\n * once more. `mergeStyles` applies a `null` by deleting the key, so a consumer's\n * `{ padding: null }` would vanish here, before it reached the element whose\n * padding it was meant to remove. Every reset that is the last word on its key,\n * top-level or inside a sub-element, is therefore written back into the result.\n */\nexport function mergeStyleLayers(...layers: StyleLayer[]): Styles {\n  const present = layers.filter(isRecord) as StyleRecord[];\n  const merged = mergeStyles(...(present as Styles[])) as StyleRecord;\n\n  for (const [key, value] of finalResets(present, true)) merged[key] = value;\n\n  for (const key of Object.keys(merged)) {\n    if (!isSelector(key) || !isRecord(merged[key])) continue;\n\n    // The sub-element's layers since its last wholesale reset.\n    let subLayers: StyleRecord[] = [];\n\n    for (const layer of present) {\n      const sub = layer[key];\n\n      if (sub === null || sub === false) subLayers = [];\n      else if (isRecord(sub)) subLayers.push(sub);\n    }\n\n    const resets = finalResets(subLayers, false);\n\n    // Copied first: a sub-element present in one layer is that layer's object.\n    if (resets.length)\n      merged[key] = { ...merged[key], ...Object.fromEntries(resets) };\n  }\n\n  return merged as Styles;\n}\n\n/**\n * Split properties into style and non-style properties.\n * Collects style-related props from `props` (based on `styleList`)\n * and merges them with `defaultStyles` and `props.styles`.\n *\n * @param props - Component prop map.\n * @param styleList - List of style property names to extract.\n * @param defaultStyles - Default style map of the component.\n * @param propMap - Props-to-style alias map (e.g. `{ bg: 'fill' }`).\n * @param ignoreList - Properties to skip during extraction.\n */\nexport function extractStyles(\n  props: object,\n  styleList: readonly string[] = [],\n  defaultStyles?: Styles,\n  propMap?: Record<string, string>,\n  ignoreList: readonly string[] = [],\n): Styles {\n  const ignoreSet = new Set(ignoreList);\n  const styleSet = new Set(styleList);\n  const record = props as Record<string, unknown>;\n\n  // `props.styles` over the component defaults. The result is always a fresh\n  // object, so the style props below can be assigned onto it.\n  const styles = mergeStyleLayers(\n    defaultStyles,\n    !ignoreSet.has('styles') &&\n      record.styles &&\n      typeof record.styles === 'object'\n      ? (record.styles as Styles)\n      : undefined,\n  );\n\n  for (const prop of Object.keys(record)) {\n    if (ignoreSet.has(prop)) continue;\n\n    const styleName = propMap?.[prop] ?? prop;\n\n    if (styleSet.has(styleName)) {\n      styles[styleName] = record[prop] as Styles[keyof Styles];\n    }\n  }\n\n  return styles;\n}\n"],"mappings":";;;;AAOA,SAASM,SAASC,OAAsC;AACtD,QAAO,CAAC,CAACA,SAAS,OAAOA,UAAU,YAAY,CAACC,MAAMC,QAAQF,MAAM;;;;;;;AAQtE,SAASG,YAAYC,QAAuBC,YAAqB;CAC/D,MAAMC,uBAAO,IAAIC,KAAsB;AAEvC,MAAK,MAAMC,SAASJ,OAClB,MAAK,MAAMK,OAAOC,OAAOC,KAAKH,MAAM,CAClC,KAAIA,MAAMC,SAASG,OAAWN,MAAKO,IAAIJ,KAAKD,MAAMC,KAAK;AAI3D,QAAO,CAAC,GAAGH,KAAK,CAACQ,QACd,CAACL,KAAKT,WACLA,UAAU,QAASA,UAAU,SAASK,cAAcZ,WAAWgB,IACnE,CAAC;;;;;;;;;;;;;;;AAgBH,SAAgBM,iBAAiB,GAAGX,QAA8B;CAChE,MAAMY,UAAUZ,OAAOU,OAAOf,SAAS;CACvC,MAAMkB,SAASvB,YAAY,GAAIsB,QAAqB;AAEpD,MAAK,MAAM,CAACP,KAAKT,UAAUG,YAAYa,SAAS,KAAK,CAAEC,QAAOR,OAAOT;AAErE,MAAK,MAAMS,OAAOC,OAAOC,KAAKM,OAAO,EAAE;AACrC,MAAI,CAACxB,WAAWgB,IAAI,IAAI,CAACV,SAASkB,OAAOR,KAAK,CAAE;EAGhD,IAAIS,YAA2B,EAAE;AAEjC,OAAK,MAAMV,SAASQ,SAAS;GAC3B,MAAMG,MAAMX,MAAMC;AAElB,OAAIU,QAAQ,QAAQA,QAAQ,MAAOD,aAAY,EAAE;YACxCnB,SAASoB,IAAI,CAAED,WAAUE,KAAKD,IAAI;;EAG7C,MAAME,SAASlB,YAAYe,WAAW,MAAM;AAG5C,MAAIG,OAAOC,OACTL,QAAOR,OAAO;GAAE,GAAGQ,OAAOR;GAAM,GAAGC,OAAOa,YAAYF,OAAM;GAAG;;AAGnE,QAAOJ;;;;;;;;;;;;;AAcT,SAAgBO,cACdC,OACAC,YAA+B,EAAE,EACjCC,eACAC,SACAC,aAAgC,EAAE,EAC1B;CACR,MAAMC,YAAY,IAAIC,IAAIF,WAAW;CACrC,MAAMG,WAAW,IAAID,IAAIL,UAAU;CACnC,MAAMO,SAASR;CAIf,MAAMS,SAASnB,iBACbY,eACA,CAACG,UAAUK,IAAI,SAAS,IACtBF,OAAOC,UACP,OAAOD,OAAOC,WAAW,WACtBD,OAAOC,SACRtB,OACL;AAED,MAAK,MAAMwB,QAAQ1B,OAAOC,KAAKsB,OAAO,EAAE;AACtC,MAAIH,UAAUK,IAAIC,KAAK,CAAE;EAEzB,MAAMC,YAAYT,UAAUQ,SAASA;AAErC,MAAIJ,SAASG,IAAIE,UAAU,CACzBH,QAAOG,aAAaJ,OAAOG;;AAI/B,QAAOF"}

package/dist/utils/tree.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.188.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.190.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.188.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.190.0 | Cube Dev Team */
 import { isDevEnvOrTest } from "./is-dev-env.js";
 
 //#region src/utils/warnings.ts

package/dist/version.js

@@ -1,7 +1,7 @@
-/** @license MIT | @cube-dev/ui-kit v0.188.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.190.0 | Cube Dev Team */
 //#region src/version.ts
-const VERSION = "0.188.0";
-const TASTY_VERSION = "3.9.3";
+const VERSION = "0.190.0";
+const TASTY_VERSION = "3.9.6";
 if (typeof window !== "undefined") {
 	const version = VERSION;
 	const tastyVersion = TASTY_VERSION;

package/docs/components/content/Result.md

@@ -1,11 +1,12 @@
 # Result
 
-An empty state or result display with icon, title, and optional content. Supports status presets with built-in icons.
+An empty state or result display with icon, title, and optional content. Supports status presets with built-in icons and an actions slot. The `large` size with the `stacked` layout is the vertical card used as the body of a confirmation or result dialog.
 
 ## When to Use
 
 - Empty states (no data, no results)
 - Success/error feedback after actions
+- Confirmation and result dialogs (payment complete, action failed)
 - 404, 403, 500 error pages
 - Informational messages
 
@@ -19,9 +20,35 @@ An empty state or result display with icon, title, and optional content. Support
 - **`title`** `ReactNode` — Main title text
 - **`subtitle`** `ReactNode` — Secondary text below the title
 - **`subTitle`** `ReactNode` — Deprecated: use `subtitle` instead
-- **`icon`** `ReactNode` — Custom icon (overrides status icon)
-- **`isCompact`** `boolean` (default: `false`) — Compact horizontal layout
-- **`children`** `ReactNode` — Additional block content, e.g. a set of action buttons
+- **`icon`** `ReactNode` — Custom icon that replaces the status icon
+- **`size`** `'medium' | 'large'` (default: `'medium'`) — Visual scale: the icon size and the title and subtitle presets. Does not change the layout. Ignored when `isCompact` is set
+- **`layout`** `'default' | 'stacked'` (default: `'default'`) — Arrangement of the block. `stacked` fills the container and stacks the actions to the full width, as in a confirmation or result dialog. Ignored when `isCompact` is set
+- **`isCompact`** `boolean` (default: `false`) — Compact horizontal layout. Overrides `size` and `layout`
+- **`actions`** `ReactNode` — Action buttons as `Result.Action` elements: a centered row by default, a full-width column in the `stacked` layout
+- **`children`** `ReactNode` — Free content between the text and the actions
+
+The elements render in this order: icon, title, subtitle, children, actions.
+
+### Result.Action
+
+A `Button` for the `actions` slot. It takes every `Button` prop, and its `size` follows the Result's `size` unless you set one: `medium` buttons in a medium Result, `large` in a large one, `medium` when `isCompact`. A `type="link"` action keeps the `inline` size of a link `Button`. Set `type` on each action as on any `Button`.
+
+### Base Properties
+
+Supports [Base properties](../../BaseProperties.md).
+
+### Styling Properties
+
+#### styles
+
+Customizes the root element of the component.
+
+**Sub-elements:**
+
+- `Icon` - The status icon wrapper. Colored by the `status` modifier, padded on every side by `3x`, or a quarter of `--icon-size` when that is larger (an icon above `12x`), so the room never drops below the spacing between the other blocks, and that room is the whole distance to the title (no padding when `isCompact`). Wraps a custom `icon` too, with the same room and without a status color. Not rendered for a status without an icon (`404`, `403`, `500`)
+- `Title` - The text block holding the title and the subtitle
+- `Content` - The free `children` block
+- `Actions` - The `actions` block
 
 ### Style Defaults
 
@@ -29,15 +56,13 @@ An empty state or result display with icon, title, and optional content. Support
 - `flow` — `column`
 - `placeContent` — `center` (switches to `start` when `isCompact`)
 - `placeItems` — `center` (switches to `start` when `isCompact`)
-- `gap` — `3x` (switches to `2x 1x` when `isCompact`)
-- `padding` — `6x 4x` (switches to `0` when `isCompact`)
+- `gap` — `0`; `Content` and `Actions` keep `3x` from the block above with a top margin (`2x 1x` and no margins when `isCompact`)
+- `padding` — `6x 4x` (`0` when `isCompact`; `1.5x` when `layout="stacked"`, and `0` for a stacked Result inside a `Dialog`, whose `Content` already pads it. The `@in-dialog` state is the Result's own, so `styles={{ padding: { 'layout=stacked & @in-dialog': '1x' } }}` sets it and keeps the rest of the default padding)
 - `textAlign` — `center` (switches to `left` when `isCompact`)
-- `width` — `max 80ch` (caps the readable line length; override via the `width` prop)
+- `boxSizing` — `border-box`
+- `width` — `max 80ch` (caps the readable line length; override via the `width` prop). `100%` up to `80ch` when `layout="stacked"`, so the stacked actions share one width wherever the card sits
 - `margin` — `0 auto` (centers Result horizontally within its parent; switches to `0` when `isCompact`)
-
-### Base Properties
-
-Supports [Base properties](../../BaseProperties.md).
+- `--icon-size` — `6x` (`10x` when `size="large"`)
 
 ### Style Properties
 
@@ -50,8 +75,51 @@ These properties allow direct style application without using the `styles` prop:
 - **Color:** `color`, `fill`, `fade`, `image`
 - **Flow:** `flow`, `place`, `placeItems`, `placeContent`, `alignItems`, `alignContent`, `justifyItems`, `justifyContent`, `align`, `justify`, `gap`, `columnGap`, `rowGap`, `gridColumns`, `gridRows`, `gridTemplate`, `gridAreas`
 
+### Modifiers
+
+The root element exposes these modifiers as `data-*` attributes:
+
+| Modifier | Type | Description |
+| --- | --- | --- |
+| `compact` | `boolean` | Set by `isCompact`: horizontal icon + title layout |
+| `size` | `'medium' \| 'large'` | Set by `size`; `medium` when `isCompact` |
+| `layout` | `'default' \| 'stacked'` | Set by `layout`; `default` when `isCompact` |
+| `status` | `CubeResultStatus` | Set by `status`, `info` by default; drives the icon color. Not set when a custom `icon` is passed |
+
+## Variants
+
+### Sizes
+
+The size scales the content and never changes the arrangement. `isCompact` has its own scale and ignores it.
+
+- `medium` - Default. Icon `6x`, title `h4`, subtitle `t2m`
+- `large` - Icon `10x`, title `h2`, subtitle `t2`, `Result.Action` buttons `large`
+
+### Layouts
+
+The layout arranges the block and never changes the scale. `isCompact` has its own arrangement and ignores it.
+
+- `default` - A centered column capped at `80ch`, actions in a centered row that wraps
+- `stacked` - Fills the container up to `80ch` with a `1.5x` padding of its own (none inside a `Dialog`), actions stacked to the full width, free `children` stretched. Combine with `size="large"` for the vertical card of a confirmation or result dialog
+
 ## Examples
 
+### Basic Usage
+
+```jsx
+<Result
+  status="success"
+  title="Successfully Purchased Cloud Server ECS!"
+  subtitle="Cloud server configuration takes 1-5 minutes, please wait."
+  actions={
+    <>
+      <Result.Action type="primary">Go Console</Result.Action>
+      <Result.Action>Buy Again</Result.Action>
+    </>
+  }
+/>
+```
+
 ### Info
 
 ### Warning
@@ -60,14 +128,136 @@ These properties allow direct style application without using the `styles` prop:
 
 ### Custom Icon
 
+```jsx
+<Result
+  title="Access is denied!"
+  subtitle="Request access from the administrator."
+  icon={
+    <Icon color="#warning">
+      <IconLock />
+    </Icon>
+  }
+  actions={<Result.Action>Request</Result.Action>}
+/>
+```
+
 ### Custom Title
 
 ### Compact
 
+### Large
+
+The `large` size scales the icon and the text. The actions stay in a centered row.
+
+```jsx
+<Result
+  size="large"
+  status="success"
+  title="Payment complete"
+  subtitle="Charged $1,234.00 to Visa **** 4242"
+  actions={
+    <>
+      <Result.Action type="primary">
+        Done
+      </Result.Action>
+      <Result.Action>
+        View invoice
+      </Result.Action>
+    </>
+  }
+/>
+```
+
+### Stacked
+
+The `stacked` layout fills the container and stacks the actions to the full width. With `size="large"` it is the vertical card for confirmation and result dialogs.
+
+```jsx
+<Result
+  size="large"
+  layout="stacked"
+  status="success"
+  title="Payment complete"
+  subtitle="Charged $1,234.00 to Visa **** 4242"
+  actions={
+    <Result.Action type="primary">
+      Done
+    </Result.Action>
+  }
+/>
+```
+
+Free `children` (an alert, details) stretch to the full width in this layout.
+
+### In a Dialog
+
+Inside a `Dialog` the stacked large Result is the whole body: no `Header` and no `Footer`. Its title takes the dialog `title` slot, so the dialog is labelled by it automatically.
+
+```jsx
+<DialogContainer isOpen={isOpen} onDismiss={close}>
+  <Dialog size="S">
+    <Content>
+      <Result
+        size="large"
+        layout="stacked"
+        status="success"
+        title="Payment complete"
+        subtitle="Charged $1,234.00 to Visa **** 4242"
+        actions={
+          <Result.Action type="primary" onPress={close}>
+            Done
+          </Result.Action>
+        }
+      />
+    </Content>
+  </Dialog>
+</DialogContainer>
+```
+
 ### Width Limit
 
 The default `width: max 80ch` keeps long copy in a comfortable reading column even inside a much wider parent. Override the cap by passing your own `width`.
 
+## Accessibility
+
+### Keyboard Navigation
+
+- The component itself is not focusable; the `Result.Action` buttons keep the keyboard behavior of `Button`
+
+### Screen Reader Support
+
+- The title renders as an `h2` heading and the subtitle as an `h3`, so the result is reachable through heading navigation
+- Inside a `Dialog` without a `Header`, the title takes the dialog's `title` slot and becomes its accessible name
+
+## Best Practices
+
+1. **Do**: Put `Result.Action` buttons in `actions` and keep `children` for content
+
+   ```jsx
+   <Result title="Payment failed" actions={<Result.Action>Update card</Result.Action>}>
+     <Alert>Nothing was charged.</Alert>
+   </Result>
+   ```
+
+2. **Don't**: Combine a Result with a dialog `Header`. Both titles would take the dialog `title` slot and share one id
+
+   ```jsx
+   <Dialog>
+     <Header>
+       <Title>Payment</Title>
+     </Header>
+     <Content>
+       <Result size="large" layout="stacked" title="Payment complete" />
+     </Content>
+   </Dialog>
+   ```
+
+## Related Components
+
+- [Dialog](../overlays/Dialog.md) - Host for the stacked large Result card
+- [AlertDialog](../overlays/AlertDialog.md) - Confirmation with a header and footer instead of a result card
+- [Alert](./Alert.md) - Inline status message for the `children` slot
+
 ## Differences from Ant Design
 
 | There are differences | Ant Design property | Cube UIKit property |
@@ -76,4 +266,4 @@ The default `width: max 80ch` keeps long copy in a comfortable reading column ev
 |          No           |       `title`       |       `title`       |
 |          Yes          |     `subTitle`      |     `subtitle`      |
 |          No           |       `icon`        |       `icon`        |
-|          Yes          |       `extra`       |     `children`      |
+|          Yes          |       `extra`       |      `actions`      |

package/docs/components/content/Title.md

@@ -11,6 +11,7 @@ A heading component for section titles. Renders as `h1`–`h6` based on the `lev
 ## Properties
 
 - **`level`** `1 | 2 | 3 | 4 | 5 | 6` (default: `1`) — Heading level (maps to `h1`–`h6` tag and corresponding preset `h1`–`h6`)
+- **`slot`** `string` (default: `'title'`) — The slot to read provided props from, e.g. the `title` slot a `Dialog` labels itself with. Pass another name to opt out
 - **`ellipsis`** `boolean` — Truncate overflow with ellipsis
 - **`nowrap`** `boolean` — Prevent text wrapping
 - **`monospace`** `boolean` — Use monospace font

package/docs/components/overlays/AlertDialog.md

@@ -65,3 +65,133 @@ These properties allow direct style application without using the `styles` prop:
   content="A new version is available. Please refresh to update."
 />
 ```
+
+## Imperative API
+
+`useAlertDialogAPI()` opens an alert dialog from code, such as an event handler, with no `DialogTrigger` to render. It works anywhere under `<Root>`.
+
+- **`open(props, params?)`** `Promise<'confirm' | 'secondary'>` — Opens the dialog. Resolves with the action the user picked, and rejects when the dialog closes without one or cannot open.
+
+`props` takes the properties above, plus:
+
+- **`onConfirm`** `() => unknown` — Runs when the confirm button is pressed. If it returns a promise, the dialog stays open until it settles (see below)
+- **`onSecondary`** `() => unknown` — The same, for the secondary button
+- **`onCancel`** `() => void` — Runs when the dialog settles as a cancel: the Cancel button, Escape, a click outside, an aborted `cancelToken`, or `content` calling `reject()`
+- **`type`** — The dialog container type, as on `DialogContainer`
+- **`isDismissable`** `boolean` (default: `true`) — Whether Escape and a click outside close the dialog
+- **`onDismiss`** `(action?: string) => void` — Called when an action button, Escape or a click outside closes the dialog. An action button passes its name: `'confirm'`, `'secondary'` or `'cancel'`
+- **`content`** can also be a function `({ resolve, reject }) => ReactNode`, for content that closes the dialog itself
+
+`params` takes:
+
+- **`cancelToken`** `AbortSignal` — Closes the dialog when aborted
+
+The confirm button resolves `'confirm'` whether you configure `actions.confirm` or leave the default Ok button. Set it to `false` to hide it.
+
+### Running the action
+
+Pass the action as `onConfirm` and ignore the returned promise. A cancel then needs no handling: an ignored cancel is not reported as an unhandled rejection.
+
+```jsx
+const { open } = useAlertDialogAPI();
+
+const onDelete = () => {
+  open({
+    title: 'Delete the item?',
+    content: 'This cannot be undone.',
+    danger: true,
+    actions: { confirm: { children: 'Delete' }, cancel: true },
+    onConfirm: () => deleteItem(),
+  });
+};
+
+<Button onPress={onDelete}>Delete</Button>;
+```
+
+When `onConfirm` or `onSecondary` returns a promise, the dialog waits for it:
+
+- The pressed button shows a loading state, the other buttons are disabled, and Escape and a click outside are ignored.
+- When the promise resolves, the dialog closes and `open` resolves with the button's status.
+- When it rejects, or the handler throws, the dialog stays open with its buttons enabled again, so the user can retry or cancel. The error is passed to `reportError`, which reaches error reporting such as Sentry. To show it to the user, catch it inside the handler, for example with a toast.
+
+`actions.confirm.onPress` and `actions.secondary.onPress` behave the same way, but they are deprecated: put the action in `onConfirm` or `onSecondary`. If both are set, both run and the dialog waits for both.
+
+A choice between two actions needs no promise either:
+
+```jsx
+open({
+  title: 'Unsaved changes',
+  actions: {
+    confirm: { children: 'Save' },
+    secondary: { children: 'Discard' },
+    cancel: true,
+  },
+  onConfirm: async () => {
+    await save();
+    navigate('/');
+  },
+  onSecondary: () => navigate('/'),
+});
+```
+
+### How the promise settles
+
+| Event | Promise |
+| --- | --- |
+| Confirm or secondary action | resolves `'confirm'` / `'secondary'`, once its handler has finished |
+| Cancel action | rejects with `undefined` |
+| Escape or a click outside | rejects with `undefined` |
+| `cancelToken` aborted, before or while the dialog is open | rejects with `undefined` |
+| `content` calls `resolve(status)` | resolves `status` |
+| `content` calls `reject(reason)` | rejects with `reason` (`undefined` for `reject()`) |
+| Another alert dialog is open | rejects with an `Error` |
+
+A rejection with `undefined` is a cancel: the user chose not to act. Anything else is a real failure. An ignored promise stays quiet on a cancel and still reports a real failure as an unhandled rejection. Once you `await` the promise or chain `.then`, the cancel reaches your code, so handle it there.
+
+### Waiting for the result
+
+Await the promise only when the caller itself needs the answer, such as a guard that returns whether the user agreed:
+
+```jsx
+const confirmLeave = async () => {
+  try {
+    return (await open({ title: 'Leave the page?', actions: { cancel: true } })) === 'confirm';
+  } catch (reason) {
+    // Cancel, Escape or a click outside
+    if (reason === undefined) return false;
+
+    // A real failure, such as another dialog being open
+    throw reason;
+  }
+};
+```
+
+### Closing the dialog from code
+
+```jsx
+const { open } = useAlertDialogAPI();
+const controllerRef = useRef(null);
+
+const onRequestApproval = () => {
+  // A signal stays aborted, so each dialog needs a fresh controller.
+  controllerRef.current = new AbortController();
+
+  open(
+    {
+      title: 'Waiting for approval',
+      content: 'The dialog closes when the approval arrives.',
+      actions: { confirm: { children: 'Hide' } },
+    },
+    { cancelToken: controllerRef.current.signal },
+  );
+};
+
+// Later, for example when the approval arrives:
+controllerRef.current?.abort();
+```
+
+Aborting settles the dialog as a cancel. A signal that is already aborted settles it right away, without showing the dialog.
+
+### One dialog at a time
+
+Only one alert dialog can be open: while one is, `open` rejects with an `Error`. A dialog that is already closing gives way to the new one, so a follow-up dialog opened from the previous one's result, such as a second confirmation, shows normally. The dialog is still open while its `onConfirm` runs, so open a follow-up after the handler, not from inside it.

package/docs/tasty/dsl.md

@@ -538,13 +538,16 @@ Container style queries use `$prop` (boolean) or `$prop=value` syntax, which map
 
 ### `@supports(...)` — Feature Queries
 
-Feature queries test CSS property support. Use `$` as the first argument to test selector support:
+Feature queries test CSS property support and accept CSS support functions such
+as `at-rule()`. Use `$` as the first argument to test selector support:
 
-| Tasty syntax                | CSS output                        |
-| --------------------------- | --------------------------------- |
-| `@supports(display: grid)`  | `@supports (display: grid)`       |
-| `@supports($, :has(*))`     | `@supports selector(:has(*))`     |
-| `!@supports(display: grid)` | `@supports (not (display: grid))` |
+| Tasty syntax                 | CSS output                         |
+| ---------------------------- | ---------------------------------- |
+| `@supports(display: grid)`   | `@supports (display: grid)`        |
+| `@supports($, :has(*))`       | `@supports selector(:has(*))`      |
+| `@supports(at-rule(@scope))`  | `@supports (at-rule(@scope))`      |
+| `!@supports(display: grid)`  | `@supports (not (display: grid))`  |
+| `!@supports(at-rule(@scope))` | `@supports (not (at-rule(@scope)))` |
 
 ```jsx
 display: {
@@ -553,6 +556,25 @@ display: {
 }
 ```
 
+`at-rule()` tests whether the browser supports the named at-rule. Its surrounding
+parentheses in Tasty's CSS output are valid CSS. Negation and combinations with
+other states use the same syntax as property queries:
+
+```jsx
+color: {
+  _: 'red',
+  '@supports(at-rule(@scope)) & @supports(display: grid)': 'blue',
+}
+```
+
+Use `_` to keep a base value when a browser cannot evaluate a query. A support
+query only detects a browser feature; it does not add an API for authoring the
+queried at-rule in a Tasty style object. For conditional stylesheet imports such
+as `@import url("scoped.css") supports(at-rule(@scope));`, use an ordinary CSS
+stylesheet or document-level `useRawCSS()`. Put imports before other rules in
+that stylesheet. Imports cannot be used in constructable stylesheets, including
+Tasty's adopted-sheet mode for Shadow DOM.
+
 ### `_` — Fallback Floor
 
 By default Tasty makes states **mutually exclusive**: a higher-priority state

package/docs/tasty/styles.md

@@ -37,6 +37,24 @@ Use these instead of their raw CSS counterparts:
 
 ## Layout
 
+### `overscrollBehavior`
+
+The native `overscrollBehavior` shorthand and its `overscrollBehaviorBlock`,
+`overscrollBehaviorInline`, `overscrollBehaviorX`, and `overscrollBehaviorY`
+longhands support `auto`, `contain`, `none`, and `chain`. The shorthand can set
+separate X and Y values, for example `overscrollBehavior: 'chain contain'`.
+
+`chain` allows scroll chaining to another scrollable area while suppressing
+boundary effects such as bounce. It requires browser support; use a feature
+query and a fallback floor when targeting browsers without it:
+
+```jsx
+overscrollBehaviorBlock: {
+  _: 'auto',
+  '@supports(overscroll-behavior-block: chain)': 'chain',
+}
+```
+
 ### `display`
 
 Standard CSS display values. Handled together with `hide`, `textOverflow`, `overflow`, and `whiteSpace` for priority resolution.
@@ -566,6 +584,8 @@ When easing is provided without a duration, the default timing variable is used
 | `zIndex` | `z-index` |
 | `inset` | `inset`, `top`, `right`, `bottom`, `left` |
 
+When two entries cover the same property, an entry that names that one property wins over a group such as `theme`, in either order: `opacity 120ms ease-in-out, theme` keeps the opacity timing. Otherwise the later entry wins, as in CSS.
+
 Default timing: `$transition` (or `${name}-transition` with `$transition` fallback per semantic name). Prefer omitting the duration or using a duration token instead of repeating raw time values across components. Explicit zero can disable motion.
 
 ```jsx

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cube-dev/ui-kit",
-  "version": "0.188.0",
+  "version": "0.190.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.9.3",
+    "@tenphi/tasty": "^3.9.6",
     "clipboard-copy": "^4.0.1",
     "clsx": "^1.1.1",
     "diff": "^8.0.3",
@@ -98,7 +98,7 @@
     "@statoscope/cli": "^5.20.1",
     "@storybook/addon-docs": "^10.3.6",
     "@storybook/react-vite": "^10.3.6",
-    "@tenphi/eslint-plugin-tasty": "^1.3.0",
+    "@tenphi/eslint-plugin-tasty": "^1.5.1",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.7.0",
     "@testing-library/react": "^16.3.0",