@cube-dev/ui-kit 0.187.2 → 0.189.0

package/docs/components/overlays/AlertDialog.md

@@ -15,8 +15,8 @@ A modal dialog for important messages that require user acknowledgment. Extends
 - **`danger`** `boolean` — Applies danger styling for destructive actions
 - **`noActions`** `boolean` — Hide the action buttons entirely
 - **`actions`** `object` — Customize buttons:
-  - `confirm` — Confirm button props or `false` to hide (default: `{ label: 'Ok', type: 'primary' }`)
-  - `cancel` — Cancel button props or `true` to show (default: hidden, uses `{ label: 'Cancel' }`)
+  - `confirm` — Confirm button props or `false` to hide (default: `{ children: 'Ok', type: 'primary' }`)
+  - `cancel` — Cancel button props or `true` to show (default: hidden, uses `{ children: 'Cancel' }`). Set a button's text with `children`; `label` still works but is deprecated
   - `secondary` — Optional secondary button props
 - **`size`** `'S' | 'M' | 'L' | 'small' | 'medium' | 'large'` — The size of the dialog
 - **`isDismissable`** `boolean` (default: `false`) — Whether the dialog is dismissable
@@ -50,7 +50,7 @@ These properties allow direct style application without using the `styles` prop:
     title="Confirm Delete"
     content="Are you sure you want to delete this item?"
     actions={{
-      confirm: { label: 'Delete', type: 'danger' },
+      confirm: { children: 'Delete', type: 'danger' },
       cancel: true,
     }}
   />
@@ -65,3 +65,100 @@ 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:
+
+- **`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.
+
+### How the promise settles
+
+| Event | Promise |
+| --- | --- |
+| Confirm or secondary action | resolves `'confirm'` / `'secondary'` |
+| 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, so return quietly. Anything else is a real failure; rethrow it or report it. A caller with no rejection handler leaves an unhandled rejection on every cancel.
+
+### Confirming an action
+
+```jsx
+const { open } = useAlertDialogAPI();
+
+const onDelete = async () => {
+  let status;
+
+  try {
+    status = await open({
+      title: 'Delete the item?',
+      content: 'This cannot be undone.',
+      danger: true,
+      actions: { confirm: { children: 'Delete' }, cancel: true },
+    });
+  } catch (reason) {
+    // Cancel, Escape or a click outside
+    if (reason === undefined) return;
+
+    // A real failure, such as another dialog being open
+    throw reason;
+  }
+
+  if (status === 'confirm') await deleteItem();
+};
+
+<Button onPress={onDelete}>Delete</Button>;
+```
+
+Keep the action itself outside the `try`, so its own errors are not mistaken for a dialog result.
+
+### 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 },
+  ).catch((reason) => {
+    // Aborting rejects with `undefined`, like Cancel does
+    if (reason !== undefined) throw reason;
+  });
+};
+
+// Later, for example when the approval arrives:
+controllerRef.current?.abort();
+```
+
+Passing a signal that is already aborted rejects with `undefined` 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.

package/docs/components/overlays/DialogForm.md

@@ -21,8 +21,8 @@ The examples below use modern controllers. See [Modern Form](../form/ModernForm.
 - **`form`** `FormController<T> | CubeFormInstance<T>` — Modern controller (recommended) or legacy instance. Omitting it selects legacy behavior.
 - **`title`** `string` — Dialog title
 - **`danger`** `boolean` — Give the submit button the danger theme
-- **`submitProps`** `CubeButtonProps` (legacy) / `Omit<CubeSubmitButtonProps<T>, 'form'>` (modern) — Customize the submit button, including its label and modern `disableOnInvalid`
-- **`cancelProps`** `CubeButtonProps` — Customize the cancel button, including its label
+- **`submitProps`** `CubeButtonProps` (legacy) / `Omit<CubeSubmitButtonProps<T>, 'form'>` (modern) — Customize the submit button, including its text (`children`) and modern `disableOnInvalid`
+- **`cancelProps`** `CubeButtonProps` — Customize the cancel button, including its text (`children`)
 - **`preserve`** `boolean` (default: `false`) — Retain values when the editing session ends. Keep the controller mounted above the dialog to retain a draft across dialog unmounts.
 - **`noActions`** `boolean` — Hide the default submit/cancel buttons
 - **`children`** `ReactNode | ((dismiss: () => void) => ReactNode)` — Fields, or a render function for custom actions
@@ -80,7 +80,7 @@ function EditProfile({ initialProfile, save }) {
       <DialogForm
         form={form}
         title="Edit profile"
-        submitProps={{ label: 'Save' }}
+        submitProps={{ children: 'Save' }}
         onSubmit={(values, { signal }) => save(values, signal)}
       >
         <TextInput name="name" label="Name" isRequired />

package/docs/components/overlays/UseDialogContainer.md

@@ -184,10 +184,7 @@ function UserFormDialog({ onSubmit, initialData, onCancel }) {
       onSubmit={onSubmit}
       onDismiss={onCancel}
       submitProps={{
-        label: 'Save User'
-      }}
-      cancelProps={{
-        label: 'Cancel'
+        children: 'Save User'
       }}
     >
       <TextInput
@@ -270,11 +267,11 @@ function ConfirmDialog({ message, onConfirm, onCancel, danger }) {
       danger={danger}
       actions={{
         confirm: {
-          label: 'Confirm',
+          children: 'Confirm',
           onPress: onConfirm
         },
         cancel: {
-          label: 'Cancel',
+          children: 'Cancel',
           onPress: onCancel
         }
       }}
@@ -289,7 +286,7 @@ function InfoDialog({ title, content }) {
       content={content}
       actions={{
         confirm: {
-          label: 'OK'
+          children: 'OK'
         },
         cancel: false
       }}

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.187.2",
+  "version": "0.189.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",