@cube-dev/ui-kit 0.0.0-canary-306672a → 0.0.0-canary-827ee9f

package/dist/utils/react/useViewportSize.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-306672a | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-827ee9f | 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.0.0-canary-306672a | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-827ee9f | Cube Dev Team */
 import { isValidElement } from "react";
 import { isFragment } from "react-is";
 

package/dist/utils/tree.js

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

package/dist/version.js

@@ -1,6 +1,6 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-306672a | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-827ee9f | Cube Dev Team */
 //#region src/version.ts
-const VERSION = "0.0.0-canary-306672a";
+const VERSION = "0.0.0-canary-827ee9f";
 if (typeof window !== "undefined") {
 	const version = VERSION;
 	window.CubeUIKit = window.CubeUIKit || { version };

package/docs/components/CollectionItem.md

@@ -92,14 +92,32 @@ const items = [{
 
 ## Properties
 
-Extends all [Item component](./content/Item.md) props:
-
-- `children` - Item content
-- `icon` / `rightIcon` - Icons
-- `prefix` / `suffix` - Additional content
-- `description` - Secondary text
-- `textValue` - Text for filtering/accessibility
-- `onAction` - Action handler (Menu items)
+- **`icon`** `ReactNode | 'checkbox'` — Icon displayed before the content
+- **`rightIcon`** `ReactNode` — Icon displayed after the content
+- **`prefix`** `ReactNode` — Content rendered before the label
+- **`suffix`** `ReactNode` — Content rendered after the label
+- **`description`** `ReactNode` — Secondary text below the main content
+- **`tooltip`** `string | boolean | object` — Tooltip configuration
+- **`hotkeys`** `string` — Keyboard shortcut displayed and triggered
+- **`isSelected`** `boolean` — Whether the item shows as selected
+- **`isLoading`** `boolean` — Show loading state, replacing the icon slot with a spinner
+- **`actions`** `ReactNode` — Inline action buttons displayed on the right side
+- **`size`** `'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'inline'` (default: `medium`) — Size of the item
+- **`autoHideActions`** `boolean` (default: `false`) — When true, actions are hidden by default and shown on hover or focus
+- **`preserveActionsSpace`** `boolean` (default: `false`) — Preserve the actions width when hidden (only changes opacity, not layout)
+- **`disableActionsFocus`** `boolean` (default: `false`) — Disable focus on action buttons by setting tabIndex to -1
+- **`level`** `1 | 2 | 3 | 4 | 5 | 6` (default: `3`) — Heading level for the label element when type is "header" or "card"
+- **`highlight`** `string` — String to highlight within children text
+- **`highlightCaseSensitive`** `boolean` (default: `false`) — Whether highlight matching is case-sensitive
+- **`textValue`** `string` — Text for filtering and accessibility
+- **`onAction`** `() => void` — Callback fired when the item is activated (Menu items)
+- **`wrapper`** `(item: ReactElement) => ReactElement` — Function to wrap the rendered item
+
+Extends all [Item component](./content/Item.md) props.
+
+### Base Properties
+
+Supports [Base properties](../BaseProperties.md).
 
 ## Examples
 

package/docs/components/GridProvider.md

@@ -22,6 +22,10 @@ Provides CSS custom properties for responsive grid column calculations. Children
 - `--column-gap` — Gap between columns
 - `--column-width` — Calculated width per column
 
+### Base Properties
+
+Supports [Base properties](../BaseProperties.md).
+
 ### Style Defaults
 
 - `display` — `contents`

package/docs/components/Root.md

@@ -20,6 +20,7 @@ The root application wrapper. Provides theme context, global styles, portal cont
 - **`bodyStyles`** `Record<string, string>` — Raw CSS styles applied to the `<body>`
 - **`publicUrl`** `string` — Public URL for font loading
 - **`cursorStrategy`** `'web' | 'native'` (default: `'web'`) — Cursor style for interactive elements (`web` uses pointer, `native` uses default)
+- **`applyLegacyTokens`** `boolean` — *Deprecated.* Tokens are now always applied via GlobalStyles; this prop is ignored
 
 ### Style Defaults
 

package/docs/components/actions/Banner.md

@@ -19,9 +19,23 @@ Banner displays prominent messages and notifications to users. It supports diffe
 - **`isDismissable`** `boolean` (default: `false`) — Whether the banner shows a dismiss button
 - **`onDismiss`** `() => void` — Callback fired when the dismiss button is clicked
 - **`icon`** `ReactNode` — Custom icon to display; defaults to a theme-appropriate icon
+- **`rightIcon`** `ReactNode` — Icon displayed after the content
+- **`prefix`** `ReactNode` — Content rendered before the label
+- **`suffix`** `ReactNode` — Content rendered after the label
 - **`actions`** `ReactNode` — Action buttons displayed on the right side of the banner. Use `Banner.Action` for consistent styling
-- **`description`** `string` — Secondary text shown below the main content, truncated with ellipsis after two lines
-- **`shape`** `'sharp'` — Use `'sharp'` to remove rounded corners when stacking multiple banners
+- **`description`** `ReactNode` — Secondary text shown below the main content, truncated with ellipsis after two lines
+- **`tooltip`** `string | boolean | object` — Tooltip configuration
+- **`hotkeys`** `string` — Keyboard shortcut displayed and triggered
+- **`isDisabled`** `boolean` — Whether the banner is disabled
+- **`isSelected`** `boolean` (default: `false`) — Whether the banner shows as selected with a checkbox
+- **`isLoading`** `boolean` — Show loading state
+- **`autoHideActions`** `boolean` (default: `false`) — When true, actions are hidden by default and shown on hover or focus
+- **`preserveActionsSpace`** `boolean` (default: `false`) — Preserve the actions width when hidden (only changes opacity, not layout)
+- **`disableActionsFocus`** `boolean` (default: `false`) — Disable focus on action buttons by setting tabIndex to -1
+- **`level`** `1 | 2 | 3 | 4 | 5 | 6` (default: `3`) — Heading level for the label element when type is "header" or "card"
+- **`highlight`** `string` — String to highlight within children text
+- **`highlightCaseSensitive`** `boolean` (default: `false`) — Whether highlight matching is case-sensitive
+- **`shape`** `'card' | 'button' | 'sharp' | 'pill'` (default: `'button'`) — Shape of the banner's border radius. Use `'sharp'` to remove rounded corners when stacking multiple banners
 
 ### Base Properties
 

package/docs/components/actions/Button.md

@@ -23,6 +23,7 @@ A versatile action component that triggers commands and navigates users.
 - **`children`** `ReactNode` — Button label or custom content
 - **`label`** `string` — Accessible label for the button (used as `aria-label`)
 - **`tooltip`** `string | boolean | object` — Tooltip content. Use a string for simple text, `true` for auto tooltip on overflow, or an object with `{ title, auto, placement, ...tooltipProps }`
+- **`defaultTooltipPlacement`** `Placement` (default: `top`) — Default placement for the button's tooltip
 - **`isLoading`** `boolean` (default: `false`) — Show loading spinner and disable interactions
 - **`isSelected`** `boolean` (default: `false`) — Marks the button as pressed / selected (toggle)
 - **`to`** `string` — Destination URL or route; prefix with `!` to open in new tab, `@` to bypass router

package/docs/components/actions/ButtonSplit.md

@@ -23,6 +23,9 @@ A split button that groups a primary action with a dropdown trigger for secondar
 - **`theme`** `'default' | 'danger' | 'success' | 'warning' | 'note' | 'special'` (default: `'default'`) — Button theme (inherited by children via context)
 - **`size`** `'xsmall' | 'small' | 'medium' | 'large' | 'xlarge'` (default: `'medium'`) — Button size (inherited by children via context)
 - **`isDisabled`** `boolean` (default: `false`) — Disables all buttons (inherited via context)
+- **`actionProps`** `Partial<CubeButtonProps>` — Additional props for the action button in strict mode
+- **`triggerProps`** `Partial<CubeButtonProps>` — Additional props for the trigger button in strict mode
+- **`menuProps`** `Partial<CubeMenuProps>` — Additional props for the dropdown menu in strict mode
 
 ### Base Properties
 

package/docs/components/actions/CommandMenu.md

@@ -14,23 +14,39 @@ A searchable menu interface that combines the functionality of Menu and ListBox
 
 ### Default Usage
 
-## Props
-
-- **`searchPlaceholder`** (default: `Search commands...`) — Placeholder text for the search input
-- **`searchValue`** — The search value in controlled mode
-- **`onSearchChange`** `function` — Callback fired when search value changes
-- **`filter`** — Custom filter function for search
-- **`emptyLabel`** (default: `No commands found`) — Label to show when no results are found
-- **`searchInputStyles`** — Custom styles for the search input
-- **`isLoading`** (default: `false`) — Whether the command palette is loading
-- **`shouldFilter`** (default: `true`) — Whether to filter items based on search
-- **`autoFocus`** (default: `true`) — Whether to auto-focus the search input
-- **`onAction`** `function` — Callback fired when an item is selected
-- **`onSelectionChange`** `function` — Callback fired when selection changes
-- **`selectionMode`** `'none' | 'single' | 'multiple'` (default: `none`) — Selection mode for the command palette
-- **`isDisabled`** — Whether the command palette is disabled
-- **`size`** `string` (default: `medium`) — Size of the command menu component
-- **`styles`** — Custom styles for the command palette container
+## Properties
+
+- **`searchPlaceholder`** `string` (default: `'Search commands...'`) — Placeholder text for the search input
+- **`searchValue`** `string` — The search value in controlled mode
+- **`onSearchChange`** `(value: string) => void` — Callback fired when search value changes
+- **`filter`** `(textValue: string, inputValue: string) => boolean` — Custom filter function for search
+- **`emptyLabel`** `ReactNode` (default: `'No commands found'`) — Label to show when no results are found
+- **`searchInputStyles`** `Styles` — Custom styles for the search input
+- **`isLoading`** `boolean` (default: `false`) — Whether the command menu is loading
+- **`shouldFilter`** `boolean` (default: `true`) — Whether to filter items based on search
+- **`selectionMode`** `'none' | 'single' | 'multiple'` (default: `'none'`) — Selection mode for the command menu
+- **`selectedKeys`** `string[]` — Currently selected keys (controlled)
+- **`defaultSelectedKeys`** `string[]` — Initially selected keys (uncontrolled)
+- **`onSelectionChange`** `(keys: string[]) => void` — Callback fired when selection changes
+- **`size`** `'medium' | 'large'` (default: `'medium'`) — Size of the command menu items
+- **`autoFocus`** `boolean | FocusStrategy` (default: `true`) — Whether to auto-focus the search input
+- **`items`** `Iterable<T>` — Collection of items for dynamic content with render function pattern
+- **`disabledKeys`** `Iterable<Key>` — Keys of items that should be disabled
+- **`onAction`** `(key: Key) => void` — Callback fired when an item is selected
+- **`isDisabled`** `boolean` — Whether the command menu is disabled
+- **`header`** `ReactNode` — Optional header content above the search input
+- **`footer`** `ReactNode` — Optional footer content below the menu
+- **`menuStyles`** `Styles` — Custom styles for the menu list container
+- **`itemStyles`** `Styles` — Custom styles for individual menu items
+- **`sectionStyles`** `Styles` — Custom styles for section wrapper elements
+- **`sectionHeadingStyles`** `Styles` — Custom styles for section heading elements
+- **`headerStyles`** `Styles` — Custom styles for the header
+- **`footerStyles`** `Styles` — Custom styles for the footer
+- **`styles`** `Styles` — Custom styles for the command menu container
+
+### Base Properties
+
+Supports [Base properties](../../BaseProperties.md).
 
 ## Styling
 

package/docs/components/actions/ItemButton.md

@@ -19,6 +19,10 @@ An interactive button component built on top of `Item` that provides all the lay
 - **`type`** `'primary' | 'secondary' | 'outline' | 'neutral' | 'clear'` — Visual type/variant of the button
 - **`theme`** `'default' | 'danger' | 'success' | 'special'` — Color theme of the button
 - **`size`** `'xsmall' | 'small' | 'medium' | 'large' | 'xlarge'` (default: `medium`) — Size of the button (does not support `'inline'`)
+- **`icon`** `ReactNode` — Icon displayed before the content
+- **`rightIcon`** `ReactNode` — Icon displayed after the content
+- **`prefix`** `ReactNode` — Content rendered before the label
+- **`suffix`** `ReactNode` — Content rendered after the label
 - **`hotkeys`** `string` — Keyboard shortcut that triggers the button (e.g., `"cmd+s"`, `"ctrl+alt+d"`)
 - **`tooltip`** `boolean | string | object` — Tooltip configuration: string for simple text, `true` for auto overflow tooltips, or object for advanced config with optional `auto` property
 - **`isDisabled`** `boolean` — Whether the button is disabled
@@ -27,50 +31,23 @@ An interactive button component built on top of `Item` that provides all the lay
 - **`htmlType`** `'button' | 'submit' | 'reset'` — HTML button type attribute
 - **`description`** `string` — Secondary text shown below the main content
 - **`isLoading`** `boolean` — Whether the button shows loading state with disabled interaction
-- **`loadingSlot`** `'auto' | 'icon' | 'rightIcon' | 'prefix' | 'suffix'` — Which slot to replace with loading icon (`auto` intelligently selects)
+- **`actions`** `ReactNode` — Inline action buttons displayed on the right side. Use `ItemButton.Action` for consistent styling. Actions automatically inherit the parent button's `type` prop
 - **`autoHideActions`** `boolean` — When true, actions are hidden by default and fade in on hover
+- **`preserveActionsSpace`** `boolean` (default: `false`) — Preserve the actions width when hidden (only changes opacity, not layout)
+- **`disableActionsFocus`** `boolean` (default: `false`) — Disable focus on action buttons by setting tabIndex to -1
+- **`level`** `1 | 2 | 3 | 4 | 5 | 6` (default: `3`) — Heading level for the label element when type is "header" or "card"
+- **`highlight`** `string` — String to highlight within children text
+- **`highlightCaseSensitive`** `boolean` (default: `false`) — Whether highlight matching is case-sensitive
+- **`shape`** `'card' | 'button' | 'sharp' | 'pill'` (default: `'button'`) — Shape of the button's border radius
+- **`wrapperStyles`** `Styles` — Custom styles for the outer wrapper element when actions are present
 - **`onPress`** `(e: PressEvent) => void` — Callback fired when button is pressed
 
+Inherits from [Item](../content/Item.md).
+
 ### Base Properties
 
 Supports [Base properties](../../BaseProperties.md)
 
-### Item Properties
-
-ItemButton inherits all properties from [Item](../content/Item.md), including:
-- Layout properties: `icon`, `rightIcon`, `prefix`, `suffix`, `description`, `descriptionPlacement`
-- Interactive properties: `hotkeys`, `tooltip`, `isSelected`
-- Styling properties: `size`, `type`, `theme`, `styles`
-
-### Content Properties
-
-#### actions
-- **Type**: `ReactNode`
-- **Description**: Inline action buttons displayed on the right side of the button. Use `ItemButton.Action` for consistent styling. Actions automatically inherit the parent button's `type` prop and the component reserves space to prevent content overlap.
-
-### Action Properties
-
-#### onPress
-- **Type**: `(e: PressEvent) => void`
-- **Description**: Callback fired when the button is pressed via mouse, keyboard, or touch
-
-#### to
-- **Type**: `string`
-- **Description**: URL for link behavior - when provided, the button acts as a link
-
-#### htmlType
-- **Type**: `'button' | 'submit' | 'reset'`
-- **Description**: HTML button type attribute for form integration
-- **Default**: `'button'`
-
-#### isDisabled
-- **Type**: `boolean`
-- **Description**: Whether the button is disabled and non-interactive
-
-### Style Properties
-
-These properties allow direct style application without using the `styles` prop: `width`, `height`, `padding`, `margin`, `color`, `fill`, `opacity`, `display`, `position`, `zIndex`, `gap`, `flow`, `placeItems`, `placeContent`, `alignItems`, `justifyContent`, `border`, `radius`, `shadow`, `overflow`.
-
 ### Modifiers
 
 Inherits all modifiers from [Item](../content/Item.md) plus:

package/docs/components/actions/Link.md

@@ -16,9 +16,7 @@ Semantic navigation component styled as a textual link. It reuses `Button` under
 
 ## Properties
 
-- **`label`** (default: `Button`)
-
-### Base Properties
+Link accepts all [Button](./Button.md) props. The `type` and `size` are pre-set to `"link"` and `"inline"` respectively but can be overridden.
 
 Supports [Base properties](../../BaseProperties.md)
 

package/docs/components/actions/Menu.md

@@ -28,6 +28,9 @@ A versatile dropdown menu component that displays a list of actions or options.
 - **`shouldFocusWrap`** `boolean` (default: `false`) — Whether keyboard navigation should wrap around
 - **`size`** `'medium' | 'large'` (default: `medium`) — Size of the menu items
 - **`styles`** `Styles` — Custom styles for the menu container
+- **`menuStyles`** `Styles` — Custom styles for the inner menu list element
+- **`headerStyles`** `Styles` — Custom styles for the header element
+- **`footerStyles`** `Styles` — Custom styles for the footer element
 - **`itemStyles`** `Styles` — Custom styles for menu items
 - **`sectionStyles`** `Styles` — Custom styles for section containers
 - **`sectionHeadingStyles`** `Styles` — Custom styles for section headings
@@ -102,8 +105,6 @@ The `mods` property accepts the following modifiers you can override:
 - **`selectedKeys`** `string[]` — Currently selected keys (controlled)
 - **`defaultSelectedKeys`** `string[]` — Initially selected keys (uncontrolled)
 - **`onSelectionChange`** `(keys: string[]) => void` — Handler for selection changes
-- **`selectionIcon`** `'checkbox' \| 'radio'` — Type of selection indicator
-
 ### State Properties
 
 - **`disabledKeys`** `Iterable<Key>` — Keys of disabled items
@@ -289,16 +290,6 @@ const items = [
 </Menu>
 ```
 
-### Selection with Custom Icons
-
-```jsx
-<Menu selectionMode="multiple" selectionIcon="checkbox">
-  <Menu.Item key="bold">Bold</Menu.Item>
-  <Menu.Item key="italic">Italic</Menu.Item>
-  <Menu.Item key="underline">Underline</Menu.Item>
-</Menu>
-```
-
 ### Menu Items with Tooltips
 
 ```jsx

package/docs/components/actions/MenuTrigger.md

@@ -14,12 +14,18 @@ Wraps a trigger element and a `Menu` to create a dropdown menu. Positions the me
 - **`placement`** `Placement` (default: `'bottom start'`) — Menu position relative to trigger
 - **`closeOnSelect`** `boolean` — Close menu when an item is selected
 - **`isDisabled`** `boolean` — Disable the trigger
+- **`isOpen`** `boolean` — Whether the menu is open (controlled)
 - **`shouldFlip`** `boolean` (default: `true`) — Flip menu position when overflowing viewport
 - **`offset`** `number` (default: `8`) — Distance from trigger in pixels
 - **`crossOffset`** `number` (default: `0`) — Cross-axis offset in pixels
+- **`containerPadding`** `number` — Minimum padding from viewport edges in pixels
 
 Extends React Aria `AriaMenuTriggerProps` and `PositionProps`.
 
+### Base Properties
+
+Supports [Base properties](../../BaseProperties.md).
+
 ## Examples
 
 ### Basic dropdown

package/docs/components/actions/SubMenuTrigger.md

@@ -14,12 +14,18 @@ Wraps a `Menu.Item` and a nested `Menu` to create hierarchical menus. Opens on h
 - **`offset`** `number` (default: `4`) — Distance from trigger in pixels
 - **`crossOffset`** `number` (default: `-5`) — Cross-axis offset in pixels
 - **`shouldFlip`** `boolean` (default: `true`) — Flip when overflowing viewport
+- **`containerPadding`** `number` — Minimum padding from viewport edges in pixels
 - **`isDisabled`** `boolean` — Disable the trigger
 - **`onAction`** `(key: Key) => void` — Callback when a sub-menu item is selected
+- **`children`** `[ReactNode, ReactElement]` — Exactly two children: first is the trigger element (usually `Menu.Item`), second is the nested `Menu`
 - **`autoFocus`** `boolean | 'first' | 'last'` (default: `'first'`) — Focus behavior when sub-menu opens
 
 Extends React Aria `AriaMenuTriggerProps`.
 
+### Base Properties
+
+Supports [Base properties](../../BaseProperties.md).
+
 ## Examples
 
 ```jsx

package/docs/components/content/ActiveZone.md

@@ -13,6 +13,12 @@ A focusable, clickable zone with hover and focus states. Used for making non-but
 - **`label`** `string` — Accessible label for screen readers
 - **`onClick`** `MouseEventHandler` — Click handler
 - **`isDisabled`** `boolean` — Disables interaction, reduces opacity
+- **`autoFocus`** `boolean` — Whether the element should receive focus on mount
+- **`excludeFromTabOrder`** `boolean` — Whether the element should be excluded from the tab order
+- **`onFocus`** `(e: FocusEvent) => void` — Handler called when the element receives focus
+- **`onBlur`** `(e: FocusEvent) => void` — Handler called when the element loses focus
+- **`onKeyDown`** `(e: KeyboardEvent) => void` — Handler called when a key is pressed
+- **`onKeyUp`** `(e: KeyboardEvent) => void` — Handler called when a key is released
 
 ### Style Defaults
 

package/docs/components/content/Badge.md

@@ -23,20 +23,31 @@ Badges are small, circular indicators that display numerical counts or short sta
 
 ### Properties
 
-- **`children`** `ReactNode` — Badge content (typically a number or short text)
-- **`icon`** `ReactNode` — Icon to display before the badge content
-- **`rightIcon`** `ReactNode` — Icon to display after the badge content
 - **`theme`** `'special' | 'danger' | 'success' | 'warning' | 'note' | 'disabled'` (default: `special`) — Visual theme of the badge
-- **`type`** `string` — Deprecated: Use theme instead
+- **`type`** `string` — Deprecated: Use `theme` instead
 - **`size`** `string` (default: `inline`) — Size of the badge
+- **`icon`** `ReactNode` — Icon displayed before the content
+- **`rightIcon`** `ReactNode` — Icon displayed after the content
+- **`prefix`** `ReactNode` — Content rendered before the label
+- **`suffix`** `ReactNode` — Content rendered after the label
+- **`description`** `ReactNode` — Secondary text below the main content
+- **`tooltip`** `string | boolean | object` (default: `true`) — Tooltip configuration: string for text, `true` for auto overflow tooltips, or object for advanced config
+- **`hotkeys`** `string` — Keyboard shortcut displayed and triggered
+- **`isSelected`** `boolean` (default: `false`) — Whether the badge shows as selected with a checkbox
+- **`isLoading`** `boolean` (default: `false`) — Show loading state, replacing an icon slot with a spinner
+- **`actions`** `ReactNode` — Inline action buttons displayed on the right side
+- **`autoHideActions`** `boolean` (default: `false`) — When true, actions are hidden by default and shown on hover or focus
+- **`preserveActionsSpace`** `boolean` (default: `false`) — Preserve the actions width when hidden (only changes opacity, not layout)
+- **`disableActionsFocus`** `boolean` (default: `false`) — Disable focus on action buttons by setting tabIndex to -1
+- **`level`** `1 | 2 | 3 | 4 | 5 | 6` (default: `3`) — Heading level for the label element when type is "header" or "card"
+- **`highlight`** `string` — String to highlight within children text
+- **`highlightCaseSensitive`** `boolean` (default: `false`) — Whether highlight matching is case-sensitive
+
+Inherits from [Item](./Item.md).
 
 ### Base Properties
 
-Badge extends from `Item` component and supports all base design system properties including:
-- Layout props: `width`, `height`, `margin`, `padding`
-- Color props: `fill`, `color`, `border`
-- Typography props: `preset`, `fontSize`, `fontWeight`
-- Other Item props: `tooltip`, `isDisabled`, `qa`
+Supports [Base properties](../../BaseProperties.md)
 
 ## Examples
 

package/docs/components/content/CopyPasteBlock.md

@@ -14,6 +14,8 @@ A block that displays a value with copy-to-clipboard functionality. Supports pas
 - **`value`** `string` (default: `''`) — The value to display and copy
 - **`placeholder`** `ReactNode` — Placeholder when value is empty
 - **`size`** `'small' | 'medium' | 'large'` (default: `'medium'`) — Block size
+- **`onPaste`** `(text: string) => void | Promise<void | string>` — Callback when text is pasted into the block
+- **`onCopy`** `() => void` — Callback when the value is copied from the block
 
 ### Style Defaults
 

package/docs/components/content/CopySnippet.md

@@ -12,11 +12,13 @@ A code block with copy-to-clipboard functionality and syntax highlighting. Exten
 
 - **`code`** `string` (default: `''`) — The code to display
 - **`language`** `string` (default: `'javascript'`) — Syntax highlighting language
-- **`title`** `string` (default: `'Code example'`) — Accessible title
-- **`prefix`** `string` (default: `''`) — Prefix text (e.g. `$`)
-- **`multiline`** `boolean` — Allow multiline display
-- **`nowrap`** `boolean` — Prevent line wrapping
-- **`showTooltip`** `boolean` (default: `false`) — Show tooltip on hover
+- **`title`** `string` (default: `'Code example'`) — Accessible title used in the copy toast message
+- **`prefix`** `string` (default: `''`) — Prefix for each line of code (e.g. `'$ '` for bash snippets)
+- **`nowrap`** `boolean` — Force single-line display even for multi-line code
+- **`serif`** `boolean` — Use serif (non-monospace) font for the code
+- **`hideText`** `string | string[] | boolean` — Hide sensitive text with bullet characters. `true` hides all text, a string hides that substring, an array hides multiple substrings. A toggle button appears to reveal hidden content.
+- **`actions`** `ReactNode` — Additional action buttons displayed alongside the copy button. Use `CopySnippet.Button` for consistent styling.
+- **`showTooltip`** `boolean` (default: `false`) — Show tooltip with the full content on hover
 
 ### Style Defaults
 

package/docs/components/content/HotKeys.md

@@ -18,8 +18,6 @@ A component that displays keyboard shortcuts in a visually appealing and accessi
 
 - **`children`** `string` — Key combination string (e.g., "mod+k, ctrl+k")
 - **`type`** `'default' | 'primary' | 'inherit'` (default: `default`) — Visual appearance type: default (subtle), primary (high contrast), or inherit (adapts to parent color)
-- **`aria-label`** `string` — Accessible label for the keyboard shortcuts
-- **`aria-description`** `string` — Additional description for the keyboard shortcuts
 
 ### Base Properties
 

package/docs/components/content/ItemBadge.md

@@ -15,6 +15,7 @@ A non-interactive badge indicator for list items. Similar to `ItemAction` but wi
 - **`theme`** `'default' | 'danger' | 'success' | 'special'` (default: `'default'`) — Color theme. Inherits from parent context.
 - **`isLoading`** `boolean` (default: `false`) — Show loading spinner
 - **`isSelected`** `boolean` (default: `false`) — Selected state (for checkbox)
+- **`tooltip`** `string | object` — Tooltip content shown on hover for icon-only badges. A string shows tooltip text; an object supports `{ title, ...tooltipProps }` for advanced configuration.
 
 ### Base Properties
 

package/docs/components/content/ItemCard.md

@@ -14,11 +14,26 @@ A convenience wrapper around `Item type="card"` that provides a more natural car
 
 ### Properties
 
-- **`title`** `string` — Card heading
-- **`children`** `ReactNode` — Card body content
-- **`icon`** `ReactNode` — Icon rendered before the content
-- **`theme`** `string` (default: `default`) — Card theme
-- **`level`** `number` (default: `3`) — Heading level for the title (h1-h6)
+- **`title`** `ReactNode` — Card heading (mapped to Item's `children`)
+- **`children`** `ReactNode` — Card body content (mapped to Item's `description`)
+- **`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
+- **`prefix`** `ReactNode` — Content rendered before the label
+- **`suffix`** `ReactNode` — Content rendered after the label
+- **`tooltip`** `string | boolean | object` (default: `true`) — Tooltip configuration: string for text, `true` for auto overflow tooltips, or object for advanced config
+- **`hotkeys`** `string` — Keyboard shortcut displayed and triggered
+- **`isSelected`** `boolean` (default: `false`) — Whether the card shows as selected with a checkbox
+- **`isLoading`** `boolean` (default: `false`) — Show loading state, replacing an icon slot with a spinner
+- **`actions`** `ReactNode` — Inline action buttons displayed on the right side
+- **`autoHideActions`** `boolean` (default: `false`) — When true, actions are hidden by default and shown on hover or focus
+- **`preserveActionsSpace`** `boolean` (default: `false`) — Preserve the actions width when hidden (only changes opacity, not layout)
+- **`disableActionsFocus`** `boolean` (default: `false`) — Disable focus on action buttons by setting tabIndex to -1
+- **`level`** `1 | 2 | 3 | 4 | 5 | 6` (default: `3`) — Heading level for the card title
+- **`highlight`** `string` — String to highlight within children text
+- **`highlightCaseSensitive`** `boolean` (default: `false`) — Whether highlight matching is case-sensitive
+
+Inherits from [Item](./Item.md) (with `type="card"`).
 
 ### Base Properties
 

package/docs/components/content/Layout.md

@@ -16,6 +16,9 @@ A compound component system for building application shells with headers, footer
 ### Properties
 
 - **`doNotOverflow`** `boolean` (default: `false`) — When true, applies `overflow: hidden` to the root element. By default, overflow is visible.
+- **`contentPadding`** `string` (default: `'1x'`) — Padding for content areas (`Layout.Content` components). Sets the `$content-padding` token inherited by sub-components.
+- **`hasTransition`** `boolean` (default: `false`) — Enable transition animation for the Inner content when panels open/close
+- **`minContentSize`** `number` (default: `320`) — Minimum size in pixels reserved for the content area between panels
 - **`innerRef`** `ForwardedRef<HTMLDivElement>` — Ref for the inner content element
 - **`innerProps`** `HTMLAttributes<HTMLDivElement>` — Props to spread on the Inner sub-element
 - **`isGrid`** `boolean` — Enable grid display mode

package/docs/components/content/Paragraph.md

@@ -9,7 +9,14 @@ A block-level text component for body content. Renders as `<p>` and extends `Tex
 
 ## Properties
 
-Extends Text properties including `preset`, `color`, `weight`, `transform`, `ellipsis`, `nowrap`.
+- **`monospace`** `boolean` — Use monospace font
+- **`ellipsis`** `boolean` — Truncate overflow with ellipsis
+- **`nowrap`** `boolean` — Prevent text wrapping
+- **`italic`** `string` — Font style (e.g. `'italic'`)
+- **`weight`** `string | number` — Font weight
+- **`transform`** `string` — Text transform (e.g. `'uppercase'`, `'capitalize'`)
+
+Extends Text and supports all Text style properties including `preset`, `color`.
 
 ### Style Defaults
 

package/docs/components/content/Result.md

@@ -14,6 +14,7 @@ An empty state or result display with icon, title, and optional content. Support
 - **`status`** `'success' | 'error' | 'info' | 'warning' | 404 | 403 | 500` (default: `'info'`) — Predefined status with corresponding icon
 - **`title`** `ReactNode` — Main title text
 - **`subtitle`** `ReactNode` — Secondary text below title
+- **`subTitle`** `ReactNode` — Deprecated: Use `subtitle` instead
 - **`icon`** `ReactNode` — Custom icon (overrides status icon)
 - **`isCompact`** `boolean` — Compact horizontal layout
 

package/docs/components/content/Skeleton.md

@@ -17,6 +17,10 @@ A skeleton loading indicator with preset layouts. Composes `Placeholder` compone
 - **`tabs`** `number` (default: `3`) — Number of tabs (for tabs layout)
 - **`cards`** `number` (default: `3`) — Number of stat cards (for stats layout)
 - **`isStatic`** `boolean` (default: `false`) — Disable shimmer animation
+- **`size`** `string` (default: `'2x'`) — Height of individual placeholder elements (from Placeholder)
+- **`circle`** `boolean` — Render placeholder as a circle (1:1 aspect ratio with round radius)
+- **`template`** `string` — CSS grid-template shorthand for the skeleton root grid layout
+- **`areas`** `string` — CSS grid-template-areas for named grid areas in the skeleton root layout
 
 ### Base Properties
 

package/docs/components/content/Tag.md

@@ -23,22 +23,33 @@ Tags are compact, inline elements used to label, categorize, or organize items.
 
 ### Properties
 
-- **`children`** `ReactNode` — Tag content
-- **`icon`** `ReactNode` — Icon to display before the tag content
-- **`theme`** `'default' | 'danger' | 'success' | 'warning' | 'note' | 'special' | 'disabled'` (default: `default`) — Visual theme of the tag
-- **`type`** `string` — Deprecated: Use theme instead
+- **`theme`** `'default' | 'danger' | 'success' | 'warning' | 'note' | 'special'` (default: `default`) — Visual theme of the tag
 - **`size`** `string` (default: `inline`) — Size of the tag
 - **`isClosable`** `boolean` (default: `false`) — Whether the tag can be closed
 - **`onClose`** `() => void` — Handler called when close button is pressed
 - **`closeButtonStyles`** `Styles` — Custom styles for the close button
+- **`icon`** `ReactNode` — Icon displayed before the content
+- **`rightIcon`** `ReactNode` — Icon displayed after the content
+- **`prefix`** `ReactNode` — Content rendered before the label
+- **`suffix`** `ReactNode` — Content rendered after the label
+- **`description`** `ReactNode` — Secondary text below the main content
+- **`tooltip`** `string | boolean | object` (default: `true`) — Tooltip configuration: string for text, `true` for auto overflow tooltips, or object for advanced config
+- **`hotkeys`** `string` — Keyboard shortcut displayed and triggered
+- **`isSelected`** `boolean` (default: `false`) — Whether the tag shows as selected with a checkbox
+- **`isLoading`** `boolean` (default: `false`) — Show loading state, replacing an icon slot with a spinner
+- **`actions`** `ReactNode` — Inline action buttons displayed on the right side
+- **`autoHideActions`** `boolean` (default: `false`) — When true, actions are hidden by default and shown on hover or focus
+- **`preserveActionsSpace`** `boolean` (default: `false`) — Preserve the actions width when hidden (only changes opacity, not layout)
+- **`disableActionsFocus`** `boolean` (default: `false`) — Disable focus on action buttons by setting tabIndex to -1
+- **`level`** `1 | 2 | 3 | 4 | 5 | 6` (default: `3`) — Heading level for the label element when type is "header" or "card"
+- **`highlight`** `string` — String to highlight within children text
+- **`highlightCaseSensitive`** `boolean` (default: `false`) — Whether highlight matching is case-sensitive
+
+Inherits from [Item](./Item.md).
 
 ### Base Properties
 
-Tag extends from `Item` component and supports all base design system properties including:
-- Layout props: `width`, `height`, `margin`, `padding`
-- Color props: `fill`, `color`, `border`
-- Typography props: `preset`, `fontSize`, `fontWeight`
-- Other Item props: `tooltip`, `isDisabled`, `qa`
+Supports [Base properties](../../BaseProperties.md)
 
 ## Examples