@keboola/design 9.1.0 → 11.0.0

package/package.json

@@ -1,13 +1,12 @@
 {
   "name": "@keboola/design",
-  "version": "9.1.0",
+  "version": "11.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",
   "sideEffects": [
     "**/*.css"
   ],
-  "main": "./dist/index.cjs",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "typesVersions": {
@@ -37,86 +36,38 @@
   },
   "exports": {
     ".": {
-      "import": {
-        "types": "./dist/index.d.ts",
-        "default": "./dist/index.js"
-      },
-      "require": {
-        "types": "./dist/index.d.cts",
-        "default": "./dist/index.cjs"
-      }
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
     },
     "./styles": "./src/styles.css",
     "./styles/compiled": "./dist/styles.css",
     "./charts": {
-      "import": {
-        "types": "./dist/charts.d.ts",
-        "default": "./dist/charts.js"
-      },
-      "require": {
-        "types": "./dist/charts.d.cts",
-        "default": "./dist/charts.cjs"
-      }
+      "types": "./dist/charts.d.ts",
+      "default": "./dist/charts.js"
     },
     "./mermaid": {
-      "import": {
-        "types": "./dist/mermaid.d.ts",
-        "default": "./dist/mermaid.js"
-      },
-      "require": {
-        "types": "./dist/mermaid.d.cts",
-        "default": "./dist/mermaid.cjs"
-      }
+      "types": "./dist/mermaid.d.ts",
+      "default": "./dist/mermaid.js"
     },
     "./markdown-editor": {
-      "import": {
-        "types": "./dist/markdown-editor.d.ts",
-        "default": "./dist/markdown-editor.js"
-      },
-      "require": {
-        "types": "./dist/markdown-editor.d.cts",
-        "default": "./dist/markdown-editor.cjs"
-      }
+      "types": "./dist/markdown-editor.d.ts",
+      "default": "./dist/markdown-editor.js"
     },
     "./editors": {
-      "import": {
-        "types": "./dist/editors.d.ts",
-        "default": "./dist/editors.js"
-      },
-      "require": {
-        "types": "./dist/editors.d.cts",
-        "default": "./dist/editors.cjs"
-      }
+      "types": "./dist/editors.d.ts",
+      "default": "./dist/editors.js"
     },
     "./icons": {
-      "import": {
-        "types": "./dist/icons.d.ts",
-        "default": "./dist/icons.js"
-      },
-      "require": {
-        "types": "./dist/icons.d.cts",
-        "default": "./dist/icons.cjs"
-      }
+      "types": "./dist/icons.d.ts",
+      "default": "./dist/icons.js"
     },
     "./rjsf": {
-      "import": {
-        "types": "./dist/rjsf.d.ts",
-        "default": "./dist/rjsf.js"
-      },
-      "require": {
-        "types": "./dist/rjsf.d.cts",
-        "default": "./dist/rjsf.cjs"
-      }
+      "types": "./dist/rjsf.d.ts",
+      "default": "./dist/rjsf.js"
     },
     "./testing": {
-      "import": {
-        "types": "./dist/testing.d.ts",
-        "default": "./dist/testing.js"
-      },
-      "require": {
-        "types": "./dist/testing.d.cts",
-        "default": "./dist/testing.cjs"
-      }
+      "types": "./dist/testing.d.ts",
+      "default": "./dist/testing.js"
     },
     "./theme": "./src/theme.css"
   },
@@ -156,6 +107,7 @@
     "@arethetypeswrong/cli": "^0.18.2",
     "@google/design.md": "0.2.0",
     "@playwright/test": "1.60.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",
@@ -176,6 +128,7 @@
     "@vitest/browser": "4.1.10",
     "@vitest/browser-playwright": "4.1.10",
     "@vitest/coverage-istanbul": "4.1.10",
+    "@vitest/coverage-v8": "^4.1.10",
     "eslint-plugin-storybook": "^10.3.5",
     "oxfmt": "^0.57.0",
     "oxlint": "^1.72.0",
@@ -193,8 +146,9 @@
     "typescript": "npm:@typescript/typescript6@^6.0.2",
     "vite": "^8.1.5",
     "vitest": "^4.1.10",
-    "@keboola/oxlint-config": "^8.1.0",
-    "@keboola/tsconfig": "^0.2.0"
+    "@keboola/vitest-config": "^1.0.0",
+    "@keboola/tsconfig": "^0.2.0",
+    "@keboola/oxlint-config": "^10.0.1"
   },
   "peerDependencies": {
     "@testing-library/react": "^16.3.2",
@@ -221,6 +175,7 @@
     "@codemirror/state": "^6.7.1",
     "@codemirror/view": "^6.43.6",
     "@iconify-json/lucide": "^1.2.118",
+    "@lezer/highlight": "^1.2.3",
     "@lexical/code": "^0.42.0",
     "@lexical/link": "^0.42.0",
     "@lexical/list": "^0.42.0",
@@ -278,18 +233,18 @@
     "remark-gfm": "^4.0.1",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.6.0",
-    "@keboola/brand-registry": "^1.7.0",
-    "@keboola/codemirror-lang-sql": "^0.4.0",
-    "@keboola/tailwind-config": "^1.0.0"
+    "@keboola/codemirror-lang-sql": "^0.7.0",
+    "@keboola/tailwind-config": "^1.1.0",
+    "@keboola/brand-registry": "^1.9.1"
   },
   "scripts": {
-    "dev": "storybook dev -p 6006",
+    "dev": "storybook dev -p \"${PORT:-6006}\"",
     "build-storybook": "storybook build",
     "transit": "pnpm build",
     "build": "pnpm build:js && pnpm build:css",
     "build:js": "tsup",
     "build:css": "tailwindcss -i src/styles.css -o dist/styles.css --minify",
-    "build:check": "attw --pack . --exclude-entrypoints ./styles ./styles/compiled ./theme",
+    "build:check": "attw --pack . --profile esm-only --exclude-entrypoints ./styles ./styles/compiled ./theme",
     "test": "vitest run --config vite.config.ts --passWithNoTests --reporter=dot",
     "test:stories": "vitest run --config vitest.config.ts",
     "test:stories:coverage": "vitest run --config vitest.config.ts --coverage",
@@ -302,13 +257,14 @@
     "lint:format": "oxfmt --check",
     "lint:oxlint": "oxlint . --quiet",
     "lint:design": "designmd lint DESIGN.md",
-    "ci-checks": "pnpm check:api && pnpm check:icons && pnpm size",
+    "ci-checks": "pnpm check:api && pnpm check:icons && pnpm check:contrast && pnpm size",
     "size": "size-limit",
     "generate:api": "tsx scripts/generate-component-api.ts",
     "check:api": "tsx scripts/generate-component-api.ts --check",
     "audit:contrast": "tsx scripts/contrast-audit.ts",
     "type-check": "tsc",
     "generate:icons": "tsx scripts/generate-icon-exports.ts",
-    "check:icons": "tsx scripts/generate-icon-exports.ts && git diff --exit-code -- src/icons/index.ts"
+    "check:icons": "tsx scripts/generate-icon-exports.ts && git diff --exit-code -- src/icons/index.ts",
+    "check:contrast": "tsx scripts/contrast-audit.ts && git diff --exit-code -- CONTRAST-AUDIT.md"
   }
 }

package/src/styles.css

@@ -13,10 +13,16 @@
 @import 'react-day-picker/src/style.css';
 @import './theme.css';
 
-/* Tokens, the (extended) theme, typography + our custom variants/utilities 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>)`). */
+/* Test files name utility classes as data — `customUtilities.test.ts` compiles every custom
+ * utility by name, `brandNeutrality.test.ts` spells out colour literals — and v4 scans them like
+ * any other source, emitting those candidates into the bundle apps ship. Nothing a test alone
+ * 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. */
 @config '../tailwind.config.js';
 
 /* Scoped, opt-in preflight — the v4 replacement for v3's
@@ -31,7 +37,7 @@
 /*
  * Semantic color tokens — read by Tailwind via rgb(var(--*) / <alpha-value>) in
  * packages/tailwind-config/colors.ts. Channel values are stored as space-separated RGB so
- * Tailwind opacity modifiers (e.g. `tw-bg-muted/50`) resolve correctly.
+ * Tailwind opacity modifiers (e.g. `tw:bg-muted/50`) resolve correctly.
  * Primitive scales (neutral-*, primary-*, error-*, warning-*, etc.) remain hardcoded in colors.ts.
  */
 :root {
@@ -60,7 +66,10 @@
 
   /* Border / Input / Ring */
   --border: 229 231 235; /* #e5e7eb */
-  --input: 203 213 225; /* #cbd5e1 */
+  --input: 203 213 225; /* #cbd5e1 — the control's border, not its fill */
+  /* The fill of a form control. Its own token rather than `card`: a field is not
+     a raised container, and a brand tints the two independently. */
+  --input-background: 255 255 255; /* #ffffff */
   --ring: var(--primary); /* follows brand primary (default #2563eb) */
   --ring-offset: 255 255 255; /* #ffffff — focus-ring offset gap */
 
@@ -116,6 +125,14 @@
      with a black shadow so it doesn't read as a light halo on dark surfaces. */
   --shadow-raised: 0 2px 6px 0 rgb(100 135 153 / 0.13);
 
+  /* Runtime mirrors of the `shadow-card` / `shadow-table` @theme tokens, so a rule
+     can read `var(--shadow-card)` and follow the colour scheme. Declared here rather
+     than left to @theme: v4 inlines an @theme value into the utility it generates and
+     emits no custom property for it, so `var(--shadow-table)` would resolve to nothing
+     and drop the shadow entirely. Values match theme.css; the dark block overrides both. */
+  --shadow-card: 0px 1px 4px rgb(100 135 153 / 0.15);
+  --shadow-table: 0px 6px 6px -4px rgb(100 135 153 / 0.13);
+
   /* Typography pairing — display + mono faces; a brand overrides via
      `theme.typography.fontDisplay` / `fontMono`. Display defaults to the body
      face (`--font-sans`), then the canonical Inter stack, so unset brands keep
@@ -200,7 +217,11 @@
 
   /* Border / Input / Ring */
   --border: 52 53 62; /* #34353e */
-  --input: 60 61 71; /* #3c3d47 */
+  --input: 60 61 71; /* #3c3d47 — the control's border, not its fill */
+  /* Lighter than `background` (#131317), `card` (#222228) and `popover` (#26262d)
+     so a field stays legible as its own surface on all three — a single opaque
+     fill has to clear the lightest container it can sit in. */
+  --input-background: 47 48 55; /* #2f3037 */
   --ring: var(--primary); /* follows brand primary (default #1f8fff) */
   --ring-offset: 19 19 23; /* #131317 — focus-ring offset gap (dark background) */
 
@@ -243,6 +264,20 @@
      blue-gray, which reads as a halo around Card / Search on dark surfaces. */
   --shadow-raised: 0 2px 6px 0 rgb(0 0 0 / 0.4);
 
+  /* Same correction for the two elevation tokens apps author directly — the pale
+     blue-gray lights up against a dark surface instead of reading as depth, and under
+     a sticky table header it read as a glowing seam. `--shadow-table` is softer than
+     `--shadow-raised` because the header casts a full-width band.
+
+     Reaches rules that read `var(--shadow-table)` / `var(--shadow-card)` directly,
+     which is how kbc-ui's Less consumes them. It does NOT reach the `shadow-table` /
+     `shadow-card` Tailwind utilities: those are `@theme` tokens (theme.css), so v4
+     inlines the light literal into the generated class at build time. Making the
+     utilities scheme-aware needs the token to carry a `var(--runtime, fallback)`
+     shape, which is a separate change with control-ui / boilerplate to verify against. */
+  --shadow-card: 0px 1px 4px rgb(0 0 0 / 0.4);
+  --shadow-table: 0px 6px 6px -4px rgb(0 0 0 / 0.3);
+
   /* Table header — lighter than card so the header row reads as raised on dark
      (light value is the tailwind-config fallback: 219 225 235). */
   --table-header: 54 55 65;
@@ -285,8 +320,8 @@
   html {
     /* Brand font opt-in: a brand's `typography.fontFamily` is injected as
        `--font-sans` by ThemeProvider and inherited from `html`; absent a brand
-       the fallback reproduces the canonical `tw-font-sans` stack so default
-       rendering is unchanged. Elements that set `tw-font-sans` explicitly also
+       the fallback reproduces the canonical `tw:font-sans` stack so default
+       rendering is unchanged. Elements that set `tw:font-sans` explicitly also
        follow the brand — the Tailwind `fontFamily.sans` scale reads `--font-sans`
        with the same `Inter` fallback. */
     font-family: var(
@@ -368,11 +403,40 @@
   }
 }
 
-@layer components {
+/* Legacy (dark) tooltip chrome — invert nested prose for contrast. Must live in
+ * `utilities`: `.tw\:prose` declares the same `--tw-prose-*` variables from that
+ * layer, and the layer order at the top of this file makes `utilities` win over
+ * `components` regardless of specificity. */
+@layer utilities {
   [data-tooltip-content='true'] .tw\:prose {
     @apply tw:prose-invert;
+
+    /* Typography's own `a`/`code` rules are `:where()`-wrapped (specificity 0), so
+     * the inverted variables never reach a link rendered by design's `Link`
+     * (`tw:text-primary`) nor an inline-code background a host's global CSS paints. */
+    a {
+      @apply tw:text-blue-300 tw:hover:text-blue-200;
+    }
+
+    /* Inline code only — scoped the way AIKit's markdown prose does it
+     * (`tw:[&_:not(pre)>code]:…` in `blocks/AIKit/Markdown.tsx`) so a fenced
+     * block's `pre > code` keeps `--tw-prose-invert-pre-bg`. */
+    :not(pre) > code {
+      @apply tw:bg-white/10 tw:text-neutral-100;
+    }
+
+    /* `.tw\:prose blockquote` (components layer, below) fills with the light
+     * `--muted`; on the dark tooltip that would put the now-inverted light text
+     * on a light fill. Re-fill with the same `white/10` wash the inline-code
+     * chip uses — the file's one translucent-overlay idiom, and the only fill
+     * that works against a fixed `bg-neutral-800` without a second token. */
+    blockquote {
+      @apply tw:bg-white/10;
+    }
   }
+}
 
+@layer components {
   .tw\:prose blockquote {
     border-left: 4px solid rgb(var(--border));
     background-color: rgb(var(--muted));
@@ -392,3 +456,24 @@
     pointer-events: auto !important;
   }
 }
+
+@layer utilities {
+  /* Tailwind Typography pins its own palette (`--tw-prose-bold`, `--tw-prose-headings`,
+     …) to light-mode values, so those elements stay near-black when the semantic tokens
+     flip — bold text in a Markdown answer renders dark-on-dark. `prose` has no awareness
+     of `[data-theme]`, so invert it here.
+     
+     In `utilities`, not `components`: `.tw:prose` is itself a utility, and a v4 cascade
+     layer beats specificity outright — a more specific rule in `components` still loses
+     to the plain utility. Same layer, higher specificity, so this wins. */
+  [data-theme='dark'] .tw\:prose {
+    @apply tw:prose-invert;
+  }
+}
+
+@layer utilities {
+  [data-header-span='full']
+    > [data-app-shell-slot]:has(> [data-collapsible='off-canvas'][data-state='collapsed']) {
+    overflow-x: clip;
+  }
+}

package/src/theme.css

@@ -11,6 +11,20 @@
  * design AND every v4 app) so those utilities resolve again. Each token keeps the
  * v3 `var(--runtime-var, fallback)` shape so `ThemeProvider` can still re-skin it. */
 @theme {
+  /* Body face — `font-sans`. Design keeps the v3 `fontFamily.sans` scale through its
+   * `@config` bridge, but the apps have no such bridge, so there `font-sans` resolved
+   * to v4's stock stack: no `Inter`, no brand hook. Every element that sets the
+   * utility explicitly (top-bar nav, inputs, menu descriptions) therefore rendered in
+   * a system face while its siblings inherited Inter from `html`. Re-registering the
+   * token restores the v3 value: the brand's `--font-sans` (emitted by ThemeProvider)
+   * first, then the canonical Inter stack. Safe as a @theme token because the emitted
+   * name is prefixed (`--tw-font-sans`) and so cannot cycle with the runtime var it
+   * reads — unlike `font-display`, which must stay an @utility. */
+  --font-sans:
+    var(--font-sans, Inter), system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
+    'Noto Sans', 'Liberation Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+    'Segoe UI Symbol', 'Noto Color Emoji';
+
   /* Legacy Bootstrap-era breakpoints (screens). */
   --breakpoint-sm-legacy: 992px;
   --breakpoint-md-legacy: 1092px;
@@ -32,6 +46,12 @@
   --shadow-table: 0px 6px 6px -4px rgba(100, 135, 153, 0.13);
   --radius-card: 10px;
 
+  /* Raised-surface elevation — `shadow-raised`. Dark-aware: `styles.css` flips the runtime
+   * `--shadow-raised` to a black shadow under `[data-theme='dark']`. Reading a var of the same
+   * name is safe here because the emitted token is prefixed (`--tw-shadow-raised`), so the two
+   * cannot cycle — same reasoning as `--font-sans` above. */
+  --shadow-raised: var(--shadow-raised, 0 2px 6px 0 rgb(100 135 153 / 0.13));
+
   /* Brand easing — `ease-brand`. The runtime override var (`--motion-easing`) differs from
    * this @theme token name, so registering it here drops no fallback (unlike bg-brand /
    * shadow-lift, whose runtime var name collides → they stay @utility below). */
@@ -41,6 +61,12 @@
   --animate-progress-bar: progress-bar var(--progress-bar-duration, 3s) linear forwards;
   --animate-spinner-dots: spinner-dots 1s ease-in-out infinite;
   --animate-marching-ants: marching-ants 1s linear infinite;
+
+  /* Collapsible disclosure — keyframes below. `tw-animate-css` owns `collapsible-down`/`-up`
+   * and every app imports it unlayered, so those two names are unusable here.
+   * 300ms `ease` is the motion the retired `Collapse` had. */
+  --animate-collapsible-open: collapsible-open 300ms ease;
+  --animate-collapsible-close: collapsible-close 300ms ease;
 }
 
 @keyframes progress-bar {
@@ -68,6 +94,29 @@
     stroke-dashoffset: -12;
   }
 }
+/* `overflow` animates discretely — it flips mid-animation, so both endpoints must clip for the
+ * content to stay inside the box the whole way. No fill mode, so a settled-open panel is back to
+ * its own `overflow: visible` at its own height. */
+@keyframes collapsible-open {
+  from {
+    height: 0;
+    overflow: hidden;
+  }
+  to {
+    height: var(--radix-collapsible-content-height);
+    overflow: hidden;
+  }
+}
+@keyframes collapsible-close {
+  from {
+    height: var(--radix-collapsible-content-height);
+    overflow: hidden;
+  }
+  to {
+    height: 0;
+    overflow: hidden;
+  }
+}
 
 /* Fallback-chain utilities (kept as @utility, not @theme, so the runtime-var +
  * fallback chain is preserved exactly as v3 emitted it — a @theme token whose name
@@ -100,6 +149,21 @@
     sans-serif;
 }
 
+/* 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
+ * `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));
+
+/* `overflow-wrap: anywhere` — no v4 core utility covers it (`break-words` is `break-word`,
+ * which keeps long unbroken tokens overflowing). Authored in 16 app files. */
+@utility break-anywhere {
+  overflow-wrap: anywhere;
+}
+
 @theme inline {
   --color-inherit: inherit;
   --color-transparent: rgba(255, 255, 255, 0);
@@ -118,6 +182,7 @@
   --color-accent-foreground: rgb(var(--accent-foreground));
   --color-border: rgb(var(--border));
   --color-input: rgb(var(--input));
+  --color-input-background: rgb(var(--input-background));
   --color-ring: rgb(var(--ring));
   --color-ring-offset: rgb(var(--ring-offset));
   --color-chart-1: rgb(var(--chart-1));