@nldd/design-system 0.8.62 → 0.8.64

package/dist/css/rich-text.css

@@ -10,8 +10,12 @@ nldd-rich-text {
 		0px,
 		calc(100% - var(--components-rich-text-main-max-width))
 	);
+	--_dt-width: var(--primitives-area-200);
+	--_dl-column-gap: var(--primitives-space-16);
+	--_dl-gap: calc(var(--_spacing) / 2);
 
 	container-type: inline-size;
+	box-sizing: border-box;
 	display: grid;
 	width: 100%;
 	grid-template-columns:
@@ -306,6 +310,55 @@ nldd-rich-text li > * + * {
 }
 
 
+/* # Definition list */
+
+nldd-rich-text dl {
+	margin: 0;
+	display: grid;
+	column-gap: var(--_dl-column-gap);
+
+	@container (max-width: 640px) {
+		grid-template-columns: 1fr;
+	}
+
+	@container (min-width: 641px) {
+		grid-template-columns: var(--_dt-width) 1fr;
+	}
+}
+
+nldd-rich-text dt {
+	font-weight: var(--primitives-font-weight-body-bold);
+
+	@container (min-width: 641px) {
+		grid-column: 1;
+	}
+}
+
+nldd-rich-text dd {
+	margin-inline: 0;
+
+	@container (min-width: 641px) {
+		grid-column: 2;
+	}
+}
+
+/* Gap before each new definition group: a dt that starts a group, i.e. the
+   first dt after the previous group's dd. (The old dt:not(:first-child) also
+   gapped a second, synonym dt within the same group.) */
+nldd-rich-text dd + dt {
+	margin-top: var(--_dl-gap);
+}
+
+/* Wide-viewport companion: in the two-column grid the new group's dd shares
+   its row with that group-starting dt, so it needs the same top margin to
+   stay aligned. */
+nldd-rich-text dd + dt + dd {
+	@container (min-width: 641px) {
+		margin-top: var(--_dl-gap);
+	}
+}
+
+
 /* # Link */
 
 nldd-rich-text a {
@@ -353,6 +406,12 @@ nldd-rich-text code {
 	font-size: 0.85em;
 }
 
+/* Inside table cells, let long code tokens (e.g. type_spec.precision) break so
+   they don't force a column wide; in running text code stays intact. */
+nldd-rich-text :is(th, td) code {
+	overflow-wrap: anywhere;
+}
+
 
 /* # Mark */
 
@@ -504,6 +563,10 @@ nldd-rich-text th {
 	border-bottom: var(--semantics-tables-border-width) solid var(--semantics-tables-border-color);
 	font: var(--primitives-font-body-md-bold-tight);
 	text-align: start;
+
+	@container (min-width: 641px) {
+		min-width: unset;
+	}
 }
 
 /* ## Table Data Cell */

package/dist/css/settings.css

@@ -1225,9 +1225,9 @@
 
 	/* ## Links */
 
-	--semantics-links-color: light-dark(var(--primitives-color-lintblauw-600), var(--primitives-color-lintblauw-650));
-	--semantics-links-is-hovered-color: light-dark(var(--primitives-color-lintblauw-650), var(--primitives-color-lintblauw-700));
-	--semantics-links-is-active-color: light-dark(var(--primitives-color-lintblauw-700), var(--primitives-color-lintblauw-750));
+	--semantics-links-color: light-dark(var(--primitives-color-accent-600), var(--primitives-color-accent-650));
+	--semantics-links-is-hovered-color: light-dark(var(--primitives-color-accent-650), var(--primitives-color-accent-700));
+	--semantics-links-is-active-color: light-dark(var(--primitives-color-accent-700), var(--primitives-color-accent-750));
 
 	/* ## Blockquotes */
 
@@ -1788,6 +1788,7 @@
 	--components-list-item-sm-padding-block: var(--primitives-space-6);
 	--components-list-item-md-padding-block: var(--primitives-space-10);
 	--components-list-item-indicator-corner-radius: var(--primitives-corner-radius-md);
+	--components-list-item-indicator-inline-inset: max(var(--primitives-space-8), var(--components-list-item-indicator-corner-radius));
 	--components-list-item-is-hovered-background-color: light-dark(var(--primitives-color-neutral-50), var(--primitives-color-neutral-150));
 	--components-list-item-is-hovered-content-color: var(--primitives-color-neutral-1000);
 	--components-list-item-is-selected-background-color: light-dark(var(--primitives-color-neutral-100), var(--primitives-color-neutral-250));
@@ -1893,6 +1894,12 @@
 	--components-rich-text-spacing-snug: calc(var(--components-rich-text-grid-size) / 2);
 	--components-rich-text-spacing-loose: var(--components-rich-text-grid-size);
 
+	/* ## Sidebar Section */
+
+	--components-sidebar-section-sidebar-box-background-color: var(--semantics-surfaces-tinted-background-color);
+	--components-sidebar-section-sidebar-box-highlight-border-color: var(--semantics-surfaces-tinted-border-color);
+	--components-sidebar-section-sidebar-box-corner-radius: var(--semantics-surfaces-corner-radius);
+
 	/* ## Status bar */
 
 	--components-status-bar-height: var(--semantics-controls-xs-min-size);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nldd/design-system",
-  "version": "0.8.62",
+  "version": "0.8.64",
   "description": "Design System voor Nederlandse Digitale Dienst",
   "type": "module",
   "main": "dist/components/components.js",
@@ -223,6 +223,10 @@
       "types": "./dist/components/layout/page-sections/one-half-one-half-section/one-half-one-half-section.d.ts",
       "default": "./dist/components/layout/page-sections/one-half-one-half-section/one-half-one-half-section.js"
     },
+    "./sidebar-section": {
+      "types": "./dist/components/layout/page-sections/sidebar-section/sidebar-section.d.ts",
+      "default": "./dist/components/layout/page-sections/sidebar-section/sidebar-section.js"
+    },
     "./box": {
       "types": "./dist/components/layout/box/box.d.ts",
       "default": "./dist/components/layout/box/box.js"
@@ -379,6 +383,10 @@
       "types": "./dist/components/status-and-feedback/status-bar/status-bar.d.ts",
       "default": "./dist/components/status-and-feedback/status-bar/status-bar.js"
     },
+    "./just-in-time-education": {
+      "types": "./dist/components/status-and-feedback/just-in-time-education/just-in-time-education.d.ts",
+      "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",
     "./tokens": {

package/dist/assets/styles/slotted-reset.d.ts.map

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

package/dist/assets/styles/slotted-reset.fixtures.d.ts.map

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

package/dist/assets/styles/slotted-reset.fixtures.js.map

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

package/dist/assets/styles/slotted-reset.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"slotted-reset.js","sourceRoot":"","sources":["../../../src/assets/styles/slotted-reset.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"}