@cube-dev/ui-kit 0.121.5 → 0.121.7

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
 
@@ -36,7 +39,14 @@ Customises the root wrapper element of the split button.
 
 ### Style Properties
 
-These properties allow direct styling without using the `styles` prop: `width`, `height`.
+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`
 
 ### Context Inheritance
 

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
 
@@ -60,6 +76,17 @@ The CommandMenu component has several sub-elements that can be styled:
 
 Customizes the search input field specifically.
 
+### 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`
+
 ### Modifiers
 
 The CommandMenu component supports the following modifiers:

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)
 
@@ -33,9 +31,15 @@ Sub-elements:
 
 ### Style Properties
 
-These properties allow direct styling without using the `styles` prop: `width`, `height`.
+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`
 
 ## Link Syntax (`to` prop)
 

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