@cube-dev/ui-kit 0.190.6 → 0.190.8

package/docs/components/content/ItemCard.md

@@ -1,12 +1,12 @@
 # ItemCard
 
-A convenience wrapper around `Item type="card"` that provides a more natural card API by mapping `title` to the card heading and `children` to the card body.
+A card for content with a heading, a body and optional inline actions. It wraps `Item type="card"`, mapping `title` to the heading and `children` to the body. The default theme uses the same neutral surface and border as `Card`; semantic themes add status colors.
 
 ## When to Use
 
-- When displaying notification-style messages (success, error, warning, info)
-- For status banners or alert cards
-- When you need a card with a heading and body content
+- To group content or controls under a heading
+- For status messages that need a heading, body and optional actions
+- Use [Card](./Card.md) when you only need a container, or [Alert](./Alert.md) for a concise status message
 
 ## Component
 
@@ -16,6 +16,7 @@ A convenience wrapper around `Item type="card"` that provides a more natural car
 
 - **`title`** `ReactNode` — Card heading (mapped to Item's `children`)
 - **`children`** `ReactNode` — Card body content (mapped to Item's `description`)
+- **`theme`** `'default' | 'success' | 'danger' | 'warning' | 'note' | 'current'` (default: `default`) — Neutral surface, semantic status or inherited-color theme
 - **`size`** `'xsmall' | 'small' | 'medium' | 'large' | 'xlarge'` (default: `medium`) — Size of the card
 - **`icon`** `ReactNode` — Icon displayed before the content
 - **`rightIcon`** `ReactNode` — Icon displayed after the content
@@ -43,7 +44,7 @@ Supports [Base properties](../../BaseProperties.md)
 
 #### styles
 
-Inherits all styling from `Item`. See [Item documentation](./Item.md) for sub-elements and modifiers.
+Inherits styling from `Item`, with `fill="#surface"` and `border="#border"` for the default theme. Semantic themes retain their tinted surfaces and borders. An explicit `variant` retains Item's corresponding variant appearance. Ordinary style props and `styles` override these defaults. See [Item documentation](./Item.md) for sub-elements and modifiers.
 
 ## Variants
 
@@ -55,14 +56,16 @@ Inherits all styling from `Item`. See [Item documentation](./Item.md) for sub-el
 
 ### Themes
 
-Use the `theme` prop to apply a semantic color scheme:
+Use the default theme for grouped content and a semantic theme when color communicates a status:
 
-- `default` — Standard card appearance
+- `default` — Neutral `#surface` fill and `#border` border
 - `success` — Green theme for positive outcomes
 - `danger` — Red theme for errors or destructive states
 - `warning` — Amber theme for caution
 - `note` — Violet theme for informational context
 
+The `current` theme uses the inherited foreground color for its tinted surface and border. See [Item documentation](./Item.md) for theme styling.
+
 ## Examples
 
 ### Basic Usage
@@ -85,18 +88,70 @@ Use the `theme` prop to apply a semantic color scheme:
 </ItemCard>
 ```
 
-### With Actions
+### Cases
+
+### With a Close Button
+
+Use `ItemCard.Action` with an accessible name and an `onPress` handler. The application owns dismissal and moves focus to an appropriate control when the card disappears. This example offers a restore button and focuses it after dismissal; restoring the card focuses its close button without moving focus on the initial render.
+
+```jsx
+function DismissibleNotice() {
+  const [isDismissed, setIsDismissed] = useState(false);
+  const focusTarget = useRef(null);
+  const didInteract = useRef(false);
+
+  useEffect(() => {
+    if (didInteract.current) focusTarget.current?.focus();
+  }, [isDismissed]);
+
+  function toggleNotice() {
+    didInteract.current = true;
+    setIsDismissed((value) => !value);
+  }
+
+  return isDismissed ? (
+    <Button ref={focusTarget} onPress={toggleNotice}>
+      Restore setup notice
+    </Button>
+  ) : (
+    <ItemCard
+      title="Setup notice"
+      actions={
+        <ItemCard.Action
+          ref={focusTarget}
+          icon={<IconX />}
+          aria-label="Dismiss setup notice"
+          onPress={toggleNotice}
+        />
+      }
+    >
+      Connect a data source to start exploring your data.
+    </ItemCard>
+  );
+}
+```
+
+### Rich Body Content
+
+The body accepts React nodes, including labelled controls. Keep the card itself presentational when its body contains interactive elements.
+
+```jsx
+<ItemCard title="Notification settings">
+  <Space flow="column" gap="1.5x">
+    <Text>Choose what to include in scheduled refresh notifications.</Text>
+    <Checkbox defaultSelected>Send email notifications</Checkbox>
+    <Switch label="Include query details" />
+  </Space>
+</ItemCard>
+```
+
+### Transparent Surface
 
-Use `ItemCard.Action` to add inline action buttons such as dismiss or close.
+Use `fill="transparent"` when the surrounding container should supply the surface. The default border still separates the content.
 
 ```jsx
-<ItemCard
-  title="Deployment Complete"
-  icon={<IconCheck />}
-  theme="success"
-  actions={<ItemCard.Action icon={<IconX />} aria-label="Dismiss" />}
->
-  Your changes are now live in production.
+<ItemCard title="Details" fill="transparent">
+  Content on the surrounding surface.
 </ItemCard>
 ```
 
@@ -114,12 +169,14 @@ The `level` prop controls the semantic HTML heading tag (h1-h6) for the title. D
 
 ### Keyboard Navigation
 
-- `Tab` - Moves focus to the component when focusable
-- `Space/Enter` - Activates the component when used as a button
+- `Tab` - Moves focus through inline actions and controls in the body
+- `Space/Enter` - Activates a focused action button
+- Dismissal should move focus to an appropriate remaining control
 
 ### Screen Reader Support
 
 - Title renders as a semantic heading (h1-h6) via the `level` prop for proper document structure
+- Icon-only actions need an accessible name such as `aria-label="Dismiss setup notice"`
 - Inherits all accessibility features from `Item`
 
 ### ARIA Properties
@@ -136,6 +193,8 @@ The `level` prop controls the semantic HTML heading tag (h1-h6) for the title. D
    </ItemCard>
    ```
 
+   Body text wraps. Long titles remain on one line and show an overflow tooltip by default.
+
 2. **Don't**: Use without a title
    ```jsx
    {/* Prefer using Item type="card" directly if you only need a description */}

package/docs/components/fields/Checkbox.md

@@ -30,6 +30,8 @@ Checkboxes allow users to select multiple items from a list of individual items,
 
 Supports [Base properties](../../BaseProperties.md)
 
+`qa` (default: `Checkbox`) identifies the hidden interactive input only. The visual checkbox box uses `data-element="Input"`; customize it through `inputStyles`.
+
 ### Field Properties
 
 Supports all [Field properties](../../FieldProperties.md)

package/docs/components/fields/Switch.md

@@ -28,6 +28,8 @@ A switch allows users to toggle between two states: on and off. It provides imme
 
 Supports [Base properties](../../BaseProperties.md)
 
+`qa` (default: `Switch`) identifies the hidden interactive input only. The visual switch track uses `data-element="Input"`; customize it through `inputStyles`.
+
 ### Field Properties
 
 Supports all [Field properties](../../FieldProperties.md)

package/docs/components/overlays/Notifications.md

@@ -289,7 +289,7 @@ All timers pause when any item in the container receives hover or focus, ensurin
 
 ## Toast Collapse Behavior
 
-When only toasts are visible in the overlay container (no notifications), hovering over the toast stack collapses all toasts behind the newest one. Moving the mouse away from the collapsed area expands them back. This reduces visual clutter for transient messages while keeping the latest toast visible.
+When only toasts are visible in the overlay container (no notifications), moving the pointer over the toast stack collapses all toasts behind the newest one. A toast that appears under a resting pointer stays expanded. Moving the mouse away from the collapsed area expands the stack back. This reduces visual clutter for transient messages while keeping the latest toast visible.
 
 Collapse is disabled when notifications are present, since notifications require user interaction.
 

package/docs/components/overlays/Toast.md

@@ -238,8 +238,9 @@ Maximum 3 toasts are visible at once. When the limit is exceeded, the oldest toa
 - Toasts stack vertically (newest at bottom)
 
 ### Collapse on Hover
-- When hovering over toasts, they collapse to reveal content behind them
-- Only 8px of the newest toast remains visible
+- Moving the pointer over toasts collapses them to reveal content behind them
+- A toast appearing under a resting pointer stays expanded until the pointer moves over it
+- Only 10px of the newest toast remains visible
 - Moving the mouse away restores the full toast display
 
 ### Auto-dismiss

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cube-dev/ui-kit",
-  "version": "0.190.6",
+  "version": "0.190.8",
   "type": "module",
   "description": "UIKit for Cube Projects",
   "repository": {
@@ -45,17 +45,17 @@
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@internationalized/date": "^3.10.1",
-    "@react-aria/focus": "^3.21.3",
-    "@react-aria/i18n": "^3.12.14",
-    "@react-aria/interactions": "^3.26.0",
-    "@react-aria/selection": "^3.27.0",
-    "@react-aria/ssr": "^3.9.10",
-    "@react-aria/utils": "^3.32.0",
-    "@react-spectrum/utils": "^3.12.10",
-    "@react-stately/selection": "^3.20.7",
-    "@react-stately/utils": "^3.11.0",
-    "@react-types/shared": "^3.32.1",
+    "@internationalized/date": "^3.12.4",
+    "@react-aria/focus": "^3.22.1",
+    "@react-aria/i18n": "^3.13.1",
+    "@react-aria/interactions": "^3.28.1",
+    "@react-aria/selection": "^3.28.1",
+    "@react-aria/ssr": "^3.10.1",
+    "@react-aria/utils": "^3.34.1",
+    "@react-spectrum/utils": "^3.13.1",
+    "@react-stately/selection": "^3.21.1",
+    "@react-stately/utils": "^3.12.1",
+    "@react-types/shared": "^3.36.1",
     "@tabler/icons-react": "^3.31.0",
     "@tanstack/react-virtual": "^3.13.12",
     "@tenphi/glaze": "2.0.0",
@@ -67,14 +67,14 @@
     "i18next": "^26.3.2",
     "prism-react-renderer": "^2.4.1",
     "prismjs": "^1.30.0",
-    "react-aria": "^3.45.0",
+    "react-aria": "^3.52.1",
     "react-compiler-runtime": "1.0.0",
     "react-focus-lock": "^2.13.5",
     "react-hotkeys-hook": "^5.1.0",
     "react-i18next": "^17.0.8",
     "react-is": "^18.3.1",
     "react-keyed-flatten-children": "^1.3.0",
-    "react-stately": "^3.43.0",
+    "react-stately": "^3.50.0",
     "react-types": "^0.1.0",
     "tiny-invariant": "^1.3.3",
     "use-sync-external-store": "1.6.0",
@@ -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.5.2",
+    "@tenphi/eslint-plugin-tasty": "^1.7.0",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.7.0",
     "@testing-library/react": "^16.3.0",
@@ -173,7 +173,7 @@
     "test:form-react": "vitest run --config vitest.form-react.config.ts",
     "test:browser": "vitest run --config vitest.browser.config.ts",
     "test:types": "tsc -p tsconfig.typecheck.json",
-    "test:types:consumer": "tsc -p tsconfig.consumer.json",
+    "test:types:consumer": "tsc -p tsconfig.consumer.json && node scripts/check-declaration-bindings.mjs",
     "probe": "node scripts/probe.mjs",
     "probe:browser": "PROBE_TIER=browser node scripts/probe.mjs",
     "test-cover": "vitest run --coverage",

package/tasty.config.ts

@@ -56,6 +56,8 @@ export default {
     '#surface-2-text-soft',
     '#surface-3-text',
     '#surface-3-text-soft',
+    // Fixed-mode surface emitted by the special palette theme.
+    '#special-surface',
 
     // ---- Glaze: accent system (default theme) ----
     '#accent-surface',