@cube-dev/ui-kit 0.121.4 → 0.121.6

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

package/docs/components/layout/Flow.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
 
 ```jsx

package/docs/components/layout/Grid.md

@@ -24,6 +24,17 @@ A CSS Grid layout container. Arranges children in a grid with configurable colum
 
 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
 
 ### Two columns

package/docs/components/layout/Panel.md

@@ -37,6 +37,17 @@ A section container with optional stretched, floating, or card styling. Renders
 
 Supports [Base properties](../../BaseProperties.md).
 
+### Style Properties
+
+These properties allow direct style application without using the `styles` prop:
+
+- **Base:** `display`, `font`, `preset`, `hide`, `whiteSpace`, `opacity`, `transition`
+- **Position:** `gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `zIndex`, `margin`, `inset`, `position`
+- **Dimension:** `width`, `height`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`
+- **Block:** `border`, `radius`, `shadow`, `outline`, `padding`, `paddingInline`, `paddingBlock`, `overflow`, `scrollbar`, `textAlign`
+- **Color:** `color`, `fill`, `fade`, `image`
+- **Flow:** `flow`, `placeItems`, `placeContent`, `alignItems`, `alignContent`, `justifyItems`, `justifyContent`, `align`, `justify`, `gap`, `columnGap`, `rowGap`, `gridColumns`, `gridRows`, `gridTemplate`, `gridAreas`
+
 ## Examples
 
 ### Basic panel

package/docs/components/layout/Prefix.md

@@ -25,6 +25,17 @@ An absolutely positioned prefix slot, typically used inside input-like component
 
 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/layout/ResizablePanel.md

@@ -23,11 +23,28 @@ A `Panel` with a draggable resize handle. Users can adjust the panel size by dra
 - **`maxSize`** `string | number` (default: `'min(50%, 400px)'` for uncontrolled) — Maximum size constraint
 - **`isDisabled`** `boolean` — Disable resizing
 - **`handlerStyles`** `Styles` — Custom styles for the resize handle
+- **`isStretched`** `boolean` — Position the panel absolutely to fill its container
+- **`isCard`** `boolean` — Apply card styling with border and rounded corners
+- **`isFloating`** `boolean` — Position the panel as a floating overlay
+- **`innerStyles`** `Styles` — Custom styles for the panel's inner content element
+- **`isFlex`** `boolean` — Use flex layout instead of grid for the inner content
+- **`extra`** `ReactNode` — Additional content rendered outside the inner element (e.g., overlays)
 
 ### Base Properties
 
 Extends [Panel](#) and 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
 
 ### Resizable sidebar

package/docs/components/layout/Space.md

@@ -23,6 +23,17 @@ A flex container that adds consistent gap between children. Supports horizontal
 
 Supports [Base properties](../../BaseProperties.md).
 
+### Style Properties
+
+These properties allow direct style application without using the `styles` prop:
+
+- **Base:** `display`, `font`, `preset`, `hide`, `whiteSpace`, `opacity`, `transition`
+- **Position:** `gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `zIndex`, `margin`, `inset`, `position`
+- **Dimension:** `width`, `height`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`
+- **Block:** `border`, `radius`, `shadow`, `outline`, `padding`, `paddingInline`, `paddingBlock`, `overflow`, `scrollbar`, `textAlign`
+- **Color:** `color`, `fill`, `fade`, `image`
+- **Flow:** `flow`, `placeItems`, `placeContent`, `alignItems`, `alignContent`, `justifyItems`, `justifyContent`, `align`, `justify`, `gap`, `columnGap`, `rowGap`, `gridColumns`, `gridRows`, `gridTemplate`, `gridAreas`
+
 ## Examples
 
 ### Horizontal (default)

package/docs/components/layout/Suffix.md

@@ -25,6 +25,17 @@ An absolutely positioned suffix slot, typically used inside input-like component
 
 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/navigation/Tabs.md

@@ -44,6 +44,7 @@ An accessible tabbed interface for organizing content into multiple panels, show
 - **`showScrollArrows`** `boolean | 'auto'` (default: `false`) — Show scroll navigation arrows
 - **`tabPickerPosition`** `'prefix' | 'suffix'` (default: `suffix`) — Position of the tab picker
 - **`scrollArrowsPosition`** `'prefix' | 'suffix'` (default: `suffix`) — Position of the scroll arrows
+- **`tabListPadding`** `string` — Inline padding for the tab list container (e.g., `"2x"`)
 - **`tabListStyles`** `Styles` — Custom styles for the tab list container
 - **`prefixStyles`** `Styles` — Custom styles for the prefix slot
 - **`suffixStyles`** `Styles` — Custom styles for the suffix slot
@@ -69,7 +70,11 @@ Customizes the root element of the Tabs component.
 
 ### 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/organisms/FileTabs.md

@@ -28,6 +28,18 @@ A tab bar for file-like items with close buttons and dirty state indicators. Des
 
 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/organisms/StatsCard.md

@@ -29,6 +29,17 @@ Extends Card with:
 
 Extends [Card](../content/Card.md) and 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/other/CloudLogo.md

@@ -24,6 +24,18 @@ Extends [Button](../actions/Button.md) props (`onPress`, `to`, `href`, etc.).
 
 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