@mortenbrudvik/waveui 0.4.0 → 0.7.0

package/package.json

@@ -1,100 +1,149 @@
-{
-  "name": "@mortenbrudvik/waveui",
-  "version": "0.4.0",
-  "type": "module",
-  "description": "A comprehensive React component library with modern design tokens — accessible, composable components built with TypeScript and Tailwind CSS",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/waveui/wave-ui-react.git"
-  },
-  "homepage": "https://github.com/waveui/wave-ui-react#readme",
-  "bugs": {
-    "url": "https://github.com/waveui/wave-ui-react/issues"
-  },
-  "engines": {
-    "node": ">=20.19.0"
-  },
-  "keywords": [
-    "react",
-    "component-library",
-    "waveui",
-    "design-system",
-    "typescript",
-    "tailwind",
-    "accessible"
-  ],
-  "sideEffects": [
-    "*.css"
-  ],
-  "main": "./dist/index.cjs",
-  "module": "./dist/index.mjs",
-  "types": "./dist/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.cjs"
-    },
-    "./styles": "./src/styles/globals.css",
-    "./tokens": "./src/styles/tokens.css"
-  },
-  "files": [
-    "dist",
-    "src/styles"
-  ],
-  "scripts": {
-    "dev": "storybook dev -p 6006",
-    "build": "tsc --noEmit && vite build",
-    "test": "vitest run",
-    "test:watch": "vitest",
-    "test:coverage": "vitest run --coverage",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
-    "typecheck": "tsc --noEmit",
-    "lint": "eslint src/ stories/",
-    "lint:fix": "eslint src/ stories/ --fix",
-    "format": "prettier --write \"src/**/*.{ts,tsx}\" \"stories/**/*.{ts,tsx}\"",
-    "format:check": "prettier --check \"src/**/*.{ts,tsx}\" \"stories/**/*.{ts,tsx}\"",
-    "prepublishOnly": "npm run build && npm test"
-  },
-  "peerDependencies": {
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0"
-  },
-  "dependencies": {
-    "clsx": "^2.1.1",
-    "tailwind-merge": "^3.5.0"
-  },
-  "devDependencies": {
-    "@eslint/js": "^10.0.1",
-    "@storybook/addon-a11y": "^10.2.19",
-    "@storybook/react": "^10.2.19",
-    "@storybook/react-vite": "^10.2.19",
-    "@tailwindcss/vite": "^4.2.1",
-    "@testing-library/dom": "^10.4.1",
-    "@testing-library/jest-dom": "^6.6.0",
-    "@testing-library/react": "^16.3.2",
-    "@testing-library/user-event": "^14.6.1",
-    "@types/react": "^19.2.14",
-    "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^6.0.1",
-    "@vitest/coverage-v8": "^4.1.0",
-    "ajv": "^8.18.0",
-    "eslint": "^10.0.3",
-    "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-react-hooks": "^7.0.1",
-    "jsdom": "^29.0.0",
-    "prettier": "^3.8.1",
-    "react": "^19.2.4",
-    "react-dom": "^19.2.4",
-    "storybook": "^10.2.19",
-    "tailwindcss": "^4.2.1",
-    "typescript": "^5.7.0",
-    "typescript-eslint": "^8.57.1",
-    "vite": "^8.0.0",
-    "vite-plugin-dts": "^4.5.4",
-    "vitest": "^4.1.0",
-    "vitest-axe": "^0.1.0"
-  }
-}
+{
+  "name": "@mortenbrudvik/waveui",
+  "version": "0.7.0",
+  "type": "module",
+  "description": "A comprehensive React component library with modern design tokens — accessible, composable components built with TypeScript and Tailwind CSS",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/mortenbrudvik/waveui.git"
+  },
+  "homepage": "https://github.com/mortenbrudvik/waveui#readme",
+  "bugs": {
+    "url": "https://github.com/mortenbrudvik/waveui/issues"
+  },
+  "engines": {
+    "node": ">=22.12.0"
+  },
+  "devEngines": {
+    "runtime": {
+      "name": "node",
+      "version": "^22.22.2 || ^24.15.0 || >=26.0.0",
+      "onFail": "error"
+    },
+    "packageManager": {
+      "name": "npm",
+      "version": ">=11.11.0",
+      "onFail": "warn"
+    }
+  },
+  "keywords": [
+    "react",
+    "component-library",
+    "waveui",
+    "design-system",
+    "typescript",
+    "tailwind",
+    "accessible"
+  ],
+  "sideEffects": [
+    "*.css"
+  ],
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./styles": "./dist/styles.css",
+    "./styles.css": "./dist/styles.css",
+    "./preflight.css": "./dist/preflight.css",
+    "./tailwind": "./src/styles/tailwind.css",
+    "./tailwind.css": "./src/styles/tailwind.css",
+    "./tokens": "./src/styles/tokens.css",
+    "./tokens.css": "./src/styles/tokens.css",
+    "./variants": "./src/styles/variants.css",
+    "./variants.css": "./src/styles/variants.css",
+    "./legacy-tokens.css": "./src/styles/legacy-tokens.css",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "src/styles",
+    "!src/styles/__tests__"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "dev": "storybook dev -p 6006",
+    "build": "tsc -p tsconfig.json --noEmit && vite build && node scripts/build-css.mjs && node scripts/verify-dist.mjs",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build && node scripts/verify-storybook.mjs",
+    "typecheck": "tsc -p tsconfig.json --noEmit && tsc -p tsconfig.dev.json --noEmit && tsc -p tsconfig.node.json --noEmit && node scripts/check-ts-coverage.mjs",
+    "lint": "eslint --max-warnings 0 src/ stories/ .storybook/ scripts/",
+    "lint:fix": "eslint src/ stories/ .storybook/ scripts/ --fix",
+    "format": "prettier --write \"src/**/*.{ts,tsx}\" \"stories/**/*.{ts,tsx}\" \".storybook/**/*.{ts,tsx,css}\" \"scripts/**/*.{js,mjs,cjs,ts,mts,cts,tsx,css,json}\"",
+    "format:check": "prettier --check \"src/**/*.{ts,tsx}\" \"stories/**/*.{ts,tsx}\" \".storybook/**/*.{ts,tsx,css}\" \"scripts/**/*.{js,mjs,cjs,ts,mts,cts,tsx,css,json}\"",
+    "check:package": "publint && node scripts/attw-pack.mjs --profile node16 --exclude-entrypoints styles styles.css preflight.css tailwind tailwind.css tokens tokens.css variants variants.css legacy-tokens.css",
+    "test:pack": "node scripts/pack-smoke.mjs",
+    "prepublishOnly": "npm run typecheck && npm run build && node scripts/verify-dist.mjs --final && npm test && npm run check:package && npm run test:pack"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tailwindcss": "^4.1.0"
+  },
+  "peerDependenciesMeta": {
+    "tailwindcss": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "@floating-ui/react-dom": "^2.1.9",
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^3.7.0"
+  },
+  "devDependencies": {
+    "@arethetypeswrong/cli": "^0.18.5",
+    "@eslint/js": "^10.0.1",
+    "@storybook/addon-a11y": "^10.6.0",
+    "@storybook/addon-docs": "^10.6.0",
+    "@storybook/addon-mcp": "^10.6.0",
+    "@storybook/react": "^10.6.0",
+    "@storybook/react-vite": "^10.6.0",
+    "@tailwindcss/cli": "^4.3.3",
+    "@tailwindcss/vite": "^4.3.3",
+    "@testing-library/dom": "^10.4.2",
+    "@testing-library/jest-dom": "^7.0.1",
+    "@testing-library/react": "^16.3.3",
+    "@testing-library/user-event": "^14.6.7",
+    "@types/node": "^22.20.4",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "@vitejs/plugin-react": "^6.1.1",
+    "@vitest/coverage-v8": "^5.0.2",
+    "ajv": "^8.20.0",
+    "eslint": "^10.11.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "jsdom": "^30.1.1",
+    "prettier": "^3.9.9",
+    "publint": "^0.3.24",
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0",
+    "storybook": "^10.6.0",
+    "tailwindcss": "^4.3.3",
+    "typescript": "~6.0.3",
+    "typescript-eslint": "^8.70.1",
+    "vite": "^8.3.1",
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^5.0.2",
+    "vitest-axe": "^0.1.0"
+  },
+  "allowScripts": {
+    "esbuild": false,
+    "@parcel/watcher": false
+  }
+}

package/src/styles/animations.css

@@ -1,39 +1,7 @@
-@keyframes wave-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@keyframes wave-pulse {
-  0%,
-  100% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.4;
-  }
-}
-
-@keyframes wave-indeterminate {
-  0% {
-    transform: translateX(-100%);
-  }
-  100% {
-    transform: translateX(350%);
-  }
-}
-
-/* Respect user preference for reduced motion (WCAG 2.1 SC 2.3.3) */
-@media (prefers-reduced-motion: reduce) {
-  *,
-  *::before,
-  *::after {
-    animation-duration: 0.01ms !important;
-    animation-iteration-count: 1 !important;
-    transition-duration: 0.01ms !important;
-    scroll-behavior: auto !important;
-  }
-}
+/*
+ * Deprecated (0.5): intentionally empty; will be removed in 1.0.
+ *
+ * The `wave-*` keyframes moved into the `@theme` block of tokens.css, so Tailwind emits them
+ * together with the `animate-wave-*` utilities. The former global `*` reduced-motion override
+ * was removed: reduced motion is handled per component with `motion-reduce:` variants.
+ */

package/src/styles/base.css

@@ -0,0 +1,103 @@
+/*
+ * Wave base styles, scoped to WaveProvider roots (`.wave-root`) and portal wrappers
+ * (`.wave-portal`). Nothing here touches the rest of the page: no Preflight, no `body` rules,
+ * no global `*` rules. WaveProvider is therefore required for the precompiled `./styles` path.
+ *
+ * Unlayered in `dist/styles.css`, `layer(base)` in the `./tailwind` entry. The two root rules are
+ * class selectors (0,1,0). Every other selector is inside `:where()` (zero specificity), except
+ * the descendant `::before`/`::after` selectors of the box-sizing rule: pseudo-elements cannot sit
+ * inside `:where()` (the selector would be dropped), so those two are (0,0,1). An author
+ * `::before`/`::after` of the same specificity wins or loses by source order. The only
+ * `!important` declaration is the `hidden` rule at the end.
+ */
+
+.wave-root,
+.wave-portal {
+  font-family: var(--wave-font-family);
+  color: var(--wave-foreground);
+  font-size: 14px;
+  line-height: 20px;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* Portal wrappers never paint a background; surfaces paint their own. */
+.wave-root {
+  background-color: var(--wave-background);
+}
+
+/* Pseudo-elements stay outside :where(): they are invalid inside it and forgiving selector
+   parsing would drop them silently. */
+:where(.wave-root, .wave-portal) :where(*),
+:where(.wave-root, .wave-portal) :where(*)::before,
+:where(.wave-root, .wave-portal) :where(*)::after {
+  box-sizing: border-box;
+  border-color: var(--wave-border);
+}
+
+/* Native-element reset, limited to what Wave renders (C-NATIVE). `border: 0 solid` removes the
+   UA button border so a single `border-b-2` utility draws only the bottom edge. */
+:where(.wave-root, .wave-portal) :where(button, input, select, textarea) {
+  font: inherit;
+  color: inherit;
+  letter-spacing: inherit;
+  margin: 0;
+  padding: 0;
+  border: 0 solid;
+  background-color: transparent;
+}
+
+:where(.wave-root, .wave-portal) :where(button, [role='button']) {
+  cursor: pointer;
+}
+
+:where(.wave-root, .wave-portal) :where(ul, ol) {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+:where(.wave-root, .wave-portal) :where(h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd) {
+  margin: 0;
+}
+
+:where(.wave-root, .wave-portal) :where(h1, h2, h3, h4, h5, h6) {
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+:where(.wave-root, .wave-portal) :where(fieldset) {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  min-width: 0;
+}
+
+:where(.wave-root, .wave-portal) :where(legend) {
+  padding: 0;
+}
+
+:where(.wave-root, .wave-portal) :where(table) {
+  border-collapse: collapse;
+  text-indent: 0;
+}
+
+:where(.wave-root, .wave-portal) :where(hr) {
+  height: 0;
+  border: 0 solid;
+  border-top-width: 1px;
+  color: inherit;
+  margin: 0;
+}
+
+:where(.wave-root, .wave-portal) :where(img, svg, video) {
+  vertical-align: middle;
+}
+
+/* Preflight's `hidden` rule. Without Preflight, a display utility on an element (a component
+   root's `inline-flex`, an option's `flex`) beats the user-agent `[hidden] { display: none }`
+   rule and `hidden` does nothing. `!important` wins over every utility, unlayered or in a later
+   layer; `hidden="until-found"` keeps the browser's own behaviour. */
+:where(.wave-root, .wave-portal) :where([hidden]:not([hidden='until-found'])) {
+  display: none !important;
+}

package/src/styles/globals.css

@@ -1,22 +1,10 @@
-@import 'tailwindcss';
-@import './tokens.css';
-@import './animations.css';
-
-@layer base {
-  body {
-    font-family: 'Segoe UI', 'Segoe UI Web (West European)', -apple-system,
-      BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif;
-    color: var(--foreground);
-    background-color: var(--background);
-    font-size: 14px;
-    line-height: 20px;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-  }
-
-  *,
-  *::before,
-  *::after {
-    border-color: var(--border);
-  }
-}
+/*
+ * Development entry (not exported). Mirrors the Tailwind consumer path of
+ * `@mortenbrudvik/waveui/tailwind`: Tailwind with its own sources, Wave tokens in the `theme`
+ * layer, Wave's scoped base in the `base` layer and the `wave-rtl:` variant.
+ */
+
+@import 'tailwindcss';
+@import './tokens.css' layer(theme);
+@import './base.css' layer(base);
+@import './variants.css';

package/src/styles/legacy-tokens.css

@@ -0,0 +1,184 @@
+/*
+ * DEPRECATED 0.4 compatibility layer (`@mortenbrudvik/waveui/legacy-tokens.css`); removed in 1.0.
+ *
+ * 0.5 renamed the runtime variables to `--wave-*`. Import this file only if your app reads or
+ * overrides the 0.4 names (`--primary`, `--background`, `--border`, `--brand-80`, …), and load it
+ * AFTER `@mortenbrudvik/waveui/styles` or `@mortenbrudvik/waveui/tailwind`.
+ *
+ * Never import it in an app that defines shadcn/ui-style variables (`--primary`, `--background`,
+ * …): the names collide, which is why 0.5 prefixed them. Migration: rename your overrides to the
+ * `--wave-*` names and drop this import.
+ *
+ * - The 0.4 ramp names are declared as literal constants, so code that reads them keeps working.
+ *   They never reference `--wave-brand-*` (tokens.css reads them as fallbacks: no cycle).
+ * - The 0.4 semantic names are re-declared per theme with the 0.5 values, and the `--wave-*`
+ *   semantics point at them, so reading and overriding the 0.4 names both work.
+ * - Light values sit on `:root` (as in 0.4, so `:root { --primary: … }` overrides reach a light
+ *   WaveProvider) and on a light subtree nested inside another theme.
+ */
+
+/* 0.4 ramp names (constants, read-only compatibility) */
+:root {
+  --brand-10: #061724;
+  --brand-20: #082338;
+  --brand-30: #0a2e4a;
+  --brand-40: #0c3b5e;
+  --brand-50: #0e4775;
+  --brand-60: #0f548c;
+  --brand-70: #115ea3;
+  --brand-80: #0f6cbd;
+  --brand-90: #2886de;
+  --brand-100: #479ef5;
+  --brand-110: #62abf5;
+  --brand-120: #77b7f7;
+  --brand-130: #96c6fa;
+  --brand-140: #b4d6fa;
+  --brand-150: #cfe4fa;
+  --brand-160: #ebf3fc;
+
+  --grey-2: #050505;
+  --grey-4: #0a0a0a;
+  --grey-6: #0f0f0f;
+  --grey-8: #141414;
+  --grey-10: #1a1a1a;
+  --grey-12: #1f1f1f;
+  --grey-14: #242424;
+  --grey-16: #292929;
+  --grey-20: #333333;
+  --grey-24: #3d3d3d;
+  --grey-26: #424242;
+  --grey-30: #4d4d4d;
+  --grey-34: #575757;
+  --grey-38: #616161;
+  --grey-40: #666666;
+  --grey-44: #707070;
+  --grey-50: #808080;
+  --grey-60: #999999;
+  --grey-68: #adadad;
+  --grey-74: #bdbdbd;
+  --grey-78: #c7c7c7;
+  --grey-82: #d1d1d1;
+  --grey-86: #dbdbdb;
+  --grey-88: #e0e0e0;
+  --grey-90: #e6e6e6;
+  --grey-92: #ebebeb;
+  --grey-94: #f0f0f0;
+  --grey-96: #f5f5f5;
+  --grey-98: #fafafa;
+}
+
+/* 0.4 semantic names — light */
+:root,
+:where(.wave-dark, .dark, .wave-high-contrast, .high-contrast) .wave-light {
+  --background: #ffffff;
+  --foreground: #242424;
+  --card: #fafafa;
+  --card-foreground: var(--foreground);
+  --primary: var(--wave-brand-80);
+  --primary-foreground: #ffffff;
+  --secondary: #f5f5f5;
+  --secondary-foreground: var(--foreground);
+  --muted: #f0f0f0;
+  --muted-foreground: #616161;
+  --accent: var(--primary);
+  --accent-foreground: var(--primary-foreground);
+  --destructive: #c50f1f;
+  --destructive-foreground: #ffffff;
+  --subtle: transparent;
+  --border: #e0e0e0;
+  --input: #d1d1d1;
+  --ring: var(--wave-brand-80);
+  --success: #107c10;
+  --warning: #fde300;
+  --error: #c50f1f;
+  --info: #0f6cbd;
+  --severe: #da3b01;
+}
+
+/* 0.4 semantic names — dark */
+.wave-dark,
+.dark {
+  --background: #292929;
+  --foreground: #ffffff;
+  --card: #333333;
+  --card-foreground: var(--foreground);
+  --primary: var(--wave-brand-110);
+  --primary-foreground: #000000;
+  --secondary: #333333;
+  --secondary-foreground: var(--foreground);
+  --muted: #383838;
+  --muted-foreground: #adadad;
+  --accent: var(--primary);
+  --accent-foreground: var(--primary-foreground);
+  --destructive: #f48a94;
+  --destructive-foreground: #000000;
+  --subtle: transparent;
+  --border: #666666;
+  --input: #666666;
+  --ring: var(--wave-brand-100);
+  --success: #5db55d;
+  --warning: #fde300;
+  --error: #f48a94;
+  --info: #479ef5;
+  --severe: #e97548;
+}
+
+/* 0.4 semantic names — high contrast */
+.wave-high-contrast,
+.high-contrast {
+  --background: #000000;
+  --foreground: #ffffff;
+  --card: #000000;
+  --card-foreground: var(--foreground);
+  --primary: #1aebff;
+  --primary-foreground: #000000;
+  --secondary: #000000;
+  --secondary-foreground: var(--foreground);
+  --muted: #1a1a1a;
+  --muted-foreground: #ffffff;
+  --accent: var(--primary);
+  --accent-foreground: var(--primary-foreground);
+  --destructive: #ff6e6e;
+  --destructive-foreground: #000000;
+  --subtle: transparent;
+  --border: #ffffff;
+  --input: #ffffff;
+  --ring: #ffff00;
+  --success: #3ff23f;
+  --warning: #ffff00;
+  --error: #ff6e6e;
+  --info: #1aebff;
+  --severe: #ff8c00;
+}
+
+/* The `--wave-*` semantics read the 0.4 names in every theme group. */
+:root,
+.wave-light,
+.wave-dark,
+.dark,
+.wave-high-contrast,
+.high-contrast {
+  --wave-background: var(--background);
+  --wave-foreground: var(--foreground);
+  --wave-card: var(--card);
+  --wave-card-foreground: var(--card-foreground);
+  --wave-primary: var(--primary);
+  --wave-primary-foreground: var(--primary-foreground);
+  --wave-secondary: var(--secondary);
+  --wave-secondary-foreground: var(--secondary-foreground);
+  --wave-muted: var(--muted);
+  --wave-muted-foreground: var(--muted-foreground);
+  --wave-accent: var(--accent);
+  --wave-accent-foreground: var(--accent-foreground);
+  --wave-destructive: var(--destructive);
+  --wave-destructive-foreground: var(--destructive-foreground);
+  --wave-subtle: var(--subtle);
+  --wave-border: var(--border);
+  --wave-input: var(--input);
+  --wave-ring: var(--ring);
+  --wave-success: var(--success);
+  --wave-warning: var(--warning);
+  --wave-error: var(--error);
+  --wave-info: var(--info);
+  --wave-severe: var(--severe);
+}

package/src/styles/preflight.css

@@ -0,0 +1,7 @@
+/*
+ * Opt-in Tailwind Preflight (`@mortenbrudvik/waveui/preflight.css`), compiled unlayered to
+ * `dist/preflight.css` by `scripts/build-css.mjs`. Wave does not need it (base.css resets the
+ * native elements it renders inside `.wave-root`/`.wave-portal`); it applies to the whole page.
+ */
+
+@import 'tailwindcss/preflight.css';

package/src/styles/styles.css

@@ -0,0 +1,32 @@
+/*
+ * Build input for the precompiled, unlayered `dist/styles.css` (`@mortenbrudvik/waveui/styles`),
+ * compiled by `scripts/build-css.mjs`. For apps without Tailwind; Tailwind users import
+ * `@mortenbrudvik/waveui/tailwind` instead.
+ *
+ * - `theme(inline)` inlines Tailwind's default theme into the utilities, so no `--spacing`,
+ *   `--font-sans`, `--radius-*` or palette variables are emitted.
+ * - `source(none)` disables automatic source detection; only the sources below are scanned
+ *   (tests excluded, stories never included).
+ * - Utilities come last so they beat the equal-specificity root rules of base.css.
+ * - The `animate-wave-*` utilities are always emitted, so the keyframes they reference are
+ *   always part of the precompiled CSS.
+ * - Tailwind reads every word of the sources, comments and non-class strings included. The
+ *   `@source not inline()` list holds such words that name a Tailwind utility no component uses
+ *   as a class (`visibility === 'collapse'`, `addEventListener('blur', …)`, JSDoc prose), so
+ *   the unlayered file never restyles an app's own `.collapse`, `.container` or `.table`.
+ *   `scripts/build-css.mjs` fails on any class that no class string of the library uses: add
+ *   such a word here (or rephrase the comment).
+ */
+
+@import 'tailwindcss/theme.css' theme(inline);
+@import './tokens.css';
+@import './base.css';
+@import './variants.css';
+@import 'tailwindcss/utilities.css' source(none);
+
+@source '../components';
+@source '../lib';
+@source not '../components/**/__tests__';
+@source not '../lib/**/__tests__';
+@source inline('animate-wave-spin animate-wave-spin-slow animate-wave-pulse animate-wave-indeterminate animate-wave-indeterminate-rtl');
+@source not inline('blur collapse container end filter hover:bg-error! inline list-item lowercase not-disabled:not-aria-disabled:hover:bg-error outline resize ring select-all shadow sm:inline start static table text-input transform visible');