@nldd/design-system 0.8.73 → 0.8.75

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nldd/design-system",
-  "version": "0.8.73",
+  "version": "0.8.75",
   "description": "Design System voor Nederlandse Digitale Dienst",
   "type": "module",
   "main": "dist/components/components.js",
@@ -420,11 +420,13 @@
       "default": "./dist/components/status-and-feedback/just-in-time-education/just-in-time-education.js"
     },
     "./styles": "./dist/css/global.css",
-    "./styles/tokens": "./dist/css/settings.css",
+    "./styles/system-font": "./dist/css/global-system-font.css",
+    "./styles/variables": "./dist/css/variables.css",
+    "./styles/tokens": "./dist/css/tokens.css",
     "./styles/fouc": "./dist/css/fouc.css",
-    "./tokens": {
-      "types": "./dist/assets/styles/tokens.d.ts",
-      "default": "./dist/assets/styles/tokens.js"
+    "./breakpoints": {
+      "types": "./dist/assets/styles/breakpoints.d.ts",
+      "default": "./dist/assets/styles/breakpoints.js"
     },
     "./vue": {
       "types": "./dist/types/vue.d.ts"
@@ -432,7 +434,9 @@
   },
   "files": [
     "dist",
-    "custom-elements.json"
+    "custom-elements.json",
+    "LICENSE",
+    "NOTICES.md"
   ],
   "repository": {
     "type": "git",
@@ -443,17 +447,19 @@
     "registry": "https://registry.npmjs.org"
   },
   "scripts": {
-    "build": "npm run build:styles && npm run validate:styles && npm run build:components",
-    "build:styles": "mkdir -p dist/css dist/fonts && cp src/assets/styles/settings.css dist/css/settings.css && cp src/assets/styles/reset.css dist/css/reset.css && cp src/assets/styles/palettes.generated.css dist/css/palettes.generated.css && cp src/components/content/rich-text/rich-text.css dist/css/rich-text.css && cp src/components/forms/form/form.css dist/css/form.css && cp src/components/forms/form-section/form-section.css dist/css/form-section.css && cp src/assets/styles/fouc.css dist/css/fouc.css && printf '@import \"./settings.css\";\\n@import \"./reset.css\";\\n@import \"./rich-text.css\";\\n@import \"./form-section.css\";\\n@import \"./form.css\";\\n@import \"./fouc.css\";\\n' > dist/css/global.css && cp src/assets/fonts/*.woff2 dist/fonts/",
-    "generate:palettes": "node scripts/generate-palettes.js",
+    "build": "npm run build:styles && npm run validate:styles && npm run validate:host-styles && npm run build:components",
+    "build:styles": "rm -rf dist/css dist/fonts && mkdir -p dist/css dist/fonts && cp src/assets/styles/variables.css src/assets/styles/colors.generated.css src/assets/styles/rijksoverheid-fonts.css src/assets/styles/document-reset.css src/assets/styles/fouc.css dist/css/ && cp src/components/content/rich-text/rich-text.css src/components/forms/form/form.css src/components/forms/form-section/form-section.css dist/css/ && printf '@import \"./rijksoverheid-fonts.css\";\\n@import \"./variables.css\";\\n@import \"./document-reset.css\";\\n@import \"./rich-text.css\";\\n@import \"./form-section.css\";\\n@import \"./form.css\";\\n@import \"./fouc.css\";\\n' > dist/css/global.css && printf '@import \"./variables.css\";\\n@import \"./document-reset.css\";\\n@import \"./rich-text.css\";\\n@import \"./form-section.css\";\\n@import \"./form.css\";\\n@import \"./fouc.css\";\\n' > dist/css/global-system-font.css && printf '@import \"./rijksoverheid-fonts.css\";\\n@import \"./variables.css\";\\n' > dist/css/tokens.css && cp src/assets/fonts/*.woff2 dist/fonts/",
+    "generate:colors": "node scripts/generate-colors.js",
     "generate:component-reference": "node scripts/generate-component-reference.js",
     "generate:cem": "cem analyze && npm run generate:vue-types",
     "generate:vue-types": "node scripts/generate-vue-types.js",
     "generate:skill-changelog": "node scripts/generate-skill-changelog.js",
     "generate:skill-principles": "node scripts/generate-skill-principles.js",
     "generate:plugin-version": "node scripts/sync-plugin-version.js",
+    "generate:publiccode": "node scripts/sync-publiccode.js",
     "generate:skill-docs": "npm run generate:component-reference && npm run generate:skill-changelog && npm run generate:skill-principles && npm run generate:plugin-version",
     "validate:styles": "node scripts/validate-css-variables.js",
+    "validate:host-styles": "node scripts/validate-host-styles.js",
     "validate:component-api": "node scripts/validate-component-api.js",
     "build:components": "npm run clean:components && npm run build:icons && npm run build:components:modules && npm run build:components:bundle && npm run build:exports && npm run generate:cem",
     "build:icons": "node scripts/generate-icon-registry.js && node scripts/generate-logo.js",
@@ -480,6 +486,7 @@
     "test": "vitest",
     "test:run": "vitest run",
     "test:scripts": "node --test scripts/*.test.mjs scripts/lib/*.test.mjs",
+    "pretypecheck": "npm run build:icons",
     "typecheck": "tsc --noEmit",
     "test:vue-types": "vue-tsc --noEmit -p type-tests/vue/tsconfig.json"
   },

package/dist/assets/styles/style-resets.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"style-resets.d.ts","sourceRoot":"","sources":["../../../src/assets/styles/style-resets.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,eAAO,MAAM,YAAY,yBAExB,CAAC;AAEF;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,kBAAkB,yBAK9B,CAAC"}

package/dist/assets/styles/style-resets.fixtures.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"style-resets.fixtures.d.ts","sourceRoot":"","sources":["../../../src/assets/styles/style-resets.fixtures.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,eAAO,MAAM,cAAc,ueAS1B,CAAC"}

package/dist/assets/styles/style-resets.fixtures.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"style-resets.fixtures.js","sourceRoot":"","sources":["../../../src/assets/styles/style-resets.fixtures.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG;;;;;;;;;CAS7B,CAAC"}

package/dist/assets/styles/style-resets.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"style-resets.js","sourceRoot":"","sources":["../../../src/assets/styles/style-resets.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;CAE9B,CAAC;AAEF;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,CAAA;;;;;CAKpC,CAAC"}

package/dist/assets/styles/tokens.d.ts

@@ -1,25 +0,0 @@
-/**
- * JavaScript-accessible design tokens for `@nldd/design-system`.
- *
- * Most tokens live in `settings.css` as CSS custom properties — that's the
- * right home for anything CSS consumes directly. This module re-exports the
- * subset of tokens that consumers also need from JavaScript: matchMedia
- * thresholds, IntersectionObserver root margins, container-query breakpoints
- * computed in JS, etc.
- *
- * Imported via the package's `./tokens` export:
- *
- * ```ts
- * import { breakpoints } from '@nldd/design-system/tokens';
- *
- * const isDesktop = matchMedia(`(min-width: ${breakpoints.lgMin})`).matches;
- * ```
- *
- * Add re-exports here as new JS-side tokens land. Keep CSS-only tokens out —
- * duplicating them here would invite drift. If something is needed in JS,
- * make the canonical source a `.ts` constants file (like `breakpoints.ts`)
- * and let `settings.css` derive from it via build-time generation, rather
- * than the other way around.
- */
-export { breakpoints } from './breakpoints.js';
-//# sourceMappingURL=tokens.d.ts.map

package/dist/assets/styles/tokens.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../../src/assets/styles/tokens.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/assets/styles/tokens.js

@@ -1,25 +0,0 @@
-/**
- * JavaScript-accessible design tokens for `@nldd/design-system`.
- *
- * Most tokens live in `settings.css` as CSS custom properties — that's the
- * right home for anything CSS consumes directly. This module re-exports the
- * subset of tokens that consumers also need from JavaScript: matchMedia
- * thresholds, IntersectionObserver root margins, container-query breakpoints
- * computed in JS, etc.
- *
- * Imported via the package's `./tokens` export:
- *
- * ```ts
- * import { breakpoints } from '@nldd/design-system/tokens';
- *
- * const isDesktop = matchMedia(`(min-width: ${breakpoints.lgMin})`).matches;
- * ```
- *
- * Add re-exports here as new JS-side tokens land. Keep CSS-only tokens out —
- * duplicating them here would invite drift. If something is needed in JS,
- * make the canonical source a `.ts` constants file (like `breakpoints.ts`)
- * and let `settings.css` derive from it via build-time generation, rather
- * than the other way around.
- */
-export { breakpoints } from './breakpoints.js';
-//# sourceMappingURL=tokens.js.map

package/dist/assets/styles/tokens.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"tokens.js","sourceRoot":"","sources":["../../../src/assets/styles/tokens.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/css/reset.css

@@ -1,7 +0,0 @@
-@layer reset {
-	html:has(nldd-app-view),
-	html:has(nldd-app-view) body {
-		margin: 0;
-		height: 100%;
-	}
-}