@cube-dev/ui-kit 0.121.5 → 0.121.7

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
 

package/docs/components/fields/Picker.md

@@ -53,6 +53,10 @@ A versatile selection component that combines a trigger button with a dropdown l
 - **`shouldFlip`** `boolean` — Whether to flip the popover placement when it overflows
 - **`containerPadding`** `number` — Minimum padding between the popover and viewport edges
 - **`onSelectionChange`** `(keys: Key | Key[] | 'all' | null) => void` — Callback when selection changes
+- **`onClear`** `() => void` — Callback called when the clear button is pressed
+- **`onOpenChange`** `(isOpen: boolean) => void` — Callback called when the popover open state changes
+- **`filter`** `((textValue: string, inputValue: string) => boolean) | false` — Custom filter function for items. Pass `false` to disable filtering.
+- **`emptyLabel`** `ReactNode` — Content shown when no items match the filter or the collection is empty
 
 ### Base Properties
 
@@ -96,23 +100,39 @@ Customizes the popover Dialog that contains the ListBox. See [Dialog documentati
 **Sub-elements:**
 - None for Dialog in popover mode
 
+#### listStyles
+
+Customizes the list container element within the ListBox.
+
+#### optionStyles
+
+Customizes individual option elements within the ListBox.
+
+#### sectionStyles
+
+Customizes section wrapper elements within the ListBox.
+
+#### headingStyles
+
+Customizes section heading elements within the ListBox.
+
 #### headerStyles
 
 Customizes the header area when `header` prop is provided.
 
-**Sub-elements:**
-- None
-
 #### footerStyles
 
 Customizes the footer area when `footer` prop is provided.
 
-**Sub-elements:**
-- None
-
 ### Style Properties
 
-These properties allow direct style application without using the `styles` prop: `display`, `font`, `preset`, `hide`, `opacity`, `whiteSpace`, `width`, `height`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`, `gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `zIndex`, `margin`, `inset`, `position`, `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
 
@@ -524,12 +544,9 @@ The component automatically manages ARIA attributes:
 
 - **`aria-label`** — Labels the trigger when no visible label exists
 - **`aria-labelledby`** — Associates the label with the trigger
-- **`aria-expanded`** — Indicates whether the popover is open (true/false)
-- **`aria-haspopup`** — Indicates the button controls a listbox (listbox)
 - **`aria-describedby`** — Associates help text and error messages
-- **`aria-invalid`** — Indicates validation state (true when invalid)
-- **`aria-required`** — Indicates required fields (true when required)
-- **`aria-disabled`** — Indicates disabled state
+
+The following ARIA attributes are automatically managed by React Aria and do not need to be set manually: `aria-expanded`, `aria-haspopup`, `aria-invalid`, `aria-required`, `aria-disabled`.
 
 ### Best Practices for Accessibility
 

package/docs/components/fields/RadioGroup.md

@@ -51,7 +51,14 @@ Customizes the radio group container specifically.
 
 ### Style Properties
 
-These properties allow direct style application without using the `styles` prop: `gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `zIndex`, `margin`, `inset`, `position`, `width`, `height`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`.
+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/SearchInput.md

@@ -19,9 +19,15 @@ A search input provides a specialized text field for search functionality, featu
 - **`value`** `string` — The search value in controlled mode
 - **`defaultValue`** `string` — The default search value in uncontrolled mode
 - **`placeholder`** `string` — Placeholder text when input is empty
+- **`icon`** `ReactElement` — Icon element rendered before the input (default: search icon)
+- **`prefix`** `ReactNode` — Content rendered before the input
 - **`suffix`** — Input decoration after the main input (before clear button)
+- **`suffixPosition`** `'before' | 'after'` (default: `after`) — Position of suffix relative to validation/loading state icons
 - **`isClearable`** `boolean` (default: `false`) — Whether the search input shows a clear button
 - **`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 search value changes
 - **`onSubmit`** `function` — Callback fired when search is submitted
 - **`onClear`** `function` — Callback fired when search is cleared
@@ -55,9 +61,13 @@ Customizes the search input field specifically.
 
 ### Style Properties
 
-The SearchInput 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/Select.md

@@ -45,9 +45,15 @@ A select allows users to choose a single option from a list of predefined choice
 - **`listBoxStyles`** `Styles` — Styles for the dropdown list container
 - **`optionStyles`** `Styles` — Styles for individual option items
 - **`overlayStyles`** `Styles` — Styles for the dropdown overlay wrapper
-- **`wrapperStyles`** `Styles` — Styles for the outer wrapper element
 - **`triggerStyles`** `Styles` — Styles for the trigger button element
 - **`inputProps`** `Props` — Additional props for the input element
+- **`triggerDescription`** `ReactNode` — Description text displayed within the trigger button (different from field-level description)
+- **`descriptionPlacement`** `'inline' | 'block'` — Controls how the trigger description is positioned
+- **`hotkeys`** `string` — Keyboard shortcut that triggers the select when pressed
+- **`containerPadding`** `number` (default: `8`) — Minimum padding in pixels between the popover and viewport edges
+- **`isOpen`** `boolean` — Whether the dropdown is open (controlled)
+- **`defaultOpen`** `boolean` — Whether the dropdown is open by default (uncontrolled)
+- **`selectionMode`** `'single'` — Selection mode for the select
 - **`onSelectionChange`** `(key: Key) => void` — Callback fired when the selected option changes
 - **`onOpenChange`** `(isOpen: boolean) => void` — Callback fired when the dropdown opens or closes
 - **`onFocus`** `(e: FocusEvent) => void` — Callback fired when the select receives focus
@@ -129,7 +135,13 @@ Customizes individual option items in the dropdown.
 
 ### 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/Slider.md

@@ -4,6 +4,14 @@
 
 The Slider component allows users to select a numeric value from a range by dragging a thumb along a track. It provides an intuitive way to input values that fall within a specific range.
 
+### Style Properties
+
+These properties allow direct style application without using the `styles` prop:
+
+- **Position:** `gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `zIndex`, `margin`, `inset`, `position`
+- **Dimension:** `width`, `height`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`
+- **Block:** `border`, `radius`, `shadow`, `outline`
+
 ## Examples
 
 ### With Label
@@ -18,6 +26,32 @@ The Slider component allows users to select a numeric value from a range by drag
 
 ## Properties
 
+- **`value`** `number` — The current value in controlled mode
+- **`defaultValue`** `number` — The default value in uncontrolled mode
+- **`minValue`** `number` (default: `0`) — The minimum allowed value
+- **`maxValue`** `number` (default: `100`) — The maximum allowed value
+- **`step`** `number` (default: `1`) — The step increment between values
+- **`orientation`** `'horizontal' | 'vertical'` (default: `'horizontal'`) — The orientation of the slider
+- **`gradation`** `string[]` — Labels for gradation marks along the track
+- **`showValueLabel`** `boolean` — Whether the value label is displayed (defaults to `true` when `label` is present)
+- **`getValueLabel`** `(value: number) => string` — Custom function to format the value label
+- **`formatOptions`** `Intl.NumberFormatOptions` — Number format options for the value label display
+- **`inputWidth`** `string` — Width of the input area
+- **`trackStyles`** `Styles` — Custom styles for the track element
+- **`thumbStyles`** `Styles` — Custom styles for the thumb element
+- **`thumbTokens`** `Tokens` — Custom tokens for the thumb element (e.g., `#slider-thumb` for fill color)
+- **`inputStyles`** `Styles` — Custom styles for the input element
+- **`onChange`** `(value: number) => void` — Callback fired when the value changes during drag
+- **`onChangeEnd`** `(value: number) => void` — Callback fired when the value changes on drag end
+
+### Base Properties
+
+Supports [Base properties](../../BaseProperties.md)
+
+### Field Properties
+
+Supports all [Field properties](../../FieldProperties.md)
+
 ## Sub-elements
 
 The Slider component renders the following sub-elements that can be customized via the `styles` prop:

package/docs/components/fields/Switch.md

@@ -53,7 +53,9 @@ Customizes the field wrapper element when the switch is used with labels or vali
 
 These properties allow direct style application without using the `styles` prop:
 
-`margin`, `inset`, `position`, `width`, `height`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`, `padding`, `paddingInline`, `paddingBlock`, `shadow`, `border`, `radius`, `overflow`, `scrollbar`, `outline`
+- **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`
 
 ### Modifiers
 

package/docs/components/fields/TextArea.md

@@ -14,6 +14,16 @@ The TextArea component is a multi-line text input that allows users to enter and
 
 ### Auto Size with Max Rows
 
+### 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`
+
 ## Variants
 
 ### Sizes
@@ -24,6 +34,39 @@ The TextArea component is a multi-line text input that allows users to enter and
 
 ## Properties
 
+- **`autoSize`** `boolean` (default: `false`) — Whether the textarea should automatically resize based on content
+- **`maxRows`** `number` (default: `10`) — Maximum number of visible rows when `autoSize` is enabled
+- **`rows`** `number` (default: `3`) — Number of visible text rows
+- **`value`** `string` — The text value in controlled mode
+- **`defaultValue`** `string` — The default text value in uncontrolled mode
+- **`placeholder`** `string` — Placeholder text when input is empty
+- **`icon`** `ReactElement` — Icon element rendered before the input
+- **`prefix`** `ReactNode` — Input decoration before the main input
+- **`suffix`** `ReactNode` — Input decoration after the main input
+- **`suffixPosition`** `'before' | 'after'` (default: `'before'`) — Position of suffix relative to validation/loading state icons
+- **`resize`** `string` — CSS resize value (e.g. `'vertical'`, `'none'`)
+- **`size`** `'small' | 'medium' | 'large'` (default: `'medium'`) — Input size
+- **`autocomplete`** `string` — Browser autocomplete attribute value
+- **`maxLength`** `number` — Maximum number of characters allowed
+- **`minLength`** `number` — Minimum number of characters required
+- **`inputProps`** `Props` — Direct HTML props passed to the inner textarea element
+- **`wrapperProps`** `Props` — Additional HTML props passed to the input wrapper container
+- **`inputRef`** `RefObject<HTMLTextAreaElement>` — Ref to the inner textarea element
+- **`wrapperRef`** `RefObject<HTMLDivElement>` — Ref to the input wrapper container
+- **`loadingIndicator`** `ReactNode` — Custom loading indicator element
+- **`inputStyles`** `Styles` — Custom styles for the textarea 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
+
+### Base Properties
+
+Supports [Base properties](../../BaseProperties.md)
+
+### Field Properties
+
+Supports all [Field properties](../../FieldProperties.md)
+
 ## Sub-elements
 
 The TextArea component renders the following sub-elements that can be customized via the `styles` prop:

package/docs/components/fields/TextInput.md

@@ -31,6 +31,10 @@ A text input component that allows users to input custom text entries with a key
 - **`autocomplete`** `string` — Browser autocomplete attribute value
 - **`maxLength`** `number` — Maximum number of characters allowed
 - **`minLength`** `number` — Minimum number of characters required
+- **`inputProps`** `Props` — Direct HTML props passed to the inner input element
+- **`inputRef`** `RefObject<HTMLInputElement | HTMLTextAreaElement>` — Ref to the inner input element
+- **`wrapperRef`** `RefObject<HTMLDivElement>` — Ref to the input wrapper container
+- **`loadingIndicator`** `ReactNode` — Custom loading indicator 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
@@ -67,9 +71,13 @@ Additional HTML props passed to the input wrapper container.
 
 ### Style Properties
 
-The TextInput 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/TextInputMapper.md

@@ -4,6 +4,24 @@ The TextInputMapper component allows users to create and manage key-value pairs
 
 ## Properties
 
+- **`value`** `Record<string, string>` — The key-value pairs in controlled mode
+- **`onChange`** `(value: Record<string, string> | undefined) => void` — Callback fired when mappings change
+- **`actionLabel`** `string` (default: `'Mapping'`) — Label text for the add mapping button
+- **`KeyComponent`** `ComponentType` — Custom component for rendering key inputs
+- **`ValueComponent`** `ComponentType` — Custom component for rendering value inputs
+- **`keyProps`** `Partial<CubeTextInputMapperInputProps>` — Additional props passed to each key input
+- **`valueProps`** `Partial<CubeTextInputMapperInputProps>` — Additional props passed to each value input
+- **`allowsCustomValue`** `boolean` — Whether custom (free-form) values are allowed in combobox inputs
+- **`size`** `'small' | 'medium' | 'large'` (default: `'medium'`) — Size of the input fields and buttons
+
+### Base Properties
+
+Supports [Base properties](../../BaseProperties.md)
+
+### Field Properties
+
+Supports all [Field properties](../../FieldProperties.md)
+
 ## Sub-elements
 
 The TextInputMapper component is a complex compound component that doesn't expose styled sub-elements via the `styles` prop. Instead, it uses internal layout components and delegates styling to its key and value input components.
@@ -32,3 +50,15 @@ The TextInputMapper component follows WAI-ARIA guidelines:
 - Set appropriate validation on both key and value inputs
 - Use `allowsCustomValue` when users need flexibility in value selection
 - Provide clear feedback when validation fails on individual pairs
+
+### 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`

package/docs/components/form/Field.md

@@ -59,7 +59,14 @@ Customizes the field label specifically.
 
 ### 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`, `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`
 
 ### Field Properties
 
@@ -85,6 +92,7 @@ These properties allow direct style application without using the `styles` prop:
 - **`isRequired`** `boolean` — Whether the field is required
 - **`isDisabled`** `boolean` — Whether the field is disabled
 - **`isLoading`** `boolean` — Whether the field is in loading state
+- **`isReadOnly`** `boolean` — Whether the field is read-only
 - **`isHidden`** `boolean` — Whether the field is hidden
 - **`validationState`** `'valid' | 'invalid'` — Validation state of the field
 

package/docs/components/form/Form.md

@@ -34,6 +34,7 @@ These properties are inherited by all input components within the form:
 - **`labelStyles`** `Styles` — Styles applied to field labels
 - **`requiredMark`** `boolean` (default: `true`) — Whether to show required field indicators
 - **`necessityIndicator`** `'icon' | 'label'` (default: `icon`) — Type of necessity indicator
+- **`necessityLabel`** `ReactNode` — Custom label to replace the default necessity indicator text
 - **`isReadOnly`** `boolean` (default: `false`) — Whether fields are read-only by default
 - **`validationState`** `'valid' | 'invalid'` — Validation state for all fields
 - **`validateTrigger`** `'onBlur' | 'onChange' | 'onSubmit'` (default: `onBlur`) — When to trigger validation
@@ -61,7 +62,14 @@ The Form component does not expose styled sub-elements via the `styles` prop. It
 
 ### Style Properties
 
-These properties allow direct style application without using the `styles` prop: `display`, `flow`, `gap`, `placeItems`, `width`, `height`, `padding`, `margin`.
+These properties allow direct style application without using the `styles` prop:
+
+- **Base:** `display`, `font`, `preset`, `hide`, `whiteSpace`, `opacity`, `transition`
+- **Position:** `gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `zIndex`, `margin`, `inset`, `position`
+- **Dimension:** `width`, `height`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`
+- **Block:** `border`, `radius`, `shadow`, `outline`, `padding`, `paddingInline`, `paddingBlock`, `overflow`, `scrollbar`, `textAlign`
+- **Color:** `color`, `fill`, `fade`, `image`
+- **Flow:** `flow`, `placeItems`, `placeContent`, `alignItems`, `alignContent`, `justifyItems`, `justifyContent`, `align`, `justify`, `gap`, `columnGap`, `rowGap`, `gridColumns`, `gridRows`, `gridTemplate`, `gridAreas`
 
 ### Modifiers
 

package/docs/components/layout/Flex.md

@@ -21,6 +21,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
 
 ### Row with gap