@nldd/design-system 0.8.40 → 0.8.41

package/dist/components/status-and-feedback/inline-dialog/inline-dialog.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"inline-dialog.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/inline-dialog/inline-dialog.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,kBAAkB,yBAgG9B,CAAC"}
+{"version":3,"file":"inline-dialog.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/inline-dialog/inline-dialog.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,kBAAkB,yBAiG9B,CAAC"}

package/dist/components/status-and-feedback/inline-dialog/inline-dialog.styles.js

@@ -5,12 +5,13 @@ export const inlineDialogStyles = css `
 	/* # Host */
 
 	:host {
+		--_icon-size: var(--primitives-space-48);
+		--_icon-color: var(--semantics-content-color);
+
 		display: flex;
 		justify-content: center;
 		align-items: center;
 		flex-grow: 1;
-
-		--_icon-color: var(--semantics-content-color);
 	}
 
 	:host([hidden]) {
@@ -18,7 +19,7 @@ export const inlineDialogStyles = css `
 	}
 
 	:host([variant='alert']) {
-		--_icon-color: var(--primitives-color-warning-350);
+		--_icon-color: light-dark(var(--primitives-color-warning-350), var(--primitives-color-warning-650));
 	}
 
 
@@ -40,8 +41,8 @@ export const inlineDialogStyles = css `
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		width: var(--primitives-space-48);
-		height: var(--primitives-space-48);
+		width: var(--_icon-size);
+		height: var(--_icon-size);
 		color: var(--_icon-color);
 		flex-shrink: 0;
 	}

package/dist/components/status-and-feedback/inline-dialog/inline-dialog.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"inline-dialog.styles.js","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/inline-dialog/inline-dialog.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgGpC,CAAC"}
+{"version":3,"file":"inline-dialog.styles.js","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/inline-dialog/inline-dialog.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiGpC,CAAC"}

package/dist/components/status-and-feedback/modal-dialog/modal-dialog.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"modal-dialog.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/modal-dialog/modal-dialog.styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,iBAAiB,yBA8F7B,CAAC"}
+{"version":3,"file":"modal-dialog.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/modal-dialog/modal-dialog.styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,iBAAiB,yBA+F7B,CAAC"}

package/dist/components/status-and-feedback/modal-dialog/modal-dialog.styles.js

@@ -7,10 +7,11 @@ export const modalDialogStyles = css `
 	/* # Host */
 
 	:host {
-		display: contents;
 		--_max-height: 90vh;
 		--_animation-duration: 150ms;
 		--_animation-easing: ease;
+
+		display: contents;
 	}
 
 	:host([hidden]) {

package/dist/components/status-and-feedback/modal-dialog/modal-dialog.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal-dialog.styles.js","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/modal-dialog/modal-dialog.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,uCAAuC,CAAC;AAEpE,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAE3C,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBAiCb,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6D3B,CAAC"}
+{"version":3,"file":"modal-dialog.styles.js","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/modal-dialog/modal-dialog.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,uCAAuC,CAAC;AAEpE,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAE3C,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBAkCb,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6D3B,CAAC"}

package/dist/css/settings.css

@@ -572,6 +572,41 @@
 		var(--primitives-font-family-body)
 	;
 
+	/* Monospace tokens use one font-size step smaller than the matching body
+	   size. Constant character widths in monospace render denser than
+	   proportional fonts, so monospace-md sits visually next to body-md
+	   while using font-size-90 (16px) instead of -100 (18px). */
+	--primitives-font-monospace-md-regular-snug:
+		var(--primitives-font-weight-body-regular)
+		var(--primitives-font-size-90) / var(--primitives-line-height-snug)
+		var(--primitives-font-family-monospace)
+	;
+	--primitives-font-monospace-md-regular-flat:
+		var(--primitives-font-weight-body-regular)
+		var(--primitives-font-size-90) / var(--primitives-line-height-flat)
+		var(--primitives-font-family-monospace)
+	;
+	--primitives-font-monospace-sm-regular-snug:
+		var(--primitives-font-weight-body-regular)
+		var(--primitives-font-size-80) / var(--primitives-line-height-snug)
+		var(--primitives-font-family-monospace)
+	;
+	--primitives-font-monospace-sm-regular-flat:
+		var(--primitives-font-weight-body-regular)
+		var(--primitives-font-size-80) / var(--primitives-line-height-flat)
+		var(--primitives-font-family-monospace)
+	;
+	--primitives-font-monospace-xs-regular-snug:
+		var(--primitives-font-weight-body-regular)
+		var(--primitives-font-size-70) / var(--primitives-line-height-snug)
+		var(--primitives-font-family-monospace)
+	;
+	--primitives-font-monospace-xs-regular-flat:
+		var(--primitives-font-weight-body-regular)
+		var(--primitives-font-size-70) / var(--primitives-line-height-flat)
+		var(--primitives-font-family-monospace)
+	;
+
 	--primitives-font-display-1-sm:
 		var(--primitives-font-weight-display-bold)
 		var(--primitives-font-size-700) / var(--primitives-line-height-flat)
@@ -839,7 +874,7 @@
 	--semantics-buttons-neutral-tinted-background-color: light-dark(var(--primitives-color-neutral-75), var(--primitives-color-neutral-200));
 	--semantics-buttons-neutral-tinted-content-color: light-dark(var(--primitives-color-neutral-900), var(--primitives-color-neutral-900));
 	--semantics-buttons-neutral-tinted-secondary-content-color: light-dark(var(--primitives-color-neutral-750), var(--primitives-color-neutral-750));
-	--semantics-buttons-neutral-tinted-divider-color: light-dark(var(--primitives-color-neutral-250), var(--primitives-color-neutral-350));
+	--semantics-buttons-neutral-tinted-divider-color: light-dark(var(--primitives-color-neutral-250), var(--primitives-color-neutral-450));
 	--semantics-buttons-neutral-tinted-is-hovered-background-color: light-dark(var(--primitives-color-neutral-100), var(--primitives-color-neutral-250));
 	--semantics-buttons-neutral-tinted-is-hovered-content-color: light-dark(var(--primitives-color-neutral-1000), var(--primitives-color-neutral-1000));
 	--semantics-buttons-neutral-tinted-is-hovered-secondary-content-color: light-dark(var(--primitives-color-neutral-650), var(--primitives-color-neutral-800));
@@ -866,6 +901,7 @@
 	--semantics-buttons-accent-filled-is-hovered-content-color: light-dark(var(--primitives-color-accent-0), var(--primitives-color-accent-0));
 	--semantics-buttons-accent-filled-is-active-background-color: light-dark(var(--primitives-color-accent-850), var(--primitives-color-accent-750));
 	--semantics-buttons-accent-filled-is-active-content-color: light-dark(var(--primitives-color-accent-0), var(--primitives-color-accent-0));
+	--semantics-buttons-accent-filled-divider-color: light-dark(var(--primitives-color-accent-500), var(--primitives-color-accent-450));
 
 	--semantics-buttons-accent-outlined-border-thickness: var(--primitives-border-width-regular);
 	--semantics-buttons-accent-outlined-border-color: light-dark(var(--primitives-color-accent-750), var(--primitives-color-accent-650));
@@ -1059,6 +1095,39 @@
 	--components-keyboard-shortcut-corner-radius: var(--primitives-corner-radius-xs);
 	--components-keyboard-shortcut-separator-color: var(--semantics-content-secondary-color);
 
+	/* ## Code
+
+	   Token colors used by nldd-code's Prism syntax highlighting.
+	   Solarized-inspired, mapped to descriptive DS palettes. Consumers
+	   can override per-instance on `nldd-code` to swap the theme. */
+
+	--components-code-token-comment-color: var(--semantics-content-secondary-color);
+	--components-code-token-punctuation-color: var(--semantics-content-color);
+	--components-code-token-keyword-color: var(--primitives-color-donkergeel-650);
+	--components-code-token-string-color: var(--primitives-color-groen-650);
+	--components-code-token-number-color: var(--primitives-color-oranje-650);
+	--components-code-token-boolean-color: var(--primitives-color-oranje-650);
+	--components-code-token-null-color: var(--primitives-color-oranje-650);
+	--components-code-token-function-color: var(--primitives-color-lintblauw-650);
+	--components-code-token-class-color: var(--primitives-color-donkergeel-650);
+	--components-code-token-builtin-color: var(--primitives-color-donkergeel-650);
+	--components-code-token-tag-color: var(--primitives-color-groen-650);
+	--components-code-token-attr-name-color: var(--primitives-color-lintblauw-650);
+	--components-code-token-attr-value-color: var(--primitives-color-mintgroen-650);
+	--components-code-token-property-color: var(--primitives-color-lintblauw-650);
+	--components-code-token-selector-color: var(--primitives-color-donkergeel-650);
+	--components-code-token-atrule-color: var(--primitives-color-groen-650);
+	--components-code-token-regex-color: var(--primitives-color-rood-650);
+	--components-code-token-url-color: var(--primitives-color-mintgroen-650);
+	--components-code-token-operator-color: var(--primitives-color-groen-650);
+	--components-code-token-constant-color: var(--primitives-color-oranje-650);
+	--components-code-token-deleted-color: var(--primitives-color-rood-650);
+	--components-code-token-inserted-color: var(--primitives-color-groen-650);
+	--components-code-token-important-color: var(--primitives-color-rood-650);
+	--components-code-token-symbol-color: var(--primitives-color-violet-650);
+	--components-code-token-entity-color: var(--primitives-color-paars-650);
+	--components-code-token-variable-color: var(--primitives-color-lintblauw-650);
+
 	/* ## List */
 
 	--components-list-corner-radius: var(--semantics-controls-md-corner-radius);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nldd/design-system",
-  "version": "0.8.40",
+  "version": "0.8.41",
   "description": "Design System voor Nederlandse Digitale Dienst",
   "type": "module",
   "main": "dist/components/components.js",
@@ -63,6 +63,10 @@
       "types": "./dist/components/content/keyboard-shortcut/keyboard-shortcut.d.ts",
       "default": "./dist/components/content/keyboard-shortcut/keyboard-shortcut.js"
     },
+    "./code": {
+      "types": "./dist/components/content/code/code.d.ts",
+      "default": "./dist/components/content/code/code.js"
+    },
     "./form": {
       "types": "./dist/components/forms/form/form.d.ts",
       "default": "./dist/components/forms/form/form.js"
@@ -87,6 +91,10 @@
       "types": "./dist/components/inputs/multi-line-text-field/multi-line-text-field.d.ts",
       "default": "./dist/components/inputs/multi-line-text-field/multi-line-text-field.js"
     },
+    "./code-editor": {
+      "types": "./dist/components/inputs/code-editor/code-editor.d.ts",
+      "default": "./dist/components/inputs/code-editor/code-editor.js"
+    },
     "./password-field": {
       "types": "./dist/components/inputs/password-field/password-field.d.ts",
       "default": "./dist/components/inputs/password-field/password-field.js"
@@ -381,6 +389,7 @@
     "@storybook/addon-themes": "^10.3.4",
     "@storybook/addon-vitest": "^10.3.4",
     "@storybook/web-components-vite": "^10.3.4",
+    "@types/prismjs": "^1.26.6",
     "@vitest/browser-playwright": "^4.0.16",
     "@vitest/coverage-v8": "^4.0.16",
     "eslint": "^9.17.0",
@@ -408,6 +417,7 @@
   "dependencies": {
     "@floating-ui/dom": "^1.7.6",
     "@rijkshuisstijl-community/font": "^1.1.2",
-    "lit": "^3.3.1"
+    "lit": "^3.3.1",
+    "prismjs": "^1.30.0"
   }
 }