@keboola/design 11.2.0 → 11.3.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>
 ```

package/CHANGELOG.md

@@ -1,5 +1,259 @@
 # @keboola/design
 
+## 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

package/COMPONENT-API.md

@@ -483,7 +483,7 @@ Source: `src/components/BrandLogo/BrandLogo.tsx`
 
 Source: `src/blocks/AppShell/AppShell.tsx`
 
-> Compound app-root shell that follows the active brand (sidebar vs top-nav). Subcomponents: `AppShell.Sidebar`, `AppShell.Header`, `AppShell.Aside`, `AppShell.Main`. `AppShell.Main` owns the default page gutter (`tw:p-6`) — override with `className="tw:p-0"`. `AppShell.Header` and `AppShell.Aside` take `flush` — pass it when the slot hosts a chrome component that paints itself (`Navbar`, `Sidebar side="right"`), so the slot drops its own padding, background and border instead of insetting the child. Native `<div>` attributes.
+> Compound app-root shell that follows the active brand (sidebar vs top-nav). Subcomponents: `AppShell.Sidebar`, `AppShell.Header`, `AppShell.Aside`, `AppShell.Main`. `AppShell.Main` owns the default page gutter (`tw:p-6`) on a wrapper inside its scroll container — override with `contentClassName="tw:p-0"`, never a `p-*` in `className` (that sits on the scrollport and breaks every sticky header below it, `Table.Header` included). `Main` is also the scrollport by default and its content wrapper grows with the content; pass `clampContent` when the page runs its own `overflow-auto` scroller, so a `flex-1` descendant clamps to the shell instead of resolving against the content. `AppShell.Header` and `AppShell.Aside` take `flush` — pass it when the slot hosts a chrome component that paints itself (`Navbar`, `Sidebar side="right"`), so the slot drops its own padding, background and border instead of insetting the child. Native `<div>` attributes.
 
 | Prop         | Type                 | Required | Default   | Description                                                                                                                                                                                                                                                                                                                                                                                                                                    |
 | ------------ | -------------------- | -------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |

package/dist/{AIKit-DiS0CVOW.js → AIKit-DaFT7p92.js}

@@ -1,18 +1,18 @@
 import { cn } from "./classNames-BzrkDnOD.js";
-import { Tooltip, TooltipProvider } from "./utils-D0c5VAyF.js";
+import { Tooltip, TooltipProvider } from "./utils-B-g7d_Jb.js";
 import { AlertCircle, ChevronDown, ChevronLeft, ChevronRight, CircleCheck, CirclePause, CircleX, FileText, Loader2, Maximize2, Minimize2, Play, Send, X, XCircle } from "./icons-Cek151jC.js";
-import { Button } from "./Button-6xBX0nNl.js";
-import { ClipboardButton } from "./ClipboardButton-ClcluT0C.js";
-import { FullScreenModal, FullScreenModalBody, FullScreenModalHeader } from "./FullScreenModal-Cb3PGgh4.js";
+import { Button } from "./Button-CPsEQuTN.js";
+import { ClipboardButton } from "./ClipboardButton-CQ6Aewpg.js";
+import { FullScreenModal, FullScreenModalBody, FullScreenModalHeader } from "./FullScreenModal-j-M4aPFd.js";
 import { Truncated } from "./internal/components/Truncated.js";
-import { HoverCard } from "./HoverCard-WfDkLK1s.js";
-import { Command } from "./Command-C0aZfVTq.js";
-import { TextInput } from "./TextInput-CMuN1WfY.js";
-import { Checkbox } from "./Checkbox-GJ8-srt4.js";
+import { HoverCard } from "./HoverCard-yQq-O49c.js";
+import { Command } from "./Command-Ds68v2rX.js";
+import { TextInput } from "./TextInput-DhdRk8qm.js";
+import { Checkbox } from "./Checkbox-5VNCcV7E.js";
 import { Badge } from "./Badge-Ch26CXoP.js";
 import { Textarea } from "./internal/blocks/Textarea.js";
 import { Table } from "./Table-CvYuTuNU.js";
-import { DiagramSkeleton } from "./DiagramSkeleton-lwBS2YBa.js";
+import { DiagramSkeleton } from "./internal/blocks/DiagramShared/DiagramSkeleton.js";
 import { Avatar } from "./internal/components/Avatar.js";
 import { Progress } from "./internal/components/Progress.js";
 import { Slot } from "@radix-ui/react-slot";
@@ -113,7 +113,7 @@ const MermaidDiagram = lazy(() => import("@keboola/design/mermaid").then((module
 	console.error("[AIKit] failed to load the MermaidDiagram chunk", error);
 	return { default: ({ code }) => /* @__PURE__ */ jsx("pre", { children: /* @__PURE__ */ jsx("code", { children: code }) }) };
 }));
-const proseClass = "tw:prose tw:prose-sm tw:max-w-none tw:break-words tw:[&_pre]:bg-neutral-50 tw:[&_pre]:text-neutral-800 tw:[&_:not(pre)>code]:bg-neutral-50 tw:[&_:not(pre)>code]:rounded tw:[&_:not(pre)>code]:px-1 tw:[&_:not(pre)>code]:py-0.5 tw:[&_:not(pre)>code]:before:content-none tw:[&_:not(pre)>code]:after:content-none";
+const proseClass = "tw:prose tw:prose-sm tw:max-w-none tw:break-words tw:[&_pre]:bg-muted tw:[&_pre]:text-foreground tw:[&_:not(pre)>code]:bg-muted tw:[&_:not(pre)>code]:text-foreground tw:[&_:not(pre)>code]:rounded tw:[&_:not(pre)>code]:px-1 tw:[&_:not(pre)>code]:py-0.5 tw:[&_:not(pre)>code]:before:content-none tw:[&_:not(pre)>code]:after:content-none";
 const getText = (node) => {
 	if (typeof node === "string") return node;
 	if (typeof node === "number") return String(node);
@@ -878,7 +878,7 @@ const Question = ({ question, header, options, multiSelect = true, selectedOptio
 		else handleCustomFocus();
 	};
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn("tw:flex tw:max-w-[800px] tw:flex-col tw:gap-4 tw:overflow-hidden tw:rounded-xl tw:border tw:border-solid tw:border-border tw:bg-neutral-50 tw:shadow-lg", className),
+		className: cn("tw:flex tw:max-w-[800px] tw:flex-col tw:gap-4 tw:overflow-hidden tw:rounded-xl tw:border tw:border-solid tw:border-border tw:bg-card tw:text-card-foreground tw:shadow-lg", className),
 		"data-testid": "question-root",
 		"data-question-step": currentStep,
 		"data-question-total-steps": totalSteps,
@@ -889,10 +889,10 @@ const Question = ({ question, header, options, multiSelect = true, selectedOptio
 				children: [/* @__PURE__ */ jsxs("div", {
 					className: "tw:flex tw:min-w-0 tw:flex-1 tw:flex-col tw:gap-1",
 					children: [/* @__PURE__ */ jsx("p", {
-						className: "tw:m-0 tw:text-base tw:font-semibold tw:leading-6 tw:text-neutral-800",
+						className: "tw:m-0 tw:text-base tw:font-semibold tw:leading-6",
 						children: question
 					}), header && /* @__PURE__ */ jsx("p", {
-						className: "tw:m-0 tw:text-xs tw:leading-4 tw:text-neutral-500",
+						className: "tw:m-0 tw:text-xs tw:leading-4 tw:text-muted-foreground",
 						children: header
 					})]
 				}), onClose && /* @__PURE__ */ jsx(Button, {
@@ -909,7 +909,7 @@ const Question = ({ question, header, options, multiSelect = true, selectedOptio
 				children: /* @__PURE__ */ jsxs("div", {
 					className: "tw:flex tw:flex-col tw:gap-4 tw:border-0 tw:border-l tw:border-solid tw:border-primary tw:px-4 tw:py-2",
 					children: [options.map((option) => /* @__PURE__ */ jsxs("div", {
-						className: "tw:-mx-2 tw:-my-1.5 tw:flex tw:cursor-pointer tw:items-start tw:gap-2 tw:rounded-md tw:px-2 tw:py-1.5 tw:hover:bg-neutral-100",
+						className: "tw:-mx-2 tw:-my-1.5 tw:flex tw:cursor-pointer tw:items-start tw:gap-2 tw:rounded-md tw:px-2 tw:py-1.5 tw:hover:bg-accent",
 						onClick: () => handleOptionToggle(option.id),
 						onKeyDown: handleKeyDown(() => handleOptionToggle(option.id)),
 						role: "button",
@@ -925,16 +925,17 @@ const Question = ({ question, header, options, multiSelect = true, selectedOptio
 							children: [/* @__PURE__ */ jsxs("div", {
 								className: "tw:flex tw:flex-col tw:gap-1.5",
 								children: [/* @__PURE__ */ jsx("span", {
-									className: "tw:text-sm tw:font-medium tw:leading-none tw:text-neutral-800",
+									className: "tw:text-sm tw:font-medium tw:leading-none",
 									children: option.label
 								}), option.description && /* @__PURE__ */ jsx("span", {
 									className: "tw:text-sm tw:font-normal tw:leading-5 tw:text-muted-foreground",
 									children: option.description
 								})]
 							}), option.preview && /* @__PURE__ */ jsx("div", {
-								className: cn("tw:ml-auto tw:flex tw:max-h-40 tw:min-w-0 tw:max-w-[50%] tw:flex-col tw:overflow-hidden tw:rounded-md", !renderPreview && "tw:overflow-auto tw:border tw:border-solid tw:border-neutral-200 tw:bg-white tw:p-2"),
+								"data-testid": "question-option-preview",
+								className: cn("tw:ml-auto tw:flex tw:max-h-40 tw:min-w-0 tw:max-w-[50%] tw:flex-col tw:overflow-hidden tw:rounded-md", !renderPreview && "tw:overflow-auto tw:border tw:border-solid tw:border-border tw:bg-muted tw:p-2 tw:text-foreground"),
 								children: renderPreview ? renderPreview(option.preview) : /* @__PURE__ */ jsx("pre", {
-									className: "tw:m-0 tw:overflow-visible tw:border-0 tw:bg-transparent tw:p-0 tw:font-mono tw:text-xs tw:leading-5 tw:text-neutral-700",
+									className: "tw:m-0 tw:overflow-visible tw:border-0 tw:bg-transparent tw:p-0 tw:font-mono tw:text-xs tw:leading-5 tw:text-foreground",
 									children: option.preview
 								})
 							})]
@@ -942,7 +943,7 @@ const Question = ({ question, header, options, multiSelect = true, selectedOptio
 					}, option.id)), showCustomAnswer && /* @__PURE__ */ jsxs("div", {
 						className: "tw:flex tw:flex-col tw:gap-2",
 						children: [/* @__PURE__ */ jsxs("div", {
-							className: "tw:-mx-2 tw:-my-1.5 tw:flex tw:cursor-pointer tw:items-start tw:gap-2 tw:rounded-md tw:px-2 tw:py-1.5 tw:hover:bg-neutral-100",
+							className: "tw:-mx-2 tw:-my-1.5 tw:flex tw:cursor-pointer tw:items-start tw:gap-2 tw:rounded-md tw:px-2 tw:py-1.5 tw:hover:bg-accent",
 							onClick: handleCustomRowClick,
 							onKeyDown: handleKeyDown(handleCustomRowClick),
 							role: "button",
@@ -953,7 +954,7 @@ const Question = ({ question, header, options, multiSelect = true, selectedOptio
 								onClick: (e) => e.stopPropagation(),
 								className: "tw:shrink-0"
 							}), /* @__PURE__ */ jsx("span", {
-								className: cn("tw:text-sm tw:font-medium tw:leading-none", !multiSelect && isCustomSelected ? "tw:text-primary" : "tw:text-neutral-800"),
+								className: cn("tw:text-sm tw:font-medium tw:leading-none", !multiSelect && isCustomSelected && "tw:text-primary"),
 								children: "Other"
 							})]
 						}), /* @__PURE__ */ jsx(TextInput, {
@@ -980,7 +981,7 @@ const Question = ({ question, header, options, multiSelect = true, selectedOptio
 					value: progressValue,
 					className: "tw:rounded-none"
 				}), /* @__PURE__ */ jsxs("div", {
-					className: cn("tw:flex tw:items-center tw:justify-end tw:gap-4 tw:px-4 tw:py-3", !hasSteps && "tw:border-0 tw:border-t tw:border-solid tw:border-neutral-100"),
+					className: cn("tw:flex tw:items-center tw:justify-end tw:gap-4 tw:px-4 tw:py-3", !hasSteps && "tw:border-0 tw:border-t tw:border-solid tw:border-border"),
 					children: [
 						hasSteps && /* @__PURE__ */ jsxs("div", {
 							className: "tw:flex tw:items-center tw:gap-2",
@@ -994,7 +995,7 @@ const Question = ({ question, header, options, multiSelect = true, selectedOptio
 									children: /* @__PURE__ */ jsx(ChevronLeft, { className: cn("tw:size-5", isFirstStep ? "tw:text-primary/25" : "tw:text-primary") })
 								}),
 								/* @__PURE__ */ jsxs("span", {
-									className: "tw:text-xs tw:leading-4 tw:text-neutral-500",
+									className: "tw:text-xs tw:leading-4 tw:text-muted-foreground",
 									children: [
 										currentStep,
 										" of ",
@@ -1317,4 +1318,4 @@ const UsageStats = ({ value, alert = false, children, className, ariaLabel, alig
 //#endregion
 export { AnswerSummary, CollapsibleStepHeader, InlineStepDetail, InlineStepLabel, Markdown, MessageBubble, PlanApproval, PlanRewritingIndicator, PromptInput, Question, QuestionBlock, SuggestedPrompt, ThinkingIndicator, ToolCallApproval, ToolCallChip, UsageStats, UsageStatsRing };
 
-//# sourceMappingURL=AIKit-DiS0CVOW.js.map
+//# sourceMappingURL=AIKit-DaFT7p92.js.map