@keboola/design 12.0.0 → 13.0.0

package/dist/testing.js

@@ -1,10 +1,9 @@
 import { ArgoDesignContext } from "./context-U293r3v-.js";
-import { ThemeProvider } from "./ThemeProvider-DXsxFg1U.js";
+import { ThemeProvider } from "./ThemeProvider-VF38VfUa.js";
 import { jsx } from "react/jsx-runtime";
-import { keboola, keboolaLegacySidebar, keboolaLegacyTopnav } from "@keboola/brand-registry";
+import { keboola, keboolaLegacySidebar } from "@keboola/brand-registry";
 import { render } from "@testing-library/react";
 //#region src/testing/renderWithTheme.tsx
-const keboolaLegacyIds = [keboolaLegacySidebar.id, keboolaLegacyTopnav.id];
 /**
 * `@testing-library/react` `render` wrapped in a `<ThemeProvider brand={...}>`.
 *
@@ -14,7 +13,7 @@ const keboolaLegacyIds = [keboolaLegacySidebar.id, keboolaLegacyTopnav.id];
 */
 const renderWithTheme = (ui, options = {}) => {
 	const { brand = keboola, ...rest } = options;
-	const isArgo = !keboolaLegacyIds.includes(brand.id);
+	const isArgo = brand.id !== keboolaLegacySidebar.id;
 	return render(ui, {
 		...rest,
 		wrapper: ({ children }) => /* @__PURE__ */ jsx(ThemeProvider, {

package/dist/testing.js.map

@@ -1 +1 @@
-{"version":3,"file":"testing.js","names":[],"sources":["../src/testing/renderWithTheme.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport { render, type RenderOptions, type RenderResult } from '@testing-library/react';\n\nimport {\n  type Brand,\n  keboola,\n  keboolaLegacySidebar,\n  keboolaLegacyTopnav,\n} from '@keboola/brand-registry';\n\nimport { ArgoDesignContext, ThemeProvider } from '../components/ThemeProvider';\n\nconst keboolaLegacyIds = [keboolaLegacySidebar.id, keboolaLegacyTopnav.id];\n\ntype Options = Omit<RenderOptions, 'wrapper'> & {\n  /** Brand to drive the wrapping `<ThemeProvider>`. Defaults to `keboola`. */\n  brand?: Brand;\n};\n\n/**\n * `@testing-library/react` `render` wrapped in a `<ThemeProvider brand={...}>`.\n *\n * - For components that call `useTheme()` or use the brand CSS variables.\n * - Also provides `ArgoDesignContext` from the brand, as kbc-ui does: a legacy brand gets\n *   legacy chrome, any other argo.\n */\nexport const renderWithTheme = (ui: ReactElement, options: Options = {}): RenderResult => {\n  const { brand = keboola, ...rest } = options;\n  const isArgo = !keboolaLegacyIds.includes(brand.id);\n  return render(ui, {\n    ...rest,\n    wrapper: ({ children }) => (\n      <ThemeProvider brands={[brand]} brandId={brand.id}>\n        <ArgoDesignContext value={isArgo}>{children}</ArgoDesignContext>\n      </ThemeProvider>\n    ),\n  });\n};\n"],"mappings":";;;;;;AAYA,MAAM,mBAAmB,CAAC,qBAAqB,IAAI,oBAAoB,EAAE;;;;;;;;AAczE,MAAa,mBAAmB,IAAkB,UAAmB,CAAC,MAAoB;CACxF,MAAM,EAAE,QAAQ,SAAS,GAAG,SAAS;CACrC,MAAM,SAAS,CAAC,iBAAiB,SAAS,MAAM,EAAE;CAClD,OAAO,OAAO,IAAI;EAChB,GAAG;EACH,UAAU,EAAE,eACV,oBAAC,eAAD;GAAe,QAAQ,CAAC,KAAK;GAAG,SAAS,MAAM;GAC7C,UAAA,oBAAC,mBAAD;IAAmB,OAAO;IAAS;GAA4B,CAAA;EAClD,CAAA;CAEnB,CAAC;AACH"}
+{"version":3,"file":"testing.js","names":[],"sources":["../src/testing/renderWithTheme.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport { render, type RenderOptions, type RenderResult } from '@testing-library/react';\n\nimport { type Brand, keboola, keboolaLegacySidebar } from '@keboola/brand-registry';\n\nimport { ArgoDesignContext, ThemeProvider } from '../components/ThemeProvider';\n\ntype Options = Omit<RenderOptions, 'wrapper'> & {\n  /** Brand to drive the wrapping `<ThemeProvider>`. Defaults to `keboola`. */\n  brand?: Brand;\n};\n\n/**\n * `@testing-library/react` `render` wrapped in a `<ThemeProvider brand={...}>`.\n *\n * - For components that call `useTheme()` or use the brand CSS variables.\n * - Also provides `ArgoDesignContext` from the brand, as kbc-ui does: a legacy brand gets\n *   legacy chrome, any other argo.\n */\nexport const renderWithTheme = (ui: ReactElement, options: Options = {}): RenderResult => {\n  const { brand = keboola, ...rest } = options;\n  const isArgo = brand.id !== keboolaLegacySidebar.id;\n  return render(ui, {\n    ...rest,\n    wrapper: ({ children }) => (\n      <ThemeProvider brands={[brand]} brandId={brand.id}>\n        <ArgoDesignContext value={isArgo}>{children}</ArgoDesignContext>\n      </ThemeProvider>\n    ),\n  });\n};\n"],"mappings":";;;;;;;;;;;;;AAmBA,MAAa,mBAAmB,IAAkB,UAAmB,CAAC,MAAoB;CACxF,MAAM,EAAE,QAAQ,SAAS,GAAG,SAAS;CACrC,MAAM,SAAS,MAAM,OAAO,qBAAqB;CACjD,OAAO,OAAO,IAAI;EAChB,GAAG;EACH,UAAU,EAAE,eACV,oBAAC,eAAD;GAAe,QAAQ,CAAC,KAAK;GAAG,SAAS,MAAM;GAC7C,UAAA,oBAAC,mBAAD;IAAmB,OAAO;IAAS;GAA4B,CAAA;EAClD,CAAA;CAEnB,CAAC;AACH"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@keboola/design",
-  "version": "12.0.0",
+  "version": "13.0.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,14 +121,19 @@
   "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/oxlint-config": "^10.2.0",
+    "@keboola/tsconfig": "^0.2.1",
+    "@keboola/vitest-config": "^1.0.0",
     "@playwright/test": "1.63.0",
     "@size-limit/esbuild": "12.1.0",
     "@size-limit/file": "12.1.0",
-    "@storybook/addon-a11y": "10.2.19",
-    "@storybook/addon-docs": "^10.2.19",
-    "@storybook/addon-links": "^10.2.19",
-    "@storybook/addon-vitest": "10.2.19",
-    "@storybook/react-vite": "^10.2.19",
+    "@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",
     "@tailwindcss/cli": "^4.3.3",
     "@tailwindcss/typography": "^0.5.19",
     "@tailwindcss/vite": "^4.3.3",
@@ -141,10 +146,10 @@
     "@types/react-dom": "^19.3.0",
     "@typescript/native": "npm:typescript@^7.0.2",
     "@vitejs/plugin-react": "^6.1.1",
-    "@vitest/browser": "4.1.11",
-    "@vitest/browser-playwright": "4.1.11",
-    "@vitest/coverage-istanbul": "4.1.11",
-    "@vitest/coverage-v8": "^4.1.11",
+    "@vitest/browser": "5.0.1",
+    "@vitest/browser-playwright": "5.0.1",
+    "@vitest/coverage-istanbul": "5.0.1",
+    "@vitest/coverage-v8": "^5.0.1",
     "d3-color": "^3.1.0",
     "eslint-plugin-storybook": "^10.3.5",
     "oxfmt": "^0.66.0",
@@ -154,7 +159,7 @@
     "react-docgen-typescript": "^2.4.0",
     "react-dom": "^19.3.0",
     "size-limit": "12.1.0",
-    "storybook": "^10.2.19",
+    "storybook": "^10.6.1",
     "tailwindcss": "^4.3.3",
     "tailwindcss-scoped-preflight": "^4.0.6",
     "tsdown": "^0.22.14",
@@ -162,12 +167,7 @@
     "tw-animate-css": "^1.4.0",
     "typescript": "npm:@typescript/typescript6@^6.0.2",
     "vite": "^8.3.0",
-    "vitest": "^4.1.11",
-    "@keboola/eslint-plugin-design": "^0.5.0",
-    "@keboola/agent-vocabulary": "^0.1.1",
-    "@keboola/oxlint-config": "^10.2.0",
-    "@keboola/tsconfig": "^0.2.1",
-    "@keboola/vitest-config": "^1.0.0"
+    "vitest": "^5.0.1"
   },
   "peerDependencies": {
     "@testing-library/react": "^16.3.2",
@@ -194,6 +194,9 @@
     "@codemirror/state": "^6.7.1",
     "@codemirror/view": "^6.43.9",
     "@iconify-json/lucide": "^1.2.118",
+    "@keboola/brand-registry": "^2.0.0",
+    "@keboola/codemirror-lang-sql": "^0.7.3",
+    "@keboola/tailwind-config": "^1.2.0",
     "@lexical/code": "^0.42.0",
     "@lexical/link": "^0.42.0",
     "@lexical/list": "^0.42.0",
@@ -238,7 +241,7 @@
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
     "diff": "^9.0.0",
-    "dompurify": "^3.4.14",
+    "dompurify": "^3.4.16",
     "flint-chart": "0.5.1",
     "input-otp": "^1.4.2",
     "lexical": "^0.42.0",
@@ -255,10 +258,7 @@
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.6.0",
     "vega": "^6.4.0",
-    "vega-lite": "^6.4.3",
-    "@keboola/brand-registry": "^1.10.0",
-    "@keboola/codemirror-lang-sql": "^0.7.3",
-    "@keboola/tailwind-config": "^1.2.0"
+    "vega-lite": "^6.4.3"
   },
   "scripts": {
     "dev": "storybook dev -p \"${PORT:-6006}\"",
@@ -268,7 +268,7 @@
     "build:js": "tsdown",
     "build:css": "tailwindcss -i src/styles.css -o dist/styles.css --minify",
     "build:check": "node ../../tooling/check-dist-exports.mjs && attw --pack . --profile esm-only --exclude-entrypoints ./styles ./styles/compiled ./theme",
-    "test": "vitest run --config vite.config.ts --passWithNoTests --reporter=dot",
+    "test": "vitest run --config vite.config.ts --reporter=dot",
     "test:stories": "vitest run --config vitest.config.ts --reporter=default --reporter=github-actions --reporter=junit --outputFile.junit=./junit-report.stories.xml",
     "test:stories:coverage": "vitest run --config vitest.config.ts --coverage",
     "test:visual": "playwright test -c playwright.visual.config.ts",

package/src/theme.css

@@ -92,7 +92,6 @@
   box-shadow:
     var(--tw-ring-offset-shadow, 0 0 #0000),
     var(--tw-ring-shadow, 0 0 #0000),
-    0 0 0 1px rgb(124 92 255 / 0.12),
     0 6px 18px -8px rgb(56 132 255 / 0.55);
 
   &::before {
@@ -284,6 +283,12 @@
  * still highlighted a `[data-disabled="true"]` control on hover and focus. */
 @custom-variant not-disabled (&:not([data-disabled="true"]):not(:disabled));
 
+/* Interactive-surface variant — `interactive:hover:…`. Matches:
+ * - an `<a href>`, unless it opts out with `data-interactive="false"`;
+ * - any element that opts in with `data-interactive="true"`.
+ * Lives here, not in a JS plugin, for the same reason as `not-disabled`: apps compile design's classes. */
+@custom-variant interactive (&:is([data-interactive="true"], a[href]:not([data-interactive="false"])));
+
 @theme inline {
   --color-inherit: inherit;
   --color-transparent: rgba(255, 255, 255, 0);