@keboola/design 11.3.0 → 11.5.0

package/CHANGELOG.md

@@ -1,5 +1,533 @@
 # @keboola/design
 
+## 11.5.0
+
+### Minor Changes
+
+- `Markdown` draws a fenced `flint` block as a chart, the way it already draws `mermaid` as a diagram. `flint-chart` is admitted as an alias. `DIAGRAM_LANGUAGES` is exported for callers that stream an answer in and have to leave a fence that is still open as plain code. A spec is refused before anything compiles it if it carries a key that would fetch or evaluate — `url`, `expr`, `signal`, `signals`, `params`, or any `*Expr` property — and the reader is shown the source instead of a chart. Where flint keys a map by column name — `data.values` rows, `semantic_types`, `field_display_names` — the key is the column's, not the spec's, so a chart of landing-page URLs still draws.
+
+- `clampPercentage` and `formatPercentage` are exported from `AIKit`, so a usage percentage is clamped and formatted in one place. `clampPercentage` normalizes non-finite input to 0, which the app copies it replaces did not — a `NaN` percentage no longer reaches a `Progress` value, whose indicator is unclamped.
+
+- `AuthLayout` floors the form column in the split geometry, and takes `asideCollapse`; `BrandLogo` takes `label`
+  - The split's form track is now `minmax(<column + gutters>, 1fr)` instead of `1fr`, so between `lg` and 1536px (`width="form"`) or 1824px (`width="wide"`) it stops handing the column less than `width` asks for — a two-field row there measured ~180px per field.
+  - The form column no longer carries `min-h-svh` of its own in the split geometry: the grid root has it and the rows stretch, so `asideCollapse="stack"` no longer reserves a whole empty screen under a short card.
+  - `asideCollapse="stack"` keeps the `aside` below `lg`, in its `asideSide` order, for a page whose pitch has to survive a phone. The default stays `hide`.
+  - `BrandLogo label` names the logo for a screen reader instead of the brand's registry `name` — a link around the mark otherwise announces the picker's disambiguating suffix (`Keboola (V2)`).
+
+- `Combobox` and `MultiCombobox` are now clearable by default — `allowClear` defaults to `true`.
+
+  Consumer-visible behaviour change. The clear button only mounts once there is something to clear
+  (single: a selection; multi: at least one chip), so an empty control renders exactly as before and
+  individual chips stay removable regardless. 16 existing call sites across `kbc-ui`,
+  `developer-portal` and `theme-generator` gain the affordance; the 10 that already pass `allowClear`
+  are unaffected, as are the 4 adder-pattern comboboxes pinned to `value={null}` (nothing is ever
+  selected, so the button never mounts).
+  - Pass `allowClear={false}` where clearing must not be one click away — a required field, or a
+    control whose empty state the surrounding form cannot represent.
+  - `RjsfSchemaEditor`'s `SelectWidget` and `DynamicSelectWidget` now both derive it from the schema
+    (`allowClear={!required}`), so a schema-required field stays non-clearable. `DynamicSelectWidget`
+    passed no `allowClear` before, so its non-required fields gain the button as intended.
+  - `MultiComboboxField` deliberately does **not** derive it: a required multi field's chips are
+    individually removable, so withholding clear-all prevents nothing.
+  - Radix `Select` still has no clear affordance; model "no selection" as an explicit item there.
+
+  `allowSelectAll` is unchanged (still `false`) — see UT-5422.
+
+- `Combobox` and `MultiCombobox` take `inputValueSanitizer` and `onQueryChange`
+  - `inputValueSanitizer` rewrites what the user types before the control adopts it, so an identifier field (a bucket, table or column name) can keep the query to its own character set. It runs on typing only, never on the selection's label.
+  - `onQueryChange` reports the query the list filters by, sanitizer already applied — for an owner driving a server-side search, an option order, or the name a create form opens with. It goes empty once the input shows the selection's label, and reports from the mount render on, so a search driven by it needs no first fetch of its own.
+  - Neither hands the text over: the control keeps owning it, so there is still no controlled `inputValue`.
+
+- `Combobox` takes `itemToSelectedLabel` — how the selection renders once the popup closes.
+
+  Additive. Left unset the closed control shows `itemToStringLabel`'s text, exactly as before.
+  - The node renders ahead of the input and the input's own text turns transparent behind it, so the
+    selection reads once. Typing dissolves it and hands the row back to the query.
+  - The input keeps the string label as its **value**, so the control still reports its selection to a
+    screen reader. That is the reason to reach for this over drawing the selection into `prefix` with
+    `value` pinned to `null` — same picture, and the input has no accessible value.
+  - The three label accessors stay independent: `itemToLabel` styles the open list's rows (and takes
+    the query, for `MarkedText`), `itemToStringLabel` is the input's text and the search subject.
+
+  `Combobox` also now tracks an uncontrolled selection (`defaultValue`, or no `value` at all) the same
+  way it tracks a controlled one. Beyond feeding the new accessor, that fixes the list collapsing to
+  the selected item after an uncontrolled pick: as with a controlled combobox, reopening now browses
+  the whole list instead of filtering by the selection's own label.
+
+  Radix `Select` needs nothing here — its trigger already mirrors the item's `label` node, and `icon`
+  / `hint` sit outside that mirror for a row that carries more than the trigger should.
+
+- Add `AuthLayout` — the signed-out page frame (sign-in, sign-up, password reset, MFA, project picker).
+
+  Compound: `AuthLayout.Header` (the active brand's mark beside the `productName` it is given, or your own lockup as children; takes `actions`), `AuthLayout.Content`, `AuthLayout.Footer`. `width` picks the column (`form` 28rem | `wide` 34rem); passing `aside` switches the page to the split geometry, with `asideSide` choosing the panel's side.
+
+- `Select` requires an accessible name — `aria-label`, `aria-labelledby`, or an `id` — and forwards
+  `aria-labelledby` to the trigger, which it previously dropped.
+
+  ```tsx
+  // A visible label — point it at the control.
+  <Label htmlFor="stage">Stage</Label>
+  <Select id="stage" items={STAGES} value={stage} onValueChange={setStage} />
+
+  // A bare control (toolbar filter, repeated row) — name it directly.
+  <Select aria-label="Rows per page" items={ROWS_PER_PAGE} value={rows} onValueChange={setRows} />
+  ```
+
+  The trigger is a `role="combobox"` button, which is not a name-from-content role: neither the
+  selected item's label nor the `placeholder` names it, so a `Select` with none of the three reached
+  a screen reader as an unnamed control.
+  - The requirement sits on `Select.Trigger` as well, so the compound route is covered too. Passing
+    more than one route is still allowed — an `id` for the `<Label htmlFor>` plus an `aria-label`
+    that overrides it is a legitimate pairing.
+  - An `id` alone still names nothing: it counts only when a `<label for>` points at it, and no type
+    can check that pair.
+  - `field.SelectField` needs none of the three — `FieldItem` owns the label and hands the control
+    its `id`. It no longer accepts `aria-label` / `aria-labelledby`, which nothing passed: a name
+    from the call site could only disagree with the label the field already renders.
+
+- `MultiCombobox` takes `canCreate`, the gate `Combobox` already had. It runs on the typed query once
+  that query matches no item and nothing already selected, and returning `false` hides the create row
+  so the empty state shows instead of an "Add …" row the caller would only reject afterwards.
+
+  The case it is for is a free-form value with a format the caller can state — a column name a
+  JSON-Schema `pattern` constrains, an email address. Without it a multi creatable control had no way
+  to say no before the value was in the selection.
+
+  The Select All row no longer leaks into the chips. Base UI holds it in `value` like any other item,
+  so a complete selection grew a third chip and handed the row's own entry to the caller's
+  `itemToChipLabel` / `itemToLabel` as if it were a value — a control that projects its items (an id
+  to a label) then rendered that object as a child and React threw. The chip area now filters the
+  control's internal entries out before anything reaches a caller callback. The row is also gone
+  entirely when there is nothing to select all of, where `0 === 0` had read as "everything is
+  selected".
+
+  `itemToLabel` defaults to `itemToStringLabel` rather than to the built-in label reader, so a control
+  whose items are ids with the label beside them states the projection once instead of passing the
+  same function twice. Passing both still works, and is what a row richer than the input's own text
+  wants.
+
+- `MultiCombobox` takes `renderChips` — a slot that renders the chip area from the selected values, for the shape no per-value accessor can express: one node standing for the whole selection, or a chip count that is not the value count. `Combobox.Chip` is exposed as the removable-chip building block a custom render composes from.
+
+  A chip now also yields Enter and Space to interactive content inside it, so `itemToChipLabel` can return a link or an action and have it activate from the keyboard.
+
+- `MultiCombobox` accepts `isItemEqualToValue` and forwards it to Base UI, as `Combobox` already did.
+  Without it Base UI matches the selection against `items` by reference, so a control fed object items
+  lost its selection the moment the store handed back structurally equal items with fresh references —
+  the workaround being a caller-side `string[]` of ids plus an id→label projection.
+
+  Both controls now build the comparer from one shared factory, with two consequences. An injected
+  "Select All" or create row equals only a sentinel of the same marker, so a caller item whose `value`
+  is the literal `__select_all__` is a plain item rather than the Select All row. And the comparer
+  keeps its identity between renders, where an unmemoized one re-rendered every option row on each
+  render of the control.
+
+- `MultiCombobox` with `allowCreate` splits a created entry into one value per comma, and takes
+  `createSeparator` to change or switch off the split.
+
+  Consumer-visible behaviour change, on by default. Pasting `id1, id2, id3` into a creatable multi
+  control added one chip literally named `id1, id2, id3`; it now adds three. The paste is the reason a
+  multi control is creatable at all — tags, column lists, primary keys, allowed component ids, email
+  lists — so the split is the default rather than a prop each site has to remember. `Combobox` is
+  unchanged: one entry there can only be one value.
+  - `createSeparator` takes a string or a `RegExp` for another convention (`';'` for an Outlook
+    address list, `/[\s,]+/` where a value can never contain a space), and `null` where a value can
+    itself contain the separator and one entry must stay one chip.
+  - Whitespace is deliberately not part of the default — tags and column names contain spaces, and
+    every value is trimmed anyway, so `id1, id2` needs nothing but the comma.
+  - `queryToCreateValue` is called once per value, each already trimmed, so a per-value projection or
+    normalisation needs no change. This is also where the legacy wrapper's `trimMultiCreatedValues`
+    lands.
+  - `canCreate` gates each value rather than the whole entry, so a pasted list keeps the values whose
+    format passes and drops the rest instead of being rejected wholesale. A value naming an existing
+    item never reaches the gate — committing selects that item rather than minting one.
+  - A value repeated inside one entry, or one the selection already holds, is added once. A value
+    naming an existing item selects that item rather than minting a twin standing for the same thing.
+  - The row is offered whenever the entry adds anything to the selection, and withholds itself only
+    when the selection already holds every value, or when a single value names an item (that item's
+    own row is the affordance). That is why an entry naming only existing items keeps the row: the
+    substring filter matches no item for a multi-value entry, so the row is the only thing that can
+    act on such a paste.
+  - `queryToCreateLabel` now receives the values committing the row will add, re-joined with the
+    entry's own separator, rather than the entry as typed — so the row can neither name a value it
+    drops nor stay silent about one it selects. For a single-value entry that string is the entry
+    itself, so an existing label reads exactly as before.
+
+- Add `AnswerActions` to the AI Kit: the copy-and-vote row for a finished agent answer.
+  - Always rendered rather than revealed on hover, so it exists for a reader without a pointer.
+  - `aria-pressed` says which vote is recorded, and both buttons stay focusable — a vote can be
+    changed but not withdrawn.
+  - No copy button when `copyText` is empty: a turn that produced only tool calls has nothing to
+    take away.
+  - The recorded vote and the write stay with the caller; the two chats vote against different
+    endpoints.
+
+- `useSidebar(side)` now exposes `setFill(fill: boolean)` alongside `toggleFill()`.
+
+  `toggleFill` requires the caller to know the current value, so two callers in one commit read the
+  same stale flag and undo each other, and a caller whose view of the layout disagrees with the flag
+  skips the change entirely. `setFill` states the value it wants, so it is idempotent. `toggleFill`
+  is unchanged and still the right call for a user-facing toggle control.
+
+- `UsageStats` accepts `open` / `onOpenChange`, so a caller can hold the hover card open past a pointer leave — needed when the card contains a popover of its own.
+
+### Patch Changes
+
+- `PlanApproval`, `CollapsibleStepHeader` and `UsageStatsRing` follow the active colour scheme and
+  brand. All three pinned fixed grey and white values, so the plan-approval card rendered as a light
+  card with near-black text on a dark page, and ignored a customer brand's own surface tokens in
+  either scheme. They now consume the semantic tokens throughout: the card's shell is the recessed
+  `background` tier, its plan body, action bar and change-request form lift off it on `card`, and each
+  tier paints its own foreground so no surface inherits ink from whatever rendered it. Step counts
+  read as `muted-foreground`, dividers as `border`, and the usage ring's track as a muted mark.
+
+  A dismissed step's icon takes its colour from the step's own variant rather than a pinned grey, so
+  it now matches the muted label beside it; a failed step keeps the destructive tone. The card's inner
+  dividers are a touch more visible in light mode, since one shared border token now draws them and
+  the frame alike.
+
+- AIKit collapsibles move instead of popping: `PlanApproval`'s plan body and `AnswerSummary`'s answers ease open and closed on `grid-template-rows`, `AnswerSummary` reports a manual toggle through `onExpandToggle`, and `ToolCallStatusHeader` turns one chevron rather than swapping the up and down glyphs.
+
+- `AnswerSummary` collapses flush against its header: the spacing before the answers lives inside the collapsible body, so the closed state no longer keeps a 16px gap under the header.
+
+- `Combobox` / `MultiCombobox` hold `''` and `' '` as genuine values: `withBlankValues`, `namedLabel`.
+
+  "This column equals the empty string" and "equals a single space" are real filter predicates against
+  Storage data. Base UI keys "is something selected" off `value != null` rather than truthiness, so a
+  blank string already round-trips through `onValueChange` verbatim and keeps its clear affordance —
+  no sentinel option and no mapping on save. What was missing was the display half: a blank row and a
+  blank chip render as nothing, indistinguishable from an empty control.
+  - `withBlankValues(values)` offers both blanks ahead of a value list and collapses duplicates. A
+    column's distinct values can already hold one, and two `Object.is`-equal rows both report
+    `aria-selected` and toggle each other.
+  - **Rows and chips** name a blank — `[empty string]`, `[space character]`, and `[whitespace]` for
+    anything else whose text is all whitespace. `namedLabel` exposes the rule so an `itemToLabel` /
+    `itemToChipLabel` / `renderChips` override can keep it.
+  - **`itemToStringLabel` is deliberately not named.** It is the item's string identity, the default
+    search text and the input's accessible value, and Base UI counts `''` as a selection — naming it
+    would paint text over the placeholder wherever "nothing selected" is spelled `''`. Typing
+    therefore never reaches a blank row, and naming a blank selection in a closed `Combobox` is
+    `itemToSelectedLabel`'s job.
+  - `allowCreate` cannot create a blank: it trims the typed query, so fixed rows are the only way in.
+  - Radix `Select` is unaffected and still cannot carry a blank — it reserves `''` for its own empty
+    state. The split is documented in `AGENTS.md`.
+
+- `Combobox` and `MultiCombobox` popups register in Radix's dismissable-layer stack, so Escape closes
+  the popup and leaves the surrounding surface alone. Base UI portals the popup out of the DOM, so a
+  `Modal`, `Sheet` or `Popover` around it still counted itself as topmost and took the keystroke — a
+  combobox in a modal form lost the whole half-filled form on the key that was meant to dismiss its
+  own list. The popup now sits above that surface as a layer of its own; Base UI still owns the
+  dismissal itself, and Escape on a closed popup reaches the surface as before.
+
+- `Combobox`'s `itemToSelectedLabel` node now paints over the input's own content box instead of
+  sitting beside it as a flex sibling. Previously the two boxes shared one row, so the caret and text
+  selection lived roughly a badge-width past where the visible label ended.
+
+- `Combobox` stores the text the user typed rather than the text it displays, and derives the input's
+  value, the search query and the rich selected label from that one piece of state.
+
+  The two meanings did not fit in one variable, so the difference was reconstructed around it: an
+  effect snapping the input back to the controlled value's label, a counter re-triggering that effect
+  when `value` stayed put, a string comparison standing in for "this is a selection, not a query", and
+  a ref reconstructing why the popup had closed. `typedText: string | null` says it directly, with
+  `null` for "nothing typed, showing the selection".
+  - Only Base UI's `input-change` reason writes to it. Every other reason it reports — an item press,
+    a clear, the label it syncs back on unmount — means "show the selection", which `null` already
+    says. Its sync-back is a write to ignore rather than adopt: it stringifies Base UI's own selected
+    value, which for a created item is the internal sentinel and not the value the owner holds.
+  - The state resets the moment the popup starts closing, so a control the user has walked away from
+    shows what its value says. Base UI's own sync-back cannot carry that: it skips the write whenever
+    the input's text already matches the label, which a query edited back to the label reaches.
+  - Whitespace alone is never adopted as a query. Base UI gates opening the popup on the trimmed
+    text, so a control that took it would sit closed showing text its value does not say, with no
+    close to discard it.
+  - "Showing the selection" is the input's text matching the selection's label, not merely nothing
+    having been typed. A query edited back to the label lands on the same screen as never having
+    typed: the rich `itemToSelectedLabel` node returns and the list stays browsable rather than
+    narrowing to the item already chosen. Base UI's own `shouldBypassFiltering` covers only a fresh
+    open — its `queryChangedAfterOpen` flips on the first keystroke and clears on close, never when
+    the text returns to the label.
+
+  One behaviour change: a `value` arriving from elsewhere while the user is mid-query no longer yanks
+  the text away on the keystroke. The query stands until it is committed or discarded, and the new
+  label shows when the popup closes.
+
+- `Combobox` / `MultiCombobox` get a shared word-by-word `filter`: `filterByWords` and `matchByWords`.
+
+  Both controls match the typed query as one substring of the label, so `frankfurt europe` finds
+  nothing in a list holding `Europe (Frankfurt)`. `filter={filterByWords}` requires every word of the
+  query to occur somewhere in the label, in any order, ignoring case, matching by containment;
+  `matchByWords([a, b], query)` applies the same rule to texts the label does not show — an email
+  behind a name, a table id behind a display name.
+  - `filterByWords` searches **only** what the control displays, so a filter cannot match an id the
+    user cannot see. Extra fields are named explicitly through `matchByWords`.
+  - Comparison is a lowercased `includes`, not Base UI's `Intl.Collator` `contains`, so passing
+    either helper trades diacritic-insensitive matching (`Muller` finds `Müller`) for word order.
+  - Defaults are unchanged — both are opt-in per call site.
+
+- `Badge.Button` shows a focus ring. The `focus-visible` block sat on `BadgeRoot`, a `div` that never
+  takes focus, so every clickable badge was keyboard-focusable with no visible focus. The ring is
+  inset, because a badge root clips its overflow.
+
+- `MarkdownEditor`'s plugins, `RjsfSchemaEditor` and `Popconfirm` read their callback props through
+  `useStableCallback` instead of a ref assigned in the component body. Each of those assignments wrote
+  to shared memory during render, where a render React discards can still leave the ref carrying a
+  value that never committed. Two refs in `RjsfSchemaEditor` are gone rather than converted — one
+  wrapped a `useState` setter and one a `useMemo` with no dependencies, both already stable, and the
+  ref only hid that from the dependency list. `ImagePastePlugin` now decides whether to claim paste
+  and drop from a boolean derived from `onImageUpload`, so an editor that gains or loses an uploader
+  re-registers its Lexical commands instead of keeping the first answer forever.
+
+- `RjsfSchemaEditor`'s enum fields have an accessible name: `SelectWidget` and `DynamicSelectWidget`
+  forward rjsf's `id` to their `Combobox`, which is where `FieldTemplate`'s `<Label htmlFor>` points.
+  They were the only built-in widgets dropping it, so a screen reader reported every enum field in a
+  component configuration as an unnamed combobox and clicking the visible label focused nothing. No
+  visual change.
+
+  Still unnamed, and not addressed here: `RadioWidget` and `CodeEditorWidget` forward the `id` to a
+  `div`, which no `<Label htmlFor>` can name — naming those needs `aria-labelledby` from the template
+  and a route into the editor's own textarea.
+
+- Smoother sidebar motion, and a composer a host can refocus.
+  - The sidebar settles instead of sliding linearly: its geometry transitions run
+    `cubic-bezier(0.32, 0.72, 0, 1)` over 420ms, the off-canvas slide is composited, and
+    all of it drops out under `prefers-reduced-motion`.
+  - `Sidebar` takes `mountAfterEnter`: a heavy panel holds its content back until the slide
+    has finished, rather than mounting into the same commit and blocking every frame of it.
+    Ignored under reduced motion, where there is no transition end to wait for.
+  - `Workbench` marks its two boxes `data-workbench-slot="bar"` / `"panel"`, so a floating
+    surface can measure the space the dock leaves. The root's own rect is the bar alone
+    whatever the state, because the panel is absolutely positioned.
+  - `PromptInput` takes `textareaRef`, publishing its textarea so a host that keeps one
+    composer across layout changes can put the caret back. Published from the ref callback,
+    so it still points at the live element after a host layout restructure recreates it.
+
+- `InputGroup.Addon` keeps its own content width instead of giving up space to the input. The input
+  was `w-full`, so as a flex item its basis was the whole row — flexbox then shrank a sibling addon in
+  proportion to that basis, squeezing even a short badge-plus-label selection to an ellipsis well
+  before the field was full. The input is now `flex-1 min-w-0` and `inline-start` / `inline-end`
+  addons ship `shrink-0`; behaviour is unchanged where there is no addon, and every existing addon
+  holds small non-shrinking content (icons, buttons) so this is a no-op for them. `Combobox`'s rich
+  selected-value addon drops the `max-w-[70%] shrink-0` workaround this replaces, keeping only the
+  `max-w-[70%]` bound needed for an arbitrarily long selection.
+
+  `InputGroup`'s padding and sizing rules now target any descendant `input` / `textarea` instead of
+  only a direct child, so a consumer that wraps the input in its own layout keeps its padding without
+  re-implementing the sizing table by hand. `MultiCombobox` drops the manual `px-4 py-1.5` this
+  replaces, and instead cancels the group's rule on its own nested input (`!px-0 !py-0`) since that
+  input shares a row with chips rather than sitting at the group's own edge.
+
+- `Kbd variant="primary"` and `Kbd.Separator` follow the tooltip chrome they render on. `primary`
+  pinned `bg-white/20` + `text-white`, which is only legible on the legacy dark tooltip. Argo's tooltip
+  is a light popover, so every shortcut hint on it — Kai's "New chat", the SQL editor's panel toggles,
+  flow undo/redo, the sidebar nav — painted white keys on white and vanished, leaving the keys'
+  layout width behind as apparent trailing whitespace.
+
+  Both now consume the muted chrome tokens by default and invert to white only under
+  `[data-tooltip-content="true"]`, the attribute the legacy dark tooltip already marks itself with. The
+  legacy rendering is unchanged. Call sites no longer need the `tw:[&>span]:text-white/70` override
+  that forced the separator white — `Kbd.Separator` handles it.
+
+- `MultiCombobox`'s `allowSelectAll` row now hides itself while a query narrows the list. It always
+  selected the whole item set, but stayed visible during filtering — type `prod`, see three matches,
+  click Select All, end up with all two hundred selected, with nothing on screen saying so. Select All
+  keeps meaning "everything"; the reading it can be confused with is no longer on offer. This matches
+  the legacy `react/common/Select` wrapper, which hid its own Select-All row while searching.
+
+- `PageHeader.Detail`'s documented breadcrumb contract now matches how it's actually used: the
+  `breadcrumbs` chain ends at the entity's parent list/hierarchy and never repeats the entity's own
+  name as a final, non-link crumb — it's already the `title` right below. The prop doc, `AGENTS.md`
+  rules and the `Detail` Storybook examples (Bucket, Table, Workspace, Job, Data App, Shared Code, Add
+  Component, Flow) are updated to the same shape.
+
+- A chart or diagram inside a `ThemeScope` now follows the scope's scheme, and a chart in dark mode
+  keeps readable labels.
+
+  `ThemeScope` re-points the colour tokens for its subtree, but a canvas that bakes colours into
+  markup resolved them from `<html>`: `useThemeAttributes` read the root's `data-theme`, and the
+  token resolvers read `getComputedStyle(document.documentElement)`. A chart in a dark-scoped panel
+  therefore drew a white plot with black labels on a dark surface.
+  - `ThemeScope` publishes its resolved scheme and a container carrying its tokens; `useThemeAttributes`
+    prefers both and folds the container into `cacheKey`, so a palette built before the scope answered
+    is not served afterwards.
+  - `createChannelResolver` / `createTokenResolver` (and the vega, flint and mermaid palettes built on
+    them) take the element to read live `--*` values off, defaulting to `<html>` as before.
+  - The flint palette now fills `ink.text` and `ink.structure` from the tokens. Flint's own defaults
+    assume a light canvas, so axis labels and gridlines were near-black in **any** dark context — not
+    only inside a scope.
+  - The root barrel grows ~70 B with the scope context; the size budget moves 344→345 KB.
+
+- `Timeline` draws its connector line, `Navbar` its accent hairline, and the default `Switch` its keyboard focus ring. All three wrote a pseudo-element variant before another variant — `before:group-data-[variant=solid]/timeline:bg-border`, `before:data-[accent=blue]:bg-sidebar-primary`, `before:focus-visible:ring-4` — which Tailwind compiles to a rule that matches nothing, so none of them had ever rendered for any consumer. Twenty rules were dead. Nothing else changes — no markup, no props. A consumer that already renders these components gains the paint it asked for. `check:css` now fails the build on any class that places a variant after a pseudo-element one, `hover:` and `active:` excepted.
+
+## 11.4.0
+
+### Minor Changes
+
+- The AIKit layer for Kai's redesign (DES-20, DES-170).
+  - `ThemeScope` (new): a subtree pins its own colour scheme regardless of the app's —
+    Kai's panel stays light while its minimized widget is dark. `useThemeScopeContainer`
+    hands portalling components the scope element, and `Popover.Content` now takes a
+    `container` so a portal stays inside the scope that styles it.
+  - `ToolCallStatusHeader` joins AIKit — the tool-call panel header kbc-ui carried,
+    promoted with tests and stories.
+  - `MessageBubble` drops its avatar; a user turn is a plain bubble. `user` is still accepted
+    (deprecated, ignored) so call sites keep compiling.
+  - `Command` takes a `variant`, so a command in a small surface (a popover) can opt out
+    of the full-screen palette styling the theme would pick.
+  - No platform token changes: Kai scopes its own sidebar accent in kbc-ui.
+  - The root barrel grows ~1 KB with the new exports; the size budget moves 342→344 KB.
+
+- `CodeEditor` search matches literal text instead of a compiled pattern, and `findLiteralMatches` / `hasLiteralMatch` ship as utilities.
+
+  A search query is data, not a pattern. Compiling one meant escaping it first and living with V8's
+  ceiling on how large a pattern may be: a query of a few tens of kilobytes — what pasting a document
+  into a find box produces — threw `Regular expression too large` when the pattern was first executed.
+  `findMatches` now scans for the query literally, so escaping and that ceiling are both gone, and it
+  short-circuits before joining the document's rope when the query cannot fit in it.
+
+  `findLiteralMatches(text, query)` returns the start offsets of every case-insensitive occurrence and
+  `hasLiteralMatch(text, query)` answers whether there is one, stopping at the first. Both fold case
+  without changing the length of the string, so the offsets index the caller's own text.
+
+  Two behaviour notes for anyone matching the editor's counts elsewhere: `İ` (U+0130) now reads as a
+  plain `i` rather than matching only itself, and `SearchMatch` no longer carries the matched `text`,
+  which nothing read.
+
+- `Markdown` accepts `remarkPlugins` and `components`.
+  - `remarkPlugins` runs after the built-in GFM one rather than in place of it, so tables, autolinks and task lists keep working whatever a caller adds.
+  - `components` is merged over the built-in element renderers by key. An override replaces that element's renderer rather than wrapping it, so a `table` override loses the design `Table` and an `a` override loses the new-tab treatment for absolute links.
+  - Together they are the seam an app's own inline syntax arrives through — an annotation an agent writes beside a link, read back by a renderer for that element — which is app product knowledge and does not belong in this package.
+  - Both are meant to be held in module constants: `Markdown` re-parses its source on every render, so a caller memoises it, and a prop object built during render defeats that.
+
+- `MarkedText` highlights by literal scan instead of a compiled pattern, and `findLiteralMatches` takes an `isCaseSensitive` option.
+
+  The highlight query was escaped, split on spaces, and joined into one alternation regex — so a
+  space-free paste of a few tens of kilobytes (minified SQL, JSON, base64) exceeded V8's pattern
+  ceiling and threw `Regular expression too large` from a `useMemo`, taking the page down with it.
+  `createMarkedParts` now finds each space-separated term with `findLiteralMatches` and merges the
+  offsets, so no pattern is compiled at all.
+
+  One visible behaviour change: overlapping term matches now merge into one marked run — searching
+  `test testing` marks the whole `testing`, where the alternation used to mark only its `test` prefix
+  and leave `ing` plain. Adjacent matches merge the same way. Case-insensitive matching also folds
+  `İ` (U+0130) to a plain `i`, matching the editor search.
+
+  `escapeStringRegexp` is gone from the package's internals — nothing compiles user text as a pattern
+  anymore.
+
+- `MultiCombobox`: a render-only slot for pinned chips, chip callbacks see the real item type, and a created value stops haunting the list.
+
+  `pinnedChipLabels` renders chips the caller keeps rather than the user — a set of packages the
+  runtime already ships, a role every member has. They sit ahead of the values, outside `maxVisible`,
+  carry no remove button, and never enter `value`.
+
+  `itemToChipLabel` and `itemToChipColor` now receive `Value` instead of `unknown`, so a call site
+  stops narrowing by hand. Existing call sites keep compiling; their `String(...)` wrappers become
+  redundant.
+
+  Created values were kept in a list that never shrank, so a value the user created and then removed —
+  or cleared — stayed in the listbox as an option for the rest of the session, and skewed
+  `allowSelectAll`'s "everything is selected" arithmetic. The list now tracks the selection.
+
+- Add a `hint` slot to `Select` items, and let the top-level `Select` take `aria-label`.
+
+  `hint` renders a trailing muted note in the listbox row — "Default" beside the value the
+  platform falls back to. It sits outside Radix's `ItemText`, so the trigger keeps showing the
+  label alone once the option is picked; because Radix names an option from `ItemText` only
+  (`aria-labelledby`), the hint is wired into the item's `aria-describedby` instead, so a screen
+  reader still reads it.
+
+  `aria-label` was the one trigger a11y prop the convenience wrapper did not forward — it already
+  curated `aria-describedby`, `aria-invalid` and `aria-required`. Selects that stand without a
+  visible `Label` (a filter row, or several selects joined by "OR") need it.
+
+- `UsageStats`: the corner alert badge now accepts a severity.
+
+  `alert` takes `boolean | 'warning' | 'error'` instead of a bare boolean. `'warning'` renders the badge
+  amber for an approaching-limit state that isn't at-limit yet; `'error'` (or the existing bare `true`)
+  keeps the red at-limit color, so existing call sites keep compiling unchanged.
+
+### Patch Changes
+
+- `Button variant="outline"`: the hovered button stops dissolving into the surface behind it.
+
+  Both hover and pressed fills were tints of `transparent` (Tailwind's `bg-<token>/NN`), so hovering
+  replaced the variant's opaque rest fill and the button showed whatever it overlapped — an edge on a
+  flow canvas, the status tint inside an `Alert`. They now `color-mix` into the variant's own rest
+  token (`--card` under legacy chrome, `--background` under argo), which is the same colour on the
+  surface the variant assumes and stays opaque off it.
+
+  Argo compounded that by keeping `border-input` on hover while tinting the fill toward it, so the
+  button's edge contrast _dropped_ as the user reached it — measured 1.42:1 → 1.25:1 in light and
+  2.28:1 → 1.62:1 in dark, against its own fill on a `--muted` surface. Its hover now steps the
+  border to `--muted-foreground` (4.00:1 / 5.24:1), the treatment legacy already shipped. A tint
+  cannot carry that signal: brand primary stays within ~1.5:1 of a light surface at any opacity that
+  still reads as a tint. `--primary` stays reserved for `focus-visible`, so hover and focus remain
+  distinguishable.
+
+  Consumers overriding the hover fill per call site to work around the leak can drop those
+  overrides. `packages/design/AGENTS.md` records the underlying rule in the Layer-0 chrome contract.
+
+- Security patches for transitive dependencies: qs 6.16.0 in api-client, mermaid 11.17.2 and dompurify
+  3.4.14 in design.
+
+  No API or behaviour change in either package.
+
+- Every theme-aware subpath entry stops carrying `@keboola/brand-registry`.
+
+  `ThemeProvider/defaults.ts` imported two legacy brands for value, only to build a two-element array
+  of their ids — and that array had exactly one consumer, the `renderWithTheme` test helper. Because
+  `useThemeAttributes`, `useBrandState` and `useColorSchemeState` each read a constant from
+  `defaults.ts`, that one import put the whole registry in the graph of every entry that reads the
+  live theme.
+
+  The ids now live at the helper that uses them, so `defaults.ts` imports `Brand` as a type only. No
+  export moved and no behaviour changed — `keboolaLegacySidebar` / `keboolaLegacyTopnav` still resolve
+  from the root barrel for the consumers that render them.
+
+  What a consumer pays for a themed subpath, brotlied:
+
+  | Entry                             |     Before |      After |     Δ |
+  | --------------------------------- | ---------: | ---------: | ----: |
+  | `@keboola/design/vega`            |    61.9 kB |     0.9 kB | −98 % |
+  | `@keboola/design/editors`         |   312.5 kB |   252.0 kB | −19 % |
+  | `@keboola/design/flint`           |   439.7 kB |   380.2 kB | −14 % |
+  | `@keboola/design/rjsf`            |   490.2 kB |   430.6 kB | −12 % |
+  | `@keboola/design/markdown-editor` | 1 333.9 kB | 1 272.0 kB |  −5 % |
+  | `@keboola/design/mermaid`         | 1 200.4 kB | 1 140.1 kB |  −5 % |
+  | `{ useAppForm }` from the root    |   135.2 kB |    73.9 kB | −45 % |
+
+  The root barrel is unchanged — it re-exports the brands deliberately, so an app that renders one
+  still pays for it once. The per-entry `size-limit` budgets drop to match, so they now measure the
+  entry rather than a shared dependency.
+
+- `Modal.Footer` now lays its own actions out: right-aligned, 8px apart.
+
+  The footer owned only horizontal padding, so a bare `<Modal.Footer>` fell back to block flow — its
+  buttons sat left-aligned, separated by nothing but collapsed JSX whitespace. Nearly every footer in
+  this repo is bare, so that was the default look; a handful re-declared `tw:flex tw:justify-end
+tw:gap-2` at the call site. Consumers can drop those.
+
+  Overriding the arrangement still works through `className`, but `cn` runs tailwind-merge, which
+  displaces only within a conflict group: `tw:justify-between` replaces `justify-end`, while
+  `tw:flex-col` leaves `items-center` and the gap in place, so a stacked footer wants
+  `tw:items-stretch` alongside it. The footer imposes no width on its children, so one that should
+  fill the row carries `tw:w-full` itself (`Button block`, `ButtonGroup variant="block"`).
+
+  One footer in this repo wanted the stacked arrangement — `wr-google-sheets`' `SheetModal`, which
+  puts a saving message above its buttons — and is the only one still passing layout classes.
+
+  `@keboola/kbc-ui` and `@keboola/control-ui` are private — nothing to release for them; they are
+  listed because their call sites changed.
+
+- `PromptInput`: `autoFocus` no longer scrolls ancestors to reveal the textarea.
+
+  The prop was forwarded as the DOM attribute, and the browser's autofocus scrolls every scrollable
+  ancestor toward the element. A composer mounting inside a panel that is still sliding in — kbc-ui's
+  Kai rail opens this way — sits off-canvas at focus time, so the page scrolled sideways toward it,
+  shoving the whole content left until the slide finished and the overflow clamp snapped it back.
+  The focus is now applied imperatively on mount with `focus({ preventScroll: true })`: same focus,
+  same mount-only semantics, no ancestor scrolling.
+
 ## 11.3.0
 
 ### Minor Changes