@cube-dev/ui-kit 0.0.0-canary-2e3259a → 0.0.0-canary-925e8d4

package/dist/utils/react/programmaticFocus.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-2e3259a | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-925e8d4 | Cube Dev Team */
 //#region src/utils/react/programmaticFocus.ts
 /**
 * Telling focus the user moved from focus a component moved for them.

package/dist/utils/react/resolveIcon.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-2e3259a | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-925e8d4 | Cube Dev Team */
 //#region src/utils/react/resolveIcon.ts
 /**
 * Resolves a dynamic icon prop to its content and slot state.

package/dist/utils/react/sharedStore.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-2e3259a | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-925e8d4 | Cube Dev Team */
 import { useEvent } from "../../_internal/hooks/use-event.js";
 import { isDevEnv } from "../is-dev-env.js";
 import { c } from "react-compiler-runtime";

package/dist/utils/react/useBufferedValue.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-2e3259a | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-925e8d4 | Cube Dev Team */
 import { useLayoutEffect as useLayoutEffect$1 } from "./useLayoutEffect.js";
 import { useCallback, useRef, useState } from "react";
 

package/dist/utils/react/useCombinedRefs.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-2e3259a | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-925e8d4 | Cube Dev Team */
 import { c } from "react-compiler-runtime";
 import { useEffect, useRef } from "react";
 

package/dist/utils/react/useControlledFocusVisible.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-2e3259a | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-925e8d4 | Cube Dev Team */
 import { createSharedStore } from "./sharedStore.js";
 import { c } from "react-compiler-runtime";
 import { useEffect } from "react";

package/dist/utils/react/useEventBus.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-2e3259a | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-925e8d4 | Cube Dev Team */
 import { c } from "react-compiler-runtime";
 import React, { createContext, useCallback, useContext, useEffect, useMemo, useRef } from "react";
 

package/dist/utils/react/useId.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-2e3259a | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-925e8d4 | Cube Dev Team */
 import { useLayoutEffect as useLayoutEffect$1 } from "./useLayoutEffect.js";
 import { c } from "react-compiler-runtime";
 import { useEffect, useRef, useState } from "react";

package/dist/utils/react/useIsDarwin.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-2e3259a | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-925e8d4 | Cube Dev Team */
 import { c } from "react-compiler-runtime";
 import { useEffect, useState } from "react";
 

package/dist/utils/react/useKeySymbols.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-2e3259a | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-925e8d4 | Cube Dev Team */
 import { useIsDarwin } from "./useIsDarwin.js";
 import { c } from "react-compiler-runtime";
 

package/dist/utils/react/useLayoutEffect.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-2e3259a | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-925e8d4 | 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.0.0-canary-2e3259a | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-925e8d4 | Cube Dev Team */
 import { useEvent } from "../../_internal/hooks/use-event.js";
 import { c } from "react-compiler-runtime";
 import { useSyncExternalStore } from "react";

package/dist/utils/react/useMergeStyles.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-2e3259a | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-925e8d4 | Cube Dev Team */
 import { mergeStyles } from "@tenphi/tasty";
 import { useMemo } from "react";
 

package/dist/utils/react/useOverlayEscapeGuard.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-2e3259a | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-925e8d4 | Cube Dev Team */
 import { useEvent } from "../../_internal/hooks/use-event.js";
 import { c } from "react-compiler-runtime";
 

package/dist/utils/react/usePopoverSync.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-2e3259a | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-925e8d4 | Cube Dev Team */
 import { EventBusContext, useEventBus } from "./useEventBus.js";
 import { c } from "react-compiler-runtime";
 import { useContext, useEffect, useRef } from "react";

package/dist/utils/react/useQaProps.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-2e3259a | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-925e8d4 | Cube Dev Team */
 //#region src/utils/react/useQaProps.ts
 /**
 * Processes QA props.

package/dist/utils/react/useScheme.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-2e3259a | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-925e8d4 | Cube Dev Team */
 import { useSyncExternalStore } from "react";
 
 //#region src/utils/react/useScheme.ts

package/dist/utils/react/useViewportSize.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-2e3259a | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-925e8d4 | Cube Dev Team */
 import { c } from "react-compiler-runtime";
 import { useEffect, useState } from "react";
 

package/dist/utils/react/wrapNodeIfPlain.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-2e3259a | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-925e8d4 | Cube Dev Team */
 import { Fragment, isValidElement } from "react";
 
 //#region src/utils/react/wrapNodeIfPlain.ts

package/dist/utils/selection.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-2e3259a | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-925e8d4 | 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.0.0-canary-2e3259a | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-925e8d4 | Cube Dev Team */
 import { isSelector, mergeStyles } from "@tenphi/tasty";
 
 //#region src/utils/styles.ts

package/dist/utils/tree.js

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

package/dist/version.js

@@ -1,6 +1,6 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-2e3259a | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-925e8d4 | Cube Dev Team */
 //#region src/version.ts
-const VERSION = "0.0.0-canary-2e3259a";
+const VERSION = "0.0.0-canary-925e8d4";
 const TASTY_VERSION = "3.9.9";
 if (typeof window !== "undefined") {
 	const version = VERSION;

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cube-dev/ui-kit",
-  "version": "0.0.0-canary-2e3259a",
+  "version": "0.0.0-canary-925e8d4",
   "type": "module",
   "description": "UIKit for Cube Projects",
   "repository": {