@cube-dev/ui-kit 0.181.0 → 0.182.0

package/docs/components/content/Item.md

@@ -70,6 +70,25 @@ These properties allow direct style application without using the `styles` prop:
 - **Color:** `color`, `fill`, `fade`, `image`
 - **Flow:** `flow`, `place`, `placeItems`, `placeContent`, `alignItems`, `alignContent`, `justifyItems`, `justifyContent`, `align`, `justify`, `gap`, `columnGap`, `rowGap`, `gridColumns`, `gridRows`, `gridTemplate`, `gridAreas`
 
+### Spacing Tokens
+
+`Item` lays its slots out on a grid with no gap, and `Label` drops its own inline padding whenever there is start or end content. A `prefix` or `suffix` therefore renders flush against the label by default, which is what most content wants — a checkbox, a kbd chip, a badge and a count are all boxes that already carry their own presence, and a gap on top of one reads as too much.
+
+A **bare glyph** is the case that needs spacing: it sits flush, while the same glyph in the `icon` slot looks spaced because that slot centres it inside a `$size`-wide square. Two tokens control it, both `0` by default:
+
+| Token         | Controls                                        |
+| ------------- | ----------------------------------------------- |
+| `$prefix-gap` | Space between the `Prefix` slot and the `Label` |
+| `$suffix-gap` | Space between the `Label` and the `Suffix` slot |
+
+```jsx
+<Item styles={{ '$prefix-gap': '1x' }} prefix={<MemberIcon />}>
+  Revenue
+</Item>
+```
+
+Set them on the item rather than overriding `Prefix` / `Suffix` padding directly — those slots carry state maps that drop the outer gutter next to an icon or an actions run, and a flat `padding` override silently replaces them.
+
 ### Modifiers
 
 The `mods` property accepts the following modifiers:

package/docs/components/fields/CommandTextArea.md

@@ -25,7 +25,9 @@ Choose a different component when the interaction has another outcome:
 - **`items`** `Iterable<T>` — Data-driven option source (alternative to JSX children).
 - **`children`** `ReactNode | ((item) => ReactElement)` — Static items or a render function (same shape as `ComboBox` / `ListBox`).
 - **`filter`** `(textValue, query) => boolean | false` — Custom filter. Pass `false` to disable internal filtering (e.g. server-side).
-- **`onCommand`** `(key, item) => void` — Fired when the user picks a command. The option's `textValue` is inserted into the textarea regardless.
+- **`onCommand`** `(key, item) => void` — Fired when the user picks a command. The option's `textValue` is inserted into the textarea regardless. `item.start` / `item.end` locate the insertion in the value passed to `onChange`, so a consumer can anchor its own record to the pick instead of searching the new value for the inserted text.
+- **`onOpenChange`** `(isOpen: boolean) => void` — Fired when the suggestion popover opens or closes. Use it when the field needs its own `Enter` behaviour: `onKeyDown` runs before the component's own handling, so this is how you tell "pick the focused option" from "submit".
+- **`onActiveTokenChange`** `(token: ActiveToken | null) => void` — Fired when the active trigger token changes, with the component's own caret-aware scan result. `null` once the caret leaves a token.
 - **`insertSpaceAfter`** `boolean` (default: `true`) — Insert a trailing space after the chosen command.
 - **`disabledKeys`** `Iterable<Key>` — Keys of disabled options.
 - **`direction`** `'top' | 'bottom'` (default: `'top'`) — Popover placement. Chat inputs usually want `top`.

package/docs/components/fields/FilterPicker.md

@@ -31,6 +31,7 @@ Choose a different component when the interaction has another shape:
 - **`selectionMode`** `'single' | 'multiple'` (default: `single`) — Selection mode for the picker
 - **`allowsCustomValue`** `boolean` (default: `false`) — Whether to allow entering custom values that are not present in the predefined options
 - **`isClearable`** `boolean` (default: `false`) — Whether the filter picker is clearable using a clear button in the rightIcon slot
+- **`clearLabel`** `string` — Accessible name for the built-in clear button. Defaults to a localized "Clear value".
 - **`isLoadingItems`** `boolean` (default: `false`) — Whether items are currently loading. Shows a loading spinner in the search input suffix inside the popover. Unlike `isLoading`, does not disable the trigger.
 - **`disallowEmptySelection`** `boolean` (default: `false`) — Whether to disallow empty selection. In single selection mode, re-selecting the current item becomes a no-op: `onSelectionChange` is not fired and the popover closes
 - **`disabledKeys`** `Key[]` — Array of keys for disabled items

package/docs/components/fields/Picker.md

@@ -48,6 +48,7 @@ Choose a different component when the interaction has another shape:
 - **`disallowEmptySelection`** `boolean` (default: `false`) — Whether to disallow empty selection. In single selection mode, re-selecting the current item becomes a no-op: `onSelectionChange` is not fired and the popover closes
 - **`disabledKeys`** `Key[]` — Array of keys for disabled items
 - **`isClearable`** `boolean` (default: `false`) — Whether the picker shows a clear button when a selection is made
+- **`clearLabel`** `string` — Accessible name for the built-in clear button. Defaults to a localized "Clear value".
 - **`onClear`** `() => void` — Callback called when the clear button is pressed
 - **`actions`** `ReactNode` — Custom actions rendered inside the trigger, to the left of the built-in clear button and dropdown caret
 - **`sortSelectedToTop`** `boolean` — Sort selected items to the top when the popover opens (only works with `items` prop)

package/docs/components/fields/Select.md

@@ -38,6 +38,7 @@ Choose a different component when the interaction has another shape:
 - **`size`** `string` (default: `medium`) — Size of the select component
 - **`direction`** `string` (default: `bottom`) — Preferred direction for the dropdown menu
 - **`isClearable`** `boolean` (default: `false`) — Whether the select is clearable using a clear button in the rightIcon slot
+- **`clearLabel`** `string` — Accessible name for the built-in clear button. Defaults to a localized "Clear value".
 - **`actions`** `ReactNode` — Custom actions rendered inside the trigger, to the left of the built-in clear button and dropdown caret
 - **`shouldFlip`** `boolean` (default: `true`) — Whether dropdown should flip to fit in viewport
 - **`overlayOffset`** `number` (default: `8`) — Distance between select and dropdown in pixels

package/docs/components/overlays/Dialog.md

@@ -55,6 +55,32 @@ These properties allow direct style application without using the `styles` prop:
 - **Block:** `border`, `blockBorder`, `inlineBorder`, `radius`, `shadow`, `outline`, `padding`, `blockPadding`, `inlinePadding`, `overflow`, `scrollbar`, `textAlign`
 - **Flow:** `flow`, `place`, `placeItems`, `placeContent`, `alignItems`, `alignContent`, `justifyItems`, `justifyContent`, `align`, `justify`, `gap`, `columnGap`, `rowGap`, `gridColumns`, `gridRows`, `gridTemplate`, `gridAreas`
 
+### Padding Tokens
+
+`Dialog` declares its own gutters as custom properties on the dialog root, so every slot inside it — `Header`, `Content`, `Footer` — resolves the same values. They are part of the public contract and safe to read from a consumer's own styles:
+
+| Token | Default | `type="popover"` | What it measures |
+| --- | --- | --- | --- |
+| `$dialog-padding-h` | `1.5x` | `1x` | Horizontal gutter on every slot |
+| `$dialog-content-padding-v` | `1.5x` | `1x` | `Content`'s vertical padding |
+| `$dialog-title-padding-v` | `1.5x` | `1x` | `Header`'s vertical padding |
+| `$dialog-footer-v` | `1.5x` | `1x` | `Footer`'s vertical padding |
+
+The case this exists for is a child that should span the full dialog width — an edge-to-edge table or divider — while its siblings keep the gutter. Take `Content`'s horizontal padding back and hand the same value to the siblings:
+
+```jsx
+<Dialog>
+  <Content styles={{ padding: '$dialog-content-padding-v 0' }}>
+    <Paragraph styles={{ padding: '0 $dialog-padding-h' }}>
+      Keeps the dialog's gutter.
+    </Paragraph>
+    <FullWidthTable />
+  </Content>
+</Dialog>
+```
+
+A `styles` override on a slot is merged into the slot's own styles rather than replacing them, so `Content` keeps its `flexGrow`, `overflow` and height rules while only the padding changes. In plain CSS the same values are readable as `var(--dialog-padding-h)` and `var(--dialog-content-padding-v)`.
+
 ### Modifiers
 
 The `mods` property accepts the following modifiers you can override:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cube-dev/ui-kit",
-  "version": "0.181.0",
+  "version": "0.182.0",
   "type": "module",
   "description": "UIKit for Cube Projects",
   "repository": {