@keboola/design 11.4.0 → 11.6.0

package/CHANGELOG.md

@@ -1,5 +1,388 @@
 # @keboola/design
 
+## 11.6.0
+
+### Minor Changes
+
+- `MarkdownTable` ships from `AIKit`: a table in an answer with the fact that it is cut off on the right said out loud. It draws a rail above the grid for the host's own actions, a fade at the cut edge that clears at the end of the scroll, and — once the table is past 1.5× the width it has — an `Open wider` action. Where wider leads is the host's: the action is a prop (`onExpand`), so a docked panel can hand it its own fullscreen switch and a standalone app a modal, and a host with nowhere wider to go omits it and keeps the fade. `surface` names the token the host paints behind the table (`card`, the default, or `background`), which is the colour the fade ends in — naming the wrong one draws a contrasting strip over the cells instead of hiding them. The table passed in has to keep its intrinsic width (`tw:min-w-max`): `Table` is `w-full` with auto layout, so a grid left to wrap into its column never overflows and neither affordance can appear.
+
+  `FullScreenModal` now moves focus into itself when it opens and returns it on close. Its `onEscapeKeyDown` is a `keydown` on the modal element, so until focus was inside, Escape reached nothing and keyboard readers went on walking the page behind. Focus is left alone where the modal's own content has already claimed it, and Escape is now answered only by the modal it was pressed in — a nested modal is portalled beside its parent but React routes its events up the logical tree, so one keypress used to dismiss both. Which modal that is comes off the DOM, where the nesting is not a lie, rather than from `stopPropagation`: a synthetic `stopPropagation` also stops the native event, and React mounts a portal's listeners on `document.body`, so it would cut off every `document`-level `keydown` handler on the page. This is not yet a focus trap: Tab still leaves for the obscured page.
+
+- `Progress` gains `warning` and `error` variants, on the same ramps `Badge` maps `orange` and `red` to, so a meter can carry the state its label already names
+
+### Patch Changes
+
+- `ThinkingIndicator` now announces itself as a live region, so a screen reader hears that an agent's turn is in flight rather than only seeing the spinner.
+
+- Retry a failed diagram chunk instead of rendering source for the rest of the session
+
+  `Markdown` loaded `MermaidDiagram` and `FlintChart` through `lazy()`, which memoizes the settled
+  import for the life of the page. One failed fetch — a dev server restarting, a stale tab after a
+  deploy, a flaky network — left every later `mermaid` and `flint` fence in that tab rendering as
+  raw source until a full reload. The import is now attempted per mount and the failed promise is
+  cleared, and a block that fell back to source carries a Try again button — so one bad fetch costs
+  that one block rather than the session.
+
+- `formatPercentage` prints whole numbers from 1% up, keeping one decimal only below 1%
+
+## 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