@cube-dev/ui-kit 0.121.4 → 0.121.6

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
 

package/docs/components/fields/FilterPicker.md

@@ -55,9 +55,16 @@ A versatile selection component that combines a trigger button with a searchable
 - **`htmlType`** `'button' | 'submit' | 'reset'` (default: `button`) — HTML button type
 - **`headerStyles`** `Styles` — Custom styles for the header area when header prop is provided
 - **`footerStyles`** `Styles` — Custom styles for the footer area when footer prop is provided
+- **`shouldFlip`** `boolean` (default: `true`) — Whether to flip the popover placement when it overflows
+- **`containerPadding`** `number` (default: `8`) — Minimum padding in pixels between the popover and viewport edges
+- **`sortSelectedToTop`** `boolean` — Sort selected items to the top when the popover opens (only works with `items` prop, defaults to `true` when items are provided)
+- **`searchValue`** `string` — Controlled search input value
+- **`onSearchChange`** `(value: string) => void` — Callback when search input value changes
 - **`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 (non-checkbox area)
+- **`onClear`** `() => void` — Callback called when the clear button is pressed
+- **`onOpenChange`** `(isOpen: boolean) => void` — Callback called when the popover open state changes
 
 ### Base Properties
 
@@ -97,23 +104,43 @@ Customizes the popover dialog that contains the FilterListBox.
 **Sub-elements:**
 - Same as Dialog component sub-elements
 
+#### searchInputStyles
+
+Customizes the search input field within the FilterListBox.
+
+#### listStyles
+
+Customizes the list container element within the FilterListBox.
+
+#### optionStyles
+
+Customizes individual option elements within the FilterListBox.
+
+#### sectionStyles
+
+Customizes section wrapper elements within the FilterListBox.
+
+#### headingStyles
+
+Customizes section heading elements within the FilterListBox.
+
 #### headerStyles
 
 Customizes the header area when header prop is provided.
 
-**Sub-elements:**
-- None - styles apply directly to the header container
-
 #### footerStyles
 
 Customizes the footer area when footer prop is provided.
 
-**Sub-elements:**
-- None - styles apply directly to the footer container
-
 ### Style Properties
 
-These properties allow direct style application without using the `styles` prop: `width`, `height`, `margin`, `padding`, `position`, `inset`, `zIndex`, `gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `opacity`, `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/HueSlider.md

@@ -19,12 +19,14 @@ The HueSlider component allows users to select a hue value (0-359 degrees) from
 - **`value`** `number` — The hue value in controlled mode (0-359)
 - **`defaultValue`** `number` (default: `0`) — The default hue value in uncontrolled mode (0-359)
 - **`orientation`** `'horizontal' | 'vertical'` (default: `horizontal`) — The orientation of the slider
+- **`gradation`** `string[]` — Labels to display at gradation marks along the slider track
+- **`formatOptions`** `Intl.NumberFormatOptions` — Options for formatting the displayed value label
+- **`inputWidth`** `string` — Width of the slider input area
 - **`showValueLabel`** `boolean` (default: `true`) — Whether to show the current value label
 - **`getValueLabel`** — Function to format the value label
 - **`onChange`** `function` — Callback fired when the hue value changes
 - **`onChangeEnd`** `function` — Callback fired when the slider interaction ends
 - **`labelPosition`** `'top' | 'side'` (default: `top`) — The position of the label relative to the input
-- **`styles`** `object` — Custom styles object for styling the component and sub-elements
 
 ### Base Properties
 
@@ -46,6 +48,10 @@ Customizes the root element of the component.
 - `SliderTrackContainer` - The track background with rainbow gradient
 - `SliderThumb` - The draggable thumb element (colored to match current hue)
 
+#### inputStyles
+
+Customizes the slider input element.
+
 #### trackStyles
 
 Customizes the track element. The default displays a rainbow gradient.
@@ -54,9 +60,17 @@ Customizes the track element. The default displays a rainbow gradient.
 
 Customizes the thumb element. The default fills with the current hue color.
 
+#### thumbTokens
+
+Custom tokens for the thumb element (e.g., `#slider-thumb` for fill color). The HueSlider sets these automatically to match the selected hue.
+
 ### Style Properties
 
-These properties allow direct style application without using the `styles` prop: `width`, `height`.
+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/fields/ListBox.md

@@ -44,6 +44,8 @@ A versatile list selection component that allows users to select one or more ite
 - **`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 (non-checkbox area)
+- **`items`** `Iterable<T>` — Array of items for dynamic content with render function pattern
+- **`disableSelectionToggle`** `boolean` (default: `false`) — When true, clicking an already-selected item keeps it selected instead of toggling it off
 
 ### Base Properties
 
@@ -95,7 +97,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
 

package/docs/components/fields/NumberInput.md

@@ -19,13 +19,21 @@ A number input component that allows users to enter numeric values and increment
 - **`value`** `number` — The numeric value in controlled mode
 - **`defaultValue`** `number` — The default numeric value in uncontrolled mode
 - **`placeholder`** `string` — Placeholder text when input is empty
+- **`icon`** `ReactElement` — Icon element rendered before the input
 - **`prefix`** — Input decoration before the main input
 - **`suffix`** — Input decoration after the main input
+- **`suffixPosition`** `'before' | 'after'` (default: `before`) — Position of suffix relative to validation/loading icons
 - **`hideStepper`** `boolean` (default: `false`) — Whether to hide the stepper buttons
 - **`minValue`** `number` — Minimum allowed value
 - **`maxValue`** `number` — Maximum allowed value
 - **`step`** `number` — Amount to increment or decrement the value
+- **`formatOptions`** `Intl.NumberFormatOptions` — Options for formatting the displayed number value
 - **`size`** `'small' | 'medium' | 'large'` (default: `medium`) — Input size
+- **`isWheelDisabled`** `boolean` — Whether scrolling the mouse wheel changes the value
+- **`decrementAriaLabel`** `string` — Custom aria-label for the decrement button
+- **`incrementAriaLabel`** `string` — Custom aria-label for the increment button
+- **`inputProps`** `Props` — Direct props passed to the native input element
+- **`wrapperProps`** `Props` — Direct props passed to the input wrapper element
 - **`onChange`** `function` — Callback fired when the input value changes
 - **`onBlur`** `function` — Callback fired when the input loses focus
 - **`onFocus`** `function` — Callback fired when the input receives focus
@@ -56,15 +64,15 @@ Customizes the root element of the component.
 
 Customizes the input element itself.
 
-#### wrapperStyles
-
-Customizes the input wrapper container.
-
 ### Style Properties
 
-The NumberInput 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`
 
 ### Modifiers
 

package/docs/components/fields/PasswordInput.md

@@ -22,7 +22,11 @@ A password input is a specialized text field that masks user input to protect se
 - **`icon`** — Icon element rendered before the input
 - **`prefix`** — Input decoration before the main input
 - **`suffix`** — Input decoration after the main input (before toggle button)
+- **`suffixPosition`** `'before' | 'after'` (default: `after`) — Position of suffix relative to validation/loading icons
 - **`size`** `'small' | 'medium' | 'large'` (default: `medium`) — Input size
+- **`autocomplete`** `string` — HTML autocomplete attribute for browser autofill behavior
+- **`inputProps`** `Props` — Direct props passed to the native input element
+- **`wrapperProps`** `Props` — Direct props passed to the input wrapper element
 - **`onChange`** `function` — Callback fired when the input value changes
 - **`onBlur`** `function` — Callback fired when the input loses focus
 - **`onFocus`** `function` — Callback fired when the input receives focus
@@ -54,9 +58,13 @@ Customizes the password input field specifically.
 
 ### Style Properties
 
-The PasswordInput 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`
 
 ### Modifiers