@keboola/design 12.0.0 → 13.0.0

package/AGENTS.md

@@ -79,6 +79,8 @@ This file answers **which** component to use; [`COMPONENT-API.md`](./COMPONENT-A
 
 **Never** use `Popover` for destructive confirmations (use `Popconfirm`) or hover-only previews (use `HoverCard`). **Never** hand-roll a confirmation from `Modal` + buttons — use `AlertModal`, which owns the confirm/cancel actions and the async loading state.
 
+**Filters in a menu are menu items:** `DropdownMenu.RadioItem` for one value, `DropdownMenu.CheckboxItem` for several, both `indicator="check" indicatorAlign="end"`. Never `RadioGroup` or `Checkbox` in a `DropdownMenu` or `Popover`.
+
 ### Inputs
 
 | Use                     | When                                                               |
@@ -93,7 +95,7 @@ This file answers **which** component to use; [`COMPONENT-API.md`](./COMPONENT-A
 
 **Never** build custom label + input combinations — compose `Label` + `FormGroup.TextInput` + `FormGroup.Help` inside `FormGroup`.
 
-**Every select-shaped control needs an accessible name, and it goes on the control itself** — pass `id` and point a `<Label htmlFor>` at it where the field has a visible label, `aria-labelledby` where that label is some other node, and `aria-label` for a bare control — a toolbar filter, a repeated row. A name set on a surrounding wrapper (an `InputGroup`, a `<div>`) reaches nothing: the role is on the trigger or the input. `Select` and `Select.Trigger` **will not compile** without one of the three (the JSDoc on the prop says why); `Combobox` and `MultiCombobox` will, and then fall back to their `placeholder`, which the name calculation reaches only as a last resort. The `field.*` connectors need none of it: `FieldItem` owns the label and hands the control its `id`.
+**Every select-shaped control needs an accessible name, and it goes on the control itself** — pass `id` and point a `<Label htmlFor>` at it where the field has a visible label, `aria-labelledby` where that label is some other node, and `aria-label` for a bare control — a toolbar filter, a repeated row. A name set on a surrounding wrapper (an `InputGroup`, a `<div>`) reaches nothing: the role is on the trigger or the input. `Select`, `Select.Trigger`, `Combobox`, `Combobox.Input` and `MultiCombobox` **will not compile** without one of the three (the JSDoc on the prop says why); a component that wraps one passes it on — a required `id` where every caller renders a `<Label htmlFor>`, `WithAccessibleName<Props>` where some caller has no visible label. The `field.*` connectors need none of it: `FieldItem` owns the label and hands the control its `id`.
 
 `FileUpload` composes `FileUpload.DropZone` (the dashed box, owning the drag / error visuals) with `FileUpload.FileList` (selected files; `invalid` tints the rows). It deliberately ships **no** rejection copy — the wording is product copy, so read the current rejections with `useFileUploadRejections()` inside `FileUpload` and write the sentence yourself. Reach for `useFileDropTarget` only when there is no box to render: it returns `getRootProps()` / `isDragActive` for an affordance you style, and `noClick` / `noKeyboard` keep an already-interactive subtree (a composer, a form) from opening the file dialog on every click.
 
@@ -107,15 +109,16 @@ This file answers **which** component to use; [`COMPONENT-API.md`](./COMPONENT-A
 | `Toaster`                     | Mount once at app root                                |
 | `Alert`                       | Persistent contextual message in page layout          |
 | `FormGroup state="error"`     | Field-level validation errors inline below input      |
-| `StatusDot`                   | One entity's state as a coloured dot beside its name  |
 
 **Never** use `Alert` for ephemeral success (use `toast()`) or `toast()` for blocking errors (use `Alert`).
 
-**Never** paint a state with a hue of your own — no `tw:bg-amber-400` span, no `color` prop taking a
-hue. `StatusDot`'s `status` (`success` / `warning` / `info` / `destructive` / `neutral`) is its whole
-colour API, so it reads the themeable status tokens and a customer brand recolours every dot at once.
-Colour never carries the meaning alone: pair the dot with the text, or give it a `label` so a screen
-reader gets the state too.
+**Never** paint a state with a hue of your own — no `tw:text-amber-600`, no `color` prop taking a
+hue. Use the status tokens (`success` / `warning` / `info` / `destructive`, `muted-foreground` for no
+state yet), so a customer brand recolours every state at once. Colour never carries the meaning
+alone: name the state in text, or in an `aria-label` where there is no room for text.
+
+**Don't** put a dot or bullet before text that already names the state ("Failed", "Up to date") —
+colour the text instead. A column of dots reads as a bulleted list.
 
 ### Loading
 
@@ -252,6 +255,8 @@ Vertical rhythm: prefer `tw:gap-*` on a flex column parent over `tw:mt-*` on chi
 
 The `label` prop implies `orientation="horizontal"` — labels are not rendered vertically.
 
+**Separate inline items with `tw:gap-x-*`, not a typed `·` / `|` / `/` / `—`** — it wraps onto the wrong line and a screen reader reads it out.
+
 ### Date/time, color, multi-select, code
 
 | Use               | When                                                          |

package/CHANGELOG.md

@@ -1,5 +1,96 @@
 # @keboola/design
 
+## 13.0.0
+
+### Major Changes
+
+- Remove the `keboolaLegacyTopnav` brand (`keboola-legacy-topnav`). No app renders the top-nav layout any more; use `keboolaLegacySidebar`. The `shell: 'topnav'` option stays: a brand that sets it still gets the `AppShell` top-bar geometry.
+
+- Remove `StatusDot` and `statusDotVariants`
+
+  Nothing on the platform renders it. Colour the text that names the state with a status token (`tw:text-success`, `tw:text-destructive`, …) instead of putting a dot in front of it.
+
+### Minor Changes
+
+- `AlertModal.Content` takes `icon={false}` for a dialog that wants no glyph at all. The header's first column collapses rather than sitting empty, so the title and body start at the edge; `variant` still colours the confirm button.
+
+- `Card` takes `asChild` and becomes the link it wraps — `<Card asChild><a href>…</a></Card>` or a router `<Link>`. An `<a href>` card lifts, steps its border and deepens its shadow on hover (no motion under `prefers-reduced-motion`), shows the focus ring on `focus-visible` and a pointer cursor; `interactive` opts any other card in, or an anchor card out. New `Card.Description` renders the muted line under `Card.Title`.
+
+- `Combobox`, `MultiCombobox` and `Combobox.Input` require an accessible name — `aria-label`,
+  `aria-labelledby`, or an `id` a `<Label htmlFor>` points at — as `Select` does.
+
+  ```tsx
+  // A visible label — point it at the control.
+  <Label htmlFor="bucket">Bucket</Label>
+  <Combobox id="bucket" items={buckets} value={bucket} onValueChange={setBucket} />
+
+  // A bare control (toolbar filter, repeated row) — name it directly.
+  <MultiCombobox aria-label="Status" items={STATUSES} value={statuses} onValueChange={setStatuses} />
+  ```
+
+  - The `placeholder` is not a name: the name calculation reaches it only as a last resort, and it
+    disappears once a value is picked.
+  - The requirement sits on the input, which carries the `combobox` role, so the compound
+    `Combobox.Input` has it too.
+  - `ComboboxField` and `MultiComboboxField` take no `id`, `aria-label` or `aria-labelledby`:
+    `FieldItem` renders the label and hands the control its `id`.
+  - `WithAccessibleName<Props>` is exported for a component that wraps one of these controls and
+    passes the requirement on.
+
+- `forwardAccessibleName` is exported next to `WithAccessibleName`, for a component that wraps
+  `Combobox`, `MultiCombobox` or `Select` and passes their accessible-name requirement on.
+
+  ```tsx
+  const TablePicker = ({
+    tables,
+    value,
+    onChange,
+    ...accessibleName
+  }: Props) => (
+    <Combobox
+      {...forwardAccessibleName(accessibleName)}
+      items={tables}
+      value={value}
+      onValueChange={onChange}
+    />
+  );
+  ```
+
+  - It returns the rest of the wrapper's destructure unchanged, for spreading onto the control.
+  - A prop left in that rest besides `id`, `aria-label` and `aria-labelledby` fails type-check,
+    where a plain spread would pass it to the control unnoticed.
+
+### Patch Changes
+
+- Filled `Button`s (`primary`, `secondary`, `danger`, `kai`) paint to their outer edge, so they line up with an `outline` Button beside them. `kai` drops its 1px outer ring and keeps the soft glow.
+
+- `CopyField.Reveal` takes a `subject`, so the eye can say "Show password" instead of "Show value"
+
+- `CollapsiblePanel` keeps its chevron inside the panel when the header holds long text.
+  - The header content can shrink, so a `truncate` inside it cuts the text instead of pushing the chevron out.
+
+- `MultiCombobox` selected-value chips are back to the badge's own height; the truncation tooltip no
+  longer resets the chip label's line-height.
+
+- `Combobox` and `MultiCombobox` option rows now wrap a long label onto more lines instead of
+  truncating it, and a selected-value chip whose label is cut off shows the full label in a tooltip
+  on hover.
+
+- `dompurify` requires 3.4.16 or newer, the release that fixes event handlers left armed in subtrees an `afterSanitize` hook removes
+
+- `AGENTS.md`: filters in a menu are `DropdownMenu.RadioItem` / `CheckboxItem` with `indicator="check"`, never `RadioGroup` or `Checkbox`.
+
+- `PromptInput` leaves the controls in its slots alone: with `commands` or `mentions`, Enter on a
+  focused `prefix`/`suffix` button (or a button in a menu it portals out) clicks it, and a click in
+  such a layer keeps the focus there instead of moving it to the textarea.
+
+- `AGENTS.md`: status text that already names its state takes a status colour, not a leading dot or bullet; inline items are separated by a `tw:gap-x-*` flex row, not a typed `·` / `|` / `/` / `—`.
+
+- `ToolCallStatusHeader` shows its label in full foreground ink while `needsConfirmation` is set, so the name of the action being approved is as easy to see as the content below it. The warning tint, icon and "Confirmation required" chip still mark the state.
+
+- Updated dependencies:
+  - @keboola/brand-registry@2.0.0
+
 ## 12.0.0
 
 ### Major Changes

package/COMPONENT-API.md

@@ -465,12 +465,14 @@ Source: `src/blocks/Form/connectors/OtpInputField.tsx`
 
 Source: `src/components/Card/Card.tsx`
 
-> Subcomponents that EXIST: `Card.Header`, `Card.Title`, `Card.Content`. There is NO `Card.Description` and NO `Card.Footer`. Plus native `<div>` attributes.
+> Subcomponents that EXIST: `Card.Header`, `Card.Title`, `Card.Description`, `Card.Content`. There is NO `Card.Footer`. Plus native `<div>` attributes. A clickable tile is `<Card asChild><a href>…</a></Card>` (or a router `<Link>`): the whole card is the link, its accessible name is its text, and it must hold NO nested buttons or links. Not the DS `Link`: it defaults to `target="_blank"` and stops click propagation — fine only for an external tile.
 
-| Prop       | Type                                               | Required | Default | Description |
-| ---------- | -------------------------------------------------- | -------- | ------- | ----------- |
-| `bordered` | `boolean \| null`                                  | no       | `false` |             |
-| `padding`  | `"small" \| "medium" \| "large" \| "none" \| null` | no       | `small` |             |
+| Prop          | Type                                               | Required | Default | Description                                                                                                                                             |
+| ------------- | -------------------------------------------------- | -------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `asChild`     | `boolean`                                          | no       | `false` | Render as a Radix `Slot`: the child (`<a href>`, a router `<Link>`) becomes the card. The card is then one link — nest no buttons or links inside it.   |
+| `bordered`    | `boolean \| null`                                  | no       | `false` |                                                                                                                                                         |
+| `interactive` | `boolean`                                          | no       | —       | Hover lift, focus ring and pointer cursor. Defaults to on when the card renders an `<a href>`; `false` opts that out, `true` opts any other element in. |
+| `padding`     | `"small" \| "medium" \| "large" \| "none" \| null` | no       | `small` |                                                                                                                                                         |
 
 ### `Card.Header`
 
@@ -493,6 +495,14 @@ Source: `src/components/Card/CardTitle.tsx`
 | ---- | -------------- | -------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `as` | `HeadingLevel` | no       | `h3`    | Heading tag to render. Defaults to `h3`; set explicitly to avoid a heading-order skip (e.g. `as="h2"` when the Card sits directly under a page's `h1`). |
 
+### `Card.Description`
+
+Source: `src/components/Card/CardDescription.tsx`
+
+> Muted small `<p>` under `Card.Title`; place both in `Card.Header layout="stack"`. No own props — native `<p>` attributes.
+
+_No own props — see note above for passthrough attributes._
+
 ### `Card.Content`
 
 Source: `src/components/Card/CardContent.tsx`

package/dist/{AIKit-BD4r7ff-.js → AIKit-DcOlHIBr.js}

@@ -1,14 +1,14 @@
 import { cn } from "./classNames-BzrkDnOD.js";
 import { Tooltip, TooltipProvider } from "./utils-Bd28bWgm.js";
 import { AlertCircle, ArrowDown, ArrowLeft, ArrowRight, ArrowUp, Ban, BarChart3, Bell, Bug, Calendar, Check, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, Circle, CircleAlert, CircleCheck, CircleHelp, CirclePause, CirclePlay, CirclePlus, CircleStop, CircleX, Clock, Cog, Copy, Database, Download, Ellipsis, ExternalLink, Eye, File, FilePen, FileText, Flag, Folder, Gauge, GitBranch, GitMerge, GitPullRequest, Globe, Hand, History, Hourglass, Info, Key, Layers, LineChart, Link, List, ListChecks, Loader2, Lock, Mail, Maximize2, Minimize2, Minus, Pencil, Play, Plus, RefreshCw, Rocket, RotateCcw, RotateCw, Save, Search, Send, Settings, Sparkles, Star, Table, ThumbsDown, ThumbsUp, Trash2, TriangleAlert, Upload, User, Users, WandSparkles, Warehouse, Workflow, X, XCircle, Zap } from "./icons-wcA70iQx.js";
-import { Button } from "./Button-Ca4Q3VJU.js";
+import { Button } from "./Button-B21oVcPU.js";
 import { ButtonGroup } from "./internal/components/ButtonGroup.js";
-import { ClipboardButton } from "./ClipboardButton-DHa1trtI.js";
-import { FullScreenModal, FullScreenModalBody, FullScreenModalHeader } from "./FullScreenModal-CD7mYeTz.js";
+import { ClipboardButton } from "./ClipboardButton-srUgWgwH.js";
+import { FullScreenModal, FullScreenModalBody, FullScreenModalHeader } from "./FullScreenModal-Cwnm8WdM.js";
 import { Truncated } from "./internal/components/Truncated.js";
 import { HoverCard } from "./HoverCard-B8OKu9XZ.js";
-import { Command } from "./Command-BU_cVurn.js";
-import { TextInput } from "./TextInput-CDG2XpBl.js";
+import { Command } from "./Command-BQPiZCNz.js";
+import { TextInput } from "./TextInput-BWYXbfs4.js";
 import { Checkbox } from "./Checkbox-8yIIgY7g.js";
 import { Badge } from "./Badge-DIjhwPvh.js";
 import { Textarea } from "./internal/blocks/Textarea.js";
@@ -1462,7 +1462,13 @@ const CMDK_HIJACKED_KEYS = /* @__PURE__ */ new Set([
 	"End",
 	"Enter"
 ]);
-const isCmdkNavigation = (event) => event.key !== "Enter" || !(event.metaKey || event.ctrlKey || event.altKey);
+/**
+* Whether the composer's always-mounted cmdk root would act on this keystroke, cancelling its default.
+*
+* - cmdk acts on every `CMDK_HIJACKED_KEYS` key regardless of modifiers, except a modified Enter.
+* - The textarea and the form stop these from bubbling, or a focused button never clicks on Enter.
+*/
+const isCmdkNavigation = (event) => CMDK_HIJACKED_KEYS.has(event.key) && (event.key !== "Enter" || !(event.metaKey || event.ctrlKey || event.altKey));
 /**
 * The `@token` the caret sits at the end of, if any.
 *
@@ -1645,14 +1651,19 @@ const PromptInput = ({ onSend, onAbort, onContinue, prefix, variant, suffix, att
 			if (panelOpen) return;
 			if (event.key === "ArrowUp" || event.key === "ArrowDown") return;
 			if (event.key === "Enter" && matchesFilter(menuItems, menuFilter).length > 0) return;
-		} else if (hasMenus && CMDK_HIJACKED_KEYS.has(event.key) && isCmdkNavigation(event)) event.stopPropagation();
+		} else if (hasMenus && isCmdkNavigation(event)) event.stopPropagation();
 		if (event.key === "Enter" && !event.shiftKey && !event.ctrlKey && !event.metaKey) {
 			event.preventDefault();
 			if (status !== "streaming") handleSubmit();
 		}
 	};
+	const handleOnFormKeyDown = (event) => {
+		if (hasMenus && event.target !== textareaRef.current && isCmdkNavigation(event)) event.stopPropagation();
+	};
 	const handleOnMouseDown = (event) => {
-		if (event.target === textareaRef.current) return;
+		const { currentTarget, target } = event;
+		if (target === textareaRef.current) return;
+		if (!(target instanceof Node && currentTarget.contains(target))) return;
 		event.preventDefault();
 		textareaRef.current?.focus();
 	};
@@ -1661,6 +1672,7 @@ const PromptInput = ({ onSend, onAbort, onContinue, prefix, variant, suffix, att
 		children: /* @__PURE__ */ jsxs("form", {
 			"data-testid": "prompt-input",
 			"data-status": status,
+			onKeyDown: handleOnFormKeyDown,
 			onMouseDown: handleOnMouseDown,
 			onSubmit: handleOnSubmit,
 			className: cn(promptInputVariants({ variant }), disabled && "tw:bg-none tw:border-border tw:shadow-[inset_0_100vw_rgb(var(--muted))] tw:cursor-default", className),
@@ -2204,7 +2216,7 @@ const ToolCallStatusHeader = ({ icon: IconComponent, iconSpin, status, text, nee
 			className: "tw:flex tw:min-w-0 tw:flex-1 tw:items-center tw:gap-1.5",
 			children: [/* @__PURE__ */ jsx(IconComponent, { className: cn("tw:size-3.5 tw:shrink-0", statusIconInk[status], iconSpin && "tw:animate-spin") }), /* @__PURE__ */ jsx("span", {
 				"data-testid": "tool-status-text",
-				className: cn("tw:truncate tw:pr-0.5 tw:text-xs tw:font-medium", statusInk[status]),
+				className: cn("tw:truncate tw:pr-0.5 tw:text-xs tw:font-medium", needsConfirmation ? "tw:text-foreground" : statusInk[status]),
 				children: text
 			})]
 		}), (needsConfirmation || isCollapsible) && /* @__PURE__ */ jsxs("div", {
@@ -2325,4 +2337,4 @@ const UsageStats = ({ value, alert = false, children, className, ariaLabel, alig
 //#endregion
 export { AnswerActions, AnswerSummary, ChatInlineIcon, CollapsibleStepHeader, DIAGRAM_LANGUAGES, FileDownloadChip, InlineStepDetail, InlineStepGroup, InlineStepLabel, Markdown, MarkdownTable, MessageBubble, PROMPT_INPUT_CONTAINER, PlanApproval, PlanRewritingIndicator, PromptInput, Question, QuestionBlock, SuggestedPrompt, ThinkingIndicator, ToolCallApproval, ToolCallChip, ToolCallStatusHeader, UsageBar, UsageStats, UsageStatsRing, clampPercentage, findMentionToken, findSlashToken, formatPercentage, getChatInlineIconName };
 
-//# sourceMappingURL=AIKit-BD4r7ff-.js.map
+//# sourceMappingURL=AIKit-DcOlHIBr.js.map