@cube-dev/ui-kit 0.165.0 → 0.167.0

package/docs/components/actions/ItemButton.md

@@ -183,34 +183,20 @@ Actions automatically inherit the parent button's `type` prop and adjust their s
 
 ## Behaviour Inside Popovers
 
-Like `Button`, an `ItemButton` press inside an open popover **dismisses
-that popover** by default — popovers are transient surfaces and any action
-inside them should close them. Modals/trays/fullscreen Dialogs are not
-affected.
+Like `Button`, an `ItemButton` press inside an open popover **dismisses that popover** by default — popovers are transient surfaces and any action inside them should close them. Modals/trays/fullscreen Dialogs are not affected.
 
 ### Opt-outs
 
-- **Automatic for popover triggers** — `MenuTrigger`, `DialogTrigger
-type="popover"`, and the picker components (`FilterPicker`, `Picker`,
-  `ComboBox`, `Select`) mark their trigger ItemButtons with
-  `data-popover-trigger` so they don't dismiss the popover they themselves
-  live in.
-- **Manual via `data-popover-keep`** — add to the ItemButton (toggle) or
-  any ancestor (whole subtree):
+- **Automatic for popover triggers** — `MenuTrigger`, `DialogTrigger type="popover"`, and the picker components (`FilterPicker`, `Picker`, `ComboBox`, `Select`) mark their trigger ItemButtons with `data-popover-trigger` so they don't dismiss the popover they themselves live in.
+- **Manual via `data-popover-keep`** — add to the ItemButton (toggle) or any ancestor (whole subtree):
   ```jsx
   <ItemButton data-popover-keep onPress={() => setMode((m) => !m)}>
     Toggle Mode
   </ItemButton>
   ```
-- **Custom non-Cube triggers** — call `useDismissParentPopover()` directly
-  if you build a control on top of something other than `Button` /
-  `ItemButton`.
-
-The dismiss is dispatched via the EventBus, which defers with `setTimeout(0)`
-— so synchronous `onPress` handlers (and the React state updates they
-trigger) flush BEFORE the popover closes. This makes the "open a hoisted
-modal from a popover footer" pattern work without flicker: the modal mounts
-first, then the popover closes behind it.
+- **Custom non-Cube triggers** — call `useDismissParentPopover()` directly if you build a control on top of something other than `Button` / `ItemButton`.
+
+The dismiss is dispatched via the EventBus, which defers with `setTimeout(0)` — so synchronous `onPress` handlers (and the React state updates they trigger) flush BEFORE the popover closes. This makes the "open a hoisted modal from a popover footer" pattern work without flicker: the modal mounts first, then the popover closes behind it.
 
 ## Best Practices
 

package/docs/components/actions/Link.md

@@ -27,6 +27,7 @@ Supports [Base properties](../../BaseProperties.md)
 Customizes the root element of the component.
 
 Sub-elements:
+
 - `ButtonIcon` – wrapper around `icon` and `rightIcon` when used.
 
 ### Style Properties
@@ -69,6 +70,7 @@ These properties allow direct style application without using the `styles` prop:
 ```
 
 Notes:
+
 - Adds `target="_blank"` and `rel="noopener noreferrer"` automatically.
 - Cmd/Ctrl/Shift + click also opens in a new tab, like a native link.
 
@@ -101,11 +103,13 @@ Notes:
 ```
 
 Accepted object shape:
+
 ```ts
 { pathname?: string; search?: string; hash?: string }
 ```
 
 Notes:
+
 - `search` and `hash` are auto-prefixed with `?` and `#` if needed
 - `pathname` can be relative (e.g., `../parent`) or absolute (e.g., `/root`)
 - Works with `!` and `@` prefixes when passed as strings
@@ -124,6 +128,7 @@ Notes:
 ```
 
 Behavior:
+
 - Uses `navigate(delta)` from the navigation adapter with overload signature
 - The default adapter calls `window.history.go(delta)`
 
@@ -217,6 +222,7 @@ export function App() {
 ```
 
 Default adapter behavior:
+
 - String/object navigation uses `window.location.assign(href)`
 - History navigation uses `window.history.go(delta)`
 - `!` prefix opens resolved URLs in a new tab
@@ -230,10 +236,10 @@ Default adapter behavior:
 Control navigation behavior via the `navigationOptions` prop:
 
 ```jsx
-<Link 
+<Link
   to="/search"
-  navigationOptions={{ 
-    replace: true, 
+  navigationOptions={{
+    replace: true,
     state: { from: 'homepage' },
     relative: 'path',
     preventScrollReset: true
@@ -246,7 +252,7 @@ Control navigation behavior via the `navigationOptions` prop:
 ### Available options
 
 - `replace`: Replace current history entry instead of pushing a new one
-- `state`: Navigation state data (router-specific)  
+- `state`: Navigation state data (router-specific)
 - `relative`: How relative paths are resolved (`'route'` | `'path'`)
 - `preventScrollReset`: Prevent scroll reset on navigation
 
@@ -326,4 +332,3 @@ These options are passed to the router's `navigate` function and have no effect
 ## Related Components
 
 - [Button](./Button.md) – Action component with multiple visual styles, including `type="link"`.
-

package/docs/components/actions/Menu.md

@@ -62,6 +62,7 @@ Supports [Base properties](../../BaseProperties.md)
 Customizes the root menu container element.
 
 **Sub-elements:**
+
 - `Header` - Optional header element at the top of the menu
 - `Divider` - Separator elements between sections
 
@@ -70,14 +71,17 @@ Customizes the root menu container element.
 Customizes individual menu items.
 
 **Sub-elements:**
+
 - `Icon` - Icon element within menu items
 - `Text` - Main text content of menu items
 - `Description` - Secondary text content for items with descriptions
+
 #### sectionStyles
 
 Customizes section container elements.
 
 **Sub-elements:**
+
 - `SectionHeading` - Section title/heading element
 
 #### sectionHeadingStyles
@@ -117,6 +121,7 @@ The `mods` property accepts the following modifiers you can override:
 - **`selectedKeys`** `string[]` — Currently selected keys (controlled)
 - **`defaultSelectedKeys`** `string[]` — Initially selected keys (uncontrolled)
 - **`onSelectionChange`** `(keys: string[]) => void` — Handler for selection changes
+
 ### State Properties
 
 - **`disabledKeys`** `Iterable<Key>` — Keys of disabled items
@@ -167,16 +172,16 @@ For detailed information about all available item properties, see [Item document
 
 ```jsx
 <Menu>
-  <Menu.Item 
-    key="save" 
+  <Menu.Item
+    key="save"
     icon={<IconSave />}
     hotkeys="cmd+s"
     description="Save the current document"
   >
     Save
   </Menu.Item>
-  <Menu.Item 
-    key="export" 
+  <Menu.Item
+    key="export"
     icon={<IconExport />}
     suffix="PDF"
     tooltip="Export as PDF file"
@@ -215,6 +220,7 @@ For detailed information about all available item properties, see [Item document
 ## Selection Modes
 
 ### None (Default)
+
 Items are not selectable and only trigger `onAction` when activated.
 
 ```jsx
@@ -225,6 +231,7 @@ Items are not selectable and only trigger `onAction` when activated.
 ```
 
 ### Single Selection
+
 Only one item can be selected at a time.
 
 ```jsx
@@ -235,6 +242,7 @@ Only one item can be selected at a time.
 ```
 
 ### Multiple Selection
+
 Multiple items can be selected simultaneously.
 
 ```jsx
@@ -309,8 +317,8 @@ const items = [
   <Menu.Item key="copy" tooltip="Copy selected text">
     Copy
   </Menu.Item>
-  <Menu.Item 
-    key="paste" 
+  <Menu.Item
+    key="paste"
     tooltip={{ title: "Paste from clipboard", placement: "left" }}
   >
     Paste
@@ -324,7 +332,7 @@ const items = [
 <Menu onAction={(key) => console.log(key)}>
   <Menu.Item key="copy">Copy</Menu.Item>
   <Menu.Item key="paste">Paste</Menu.Item>
-  
+
   <Menu.SubMenuTrigger>
     <Menu.Item key="share">Share</Menu.Item>
     <Menu onAction={(key) => console.log(key)}>
@@ -333,7 +341,7 @@ const items = [
       <Menu.Item key="share-sms">SMS</Menu.Item>
     </Menu>
   </Menu.SubMenuTrigger>
-  
+
   <Menu.Item key="delete">Delete</Menu.Item>
 </Menu>
 ```
@@ -343,13 +351,13 @@ const items = [
 ```jsx
 <Menu onAction={(key) => console.log(key)}>
   <Menu.Item key="new">New File</Menu.Item>
-  
+
   <Menu.SubMenuTrigger>
     <Menu.Item key="export">Export</Menu.Item>
     <Menu onAction={(key) => console.log(key)}>
       <Menu.Item key="export-pdf">Export as PDF</Menu.Item>
       <Menu.Item key="export-image">Export as Image</Menu.Item>
-      
+
       <Menu.SubMenuTrigger>
         <Menu.Item key="export-formats">More formats</Menu.Item>
         <Menu onAction={(key) => console.log(key)}>
@@ -368,7 +376,7 @@ const items = [
 ```jsx
 <Menu onAction={(key) => console.log(key)}>
   <Menu.Item key="copy">Copy</Menu.Item>
-  
+
   <Menu.SubMenuTrigger>
     <Menu.Item key="settings">Settings</Menu.Item>
     <Menu onAction={(key) => console.log(key)}>
@@ -418,12 +426,14 @@ const items = [
 ## Best Practices
 
 1. **Clear Labels**: Use descriptive, action-oriented labels
+
    ```jsx
    <Menu.Item key="save">Save Document</Menu.Item> // Good
    <Menu.Item key="save">Save</Menu.Item> // Less clear
    ```
 
 2. **Logical Grouping**: Group related actions using sections
+
    ```jsx
    <Menu.Section title="File Operations">
      <Menu.Item key="new">New</Menu.Item>
@@ -432,16 +442,19 @@ const items = [
    ```
 
 3. **Keyboard Shortcuts**: Include shortcuts for common actions
+
    ```jsx
    <Menu.Item key="copy" hotkeys="Ctrl+C">Copy</Menu.Item>
    ```
 
 4. **Appropriate Selection**: Choose the right selection mode
+
    - Use `selectionMode="none"` for action menus
    - Use `selectionMode="single"` for mutually exclusive options
    - Use `selectionMode="multiple"` for independent toggles
 
 5. **Disabled States**: Clearly indicate unavailable actions
+
    ```jsx
    <Menu disabledKeys={['paste']}>
      <Menu.Item key="paste">Paste</Menu.Item>

package/docs/components/actions/MenuTrigger.md

@@ -41,10 +41,7 @@ These properties allow direct style application without using the `styles` prop:
 
 ## Focus restoration
 
-When the menu closes, focus returns to the trigger — **unless the action that
-closed it moved focus somewhere else**. An item whose action opens a panel, a
-dialog or an inline editor just focuses that surface; a single `focus()` call
-from a mount effect is enough, and the menu leaves it alone:
+When the menu closes, focus returns to the trigger — **unless the action that closed it moved focus somewhere else**. An item whose action opens a panel, a dialog or an inline editor just focuses that surface; a single `focus()` call from a mount effect is enough, and the menu leaves it alone:
 
 ```jsx
 function Panel() {
@@ -70,15 +67,9 @@ function Panel() {
 </MenuTrigger>;
 ```
 
-Focusing the surface's own container rather than its first tabbable child
-matters when a header carries a close button — `<FocusScope autoFocus>` would
-land the user on ✕, with <kbd>Enter</kbd> already meaning "close the thing that
-just opened".
+Focusing the surface's own container rather than its first tabbable child matters when a header carries a close button — `<FocusScope autoFocus>` would land the user on ✕, with <kbd>Enter</kbd> already meaning "close the thing that just opened".
 
-`shouldRestoreFocus={false}` covers the remaining case: a surface that claims
-focus *later* than the menu's restore — after an async load, an entry
-animation, or a `requestAnimationFrame`. Without it the trigger takes focus
-first and the user sees a flash.
+`shouldRestoreFocus={false}` covers the remaining case: a surface that claims focus _later_ than the menu's restore — after an async load, an entry animation, or a `requestAnimationFrame`. Without it the trigger takes focus first and the user sees a flash.
 
 ```jsx
 <MenuTrigger shouldRestoreFocus={false}>

package/docs/components/actions/use-anchored-menu.md

@@ -68,7 +68,7 @@ function useAnchoredMenu<P, T = ComponentProps<typeof MenuTrigger>>(
 The hook provides full programmatic control over the menu:
 
 - **`open()`** opens the menu with provided props
-- **`update()`** updates menu props without closing/reopening
+- **`update()`** updates the runtime menu props without closing/reopening — only needed for props the caller owns, since `defaultMenuProps` are re-read on every render
 - **`close()`** closes the menu
 - **No automatic triggering** - designed for manual control via events or state
 
@@ -83,8 +83,8 @@ Positions menus relative to the anchor element:
 
 ### Props Merging Strategy
 
-- **`defaultMenuProps`** - Used as base props for the menu component
-- **Runtime props** (via `open()`/`update()`) - Merged with defaults, taking precedence
+- **`defaultMenuProps`** - Used as base props for the menu component, and re-read on every render: changing them updates a menu that is already open, so content kept there (items, `isDisabled`, `disabledKeys`) stays current without an `update()` call
+- **Runtime props** (via `open()`/`update()`) - Merged over the defaults, taking precedence, and held until the next `open()`/`update()`
 - **Trigger props** - Merged with `defaultTriggerProps` for positioning control
 
 ### Menu Synchronization
@@ -103,7 +103,7 @@ import { IconDotsVertical } from '@tabler/icons-react';
 
 function TabWithMultipleTriggers() {
   const menu = useAnchoredMenu(
-    Menu, 
+    Menu,
     {
       placement: 'top end',
     },
@@ -206,7 +206,7 @@ The hook positions the menu by:
 
 ---
 
-*Last updated: 2025-01-16* 
+_Last updated: 2025-01-16_
 
 ### Style Properties
 

package/docs/components/actions/use-context-menu.md

@@ -29,7 +29,8 @@ function useContextMenu<P, T = ComponentProps<typeof MenuTrigger>>(
 
   /**
    * Programmatically opens the menu at the specified coordinates or element center.
-   * Runtime props are merged with defaultMenuProps (runtime props take precedence).
+   * Runtime props are merged with the current defaultMenuProps on every render
+   * (runtime props take precedence).
    *
    * @param props - Props to pass to the menu component (optional, defaults to defaultMenuProps)
    * @param triggerProps - Additional props for MenuTrigger (merged with defaultTriggerProps)
@@ -42,8 +43,8 @@ function useContextMenu<P, T = ComponentProps<typeof MenuTrigger>>(
   ): void;
 
   /**
-   * Updates the props of the currently open menu without repositioning.
-   * Props are merged with defaultMenuProps.
+   * Updates the runtime props of the currently open menu without repositioning.
+   * Props are merged over the current defaultMenuProps.
    */
   update(props: P, triggerProps?: T): void;
 
@@ -83,6 +84,7 @@ The hook automatically binds `onContextMenu` events to the `targetRef` element:
 `useContextMenu` supports two positioning modes:
 
 1. **Coordinate-Based Positioning** (when event is provided):
+
    - Creates an **invisible anchor element** at click coordinates
    - Supports **collision detection** and automatic repositioning
    - **Clamps coordinates** to stay within the container bounds
@@ -97,8 +99,8 @@ The hook automatically binds `onContextMenu` events to the `targetRef` element:
 
 The hook provides flexible prop management:
 
-- **`defaultMenuProps`** - Used for automatic right-click opening
-- **Runtime props** (via `open()`) - Merged with defaults, taking precedence
+- **`defaultMenuProps`** - Used for automatic right-click opening, and re-read on every render: changing them updates a menu that is already open, so content kept there (items, `isDisabled`, `disabledKeys`) stays current without an `update()` call
+- **Runtime props** (via `open()`/`update()`) - Merged over the defaults, taking precedence, and held until the next `open()`/`update()`
 - **Trigger props** - Merged with `defaultTriggerProps` for positioning control
 
 ### Menu Synchronization
@@ -122,7 +124,7 @@ function FileItem({ file }) {
   const { targetRef, rendered } = useContextMenu(
     Menu,
     { placement: 'bottom start' },     // trigger props
-    { 
+    {
       onAction: handleAction,
       children: (
         <>
@@ -162,6 +164,7 @@ function FileItem({ file }) {
 The hook calculates menu position differently based on whether an event is provided:
 
 **With Event (Coordinate-Based):**
+
 1. **Getting viewport coordinates** from the pointer event
 2. **Converting to container-relative coordinates** accounting for borders and scroll
 3. **Clamping to container bounds** to ensure the menu stays visible
@@ -169,6 +172,7 @@ The hook calculates menu position differently based on whether an event is provi
 5. **Delegating to MenuTrigger** for collision detection and final positioning
 
 **Without Event (Center-Based):**
+
 1. **Calculating element center** using `clientWidth/2` and `clientHeight/2`
 2. **Accounting for scroll offset** to position relative to content area
 3. **Clamping to container bounds** to ensure proper positioning
@@ -215,7 +219,7 @@ The `{rendered}` element contains the invisible anchor and MenuTrigger component
 
 ---
 
-*Last updated: 2025-01-16* 
+_Last updated: 2025-01-16_
 
 ### Style Properties
 

package/docs/components/content/Badge.md

@@ -56,6 +56,7 @@ Supports [Base properties](../../BaseProperties.md)
 Badges support multiple themes for different semantic meanings:
 
 Available themes:
+
 - **Special** (default): Purple background, highlighted features
 - **Warning**: Yellow/amber background, caution or attention needed
 - **Note**: Violet background, informational content
@@ -68,6 +69,7 @@ Available themes:
 Badges commonly display numerical counts:
 
 Best practices for numbers:
+
 - Use single digits for small counts (1-9)
 - Show exact numbers up to 99
 - Consider "99+" format for counts over 99
@@ -84,6 +86,7 @@ Best practices for numbers:
 Short text labels work well in badges:
 
 Guidelines for text badges:
+
 - Keep text to 2-4 characters maximum
 - Use uppercase for better readability
 - Common patterns: "NEW", "HOT", "BETA", "PRO"

package/docs/components/content/HotKeys.md

@@ -30,6 +30,7 @@ Supports [Base properties](../../BaseProperties.md)
 Customizes the root element of the component (Space component).
 
 **Sub-elements:**
+
 - None - The component uses Tag components for individual keys
 
 ### Style Properties
@@ -112,7 +113,7 @@ The inherit type is particularly useful when the HotKeys component needs to matc
 ### With Description
 
 ```jsx
-<HotKeys 
+<HotKeys
   aria-label="Command palette"
   aria-description="Opens the command palette for quick actions"
 >
@@ -123,7 +124,7 @@ The inherit type is particularly useful when the HotKeys component needs to matc
 ### Alternative Shortcuts
 
 ```jsx
-<HotKeys 
+<HotKeys
   aria-label="Search"
   aria-description="Opens the search dialog"
 >
@@ -134,7 +135,7 @@ The inherit type is particularly useful when the HotKeys component needs to matc
 ### Complex Alternatives
 
 ```jsx
-<HotKeys 
+<HotKeys
   aria-label="Quick actions"
   aria-description="Multiple ways to access quick actions menu"
 >
@@ -145,7 +146,7 @@ The inherit type is particularly useful when the HotKeys component needs to matc
 ### Function Keys
 
 ```jsx
-<HotKeys 
+<HotKeys
   aria-label="Help functions"
   aria-description="Function keys for help, rename, and search"
 >
@@ -156,7 +157,7 @@ The inherit type is particularly useful when the HotKeys component needs to matc
 ### Arrow Keys
 
 ```jsx
-<HotKeys 
+<HotKeys
   aria-label="Navigation"
   aria-description="Arrow keys for directional navigation"
 >
@@ -167,7 +168,7 @@ The inherit type is particularly useful when the HotKeys component needs to matc
 ### Special Keys
 
 ```jsx
-<HotKeys 
+<HotKeys
   aria-label="Common actions"
   aria-description="Frequently used special keys"
 >
@@ -178,7 +179,7 @@ The inherit type is particularly useful when the HotKeys component needs to matc
 ### Platform-Specific Keys
 
 ```jsx
-<HotKeys 
+<HotKeys
   aria-label="Copy"
   aria-description="Copy selected content to clipboard"
 >
@@ -189,7 +190,7 @@ The inherit type is particularly useful when the HotKeys component needs to matc
 ### With Custom Styles
 
 ```jsx
-<HotKeys 
+<HotKeys
   aria-label="Styled shortcuts"
   aria-description="Custom styled keyboard shortcuts"
   styles={{
@@ -263,9 +264,10 @@ The HotKeys component is designed with comprehensive accessibility support:
 ## Best Practices
 
 1. **Provide meaningful labels**: Always use the `aria-label` prop to describe what the shortcuts do
+
    ```jsx
-   <HotKeys 
-     aria-label="Search" 
+   <HotKeys
+     aria-label="Search"
      aria-description="Opens the search dialog"
    >
      mod+k
@@ -273,14 +275,16 @@ The HotKeys component is designed with comprehensive accessibility support:
    ```
 
 2. **Use platform-appropriate modifiers**: Use `mod` instead of `ctrl` for cross-platform shortcuts
+
    ```jsx
    <HotKeys aria-label="Search">mod+k</HotKeys> // Good: Works on both Mac and PC
    <HotKeys aria-label="Search">ctrl+k</HotKeys> // Limited: PC-specific
    ```
 
 3. **Group related alternatives**: Separate alternative shortcuts with commas
+
    ```jsx
-   <HotKeys 
+   <HotKeys
      aria-label="Search"
      aria-description="Opens search dialog"
    >
@@ -289,8 +293,9 @@ The HotKeys component is designed with comprehensive accessibility support:
    ```
 
 4. **Provide descriptions for complex shortcuts**: Use the `aria-description` prop for clarity
+
    ```jsx
-   <HotKeys 
+   <HotKeys
      aria-label="Command palette"
      aria-description="Opens the command palette for quick actions"
    >
@@ -299,12 +304,14 @@ The HotKeys component is designed with comprehensive accessibility support:
    ```
 
 5. **Use clear, recognizable keys**: Stick to standard key names
+
    ```jsx
    <HotKeys aria-label="Confirm">enter, space</HotKeys> // Good: Clear key names
    <HotKeys aria-label="Confirm">ret, spc</HotKeys> // Avoid: Unclear abbreviations
    ```
 
 6. **Keep combinations reasonable**: Avoid overly complex key combinations
+
    ```jsx
    <HotKeys aria-label="Command palette">mod+shift+p</HotKeys> // Good: Reasonable complexity
    <HotKeys aria-label="Command palette">mod+ctrl+shift+alt+p</HotKeys> // Avoid: Too complex
@@ -312,7 +319,7 @@ The HotKeys component is designed with comprehensive accessibility support:
 
 7. **Consider context**: Provide context about when and where shortcuts are available
    ```jsx
-   <HotKeys 
+   <HotKeys
      aria-label="Cancel"
      aria-description="Cancel current action and close dialog"
    >
@@ -342,4 +349,4 @@ This ensures users see familiar symbols regardless of their operating system.
 - Consider adding animation for key press feedback
 - Support for custom key symbol mappings
 - Integration with system accessibility preferences
-- Support for voice command alternatives 
+- Support for voice command alternatives

package/docs/components/content/InlineInput.md

@@ -87,15 +87,15 @@ These properties allow direct style application without using the `styles` prop:
 
 The `mods` property is automatically populated. Consumers can target these in their own `styles`:
 
-| Modifier   | Type      | Description                                                                       |
-| ---------- | --------- | --------------------------------------------------------------------------------- |
-| editing    | `boolean` | Currently in edit mode                                                            |
-| editable   | `boolean` | `editTrigger` is `dblclick` or `click` and not disabled/read-only                 |
-| focused    | `boolean` | The component is focused — keyboard-focused on the display, **or** while editing. Always `false` when `keyboardActivation={false}` (the host owns the focus indication). |
-| disabled   | `boolean` | `isDisabled` is `true`                                                            |
-| read-only  | `boolean` | `isReadOnly` is `true`                                                            |
-| styled     | `boolean` | `isStyled` is `true`                                                              |
-| empty      | `boolean` | The committed value is empty                                                      |
+| Modifier | Type | Description |
+| --- | --- | --- |
+| editing | `boolean` | Currently in edit mode |
+| editable | `boolean` | `editTrigger` is `dblclick` or `click` and not disabled/read-only |
+| focused | `boolean` | The component is focused — keyboard-focused on the display, **or** while editing. Always `false` when `keyboardActivation={false}` (the host owns the focus indication). |
+| disabled | `boolean` | `isDisabled` is `true` |
+| read-only | `boolean` | `isReadOnly` is `true` |
+| styled | `boolean` | `isStyled` is `true` |
+| empty | `boolean` | The committed value is empty |
 
 ## Examples
 
@@ -283,11 +283,11 @@ When leaving edit mode, focus is not restored automatically — the host is resp
 
 These look similar but fire under different conditions. Pick the one that matches your intent:
 
-| Event       | Fires when                                                                | Typical use                              |
-| ----------- | ------------------------------------------------------------------------- | ---------------------------------------- |
-| `onChange`  | The committed value is **different** from the previous value             | Updating state (controlled pattern)      |
-| `onSubmit`  | The user commits (Enter / blur / `ref.stopEditing(true)`) — always fires | Side effects (server save, toasts)       |
-| `onCancel`  | Escape, empty submit (when `allowEmpty=false`), or `ref.stopEditing(false)` | Reverting UI, cleanup                    |
+| Event | Fires when | Typical use |
+| --- | --- | --- |
+| `onChange` | The committed value is **different** from the previous value | Updating state (controlled pattern) |
+| `onSubmit` | The user commits (Enter / blur / `ref.stopEditing(true)`) — always fires | Side effects (server save, toasts) |
+| `onCancel` | Escape, empty submit (when `allowEmpty=false`), or `ref.stopEditing(false)` | Reverting UI, cleanup |
 
 ### Optimistic Display