@nldd/design-system 0.8.40 → 0.8.42

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

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

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

@@ -6,9 +6,10 @@
  *
  * @element nldd-inline-dialog
  *
- * @attr {'alert'} variant       - Semantic variant; 'alert' forces icon="alert" and colors the icon
- * @attr {string}  icon          - Name of the nldd-icon icon above the text; absent when not set. Ignored when variant is set.
- * @attr {string}  text          - Main text (heading or paragraph, depending on heading-level)
+ * @attr {'alert'|'success'} variant - Semantic variant; 'alert' or 'success' forces a matching icon and color
+ * @attr {string}  icon            - Name of the nldd-icon icon above the text; absent when not set. Ignored when variant is set.
+ * @attr {string}  icon-color      - 'secondary' | 'accent' | 'critical' | 'warning' | 'success'. Overrides the default and variant icon color.
+ * @attr {string}  text            - Main text (heading or paragraph, depending on heading-level)
  * @attr {string}  supporting-text - Supporting text below the heading
  * @attr {1|2|3|4|5|6} heading-level - Renders text as h1–h6; absent renders a p
  *
@@ -18,11 +19,13 @@
 import { LitElement } from 'lit';
 import '../../content/icon/icon.js';
 import '../../actions/button-group/button-group.js';
-export type InlineDialogVariant = 'alert';
+export type InlineDialogVariant = 'alert' | 'success';
+export type InlineDialogIconColor = 'secondary' | 'accent' | 'critical' | 'warning' | 'success';
 export declare class NLDDInlineDialog extends LitElement {
     static styles: import("lit").CSSResult;
     variant: InlineDialogVariant | '';
     icon: string;
+    iconColor: InlineDialogIconColor | '';
     text: string;
     supportingText: string;
     headingLevel: 1 | 2 | 3 | 4 | 5 | 6 | null;

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

@@ -1 +1 @@
-{"version":3,"file":"inline-dialog.d.ts","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/inline-dialog/inline-dialog.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAIjC,OAAO,4BAA4B,CAAC;AACpC,OAAO,4CAA4C,CAAC;AAEpD,MAAM,MAAM,mBAAmB,GAAG,OAAO,CAAC;AAE1C,qBACa,gBAAiB,SAAQ,UAAU;IAC/C,OAAgB,MAAM,0BAAsB;IAG5C,OAAO,EAAE,mBAAmB,GAAG,EAAE,CAAM;IAGvC,IAAI,SAAM;IAGV,IAAI,SAAM;IAGV,cAAc,SAAM;IAGpB,YAAY,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,IAAI,CAAQ;IAGlD,WAAW,UAAS;IAGpB,WAAW,UAAS;IAEpB,IAAI,iBAAiB,IAAI,MAAM,CAI9B;IAEQ,YAAY;IAsBZ,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,oBAAoB,EAAE,gBAAgB,CAAC;KACvC;CACD"}
+{"version":3,"file":"inline-dialog.d.ts","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/inline-dialog/inline-dialog.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAIjC,OAAO,4BAA4B,CAAC;AACpC,OAAO,4CAA4C,CAAC;AAEpD,MAAM,MAAM,mBAAmB,GAAG,OAAO,GAAG,SAAS,CAAC;AACtD,MAAM,MAAM,qBAAqB,GAAG,WAAW,GAAG,QAAQ,GAAG,UAAU,GAAG,SAAS,GAAG,SAAS,CAAC;AAEhG,qBACa,gBAAiB,SAAQ,UAAU;IAC/C,OAAgB,MAAM,0BAAsB;IAG5C,OAAO,EAAE,mBAAmB,GAAG,EAAE,CAAM;IAGvC,IAAI,SAAM;IAGV,SAAS,EAAE,qBAAqB,GAAG,EAAE,CAAM;IAG3C,IAAI,SAAM;IAGV,cAAc,SAAM;IAGpB,YAAY,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,IAAI,CAAQ;IAGlD,WAAW,UAAS;IAGpB,WAAW,UAAS;IAEpB,IAAI,iBAAiB,IAAI,MAAM,CAK9B;IAEQ,YAAY;IAsBZ,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,oBAAoB,EAAE,gBAAgB,CAAC;KACvC;CACD"}

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

@@ -12,9 +12,10 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
  *
  * @element nldd-inline-dialog
  *
- * @attr {'alert'} variant       - Semantic variant; 'alert' forces icon="alert" and colors the icon
- * @attr {string}  icon          - Name of the nldd-icon icon above the text; absent when not set. Ignored when variant is set.
- * @attr {string}  text          - Main text (heading or paragraph, depending on heading-level)
+ * @attr {'alert'|'success'} variant - Semantic variant; 'alert' or 'success' forces a matching icon and color
+ * @attr {string}  icon            - Name of the nldd-icon icon above the text; absent when not set. Ignored when variant is set.
+ * @attr {string}  icon-color      - 'secondary' | 'accent' | 'critical' | 'warning' | 'success'. Overrides the default and variant icon color.
+ * @attr {string}  text            - Main text (heading or paragraph, depending on heading-level)
  * @attr {string}  supporting-text - Supporting text below the heading
  * @attr {1|2|3|4|5|6} heading-level - Renders text as h1–h6; absent renders a p
  *
@@ -32,6 +33,7 @@ let NLDDInlineDialog = class NLDDInlineDialog extends LitElement {
         super(...arguments);
         this.variant = '';
         this.icon = '';
+        this.iconColor = '';
         this.text = '';
         this.supportingText = '';
         this.headingLevel = null;
@@ -41,6 +43,8 @@ let NLDDInlineDialog = class NLDDInlineDialog extends LitElement {
     get _resolvedIconName() {
         if (this.variant === 'alert')
             return 'alert';
+        if (this.variant === 'success')
+            return 'success';
         if (this.icon)
             return this.icon;
         return '';
@@ -75,6 +79,9 @@ __decorate([
 __decorate([
     property({ type: String, reflect: true })
 ], NLDDInlineDialog.prototype, "icon", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'icon-color' })
+], NLDDInlineDialog.prototype, "iconColor", void 0);
 __decorate([
     property({ type: String, reflect: true })
 ], NLDDInlineDialog.prototype, "text", void 0);

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

@@ -1 +1 @@
-{"version":3,"file":"inline-dialog.js","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/inline-dialog/inline-dialog.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"inline-dialog.js","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/inline-dialog/inline-dialog.ts"],"names":[],"mappings":"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"}

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,yBA2G9B,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(--components-inline-dialog-icon-color);
+
 		display: flex;
 		justify-content: center;
 		align-items: center;
 		flex-grow: 1;
-
-		--_icon-color: var(--semantics-content-color);
 	}
 
 	:host([hidden]) {
@@ -18,9 +19,19 @@ export const inlineDialogStyles = css `
 	}
 
 	:host([variant='alert']) {
-		--_icon-color: var(--primitives-color-warning-350);
+		--_icon-color: var(--components-inline-dialog-icon-warning-color);
 	}
 
+	:host([variant='success']) {
+		--_icon-color: var(--components-inline-dialog-icon-success-color);
+	}
+
+	:host([icon-color='secondary']) { --_icon-color: var(--components-inline-dialog-icon-secondary-color); }
+	:host([icon-color='accent'])    { --_icon-color: var(--components-inline-dialog-icon-accent-color); }
+	:host([icon-color='critical'])  { --_icon-color: var(--components-inline-dialog-icon-critical-color); }
+	:host([icon-color='warning'])   { --_icon-color: var(--components-inline-dialog-icon-warning-color); }
+	:host([icon-color='success'])   { --_icon-color: var(--components-inline-dialog-icon-success-color); }
+
 
 	/* # Body */
 
@@ -40,8 +51,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2GpC,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

@@ -5,34 +5,34 @@
 @import "./palettes.generated.css";
 
 @font-face {
-	font-family: 'RijksSansVF';
-	src: url('../fonts/RijksSansVF-Regular.ttf') format('truetype-variations');
+	font-family: 'RijksSans';
+	src: url('../fonts/RijksSansWeb-Regular.woff2') format('woff2-variations');
 	font-weight: 100 900;
 	font-style: normal;
 	font-display: swap;
 }
 
 @font-face {
-	font-family: 'RijksSansVF';
-	src: url('../fonts/RijksSansVF-Italic.ttf') format('truetype-variations');
+	font-family: 'RijksSans';
+	src: url('../fonts/RijksSansWeb-Italic.woff2') format('woff2-variations');
 	font-weight: 100 900;
 	font-style: italic;
 	font-display: swap;
 }
 
 @font-face {
-	font-family: 'IBM Plex Mono';
-	src: url('../fonts/IBMPlexMono-Regular.woff2') format('woff2');
-	font-weight: 400;
+	font-family: 'JetBrains Mono';
+	src: url('../fonts/JetBrainsMono[wght].woff2') format('woff2-variations');
+	font-weight: 100 900;
 	font-style: normal;
 	font-display: swap;
 }
 
 @font-face {
-	font-family: 'IBM Plex Mono';
-	src: url('../fonts/IBMPlexMono-Bold.woff2') format('woff2');
-	font-weight: 700;
-	font-style: normal;
+	font-family: 'JetBrains Mono';
+	src: url('../fonts/JetBrainsMono-Italic[wght].woff2') format('woff2-variations');
+	font-weight: 100 900;
+	font-style: italic;
 	font-display: swap;
 }
 
@@ -322,11 +322,11 @@
 	/* ## Typography */
 
 	--primitives-font-family-sans-serif-fallback: system-ui, sans-serif;
-	--primitives-font-family-sans-serif: RijksSansVF, system-ui, sans-serif;
+	--primitives-font-family-sans-serif: RijksSans, system-ui, sans-serif;
 	--primitives-font-family-serif-fallback: serif;
 	--primitives-font-family-serif: RijksoverheidSerif, serif;
 	--primitives-font-family-monospace-fallback: monospace;
-	--primitives-font-family-monospace: 'IBM Plex Mono', monospace;
+	--primitives-font-family-monospace: 'JetBrains Mono', monospace;
 	--primitives-font-family-body-fallback: var(--primitives-font-family-sans-serif-fallback);
 	--primitives-font-family-body: var(--primitives-font-family-sans-serif);
 	--primitives-font-family-display-fallback: var(--primitives-font-family-sans-serif-fallback);
@@ -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)
@@ -687,7 +722,6 @@
 	--primitives-opacity-95: 0.95;
 	--primitives-opacity-100: 1;
 	--primitives-opacity-disabled: 0.38;
-	--primitives-opacity-dragging: 0.4;
 
 	/* ## Transition */
 
@@ -762,8 +796,10 @@
 
 	--semantics-content-color: light-dark(var(--primitives-color-neutral-800), var(--primitives-color-neutral-850));
 	--semantics-content-secondary-color: light-dark(var(--primitives-color-neutral-550), var(--primitives-color-neutral-650));
-	--semantics-content-error-color: light-dark(var(--primitives-color-critical-600), var(--primitives-color-critical-650));
-	--semantics-content-success-color: light-dark(var(--primitives-color-success-600), var(--primitives-color-success-650));
+	--semantics-content-accent-color: light-dark(var(--primitives-color-accent-750), var(--primitives-color-accent-650));
+	--semantics-content-critical-color: light-dark(var(--primitives-color-critical-550), var(--primitives-color-critical-650));
+	--semantics-content-warning-color: light-dark(var(--primitives-color-warning-550), var(--primitives-color-warning-650));
+	--semantics-content-success-color: light-dark(var(--primitives-color-success-550), var(--primitives-color-success-650));
 
 	/* ## Links */
 
@@ -820,6 +856,8 @@
 	--semantics-controls-is-highlighted-is-active-indicator-color: light-dark(var(--primitives-color-accent-850), var(--primitives-color-accent-750));
 	--semantics-controls-is-highlighted-is-active-contrast-color: var(--semantics-surfaces-background-color);
 
+	--semantics-controls-is-dragging-opacity: var(--primitives-opacity-40);
+
 	--semantics-controls-link-cursor: default;
 
 	/* ## Buttons */
@@ -839,7 +877,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 +904,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));
@@ -1048,6 +1087,15 @@
 
 	--components-form-field-gap: var(--primitives-space-2);
 
+	/* ## Inline dialog */
+
+	--components-inline-dialog-icon-color: var(--semantics-content-color);
+	--components-inline-dialog-icon-secondary-color: var(--semantics-content-secondary-color);
+	--components-inline-dialog-icon-accent-color: light-dark(var(--primitives-color-accent-750), var(--primitives-color-accent-650));
+	--components-inline-dialog-icon-critical-color: light-dark(var(--primitives-color-critical-500), var(--primitives-color-critical-500));
+	--components-inline-dialog-icon-warning-color: light-dark(var(--primitives-color-warning-350), var(--primitives-color-warning-650));
+	--components-inline-dialog-icon-success-color: light-dark(var(--primitives-color-success-500), var(--primitives-color-success-500));
+
 	/* ## Keyboard shortcut */
 
 	--components-keyboard-shortcut-sm-size: var(--primitives-space-20);
@@ -1059,6 +1107,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);
@@ -1073,13 +1154,14 @@
 	--components-list-item-is-selected-content-color: var(--primitives-color-neutral-1000);
 	--components-list-item-is-highlighted-background-color: var(--semantics-controls-is-highlighted-indicator-color);
 	--components-list-item-is-highlighted-content-color: var(--semantics-controls-is-highlighted-contrast-color);
-	--components-list-item-is-dragging-opacity: var(--primitives-opacity-dragging);
 
 	/* ## Menu */
 
 	--components-menu-box-shadow: var(--primitives-box-shadows-level-5);
 	--components-menu-item-is-highlighted-background-color: var(--semantics-controls-is-highlighted-indicator-color);
 	--components-menu-item-is-highlighted-content-color: var(--semantics-controls-is-highlighted-contrast-color);
+	--components-menu-item-is-open-background-color: light-dark(var(--primitives-color-neutral-100), var(--primitives-color-neutral-250));
+	--components-menu-item-is-open-content-color: var(--primitives-color-neutral-1000);
 
 	/* ## Menu bar */
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nldd/design-system",
-  "version": "0.8.40",
+  "version": "0.8.42",
   "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"
@@ -328,7 +336,11 @@
       "default": "./dist/components/status-and-feedback/badge/badge.js"
     },
     "./styles": "./dist/css/global.css",
-    "./styles/tokens": "./dist/css/settings.css"
+    "./styles/tokens": "./dist/css/settings.css",
+    "./tokens": {
+      "types": "./dist/assets/styles/tokens.d.ts",
+      "default": "./dist/assets/styles/tokens.js"
+    }
   },
   "files": [
     "dist"
@@ -343,7 +355,7 @@
   },
   "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/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 && printf '@import \"./settings.css\";\\n@import \"./rich-text.css\";\\n@import \"./form-section.css\";\\n@import \"./form.css\";\\n' > dist/css/global.css && cp src/assets/fonts/*.ttf src/assets/fonts/*.woff2 dist/fonts/",
+    "build:styles": "mkdir -p dist/css dist/fonts && cp src/assets/styles/settings.css dist/css/settings.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 && printf '@import \"./settings.css\";\\n@import \"./rich-text.css\";\\n@import \"./form-section.css\";\\n@import \"./form.css\";\\n' > dist/css/global.css && cp src/assets/fonts/*.woff2 dist/fonts/",
     "generate:palettes": "node scripts/generate-palettes.js",
     "validate:styles": "node scripts/validate-css-variables.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",
@@ -381,6 +393,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 +421,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"
   }
 }