@keboola/design 11.2.0 → 11.4.0

package/AGENTS.md

@@ -20,18 +20,20 @@ Working **on** the package (commands, layer boundary, token surface, the FA→Lu
 
 The root barrel (`@keboola/design`) is **not** the whole package. These live only at their subpath — an agent scanning the barrel (or `dist/index.d.ts`) misses them and wrongly concludes the capability is absent. The "always import from the package root" rule above holds for everything in the barrel; the rows below are the **deliberate exceptions** — import them from the subpath, not the root.
 
-| Subpath                           | Exports                                                            | Reach for it when                                                |
-| --------------------------------- | ------------------------------------------------------------------ | ---------------------------------------------------------------- |
-| `@keboola/design`                 | Components, blocks, hooks, `ThemeProvider`, forms                  | Default — everything below the listed exceptions                 |
-| `@keboola/design/icons`           | Lucide re-export + Keboola-custom SVG icons                        | Any icon (`import { ChevronDown } from '@keboola/design/icons'`) |
-| `@keboola/design/editors`         | `CodeEditor`, `SqlEditor`, `MergeEditor`                           | Real code editing — pulls the ~1.3 MB CodeMirror bundle          |
-| `@keboola/design/charts`          | `LineChart`, `BarChart`, `AreaChart`, `PieChart`, `ChartContainer` | Data-viz — themed recharts wrappers; **not** in the root barrel  |
-| `@keboola/design/mermaid`         | `MermaidDiagram` (`{ code }`)                                      | Render a Mermaid diagram — **not** in the root barrel            |
-| `@keboola/design/markdown-editor` | `MarkdownEditor`                                                   | Markdown editing — **not** in the root barrel                    |
-| `@keboola/design/rjsf`            | `RjsfSchemaEditor`, `useRootFormData`                              | JSON-Schema-driven config forms (RJSF) — pulls `@rjsf/*` + ajv   |
-| `@keboola/design/testing`         | `renderWithTheme`                                                  | Unit tests that need a component wrapped in `ThemeProvider`      |
-| `@keboola/design/styles`          | Tailwind-extending stylesheet                                      | App entry, Tailwind consumers (**default**)                      |
-| `@keboola/design/styles/compiled` | Pre-compiled CSS (~176 KB)                                         | App entry, when you cannot run Tailwind                          |
+| Subpath                           | Exports                                                            | Reach for it when                                                         |
+| --------------------------------- | ------------------------------------------------------------------ | ------------------------------------------------------------------------- |
+| `@keboola/design`                 | Components, blocks, hooks, `ThemeProvider`, forms                  | Default — everything below the listed exceptions                          |
+| `@keboola/design/icons`           | Lucide re-export + Keboola-custom SVG icons                        | Any icon (`import { ChevronDown } from '@keboola/design/icons'`)          |
+| `@keboola/design/editors`         | `CodeEditor`, `SqlEditor`, `MergeEditor`                           | Real code editing — pulls the ~1.3 MB CodeMirror bundle                   |
+| `@keboola/design/charts`          | `LineChart`, `BarChart`, `AreaChart`, `PieChart`, `ChartContainer` | Data-viz — themed recharts wrappers; **not** in the root barrel           |
+| `@keboola/design/mermaid`         | `MermaidDiagram` (`{ code }`)                                      | Render a Mermaid diagram — **not** in the root barrel                     |
+| `@keboola/design/flint`           | `FlintChart` (`{ code }`)                                          | Render a Flint chart (JSON spec, Vega-Lite) — **not** in the root barrel  |
+| `@keboola/design/vega`            | `vegaTheme(scheme)`, `useVegaTheme()`                              | Brand + scheme aware Vega-Lite `Config` for any chart you render yourself |
+| `@keboola/design/markdown-editor` | `MarkdownEditor`                                                   | Markdown editing — **not** in the root barrel                             |
+| `@keboola/design/rjsf`            | `RjsfSchemaEditor`, `useRootFormData`                              | JSON-Schema-driven config forms (RJSF) — pulls `@rjsf/*` + ajv            |
+| `@keboola/design/testing`         | `renderWithTheme`                                                  | Unit tests that need a component wrapped in `ThemeProvider`               |
+| `@keboola/design/styles`          | Tailwind-extending stylesheet                                      | App entry, Tailwind consumers (**default**)                               |
+| `@keboola/design/styles/compiled` | Pre-compiled CSS (~176 KB)                                         | App entry, when you cannot run Tailwind                                   |
 
 ### design ≠ shadcn — API deltas
 
@@ -156,6 +158,15 @@ Charts ship from the **`@keboola/design/charts`** subpath (recharts under the ho
 
 Reach for it when **two or more series of similar magnitude sit far from zero** and their difference is the story — actual vs target, used vs quota. Don't reach for it for a **single series whose magnitude the reader is meant to judge**: zooming the axis turns ordinary noise into a dramatic trend. And it is deliberately absent from `BarChart` / `AreaChart` — a line encodes value by position, so the baseline is just a viewport, but a bar's length and an area's fill are measured _from_ the baseline, and truncating those makes the geometry misstate the ratios. If an area chart needs a non-zero baseline, it is a line chart. (`ChartContainer` + a raw recharts chart remains the escape hatch for anything the wrappers don't model.)
 
+**Rendering a Vega-Lite spec yourself?** Take the config from **`@keboola/design/vega`** instead of hand-writing colours — `useVegaTheme()` in a component, `vegaTheme(scheme)` outside one. It carries the transparent background, the semantic axis/legend/title chrome, and `range.category` = `--chart-1..5` in series order, so a spec from anywhere lands on the same palette as the recharts wrappers and follows the active scheme and brand. Pass it as the compile/render `config`; a range set on the spec's own scale still wins.
+
+```tsx
+const config = useVegaTheme();
+const { spec } = compile(vegaLiteSpec, { config });
+```
+
+The config holds resolved `rgb(…)` strings, not `var()` references — vega does its colour maths in JS and never consults the stylesheet. So a chart rendered once must be re-rendered when the config identity changes; `useVegaTheme` gives you a new one on every scheme or brand switch.
+
 ### Layout
 
 **No** `Stack` / `Flex` / `Box` component exists, by design — shadcn doesn't ship them, and adding wrappers creates a third way to do layout. Use Tailwind utility classes directly.
@@ -176,7 +187,7 @@ Vertical rhythm: prefer `tw:gap-*` on a flex column parent over `tw:mt-*` on chi
 
 **`Card` padding: the root owns it, or the slots do — never both.** `Card padding` (default `small`) pads the root and gaps its slots, which is right for a plain content card. Set `padding="none"` when a slot must bleed to the card edge — a table, an `EmptyState`, or a header with a rule under it — and the root also drops its gap so the bands sit flush. In that mode the slots pad themselves: `Card.Header divider` becomes its own padded band with a full-bleed bottom rule, and `Card.Content padded` takes the standard body padding. `Card.Header` distributes its children by `layout`: **`row`** (default) pushes them apart, title left and actions right; **`inline`** keeps them together for a title with an icon or badge; **`stack`** puts a description under the title. Don't hand-roll these with `className` — `cva` here concatenates rather than tailwind-merges, so a `tw:justify-start` in `className` will not reliably beat the `row` default. Use the prop.
 
-**Page gutter: `AppShell.Main` owns it, with an opinionated default.** `AppShell.Main` applies a default page gutter (`tw:p-6`) so content looks right out of the box. Because `cn` is tailwind-merge, override it from the call site when the app owns its own gutter — e.g. `className="tw:p-0"` (kbc-ui does this; it centralizes the gutter on its own shell wrapper). `PageLayout` still adds **no** gutter of its own, so header and content align inside whatever gutter `AppShell.Main` provides.
+**Page gutter: `AppShell.Main` owns it, on a wrapper inside its scroll container.** `AppShell.Main` applies a default page gutter (`tw:p-6`) so content looks right out of the box. Override it from the call site through **`contentClassName`** — e.g. `contentClassName="tw:p-0"` (kbc-ui does this; it centralizes the gutter on its own shell wrapper). **Never put a `p-*` in `className`**: that lands on the scroll container, and sticky insets resolve against the nearest scrollport's _padding box_, so it parks every `position: sticky` descendant — `Table.Header` included — one gutter below the visible top edge, with scrolled content showing through the strip above. `className` is still the right place for the scroll behaviour itself (`tw:overflow-visible`). `PageLayout` adds **no** gutter of its own, so header and content align inside whatever gutter `AppShell.Main` provides.
 
 ```tsx
 // Default gutter — nothing to add:
@@ -185,7 +196,7 @@ Vertical rhythm: prefer `tw:gap-*` on a flex column parent over `tw:mt-*` on chi
 </AppShell.Main>
 
 // Own your gutter — opt out and add your own:
-<AppShell.Main className="tw:p-0">
+<AppShell.Main contentClassName="tw:p-0">
   <div className="tw:px-8 tw:py-6">{/* custom gutter */}</div>
 </AppShell.Main>
 ```
@@ -486,6 +497,19 @@ Both router wirings (TanStack Router, and a custom named router) are in [`RECIPE
 />
 ```
 
+**Pinned chip in a `MultiCombobox`** — a chip the control shows but the user does not own (a set of packages the runtime already ships, a role every member has). `pinnedChipLabels` is a render-only slot, so nothing enters `value`: there is no sentinel to strip on save and the control's own counting never sees a non-item.
+
+```tsx
+<MultiCombobox
+  allowCreate
+  value={packages}
+  onValueChange={save}
+  pinnedChipLabels={['Default packages']}
+/>
+```
+
+Don't fake one by prepending a sentinel to `value` — that costs the caller a strip on every change plus a label branch, and leaks the sentinel into the primitive's counting.
+
 **Sheet** — use `Sheet.Header title="…" description="…"` for a styled title + close icon; do **not** hand-roll with the raw `Sheet.Title`, which renders an unstyled `<h2>`. `Sheet.Body` provides horizontal padding only (`tw:px-4`) — add your own vertical rhythm/gap:
 
 ```tsx
@@ -524,6 +548,10 @@ Layer-0 colour usage splits into three buckets.
 
 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.
 
+An **opacity modifier composites over `transparent`, not over the element's own rest fill.** On a control that is opaque at rest (`tw:bg-card`, `tw:bg-background`) a `tw:hover:bg-<token>/NN` therefore _replaces_ that fill, and the control shows whatever it overlaps — a flow-canvas edge, an `Alert` tint. Mix the state fill into the control's rest token instead: `tw:hover:bg-[color-mix(in_oklab,rgb(var(--muted-foreground))_15%,rgb(var(--card)))]`. Use the raw `--*` triples — `--color-*` is `@theme inline`, build-time only, and an unresolved one invalidates the declaration into `transparent`. A control that is **transparent at rest** (menu item, ghost button, table row) is the case the modifier is for; leave those alone.
+
+A tint also cannot carry a **state change** on a light surface — a brand-primary tint stays within ~1.5:1 of the surface at any opacity that still reads as a tint. Step the border for that, and keep the roles apart: hover steps the chrome border (`border-input` → `border-muted-foreground`), `focus-visible` owns the brand border.
+
 **Status — themeable under argo, with AA-legible defaults.** The four semantic states — `success`, `warning`, `info`, and `destructive` (used for "error") — are brand-overridable tokens, not fixed scales. Alert `variant`, `HelpBlock` / field-error state, `ErrorState`, and `Stepper` status read them, so a brand recolours every status surface at once. **Rule:** consume the token as **tint + text/icon** — `tw:bg-<role>/10` for the surface, `tw:text-<role>` / `tw:border-<role>/25` for the mark. The default token values ship dark enough to be AA (≥4.5:1) as text/icon on their own tint, in light **and** dark mode — a brand overriding them should preserve that. Avoid solid fills with a white foreground (`tw:bg-<role>` + white): the token flips light in dark mode, so white-on-token fails there. A brand _can_ recolour "error" away from red — that is now allowed; the accessible-on-tint contract is what must hold, not the hue. **Legacy exception:** the themeable treatment is gated to argo (`data-[argo=true]:` / `group-data-[argo=true]/…:`). Under legacy chrome (`useArgoDesign()` → `false`) Alert and `ErrorState` keep their original fixed status scales (`blue-*`/`green-*`/`warning-*`/`error-*`), and the legacy brand retains its original status token hues — so legacy status colour is unchanged.
 
 **Decorative — stays fixed across brands.** The non-semantic palette that encodes category rather than state: `Badge` decorative colours (`purple`, `cyan`, `teal`, `blue`, …), chart colours, decorative tag palette. **Rule:** keep using primitive scales (`purple-500`, `cyan-500`, …). These are an identity/category contract with the consumer and do not re-skin.

package/CHANGELOG.md

@@ -1,5 +1,429 @@
 # @keboola/design
 
+## 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
+
+- `AppShell.Main` takes `clampContent`, which bounds its content wrapper to the shell's height
+  instead of letting it grow with the content. Pass it when the page runs its own `overflow-auto`
+  scroller — a `flex-1` descendant then clamps to the scrollport rather than to the content, so the
+  page's scroller is the element that scrolls. Default behaviour is unchanged; no migration.
+
+- `AppShell.Main` no longer carries its page gutter on the scroll container.
+
+  Sticky insets resolve against the nearest scrollport's padding box, so the gutter on the scrolling
+  element parked every `position: sticky` descendant one gutter below the scrollport's visible top
+  edge — `Table.Header` included. Scrolled rows showed through the strip above the header, on every
+  table in every app on this shell.
+
+  The gutter now sits on a content wrapper inside `Main`, and `contentClassName` overrides it.
+
+  **Migration** — only if you override `Main`'s padding through `className`:
+
+  ```diff
+  - <AppShell.Main className="tw:p-0">
+  + <AppShell.Main contentClassName="tw:p-0">
+  ```
+
+  With `asChild`, your element stays the scroll container and the gutter wrapper is nested inside it,
+  so the padding that used to land on your element now lands on a child `<div>`.
+
+  `className` still lands on the scroll container, so an `overflow-visible` reset stays where it is.
+  Overrides that mix the two need splitting:
+
+  ```diff
+  - <AppShell.Main className={cn('tw:p-0', { 'tw:overflow-visible': isLegacy })}>
+  + <AppShell.Main
+  +   className={cn({ 'tw:overflow-visible': isLegacy })}
+  +   contentClassName="tw:p-0"
+  + >
+  ```
+
+- `appShellSlotSelector(slot)` builds the CSS selector for a shell slot's `data-app-shell-slot`
+  attribute, so a consumer measuring or observing `AppShell.Main` from outside the shell no longer
+  hand-types the attribute. Renaming it then breaks the build instead of silently matching nothing.
+
+  The slot names are exported as `AppShellSlot`.
+
+- New lazy subpath export `@keboola/design/flint`: `FlintChart` renders a
+  [flint-chart](https://github.com/microsoft/flint-chart) JSON spec
+  (`ChartAssemblyInput`) to a static SVG via the Vega-Lite backend, displayed
+  through `ZoomableSvg` with the same zoom/fullscreen/export UX as
+  `MermaidDiagram`. `flint-chart`, `vega` and `vega-lite` ship only in the flint
+  chunk — the root barrel and every existing entry are unaffected.
+
+- New subpath export `@keboola/design/vega`: `vegaTheme(scheme)` and
+  `useVegaTheme()` hand out the design system's chart look as a plain Vega-Lite
+  `Config` — transparent background, semantic axis/legend/title chrome, and
+  `range.category` filled with `--chart-1..5` in series order. Any consumer that
+  compiles or renders a Vega-Lite spec is now on-brand and follows the active
+  colour scheme and brand; previously the config was private to `FlintChart`, so
+  only a Flint spec could reach it. `FlintChart` imports it from the new module
+  and keeps only the Flint-specific series plumbing. Nothing about the rendered
+  Flint chart changes.
+
+  The config holds resolved `rgb(…)` strings rather than `var()` references —
+  vega does its colour maths in JS and never reads the stylesheet — so rebuild it
+  when the scheme or brand changes; `useVegaTheme()` does that for you.
+
+### Patch Changes
+
+- Make the AI Kit `Question` card follow the colour scheme and the brand.
+
+  Every colour in the component was a primitive: the card was `bg-neutral-50`, its option
+  preview `border-neutral-200` + `bg-white`, the labels `text-neutral-800`/`-700`, the
+  header and step counter `text-neutral-500`, the row hovers `hover:bg-neutral-100` and the
+  footer rule `border-neutral-100`. None of those participate in the `[data-theme='dark']`
+  variable swap, so the whole card rendered as a light slab on the dark page — carrying the
+  dark scheme's light ink, which is light-on-light — and no customer brand reached any of
+  it.
+
+  They are now semantic tokens throughout: the card is `bg-card` + `text-card-foreground`,
+  the preview inset `bg-muted` + `text-foreground` + `border-border`, secondary text
+  `text-muted-foreground`, hovers `hover:bg-accent`, rules `border-border`. Labels that
+  just want the card's default ink now inherit it instead of restating a colour.
+
+  The card is `bg-card` rather than `bg-muted` because under the dark scheme `--muted` and
+  `--popover` are the same value (`` `#26262d` ``), so a muted card would collide with the
+  popover surface it can sit next to; `--card` (`` `#222228` ``) stays distinct from both
+  that and `background`. The inset takes `bg-muted`, matching how the AI Kit paints code
+  surfaces elsewhere.
+
+  Covered by a `Follows scheme (light)` / `Follows scheme (dark)` story pair that measures
+  rendered colours in a real browser: both painted surfaces must match the page's light/dark
+  polarity, and the question title and preview code must clear AA against the surface they
+  actually sit on. Reverting either fill fails the dark story.
+
+- Make `CodeEditor` and `SqlEditor` legible under the dark colour scheme.
+
+  The theme called `githubLightInit` in both schemes, so only the editor chrome followed
+  the scheme while every syntax colour stayed a light-theme value. Measured on the two
+  dark surfaces — the plain variant paints on `background`, `variant="field"` on `muted` —
+  all eleven stock tokens failed AA on `muted` and only `atom`/`bool` cleared `background`.
+  The palette is now picked by scheme, and `githubDarkInit` clears AA for every token on
+  all four surfaces an editor paints on (tightest: `comment` at 4.89:1).
+
+  Also a light/dark pair for the two overrides that were single values: functions
+  (`purple[600]` → `300`, from 2.89:1) and special vars (`cyan` → `300`, from 3.81:1).
+  Special vars additionally move `700` → `800` in **light**, where the field surface was
+  4.45:1 — the one visible light-scheme change.
+
+  The surfaces those editors paint follow, since a dark palette on a light slab is worse
+  than the light palette was:
+  - the unified merge wash forced `colors.white`, where the dark `foreground` is 1.25:1;
+  - search matches and the SQL run/error lines were opaque light pastels, and light search
+    matches were themselves below AA at 3.90:1 (now 5.42:1);
+  - the legacy `variant="field"` surface was a fixed `neutral[100]`, where the dark
+    `foreground` is 1.09:1;
+  - the read-only wash used `secondary`, which resolves lighter than `muted` under dark.
+
+  `caret` and `selectionMatch` are now pinned rather than inherited from whichever
+  initialiser ran — the caret was invisible in dark, painted black on the dark page.
+
+  Light gains four AA fixes of its own, each to the nearest step of our ramp in the same hue:
+  `keyword` (4.38:1 → 5.96:1), `comment` (4.40:1 on the field surface → 6.15:1), markdown
+  `quote` (4.43:1 → 7.15:1) and `invalid` (4.44:1 on the read-only wash → 7.81:1).
+
+  One light colour is deliberately left: `atom`/`bool` — JSON `true`/`false`/`null` — at
+  3.34:1. The darker orange that would clear AA is the amber already carrying `string`, so
+  JSON would render `true` and `"text"` alike; it needs a hue rather than a ramp step, which
+  is a design call rather than a measurement.
+
+  `CONTRAST-AUDIT.md` grows an editor-palette section: every tag, both schemes, all four
+  surfaces an editor is painted on. Dark has no sub-AA rows; light has only the one above.
+
+- Add `withCompletions` to `CodeEditor`, for a field where nothing should be completed.
+
+  An editable editor installs `autocompletion()`, so any language that publishes a word
+  list through language data opens a popup without the caller asking for one. Shell is the
+  only such mode we use as a stand-in for freeform text: `text/x-sh` offers 88 words —
+  `if`, `export`, plus `ls`, `curl`, `sudo`, `vim`, `zsh` and the rest of the command list.
+  `withCompletions={false}` silences every source, the language's included.
+
+  The gate only works because the plugin is now installed once. `basicSetup` was adding a
+  second, option-less `autocompletion()` on top of the one each editor installs itself, so
+  `CodeEditor`'s `readOnly ? [] : [autocompletion()]` had been deciding nothing since it was
+  written, and `SqlEditor`'s configured copy from `installExtensions` was competing with an
+  unconfigured one. `buildBasicSetup` turns basicSetup's off and leaves each editor its own.
+
+  A read-only editor therefore no longer gets the plugin at all, which is what that line
+  always claimed: until now Ctrl-Space could open a popup on a viewer.
+
+- Update the CodeMirror suite (`@codemirror/view` 6.43.9, `@codemirror/commands` 6.11.0, `@uiw/codemirror-theme-github` 4.25.11) to pick up the upstream `posAtCoords` and Firefox 153+ selection fixes behind the editor crashes on click and drag-select
+
+- The filled primary button clears WCAG-AA in the dark colour scheme.
+
+  Under `[data-theme='dark']` the default filled `Button` rendered white ink on the brand blue
+  (`--primary`, `#1f8fff`) at 14px / weight 500 — **3.27:1**, which axe-core reports `serious` and
+  which AA wants at 4.5:1. It was not one component's problem: every filled primary control shared
+  the pairing, and `components-button--default` only looked clean because that story renders the
+  tinted variant. The light scheme was never affected (white on `#2563eb` is 5.17:1).
+
+  The **label** carries the fix, not the fill: `--primary` is the brand's own colour, so darkening it
+  would cost brand fidelity and make `--primary` worse as link text on the dark background. Dark
+  `--primary-foreground` and `--sidebar-primary-foreground` become a hue-matched near-black
+  (`10 26 43`, i.e. `#0a1a2b`) — **5.38:1** — which is the pairing `gargoola`, `keboola-portal` and
+  `oncall` already ship in their own `colorsDark`. `keboola`'s `colorsDark.primaryForeground` moves
+  with the stylesheet; brands without a `colorsDark` block (`example-customer`, both legacy brands)
+  inherit it. Measured on a running Storybook, the three stories that carried the violation —
+  `components-button--block`, `patterns-modalform--default`, `patterns-authscreen--signed-out` —
+  now report zero axe `color-contrast` violations in dark for both `keboola` and `example-customer`.
+
+  `ToastAction` consumed `--primary-foreground` as its chip _surface_ rather than as ink on a primary
+  fill, so it takes a fixed `bg-white` instead. All four non-`default` toast variants are painted with
+  a scheme-blind primitive (`bg-error-550`, `bg-blue-600`, `bg-green-700`, `bg-warning-550`), so the
+  chip on them must not move with the scheme. Under `keboola` this renders identically to before; under
+  `gargoola`, `keboola-portal` and `oncall` — which already ship near-black dark `primaryForeground` —
+  the chip was a dark block on those fills, so for them it is a fix rather than a no-op.
+
+  Both dark `--sidebar-primary-foreground` and its light counterpart become `var(--primary-foreground)`,
+  matching `--sidebar-primary: var(--primary)` — the sidebar badge's ink now genuinely follows the
+  button's instead of repeating it as a literal.
+
+  Regression cover: `checkInteractiveContrast(keboola)` no longer reports
+  `dark:primary/primaryForeground`, and a new `tokenBlocks.test.ts` derives every `--x` /
+  `--x-foreground` pair out of `styles.css` — 13 per palette — and measures each against AA, so a
+  token pair added later is covered without editing the test. `CONTRAST-AUDIT.md` reports the same
+  ratios but cannot fail on one, so the gate is the test. The CSS block parser it needs is lifted out
+  of `scripts/contrast-audit.ts` into `src/tokenBlocks.ts` — one parser, now type-checked, and it
+  throws on an unclosed block instead of parsing to EOF. `KNOWN_BELOW_AA` records the ratio of each
+  pair still below AA (`light:muted` 4.34, `dark:destructive` 3.91, `dark:info` 2.37, `dark:success`
+  2.01) and asserts it both ways, so a pinned pair cannot quietly get worse or stay pinned once fixed.
+
+  `contrast.test.ts` also picks up `oncall`, which had no contrast coverage at all; its one residual
+  (`light:accent/accentForeground`, 3.74:1) is now pinned.
+
+- Paint native chrome in the theme the app pinned, not the operating system's.
+
+  `color-scheme` was declared nowhere, so a browser drew light-scheme scrollbars, spinners and form controls over a dark page — most visibly as a pale band along the bottom edge of any scrolling `Modal.Body`. `:root` now declares `light` and `[data-theme='dark']` declares `dark`, per theme rather than `light dark`, so the OS preference cannot override what `ThemeProvider` chose.
+
+  Embeds are held neutral. `color-scheme` inherits, and a third-party widget that ships a transparent body declares no scheme of its own; when an iframe element's scheme and its document's disagree, the browser stops honouring that transparency and paints the embedded canvas opaque. Left alone, the Jira Service Desk launcher became a white tile over the dark page.
+
+- A Flint chart with a quantitative colour renders its data instead of solid black.
+
+  Every colour in the Flint theme was serialized space-separated (`rgb(31 143 255)`), and vega parses colours with d3-color 3.1, which answers `null` for that form. A flat fill survived it — the string reaches the SVG attribute and the browser parses it — but the sequential ramp behind a quantitative `color` field did not: both endpoints collapsed and the chart painted `rgb(0, 0, 0)`. The theme now emits the comma-separated form, and an integration test renders a heatmap through the real pipeline to hold it.
+
+- `AIKit/Markdown` code surfaces follow the colour scheme and the brand.
+
+  Fenced blocks and inline code were painted with `neutral-50` / `neutral-800`, literals that cannot take part in the `[data-theme='dark']` variable swap. In dark mode `prose-invert` flipped the surrounding text to light while the pinned fill stayed near-white, leaving inline code unreadable. Both now use the semantic `muted` / `foreground` pair, the same one the stylesheet already gives a prose blockquote.
+
+  Typography's inverted palette pinned the ink of a fenced block and of code in a quote to `#c7254e` regardless of the fill beneath it — 2.72:1 once that fill follows the dark scheme. Both now inherit the surface they sit on, so the ink moves with the fill.
+
+- `MultiCombobox` renders its Base UI root with `autoHighlight`, matching `Combobox`. Without it
+  nothing was highlighted while filtering, so Enter closed the popup without selecting — a typed
+  free-form value was dropped silently when `allowCreate` was on.
+
+- Legacy (non-argo) `Select` chrome now follows the colour scheme.
+
+  `Select.Trigger` and `DateRangePicker`'s trigger share `overlayTriggerVariants`, whose `primary`
+  variant painted a fixed white fill with `neutral-800` ink and a `neutral-200` edge. The `neutral`
+  ramp is scheme-blind — `[data-theme='dark']` redefines only the semantic tokens — so wherever a
+  subtree renders legacy chrome, dark mode left the trigger as a white slab with near-black text
+  inside a dark panel. It now uses `input-background` / `foreground` / `input`, the same trio the
+  `primary` `InputGroup` beside it already used, so a trigger and an input in one row stay the same
+  colour.
+
+  The highlighted option in `Select` and `Combobox` had the matching defect: a fixed `neutral-100`
+  fill under a scheme-following `text-foreground`, leaving the label at roughly 1.05:1 in dark. It
+  now uses the `secondary` pair, which carries its own foreground. (`muted` is not usable there — in
+  dark it equals `popover`, so the band would disappear into the listbox instead.) `Combobox`'s check
+  indicator moves with the label it pairs with.
+
+  Scope: only the `primary` variant. `secondary` keeps its fixed `neutral-100` fill under
+  `neutral-800` ink and stays light-pinned in dark.
+
+  Light-scheme note: the trigger fill is unchanged (`input-background` resolves to white), but its
+  ink and border now come from the brand's `foreground` / `input` slots instead of the `neutral`
+  ramp, and the option highlight from `secondary` instead of `neutral-100`. Storybook visual
+  baselines for `Select`, `Combobox` and `DateRangePicker` move accordingly.
+
+- `Truncated` now ellipsizes and reveals its tooltip when the text cannot wrap
+
+  `-webkit-line-clamp` draws its ellipsis only on text it wrapped itself, so text that
+  cannot wrap — an inherited `white-space: nowrap`, which `Button`'s non-legacy base class
+  set applies — was cut off mid-word with no ellipsis at all. Truncation is now also marked
+  with `text-overflow: ellipsis`, which covers the single-line case; the wrapped case is
+  unchanged.
+
+  The tooltip had the matching gap: overflow was measured on the vertical axis only, so a
+  single unwrappable line never counted as truncated and the full text stayed unreachable.
+  It is now detected on either axis.
+
+- Updated dependencies:
+  - @keboola/codemirror-lang-sql@0.7.3
+  - @keboola/brand-registry@1.9.4
+  - @keboola/tailwind-config@1.1.2
+
 ## 11.2.0
 
 ### Minor Changes