@keboola/design 16.0.0 → 17.0.0

package/CHANGELOG.md

@@ -1,5 +1,51 @@
 # @keboola/design
 
+## 17.0.0
+
+### Major Changes
+
+- `MarkdownTable` takes no `surface` prop: its right-edge fade masks the table itself, so it reads on any background in both themes.
+  - The fade shows while columns remain to the right, as before.
+  - `MessageBubble`'s Show more fold fades the clipped text the same way.
+
+### Patch Changes
+
+- `MultiCombobox` keeps its clear and open buttons on the right, outside the chip row, and wraps the input below the chips only when less than 4rem is left beside them.
+
+- `EmptyState` wraps its centred text evenly:
+  - `EmptyState.Title` balances its lines (`text-wrap: balance`).
+  - `EmptyState.Description` avoids a lone word on its last line (`text-wrap: pretty`).
+
+- Text keeps its place when Inter swaps in.
+  - `Inter Fallback` is Arial (or Liberation Sans) scaled to Inter's width, ascent and descent, one face per Inter weight.
+  - Every Inter stack — `html`, `--font-display`, `font-sans`, `font-display` — lists it right after `Inter`.
+
+- `MarkdownTable` re-renders only when its overflow state changes.
+  - A scroll or resize that leaves the fade and the expand action as they were renders nothing.
+
+- `scroll-fade`, `scroll-fade-y` and `scroll-fade-x` (`@keboola/design/theme` and the `@keboola/tailwind-config/scrollFade` plugin) show no fade in browsers without scroll-driven animations (Firefox), so a `Modal.Body` that does not scroll keeps its first line solid there
+  - Where `animation-timeline: scroll()` is unsupported, the reveal animations are off and both edges stay solid.
+  - `PageLayout`'s nav column applies `scroll-fade-y` without its own `@supports` guard.
+
+- Updated dependencies:
+  - @keboola/tailwind-config@1.2.1
+
+## 16.1.0
+
+### Minor Changes
+
+- `AnswerActions` takes `voteStyle="quiet"`: the recorded vote takes the accent ink with no fill instead of green or red. Off by default.
+
+- `SourceChip` and `AnswerSources` take `verifiedStyle="quiet"`: a verified chip wears the plain neutral chip, and the verdict stays in its accessible name. Off by default.
+
+- `AnswerSources` takes `trailing`, drawn at the end of the chip row after the "N unverified" flag. Off by default.
+
+- `InlineStepLabel` takes `icon`: the step's kind in place of the status mark, the status moved to the accessible name, and a failed step read muted rather than red. `InlineStepGroup` takes `statusMark={false}` to drop the header's mark. Both off by default.
+
+- `MessageBubble` takes `footer`, drawn after the `collapseAfterPx` fold and above the time-and-actions row. Off by default. Passing `Number.POSITIVE_INFINITY` as `collapseAfterPx` while an answer streams keeps the body mounted when the real limit arrives.
+
+- `Markdown` and `Markdown.Block` take `caret`: `writing` draws a blinking caret at the end of the last block, `finishing` stills it and adds `finishingLabel` ("Finishing…"). Still under reduced motion. Off by default.
+
 ## 16.0.0
 
 ### Major Changes

package/dist/{AIKit-Cf5plya2.js → AIKit-CxKkvN0q.js}

@@ -2120,40 +2120,37 @@ Markdown.Block = MarkdownBlock;
 /** How much wider than its column a table has to be before the column is the wrong surface. */
 const EXPAND_RATIO = 1.5;
 /**
-* The fade's end colour — must match the host's surface, or it draws a strip over the data.
-*
-* - Full class strings: Tailwind reads literals.
-*/
-const FADE_SURFACE = {
-	card: "tw:from-card",
-	background: "tw:from-background"
-};
-/**
 * A table in an answer that shows when it is cut off on the right.
 *
 * - Controls sit in a fixed-height rail above the grid, so they never cover rows or shift them.
 * - The fade shows only while content remains to the right.
-* - A painted gradient, not `tw:scroll-fade-x`: that needs scroll-driven animations, which the
+* - A static mask, not `tw:scroll-fade-x`: that needs scroll-driven animations, which the
 *   `baseline-widely-available` build floor lacks, and must sit on `Table`'s own container.
 * - Past `EXPAND_RATIO` the expand action shows without hover.
 */
-const MarkdownTable = ({ children, actions, onExpand, surface = "card", sortable = false, className }) => {
+const MarkdownTable = ({ children, actions, onExpand, sortable = false, className }) => {
 	const frameRef = useRef(null);
 	const [overflow, setOverflow] = useState({
 		scrollable: false,
 		atEnd: true,
-		ratio: 1
+		wide: false
 	});
+	/**
+	* Reads `Table`'s own container (the frame's first child); the frame stays visible for the fade.
+	*
+	* - Keeps the previous state while no flag flips, so a scroll or resize that crosses no edge renders nothing.
+	*/
 	const measure = useCallback(() => {
 		const box = frameRef.current?.firstElementChild;
 		if (!box) return;
 		const { scrollLeft, scrollWidth, clientWidth } = box;
 		const hidden = scrollWidth - clientWidth;
-		setOverflow({
+		const next = {
 			scrollable: hidden > 1,
 			atEnd: scrollLeft >= hidden - 1,
-			ratio: clientWidth > 0 ? scrollWidth / clientWidth : 1
-		});
+			wide: clientWidth > 0 && scrollWidth / clientWidth >= EXPAND_RATIO
+		};
+		setOverflow((prev) => prev.scrollable === next.scrollable && prev.atEnd === next.atEnd && prev.wide === next.wide ? prev : next);
 	}, []);
 	useEffect(() => {
 		const box = frameRef.current?.firstElementChild;
@@ -2168,7 +2165,7 @@ const MarkdownTable = ({ children, actions, onExpand, surface = "card", sortable
 			observer.disconnect();
 		};
 	}, [measure]);
-	const showExpand = !!onExpand && overflow.scrollable && overflow.ratio >= EXPAND_RATIO;
+	const showExpand = !!onExpand && overflow.scrollable && overflow.wide;
 	return /* @__PURE__ */ jsxs("div", {
 		className,
 		children: [(actions || onExpand) && /* @__PURE__ */ jsxs("div", {
@@ -2184,14 +2181,10 @@ const MarkdownTable = ({ children, actions, onExpand, surface = "card", sortable
 					children: [/* @__PURE__ */ jsx(Maximize2, { className: "tw:size-3.5" }), "Open wider"]
 				})
 			})]
-		}), /* @__PURE__ */ jsxs("div", {
+		}), /* @__PURE__ */ jsx("div", {
 			ref: frameRef,
-			className: "tw:relative",
-			children: [sortable ? /* @__PURE__ */ jsx(TableSortProvider, { children }) : children, overflow.scrollable && !overflow.atEnd && /* @__PURE__ */ jsx("span", {
-				"aria-hidden": true,
-				"data-testid": "markdown-table-fade",
-				className: cn("tw:pointer-events-none tw:absolute tw:inset-y-px tw:right-px tw:w-12 tw:rounded-r-[10px] tw:bg-gradient-to-l tw:to-transparent", FADE_SURFACE[surface])
-			})]
+			className: overflow.atEnd ? void 0 : "tw:mask-r-from-[calc(100%-3rem)]",
+			children: sortable ? /* @__PURE__ */ jsx(TableSortProvider, { children }) : children
 		})]
 	});
 };
@@ -2200,9 +2193,10 @@ const MarkdownTable = ({ children, actions, onExpand, surface = "card", sortable
 * Clips tall content at `maxHeight` behind a fade, with a Show more / Show less toggle.
 *
 * - The toggle and fade appear only while the content is taller than `maxHeight`.
+* - The fade masks the content itself, so it reads on any surface.
 * - Height is measured with a `ResizeObserver`; without one (jsdom) nothing is clipped.
 */
-const CollapsedMessageBody = ({ maxHeight, fadeClassName, children }) => {
+const CollapsedMessageBody = ({ maxHeight, children }) => {
 	const contentRef = useRef(null);
 	const [isOverflowing, setIsOverflowing] = useState(false);
 	const [isExpanded, setIsExpanded] = useState(false);
@@ -2216,16 +2210,13 @@ const CollapsedMessageBody = ({ maxHeight, fadeClassName, children }) => {
 	const isClipped = isOverflowing && !isExpanded;
 	return /* @__PURE__ */ jsxs("div", {
 		className: "tw:flex tw:flex-col tw:items-start tw:gap-1",
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: "tw:relative tw:w-full tw:overflow-hidden",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: cn("tw:w-full tw:overflow-hidden", isClipped && "tw:mask-b-from-[calc(100%-3rem)]"),
 			style: isClipped ? { maxHeight } : void 0,
-			children: [/* @__PURE__ */ jsx("div", {
+			children: /* @__PURE__ */ jsx("div", {
 				ref: contentRef,
 				children
-			}), isClipped && /* @__PURE__ */ jsx("div", {
-				"aria-hidden": true,
-				className: cn("tw:pointer-events-none tw:absolute tw:inset-x-0 tw:bottom-0 tw:h-12 tw:bg-gradient-to-t tw:to-transparent", fadeClassName)
-			})]
+			})
 		}), isOverflowing && /* @__PURE__ */ jsx(Button, {
 			variant: "inline",
 			size: "small",
@@ -2344,7 +2335,6 @@ const MessageBubble = ({ variant, children, actions, createdAt, timestamp = "too
 	}) : null;
 	const body = collapseAfterPx === void 0 ? children : /* @__PURE__ */ jsx(CollapsedMessageBody, {
 		maxHeight: collapseAfterPx,
-		fadeClassName: variant === "user" ? "tw:from-muted" : "tw:from-background",
 		children
 	});
 	const hasActionsRow = isTimestampVisible || deliveryStatus !== null;
@@ -4595,4 +4585,4 @@ const UsageStats = ({ value, alert = false, children, className, ariaLabel, alig
 };
 export { ANSWER_SOURCES_VISIBLE, AnswerActions, AnswerSources, AnswerSummary, AttachmentChip, CONTEXT_CHIP_EXPANDABLE_LENGTH, ChatInlineIcon, ChatNotice, CollapsibleStepHeader, ContextChip, FileDownloadChip, FileGallery, InlineStepDetail, InlineStepGroup, InlineStepLabel, JumpToLatest, Markdown, MarkdownTable, MessageBubble, ModeChip, PROMPT_INPUT_CONTAINER, PlanApproval, PlanRewritingIndicator, PromptInput, Question, QuestionBlock, SourceChip, SuggestedPrompt, ThinkingIndicator, ToolCallApproval, ToolCallChip, ToolCallStatusHeader, UsageBar, UsageStats, clampPercentage, findMentionToken, findSlashToken, formatPercentage, getChatInlineIconName, splitSealedBlocks, withholdOpenTail };
 
-//# sourceMappingURL=AIKit-Cf5plya2.js.map
+//# sourceMappingURL=AIKit-CxKkvN0q.js.map