@cube-dev/ui-kit 0.121.4 → 0.121.6

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
@@ -78,7 +81,14 @@ Customizes section heading text styling.
 
 ### Style Properties
 
-These properties allow direct style application without using the `styles` prop: `width`, `height`, `padding`, `margin`.
+These properties allow direct style application without using the `styles` prop:
+
+- **Base:** `display`, `font`, `preset`, `hide`, `whiteSpace`, `opacity`, `transition`
+- **Position:** `gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `zIndex`, `margin`, `inset`, `position`
+- **Dimension:** `width`, `height`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`
+- **Block:** `border`, `radius`, `shadow`, `outline`, `padding`, `paddingInline`, `paddingBlock`, `overflow`, `scrollbar`, `textAlign`
+- **Color:** `color`, `fill`, `fade`, `image`
+- **Flow:** `flow`, `placeItems`, `placeContent`, `alignItems`, `alignContent`, `justifyItems`, `justifyContent`, `align`, `justify`, `gap`, `columnGap`, `rowGap`, `gridColumns`, `gridRows`, `gridTemplate`, `gridAreas`
 
 ### Modifiers
 
@@ -102,8 +112,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 +297,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,29 @@ 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).
+
+### Style Properties
+
+These properties allow direct style application without using the `styles` prop:
+
+- **Base:** `display`, `font`, `preset`, `hide`, `whiteSpace`, `opacity`, `transition`
+- **Position:** `gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `zIndex`, `margin`, `inset`, `position`
+- **Dimension:** `width`, `height`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`
+- **Block:** `border`, `radius`, `shadow`, `outline`, `padding`, `paddingInline`, `paddingBlock`, `overflow`, `scrollbar`, `textAlign`
+- **Color:** `color`, `fill`, `fade`, `image`
+- **Flow:** `flow`, `placeItems`, `placeContent`, `alignItems`, `alignContent`, `justifyItems`, `justifyContent`, `align`, `justify`, `gap`, `columnGap`, `rowGap`, `gridColumns`, `gridRows`, `gridTemplate`, `gridAreas`
+
 ## Examples
 
 ### Basic dropdown

package/docs/components/actions/SubMenuTrigger.md

@@ -14,12 +14,29 @@ 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).
+
+### Style Properties
+
+These properties allow direct style application without using the `styles` prop:
+
+- **Base:** `display`, `font`, `preset`, `hide`, `whiteSpace`, `opacity`, `transition`
+- **Position:** `gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `zIndex`, `margin`, `inset`, `position`
+- **Dimension:** `width`, `height`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`
+- **Block:** `border`, `radius`, `shadow`, `outline`, `padding`, `paddingInline`, `paddingBlock`, `overflow`, `scrollbar`, `textAlign`
+- **Color:** `color`, `fill`, `fade`, `image`
+- **Flow:** `flow`, `placeItems`, `placeContent`, `alignItems`, `alignContent`, `justifyItems`, `justifyContent`, `align`, `justify`, `gap`, `columnGap`, `rowGap`, `gridColumns`, `gridRows`, `gridTemplate`, `gridAreas`
+
 ## Examples
 
 ```jsx

package/docs/components/actions/use-anchored-menu.md

@@ -207,3 +207,14 @@ The hook positions the menu by:
 ---
 
 *Last updated: 2025-01-16* 
+
+### Style Properties
+
+These properties allow direct style application without using the `styles` prop:
+
+- **Base:** `display`, `font`, `preset`, `hide`, `whiteSpace`, `opacity`, `transition`
+- **Position:** `gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `zIndex`, `margin`, `inset`, `position`
+- **Dimension:** `width`, `height`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`
+- **Block:** `border`, `radius`, `shadow`, `outline`, `padding`, `paddingInline`, `paddingBlock`, `overflow`, `scrollbar`, `textAlign`
+- **Color:** `color`, `fill`, `fade`, `image`
+- **Flow:** `flow`, `placeItems`, `placeContent`, `alignItems`, `alignContent`, `justifyItems`, `justifyContent`, `align`, `justify`, `gap`, `columnGap`, `rowGap`, `gridColumns`, `gridRows`, `gridTemplate`, `gridAreas`

package/docs/components/actions/use-context-menu.md

@@ -216,3 +216,14 @@ The `{rendered}` element contains the invisible anchor and MenuTrigger component
 ---
 
 *Last updated: 2025-01-16* 
+
+### Style Properties
+
+These properties allow direct style application without using the `styles` prop:
+
+- **Base:** `display`, `font`, `preset`, `hide`, `whiteSpace`, `opacity`, `transition`
+- **Position:** `gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `zIndex`, `margin`, `inset`, `position`
+- **Dimension:** `width`, `height`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`
+- **Block:** `border`, `radius`, `shadow`, `outline`, `padding`, `paddingInline`, `paddingBlock`, `overflow`, `scrollbar`, `textAlign`
+- **Color:** `color`, `fill`, `fade`, `image`
+- **Flow:** `flow`, `placeItems`, `placeContent`, `alignItems`, `alignContent`, `justifyItems`, `justifyContent`, `align`, `justify`, `gap`, `columnGap`, `rowGap`, `gridColumns`, `gridRows`, `gridTemplate`, `gridAreas`

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
 
@@ -25,6 +31,18 @@ A focusable, clickable zone with hover and focus states. Used for making non-but
 
 Supports [Base properties](../../BaseProperties.md).
 
+### Style Properties
+
+These properties allow direct style application without using the `styles` prop:
+
+- **Base:** `display`, `font`, `preset`, `hide`, `whiteSpace`, `opacity`, `transition`
+- **Position:** `gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `zIndex`, `margin`, `inset`, `position`
+- **Dimension:** `width`, `height`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`
+- **Block:** `border`, `radius`, `shadow`, `outline`, `padding`, `paddingInline`, `paddingBlock`, `overflow`, `scrollbar`, `textAlign`
+- **Color:** `color`, `fill`, `fade`, `image`
+- **Text:** `textTransform`, `fontWeight`, `fontStyle`
+- **Flow:** `flow`, `placeItems`, `placeContent`, `alignItems`, `alignContent`, `justifyItems`, `justifyContent`, `align`, `justify`, `gap`, `columnGap`, `rowGap`, `gridColumns`, `gridRows`, `gridTemplate`, `gridAreas`
+
 ## Examples
 
 ```jsx

package/docs/components/content/Alert.md

@@ -27,6 +27,18 @@ An alert message with theme variants. Used for announcements, warnings, and info
 
 Supports [Base properties](../../BaseProperties.md).
 
+### Style Properties
+
+These properties allow direct style application without using the `styles` prop:
+
+- **Base:** `display`, `font`, `preset`, `hide`, `whiteSpace`, `opacity`, `transition`
+- **Position:** `gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `zIndex`, `margin`, `inset`, `position`
+- **Dimension:** `width`, `height`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`
+- **Block:** `border`, `radius`, `shadow`, `outline`, `padding`, `paddingInline`, `paddingBlock`, `overflow`, `scrollbar`, `textAlign`
+- **Color:** `color`, `fill`, `fade`, `image`
+- **Text:** `textTransform`, `fontWeight`, `fontStyle`
+- **Flow:** `flow`, `placeItems`, `placeContent`, `alignItems`, `alignContent`, `justifyItems`, `justifyContent`, `align`, `justify`, `gap`, `columnGap`, `rowGap`, `gridColumns`, `gridRows`, `gridTemplate`, `gridAreas`
+
 ## Examples
 
 ```jsx

package/docs/components/content/Avatar.md

@@ -26,6 +26,17 @@ A circular avatar for user profiles. Displays initials, icons, or images.
 
 Supports [Base properties](../../BaseProperties.md).
 
+### Style Properties
+
+These properties allow direct style application without using the `styles` prop:
+
+- **Base:** `display`, `font`, `preset`, `hide`, `whiteSpace`, `opacity`, `transition`
+- **Position:** `gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `zIndex`, `margin`, `inset`, `position`
+- **Dimension:** `width`, `height`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`
+- **Block:** `border`, `radius`, `shadow`, `outline`, `padding`, `paddingInline`, `paddingBlock`, `overflow`, `scrollbar`, `textAlign`
+- **Color:** `color`, `fill`, `fade`, `image`
+- **Flow:** `flow`, `placeItems`, `placeContent`, `alignItems`, `alignContent`, `justifyItems`, `justifyContent`, `align`, `justify`, `gap`, `columnGap`, `rowGap`, `gridColumns`, `gridRows`, `gridTemplate`, `gridAreas`
+
 ## Examples
 
 ```jsx

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/Card.md

@@ -26,6 +26,17 @@ No component-specific props. Use style props directly.
 
 Supports [Base properties](../../BaseProperties.md).
 
+### Style Properties
+
+These properties allow direct style application without using the `styles` prop:
+
+- **Base:** `display`, `font`, `preset`, `hide`, `whiteSpace`, `opacity`, `transition`
+- **Position:** `gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `zIndex`, `margin`, `inset`, `position`
+- **Dimension:** `width`, `height`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`
+- **Block:** `border`, `radius`, `shadow`, `outline`, `padding`, `paddingInline`, `paddingBlock`, `overflow`, `scrollbar`, `textAlign`
+- **Color:** `color`, `fill`, `fade`, `image`
+- **Flow:** `flow`, `placeItems`, `placeContent`, `alignItems`, `alignContent`, `justifyItems`, `justifyContent`, `align`, `justify`, `gap`, `columnGap`, `rowGap`, `gridColumns`, `gridRows`, `gridTemplate`, `gridAreas`
+
 ## Examples
 
 ```jsx

package/docs/components/content/Content.md

@@ -27,6 +27,18 @@ No component-specific props. Use style props directly.
 
 Supports [Base properties](../../BaseProperties.md).
 
+### Style Properties
+
+These properties allow direct style application without using the `styles` prop:
+
+- **Base:** `display`, `font`, `preset`, `hide`, `whiteSpace`, `opacity`, `transition`
+- **Position:** `gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `zIndex`, `margin`, `inset`, `position`
+- **Dimension:** `width`, `height`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`
+- **Block:** `border`, `radius`, `shadow`, `outline`, `padding`, `paddingInline`, `paddingBlock`, `overflow`, `scrollbar`, `textAlign`
+- **Color:** `color`, `fill`, `fade`, `image`
+- **Text:** `textTransform`, `fontWeight`, `fontStyle`
+- **Flow:** `flow`, `placeItems`, `placeContent`, `alignItems`, `alignContent`, `justifyItems`, `justifyContent`, `align`, `justify`, `gap`, `columnGap`, `rowGap`, `gridColumns`, `gridRows`, `gridTemplate`, `gridAreas`
+
 ## Examples
 
 ```jsx

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
 
@@ -27,6 +29,12 @@ A block that displays a value with copy-to-clipboard functionality. Supports pas
 
 Supports [Base properties](../../BaseProperties.md).
 
+### Style Properties
+
+These properties allow direct style application without using the `styles` prop:
+
+- **Position:** `gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `zIndex`, `margin`, `inset`, `position`
+
 ## Examples
 
 ```jsx

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
 
@@ -30,6 +32,18 @@ A code block with copy-to-clipboard functionality and syntax highlighting. Exten
 
 Supports [Base properties](../../BaseProperties.md).
 
+### Style Properties
+
+These properties allow direct style application without using the `styles` prop:
+
+- **Base:** `display`, `font`, `preset`, `hide`, `whiteSpace`, `opacity`, `transition`
+- **Position:** `gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `zIndex`, `margin`, `inset`, `position`
+- **Dimension:** `width`, `height`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`
+- **Block:** `border`, `radius`, `shadow`, `outline`, `padding`, `paddingInline`, `paddingBlock`, `overflow`, `scrollbar`, `textAlign`
+- **Color:** `color`, `fill`, `fade`, `image`
+- **Text:** `textTransform`, `fontWeight`, `fontStyle`
+- **Flow:** `flow`, `placeItems`, `placeContent`, `alignItems`, `alignContent`, `justifyItems`, `justifyContent`, `align`, `justify`, `gap`, `columnGap`, `rowGap`, `gridColumns`, `gridRows`, `gridTemplate`, `gridAreas`
+
 ## Examples
 
 ```jsx

package/docs/components/content/Disclosure.md

@@ -66,7 +66,11 @@ When using `Disclosure.Content`, you can pass `styles` prop to customize the con
 
 ### Style Properties
 
-Direct style application without using the `styles` prop: `width`, `height`, `padding`, `margin`, `gap`.
+These properties allow direct style application without using the `styles` prop:
+
+- **Position:** `gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `zIndex`, `margin`, `inset`, `position`
+- **Dimension:** `width`, `height`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`
+- **Block:** `border`, `radius`, `shadow`, `outline`
 
 ### Modifiers
 

package/docs/components/content/Divider.md

@@ -24,6 +24,18 @@ A horizontal separator. Can be a simple line or include centered text with lines
 
 Supports [Base properties](../../BaseProperties.md).
 
+### Style Properties
+
+These properties allow direct style application without using the `styles` prop:
+
+- **Base:** `display`, `font`, `preset`, `hide`, `whiteSpace`, `opacity`, `transition`
+- **Position:** `gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `zIndex`, `margin`, `inset`, `position`
+- **Dimension:** `width`, `height`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`
+- **Block:** `border`, `radius`, `shadow`, `outline`, `padding`, `paddingInline`, `paddingBlock`, `overflow`, `scrollbar`, `textAlign`
+- **Color:** `color`, `fill`, `fade`, `image`
+- **Text:** `textTransform`, `fontWeight`, `fontStyle`
+- **Flow:** `flow`, `placeItems`, `placeContent`, `alignItems`, `alignContent`, `justifyItems`, `justifyContent`, `align`, `justify`, `gap`, `columnGap`, `rowGap`, `gridColumns`, `gridRows`, `gridTemplate`, `gridAreas`
+
 ## Examples
 
 ```jsx

package/docs/components/content/Footer.md

@@ -22,6 +22,18 @@ No component-specific props. Use style props directly.
 
 Supports [Base properties](../../BaseProperties.md).
 
+### Style Properties
+
+These properties allow direct style application without using the `styles` prop:
+
+- **Base:** `display`, `font`, `preset`, `hide`, `whiteSpace`, `opacity`, `transition`
+- **Position:** `gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `zIndex`, `margin`, `inset`, `position`
+- **Dimension:** `width`, `height`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`
+- **Block:** `border`, `radius`, `shadow`, `outline`, `padding`, `paddingInline`, `paddingBlock`, `overflow`, `scrollbar`, `textAlign`
+- **Color:** `color`, `fill`, `fade`, `image`
+- **Text:** `textTransform`, `fontWeight`, `fontStyle`
+- **Flow:** `flow`, `placeItems`, `placeContent`, `alignItems`, `alignContent`, `justifyItems`, `justifyContent`, `align`, `justify`, `gap`, `columnGap`, `rowGap`, `gridColumns`, `gridRows`, `gridTemplate`, `gridAreas`
+
 ## Examples
 
 ```jsx

package/docs/components/content/Header.md

@@ -22,6 +22,18 @@ No component-specific props. Use style props directly.
 
 Supports [Base properties](../../BaseProperties.md).
 
+### Style Properties
+
+These properties allow direct style application without using the `styles` prop:
+
+- **Base:** `display`, `font`, `preset`, `hide`, `whiteSpace`, `opacity`, `transition`
+- **Position:** `gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `zIndex`, `margin`, `inset`, `position`
+- **Dimension:** `width`, `height`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`
+- **Block:** `border`, `radius`, `shadow`, `outline`, `padding`, `paddingInline`, `paddingBlock`, `overflow`, `scrollbar`, `textAlign`
+- **Color:** `color`, `fill`, `fade`, `image`
+- **Text:** `textTransform`, `fontWeight`, `fontStyle`
+- **Flow:** `flow`, `placeItems`, `placeContent`, `alignItems`, `alignContent`, `justifyItems`, `justifyContent`, `align`, `justify`, `gap`, `columnGap`, `rowGap`, `gridColumns`, `gridRows`, `gridTemplate`, `gridAreas`
+
 ## Examples
 
 ```jsx

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
 
@@ -36,19 +34,14 @@ Customizes the root element of the component (Space component).
 
 ### Style Properties
 
-These properties allow direct style application without using the `styles` prop: `width`, `height`, `padding`, `margin`, `gap`, `flow`, `placeContent`, `placeItems`.
+These properties allow direct style application without using the `styles` prop:
 
-#### type
-
-Defines the visual appearance of the keyboard shortcuts.
-
-**Type:** `'default' | 'primary' | 'inherit'`
-
-**Default:** `'default'`
-
-- `default` - Standard appearance with subtle background and border
-- `primary` - High contrast appearance with white text and border on transparent background
-- `inherit` - Adapts to parent's text color for both text and border, transparent background
+- **Base:** `display`, `font`, `preset`, `hide`, `whiteSpace`, `opacity`, `transition`
+- **Position:** `gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `zIndex`, `margin`, `inset`, `position`
+- **Dimension:** `width`, `height`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`
+- **Block:** `border`, `radius`, `shadow`, `outline`, `padding`, `paddingInline`, `paddingBlock`, `overflow`, `scrollbar`, `textAlign`
+- **Color:** `color`, `fill`, `fade`, `image`
+- **Flow:** `flow`, `placeItems`, `placeContent`, `alignItems`, `alignContent`, `justifyItems`, `justifyContent`, `align`, `justify`, `gap`, `columnGap`, `rowGap`, `gridColumns`, `gridRows`, `gridTemplate`, `gridAreas`
 
 ### Accessibility 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
@@ -38,7 +41,11 @@ Customizes the root Layout element.
 
 ### Style Properties
 
-These properties allow direct style application: `width`, `height`, `padding`, `gap`, `fill`, `border`, `flow`.
+These properties allow direct style application without using the `styles` prop:
+
+- **Position:** `gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `zIndex`, `margin`, `inset`, `position`
+- **Dimension:** `width`, `height`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`
+- **Block:** `border`, `radius`, `shadow`, `outline`
 
 ### Style Defaults
 

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
 
@@ -21,6 +28,18 @@ Extends Text properties including `preset`, `color`, `weight`, `transform`, `ell
 
 Supports [Base properties](../../BaseProperties.md).
 
+### Style Properties
+
+These properties allow direct style application without using the `styles` prop:
+
+- **Base:** `display`, `font`, `preset`, `hide`, `whiteSpace`, `opacity`, `transition`
+- **Position:** `gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `zIndex`, `margin`, `inset`, `position`
+- **Dimension:** `width`, `height`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`
+- **Block:** `border`, `radius`, `shadow`, `outline`, `padding`, `paddingInline`, `paddingBlock`, `overflow`, `scrollbar`, `textAlign`
+- **Color:** `color`, `fill`, `fade`, `image`
+- **Text:** `textTransform`, `fontWeight`, `fontStyle`
+- **Flow:** `flow`, `placeItems`, `placeContent`, `alignItems`, `alignContent`, `justifyItems`, `justifyContent`, `align`, `justify`, `gap`, `columnGap`, `rowGap`, `gridColumns`, `gridRows`, `gridTemplate`, `gridAreas`
+
 ## Examples
 
 ```jsx

package/docs/components/content/Placeholder.md

@@ -26,6 +26,17 @@ A loading placeholder with optional shimmer animation. Used for skeleton-style l
 
 Supports [Base properties](../../BaseProperties.md).
 
+### Style Properties
+
+These properties allow direct style application without using the `styles` prop:
+
+- **Base:** `display`, `font`, `preset`, `hide`, `whiteSpace`, `opacity`, `transition`
+- **Position:** `gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `zIndex`, `margin`, `inset`, `position`
+- **Dimension:** `width`, `height`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`
+- **Block:** `border`, `radius`, `shadow`, `outline`, `padding`, `paddingInline`, `paddingBlock`, `overflow`, `scrollbar`, `textAlign`
+- **Color:** `color`, `fill`, `fade`, `image`
+- **Flow:** `flow`, `placeItems`, `placeContent`, `alignItems`, `alignContent`, `justifyItems`, `justifyContent`, `align`, `justify`, `gap`, `columnGap`, `rowGap`, `gridColumns`, `gridRows`, `gridTemplate`, `gridAreas`
+
 ## Examples
 
 ```jsx

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
 
@@ -31,6 +32,17 @@ An empty state or result display with icon, title, and optional content. Support
 
 Supports [Base properties](../../BaseProperties.md).
 
+### Style Properties
+
+These properties allow direct style application without using the `styles` prop:
+
+- **Base:** `display`, `font`, `preset`, `hide`, `whiteSpace`, `opacity`, `transition`
+- **Position:** `gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `zIndex`, `margin`, `inset`, `position`
+- **Dimension:** `width`, `height`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`
+- **Block:** `border`, `radius`, `shadow`, `outline`, `padding`, `paddingInline`, `paddingBlock`, `overflow`, `scrollbar`, `textAlign`
+- **Color:** `color`, `fill`, `fade`, `image`
+- **Flow:** `flow`, `placeItems`, `placeContent`, `alignItems`, `alignContent`, `justifyItems`, `justifyContent`, `align`, `justify`, `gap`, `columnGap`, `rowGap`, `gridColumns`, `gridRows`, `gridTemplate`, `gridAreas`
+
 ## Examples
 
 ```jsx