@cube-dev/ui-kit 0.121.5 → 0.121.6

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

package/docs/components/content/Skeleton.md

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

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

package/docs/components/content/Text.md

@@ -39,6 +39,14 @@ Supports [Base properties](../../BaseProperties.md).
 - `Text.Placeholder` — Placeholder-style text
 - `Text.Highlight` — Highlighted text (mark element)
 
+### Style Properties
+
+These properties allow direct style application without using the `styles` prop:
+
+- **Base:** `display`, `font`, `preset`, `hide`, `whiteSpace`, `opacity`, `transition`
+- **Color:** `color`, `fill`, `fade`, `image`
+- **Text:** `textTransform`, `fontWeight`, `fontStyle`
+
 ## Examples
 
 ```jsx

package/docs/components/content/TextItem.md

@@ -15,15 +15,21 @@ A text component with built-in overflow handling and auto-tooltips. When text is
 
 ### Properties
 
-- **`children`** `ReactNode` — Text content
-- **`highlight`** `string` — String to highlight within children
+- **`highlight`** `string` — String to highlight within children (only works when children is a plain string)
 - **`highlightCaseSensitive`** `boolean` (default: `false`) — Whether highlight matching is case-sensitive
-- **`tooltip`** `string | boolean | TooltipProviderProps` (default: `true`) — Tooltip configuration. Use true for auto tooltip on overflow, string for custom tooltip text.
+- **`highlightStyles`** `Styles` — Custom styles for highlighted text portions
+- **`tooltip`** `string | boolean | TooltipProviderProps` (default: `true`) — Tooltip configuration. `true` enables auto tooltip on overflow, a string shows fixed tooltip text, an object supports advanced configuration.
 - **`tooltipPlacement`** `Placement` (default: `top`) — Default tooltip placement
+- **`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'`)
 
 ### Base Properties
 
-Supports [Base properties](../../BaseProperties.md) and all Text properties including `preset`, `color`, `weight`, `transform`, `ellipsis`, `nowrap`.
+Supports [Base properties](../../BaseProperties.md) and all Text style properties including `preset`, `color`.
 
 ### Styling Properties
 
@@ -31,13 +37,13 @@ Supports [Base properties](../../BaseProperties.md) and all Text properties incl
 
 Customizes the root text element. Inherits all styling capabilities from the Text component.
 
-#### highlightStyles
-
-Customizes the appearance of highlighted text portions.
-
 ### Style Properties
 
-These properties allow direct style application: `preset`, `color`, `weight`, `transform`, and all standard text/color style props.
+These properties allow direct style application without using the `styles` prop:
+
+- **Base:** `display`, `font`, `preset`, `hide`, `whiteSpace`, `opacity`, `transition`
+- **Color:** `color`, `fill`, `fade`, `image`
+- **Text:** `textTransform`, `fontWeight`, `fontStyle`
 
 ## Examples
 

package/docs/components/content/Title.md

@@ -13,6 +13,10 @@ A heading component for section titles. Renders as `h1`–`h6` based on the `lev
 - **`level`** `1 | 2 | 3 | 4 | 5 | 6` (default: `1`) — Heading level (maps to `h1`–`h6` tag and corresponding preset `h1`–`h6`)
 - **`ellipsis`** `boolean` — Truncate overflow with ellipsis
 - **`nowrap`** `boolean` — Prevent text wrapping
+- **`monospace`** `boolean` — Use monospace font
+- **`italic`** `string` — Font style (e.g. `'italic'`)
+- **`weight`** `string | number` — Font weight
+- **`transform`** `string` — Text transform (e.g. `'uppercase'`, `'capitalize'`)
 
 ### Style Defaults
 
@@ -30,6 +34,18 @@ Supports [Base properties](../../BaseProperties.md).
 - `Title.Danger` — Error or destructive heading
 - `Title.Success` — Success or positive heading
 
+### 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/fields/Checkbox.md

@@ -45,9 +45,14 @@ Customizes the checkbox input element specifically.
 
 ### Style Properties
 
-The Checkbox component supports all standard style properties:
-
-`display`, `font`, `preset`, `hide`, `opacity`, `whiteSpace`, `gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `zIndex`, `margin`, `inset`, `position`, `width`, `height`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`, `reset`, `padding`, `paddingInline`, `paddingBlock`, `shadow`, `border`, `radius`, `overflow`, `scrollbar`, `outline`, `textAlign`, `color`, `fill`, `fade`, `textTransform`, `fontWeight`, `fontStyle`, `flow`, `placeItems`, `placeContent`, `alignItems`, `alignContent`, `justifyItems`, `justifyContent`, `align`, `justify`, `gap`, `columnGap`, `rowGap`, `gridColumns`, `gridRows`, `gridTemplate`, `gridAreas`
+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
 

package/docs/components/fields/ComboBox.md

@@ -46,8 +46,12 @@ A combobox component that combines a text input with a dropdown list, allowing u
 - **`direction`** `'top' | 'bottom'` (default: `bottom`) — Preferred direction for the dropdown
 - **`shouldFlip`** `boolean` (default: `true`) — Whether the dropdown should flip to fit in viewport
 - **`overlayOffset`** `number` (default: `8`) — Distance between input and dropdown in pixels
+- **`items`** `Iterable<T>` — Items for the listbox (alternative to children, enables data-driven mode)
+- **`disabledKeys`** `Iterable<Key>` — Keys of disabled items that cannot be selected
+- **`containerPadding`** `number` (default: `8`) — Minimum padding in pixels between the popover and viewport edges
 - **`onFocus`** `() => void` — Callback fired when focus enters the ComboBox
 - **`onBlur`** `() => void` — Callback fired when focus leaves the ComboBox
+- **`onKeyDown`** `(e: KeyboardEvent) => void` — Callback fired when a key is pressed on the input
 
 #### Notable Properties
 
@@ -97,10 +101,6 @@ Customizes the text input element where users type.
 
 Customizes the dropdown trigger button that opens/closes the popover.
 
-#### fieldStyles
-
-Customizes the field wrapper element that includes the label, description, message, and the entire input component.
-
 #### listBoxStyles
 
 Customizes the dropdown list container that displays options.
@@ -123,7 +123,13 @@ Customizes section heading elements within grouped options.
 
 ### Style Properties
 
-These properties allow direct style application without using the `styles` prop: `display`, `font`, `preset`, `hide`, `opacity`, `whiteSpace`, `gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `zIndex`, `margin`, `inset`, `position`, `width`, `height`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`, `color`, `fill`, `fade`.
+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`
+- **Color:** `color`, `fill`, `fade`, `image`
 
 ### Modifiers
 

package/docs/components/fields/DatePicker.md

@@ -16,8 +16,6 @@ A date picker combines a text input with a calendar interface, allowing users to
 
 ### Properties
 
-- **`description`** `string` — Additional descriptive text
-- **`placeholder`** `string` — Placeholder text when no date is selected
 - **`value`** `DateValue` — The current date value (controlled)
 - **`defaultValue`** `DateValue` — The default date value (uncontrolled)
 - **`placeholderValue`** `DateValue` — Date used as placeholder when calendar opens
@@ -25,9 +23,17 @@ A date picker combines a text input with a calendar interface, allowing users to
 - **`maxValue`** `DateValue` — The maximum allowed date
 - **`granularity`** `'day' | 'hour' | 'minute' | 'second'` (default: `day`) — Determines the smallest selectable unit
 - **`size`** `'small' | 'medium' | 'large' | (string & {})` (default: `medium`) — DatePicker size
-- **`showMonthAndYearPickers`** `boolean` (default: `false`) — Whether to show month and year picker dropdowns
 - **`useLocale`** `boolean` (default: `false`) — Whether to use locale-specific date formatting
 - **`maxVisibleMonths`** `number` (default: `1`) — Maximum number of months to display in calendar
+- **`shouldFlip`** `boolean` (default: `true`) — Whether the calendar popover should flip to fit in the viewport
+- **`isOpen`** `boolean` — Whether the calendar popover is open (controlled)
+- **`defaultOpen`** `boolean` — Whether the calendar popover is open by default (uncontrolled)
+- **`isDateUnavailable`** `(date: DateValue) => boolean` — Callback to mark specific dates as unavailable
+- **`hourCycle`** `12 | 24` (default: `24`) — Whether to display time in 12 or 24 hour format
+- **`hideTimeZone`** `boolean` (default: `true`) — Whether to hide the time zone abbreviation
+- **`shouldForceLeadingZeros`** `boolean` (default: `true`) — Whether to always show leading zeros in date/time fields
+- **`pageBehavior`** `'single' | 'visible'` — Controls how calendar pages change when navigating
+- **`firstDayOfWeek`** `'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'` — The first day of the week in the calendar
 - **`onChange`** `(value: DateValue | null) => void` — Callback fired when the date value changes
 - **`onBlur`** `(e: FocusEvent) => void` — Callback fired when the date picker loses focus
 - **`onFocus`** `(e: FocusEvent) => void` — Callback fired when the date picker receives focus
@@ -68,9 +74,14 @@ Customizes the calendar trigger button.
 
 ### Style Properties
 
-The DatePicker component supports all standard style properties:
+These properties allow direct style application without using the `styles` prop:
 
-`display`, `font`, `preset`, `hide`, `opacity`, `whiteSpace`, `gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `zIndex`, `margin`, `inset`, `position`, `width`, `height`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`, `reset`, `padding`, `paddingInline`, `paddingBlock`, `shadow`, `border`, `radius`, `overflow`, `scrollbar`, `outline`, `textAlign`, `color`, `fill`, `fade`, `textTransform`, `fontWeight`, `fontStyle`, `flow`, `placeItems`, `placeContent`, `alignItems`, `alignContent`, `justifyItems`, `justifyContent`, `align`, `justify`, `gap`, `columnGap`, `rowGap`, `gridColumns`, `gridRows`, `gridTemplate`, `gridAreas`
+- **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
 
@@ -129,16 +140,6 @@ The `mods` property accepts the following modifiers you can override:
 />
 ```
 
-### Custom Format
-
-```jsx
-<DatePicker
-  label="Birth date"
-  showMonthAndYearPickers
-  maxValue={today(getLocalTimeZone())}
-/>
-```
-
 ### With Validation
 
 ```jsx

package/docs/components/fields/FileInput.md

@@ -17,11 +17,11 @@ A file input component that allows users to select and upload files through a cu
 ### Properties
 
 - **`placeholder`** `string` — Text displayed when no file is selected
-- **`buttonText`** `string` — Text displayed on the selection button
 - **`accept`** `string` — Comma-separated list of accepted file types
-- **`multiple`** `boolean` (default: `false`) — Whether multiple files can be selected
-- **`capture`** `undefined | 'user' | 'environment'` — Camera to use for file capture on mobile devices
 - **`type`** `'file' | 'text'` (default: `file`) — How to process the selected file(s)
+- **`size`** `'small' | 'default' | 'large'` (default: `default`) — The size of the input
+- **`inputStyles`** `Styles` — Custom styles for the file input element
+- **`inputProps`** `Props` — Direct props passed to the native file input element
 - **`onChange`** `function` — Callback fired when files are selected
 - **`onBlur`** `function` — Callback fired when the file input loses focus
 - **`onFocus`** `function` — Callback fired when the file input receives focus
@@ -48,9 +48,14 @@ Customizes the root element of the component.
 
 ### Style Properties
 
-The FileInput component supports all standard style properties:
+These properties allow direct style application without using the `styles` prop:
 
-`display`, `font`, `preset`, `hide`, `opacity`, `whiteSpace`, `gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `zIndex`, `margin`, `inset`, `position`, `width`, `height`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`, `reset`, `padding`, `paddingInline`, `paddingBlock`, `shadow`, `border`, `radius`, `overflow`, `scrollbar`, `outline`, `textAlign`, `color`, `fill`, `fade`, `textTransform`, `fontWeight`, `fontStyle`, `flow`, `placeItems`, `placeContent`, `alignItems`, `alignContent`, `justifyItems`, `justifyContent`, `align`, `justify`, `gap`, `columnGap`, `rowGap`, `gridColumns`, `gridRows`, `gridTemplate`, `gridAreas`
+- **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
 
@@ -71,16 +76,6 @@ The `mods` property accepts the following modifiers you can override:
 <FileInput label="Upload document" />
 ```
 
-### Multiple Files
-
-```jsx
-<FileInput
-  label="Upload images"
-  multiple
-  accept="image/*"
-/>
-```
-
 ### With File Type Restrictions
 
 ```jsx
@@ -91,16 +86,6 @@ The `mods` property accepts the following modifiers you can override:
 />
 ```
 
-### Custom Button Text
-
-```jsx
-<FileInput
-  label="Profile picture"
-  buttonText="Choose Photo"
-  accept="image/jpeg,image/png"
-/>
-```
-
 ### With Validation
 
 ```jsx
@@ -118,7 +103,6 @@ The `mods` property accepts the following modifiers you can override:
 <FileInput
   label="Disabled file input"
   isDisabled
-  buttonText="Upload"
 />
 ```
 
@@ -128,7 +112,6 @@ The `mods` property accepts the following modifiers you can override:
 <FileInput
   label="Document upload"
   placeholder="Drag files here or click to browse..."
-  buttonText="Browse"
 />
 ```
 
@@ -166,15 +149,14 @@ The `mods` property accepts the following modifiers you can override:
    />
    ```
 
-2. **Don't**: Use unclear button text or placeholders
+2. **Don't**: Use unclear or missing labels
    ```jsx
-   <FileInput buttonText="Click" /> {/* What does clicking do? */}
+   <FileInput /> {/* What should be uploaded? */}
    ```
 
 3. **File Types**: Always specify accepted file types for better UX
 4. **Size Limits**: Implement file size validation for uploads
-5. **Multiple Files**: Clearly indicate when multiple files are allowed
-6. **Error Handling**: Provide helpful feedback for invalid files
+5. **Error Handling**: Provide helpful feedback for invalid files
 
 ## Integration with Forms
 

package/docs/components/fields/FilterListBox.md

@@ -42,6 +42,11 @@ A searchable list selection component that combines a ListBox with an integrated
 - **`onSelectionChange`** `(keys: Key | Key[] | 'all' | null) => void` — Callback when selection changes
 - **`onEscape`** `() => void` — Callback when Escape key is pressed
 - **`onOptionClick`** `(key: Key) => void` — Callback when an option is clicked
+- **`items`** `Iterable<T>` — Array of items for dynamic content with render function pattern
+- **`isLoading`** `boolean` (default: `false`) — Whether the FilterListBox is in a loading state (shows loading icon in search input)
+- **`autoFocus`** `boolean` — Whether the search input should have autofocus
+- **`customValueProps`** `Partial<CubeItemProps>` — Props to apply to existing custom values (already selected but not in predefined options)
+- **`newCustomValueProps`** `Partial<CubeItemProps>` — Props to apply to new custom values appearing in search results (merged with `customValueProps`)
 
 ### Base Properties
 
@@ -100,6 +105,10 @@ Customizes section heading elements.
 **Sub-elements:**
 - Same as ListBox component sub-elements
 
+#### listBoxStyles
+
+Customizes the inner ListBox component.
+
 #### headerStyles
 
 Customizes the header area when header prop is provided.
@@ -116,7 +125,13 @@ Customizes the footer area when footer prop is provided.
 
 ### Style Properties
 
-These properties allow direct style application without using the `styles` prop: `display`, `font`, `preset`, `hide`, `opacity`, `whiteSpace`, `color`, `fill`, `fade`, `width`, `height`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`, `gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `zIndex`, `margin`, `inset`, `position`, `reset`, `padding`, `paddingInline`, `paddingBlock`, `shadow`, `border`, `radius`, `overflow`, `scrollbar`, `outline`, `textAlign`, `flow`, `placeItems`, `placeContent`, `alignItems`, `alignContent`, `justifyItems`, `justifyContent`, `align`, `justify`, `gap`, `columnGap`, `rowGap`, `gridColumns`, `gridRows`, `gridTemplate`, `gridAreas`.
+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`
+- **Color:** `color`, `fill`, `fade`, `image`
 
 ### Modifiers