@keboola/design 13.1.3 → 14.0.0

package/AGENTS.md

@@ -79,6 +79,8 @@ This file answers **which** component to use; [`COMPONENT-API.md`](./COMPONENT-A
 
 **Never** use `Popover` for destructive confirmations (use `Popconfirm`) or hover-only previews (use `HoverCard`). **Never** hand-roll a confirmation from `Modal` + buttons — use `AlertModal`, which owns the confirm/cancel actions and the async loading state.
 
+**`Modal.Content` is centred by default.** Pass `align="top"` when the content changes height while in use (fields appear or drop as the user picks), so the modal stops re-centring and moving the field under the pointer. The legacy brand ignores it: its modals are always top-anchored.
+
 **Filters in a menu are menu items:** `DropdownMenu.RadioItem indicator="check"` for one value, `DropdownMenu.CheckboxItem indicator="checkbox"` for several, both `indicatorAlign="end"`. Never `RadioGroup` or `Checkbox` in a `DropdownMenu` or `Popover`.
 
 ### Inputs
@@ -92,6 +94,7 @@ This file answers **which** component to use; [`COMPONENT-API.md`](./COMPONENT-A
 | `OtpInput`              | Fixed-length verification code (MFA, email confirm, sudo step-up)  |
 | `FileUpload`            | Drag-and-drop file picker box; caller owns the file array          |
 | `useFileDropTarget`     | Make an existing subtree a drop target, styled by you              |
+| `InlineEdit`            | Click-to-edit name or title in place (`multiline` for page titles) |
 
 **Never** build custom label + input combinations — compose `Label` + `FormGroup.TextInput` + `FormGroup.Help` inside `FormGroup`.
 
@@ -742,10 +745,12 @@ takes the node, and the chip lets it have the keyboard.
 />
 ```
 
-- A query overrides folding: every match shows, and a group with none disappears — so the group's row always stands for something the user can see.
+- A query opens every group with a match, and a group with none disappears — so the group's row always stands for something the user can see. A fold made under a query lasts until the query changes.
 - `value` holds items only. The row reads checked / mixed from them and never becomes a chip, so `allowSelectAll` and `renderChips` count what they always count.
 - Without `selectableGroups` / `groupToValue` a press on the row folds the group; with them, the chevron and `ArrowRight` / `ArrowLeft` do.
 - Don't hand-roll it from a flat list and an `onValueChange` that expands a parent into its children — the control owns the fold, the query override and the mixed state.
+- An item the user picked elsewhere and can't remove here (a table another mapping uses) is `itemToLocked`, not `itemToDisabled`: a locked row looks disabled but still takes the highlight, so `renderAside` describes it and its group still folds; a disabled row takes neither.
+- `renderAside={(highlighted) => …}` adds an inspector beside the list about the last row the pointer or the arrow keys were on — `{ kind: 'item' }`, `{ kind: 'group' }` or `null` before any. A button in the popup hides it (`asideOpen` / `onAsideOpenChange` to persist that), and it stays hidden while the popup is under 40rem. Reach for it when a row needs more detail than fits on it.
 
 **Long lists** — a `Combobox` or `MultiCombobox` whose options can run into the hundreds (tables, configurations, users) takes `virtualized="auto"`: past 30 options, grouped or not, only the rows in view reach the DOM. It is opt-in because a test that clicks a far row needs every option rendered.
 
@@ -773,7 +778,7 @@ import { ChevronDown, Keboola, Loader2 } from '@keboola/design/icons';
 ```
 
 - **One import surface**: Lucide icons and Keboola-custom icons (e.g. `Keboola`) both export from `@keboola/design/icons` and share the `LucideIcon` type, so they're interchangeable in any API typed `icon: LucideIcon` (Button, etc.).
-- **Vendor marks** also ship from `@keboola/design/icons` — `Auth0`, `Aws`, `Azure`, `ChatGpt`, `Claude`, `Cursor`, `Devin`, `Gcp`, `GitHub`, `GitLab`, `Google`, `Keboola`, `Make`, `Microsoft`, `Okta` — in their own brand colours by default; pass **`mono`** to render one in `currentColor` instead. The `Eu` / `Us` flags are colour-only.
+- **Vendor marks** also ship from `@keboola/design/icons` — `Auth0`, `Aws`, `Azure`, `ChatGpt`, `Claude`, `Cursor`, `Devin`, `Facebook`, `Gcp`, `GitHub`, `GitLab`, `Google`, `Keboola`, `Make`, `Microsoft`, `Okta` — in their own brand colours by default; pass **`mono`** to render one in `currentColor` instead. The `Eu` / `Us` flags are colour-only.
 - **Sizing**: prefixed Tailwind `tw:size-*` utility — `tw:size-4` = 16px (default for inline icons), `tw:size-5` = 20px, `tw:size-6` = 24px.
 - **Spinner animation**: explicit via `tw:animate-spin`.
 
@@ -783,7 +788,9 @@ import { ChevronDown, Keboola, Loader2 } from '@keboola/design/icons';
 
 Layer-0 colour usage splits into three buckets.
 
-**Chrome — follows the brand.** Surface, structure, navigation: Card body, Modal frame, Input border, Button outline, focus rings, Sidebar, generic text. Re-skins when a customer brand is applied. **Rule:** use semantic tokens (`tw:bg-background`, `tw:text-foreground`, `tw:border-border`, `tw:bg-muted`, `tw:text-muted-foreground`, `tw:bg-accent`, `tw:bg-destructive`, …). Customers override these via `@keboola/brand-registry`.
+**Chrome — follows the brand.** Surface, structure, navigation: Card body, Modal frame, Input border, Button outline, focus rings, Sidebar, generic text. Re-skins when a customer brand is applied. **Rule:** use semantic tokens (`tw:bg-background`, `tw:text-foreground`, `tw:border-border`, `tw:bg-muted`, `tw:text-muted-foreground`, `tw:bg-hover`, `tw:bg-selected`, `tw:bg-destructive`, …). Customers override these via `@keboola/brand-registry`.
+
+**State has its own tokens — never `accent`.** Hover and keyboard highlight paint `tw:bg-hover` (+ `tw:text-hover-foreground` where the label changes); selected, checked and current paint `tw:bg-selected` / `tw:text-selected-foreground`; a pressed wash is `tw:bg-pressed`; a modal backdrop is `tw:bg-scrim`; a disabled control is `tw:disabled:opacity-disabled`. Unset, `hover` and `selected` both resolve to `accent`, so they look alike by default — a brand that sets them separately is what tells a hovered row from a selected one, and a component that paints either with `accent` opts out of that. `accent` stays for a decorative tinted surface (an icon tile) that is neither.
 
 A border **width** utility carries no colour of its own — a lone `tw:border` / `tw:border-t` / `tw:border-2` paints the element's _text_ colour, a near-black frame where a light-grey rule belongs. Pair every width with a colour: `tw:border tw:border-border` for chrome, `tw:border-input` on form controls. `pnpm test:stories` fails on any story that ships a width without one.
 
@@ -842,6 +849,61 @@ Because the value is read from the nearest provider, a nested override scopes to
 
 Define a custom brand with `@keboola/brand-registry`'s `brandSchema` (Zod) and pass it in `brands`; or override the `--color-*` / `--radius-*` CSS variables directly on `:root`.
 
+**Interaction states and surface corners** are part of the same theme. Every one is optional and, unset, keeps the look the package ships:
+
+| Theme field                                                    | CSS variable                                           | Unset                                                 |
+| -------------------------------------------------------------- | ------------------------------------------------------ | ----------------------------------------------------- |
+| `colors.hover` / `hoverForeground`                             | `--hover` / `--hover-foreground`                       | `accent` / `accent-foreground`                        |
+| `colors.pressed`                                               | `--pressed`                                            | `accent`, a step stronger — no component reads it yet |
+| `colors.selected` / `selectedForeground`                       | `--selected` / `--selected-foreground`                 | `accent` / `accent-foreground`                        |
+| `colors.scrim`                                                 | `--scrim`                                              | black at 50%                                          |
+| `opacity.disabled`                                             | `--disabled-opacity`                                   | `0.5`                                                 |
+| `radii.card`                                                   | `--radius-card`                                        | `Card`: `radii.lg`; `tw:rounded-card`: 10px           |
+| `radii.popover`                                                | `--radius-popover`                                     | menus, popovers, hover cards, tooltips 1rem           |
+| `radii.modal`                                                  | `--radius-modal`                                       | `Modal` / `AlertModal` 1.5rem                         |
+| `radii.sheet`                                                  | `--radius-sheet`                                       | `Sheet`'s inner edge: `radii.lg`                      |
+| `radii.toast`                                                  | `--radius-toast`                                       | `Toast`: `radii.lg`                                   |
+| `colors.sidebar.sidebarHover` / `sidebarHoverForeground`       | `--sidebar-hover` / `--sidebar-hover-foreground`       | `sidebarAccent` / `sidebarAccentForeground`           |
+| `colors.sidebar.sidebarSelected` / `sidebarSelectedForeground` | `--sidebar-selected` / `--sidebar-selected-foreground` | `sidebarAccent` / `sidebarAccentForeground`           |
+
+- The state colours take **any CSS colour**, not the `R G B` channels the other colours use, so a wash can be translucent.
+- Each scheme falls back on its own: a value set in `colors` does not reach dark mode. Set `colorsDark` too.
+- Set `hover` and `hoverForeground` together, and `selected` and `selectedForeground`. Several components change the label on hover, and an unset foreground keeps the `accent-foreground` blue over whatever wash you chose.
+- Unset, a few components keep a hover or selected look of their own rather than `accent`: argo `DropdownMenu` (a `primary` tint), `Table` rows and `SectionNav` (`muted`). Once a theme sets the token, they follow it like the rest.
+- `Sidebar` and `Navbar` sit on their own surface, so they take their own pair: `sidebarHover` for a hovered or open item, `sidebarSelected` for the current page. Set them inside `colors.sidebar` (and `colorsDark.sidebar`).
+- The fallbacks resolve where each class is used, so a brand that only re-points `accent` still moves hover and selected with it.
+
+```ts
+const brand: Brand = {
+  // …
+  theme: {
+    colors: {
+      // …
+      hover: 'color-mix(in srgb, rgb(15 23 42) 4%, transparent)',
+      hoverForeground: 'rgb(15 23 42)',
+      selected: 'rgb(224 242 254)',
+      selectedForeground: 'rgb(7 89 133)',
+      scrim: 'rgb(15 23 42 / 0.55)',
+    },
+    colorsDark: {
+      // …
+      hover: 'color-mix(in srgb, rgb(241 245 249) 7%, transparent)',
+      hoverForeground: 'rgb(241 245 249)',
+    },
+    radii: {
+      sm: '6px',
+      md: '8px',
+      lg: '10px',
+      card: '16px',
+      popover: '16px',
+      modal: '24px',
+      sheet: '24px',
+      toast: '16px',
+    },
+  },
+};
+```
+
 ## Testing (Vitest)
 
 The published ESM barrel is plain-Node resolvable — `import('@keboola/design')` works under raw Node, so **no special Vitest config is required** to render a component. A default jsdom project is enough:
@@ -873,10 +935,10 @@ pnpm exec ui-gen-bench eval --serve dist --route /tokens --brief "Tokens list wi
 ## Common Tailwind patterns
 
 ```
-tw:not-disabled:hover:bg-accent
-tw:disabled:opacity-40 tw:cursor-not-allowed
+tw:not-disabled:hover:bg-hover
+tw:disabled:opacity-disabled tw:cursor-not-allowed
 tw:focus-visible:ring-2 tw:ring-primary
 tw:[&_svg]:text-muted-foreground
 ```
 
-The `tw:` prefix always comes **first**, ahead of every variant — `tw:not-disabled:hover:bg-accent`, never `not-disabled:hover:tw-bg-accent`. Tailwind v4 makes the prefix a variant of its own, so it leads the chain and the utility keeps its bare name.
+The `tw:` prefix always comes **first**, ahead of every variant — `tw:not-disabled:hover:bg-hover`, never `not-disabled:hover:tw-bg-hover`. Tailwind v4 makes the prefix a variant of its own, so it leads the chain and the utility keeps its bare name.

package/CHANGELOG.md

@@ -1,5 +1,201 @@
 # @keboola/design
 
+## 14.0.0
+
+### Major Changes
+
+- `ToolCallApproval` v2 — redesigned around what an agent chat's approval card needs. It had no consumers, so the old API is replaced outright.
+  - Removed: `enableShortcuts` (Enter approve / Escape reject) and the `actions` override; `toolName` is now optional.
+  - Actions: `approveLabel` / `rejectLabel`, `approveVariant` (`'primary' | 'danger'`), an optional `extraAction` (e.g. "Always allow"), `pendingAction` (that button spins, every action disables), `isDisabled`.
+  - Header: `eyebrow` slot, optional `toolName`, `title`.
+  - Terminal states: `approved`, `rejected`, `expired`, `timed-out`, `cancelled`, `unattended`, with `statusLabel` / `statusMessage`, `resolvedBy` / `resolvedAt`, and `density="record"` for a one-line resolved record.
+  - Body: `children`, `notices` (warning / destructive / info rows), `aside` (beside the detail, stacked in a narrow container), `error`.
+  - Keyboard: `shortcutKey` (`'enter' | 'mod-enter' | 'none'`) approves from anywhere and shows the key on the button; `isShortcutHintOnly` shows it for an app that owns the shortcut.
+  - Stable test ids: `tool-call-approval`, `tool-approve-button`, `tool-decline-button`, `tool-extra-action-button`.
+
+### Minor Changes
+
+- `AnswerSources` and `SourceChip`: the provenance row under an answer. Chips carry a `verified` / `unverified` / `neutral` verdict and render as a link, button or label; the row collapses past six chips, summarises unverified ones once, states when none were declared and takes a `footnote` slot.
+
+- `ChatNotice`: a transcript notice row over `Alert` with `tone` (`error` / `warn` / `info`), an `action` slot, collapsible "Technical details" and an optional `retryAfter` countdown.
+
+- AI Kit composer chips: `AttachmentChip` (uploading / ready / error file chip with remove), `ContextChip` (quoted excerpt with "Show all" and images), `ModeChip` (removable animated mode pill) and `JumpToLatest` (scroll-to-latest button that pulses while the agent is working).
+
+- `SuggestedPrompt` takes `description` (a secondary line under the label), `trailing` (content pinned to the row's end, e.g. a badge) and `aria-label`. Without them it renders as before.
+
+- `PlanApproval` and `AnswerSummary` take an `expired` state for a card closed with no decision.
+  - `PlanApproval`: `status="expired"` (orange `Expired` pill, no actions), plus `statusLabel` to rename the pill and `statusMessage` shown under the title.
+  - `AnswerSummary`: `variant="expired"` (header ends `Expired`), plus `statusLabel` and a `statusMessage` shown first once expanded.
+
+- `PromptInput` takes `allowSendWhileBusy`: with it, a non-empty box sends while the conversation is `streaming` or `submitted` instead of refusing the keystroke, and Stop moves to a control of its own so cancelling never means emptying the box first. Off by default, so every existing composer behaves exactly as before.
+
+  Kai's composer turns that on. A message typed while Kai is working is queued and shown waiting rather than silently dropped, and a message typed under an open question answers it.
+
+- `AnswerActions` takes opt-in `onDownComment` (+ `commentPlaceholder`), a one-line comment input after a thumbs-down, and `onRegenerate` (+ `regenerateLabel`), an "Ask again" button; both are off by default
+
+- `FileDownloadChip` takes opt-in `onPreview` (split chip) and `actions`; new `FileGallery` block for image thumbnails (lazy, host-owned URLs and loading, capped with "+N more"). The default chip renders as before
+
+- `MessageBubble` takes opt-in `timestamp="visible"`, `quote`, `status` + `onRetry`, `author`, `collapseAfterPx` and `avatar`; without them it renders as before
+
+- `Modal.Content` takes `align="top"`: a new-design modal pinned to the top instead of centred, for a form whose height changes while it is in use. The legacy modal is always top-anchored.
+
+- `MultiCombobox` takes `renderAside`, a pane beside the list that describes the highlighted row, a group's own row included.
+
+  A combobox row's label fills the row, so content inside it can align to the row's end.
+
+  `MultiCombobox` takes `groupAppearance="banded"`, which puts each group, its row and open items, on a white card over a grey list.
+
+  A selectable group row reads checked or mixed from its locked items that are already selected.
+
+  `MultiCombobox` takes `collapseSelectedGroups`: each time the popup opens, a group whose items are all selected starts folded. A disabled group row still folds from its chevron.
+
+  `MultiCombobox` takes `asideOpen` and `onAsideOpenChange`: a button with a tooltip in the popup's bottom-right corner hides and shows the `renderAside` inspector. It is a grid column going from `0fr` to `1fr`, so the list narrows beside it rather than being covered, it keeps describing the last highlighted row until the popup closes, and it stays hidden, button included, while the popup is under 40rem wide.
+
+  A collapsible group's items fade and slide in as it unfolds and out as it folds, except under reduced motion. Banded rows are square inside their card, the first and last taking its corners, and enabled rows show a pointer.
+
+  `MultiCombobox` takes `defaultOpen` and `onOpenChange`, for a picker shown on demand with its list already open.
+
+  `MultiCombobox` takes `anchor`: with it there is no field, and the popup opens against that element with its search at the top. A banded popup is grey throughout, inspector included, with 8px of real space between group cards.
+
+  `MultiCombobox` takes `query`: search text typed elsewhere. With `anchor`, the popup then has no search of its own, and the host forwards the list keys to its hidden combobox input.
+
+  `Breadcrumb.Dropdown` takes `panelClassName`, for a panel background its search row shares with the list; the search row carries `data-slot="breadcrumb-dropdown-search"`.
+
+  A collapsible group's chevron, in `Combobox` / `MultiCombobox` and in `Breadcrumb.Dropdown.Group`, has a tooltip, and Cmd-click (Ctrl elsewhere) expands or collapses every group at once.
+
+  When a combobox group folds or unfolds, including all at once, the groups under it slide to their new place, and a windowed list keeps each row's measured height across a fold.
+
+  A query opens every collapsible group with a match, in `Combobox` / `MultiCombobox` and `Breadcrumb.Dropdown.Group`; a group folded under it stays folded until the query changes.
+
+  `MultiCombobox` takes `itemToLocked`: a selected item the user cannot remove looks disabled but still takes the highlight, so `renderAside` describes it and its group still folds; a group of only locked items locks its row.
+
+  An open `Combobox` / `MultiCombobox` popup marks `<body>` with `data-combobox-open`, counted across popups, so an app can lift the tooltips of the rows it lists. Combobox row labels carry `data-slot="combobox-item-label"`.
+
+- `PromptInput` takes `canSubmitEmpty`, so a composer whose attachments are the message can send with no text. Off by default.
+
+- `PromptInput` takes `blurOnEscape`, an `onKeyDown` that runs after its own key handling, `onPasteFiles` for files on the clipboard, and `busy` to hold the composer read-only while keeping focus. All opt-in.
+
+- `PromptInput`'s `/` menu picks the highlighted command on Tab, and opens with an empty or loading row (`commandsLoading`, `commandsEmptyText`) when `commands` is an empty list. New opt-in `slashTrigger="typed"` opens it only for a `/` typed into an empty composer.
+
+- Interaction-state and surface-corner tokens, so a theme can tell a hovered item from a selected one and round cards, menus and dialogs apart from controls. Unset, every token resolves to the value it replaced, so nothing changes until a theme sets one.
+  - `tw:bg-hover` / `tw:text-hover-foreground` (`--hover`, `--hover-foreground`) paint hover and keyboard highlight in Select, Combobox, Command, Breadcrumb, RadioGroup, Toggle, Calendar, DiffView, FileUpload, the markdown toolbar and AIKit. Unset: `accent` / `accent-foreground`. Argo `DropdownMenu` items, `Table` rows and `SectionNav` follow `--hover` too and, unset, keep their own `primary` / `muted` tint.
+  - `tw:bg-selected` / `tw:text-selected-foreground` (`--selected`, `--selected-foreground`) paint selected, checked and current in Table, Pagination, a checked `FieldBox`, the Calendar range, the active Breadcrumb item, SectionNav and a checked Command item. Unset: `accent` / `accent-foreground`. A checked argo `DropdownMenu` item follows `--selected` and, unset, keeps its `primary` tint.
+  - `tw:bg-pressed` (`--pressed`) is available for a pressed wash; no component paints it yet. Unset: `accent` a step towards its foreground.
+  - `tw:bg-scrim` (`--scrim`) is the `Modal`, `AlertModal` and `Sheet` backdrop. Unset: black at 50%.
+  - `tw:opacity-disabled` (`--disabled-opacity`) replaces every disabled `opacity-50`, `FieldBox` labels and `InputGroup` included. Unset: `0.5`. Controls disabled at 30%, 40% or 60% keep their own value.
+  - `--radius-card` rounds `Card`, `DashboardHero` and `tw:rounded-card`; unset, `Card` keeps `--radius-lg` and `rounded-card` keeps 10px. `--radius-popover` (`tw:rounded-popover`) rounds argo menus, popovers, hover cards and tooltips (unset 1rem). `--radius-modal` (`tw:rounded-modal`) rounds argo `Modal` and `AlertModal` (unset 1.5rem). `--radius-sheet` (`tw:rounded-sheet`) rounds the inner edge of an argo `Sheet` and `--radius-toast` (`tw:rounded-toast`) a `Toast`; unset, both keep `--radius-lg`.
+  - `tw:bg-sidebar-hover` / `tw:bg-sidebar-selected` (+ `-foreground`) split the `Sidebar` and `Navbar` hover from the current page, which both painted `sidebar-accent`. Unset, both are `sidebar-accent`; a current item keeps its selected fill while hovered.
+  - `ThemeProvider` emits all of them from a brand's `colors` / `colorsDark`, `radii` and `opacity`, and `BrandEditor` edits them.
+
+- `InlineStepLabel` takes opt-in `meta`, and `detail` + `defaultExpanded` for a collapsible per-row detail; `InlineStepGroup` takes an opt-in `footer`. Both render as before without them
+
+- `Tooltip.Title` heads a rich tooltip, and every floating overlay carries its own layer.
+  - `Tooltip.Title` is a small uppercase heading in the tooltip's text colour.
+  - `Tooltip` content spaces a nested `hr` and drops the last paragraph's bottom margin; on the legacy chrome a link takes the tooltip's text colour.
+  - `Tooltip` sits above `Modal` and every popup (1060); `HoverCard` sits with `Modal` (1051); a `DropdownMenu` submenu sits with its menu (1055).
+  - `Combobox` leaves `<body>` untouched while its popup is open.
+
+- `Markdown` gains opt-in streaming and code features; every default renders as before:
+  - `splitSealedBlocks(text)` and `withholdOpenTail(text, { diagram, tableHead })` — pure helpers for streaming an answer through `Markdown.Root` / memoised `Markdown.Block`s.
+  - `highlight` — colours fenced SQL, Python, JS/TS, JSON, shell and YAML through a lazily loaded highlighter.
+  - `sortable` (also on `MarkdownTable`) — header presses sort rows, numeric-aware, with `aria-sort`.
+  - `diagramActions` and `diagramDownload` — extra diagram toolbar controls and a built-in "Download SVG" action; `DiagramBlock` forwards `renderActions`.
+  - `ChatInlineIcon` also draws Lucide names (`icon:info`, `icon:trash-2`, …).
+
+- `Markdown` takes an opt-in `allowSvgFences`: an `svg fence, or an `xml / ```html fence whose body is a single SVG document, renders as a responsive chart instead of code. The SVG is sanitized with DOMPurify's SVG profile and loses scripts, event handlers, `foreignObject`, SMIL animation, `<style>` elements and every non-`#` reference. Raw inline HTML stays escaped, and the default is unchanged.
+
+  `ZoomableSvg` takes an opt-in `allowUse` to keep `<use>` (matplotlib draws every glyph with it) for markup whose `href`s are already limited to `#` references.
+
+- `PromptInput` takes `history`: the prompts already sent, oldest first. ↑ with the caret at the start of the text recalls them, newest first; ↓ steps back to the draft. Open `/` and `@` menus keep the arrows.
+
+- `Question` takes what an agent chat's question card needs. Additive; existing callers are unchanged.
+  - `isSubmitDisabled` keeps the answer from being sent, by click or ⌘/Ctrl+Enter.
+  - `isSubmitting` spins Submit and disables Skip.
+  - `error` shows why the last send failed, above the footer.
+  - `customAnswerMaxLength` caps the "Other" answer.
+  - An option's `badge` (e.g. `Recommended`) follows its label.
+  - `skipTooltip` replaces the Skip button's `Space` hint; `null` drops it.
+
+- `Table.Header` puts its row on the card surface, and `Table.SkeletonRows` draws placeholder rows in a table's own columns while its rows load.
+  - The header is `bg-card` with an `h-11` row and a border under it; `withShadow` and `className` work as before.
+  - The surface sits on `thead`, so `className="tw:bg-table-header"` (the former default tint) or any other `bg-*` replaces it at rest and on hover.
+  - `Table.SkeletonRows` takes `columns`, `noun` and `rows` (5 by default); the first row announces `Loading {noun}` to screen readers.
+  - Each column takes the real cell's `className` and `colSpan` and draws a `text` line, a `name` (icon, name and description lines) or nothing (`empty`).
+  - A width class can be a list, cycled over the rows; the name line varies in width from row to row unless given one.
+
+- `MermaidDiagram` renders with Pele, a dependency-free Mermaid renderer, in place of `mermaid` and `beautiful-mermaid`.
+  - Every Mermaid 12.1 diagram type; each type's code loads on first use, after which a diagram renders synchronously.
+  - Colours and font come from the DS tokens for the active scheme and are written into the SVG, so an exported SVG or PNG keeps them.
+  - `lucide:<name>` icons draw from the bundled Lucide pack; other icon packs draw no icon.
+  - A diagram cut off mid-stream shows the skeleton, and its source after 2 s without more input; invalid syntax shows the source.
+  - Layout and look follow Pele, not Mermaid.
+
+- `Table` puts its body on the card surface, the same `bg-card` as `Table.Header`.
+  - The fill sits on `<table>`, so a caller's `bg-*` in `className` replaces it.
+  - Row hover and selection tints draw over it as before.
+
+- `RjsfSchemaEditor` draws a `format: 'checkbox'` array as a group of DS `Checkbox`es.
+  - Each option toggles its value in the array; `readOnly` and `options.enumDisabled` disable them.
+  - `options.inline` lays the options out in a wrapping row.
+
+- `RjsfSchemaEditor` renders an array of enum values (`uniqueItems` + `items.enum`, no `format: 'checkbox'`) as a `MultiCombobox`.
+  - The default `async-multi-select` widget offers the `items.enum` options, labelled by `items.options.enum_titles`, and writes the selection back as an array of the typed enum values.
+  - A stored value outside `items.enum` shows as a chip labelled by the value and survives an edit.
+  - `readOnly` and `ui:disabled` disable it; options in `ui:enumDisabled` cannot be picked.
+  - It does not load `async` options, create `tags` / `creatable` values or read `enumSource`; a host widget passed under `async-multi-select` replaces it for that.
+
+### Patch Changes
+
+- `MultiCombobox`: while nothing matches, the inspector and its button go at once and the list takes the whole width, so the inspector never describes a row the list no longer shows.
+
+- `MultiCombobox`: with the inspector hidden, the list ends above the inspector button, so the button never covers a row at any scroll position.
+
+- `Markdown`'s `allowSvgFences` keeps only an allowlist of paint and text declarations in a fenced chart's `style` attributes, so `image-set()` can no longer load a URL and `position: fixed` can no longer lay an overlay over the page.
+
+- `Markdown`'s `allowSvgFences` caps the nodes a fence's `<use>` elements clone (20,000), not their count, so a few `<use>` aimed at a large group can no longer multiply into millions of rendered nodes.
+
+- `Table.SkeletonRows` takes `gapClassName` on a `name` column, the gap between its icon and lines (`tw:gap-3.5` by default), so a table's placeholder name starts where its real name does.
+
+- `Command.Item`'s keyboard highlight is the only row fill: a `checked` row shows a trailing check (or its checkbox / radio indicator), and rows no longer cross-fade on ↑/↓. The project switcher and Kai's chat history mark the current row this way (UT-5894)
+
+- Updated dependencies:
+  - @keboola/brand-registry@2.1.0
+
+## 13.2.0
+
+### Minor Changes
+
+- `Button` animates its state changes. `isLoading` crossfades the spinner with a leading or icon-only icon in its place, or grows it in before a bare label. An icon that appears fades in (and widens into place when it is new rather than swapped), and a changed label rolls over while the button's width follows. Nothing animates on first render, and `prefers-reduced-motion` turns it all off.
+
+  A label's text is wrapped in `span[data-slot="button-label"]` once it first changes; until then the markup is unchanged.
+
+- `InlineEdit` is the one click-to-edit field for names and titles: a hover fill and focus ring instead of an underline, a field that fills its row while editing, Save / Cancel that scale with the text and read as text on a wide sized title, opt-in `multiline` wrapping that keeps the buttons on the first line, `Kbd` shortcut tooltips, argo Save / Cancel on every brand, and Enter / Escape / blur that hold while a save is in flight.
+
+- `FacebookButton` block and `Facebook` vendor mark: Meta's Facebook Blue login button, the same in every brand and colour scheme.
+  - `label` picks "Log in with Facebook" (default) or "Continue with Facebook"; `isLoading` swaps the mark for a spinner and disables the button.
+  - `Facebook` is the logo pack's primary logo; `mono` renders the secondary logo (the disc with the "f" cut out).
+
+### Patch Changes
+
+- SplitButton, MultiActionButton and FileDownloadChip keep their leading icon while loading; Button crossfades it with the spinner.
+
+- `SplitButton` takes `onActionsCloseAutoFocus`, run as its actions menu closes. New folder in Transformations, Flows and Workspaces opens Create folder from it, so the Name field keeps its focus instead of losing it to the menu teardown
+
+- `Alert` sets its description 4 px under the title instead of 16 px.
+
+- Depends on `@tanstack/form-core` directly, so the form types in `dist` import it instead of carrying their own copy.
+
+- `FullScreenModal` locks the page's scroll while it is open (`lockBodyScroll`, on by default)
+  - Sets `overflow: hidden` on `<body>` next to the `full-screen-modal-open` class.
+  - Releases both once the last locking modal closes; modals with `lockBodyScroll={false}` don't hold the lock.
+  - Hands `<body>` back the inline `overflow` it had before the first lock.
+
+- `PageHeader.Detail`: while the title is renamed, the hidden badges and actions take no room — the field's last button lines up with the actions above it, and no empty space opens below the field.
+
+- `PageHeader` lets an inline rename take the whole title row: a title holding a textarea grows to fill the row and drops its right padding, an empty badges slot collapses instead of reserving space, the title icon and badges stay centred on the first line when a long title wraps, and the badges and actions step aside while the title is renamed, fading back once it has shrunk.
+
+- Collapsed sidebar labels show after 50ms instead of 300ms.
+
 ## 13.1.3
 
 ### Patch Changes

package/COMPONENT-API.md

@@ -14,13 +14,13 @@ Source: `src/components/Button/Button.tsx`
 
 > Icons are composed as children, not an `icon` prop. Plus all native `<button>` attributes.
 
-| Prop        | Type                                                                                                                  | Required | Default   | Description                                                                                                         |
-| ----------- | --------------------------------------------------------------------------------------------------------------------- | -------- | --------- | ------------------------------------------------------------------------------------------------------------------- |
-| `asChild`   | `boolean`                                                                                                             | no       | `false`   | Render as a Radix `Slot` so the parent JSX (e.g. a `react-router` `<Link>`) becomes the button element.             |
-| `block`     | `boolean \| null`                                                                                                     | no       | `false`   |                                                                                                                     |
-| `isLoading` | `boolean`                                                                                                             | no       | `false`   | Replaces the leading content with a spinner and disables the button visually. The caller still controls `disabled`. |
-| `size`      | `"small" \| "medium" \| "large" \| "icon-lg" \| "icon" \| "icon-sm" \| "icon-xs" \| "icon-2xs" \| "icon-3xs" \| null` | no       | `medium`  |                                                                                                                     |
-| `variant`   | `"primary" \| "secondary" \| "kai" \| "danger" \| "invisible" \| "outline" \| "inline" \| null`                       | no       | `primary` |                                                                                                                     |
+| Prop        | Type                                                                                                                  | Required | Default   | Description                                                                                                                 |
+| ----------- | --------------------------------------------------------------------------------------------------------------------- | -------- | --------- | --------------------------------------------------------------------------------------------------------------------------- |
+| `asChild`   | `boolean`                                                                                                             | no       | `false`   | Render as a Radix `Slot` so the parent JSX (e.g. a `react-router` `<Link>`) becomes the button element.                     |
+| `block`     | `boolean \| null`                                                                                                     | no       | `false`   |                                                                                                                             |
+| `isLoading` | `boolean`                                                                                                             | no       | `false`   | Shows a spinner in place of the leading icon, or before the label when there is none. The caller still controls `disabled`. |
+| `size`      | `"small" \| "medium" \| "large" \| "icon-lg" \| "icon" \| "icon-sm" \| "icon-xs" \| "icon-2xs" \| "icon-3xs" \| null` | no       | `medium`  |                                                                                                                             |
+| `variant`   | `"primary" \| "secondary" \| "kai" \| "danger" \| "invisible" \| "outline" \| "inline" \| null`                       | no       | `primary` |                                                                                                                             |
 
 ### `ButtonInline`
 
@@ -363,48 +363,58 @@ Source: `src/blocks/Form/connectors/MultiComboboxField.tsx`
 
 > Several values from a searchable list — state is `string[]`, never objects, so the form value stays what gets submitted. Project labels with `itemToLabel`; add `allowCreate` for an enum the user may extend. Imported by name from `@keboola/design`, composed inside `form.AppField` — NOT reachable as `field.MultiComboboxField`.
 
-| Prop                  | Type                                                                                                                                                                                                              | Required | Default | Description                                                                                                                                                                                                                                                                                    |
-| --------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `action`              | `ReactNode`                                                                                                                                                                                                       | no       | —       | Trailing node on the label row (e.g. a `Link`); not part of the accessible name.                                                                                                                                                                                                               |
-| `allowClear`          | `boolean`                                                                                                                                                                                                         | no       | —       | Clear-all button, shown only while chips exist. Chips stay removable either way.                                                                                                                                                                                                               |
-| `allowCreate`         | `boolean`                                                                                                                                                                                                         | no       | —       |                                                                                                                                                                                                                                                                                                |
-| `allowSelectAll`      | `boolean`                                                                                                                                                                                                         | no       | —       | "Select All" row for the whole set; hidden while a query is active, clears when all are selected.                                                                                                                                                                                              |
-| `aria-describedby`    | `string`                                                                                                                                                                                                          | no       | —       |                                                                                                                                                                                                                                                                                                |
-| `canCreate`           | `((query: string) => boolean)`                                                                                                                                                                                    | no       | —       | Rejects a value `allowCreate` would mint; values naming an item or already selected skip it.                                                                                                                                                                                                   |
-| `className`           | `string`                                                                                                                                                                                                          | no       | —       |                                                                                                                                                                                                                                                                                                |
-| `collapsibleGroups`   | `boolean`                                                                                                                                                                                                         | no       | —       | A row per group that folds it. A query shows every match regardless; state is keyed by position.                                                                                                                                                                                               |
-| `createSeparator`     | `string \| RegExp \| null`                                                                                                                                                                                        | no       | —       | Splits one entry into several values (default `','`). A `RegExp` must not capture; `null` never splits.                                                                                                                                                                                        |
-| `empty`               | `ReactNode`                                                                                                                                                                                                       | no       | —       |                                                                                                                                                                                                                                                                                                |
-| `focusVariant`        | `"off" \| "on" \| "default" \| null`                                                                                                                                                                              | no       | —       |                                                                                                                                                                                                                                                                                                |
-| `groupToLabel`        | `((group: Group<string>) => ReactNode)`                                                                                                                                                                           | no       | —       | Defaults to the group's `label`, as `Select` shows it.                                                                                                                                                                                                                                         |
-| `help`                | `ReactNode`                                                                                                                                                                                                       | no       | —       |                                                                                                                                                                                                                                                                                                |
-| `indicator`           | `Indicator`                                                                                                                                                                                                       | no       | —       |                                                                                                                                                                                                                                                                                                |
-| `inputClassName`      | `string`                                                                                                                                                                                                          | no       | —       |                                                                                                                                                                                                                                                                                                |
-| `inputValueSanitizer` | `((input: string) => string)`                                                                                                                                                                                     | no       | —       | Rewrites typed text before filtering and creating. Sees the whole text per keystroke — don't `trim()`.                                                                                                                                                                                         |
-| `isItemEqualToValue`  | `((itemValue: string, value: string) => boolean)`                                                                                                                                                                 | no       | —       | Custom comparison logic used to determine if a combobox item value matches the current selected value. Useful when item values are objects without matching referentially. Defaults to `Object.is` comparison.                                                                                 |
-| `isLoading`           | `boolean`                                                                                                                                                                                                         | no       | —       | Options still arriving; doesn't disable — pass `disabled` where the user must wait.                                                                                                                                                                                                            |
-| `items`               | `readonly (string \| Group<string>)[]`                                                                                                                                                                            | no       | —       | Read as immutable: pass a new array to change it; one mutated in place is not re-filtered.                                                                                                                                                                                                     |
-| `itemToChipColor`     | `((item: string) => "gray" \| "gray-darker" \| "gray-inverse" \| "green" \| "green-darker" \| "green-inverse" \| "blue" \| "blue-inverse" \| "red" \| "orange" \| "orange-inverse" \| "amber" \| ... 9 more ...)` | no       | —       |                                                                                                                                                                                                                                                                                                |
-| `itemToChipLabel`     | `((item: string) => ReactNode)`                                                                                                                                                                                   | no       | —       |                                                                                                                                                                                                                                                                                                |
-| `itemToDisabled`      | `((item: string) => boolean)`                                                                                                                                                                                     | no       | —       |                                                                                                                                                                                                                                                                                                |
-| `itemToIcon`          | `((item: string) => ReactNode)`                                                                                                                                                                                   | no       | —       |                                                                                                                                                                                                                                                                                                |
-| `itemToLabel`         | `((item: string, query: string) => ReactNode)`                                                                                                                                                                    | no       | —       | Row and chip content (unless `itemToChipLabel`), `itemToStringLabel` by default. - `query` is the search text, for `MarkedText`; a chip gets `''`.                                                                                                                                             |
-| `itemToStringLabel`   | `((itemValue: string) => string)`                                                                                                                                                                                 | no       | —       | When the item values are objects (`<Combobox.Item value={object}>`), this function converts the object value to a string representation for display in the input. If the shape of the object is `{ value, label }`, the label will be used automatically without needing to specify this prop. |
-| `itemToStringValue`   | `((itemValue: string) => string)`                                                                                                                                                                                 | no       | —       | When the item values are objects (`<Combobox.Item value={object}>`), this function converts the object value to a string representation for form submission. If the shape of the object is `{ value, label }`, the value will be used automatically without needing to specify this prop.      |
-| `label`               | `ReactNode`                                                                                                                                                                                                       | no       | —       |                                                                                                                                                                                                                                                                                                |
-| `maxVisible`          | `number`                                                                                                                                                                                                          | no       | —       |                                                                                                                                                                                                                                                                                                |
-| `onQueryChange`       | `((query: string) => void)`                                                                                                                                                                                       | no       | —       | Reports the sanitized query, on mount too. Notification only — the control owns the text.                                                                                                                                                                                                      |
-| `pinnedChipLabels`    | `ReactNode[]`                                                                                                                                                                                                     | no       | —       | Non-removable chips ahead of the values, outside `maxVisible` and absent from `value`.                                                                                                                                                                                                         |
-| `queryToCreateLabel`  | `((query: string) => ReactNode)`                                                                                                                                                                                  | no       | —       | Words the create row. Receives the values it adds, trimmed and re-joined — not the entry as typed.                                                                                                                                                                                             |
-| `queryToCreateValue`  | `((query: string) => string)`                                                                                                                                                                                     | no       | —       | Projects one entered value into an item. Called once per trimmed part of a split entry.                                                                                                                                                                                                        |
-| `renderChips`         | `((values: string[]) => ReactNode)`                                                                                                                                                                               | no       | —       | Replaces the default chips; the chip props, `maxVisible` included, are then ignored.                                                                                                                                                                                                           |
-| `required`            | `boolean`                                                                                                                                                                                                         | no       | —       |                                                                                                                                                                                                                                                                                                |
-| `requiredMark`        | `RequiredMark`                                                                                                                                                                                                    | no       | —       | Gated by `required`: `'required'` shows `*` only if required, `'optional'` shows `(optional)` only if not, `'hidden'` neither. Defaults to `'required'`.                                                                                                                                       |
-| `selectableGroups`    | `boolean`                                                                                                                                                                                                         | no       | —       | A group's row selects its matching enabled items. The row itself never enters `value`.                                                                                                                                                                                                         |
-| `sizing`              | `"small" \| "medium" \| "default" \| null`                                                                                                                                                                        | no       | —       |                                                                                                                                                                                                                                                                                                |
-| `tooltip`             | `ReactNode`                                                                                                                                                                                                       | no       | —       |                                                                                                                                                                                                                                                                                                |
-| `variant`             | `"primary" \| "secondary" \| null`                                                                                                                                                                                | no       | —       |                                                                                                                                                                                                                                                                                                |
-| `virtualized`         | `boolean \| "auto"`                                                                                                                                                                                               | no       | —       | Puts only the rows in view into the DOM: `'auto'` past 30 options, grouped or not; `true` always.                                                                                                                                                                                              |
+| Prop                     | Type                                                                                                                                                                                                              | Required | Default | Description                                                                                                                                                                                                                                                                                    |
+| ------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `action`                 | `ReactNode`                                                                                                                                                                                                       | no       | —       | Trailing node on the label row (e.g. a `Link`); not part of the accessible name.                                                                                                                                                                                                               |
+| `allowClear`             | `boolean`                                                                                                                                                                                                         | no       | —       | Clear-all button, shown only while chips exist. Chips stay removable either way.                                                                                                                                                                                                               |
+| `allowCreate`            | `boolean`                                                                                                                                                                                                         | no       | —       |                                                                                                                                                                                                                                                                                                |
+| `allowSelectAll`         | `boolean`                                                                                                                                                                                                         | no       | —       | "Select All" row for the whole set; hidden while a query is active, clears when all are selected.                                                                                                                                                                                              |
+| `anchor`                 | `Element \| VirtualElement \| RefObject<Element \| null> \| (() => Element \| VirtualElement \| null) \| null`                                                                                                    | no       | —       | No field: the popup opens against this element, its search at the top. Pair with `defaultOpen`.                                                                                                                                                                                                |
+| `aria-describedby`       | `string`                                                                                                                                                                                                          | no       | —       |                                                                                                                                                                                                                                                                                                |
+| `asideOpen`              | `boolean`                                                                                                                                                                                                         | no       | —       | Whether the inspector shows; a button in the popup toggles it. Uncontrolled, it starts open.                                                                                                                                                                                                   |
+| `canCreate`              | `((query: string) => boolean)`                                                                                                                                                                                    | no       | —       | Rejects a value `allowCreate` would mint; values naming an item or already selected skip it.                                                                                                                                                                                                   |
+| `className`              | `string`                                                                                                                                                                                                          | no       | —       |                                                                                                                                                                                                                                                                                                |
+| `collapseSelectedGroups` | `boolean`                                                                                                                                                                                                         | no       | —       | Each time the popup opens, a group whose items are all selected starts folded.                                                                                                                                                                                                                 |
+| `collapsibleGroups`      | `boolean`                                                                                                                                                                                                         | no       | —       | A row per group that folds it. A query shows every match regardless; state is keyed by position.                                                                                                                                                                                               |
+| `createSeparator`        | `string \| RegExp \| null`                                                                                                                                                                                        | no       | —       | Splits one entry into several values (default `','`). A `RegExp` must not capture; `null` never splits.                                                                                                                                                                                        |
+| `defaultOpen`            | `boolean`                                                                                                                                                                                                         | no       | —       | The popup is open on mount, for a picker shown on demand.                                                                                                                                                                                                                                      |
+| `empty`                  | `ReactNode`                                                                                                                                                                                                       | no       | —       |                                                                                                                                                                                                                                                                                                |
+| `focusVariant`           | `"off" \| "on" \| "default" \| null`                                                                                                                                                                              | no       | —       |                                                                                                                                                                                                                                                                                                |
+| `groupAppearance`        | `"plain" \| "banded"`                                                                                                                                                                                             | no       | —       | `banded`: each group, its row and open items, is a white card on a grey list.                                                                                                                                                                                                                  |
+| `groupToLabel`           | `((group: Group<string>) => ReactNode)`                                                                                                                                                                           | no       | —       | Defaults to the group's `label`, as `Select` shows it.                                                                                                                                                                                                                                         |
+| `help`                   | `ReactNode`                                                                                                                                                                                                       | no       | —       |                                                                                                                                                                                                                                                                                                |
+| `indicator`              | `Indicator`                                                                                                                                                                                                       | no       | —       |                                                                                                                                                                                                                                                                                                |
+| `inputClassName`         | `string`                                                                                                                                                                                                          | no       | —       |                                                                                                                                                                                                                                                                                                |
+| `inputValueSanitizer`    | `((input: string) => string)`                                                                                                                                                                                     | no       | —       | Rewrites typed text before filtering and creating. Sees the whole text per keystroke — don't `trim()`.                                                                                                                                                                                         |
+| `isItemEqualToValue`     | `((itemValue: string, value: string) => boolean)`                                                                                                                                                                 | no       | —       | Custom comparison logic used to determine if a combobox item value matches the current selected value. Useful when item values are objects without matching referentially. Defaults to `Object.is` comparison.                                                                                 |
+| `isLoading`              | `boolean`                                                                                                                                                                                                         | no       | —       | Options still arriving; doesn't disable — pass `disabled` where the user must wait.                                                                                                                                                                                                            |
+| `items`                  | `readonly (string \| Group<string>)[]`                                                                                                                                                                            | no       | —       | Read as immutable: pass a new array to change it; one mutated in place is not re-filtered.                                                                                                                                                                                                     |
+| `itemToChipColor`        | `((item: string) => "gray" \| "gray-darker" \| "gray-inverse" \| "green" \| "green-darker" \| "green-inverse" \| "blue" \| "blue-inverse" \| "red" \| "orange" \| "orange-inverse" \| "amber" \| ... 9 more ...)` | no       | —       |                                                                                                                                                                                                                                                                                                |
+| `itemToChipLabel`        | `((item: string) => ReactNode)`                                                                                                                                                                                   | no       | —       |                                                                                                                                                                                                                                                                                                |
+| `itemToDisabled`         | `((item: string) => boolean)`                                                                                                                                                                                     | no       | —       |                                                                                                                                                                                                                                                                                                |
+| `itemToIcon`             | `((item: string) => ReactNode)`                                                                                                                                                                                   | no       | —       |                                                                                                                                                                                                                                                                                                |
+| `itemToLabel`            | `((item: string, query: string) => ReactNode)`                                                                                                                                                                    | no       | —       | Row and chip content (unless `itemToChipLabel`), `itemToStringLabel` by default. - `query` is the search text, for `MarkedText`; a chip gets `''`.                                                                                                                                             |
+| `itemToLocked`           | `((item: string) => boolean)`                                                                                                                                                                                     | no       | —       | A selected item no press removes: looks disabled, still highlights for `renderAside`.                                                                                                                                                                                                          |
+| `itemToStringLabel`      | `((itemValue: string) => string)`                                                                                                                                                                                 | no       | —       | When the item values are objects (`<Combobox.Item value={object}>`), this function converts the object value to a string representation for display in the input. If the shape of the object is `{ value, label }`, the label will be used automatically without needing to specify this prop. |
+| `itemToStringValue`      | `((itemValue: string) => string)`                                                                                                                                                                                 | no       | —       | When the item values are objects (`<Combobox.Item value={object}>`), this function converts the object value to a string representation for form submission. If the shape of the object is `{ value, label }`, the value will be used automatically without needing to specify this prop.      |
+| `label`                  | `ReactNode`                                                                                                                                                                                                       | no       | —       |                                                                                                                                                                                                                                                                                                |
+| `maxVisible`             | `number`                                                                                                                                                                                                          | no       | —       |                                                                                                                                                                                                                                                                                                |
+| `onAsideOpenChange`      | `((open: boolean) => void)`                                                                                                                                                                                       | no       | —       |                                                                                                                                                                                                                                                                                                |
+| `onOpenChange`           | `((open: boolean) => void)`                                                                                                                                                                                       | no       | —       |                                                                                                                                                                                                                                                                                                |
+| `onQueryChange`          | `((query: string) => void)`                                                                                                                                                                                       | no       | —       | Reports the sanitized query, on mount too. Notification only — the control owns the text.                                                                                                                                                                                                      |
+| `pinnedChipLabels`       | `ReactNode[]`                                                                                                                                                                                                     | no       | —       | Non-removable chips ahead of the values, outside `maxVisible` and absent from `value`.                                                                                                                                                                                                         |
+| `query`                  | `string`                                                                                                                                                                                                          | no       | —       | The search text, typed elsewhere (a chat composer): with `anchor`, the popup has no search. The host forwards ArrowUp, ArrowDown, Enter and Escape to the `combobox` input it renders.                                                                                                         |
+| `queryToCreateLabel`     | `((query: string) => ReactNode)`                                                                                                                                                                                  | no       | —       | Words the create row. Receives the values it adds, trimmed and re-joined — not the entry as typed.                                                                                                                                                                                             |
+| `queryToCreateValue`     | `((query: string) => string)`                                                                                                                                                                                     | no       | —       | Projects one entered value into an item. Called once per trimmed part of a split entry.                                                                                                                                                                                                        |
+| `renderAside`            | `((highlighted: MultiComboboxHighlighted<string, Group<string>>) => ReactNode)`                                                                                                                                   | no       | —       | An inspector beside the list about the last highlighted row; `null` before any. Hidden while the popup is under 40rem wide.                                                                                                                                                                    |
+| `renderChips`            | `((values: string[]) => ReactNode)`                                                                                                                                                                               | no       | —       | Replaces the default chips; the chip props, `maxVisible` included, are then ignored.                                                                                                                                                                                                           |
+| `required`               | `boolean`                                                                                                                                                                                                         | no       | —       |                                                                                                                                                                                                                                                                                                |
+| `requiredMark`           | `RequiredMark`                                                                                                                                                                                                    | no       | —       | Gated by `required`: `'required'` shows `*` only if required, `'optional'` shows `(optional)` only if not, `'hidden'` neither. Defaults to `'required'`.                                                                                                                                       |
+| `selectableGroups`       | `boolean`                                                                                                                                                                                                         | no       | —       | A group's row selects its matching enabled items. The row itself never enters `value`.                                                                                                                                                                                                         |
+| `sizing`                 | `"small" \| "medium" \| "default" \| null`                                                                                                                                                                        | no       | —       |                                                                                                                                                                                                                                                                                                |
+| `tooltip`                | `ReactNode`                                                                                                                                                                                                       | no       | —       |                                                                                                                                                                                                                                                                                                |
+| `variant`                | `"primary" \| "secondary" \| null`                                                                                                                                                                                | no       | —       |                                                                                                                                                                                                                                                                                                |
+| `virtualized`            | `boolean \| "auto"`                                                                                                                                                                                               | no       | —       | Puts only the rows in view into the DOM: `'auto'` past 30 options, grouped or not; `true` always.                                                                                                                                                                                              |
 
 ### `field.CheckboxField`
 
@@ -524,7 +534,7 @@ Source: `src/components/ThemeProvider/ThemeProvider.tsx`
 | Prop              | Type                                                                                                                                                                                                                                                                                                            | Required | Default | Description                                                                                                                                                             |
 | ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `brandId`         | `string`                                                                                                                                                                                                                                                                                                        | no       | —       | Controlled active brand id. When set, the parent owns the value and `setBrand` only notifies via `onBrandIdChange` (it does not mutate internal state).                 |
-| `brands`          | `readonly { id: string; name: string; theme: { colors?: { foreground?: string; background?: string; muted?: string \| undefined; mutedForeground?: string \| undefined; border?: string \| undefined; ... 23 more ...; sidebar?: { ...; } \| undefined; } \| undefined; ... 6 more ...; gradient?: { ...; }...` | no       | `[]`    | Brands this provider knows about; the active brand id resolves against these.                                                                                           |
+| `brands`          | `readonly { id: string; name: string; theme: { colors?: { foreground?: string; background?: string; muted?: string \| undefined; mutedForeground?: string \| undefined; border?: string \| undefined; ... 29 more ...; sidebar?: { ...; } \| undefined; } \| undefined; ... 7 more ...; opacity?: { ...; } ...` | no       | `[]`    | Brands this provider knows about; the active brand id resolves against these.                                                                                           |
 | `defaultBrandId`  | `string`                                                                                                                                                                                                                                                                                                        | no       | —       | Initial active brand id for uncontrolled use. Defaults to the design-system sentinel (`DEFAULT_BRAND_ID`) — no brand tokens injected, so the stylesheet defaults apply. |
 | `defaultScheme`   | `ColorScheme`                                                                                                                                                                                                                                                                                                   | no       | —       | Initial scheme when uncontrolled; defaults to `light`.                                                                                                                  |
 | `onBrandIdChange` | `((brandId: string) => void)`                                                                                                                                                                                                                                                                                   | no       | —       | Called with the next id whenever `setBrand` runs — required to persist the choice in controlled mode.                                                                   |