@cube-dev/ui-kit 0.121.4 → 0.121.6

package/docs/Utilities.md

@@ -0,0 +1,183 @@
+# Utilities
+
+Helper functions from `@tenphi/tasty` for building components with the style system.
+
+## extractStyles
+
+Splits component props into a style map and remaining props. Used in components that accept style properties as direct props (e.g. `width`, `fill`, `padding`).
+
+### Signature
+
+```ts
+function extractStyles(
+  props: Record<string, unknown>,
+  styleList?: readonly string[],
+  defaultStyles?: Styles,
+  propMap?: Record<string, string>,
+  ignoreList?: readonly string[],
+): Styles;
+```
+
+### Parameters
+
+- **`props`** — The component props object to extract styles from.
+- **`styleList`** — List of prop names to treat as style properties. Use predefined sets like `OUTER_STYLES`, `BLOCK_STYLES`, etc.
+- **`defaultStyles`** — Base style map to merge extracted styles into. Defaults to `{}`.
+- **`propMap`** — Optional alias map (`{ propName: 'styleName' }`) to rename props during extraction.
+- **`ignoreList`** — Props to skip. Pass `['styles']` to prevent merging the `styles` prop.
+
+### Behavior
+
+1. Starts with `defaultStyles` (if provided).
+2. Merges `props.styles` on top (unless `'styles'` is in `ignoreList`).
+3. Iterates over `props` — any prop whose name is in `styleList` is added to the result. Props override both `defaultStyles` and `props.styles`.
+4. Mutates nothing; returns a new object.
+
+### Predefined style lists
+
+| List | Contains |
+|------|----------|
+| `BASE_STYLES` | `display`, `font`, `preset`, `hide`, `whiteSpace`, `opacity`, `transition` |
+| `POSITION_STYLES` | `gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `zIndex`, `margin`, `inset`, `position` |
+| `DIMENSION_STYLES` | `width`, `height`, `flexBasis`, `flexGrow`, `flexShrink`, `flex` |
+| `BLOCK_INNER_STYLES` | `padding`, `paddingInline`, `paddingBlock`, `overflow`, `scrollbar`, `textAlign` |
+| `BLOCK_OUTER_STYLES` | `border`, `radius`, `shadow`, `outline` |
+| `BLOCK_STYLES` | `BLOCK_INNER_STYLES` + `BLOCK_OUTER_STYLES` |
+| `COLOR_STYLES` | `color`, `fill`, `fade`, `image` |
+| `TEXT_STYLES` | `textTransform`, `fontWeight`, `fontStyle` |
+| `FLOW_STYLES` | `flow`, `placeItems`, `placeContent`, `alignItems`, `alignContent`, `justifyItems`, `justifyContent`, `align`, `justify`, `gap`, `columnGap`, `rowGap`, `gridColumns`, `gridRows`, `gridTemplate`, `gridAreas` |
+| `OUTER_STYLES` | `POSITION_STYLES` + `DIMENSION_STYLES` + `BLOCK_OUTER_STYLES` |
+| `INNER_STYLES` | `BASE_STYLES` + `COLOR_STYLES` + `BLOCK_INNER_STYLES` + `FLOW_STYLES` |
+| `CONTAINER_STYLES` | `BASE_STYLES` + `COLOR_STYLES` + `DIMENSION_STYLES` + `POSITION_STYLES` + `BLOCK_STYLES` + `FLOW_STYLES` |
+
+### Choosing style lists for multi-element components
+
+In components with a **wrapper + inner element** structure (e.g. input fields), use `extractStyles` once with a combined list for the wrapper. Inner elements should receive styles only through dedicated props like `inputStyles` or `triggerStyles`.
+
+```tsx
+import {
+  BASE_STYLES, OUTER_STYLES, BLOCK_STYLES, COLOR_STYLES,
+  extractStyles,
+} from '@tenphi/tasty';
+
+const PROP_STYLES = [
+  ...BASE_STYLES,
+  ...OUTER_STYLES,
+  ...BLOCK_STYLES,
+  ...COLOR_STYLES,
+];
+
+function MyInput({ inputStyles, ...props }) {
+  // All style props go to the wrapper — never to the inner element
+  let styles = extractStyles(props, PROP_STYLES);
+
+  return (
+    <Wrapper styles={styles}>
+      <InnerInput styles={inputStyles} />
+    </Wrapper>
+  );
+}
+```
+
+Avoid calling `extractStyles` twice on the same props with overlapping lists — this causes styles like `border` and `radius` to be applied to both elements.
+
+### Single-element usage
+
+For simple components with one root element, extract everything in one call:
+
+```tsx
+import { CONTAINER_STYLES, extractStyles, filterBaseProps } from '@tenphi/tasty';
+
+function MyComponent(props) {
+  const styles = extractStyles(props, CONTAINER_STYLES);
+
+  return (
+    <Element {...filterBaseProps(props, { eventProps: true })} styles={styles} />
+  );
+}
+```
+
+### Using `defaultStyles`
+
+Pre-populate styles that can be overridden by props:
+
+```tsx
+const styles = extractStyles(props, OUTER_STYLES, {
+  width: '100%',
+  position: 'relative',
+});
+// If props.width is set, it overrides '100%'
+```
+
+### Using `ignoreList`
+
+Prevent `props.styles` from being merged (useful when `styles` is handled separately):
+
+```tsx
+const inputStyles = extractStyles(props, ['resize'], baseInputStyles, undefined, ['styles']);
+```
+
+---
+
+## filterBaseProps
+
+Filters a props object down to only DOM-safe properties. Use this when spreading props onto a rendered element to prevent React warnings about unknown DOM attributes and to stop style props from leaking to the DOM.
+
+### Signature
+
+```ts
+function filterBaseProps(
+  props: Record<string, unknown>,
+  opts?: {
+    propNames?: Set<string>;
+    eventProps?: boolean;
+  },
+): Record<string, unknown>;
+```
+
+### Parameters
+
+- **`props`** — The full component props object.
+- **`opts.eventProps`** — When `true`, passes through event handlers (`on*` props) except React Aria interaction props (`onPress`, `onHoverStart`, etc.).
+- **`opts.propNames`** — Additional prop names to allow through (as a `Set<string>`).
+
+### What passes through
+
+| Category | Examples |
+|----------|----------|
+| DOM ids | `id` |
+| Base props | `role`, `as`, `children`, `style`, `className`, `href`, `target`, `tabIndex`, `hidden`, `disabled` |
+| ARIA attributes | `aria-label`, `aria-describedby`, etc. |
+| Data attributes | `data-qa`, `data-testid`, etc. |
+| Event handlers (opt-in) | `onClick`, `onFocus`, `onKeyDown`, etc. (when `eventProps: true`) |
+| Custom (opt-in) | Any prop name added to `opts.propNames` |
+
+Style props (`width`, `fill`, `padding`, `border`, etc.), tasty-specific props (`mods`, `qa`, `styles`), and React Aria interaction props (`onPress`, `onHoverStart`, `onHoverEnd`, `onPressStart`, `onPressEnd`) are filtered out.
+
+### Usage
+
+Pair with `extractStyles` — extract styles first, then filter what goes to the DOM:
+
+```tsx
+import { CONTAINER_STYLES, extractStyles, filterBaseProps } from '@tenphi/tasty';
+
+function MyComponent(props) {
+  const styles = extractStyles(props, CONTAINER_STYLES);
+
+  return (
+    <Element
+      {...filterBaseProps(props, { eventProps: true })}
+      styles={styles}
+    />
+  );
+}
+```
+
+Allow specific custom props through:
+
+```tsx
+const domProps = filterBaseProps(props, {
+  eventProps: true,
+  propNames: new Set(['htmlType', 'form']),
+});
+```

package/docs/components/Block.md

@@ -20,6 +20,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/CollectionItem.md

@@ -92,14 +92,43 @@ 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).
+
+### 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
 

package/docs/components/GridProvider.md

@@ -22,10 +22,25 @@ 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`
 
+### 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/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
 
@@ -31,6 +32,13 @@ The root application wrapper. Provides theme context, global styles, portal cont
 
 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`
+- **Block:** `border`, `radius`, `shadow`, `outline`, `padding`, `paddingInline`, `paddingBlock`, `overflow`, `scrollbar`, `textAlign`
+
 ## Examples
 
 ```jsx

package/docs/components/actions/Action.md

@@ -26,6 +26,18 @@ A low-level action element that can render as `<button>`, `<a>`, or `<span>`. Wh
 
 Supports [Base properties](../../BaseProperties.md). Extends React Aria `AriaButtonProps`.
 
+### 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
 
 ### Button action

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
 
@@ -37,6 +51,18 @@ Customizes the root element of the component.
 - `Label` - The main text content area
 - `Actions` - Container for action buttons
 
+### 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`
+
 ### Modifiers
 
 The `mods` property accepts the following modifiers you can override:

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
@@ -46,7 +47,15 @@ Customises the root element of the component.
 
 ### 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`
 
 ### Modifiers
 

package/docs/components/actions/ButtonGroup.md

@@ -25,6 +25,17 @@ Inherits Space defaults:
 
 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
 
 ### Horizontal group

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)