@cube-dev/ui-kit 0.202.0 → 0.204.0

package/dist/utils/warnings.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.202.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.204.0 | Cube Dev Team */
 import { isDevEnvOrTest } from "./is-dev-env.js";
 //#region src/utils/warnings.ts
 const SUGGESTED_PROP_MAP = {

package/dist/version.js

@@ -1,6 +1,6 @@
-/** @license MIT | @cube-dev/ui-kit v0.202.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.204.0 | Cube Dev Team */
 //#region src/version.ts
-const VERSION = "0.202.0";
+const VERSION = "0.204.0";
 const TASTY_VERSION = "3.15.0";
 if (typeof window !== "undefined") {
 	const version = VERSION;

package/docs/FieldProperties.md

@@ -53,19 +53,30 @@ The field wrapper stays in place when a description or message appears or disapp
 
 An input's style props (`width`, `height`, `flex*`, `gridArea`, `margin`, `inset`, `position`, …) place and size its outer element: the field wrapper when it renders, the input itself otherwise. Adding a label never changes where they apply. When they size a wrapped field, the input stretches to fill it as it would in a grid cell of that size. Inputs with a fixed or capped size keep it: `Checkbox` and `Switch` their content width, single-line inputs and a vertical `Slider` their height. A side label's column is part of the width, and a split label keeps the input at its content width.
 
-`styles` always styles the input and `fieldStyles` always styles the wrapper. To size them apart, use a style prop for the field and `styles` for the input:
+`width` is the space an input takes in the layout, label included. `controlWidth` is the control's own width: it sizes the element `width` sizes when the input renders bare, in every label position. On a bare input, with no label, description or form binding, the two reach the same element, so use `width` there; `controlWidth` wins when both are set. Beside a side label, `controlWidth` sizes the control alone, fixed, capped or following its value, however long the label is in a given language:
 
 ```jsx
 // The field is 40x wide, label column included; the input fills it.
 <TextInput label="Name" labelPosition="side" width="40x" />
 
+// The select is 100px wide beside its label.
+<Select label="Limit" labelPosition="side" controlWidth="100px">…</Select>
+
+// The select fills the space beside its label, up to 30x.
+<Select label="Compare with" labelPosition="side" controlWidth="max 30x">…</Select>
+
+// The select follows its value, up to 30x.
+<Select label="Compare with" labelPosition="side" controlWidth="initial max-content 30x">…</Select>
+
 // The field is 40x wide; the input inside it stays 20x.
-<TextInput label="Name" width="40x" styles={{ width: '20x' }} />
+<TextInput label="Name" width="40x" controlWidth="20x" />
 ```
 
-A style prop wins over `fieldStyles` for the same key. `fieldStyles` keeps working for everything else, but it never makes the input fill the field. Field-level inputs take only these style props; restyle the input through `styles` and its part props (`inputStyles`, `triggerStyles`, …).
+In a `Form`, a side label's column is the Form's `labelWidth` (25x by default) plus 1x, so the control starts `labelWidth` + 1x from the field's edge and is `controlWidth` wide. `controlWidth` wins over `styles.width`. `styles` always styles the input and `fieldStyles` always styles the wrapper: keep `styles` for restyling the input itself.
+
+A style prop wins over `fieldStyles` for the same key. `fieldStyles` keeps working for everything else, but it never makes the input fill the field. Field-level inputs take only these style props and `controlWidth`; restyle the input through `styles` and its part props (`inputStyles`, `triggerStyles`, …).
 
-A state map on a style prop resolves against the element it lands on, which is the wrapper on a labelled field. Use media, container or root states there, not the input's own states such as `focused`. `className`, `style`, `qa` and `ref` never move to the wrapper.
+A state map on a style prop resolves against the element it lands on, which is the wrapper on a labelled field. Use media, container or root states there, not the input's own states such as `focused`. A state map on `controlWidth` resolves against the control. `className`, `style`, `qa` and `ref` never move to the wrapper.
 
 Fields without labels no longer reserve an empty side or split label column. If a row should intentionally align with neighbouring side labels, add `fieldStyles={{ padding: '$full-label-width left' }}`. For a nameless legacy `Form.Item`, put that padding on the item's `styles` instead; it owns the wrapper. Remove deprecated `forceField` when migrating these rows.
 
@@ -123,6 +134,7 @@ Fields without labels no longer reserve an empty side or split label column. If
 
 ## Styling
 
+- **`controlWidth`** `Styles['width']` — The control's own width, in every label position: the element `width` sizes when the input renders bare. Beside a side label it sizes the control alone. It wins over `width` on a bare input and over `styles.width`; see _Field sizing and alignment_.
 - **`fieldStyles`** `Styles` — Tasty styles for the field wrapper. A style prop for the same key wins over it.
 - **`messageStyles`** `Styles` — Tasty styles for the message/error text.
 

package/docs/Usage.md

@@ -415,7 +415,7 @@ The package's `tasty.config.ts` lists the other components as `protectedComponen
 - style props other than the ones that place or size the component (`width`, `height`, `gridArea`, `margin`, `inset`, …). Containers (`Card`, `Panel`, `ResizablePanel`, `Content`, `Header`, `Footer`, and `Layout` and `GridLayout` with their sub-components) also keep the ones that lay out their content: `padding`, `gap`, `flow`, `place*`, `align*`, `justify*`, `grid*`, `overflow` and `scrollbar`. Root `styles` that sets only allowed props passes too;
 - `tasty()` wrappers that restyle a protected component, and wrappers of those wrappers.
 
-On an input, the style props that place or size it act on its outer element: the field wrapper when it renders (see [Field properties](./FieldProperties.md)), the input itself otherwise. Its `styles` always style the input, so a root `styles` that only sizes it passes the rule but sizes the input inside the field, not the field. Input components take no other style props.
+On an input, the style props that place or size it act on its outer element: the field wrapper when it renders (see [Field properties](./FieldProperties.md)), the input itself otherwise. Its `styles` always style the input, so a root `styles` that only sizes it passes the rule but sizes the input inside the field, not the field. To size the input alone, beside a side label for example, use its `controlWidth` prop. Input components take no other style props.
 
 A component's own prop that shares a name with a style passes, such as a field's `direction` and `filter`, a text field's `resize`, `ColorSwatch`'s `color` or `AlertDialog`'s `content`.
 

package/docs/components/data/ItemTable.md

@@ -22,6 +22,8 @@ Use `DataTable` instead when a _cell_ is the unit of interest — query results,
 - **`columns`** `CubeItemTableColumn<T>[]` — Column definitions. See below.
 - **`rowKey`** `string` (default: `'id'`) — Property used as the row key.
 - **`getRowKey`** `(row: T, index: number) => Key` — Wins over `rowKey`.
+- **`sections`** `readonly CubeItemTableSection[]` — Ordered `{ key, title }` captions for a flat list. Empty sections are omitted. Requires `getSectionKey`.
+- **`getSectionKey`** `(row: T) => Key` — Assigns every displayed record to a declared section key.
 - **`getRowChildren`** `(row: T) => readonly T[] | undefined` — Enables tree mode. `data` then contains top-level rows and children are read recursively.
 - **`treeColumnKey`** `string` — Column containing indentation and the disclosure control. Defaults to the first visible data column.
 - **`expandedKeys`** `Key[]` — Controlled expanded rows.
@@ -201,6 +203,7 @@ Customizes the root frame. Every internal part of the table is a **sub-element**
 - `TreeContent`, `TreeToggle`, `TreeValue` — indentation, disclosure/leaf placeholder, and the consumer-rendered value in the tree column
 - `SortIndicator` — the sort arrow, inside the header `Item`'s suffix
 - `Foot`, `FootRow`, `FootCell` — pinned totals
+- `SectionRow`, `SectionCell`, `SectionContent`, `SectionLabel` — full-width list section captions, separate from record hover/selection styles; labels stay visible while scrolling horizontally
 - `StateContent` — the empty / no-results / error content
 
 ```jsx
@@ -579,6 +582,28 @@ Deliberately distinct, and not interchangeable:
 
 Unselectable rows are excluded from every scope. Pressing the header checkbox while everything in scope is selected clears the **whole** selection, not just the scope — leaving keys selected on other pages behind an unchecked-looking box is how people delete things they did not mean to.
 
+### Section Headers
+
+Use `sections` to divide a flat list into labeled zones while sharing its column headers, column widths and scroll area:
+
+```jsx
+<ItemTable
+  data={items}
+  columns={columns}
+  sections={[
+    { key: 'favorites', title: 'Favorites' },
+    { key: 'other', title: 'Other items' },
+  ]}
+  getSectionKey={(item) => item.isFavorite ? 'favorites' : 'other'}
+/>
+```
+
+The array defines section order. Client sorting applies within each section; clearing the sort restores source order within each section. Search filters records, then empty sections disappear. Captions do not consume page slots or affect footer counts, selection, bulk actions, links or row actions. A section continuing onto another client page repeats its caption there. Keyboard row navigation skips captions, and virtualization measures them separately from records. Accessible captions are structural grid rows, so `aria-rowcount` and document-absolute row indices include them; pagination summaries still count records only. Sectioned records keep keys resolved from their source positions, including when `getRowKey` uses its index argument.
+
+`title` accepts a React node. Captions scroll with the list and can be customized with `styles.SectionCell` and `styles.SectionRow`. For example, `styles={{ SectionCell: { preset: 't3m' } }}` changes their typography without changing column headers or record cells.
+
+This first version applies to flat tables with client, infinite or no pagination. Infinite mode groups the currently loaded records; the caller still owns loading. Tree mode, row drag/drop and server pagination keep their existing behavior and ignore section props with a development warning. These modes need hierarchy, drop-boundary or unseen-section metadata that ordinary captions do not provide. Missing paired props, duplicate section keys or a displayed record returning an undeclared key also warn and fall back to the ordinary list, preserving all records.
+
 ### Row Links and Row Actions
 
 `rowLink` turns the row-header cell into a stretched anchor covering the whole row:

package/docs/components/fields/ComboBox.md

@@ -28,7 +28,7 @@ A combobox component that combines a text input with a dropdown list, allowing u
 - **`defaultSelectedKey`** `string` — The key of the initially selected item (uncontrolled)
 - **`allowsCustomValue`** `boolean` (default: `false`) — Whether the combo box allows custom values to be entered
 - **`shouldCommitOnBlur`** `boolean` (default: `true`) — Whether to commit custom value on blur in allowsCustomValue mode. When `false`, blur discards the uncommitted text
-- **`clearOnBlur`** `boolean` (default: `false`) — Whether to clear selection and input on blur when the text names no selectable item (only applies to non-custom-value mode)
+- **`clearOnBlur`** `boolean` (default: `false`) — Whether to clear selection and input on blur, or on `Enter` with the popover closed, when the text names no selectable item (only applies to non-custom-value mode)
 - **`isClearable`** `boolean` (default: `false`) — Whether the combo box is clearable using ESC keyboard button or clear button inside the input
 - **`sortSelectedToTop`** `boolean` (default: `true when items provided, false otherwise`) — Whether to sort selected item to the top when popover opens (only works with items prop)
 - **`popoverTrigger`** `'focus' | 'input' | 'manual'` (default: `input`) — When the list opens on its own, see **popoverTrigger** below
@@ -56,7 +56,7 @@ A combobox component that combines a text input with a dropdown list, allowing u
 
 #### Notable Properties
 
-**onKeyDown** - Runs before ComboBox's own key handling, listed under [Keyboard Navigation](#keyboard-navigation). Calling `e.preventDefault()` takes the key over: ComboBox skips its handling for that event, so a prevented `ArrowDown` does not open the popover or move focus, and a prevented `Enter` does not select the focused option or commit a custom value. Without `preventDefault()` the built-in handling runs as usual after your handler. The event is React Aria's keyboard event (`KeyboardEvent` from `@react-types/shared`). `Escape` and `Tab` go on to ancestors, so a surrounding `Dialog` still closes on `Escape` and moves focus on `Tab`, unless ComboBox acts on them or you prevent them: `Escape` that closes the list or clears the value stops at the input, and so does an `Escape` or `Tab` you prevent. Other keys stop at the input unless you call `e.continuePropagation()`.
+**onKeyDown** - Runs before ComboBox's own key handling, listed under [Keyboard Navigation](#keyboard-navigation). Calling `e.preventDefault()` takes the key over: ComboBox skips its handling for that event, so a prevented `ArrowDown` does not open the popover or move focus, and a prevented `Enter` does not select the focused option, settle the typed text or commit a custom value. Without `preventDefault()` the built-in handling runs as usual after your handler. The event is React Aria's keyboard event (`KeyboardEvent` from `@react-types/shared`). `Escape` and `Tab` go on to ancestors, so a surrounding `Dialog` still closes on `Escape` and moves focus on `Tab`, unless ComboBox acts on them or you prevent them: `Escape` that closes the list or clears the value stops at the input, and so does an `Escape` or `Tab` you prevent. Other keys stop at the input unless you call `e.continuePropagation()`.
 
 ```jsx
 <ComboBox
@@ -102,6 +102,8 @@ const [selectedKey, setSelectedKey] = useState(null);
 </ComboBox>;
 ```
 
+Without `allowsCustomValue`, the built-in `Enter` on a closed popover settles text that matches an option, or names the selection, as blur does, then lets the form submit (see `Enter` under [Keyboard Navigation](#keyboard-navigation)). A handler that prevents it leaves the text unsettled until blur.
+
 **defaultInputValue** - Sets the initial input value in uncontrolled mode. This is useful when you want to display a specific text in the input field on mount without selecting any option. When both `defaultInputValue` and `defaultSelectedKey` are provided, `defaultInputValue` takes priority. The value can be changed by the user and is not enforced after initial render.
 
 **sortSelectedToTop** - When using the `items` prop (data-driven mode), the selected item will automatically appear at the top of the list when the popover opens. This is enabled by default when using `items`, but disabled when using JSX children. Set to `false` to maintain the original order.
@@ -112,7 +114,7 @@ const [selectedKey, setSelectedKey] = useState(null);
 
 **isReadOnly** - The list doesn't open, from the chevron, the arrow keys, a press in the input or focus, and neither keys nor blur change the value or the text. The clear button is hidden.
 
-**clearOnBlur** - When `true`, text that names no selectable item clears both the selection and the input when the input loses focus. When `false` (default), the input reverts to showing the current selection, and empty text still clears it. Only applies to non-custom-value mode. Useful for search-like scenarios where you want to reset after each interaction.
+**clearOnBlur** - When `true`, text that names no selectable item clears both the selection and the input when the input loses focus, or on `Enter` with the popover closed. When `false` (default), the input reverts to showing the current selection, and empty text still clears it. Only applies to non-custom-value mode. Useful for search-like scenarios where you want to reset after each interaction.
 
 **Blur** - Without `allowsCustomValue`, leaving the input selects the item the text names exactly, or else the only item it still matches, unless that item is in `disabledKeys`. The exact match follows the filter's rules for case, accents and locale. Among items sharing the label, the selected one wins, then the first enabled one. Empty text clears the selection. Other text reverts to the selection, or clears with `clearOnBlur`; a disabled item that is already selected stays selected. Blur reports only what it changes: leaving a field without editing it calls neither `onSelectionChange` nor `onInputChange`.
 
@@ -572,7 +574,7 @@ const [selectedKey, setSelectedKey] = useState(null);
 - `Tab` - Moves focus to/from the combobox input and closes the popover. The chevron and clear buttons are not Tab stops
 - `ArrowDown` - Opens popover (if closed) or moves focus to next option
 - `ArrowUp` - Opens popover (if closed) or moves focus to previous option
-- `Enter` - Selects the focused option and closes popover. Pressed right after typing, it picks the first match. With `allowsCustomValue` and the popover closed, commits the typed text. Ignored while an input method (IME) is composing text
+- `Enter` - Selects the focused option and closes popover. With the popover open, pressed right after typing, it picks the first match. With the popover closed and without `allowsCustomValue`, settles the typed text as leaving the input does (see **Blur**) and lets a surrounding form submit the result; text that matches no option and does not name the selection, or no text, clears the selection instead and does not submit. With `allowsCustomValue` and the popover closed, commits the typed text. Ignored while an input method (IME) is composing text
 - `Escape` - Closes popover (if open) or clears input (if clearable and popover closed); otherwise it goes on, so a surrounding dialog closes
 - `Home` - Moves focus to the first option (when popover is open)
 - `End` - Moves focus to the last option (when popover is open)
@@ -718,6 +720,8 @@ An `onKeyDown` handler runs before all of these and can skip any of them for a k
 
 This component supports all [Field properties](../../FieldProperties.md) when used within a Form. It integrates seamlessly with the form validation system and supports both controlled and uncontrolled modes.
 
+When the browser submits the form itself, as a plain `<form>` or a Form with `action` does,, `name` submits the selected key through a hidden input, not the label the input shows. With `allowsCustomValue` that is the committed text. Nothing selected submits an empty string, and a disabled ComboBox submits nothing.
+
 ### Form Example
 
 ```jsx

package/docs/components/fields/CommandTextArea.md

@@ -37,6 +37,7 @@ Choose a different component when the interaction has another outcome:
 - **`autoSize`** `boolean` (default: `false`) — Resize to fit content.
 - **`rows`** `number` (default: `3`) — Visible rows.
 - **`maxRows`** `number` (default: `10`) — Max visible rows when `autoSize` is true.
+- **`shape`** `'default' | 'plain'` (default: `default`) — Shape of the field box. `plain` is square with no border at rest, for a field set flush in a container that draws its edges, such as a toolbar or a panel header. Its border keeps its width and shows on focus and in a valid or invalid state, so nothing shifts
 - **`tooltip`** `string | TooltipProviderProps` — The input's own tooltip, opened on hover over the field box and on keyboard focus. It closes on the first key, so it never covers the suggestions. See [TextInput](./TextInput.md#with-a-tooltip) for the behaviour
 
 Each option's value is the **literal string to insert**. For commands, set the item's `textValue` (and `key`) to the full `/clear` — the slash is part of both the active token and the inserted value, so `/cle` becomes `/clear ` with no duplication. This decouples insertion from the trigger, so non-command autocomplete (e.g. a `@mention` resolving to `@john`) works the same way.

package/docs/components/fields/HueSlider.md

@@ -21,7 +21,6 @@ The HueSlider component allows users to select a hue value (0-359 degrees) from
 - **`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

package/docs/components/fields/NumberInput.md

@@ -31,6 +31,7 @@ A number input component that allows users to enter numeric values and increment
 - **`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
+- **`shape`** `'default' | 'plain'` (default: `default`) — Shape of the field box. `plain` is square with no border at rest, for a field set flush in a container that draws its edges, such as a toolbar or a panel header. Its border keeps its width and shows on focus and in a valid or invalid state, so nothing shifts
 - **`autoComplete`** `string` (default: `off`) — HTML [`autocomplete`](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) token that tells the browser what to autofill (`cc-number`, `one-time-code`, …). A number field opts out of autofill by default.
 - **`isWheelDisabled`** `boolean` — Whether scrolling the mouse wheel changes the value
 - **`decrementAriaLabel`** `string` — Custom aria-label for the decrement button, in place of the translated "Decrease {label}"
@@ -113,6 +114,7 @@ The `mods` prop accepts the following modifiers you can override:
 - **`hovered`** `boolean` — Forces hover appearance.
 - **`prefix`** `boolean` — Indicates presence of prefix content.
 - **`suffix`** `boolean` — Indicates presence of suffix content.
+- **`shape`** `'default' | 'plain'` — Set from `shape`: `plain` drops the radius, and the border colour at rest.
 
 ## Variants
 
@@ -214,6 +216,8 @@ A unit sits between the number and the steppers. Pass `suffixPosition="after"` t
 
 This component supports all [Field properties](../../FieldProperties.md) when used within a Form.
 
+When the browser submits the form itself, as a plain `<form>` or a Form with `action` does,, `name` submits the number through a hidden input: `1234.5`, not the formatted `1,234.5` the input shows. An empty field submits an empty string, and a disabled NumberInput submits nothing.
+
 ## Suggested Improvements
 
 - Provide `maxValue`/`minValue` indicator with value range

package/docs/components/fields/PasswordInput.md

@@ -26,6 +26,7 @@ A password input is a specialized text field that masks user input to protect se
 - **`tooltip`** `string | TooltipProviderProps` — The input's own tooltip, opened on hover over the field box and on keyboard focus. A disabled input with a tooltip stays focusable, so the keyboard reaches it too. See [TextInput](./TextInput.md#with-a-tooltip) for the behaviour.
 - **`suffixPosition`** `'before' | 'after'` (default: `after`) — Position of suffix relative to validation/loading icons
 - **`size`** `'small' | 'medium' | 'large'` (default: `medium`) — Input size
+- **`shape`** `'default' | 'plain'` (default: `default`) — Shape of the field box. `plain` is square with no border at rest, for a field set flush in a container that draws its edges, such as a toolbar or a panel header. Its border keeps its width and shows on focus and in a valid or invalid state, so nothing shifts
 - **`autoComplete`** `string` — HTML [`autocomplete`](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) token that tells the browser what to autofill (`current-password`, `new-password`, `off`, …). The lowercase `autocomplete` alias is deprecated.
 - **`inputProps`** `Props` — Direct props passed to the native input element, merged over the props React Aria generates: a key you set wins, and event handlers are chained rather than replaced. The explicit `isDisabled`, `maxLength`, `minLength`, `autoFocus` and `autoComplete` props win over the same attributes in `inputProps` when they are set; one left unset keeps the `inputProps` value
 - **`wrapperProps`** `Props` — Direct props passed to the input wrapper element
@@ -101,6 +102,7 @@ The `mods` property accepts the following modifiers you can override:
 - **`valid`** `boolean` — Whether the password input is valid
 - **`hovered`** `boolean` — Whether the password input is being hovered
 - **`inside-form`** `boolean` — Whether the password input is inside a form field
+- **`shape`** `'default' | 'plain'` — Set from `shape`: `plain` drops the radius, and the border colour at rest.
 
 ## Variants
 

package/docs/components/fields/SearchInput.md

@@ -27,6 +27,7 @@ A search input provides a specialized text field for search functionality, featu
 - **`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 while it has text. `Escape` clears the input either way
 - **`size`** `'small' | 'medium' | 'large'` (default: `medium`) — Input size
+- **`shape`** `'default' | 'plain'` (default: `default`) — Shape of the field box. `plain` is square with no border at rest, for a field set flush in a container that draws its edges, such as a toolbar or a panel header. Its border keeps its width and shows on focus and in a valid or invalid state, so nothing shifts
 - **`autoComplete`** `string` — HTML [`autocomplete`](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) token that tells the browser what to autofill (`off` to suppress autofill on a filter field). The lowercase `autocomplete` alias is deprecated.
 - **`inputProps`** `Props` — Direct props passed to the native input element, merged over the props React Aria generates: a key you set wins, and event handlers are chained rather than replaced
 - **`wrapperProps`** `Props` — Direct props passed to the input wrapper element
@@ -81,6 +82,7 @@ The `mods` property accepts the following modifiers you can override:
 - **`valid`** `boolean` — Whether the search input is valid
 - **`hovered`** `boolean` — Whether the search input is being hovered
 - **`inside-form`** `boolean` — Whether the search input is inside a form field
+- **`shape`** `'default' | 'plain'` — Set from `shape`: `plain` drops the radius, and the border colour at rest.
 
 ## Variants
 
@@ -90,6 +92,17 @@ The `mods` property accepts the following modifiers you can override:
 - `medium` - Standard size
 - `large` - Emphasized size for prominent search functionality
 
+### Shapes
+
+- `default` - A rounded field box with a border
+- `plain` - A square field box with no border at rest, for a field set flush in a container that draws its edges, such as a toolbar or a panel header. The border still marks focus and validity.
+
+```jsx
+<Block styles={{ border: 'bottom', fill: '#surface' }}>
+  <SearchInput shape="plain" width="100%" aria-label="Search models" placeholder="Search models" />
+</Block>
+```
+
 ## Examples
 
 ### Basic Usage

package/docs/components/fields/Slider.md

@@ -39,7 +39,6 @@ Pass `isValid` or `isInvalid` to tint the track fill and the thumb.
 - **`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)

package/docs/components/fields/TextArea.md

@@ -45,6 +45,7 @@ These properties allow direct style application without using the `styles` prop:
 - **`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
+- **`shape`** `'default' | 'plain'` (default: `default`) — Shape of the field box. `plain` is square with no border at rest, for a field set flush in a container that draws its edges, such as a toolbar or a panel header. Its border keeps its width and shows on focus and in a valid or invalid state, so nothing shifts
 - **`autoComplete`** `string` — HTML [`autocomplete`](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) token that tells the browser what to autofill (`street-address`, `off`, …). The lowercase `autocomplete` alias is deprecated.
 - **`maxLength`** `number` — Maximum number of characters allowed
 - **`minLength`** `number` — Minimum number of characters required

package/docs/components/fields/TextInput.md

@@ -30,6 +30,7 @@ A text input component that allows users to input custom text entries with a key
 - **`rows`** `number` — Number of visible rows for multiline input
 - **`resize`** `string` — CSS resize value for multiline input (e.g. `'vertical'`, `'none'`)
 - **`size`** `'small' | 'medium' | 'large'` (default: `medium`) — Input size
+- **`shape`** `'default' | 'plain'` (default: `default`) — Shape of the field box. `plain` is square with no border at rest, for a field set flush in a container that draws its edges, such as a toolbar or a panel header. Its border keeps its width and shows on focus and in a valid or invalid state, so nothing shifts
 - **`autoComplete`** `string` — HTML [`autocomplete`](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) token that tells the browser what to autofill (`email`, `username`, `off`, …). The lowercase `autocomplete` alias is deprecated.
 - **`maxLength`** `number` — Maximum number of characters allowed
 - **`minLength`** `number` — Minimum number of characters required
@@ -121,6 +122,7 @@ The `mods` prop accepts the following modifiers you can override:
 - **`multiline`** `boolean` — Set for a multiline input.
 - **`prefix`** `boolean` — Indicates presence of prefix content.
 - **`suffix`** `boolean` — Indicates presence of suffix content.
+- **`shape`** `'default' | 'plain'` — Set from `shape`: `plain` drops the radius, and the border colour at rest.
 
 ## Variants
 
@@ -139,6 +141,17 @@ The `mods` prop accepts the following modifiers you can override:
 - `medium` – Standard height for most use cases
 - `large` – Emphasized height for important inputs
 
+### Shapes
+
+- `default` – A rounded field box with a border
+- `plain` – A square field box with no border at rest, for a field set flush in a container that draws its edges, such as a toolbar or a panel header. The border still marks focus and validity. See `SearchInput`'s Plain story.
+
+```jsx
+<Block styles={{ border: 'bottom' }}>
+  <TextInput shape="plain" width="100%" aria-label="Title" placeholder="Untitled" />
+</Block>
+```
+
 ## Examples
 
 ### Basic Usage
@@ -181,7 +194,7 @@ import { IconMail } from '@tabler/icons-react';
 | `Escape` while it is open | Closes the tooltip only. The key goes no further, so it doesn't clear a `SearchInput` or close a surrounding dialog |
 | The input loses focus, or the pointer leaves | Closes |
 
-A disabled field still shows its tooltip, which makes it the place to say why it can't be changed. While it has a tooltip it stays focusable, marked `aria-disabled` and read-only instead of natively disabled, so keyboard users can read the reason too. It takes no text, `NumberInput` doesn't step, `Enter` submits nothing, and a click on it or on its label doesn't focus it, as with a natively disabled field. Screen readers announce it as disabled and read-only. Not being natively disabled, its value is part of a plain `<form>`'s submitted data; ui-kit's `Form` is not affected. Without a tooltip, a disabled input is natively disabled and `Tab` skips it.
+A disabled field still shows its tooltip, which makes it the place to say why it can't be changed. While it has a tooltip it stays focusable, marked `aria-disabled` and read-only instead of natively disabled, so keyboard users can read the reason too. It takes no text, `NumberInput` doesn't step, `Enter` submits nothing, and a click on it or on its label doesn't focus it, as with a natively disabled field. Screen readers announce it as disabled and read-only. Not being natively disabled, its value is part of a plain `<form>`'s submitted data, except `NumberInput`'s, which submits through a hidden input that is disabled with the field. A ui-kit `Form` that handles its own submission is not affected. Without a tooltip, a disabled input is natively disabled and `Tab` skips it.
 
 ```jsx
 <NumberInput isDisabled aria-label="Font size" tooltip="Turn data labels on to change this" />

package/docs/components/navigation/Tabs.md

@@ -105,6 +105,53 @@ For individual tabs:
 - **`draggable`** `boolean` — True when tab can be dragged (reorderable)
 - **`dragging`** `boolean` — True when tab is being dragged
 
+### Theming
+
+Tabs has no theming props. To dress the tabs in your own colors and font, re-declare the tokens they read through `tabListStyles`, `styles` or `tokens`:
+
+- **Title** — `#surface-text-soft`. A disabled title keeps `#disabled-surface-text`.
+- **Active title** of a `default` or `narrow` tab, and a hovered `narrow` title — `#primary-accent-text`
+- **Selection indicator** — `#primary-accent-surface`: the line a `default` or `narrow` tab draws on the edge facing the panels, and the same edge of a selected `file` tab
+- **Title font** — `$font-sans`, which the tab's typography preset takes its font family from
+
+Tabs read these names directly, so overriding the legacy aliases they replaced (`#dark-02`, `#primary-text`, `#primary`) no longer reaches them.
+
+Put the tokens in `tabListStyles` to keep them to the tabs. In `tokens` or `styles` on `Tabs` they are declared on its outer wrapper, so they reach everything inside that reads them, the panels included: there `#primary-accent-surface` also fills primary buttons and `$font-sans` sets the body text. Use them there for a `Tabs` without panels, or when the panels should take the theme too. A `font` in a tab's own `styles` wins over the preset for that tab alone. The same tokens also color the tab's focus and editing ring (`#primary-accent-text`), the drag-and-drop indicator and the spring-load hint (`#primary-accent-surface`), so an override recolors those too.
+
+```jsx
+<Tabs
+  defaultActiveKey="overview"
+  tabListStyles={{
+    '#surface-text-soft': '#success-accent-text-soft',
+    '#primary-accent-text': '#success-accent-text',
+    '#primary-accent-surface': '#success-accent-surface',
+    '$font-sans': 'Georgia, serif',
+  }}
+>
+  <Tab key="overview" title="Overview" />
+  <Tab key="activity" title="Activity" />
+  <Tab key="query" title="Query" styles={{ font: 'monospace' }} />
+</Tabs>
+```
+
+A navigation strip with no panels, themed with your own tokens:
+
+```jsx
+<Tabs
+  activeKey={activeKey}
+  tokens={{
+    '#surface-text-soft': '#widget-text-secondary',
+    '#primary-accent-text': '#widget-title',
+    '#primary-accent-surface': '#widget-title',
+    '$font-sans': '$widget-title-font',
+  }}
+  onChange={setActiveKey}
+>
+  <Tab key="sales" title="Sales" />
+  <Tab key="marketing" title="Marketing" />
+</Tabs>
+```
+
 ## Variants
 
 ### Types

package/docs/components/overlays/Dialog.md

@@ -21,7 +21,7 @@ Dialogs are windows containing contextual information, tasks, or workflows that
 - **`styles`** — Custom styles for the dialog root
 - **`closeButtonStyles`** — Custom styles for the close button
 - **`isDismissable`** `boolean` (default: from its `DialogTrigger` or `DialogContainer`) — Whether the dialog shows its close button. Inside a `DialogTrigger` or `DialogContainer` it takes their `isDismissable` (default `true`), except in a popover. A popover or a standalone dialog shows no close button unless you set this prop. `Escape` and outside presses follow the trigger's or container's `isDismissable`, not this one
-- **`onDismiss`** `function` — Callback fired when the dialog is dismissed
+- **`onDismiss`** `function` — Callback fired when the dialog is dismissed. The close button calls it, after "Discard changes?" when its trigger or container asks first (`confirmDismiss`)
 - **`closeIcon`** — Custom close icon element
 - **`role`** `'dialog' | 'alertdialog'` (default: `dialog`) — ARIA role for the dialog
 
@@ -194,7 +194,7 @@ To clamp the width yourself, set `styles.width` (`styles={{ width: 'initial 520p
 
 - `Tab` - Moves focus between interactive elements within the dialog
 - `Shift + Tab` - Moves focus backward between interactive elements
-- `Escape` - Closes the dialog when its `DialogTrigger` or `DialogContainer` is dismissable (`isDismissable`, on by default) and `isKeyboardDismissDisabled` is not set. If a control inside already prevents the key's default, the dialog stays open and keeps the handled Escape from reaching an enclosing dialog
+- `Escape` - Closes the dialog when its `DialogTrigger` or `DialogContainer` is dismissable (`isDismissable`, on by default) and `isKeyboardDismissDisabled` is not set. A dialog with unsaved edits asks "Discard changes?" first (`confirmDismiss`). If a control inside already prevents the key's default, the dialog stays open and keeps the handled Escape from reaching an enclosing dialog
 - `Enter/Space` - Activates focused buttons or interactive elements
 
 ### Screen Reader Support

package/docs/components/overlays/DialogContainer.md

@@ -21,6 +21,7 @@ A DialogContainer accepts a single Dialog as a child, and manages to show and hi
 - **`styles`** `Styles` — Styles for the overlay content shell
 - **`isDismissable`** `boolean` (default: `true`) — Whether the Dialog is dismissible
 - **`isKeyboardDismissDisabled`** `boolean` (default: `false`) — Whether pressing the escape key to close the dialog should be disabled
+- **`confirmDismiss`** `boolean` — Whether Escape, an outside click and the close button ask "Discard changes?" before they call `onDismiss`. Unset, they ask while a `DialogForm` inside has unsaved edits; `true` always asks, `false` never does. Closing it from code (`isOpen`, removing the child) never asks. See [Unsaved edits](./DialogTrigger.md#unsaved-edits)
 - **`isOpen`** `boolean` — Whether the modal is open or not
 - **`onDismiss`** `function` — Handler called when the x button of a dismissible Dialog is clicked
 - **`hideOnClose`** `boolean` (default: `false`) — Whether the dialog should be hidden when closed. Focus moves as for a dialog that mounts on open: in on every open, and on close back to the element that opened it, or to the trigger of the menu or popover it sat in once that has closed. [Focus with `hideOnClose`](#focus-with-hideonclose) lists what still differs

package/docs/components/overlays/DialogForm.md

@@ -24,9 +24,10 @@ The examples below use modern controllers. See [Modern Form](../form/ModernForm.
 - **`submitProps`** `CubeButtonProps` (legacy) / `Omit<CubeSubmitButtonProps<T>, 'form'>` (modern) — Customize the submit button, including its text (`children`) and modern `disableOnInvalid`
 - **`cancelProps`** `CubeButtonProps` — Customize the cancel button, including its text (`children`)
 - **`preserve`** `boolean` (default: `false`) — Retain values when the editing session ends. Keep the controller mounted above the dialog to retain a draft across dialog unmounts.
+- **`confirmDismiss`** `boolean` — Whether Escape, an outside click and the close button ask "Discard changes?" before they close the dialog. Unset, they ask while a field the user edited differs from its default, unless `preserve` is set. Set `false` for a confirmation, such as typing a name to delete, where backing out loses nothing. An explicit `confirmDismiss` on the `DialogTrigger` or `DialogContainer` wins. See [Unsaved edits](./DialogTrigger.md#unsaved-edits)
 - **`noActions`** `boolean` — Hide the default submit/cancel buttons
 - **`children`** `ReactNode | ((dismiss: () => void) => ReactNode)` — Fields, or a render function for custom actions
-- **`onDismiss`** `() => void` — Called by the built-in Cancel/close button or the render function's `dismiss`. Handle Escape, outside clicks, and externally controlled closing on `DialogTrigger` or `DialogContainer`.
+- **`onDismiss`** `() => void` — Called by the built-in Cancel/close button or the render function's `dismiss`. Handle Escape, outside clicks, and externally controlled closing on `DialogTrigger` or `DialogContainer`. With unsaved edits, the close button calls it only after the user discards them.
 - **`onSubmit`** `(values: FormValues<T>, context: ModernSubmitContext) => void | Promise<void>` — Modern submit callback. Resolve to close; throw/reject to keep the dialog open. The context supplies an `AbortSignal`.
 - **`onSubmitFailed`** `(failure: ModernSubmitFailure) => void | Promise<void>` — Distinguishes invalid fields from a failed save
 - **`onValuesChange`** `(values: FormValues<T>, change: FormChange) => void | Promise<void>` — Modern value-change callback
@@ -154,6 +155,7 @@ The parent owns `form` in this example. `preserve` keeps its draft on dismissal
 - Invalid fields and rejected saves leave the dialog open. Include `Form.SubmitError` to display save failures. Submit stays enabled after validation errors by default so the user can retry.
 - In a popover, modern form actions keep the dialog open while validating or saving. This also covers custom actions inside the form; successful submission and explicit dismissal control when it closes.
 - Explicit Submit/Cancel actions can close a dialog even when its trigger disables passive dismissal with `isDismissable={false}`. Escape and outside-click dismissal remain disabled.
+- While a field the user edited differs from its default, Escape, a click outside and the close button ask "Discard changes?" before they close the dialog ([Unsaved edits](./DialogTrigger.md#unsaved-edits)); Submit, Cancel and the render function's `dismiss` close it at once. A value set from code (`setValue`, `setFieldsValue`) is not an edit, even once the user has visited that field, so filling the form on open doesn't ask. A custom input that writes with the modern `setValue` passes `{ source: 'user' }`, so its changes count. With `preserve` the edits survive the close, so it never asks, and neither does a popover. Set `confirmDismiss={false}` to close at once.
 - Modern dismissal cancels pending submission even with `preserve`. The submitted callback receives an aborted signal; a late completion cannot close a reopened dialog. Pass the signal to abortable API work.
 - Modern values reset when the editing session ends unless `preserve` is set. This includes Cancel, the close button, Escape/outside closing, and removal of the dialog. Hidden dialogs also end the session when closed. A close followed by an immediate reopen has no delayed reset that can erase new edits.
 - Replacing the modern controller ends the detached controller's session using its last committed `preserve` setting. The new controller keeps its own values and editing session.

package/docs/components/overlays/DialogTrigger.md

@@ -23,6 +23,7 @@ DialogTrigger serves as a wrapper around a Dialog and its associated trigger, li
 - **`mobileViewport`** `number` (default: `700`) — The screen breakpoint for the mobile type
 - **`isDismissable`** `boolean` (default: `true`) — Whether passive dismissal (Escape or an outside click) can close the dialog. Explicit dialog actions, such as Submit and Cancel, can still close it. A popover that is not dismissable leaves outside presses alone: the control pressed still receives the press, and a text field there can take focus, because such a popover does not hold focus. It stays open when another popover opens, and closes when a modal, tray, fullscreen or panel dialog opens from another `DialogTrigger`.
 - **`isKeyboardDismissDisabled`** `boolean` (default: `false`) — Whether pressing the escape key to close the dialog should be disabled
+- **`confirmDismiss`** `boolean` — Whether Escape, an outside click and the close button ask "Discard changes?" before they close the dialog. Unset, they ask while a `DialogForm` inside has unsaved edits; `true` always asks, `false` never does. Explicit actions (Submit, Cancel, the `close` function) never ask, and neither does a popover. See [Unsaved edits](#unsaved-edits)
 - **`isOpen`** `boolean` — Whether the dialog is open (controlled)
 - **`defaultOpen`** `boolean` (default: `false`) — Whether the dialog is open by default (uncontrolled)
 - **`offset`** `number` (default: `8`) — The gap between the trigger and a popover, along the main axis. `0` places the popover flush against the trigger
@@ -128,6 +129,35 @@ These properties allow direct style application without using the `styles` prop:
 </DialogTrigger>
 ```
 
+### Unsaved edits
+
+A dialog that holds unsaved edits asks before a passive dismissal discards them: Escape from any control, a click outside the dialog, or its close button opens a "Discard changes?" confirmation instead of closing. **Discard** closes the dialog and calls `onDismiss`; **Keep editing**, Escape or a click outside the confirmation returns to the dialog with its edits and focus where they were.
+
+A `DialogForm` turns this on while a field the user edited differs from its default, so a form dialog needs no wiring; a value set from code doesn't count. For any other dialog, bind `confirmDismiss` to its own state:
+
+```jsx
+<DialogTrigger confirmDismiss={notes !== savedNotes}>
+  <Button>Edit notes</Button>
+  {(close) => (
+    <Dialog isDismissable>
+      <Header>
+        <Title>Notes</Title>
+      </Header>
+      <Content>
+        <TextArea label="Notes" value={notes} onChange={setNotes} />
+      </Content>
+      <Footer>
+        <Button type="primary" onPress={() => save(notes).then(close)}>
+          Save
+        </Button>
+      </Footer>
+    </Dialog>
+  )}
+</DialogTrigger>
+```
+
+`confirmDismiss={false}`, on the `DialogForm` or here, keeps a form dialog closing at once: a confirmation such as typing a name to delete loses nothing when the user backs out. A value set here wins over the form's. `isDismissable={false}` still turns passive dismissal off altogether. A popover never asks: it also closes when another popover opens or a button inside it is pressed, and its edits are often applied as they are made.
+
 ### Controlled State
 
 ```jsx
@@ -152,7 +182,7 @@ function ControlledDialog() {
 ### Keyboard Navigation
 
 - `Enter/Space` - Opens the dialog when trigger is focused
-- `Escape` - Closes the dialog (unless disabled)
+- `Escape` - Closes the dialog (unless disabled). While the dialog holds unsaved edits, it asks first; see [Unsaved edits](#unsaved-edits)
 - `Tab` - Cycles through focusable elements within the dialog
 
 ### Screen Reader Support

package/package.json

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