@keboola/design 15.1.0 → 16.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@keboola/design",
-  "version": "15.1.0",
+  "version": "16.1.0",
   "description": "Keboola UI platform design system — shadcn-aligned React primitives, Keboola-branded blocks, and the form bindings built on TanStack Form.",
   "license": "MIT",
   "type": "module",
@@ -121,53 +121,53 @@
   "devDependencies": {
     "@arethetypeswrong/cli": "^0.18.2",
     "@google/design.md": "0.2.0",
-    "@keboola/agent-vocabulary": "^0.1.1",
-    "@keboola/eslint-plugin-design": "^0.5.0",
+    "@keboola/agent-vocabulary": "^0.2.0",
+    "@keboola/eslint-plugin-design": "^0.6.0",
     "@keboola/oxlint-config": "^10.2.0",
     "@keboola/tsconfig": "^0.2.1",
     "@keboola/vitest-config": "^1.0.0",
-    "@playwright/test": "1.63.0",
+    "@playwright/test": "1.64.1",
     "@size-limit/esbuild": "12.1.0",
     "@size-limit/file": "12.1.0",
-    "@storybook/addon-a11y": "10.6.1",
-    "@storybook/addon-docs": "^10.6.1",
-    "@storybook/addon-links": "^10.6.1",
-    "@storybook/addon-vitest": "10.6.1",
-    "@storybook/react-vite": "^10.6.1",
+    "@storybook/addon-a11y": "10.6.3",
+    "@storybook/addon-docs": "^10.6.3",
+    "@storybook/addon-links": "^10.6.3",
+    "@storybook/addon-vitest": "10.6.3",
+    "@storybook/react-vite": "^10.6.3",
     "@tailwindcss/cli": "^4.3.3",
-    "@tailwindcss/typography": "^0.5.19",
+    "@tailwindcss/typography": "^0.5.20",
     "@tailwindcss/vite": "^4.3.3",
     "@tanstack/react-table": "^8.21.3",
-    "@testing-library/dom": "^10.4.1",
+    "@testing-library/dom": "^10.4.2",
     "@testing-library/react": "^16.3.3",
-    "@testing-library/user-event": "^14.6.7",
+    "@testing-library/user-event": "^14.6.8",
     "@types/d3-color": "^3.1.3",
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",
     "@typescript/native": "npm:typescript@^7.0.2",
-    "@vitejs/plugin-react": "^6.1.1",
-    "@vitest/browser": "5.0.1",
-    "@vitest/browser-playwright": "5.0.1",
-    "@vitest/coverage-istanbul": "5.0.1",
-    "@vitest/coverage-v8": "^5.0.1",
+    "@vitejs/plugin-react": "^6.1.2",
+    "@vitest/browser": "5.0.5",
+    "@vitest/browser-playwright": "5.0.5",
+    "@vitest/coverage-istanbul": "5.0.5",
+    "@vitest/coverage-v8": "^5.0.5",
     "d3-color": "^3.1.0",
-    "eslint-plugin-storybook": "^10.3.5",
+    "eslint-plugin-storybook": "^10.6.3",
     "oxfmt": "^0.66.0",
-    "oxlint": "^1.81.0",
-    "playwright": "1.63.0",
-    "react": "^19.3.0",
+    "oxlint": "^1.89.0",
+    "playwright": "1.64.1",
+    "react": "^19.3.1",
     "react-docgen-typescript": "^2.4.0",
-    "react-dom": "^19.3.0",
+    "react-dom": "^19.3.1",
     "size-limit": "12.1.0",
-    "storybook": "^10.6.1",
+    "storybook": "^10.6.3",
     "tailwindcss": "^4.3.3",
     "tailwindcss-scoped-preflight": "^4.0.6",
     "tsdown": "^0.22.14",
     "tsx": "^4.19.4",
     "tw-animate-css": "^1.4.0",
     "typescript": "npm:@typescript/typescript6@^6.0.2",
-    "vite": "^8.3.0",
-    "vitest": "^5.0.1"
+    "vite": "^8.3.5",
+    "vitest": "^5.0.5"
   },
   "peerDependencies": {
     "@testing-library/react": "^16.3.2",
@@ -194,8 +194,8 @@
     "@codemirror/state": "^6.7.1",
     "@codemirror/view": "^6.43.9",
     "@iconify-json/lucide": "^1.2.118",
-    "@keboola/brand-registry": "^3.0.0",
-    "@keboola/codemirror-lang-sql": "^0.7.3",
+    "@keboola/brand-registry": "^3.1.0",
+    "@keboola/codemirror-lang-sql": "^0.7.4",
     "@keboola/tailwind-config": "^1.2.0",
     "@lexical/code": "^0.42.0",
     "@lexical/link": "^0.42.0",
@@ -204,7 +204,7 @@
     "@lexical/react": "^0.42.0",
     "@lexical/rich-text": "^0.42.0",
     "@lexical/utils": "^0.42.0",
-    "@lezer/highlight": "^1.2.3",
+    "@lezer/highlight": "^1.2.5",
     "@radix-ui/react-alert-dialog": "^1.1.17",
     "@radix-ui/react-avatar": "^1.2.0",
     "@radix-ui/react-checkbox": "^1.3.5",
@@ -227,12 +227,12 @@
     "@radix-ui/react-toggle": "^1.1.12",
     "@radix-ui/react-toggle-group": "^1.1.13",
     "@radix-ui/react-tooltip": "^1.2.10",
-    "@rjsf/core": "^6.4.1",
-    "@rjsf/utils": "^6.4.1",
-    "@rjsf/validator-ajv8": "^6.5.2",
+    "@rjsf/core": "^6.11.0",
+    "@rjsf/utils": "^6.11.0",
+    "@rjsf/validator-ajv8": "^6.11.0",
     "@tanstack/form-core": "^1.29.1",
     "@tanstack/react-form": "^1.29.1",
-    "@tanstack/react-virtual": "^3.14.5",
+    "@tanstack/react-virtual": "^3.14.22",
     "@testing-library/jest-dom": "^7.0.1",
     "@uiw/codemirror-theme-github": "^4.25.11",
     "@uiw/react-codemirror": "^4.25.11",
@@ -241,24 +241,24 @@
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
     "diff": "^9.0.0",
-    "dompurify": "^3.4.16",
+    "dompurify": "^3.4.17",
     "flint-chart": "0.5.1",
     "input-otp": "^1.4.2",
     "lexical": "^0.42.0",
     "lucide-react": "^1.17.0",
-    "node-diff3": "^3.2.0",
-    "pele": "^1.6.0",
-    "react-day-picker": "^10.0.1",
+    "node-diff3": "^3.2.1",
+    "pele": "^1.10.0",
+    "react-day-picker": "^10.0.2",
     "react-dropzone": "^14.2.3",
     "react-markdown": "^10.1.0",
-    "react-resizable-panels": "^4.12.1",
+    "react-resizable-panels": "^4.15.0",
     "react-textarea-autosize": "^8.5.9",
     "recharts": "^3.0.0",
     "remark-gfm": "^4.0.1",
-    "sonner": "^2.0.7",
-    "tailwind-merge": "^3.6.0",
+    "sonner": "^2.0.8",
+    "tailwind-merge": "^3.7.0",
     "vega": "^6.4.0",
-    "vega-lite": "^6.4.3"
+    "vega-lite": "^6.5.0"
   },
   "scripts": {
     "dev": "storybook dev -p \"${PORT:-6006}\"",

package/src/styles.css

@@ -19,12 +19,78 @@
  * mentions belongs in it. */
 @source not '**/*.test.{ts,tsx}';
 
-/* The remaining v3 token surface plus typography and scroll-fade stay in JS, loaded
- * via v4's `@config` bridge — this keeps `colors.ts` and the ThemeProvider/brand
- * runtime-swap model unchanged (channel triples consumed as `rgb(var(--*) / <alpha>)`).
- * Anything an app authors belongs in `theme.css` instead: this bridge is design-only. */
+/* Prose typography — the one setting v4 can't express in CSS, loaded via the `@config` bridge.
+ * - Design-only: apps get `prose` from the compiled CSS, not from this bridge. */
 @config '../tailwind.config.js';
 
+/* Scales only design's own build resolves through the brand's runtime vars.
+ * - An app's build resolves `rounded-md`, `shadow-sm`, `font-mono`, `font-semibold` to stock v4 values.
+ * - `inline`, so each utility carries its value; `initial` keeps only these four font weights.
+ * - A token new to apps belongs in `theme.css`. */
+@theme inline {
+  --font-mono:
+    var(--font-mono, SFMono-Regular), Menlo, Monaco, Consolas, Liberation Mono, Courier New,
+    monospace;
+
+  --font-weight-*: initial;
+  --font-weight-normal: var(--font-weight-normal, 400);
+  --font-weight-medium: var(--font-weight-medium, 500);
+  --font-weight-semibold: var(--font-weight-semibold, 600);
+  --font-weight-bold: var(--font-weight-bold, 700);
+
+  /* `--type-*` from `typography.typeScale` via ThemeProvider. */
+  --text-display: var(--type-display-size, 1.875rem);
+  --text-display--line-height: var(--type-display-leading, 1.2);
+  --text-display--font-weight: var(--type-display-weight, 600);
+  --text-display--letter-spacing: var(--type-display-tracking, -0.02em);
+  --text-heading: var(--type-heading-size, 1.25rem);
+  --text-heading--line-height: var(--type-heading-leading, 1.4);
+  --text-heading--font-weight: var(--type-heading-weight, 600);
+  --text-heading--letter-spacing: var(--type-heading-tracking, -0.01em);
+  --text-body: var(--type-body-size, 0.875rem);
+  --text-body--line-height: var(--type-body-leading, 1.5);
+  --text-body--font-weight: var(--type-body-weight, 400);
+  --text-body--letter-spacing: var(--type-body-tracking, normal);
+
+  /* `theme.shadows` and `theme.radii` via ThemeProvider; the light block below sets each default. */
+  --shadow-sm: var(--shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05));
+  --shadow-md: var(--shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1));
+  --shadow-lg: var(--shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1));
+  --radius-sm: var(--radius-sm, 0.125rem);
+  --radius-md: var(--radius-md, 0.375rem);
+  --radius-lg: var(--radius-lg, 0.5rem);
+
+  --animate-dot-pulse-1: dot-pulse 1.5s infinite;
+  --animate-dot-pulse-2: dot-pulse 1.5s infinite 0.2s;
+  --animate-dot-pulse-3: dot-pulse 1.5s infinite 0.4s;
+  --animate-toast-progress: toast-progress 5s linear forwards;
+
+  @keyframes shimmer {
+    100% {
+      translate: 100% 0;
+    }
+  }
+  @keyframes dot-pulse {
+    0%,
+    100% {
+      transform: scale(0.1);
+      opacity: 0.1;
+    }
+    40% {
+      transform: scale(1);
+      opacity: 1;
+    }
+  }
+  @keyframes toast-progress {
+    0% {
+      width: 100%;
+    }
+    100% {
+      width: 0%;
+    }
+  }
+}
+
 /* Scoped, opt-in preflight — the v4 replacement for v3's
  * `corePlugins.preflight:false` + `isolateInsideOfContainer`. The reset applies
  * only inside `.tailwindcss-preflight` (and descendants), so host apps with

package/src/theme.css

@@ -65,6 +65,7 @@
   --animate-spinner-dots: spinner-dots 1s ease-in-out infinite;
   --animate-marching-ants: marching-ants 1s linear infinite;
   --animate-kai-drift: kai-drift 12s ease-in-out infinite;
+  --animate-fade: fadeIn 100ms 100ms ease-in-out;
 
   /* Collapsible disclosure — keyframes below. `tw-animate-css` owns `collapsible-down`/`-up`
    * and every app imports it unlayered, so those two names are unusable here.
@@ -209,6 +210,14 @@
   }
 }
 
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
 @keyframes progress-bar {
   from {
     width: 0%;
@@ -277,26 +286,21 @@
 @utility duration-brand {
   /* v4 has no themeable transition-duration namespace, so keep this as a fallback-chain
    * utility (like bg-brand / shadow-lift) to preserve the runtime var + v3 fallback. */
+  --tw-duration: var(--motion-duration, 200ms);
   transition-duration: var(--motion-duration, 200ms);
 }
 @utility font-display {
-  font-family:
-    var(--font-display, var(--font-sans, Inter)),
-    system-ui,
-    -apple-system,
-    'Segoe UI',
-    Roboto,
-    sans-serif;
+  font-family: var(--font-display, var(--tw-font-sans));
 }
 
-/* Interaction-state variant — `not-disabled:hover:…`. Skips BOTH ways a control reports being
- * disabled; v4's core `not-*` compound reads the same name as `:not(:disabled)` alone, so this
- * deliberately shadows it. That shadowing is why the variant has to live here and not in an
+/* Interaction-state variant — `not-disabled:hover:…`. Skips every way a control reports being
+ * disabled (`:disabled`, `data-disabled`, `aria-disabled`); v4's core `not-*` compound reads the
+ * same name as `:not(:disabled)` alone, so this deliberately shadows it. That shadowing is why the variant has to live here and not in an
  * `addVariant` in design's `@config` plugin: an app's own build has no bridge to that plugin, so
  * it fell through to the core variant and silently dropped the `data-disabled` half — every
  * `tw:not-disabled:*` class kbc-ui authors that design's compiled CSS did not already carry
  * still highlighted a `[data-disabled="true"]` control on hover and focus. */
-@custom-variant not-disabled (&:not([data-disabled="true"]):not(:disabled));
+@custom-variant not-disabled (&:not([data-disabled="true"]):not([aria-disabled="true"]):not(:disabled));
 
 /* Interactive-surface variant — `interactive:hover:…`. Matches:
  * - an `<a href>`, unless it opts out with `data-interactive="false"`;
@@ -542,3 +546,101 @@
   --color-blue-800: #064a8f;
   --color-blue-900: #043566;
 }
+
+/* Kai's sparkle paints — `stroke-aigradient-600`, `fill-aigradient-700`, …
+ * - Point at the SVG gradients `ThemeProvider` renders (`AIGradientSvg`).
+ * - v4 has no themeable namespace for `url(#…)` paints, so these are utilities. */
+@utility stroke-aigradient-600 {
+  stroke: url(#aigradient-600);
+}
+@utility stroke-aigradient-700 {
+  stroke: url(#aigradient-700);
+}
+@utility fill-aigradient-600 {
+  fill: url(#aigradient-600);
+}
+@utility fill-aigradient-700 {
+  fill: url(#aigradient-700);
+}
+
+/* Scroll-container edge fade — `scroll-fade` (= `scroll-fade-y`) and `scroll-fade-x`.
+ * - A mask driven by scroll-driven animations; each edge holds 1 (solid) until there is overflow past it.
+ * - `--tw-scroll-fade-size` sets the depth; `--tw-scroll-fade-size-start` overrides the leading edge.
+ * - Browsers without scroll timelines show a static fade on both edges. */
+@property --tw-scroll-fade-start {
+  syntax: '<number>';
+  inherits: false;
+  initial-value: 1;
+}
+@property --tw-scroll-fade-end {
+  syntax: '<number>';
+  inherits: false;
+  initial-value: 1;
+}
+@keyframes tw-scroll-fade-reveal-start {
+  from {
+    --tw-scroll-fade-start: 1;
+  }
+  to {
+    --tw-scroll-fade-start: 0;
+  }
+}
+@keyframes tw-scroll-fade-reveal-end {
+  from {
+    --tw-scroll-fade-end: 0;
+  }
+  to {
+    --tw-scroll-fade-end: 1;
+  }
+}
+@utility scroll-fade-y {
+  --tw-scroll-fade-size: 1.5rem;
+  --tw-scroll-fade-mask: linear-gradient(
+    to bottom,
+    rgb(0 0 0 / var(--tw-scroll-fade-start)) 0,
+    #000 var(--tw-scroll-fade-size-start, var(--tw-scroll-fade-size)),
+    #000 calc(100% - var(--tw-scroll-fade-size)),
+    rgb(0 0 0 / var(--tw-scroll-fade-end)) 100%
+  );
+  -webkit-mask-image: var(--tw-scroll-fade-mask);
+  mask-image: var(--tw-scroll-fade-mask);
+  animation:
+    tw-scroll-fade-reveal-start linear both,
+    tw-scroll-fade-reveal-end linear both;
+  animation-timeline: scroll(self y), scroll(self y);
+  animation-range:
+    0 var(--tw-scroll-fade-size-start, var(--tw-scroll-fade-size)),
+    calc(100% - var(--tw-scroll-fade-size)) 100%;
+
+  @supports not (animation-timeline: scroll()) {
+    --tw-scroll-fade-start: 0;
+    --tw-scroll-fade-end: 0;
+  }
+}
+@utility scroll-fade {
+  @apply tw:scroll-fade-y;
+}
+@utility scroll-fade-x {
+  --tw-scroll-fade-size: 1.5rem;
+  --tw-scroll-fade-mask: linear-gradient(
+    to right,
+    rgb(0 0 0 / var(--tw-scroll-fade-start)) 0,
+    #000 var(--tw-scroll-fade-size-start, var(--tw-scroll-fade-size)),
+    #000 calc(100% - var(--tw-scroll-fade-size)),
+    rgb(0 0 0 / var(--tw-scroll-fade-end)) 100%
+  );
+  -webkit-mask-image: var(--tw-scroll-fade-mask);
+  mask-image: var(--tw-scroll-fade-mask);
+  animation:
+    tw-scroll-fade-reveal-start linear both,
+    tw-scroll-fade-reveal-end linear both;
+  animation-timeline: scroll(self x), scroll(self x);
+  animation-range:
+    0 var(--tw-scroll-fade-size-start, var(--tw-scroll-fade-size)),
+    calc(100% - var(--tw-scroll-fade-size)) 100%;
+
+  @supports not (animation-timeline: scroll()) {
+    --tw-scroll-fade-start: 0;
+    --tw-scroll-fade-end: 0;
+  }
+}