@cube-dev/ui-kit 0.163.0 → 0.165.0

package/docs/components/data/ItemTable.md

@@ -31,6 +31,14 @@ pivots, totals. Use `ListBox` when there is only one column.
 - **`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`.
+- **`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.
+- **`defaultExpandedKeys`** `Key[]` — Initially expanded rows. Defaults to none.
+- **`onExpand`** `(keys, info) => void` — Reports the complete expanded-key list
+  and the toggled row, key, zero-based level, parent key and resulting state.
 - **`isLoading`** `boolean` (default: `false`) — Marks a fetch in flight. What
   the user sees depends on `loadingIndicator`.
 - **`loadingIndicator`** `'overlay' | 'skeleton' | 'none'` (default: `'overlay'`)
@@ -65,6 +73,9 @@ pivots, totals. Use `ListBox` when there is only one column.
   row and drops it from `aria-rowcount`.
 - **`isHeaderSticky`** `boolean` (default: `true`) — Pins the column header
   while the body scrolls.
+- **`isAutoHeight`** `boolean` (default: `false`) — Shrink-wraps the frame to
+  the rendered rows instead of filling its flex pane. It takes precedence over
+  root height/flex sizing and disables virtualization.
 - **`sortMode`** `'client' | 'server' | 'off'` (default: `'client'` when any
   column is sortable, else `'off'`) — `client` reorders `data` itself; `server`
   only reflects `sort` and fires `onSortChange`; `off` removes the affordance.
@@ -96,7 +107,8 @@ pivots, totals. Use `ListBox` when there is only one column.
   toolbar.
 - **`isVirtualized`** `boolean | 'auto'` (default: `'auto'`) — `'auto'` turns
   virtualization on once the row count passes `virtualizeThreshold`. It needs a
-  bounded height to have a viewport to work against.
+  bounded height to have a viewport to work against and is ignored when
+  `isAutoHeight` is enabled.
 - **`virtualizeThreshold`** `number` (default: `50`) — Row count above which
   `'auto'` virtualizes.
 - **`overscan`** `number` (default: `12`) — Rows mounted beyond each viewport
@@ -117,6 +129,10 @@ pivots, totals. Use `ListBox` when there is only one column.
 - **`selectionTooltip`** `string | ((row: T) => string | undefined)` — Explains
   an inert checkbox.
 - **`disabledKeys`** `Key[]` — Rows that cannot be interacted with at all.
+- **`treeSelectionBehavior`** `'cascade' | 'independent'` (default: `'cascade'`
+  in tree mode) — Multiple selection only. Cascade selects eligible descendants
+  and derives checked or indeterminate ancestors; single selection is always
+  independent.
 - **`rowLink`** `(row: T, index: number) => NavigateArg | undefined` — Turns the
   row-header cell into a stretched link covering the whole row. Return
   `undefined` for a row that should not navigate.
@@ -207,6 +223,9 @@ pivots, totals. Use `ListBox` when there is only one column.
 - **`getRowProps`** `(ctx) => { isDimmed?, mods?, styles?, height?, qa?, tooltip? }`
   — Per-row visuals.
 - **`ariaLabel`** `string` — Labels the grid.
+- **`isChecked`** `boolean` — Base checked-state modifier.
+- **`place`** `string` — Tasty placement shorthand on the root frame.
+- **`scrollMargin`** `string | number` — Scroll margin on the root frame.
 
 #### `CubeItemTableColumn<T>`
 
@@ -291,6 +310,8 @@ reachable from this one prop — that is the whole styling contract.
 - `Table` — the `<table>`
 - `Head`, `HeadRow`, `HeaderCell` — the column header
 - `Body`, `Row`, `Cell` — the data rows
+- `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
 - `StateContent` — the empty / no-results / error content
@@ -390,6 +411,39 @@ Row-level modifiers, set on each `<tr>`: `odd`, `selected`, `focused`, `dimmed`,
 />
 ```
 
+### Tree Rows
+
+Supplying `getRowChildren` changes the root to `role="treegrid"`. Rows keep their
+original objects; keys must be unique across the complete hierarchy.
+
+```jsx
+<ItemTable
+  data={folders}
+  columns={columns}
+  getRowChildren={(row) => row.children}
+  treeColumnKey="name"
+  defaultExpandedKeys={['production']}
+  selectionMode="multiple"
+/>
+```
+
+Client sorting runs independently within every sibling collection. Client
+search retains ancestor paths; a matching parent keeps its complete subtree,
+and required branches open temporarily without changing `expandedKeys`. Client
+pagination counts and slices roots, keeping each subtree on its parent's page.
+Server modes treat the supplied nested page as already processed, and `total`
+counts roots.
+
+The chevron and Right/Left arrows expand or collapse. Up/Down traverse visible
+rows, typeahead uses the tree column, and Left on a collapsed child moves to its
+parent. Ordinary row clicks still activate `onRowAction`/`rowLink`; the
+disclosure does not. Select-all includes collapsed descendants. Disabled and
+unselectable descendants are excluded from cascade.
+
+Tree mode ignores `isReorderable`, because a flat reordered array cannot encode
+parents. `dropOnRow` remains available for folder moves; self/descendant cycles
+are rejected and selected descendants are collapsed under a dragged ancestor.
+
 ### Custom Cells
 
 ```jsx
@@ -668,6 +722,14 @@ DOM and the styles are identical either way — only the number of mounted rows
 changes, so sorting, search, pinned columns and the sticky header all behave the
 same.
 
+For a compact list in normal page flow, set `isAutoHeight`. Its frame then ends
+at the final rendered row instead of filling the surrounding flex pane. The
+complete result is rendered, so keep large lists bounded and virtualized.
+
+```jsx
+<ItemTable data={recentRows} columns={columns} paginationMode="off" isAutoHeight />
+```
+
 ```jsx
 <ItemTable height="420px" paginationMode="off" data={tenThousandRows} columns={columns} />
 ```

package/docs/components/fields/ColorSwatch.md

@@ -0,0 +1,155 @@
+# ColorSwatch
+
+A square of color. It is the smallest piece of the color family —
+[ColorPicker](./ColorPicker.md),
+[ColorInput](./ColorInput.md) and
+[ColorSwatchGroup](./ColorSwatchGroup.md) all draw one, and it is
+exported so a legend, a list row or a table cell can draw the same one.
+
+It is decorative on its own: it carries no text and no accessible name. Pair it
+with the value written out, or put it in a control that names it.
+
+## When to Use
+
+- Next to a color value in a list, a table or a chart legend
+- In the `icon` / `rightIcon` / `prefix` / `suffix` slot of an `Item` or `Button`
+- As the color part of a custom control built on top of the color fields
+
+## Component
+
+---
+
+### Properties
+
+- **`color`** `string | ColorValue | null` — The color to show. Anything the color fields accept — `#7a4dbf`, `rgb(122 77 191)`, `oklch(…)`. `null`, or a string that cannot be parsed, shows the empty state
+- **`size`** `'small' | 'medium' | 'large'` — The edge of the swatch: `20px`, `24px` or `28px`. Left unset, the swatch tracks the control around it (see below)
+
+### Base Properties
+
+Supports [Base properties](../../BaseProperties.md)
+
+### Styling Properties
+
+#### styles
+
+Customizes the swatch itself. `width` and `height` set here win over both the
+`size` prop and the automatic sizing.
+
+### 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`, `scrollMargin`
+- **Dimension:** `width`, `height`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`
+- **Block:** `border`, `radius`, `shadow`, `outline`, `padding`, `paddingInline`, `paddingBlock`, `overflow`, `scrollbar`, `textAlign`
+
+### Modifiers
+
+The `mods` property accepts the following modifiers you can override:
+
+| Modifier | Type      | Description                                                    |
+| -------- | --------- | -------------------------------------------------------------- |
+| `empty`  | `boolean` | No color to show — drawn as the conventional diagonal stroke     |
+
+## Sizes
+
+- `small` — `20px`
+- `medium` — `24px`
+- `large` — `28px`
+
+### Sizing inside a control
+
+Leave `size` off and the swatch sizes itself to whatever it sits in. `Item`,
+`Button` and the text inputs publish their own height as the `$size` custom
+property, and the swatch reads it and lands `8px` inside — `20px` in a `small`
+control, `24px` in a `medium` one, `28px` in a `large` one. Nothing has to be
+passed between the two, so a control that changes size takes its swatch with it.
+
+Outside a control there is nothing to read, and the swatch falls back to
+`medium`.
+
+`ColorInput` and `ColorPicker` deliberately do **not** use this. Their swatch is a
+fixed `20px` badge at every field size — it reads as a value the field is showing
+rather than as part of the control, and a text input hangs its prefix off the border
+with no padding of its own, so a tracking swatch in a large field would sit against
+the edge. Automatic fitting is for a swatch you place yourself, in a `Button` or an
+`Item`, where the host has the padding that makes it work.
+
+## Examples
+
+### Basic Usage
+
+```jsx
+<ColorSwatch color="#7a4dbf" />
+```
+
+### In a control
+
+```jsx
+<Button icon={<ColorSwatch color={color} />}>{color}</Button>
+
+<Item icon={<ColorSwatch color={color} />} suffix={<ColorSwatch color={hover} />}>
+  Accent
+</Item>
+```
+
+### With the value spelled out
+
+The swatch has no accessible name of its own, so the text beside it is what a
+screen reader announces.
+
+```jsx
+<Space gap="1x" placeItems="center start">
+  <ColorSwatch color={value} />
+  <Text>{value}</Text>
+</Space>
+```
+
+### A fixed size
+
+```jsx
+<ColorSwatch size="large" color="#26fcb2" />
+```
+
+### Any other shape
+
+```jsx
+<ColorSwatch color="#26fcb2" radius="round" width="6x" height="6x" />
+```
+
+## Accessibility
+
+`ColorSwatch` renders a plain `div` with no role and no name — a color on its
+own is not information a screen reader can use, and an announced hex is rarely
+what the user wants to hear.
+
+- **Do** put the value, or the name of the thing the color belongs to, next to it
+- **Do** rely on the surrounding control's `aria-label` when the swatch is its icon
+- **Don't** use color as the only way to tell two rows apart
+
+## Best Practices
+
+1. **Do**: let a swatch inside a control size itself
+
+   ```jsx
+   <Button size="small" icon={<ColorSwatch color={color} />}>
+     {color}
+   </Button>
+   ```
+
+2. **Don't**: hand-tune the box to match a control
+
+   ```jsx
+   <Button size="small" icon={<ColorSwatch color={color} width="2.5x" height="2.5x" />}>
+     {color}
+   </Button>
+   ```
+
+3. **Accessibility**: never let the swatch be the only carrier of the meaning
+
+## Related Components
+
+- [ColorPicker](./ColorPicker.md) — a swatch that opens the color popover
+- [ColorInput](./ColorInput.md) — the color as editable text, with a swatch inside
+- [ColorSwatchGroup](./ColorSwatchGroup.md) — a selectable grid of swatches

package/docs/components/layout/Board.md

@@ -61,13 +61,15 @@ clipped by an ancestor's `overflow: hidden`.
 - **`compact`** `'vertical' | 'horizontal' | 'free' | null` (default: `'vertical'`) — Compaction behavior. `'vertical'`/`'horizontal'` reflow widgets to remove gaps; `'free'` places each widget exactly where dropped and never pushes its neighbours (blocked from occupied cells unless `allowOverlap`); `null` disables compaction but still resolves collisions the legacy react-grid-layout way.
 - **`allowOverlap`** `boolean` (default: `false`) — Allow widgets to overlap (stack). In `'free'` mode this is what distinguishes stacking from blocking a drop onto an occupied cell.
 - **`preventCollision`** `boolean` (default: `false`) — Block movement into occupied cells instead of pushing.
+- **`collisionMode`** `'revert' | 'downscale' | 'swap'` (default: `'revert'`) — How to resolve a drop the grid would otherwise refuse. Only applies where a collision *blocks* a move — `compact="free"` (which prevents collisions) or an explicit `preventCollision` — and never under `allowOverlap`, where nothing is blocked. `'revert'` snaps the widget back. `'downscale'` shrinks it into the free space at the drop cell, growing rightward and downward, floored at its `minW`/`minH` (below that it reverts). Within one board, `'swap'` trades places with **one** widget — the one the drop covers most — which takes the cell the drag began at, each keeping as much of its own size as fits there. It never displaces more than that one widget. A drop straddling two widgets trades with one of them rather than refusing, so the swap never blinks away as you sweep across a boundary; ties go to the widget earlier in reading order. Dragging back retraces the original arrangement exactly. For a widget arriving from another board (including a nested board entering its parent), the destination board's `'swap'` mode becomes strict insertion: the requested anchor cell must be empty, the incoming widget keeps its size when possible or downscales into the available room to its right and below, and existing destination widgets are neither exchanged nor reflowed. Releasing over an occupied anchor or where `minW`/`minH` cannot fit cancels the transfer and restores both boards; it does not reuse the last valid preview or search for another slot. No mode ever *grows* a widget. Applies to single-widget drags. Arrow keys honour it too but never resize anything — each press is a gesture of its own, so a press that shrank a widget would have nothing to restore from, and only an exchange that fits outright is allowed. A multi-widget selection still only moves where it fits outright, and a resize is still blocked by a collision.
 - **`isDraggable`** `boolean` (default: `true`) — Enable dragging for all widgets.
 - **`isResizable`** `boolean` (default: `true`) — Enable resizing for all widgets.
 - **`isDroppable`** `boolean` (default: `true`) — Whether the board accepts widgets dropped from other boards.
 - **`resizeHandles`** `ResizeHandleAxis[]` (default: `['se']`) — Which resize handles to show. Corner handles (`ne`/`nw`/`se`/`sw`) show an angle grip; edge handles (`n`/`s`/`e`/`w`) show a dotted grip. Both are revealed on hover/focus/resize. A single edge (e.g. `['e']` or `['s']`) gives a horizontally- or vertically-only resizable widget.
+- **`resizeGripPlacement`** `'inside' | 'corner'` (default: `'inside'`) — Where the corner grips sit. `'inside'` tucks each one into the widget box; `'corner'` centres it on the widget's corner, so it lines up with a control centred on the opposite corner. Only affects corner handles — a dotted edge grip always stays inside. A corner-placed grip is drawn *outside* the widget (a widget clips its own content, which would otherwise cut the grip in half), so it needs the board to have at least half a grip's worth of `containerPadding` to show in full against the board's edge. Its hit-zone moves out with it and overhangs by the same half-grip, so the whole visible grip is grabbable and hovering it keeps it revealed — the trade is a ~5px band just outside each corner where a press starts a resize rather than a marquee. Can be overridden per widget.
 - **`dragCancel`** `string` — CSS selector for elements that must not start a pointer drag (e.g. form controls inside a widget: `"input,textarea,button,a,.no-drag"`). Does not affect keyboard moves — those only run when the widget host itself is focused. Can be overridden per widget.
 - **`dragHandle`** `string` — CSS selector for the only elements from which a pointer drag may start. Can be overridden per widget.
-- **`showGridLines`** `boolean | 'drag'` (default: `false`) — Show grid lines behind the widgets. `true` always, `'drag'` only while a widget is being dragged or resized. A nested board that does not set this inherits an enabled ancestor's grid lines, showing its own while a drag is in progress.
+- **`showGridLines`** `boolean | 'drag' | 'any-drag'` (default: `false`) — Show grid lines behind the widgets. `true` always; `false` never; `'drag'` only while *this* board is part of the active gesture — it owns the drag (as its source, or as the board the widget is currently over) or one of its own widgets is being resized; `'any-drag'` while any drag is in flight anywhere under a shared `Board.Provider`, so every board advertises itself as somewhere the widget could land. Under one `Board.Provider`, `'drag'` keeps boards a widget cannot land in quiet, and `'any-drag'` is the opt-in for the noisier, more informative version. A nested board that does not set this inherits an enabled ancestor's setting, at the ancestor's own scope.
 - **`isAligned`** `boolean` (default: `false`) — Align a nested board with its ancestor `Board`'s layout. Only takes effect when the board is nested inside another `Board`'s widget. When set, every cell matches the parent's cell size exactly: the board inherits the parent's column pitch (deriving its own column count from its measured width so cells stay parent-sized as the container is resized) and uses the parent's row height verbatim. It never shrinks rows to fit — pair it with an `isAutoHeight` container so the widget grows to fit its rows at that height. `cols`/`rowHeight` then act as fallbacks used only until the parent metrics resolve.
 - **`selectionMode`** `'none' | 'single' | 'multiple'` (default: `'none'`) — Whether widgets can be selected, and how many at a time. `'multiple'` also enables the marquee and rigid group movement.
 - **`selectedKeys`** `string[]` — Controlled selection. Keys are layout item ids (`LayoutItem.i`).
@@ -89,6 +91,7 @@ clipped by an ancestor's `overflow: hidden`.
 - **`isDraggable`** `boolean` — Disable dragging for this widget.
 - **`isResizable`** `boolean` — Disable resizing for this widget.
 - **`resizeHandles`** `ResizeHandleAxis[]` — Override the board's handles.
+- **`resizeGripPlacement`** `'inside' | 'corner'` — Override the board's grip placement.
 - **`minW`** `number` — Minimum width in grid columns. Used when the layout item omits `minW`; the resize handle stops here.
 - **`maxW`** `number` — Maximum width in grid columns. Used when the layout item omits `maxW`.
 - **`minH`** `number` — Minimum height in grid rows. Used when the layout item omits `minH`.
@@ -237,7 +240,23 @@ Bound resizing with per-widget `minW`/`maxW` (columns) and `minH`/`maxH` (rows).
 
 ### Grid lines
 
-Show grid lines behind the widgets while dragging or resizing (or always).
+Show grid lines behind the widgets while dragging or resizing (or always). With
+several boards under one `Board.Provider`, `'drag'` lights up only the board the
+drag belongs to; `'any-drag'` lights up all of them.
+
+### Corner resize grip
+
+Centre the resize grip on the widget's corner with `resizeGripPlacement="corner"`,
+so it lines up with a control centred on the opposite corner.
+
+### Resolving a blocked drop
+
+On a free grid a drop onto occupied cells is refused. `collisionMode` resolves it
+instead: `'downscale'` shrinks the widget into whatever room is at the drop cell.
+Within one board, `'swap'` trades places with the widget already there. Across
+boards, the same mode inserts only at an empty anchor and downscales without
+moving destination widgets; an invalid release cancels the transfer. None of
+these paths ever grows a widget. The examples below show all three behaviors.
 
 ### Card widgets
 

package/docs/components/other/NoDataIcon.md

@@ -0,0 +1,48 @@
+# NoDataIcon
+
+The empty isometric crate — the kit's "nothing here yet" illustration.
+
+It is an **illustration, not a member of the icon set**, which is why it lives in `Other/` rather than under `Content/Icons`. It is still built on `Icon`, so it sizes and accepts style props exactly like one.
+
+## When to Use
+
+- An empty table, list, or card grid — "No invoices yet", "No deployments yet"
+- A full-page empty state, paired with a short line of copy
+- Anywhere `LoadingAnimation` would sit if the same view were still loading
+
+## Sizing
+
+`size` maps onto `font-size` and drives both axes; the artwork is square.
+
+```jsx
+<NoDataIcon size="8x" />
+```
+
+Unlike a glyph icon, the drawing is full-bleed in its viewBox rather than inset in a 24×24 grid, so it is meant for illustration sizes — `size="8x"` (64px) and up. At icon sizes it will read as noticeably heavier than the glyphs around it.
+
+## Colour
+
+Not a `currentColor` glyph, so it **ignores `color`**. The three faces come from the shared isometric cube-face tokens (`#loading-face-1` … `#loading-face-3`) that [`LoadingAnimation`](../status/LoadingAnimation.md) also draws from, so an empty table and a loading table read as the same object lit the same way.
+
+That ramp is positioned by a WCAG floor against `#surface`, so each face keeps the same separation from the page in light, dark, and high contrast, and follows a re-seeded brand hue as a tint rather than as a colour. Recolouring one face and not the others would break the shading, which is why there is no prop for it.
+
+## Properties
+
+- **`size`** `Styles['fontSize']` — Icon size; drives both axes
+
+### Base Properties
+
+Supports [Base properties](../../BaseProperties.md).
+
+### Style Properties
+
+Accepts the same style props as `Icon` — outer, base, and color style props.
+
+## Examples
+
+```jsx
+<Flow gap="1x" placeItems="center">
+  <NoDataIcon size="8x" />
+  <Paragraph>No invoices yet.</Paragraph>
+</Flow>
+```

package/docs/components/overlays/DialogTrigger.md

@@ -36,6 +36,7 @@ DialogTrigger serves as a wrapper around a Dialog and its associated trigger, li
 - **`targetRef`** — The ref of the element the Dialog should visually attach itself to
 - **`styles`** — The style map for the overlay
 - **`shouldCloseOnInteractOutside`** — Function to determine if overlay should close on outside interaction
+- **`shouldRestoreFocus`** `boolean` (default: `true`) — Whether focus returns to the trigger when the dialog closes. Only needed for a surface that claims focus *later* than the restore (async load, entry animation); an action that focuses the surface it opens is already left alone — see [Focus Management](#best-practices)
 
 ### Base Properties
 
@@ -52,7 +53,7 @@ These properties allow direct style application without using the `styles` prop:
 - **Base:** `display`, `font`, `preset`, `hide`, `whiteSpace`, `opacity`, `transition`
 - **Dimension:** `width`, `height`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`
 - **Block:** `border`, `radius`, `shadow`, `outline`, `padding`, `paddingInline`, `paddingBlock`, `overflow`, `scrollbar`, `textAlign`
-- **Flow:** `flow`, `placeItems`, `placeContent`, `alignItems`, `alignContent`, `justifyItems`, `justifyContent`, `align`, `justify`, `gap`, `columnGap`, `rowGap`, `gridColumns`, `gridRows`, `gridTemplate`, `gridAreas`
+- **Flow:** `flow`, `place`, `placeItems`, `placeContent`, `alignItems`, `alignContent`, `justifyItems`, `justifyContent`, `align`, `justify`, `gap`, `columnGap`, `rowGap`, `gridColumns`, `gridRows`, `gridTemplate`, `gridAreas`
 
 ## Variants
 
@@ -186,7 +187,7 @@ function ControlledDialog() {
    </DialogTrigger>
    ```
 
-3. **Focus Management**: Always ensure focus returns properly after dialog closes
+3. **Focus Management**: Closing the dialog returns focus to the trigger, unless the action that closed it already moved focus somewhere else — an action that opens a panel or another dialog just focuses that surface, and the trigger leaves it alone. A single `focus()` from a mount effect is enough; no retry loop is needed. Reach for `shouldRestoreFocus={false}` only when the opened surface claims focus *later* than the restore (after an async load or an entry animation), where the trigger would otherwise take focus first and flash.
 4. **Mobile Considerations**: Use appropriate mobile types for better UX
 5. **Dismissible**: Make modal dialogs dismissible unless absolutely necessary
 

package/docs/components/status/LoadingAnimation.md

@@ -36,3 +36,15 @@ These properties allow direct style application without using the `styles` prop:
 
 <LoadingAnimation size="large" />
 ```
+
+## Colors
+
+The cube's three faces come from the shared isometric-cube tokens
+(`#loading-face-1` … `#loading-face-3`), a near-neutral ramp positioned by a WCAG
+floor against `#surface`. Each face therefore keeps the same separation from the
+page in light, dark, and high contrast, and follows a re-seeded brand hue as a
+tint rather than as a color. There is no `color` prop to override — recolouring
+one face and not the others would break the shading.
+
+[`NoDataIcon`](../other/NoDataIcon.md) draws its empty crate from the same
+three tokens, so a loading table and an empty table read as the same object.