@cube-dev/ui-kit 0.183.0 → 0.184.0

package/docs/components/navigation/Tabs.md

@@ -41,7 +41,7 @@ An accessible tabbed interface for organizing content into multiple panels, show
 - **`isReorderable`** `boolean` (default: `false`) — Enable drag-and-drop tab reordering. When a tab picker is shown, reordering is automatically enabled in the picker dropdown as well
 - **`keyOrder`** `string[]` — Controlled tab display order
 - **`onReorder`** `(newOrder: string[]) => void` — Callback when tabs are reordered
-- **`showTabPicker`** `boolean | 'auto'` (default: `false`) — Show dropdown tab picker
+- **`showTabPicker`** `boolean | 'auto'` (default: `false`) — Show dropdown tab picker. Each entry carries its tab's `icon` and `tooltip`
 - **`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
@@ -121,7 +121,7 @@ For individual tabs:
 - `medium` - Default size with t3m typography
 - `large` - Larger tabs with t3m typography
 
-**Note:** Radio type supports `large` (default, 40px total) and `medium` (32px total) sizes, mapped to Item button sizes `medium` (32px) and `xsmall` (24px) respectively.
+**Note:** Radio type supports `large` (default, 40px total) and `medium` (32px total) sizes, mapped to Item button sizes `medium` (32px) and `xsmall` (24px) respectively. A radio tab given less room than its title (an explicit `width`, say) truncates the title and shows it in a tooltip.
 
 ### Placement / Vertical Tabs
 
@@ -409,7 +409,7 @@ Add dropdown menus to tabs using the `menu` prop. This replaces the need for man
 
 Combine editable tabs with a menu for rename, duplicate, and delete actions. The inline editing UI is provided by [InlineInput](../content/InlineInput.md), which can also be used standalone elsewhere.
 
-> For editable tabs the `tooltip` prop is rendered by `InlineInput` rather than by the surrounding tab button. This keeps the tooltip in sync with the editing UI (and avoids a double tooltip) — the trigger area is the title content, not the entire tab button. Long titles also get an automatic ellipsis + overflow tooltip without any extra configuration.
+> For editable tabs with a string title the `tooltip` prop is rendered by `InlineInput` rather than by the surrounding tab button. This keeps the tooltip in sync with the editing UI (and avoids a double tooltip) — the trigger area is the title content, not the entire tab button. Long titles also get an automatic ellipsis + overflow tooltip without any extra configuration. An editable tab whose `title` is a ReactNode shows its `tooltip` on the tab button instead, hidden while the title is being edited.
 
 ```jsx
 <Tabs

package/docs/components/overlays/Dialog.md

@@ -87,6 +87,17 @@ The `mods` property accepts the following modifiers you can override:
 
 - **`dismissable`** `boolean` — Applied when the dialog can be dismissed with close button or Escape key
 
+`Footer` inside a dialog carries one modifier of its own:
+
+- **`content-overflow`** `boolean` — Applied while the dialog's `Content` is taller than the room it has, i.e. while it scrolls. The footer draws its top border only then, so the line separates the actions from a body that continues beneath them and is absent under a body that fits.
+
+The body is the `Content` that is a direct child of the dialog or of a direct-child `<form>`. A `border` in the footer's own styles replaces the default, so a footer can keep the line always or never draw it:
+
+```jsx
+<Footer styles={{ border: 'top' }}>{/* line always */}</Footer>
+<Footer styles={{ border: false }}>{/* line never */}</Footer>
+```
+
 ## Variants
 
 ### Types
@@ -213,9 +224,25 @@ The `mods` property accepts the following modifiers you can override:
    </Dialog>
    ```
 
-3. **Accessibility**: Always provide a meaningful title for screen readers
-4. **Dismissal**: Use `isDismissable` for dialogs that users can close voluntarily
-5. **Focus Management**: Ensure focus moves to the most important action when dialog opens
+3. **Wrapping the slots in a form**: A `Form` may sit directly between `Dialog` and its slots, so the submit button is inside it. A `Form` placed there lays itself out as the dialog's slot column, so `Content` still scrolls and `Footer` still pins with no styles of your own:
+
+   ```jsx
+   <Dialog>
+     <Header><Title>Edit</Title></Header>
+     <Form>
+       <Content>{/* long body, scrolls */}</Content>
+       <Footer>
+         <Button type="primary" htmlType="submit">Save</Button>
+       </Footer>
+     </Form>
+   </Dialog>
+   ```
+
+   Only a **direct child** `Form` is treated this way. A form nested deeper, or a plain `<form>` element, is your own layout and is left alone. The layout is the form's own state rather than a rule in `Dialog`, so `styles` on the form still win: `<Form styles={{ gap: '1x' }}>` puts `1x` between the slots.
+
+4. **Accessibility**: Always provide a meaningful title for screen readers
+5. **Dismissal**: Use `isDismissable` for dialogs that users can close voluntarily
+6. **Focus Management**: Ensure focus moves to the most important action when dialog opens
 
 ## Integration with Overlays
 

package/docs/components/overlays/DialogForm.md

@@ -149,6 +149,7 @@ The parent owns `form` in this example. `preserve` keeps its draft on dismissal
 
 ## Behavior
 
+- Actions render in a pinned `Footer` beside the scrolling `Content`, so a long form scrolls its body while Submit and Cancel stay visible. The `<form>` wraps both slots, so the buttons are still inside it and native submit works. The footer draws a top line only while the body scrolls; a form that fits has none. Set `noActions` to supply your own.
 - Modern forms use the same callback precedence as `Form`: root callbacks override controller callbacks; omitted callbacks fall back to the controller's latest committed callbacks. Automatic closing works for both, including imperative `form.submit()`.
 - 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.

package/package.json

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