@nldd/design-system 0.8.45 → 0.8.47

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

@@ -13,6 +13,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
  * @element nldd-inline-dialog
  *
  * @attr {'alert'|'success'} variant - Semantic variant; 'alert' or 'success' forces a matching icon and color
+ * @attr {'md'|'lg'} size          - Typography size: 'md' (default) keeps body-md text + body-sm supporting; 'lg' bumps both up a step.
  * @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)
@@ -32,6 +33,7 @@ let NLDDInlineDialog = class NLDDInlineDialog extends LitElement {
     constructor() {
         super(...arguments);
         this.variant = '';
+        this.size = 'md';
         this.icon = '';
         this.iconColor = '';
         this.text = '';
@@ -76,6 +78,9 @@ NLDDInlineDialog.styles = inlineDialogStyles;
 __decorate([
     property({ type: String, reflect: true })
 ], NLDDInlineDialog.prototype, "variant", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], NLDDInlineDialog.prototype, "size", void 0);
 __decorate([
     property({ type: String, reflect: true })
 ], NLDDInlineDialog.prototype, "icon", 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,yBA0G9B,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,yBA0H9B,CAAC"}

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

@@ -7,6 +7,8 @@ export const inlineDialogStyles = css `
 	:host {
 		--_icon-size: var(--primitives-space-48);
 		--_icon-color: var(--components-inline-dialog-icon-color);
+		--_text-font: var(--primitives-font-body-md-bold-tight);
+		--_supporting-text-font: var(--primitives-font-body-sm-regular-tight);
 
 		display: flex;
 		flex-grow: 1;
@@ -14,6 +16,12 @@ export const inlineDialogStyles = css `
 		justify-content: center;
 	}
 
+	:host([size="lg"]) {
+		--_icon-size: var(--primitives-space-56);
+		--_text-font: var(--primitives-font-body-lg-bold-tight);
+		--_supporting-text-font: var(--primitives-font-body-md-regular-tight);
+	}
+
 	:host([variant="alert"]) {
 		--_icon-color: var(--components-inline-dialog-icon-warning-color);
 	}
@@ -58,6 +66,14 @@ export const inlineDialogStyles = css `
 		align-items: center;
 	}
 
+	.inline-dialog__main {
+		display: flex;
+		width: 100%;
+		flex-direction: column;
+		align-items: center;
+		gap: var(--primitives-space-2);
+	}
+
 	.inline-dialog__icon {
 		display: flex;
 		width: var(--_icon-size);
@@ -72,7 +88,7 @@ export const inlineDialogStyles = css `
 		margin: 0;
 		text-align: center;
 		color: var(--semantics-content-color);
-		font: var(--primitives-font-body-md-bold-tight);
+		font: var(--_text-font);
 		text-wrap: pretty;
 	}
 
@@ -85,7 +101,7 @@ export const inlineDialogStyles = css `
 		margin: 0;
 		text-align: center;
 		color: var(--semantics-content-color);
-		font: var(--primitives-font-body-sm-regular-tight);
+		font: var(--_supporting-text-font);
 		text-wrap: pretty;
 	}
 
@@ -97,12 +113,12 @@ export const inlineDialogStyles = css `
 		display: none;
 	}
 
-	.inline-dialog__actions {
+	.inline-dialog__footer {
 		width: 100%;
 		padding-top: var(--primitives-space-16);
 	}
 
-	.inline-dialog__actions[hidden] {
+	.inline-dialog__footer[hidden] {
 		display: none;
 	}
 `;

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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0GpC,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0HpC,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"inline-dialog.template.d.ts","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/inline-dialog/inline-dialog.template.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAE3D,wBAAgB,oBAAoB,CAAC,SAAS,EAAE,gBAAgB,wCA8B/D"}
+{"version":3,"file":"inline-dialog.template.d.ts","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/inline-dialog/inline-dialog.template.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAE3D,wBAAgB,oBAAoB,CAAC,SAAS,EAAE,gBAAgB,wCAgC/D"}

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

@@ -2,27 +2,29 @@ import { html, nothing } from 'lit';
 export function inlineDialogTemplate(component) {
     return html `
 		<div class="inline-dialog__body">
-			${component._resolvedIconName ? html `
-				<div class="inline-dialog__icon">
-					<nldd-icon name=${component._resolvedIconName}></nldd-icon>
-				</div>
-			` : nothing}
-			${component.text ? html `
-				${component.headingLevel === 1 ? html `<h1 class="inline-dialog__text">${component.text}</h1>`
+			<div class="inline-dialog__main">
+				${component._resolvedIconName ? html `
+					<div class="inline-dialog__icon">
+						<nldd-icon name=${component._resolvedIconName}></nldd-icon>
+					</div>
+				` : nothing}
+				${component.text ? html `
+					${component.headingLevel === 1 ? html `<h1 class="inline-dialog__text">${component.text}</h1>`
         : component.headingLevel === 2 ? html `<h2 class="inline-dialog__text">${component.text}</h2>`
             : component.headingLevel === 3 ? html `<h3 class="inline-dialog__text">${component.text}</h3>`
                 : component.headingLevel === 4 ? html `<h4 class="inline-dialog__text">${component.text}</h4>`
                     : component.headingLevel === 5 ? html `<h5 class="inline-dialog__text">${component.text}</h5>`
                         : component.headingLevel === 6 ? html `<h6 class="inline-dialog__text">${component.text}</h6>`
                             : html `<p class="inline-dialog__text">${component.text}</p>`}
-			` : nothing}
-			${component.supportingText ? html `
-				<p class="inline-dialog__supporting-text">${component.supportingText}</p>
-			` : nothing}
-			<div class="inline-dialog__content" ?hidden=${!component._hasContent}>
-				<slot></slot>
+				` : nothing}
+				${component.supportingText ? html `
+					<p class="inline-dialog__supporting-text">${component.supportingText}</p>
+				` : nothing}
+				<div class="inline-dialog__content" ?hidden=${!component._hasContent}>
+					<slot></slot>
+				</div>
 			</div>
-			<div class="inline-dialog__actions" ?hidden=${!component._hasActions}>
+			<div class="inline-dialog__footer" ?hidden=${!component._hasActions}>
 				<nldd-button-group orientation="vertical">
 					<slot name="actions"></slot>
 				</nldd-button-group>

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

@@ -1 +1 @@
-{"version":3,"file":"inline-dialog.template.js","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/inline-dialog/inline-dialog.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAGpC,MAAM,UAAU,oBAAoB,CAAC,SAA2B;IAC/D,OAAO,IAAI,CAAA;;KAEP,SAAS,CAAC,iBAAiB,CAAC,CAAC,CAAC,IAAI,CAAA;;uBAEhB,SAAS,CAAC,iBAAiB;;IAE9C,CAAC,CAAC,CAAC,OAAO;KACT,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA;MACpB,SAAS,CAAC,YAAY,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAA,mCAAmC,SAAS,CAAC,IAAI,OAAO;QAC7F,CAAC,CAAC,SAAS,CAAC,YAAY,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAA,mCAAmC,SAAS,CAAC,IAAI,OAAO;YAC7F,CAAC,CAAC,SAAS,CAAC,YAAY,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAA,mCAAmC,SAAS,CAAC,IAAI,OAAO;gBAC7F,CAAC,CAAC,SAAS,CAAC,YAAY,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAA,mCAAmC,SAAS,CAAC,IAAI,OAAO;oBAC7F,CAAC,CAAC,SAAS,CAAC,YAAY,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAA,mCAAmC,SAAS,CAAC,IAAI,OAAO;wBAC7F,CAAC,CAAC,SAAS,CAAC,YAAY,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAA,mCAAmC,SAAS,CAAC,IAAI,OAAO;4BAC7F,CAAC,CAAC,IAAI,CAAA,kCAAkC,SAAS,CAAC,IAAI,MAAM;IAC5D,CAAC,CAAC,CAAC,OAAO;KACT,SAAS,CAAC,cAAc,CAAC,CAAC,CAAC,IAAI,CAAA;gDACY,SAAS,CAAC,cAAc;IACpE,CAAC,CAAC,CAAC,OAAO;iDACmC,CAAC,SAAS,CAAC,WAAW;;;iDAGtB,CAAC,SAAS,CAAC,WAAW;;;;;;EAMrE,CAAC;AACH,CAAC"}
+{"version":3,"file":"inline-dialog.template.js","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/inline-dialog/inline-dialog.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAGpC,MAAM,UAAU,oBAAoB,CAAC,SAA2B;IAC/D,OAAO,IAAI,CAAA;;;MAGN,SAAS,CAAC,iBAAiB,CAAC,CAAC,CAAC,IAAI,CAAA;;wBAEhB,SAAS,CAAC,iBAAiB;;KAE9C,CAAC,CAAC,CAAC,OAAO;MACT,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA;OACpB,SAAS,CAAC,YAAY,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAA,mCAAmC,SAAS,CAAC,IAAI,OAAO;QAC7F,CAAC,CAAC,SAAS,CAAC,YAAY,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAA,mCAAmC,SAAS,CAAC,IAAI,OAAO;YAC7F,CAAC,CAAC,SAAS,CAAC,YAAY,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAA,mCAAmC,SAAS,CAAC,IAAI,OAAO;gBAC7F,CAAC,CAAC,SAAS,CAAC,YAAY,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAA,mCAAmC,SAAS,CAAC,IAAI,OAAO;oBAC7F,CAAC,CAAC,SAAS,CAAC,YAAY,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAA,mCAAmC,SAAS,CAAC,IAAI,OAAO;wBAC7F,CAAC,CAAC,SAAS,CAAC,YAAY,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAA,mCAAmC,SAAS,CAAC,IAAI,OAAO;4BAC7F,CAAC,CAAC,IAAI,CAAA,kCAAkC,SAAS,CAAC,IAAI,MAAM;KAC5D,CAAC,CAAC,CAAC,OAAO;MACT,SAAS,CAAC,cAAc,CAAC,CAAC,CAAC,IAAI,CAAA;iDACY,SAAS,CAAC,cAAc;KACpE,CAAC,CAAC,CAAC,OAAO;kDACmC,CAAC,SAAS,CAAC,WAAW;;;;gDAIxB,CAAC,SAAS,CAAC,WAAW;;;;;;EAMpE,CAAC;AACH,CAAC"}

package/dist/css/form.css

@@ -1,9 +1,8 @@
 /* # Host */
 
 nldd-form {
-	display: block;
 	container-type: inline-size;
-	container-name: form;
+	display: block;
 }
 
 nldd-form > form {
@@ -15,16 +14,16 @@ nldd-form > form > * + * {
 }
 
 nldd-form nldd-form-field + nldd-form-field {
-	@container form (max-width: 640px) {
+	@container (max-width: 640px) {
 		margin-top: var(--semantics-forms-gap-tight);
 	}
-	@container form (min-width: 641px) {
+	@container (min-width: 641px) {
 		margin-top: var(--semantics-forms-gap);
 	}
 }
 
 nldd-form nldd-form-field[form-label-alignment='top']:not([label-alignment='left']):not([label-alignment='right']) + nldd-form-field[form-label-alignment='top']:not([label-alignment='left']):not([label-alignment='right']) {
-	@container form (min-width: 641px) {
+	@container (min-width: 641px) {
 		margin-top: var(--semantics-forms-gap-tight);
 	}
 }

package/dist/css/rich-text.css

@@ -11,6 +11,7 @@ nldd-rich-text {
 		calc(100% - var(--components-rich-text-main-max-width))
 	);
 
+	container-type: inline-size;
 	display: grid;
 	grid-template-columns:
 		[full-start]   0
@@ -82,27 +83,15 @@ nldd-rich-text :is(h1, h2, h3, h4, h5, h6) {
 /* # Heading 1 */
 
 nldd-rich-text h1 {
-	@media (max-width: 640px) {
+	@container (max-width: 640px) {
 		font: var(--primitives-font-display-1-sm);
 	}
 
-	@media (min-width: 641px) and (max-width: 1007px) {
+	@container (min-width: 641px) and (max-width: 1007px) {
 		font: var(--primitives-font-display-1-md);
 	}
 
-	@media (min-width: 1008px) {
-		font: var(--primitives-font-display-1-lg);
-	}
-
-	@container layout-container (max-width: 640px) {
-		font: var(--primitives-font-display-1-sm);
-	}
-
-	@container layout-container (min-width: 641px) and (max-width: 1007px) {
-		font: var(--primitives-font-display-1-md);
-	}
-
-	@container layout-container (min-width: 1008px) {
+	@container (min-width: 1008px) {
 		font: var(--primitives-font-display-1-lg);
 	}
 }
@@ -111,27 +100,15 @@ nldd-rich-text h1 {
 /* # Heading 2 */
 
 nldd-rich-text h2 {
-	@media (max-width: 640px) {
+	@container (max-width: 640px) {
 		font: var(--primitives-font-display-2-sm);
 	}
 
-	@media (min-width: 641px) and (max-width: 1007px) {
+	@container (min-width: 641px) and (max-width: 1007px) {
 		font: var(--primitives-font-display-2-md);
 	}
 
-	@media (min-width: 1008px) {
-		font: var(--primitives-font-display-2-lg);
-	}
-
-	@container layout-container (max-width: 640px) {
-		font: var(--primitives-font-display-2-sm);
-	}
-
-	@container layout-container (min-width: 641px) and (max-width: 1007px) {
-		font: var(--primitives-font-display-2-md);
-	}
-
-	@container layout-container (min-width: 1008px) {
+	@container (min-width: 1008px) {
 		font: var(--primitives-font-display-2-lg);
 	}
 }
@@ -140,27 +117,15 @@ nldd-rich-text h2 {
 /* # Heading 3 */
 
 nldd-rich-text h3 {
-	@media (max-width: 640px) {
-		font: var(--primitives-font-display-3-sm);
-	}
-
-	@media (min-width: 641px) and (max-width: 1007px) {
-		font: var(--primitives-font-display-3-md);
-	}
-
-	@media (min-width: 1008px) {
-		font: var(--primitives-font-display-3-lg);
-	}
-
-	@container layout-container (max-width: 640px) {
+	@container (max-width: 640px) {
 		font: var(--primitives-font-display-3-sm);
 	}
 
-	@container layout-container (min-width: 641px) and (max-width: 1007px) {
+	@container (min-width: 641px) and (max-width: 1007px) {
 		font: var(--primitives-font-display-3-md);
 	}
 
-	@container layout-container (min-width: 1008px) {
+	@container (min-width: 1008px) {
 		font: var(--primitives-font-display-3-lg);
 	}
 }
@@ -169,27 +134,15 @@ nldd-rich-text h3 {
 /* # Heading 4 */
 
 nldd-rich-text h4 {
-	@media (max-width: 640px) {
+	@container (max-width: 640px) {
 		font: var(--primitives-font-display-4-sm);
 	}
 
-	@media (min-width: 641px) and (max-width: 1007px) {
+	@container (min-width: 641px) and (max-width: 1007px) {
 		font: var(--primitives-font-display-4-md);
 	}
 
-	@media (min-width: 1008px) {
-		font: var(--primitives-font-display-4-lg);
-	}
-
-	@container layout-container (max-width: 640px) {
-		font: var(--primitives-font-display-4-sm);
-	}
-
-	@container layout-container (min-width: 641px) and (max-width: 1007px) {
-		font: var(--primitives-font-display-4-md);
-	}
-
-	@container layout-container (min-width: 1008px) {
+	@container (min-width: 1008px) {
 		font: var(--primitives-font-display-4-lg);
 	}
 }
@@ -198,27 +151,15 @@ nldd-rich-text h4 {
 /* # Heading 5 */
 
 nldd-rich-text h5 {
-	@media (max-width: 640px) {
+	@container (max-width: 640px) {
 		font: var(--primitives-font-display-5-sm);
 	}
 
-	@media (min-width: 641px) and (max-width: 1007px) {
+	@container (min-width: 641px) and (max-width: 1007px) {
 		font: var(--primitives-font-display-5-md);
 	}
 
-	@media (min-width: 1008px) {
-		font: var(--primitives-font-display-5-lg);
-	}
-
-	@container layout-container (max-width: 640px) {
-		font: var(--primitives-font-display-5-sm);
-	}
-
-	@container layout-container (min-width: 641px) and (max-width: 1007px) {
-		font: var(--primitives-font-display-5-md);
-	}
-
-	@container layout-container (min-width: 1008px) {
+	@container (min-width: 1008px) {
 		font: var(--primitives-font-display-5-lg);
 	}
 }
@@ -227,27 +168,15 @@ nldd-rich-text h5 {
 /* # Heading 6 */
 
 nldd-rich-text h6 {
-	@media (max-width: 640px) {
+	@container (max-width: 640px) {
 		font: var(--primitives-font-display-6-sm);
 	}
 
-	@media (min-width: 641px) and (max-width: 1007px) {
+	@container (min-width: 641px) and (max-width: 1007px) {
 		font: var(--primitives-font-display-6-md);
 	}
 
-	@media (min-width: 1008px) {
-		font: var(--primitives-font-display-6-lg);
-	}
-
-	@container layout-container (max-width: 640px) {
-		font: var(--primitives-font-display-6-sm);
-	}
-
-	@container layout-container (min-width: 641px) and (max-width: 1007px) {
-		font: var(--primitives-font-display-6-md);
-	}
-
-	@container layout-container (min-width: 1008px) {
+	@container (min-width: 1008px) {
 		font: var(--primitives-font-display-6-lg);
 	}
 }
@@ -290,6 +219,10 @@ nldd-rich-text li {
 	padding: 0;
 }
 
+nldd-rich-text li > * + * {
+	margin-top: var(--_spacing);
+}
+
 
 /* # Link */
 
@@ -390,18 +323,7 @@ nldd-rich-text blockquote {
 	border-top-left-radius: var(--semantics-blockquotes-corner-radius);
 	font: var(--semantics-blockquotes-md-quote-font);
 
-	@media (max-width: 640px) {
-		gap: calc(var(--semantics-blockquotes-sm-spacing) / 2);
-		margin-block: max(
-			0px,
-			calc(var(--semantics-blockquotes-sm-spacing) - var(--_spacing))
-		);
-		padding-block-start: var(--semantics-blockquotes-sm-spacing);
-		padding-inline: var(--semantics-blockquotes-sm-spacing);
-		font: var(--semantics-blockquotes-sm-quote-font);
-	}
-
-	@container layout-container (max-width: 640px) {
+	@container (max-width: 640px) {
 		gap: calc(var(--semantics-blockquotes-sm-spacing) / 2);
 		margin-block: max(
 			0px,
@@ -477,13 +399,7 @@ nldd-rich-text table {
 	-webkit-overflow-scrolling: touch;
 	scrollbar-width: thin;
 
-	@media (min-width: 641px) {
-		display: table;
-		overflow-x: unset;
-		scrollbar-width: unset;
-	}
-
-	@container layout-container (min-width: 641px) {
+	@container (min-width: 641px) {
 		display: table;
 		overflow-x: unset;
 		scrollbar-width: unset;
@@ -504,16 +420,12 @@ nldd-rich-text th {
 /* # Table Data Cell */
 
 nldd-rich-text td {
-	min-width: var(--primitives-area-120);
+	min-width: var(--primitives-area-160);
 	padding: var(--primitives-space-6);
 	border-bottom: var(--semantics-dividers-thickness) solid var(--semantics-dividers-color);
 	font: var(--primitives-font-body-md-regular-snug);
 
-	@media (min-width: 641px) {
-		min-width: unset;
-	}
-
-	@container layout-container (min-width: 641px) {
+	@container (min-width: 641px) {
 		min-width: unset;
 	}
 }

package/dist/css/settings.css

@@ -780,6 +780,8 @@
 	--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));
+	--semantics-content-mark-background-color: light-dark(var(--primitives-color-mark-100), var(--primitives-color-mark-200));
+	--semantics-content-mark-color: light-dark(var(--primitives-color-mark-900), var(--primitives-color-mark-800));
 
 	/* ## Links */
 
@@ -955,7 +957,7 @@
 	/* ## Forms */
 
 	--semantics-forms-gap: var(--primitives-space-16);
-	--semantics-forms-gap-tight: var(--primitives-space-8);
+	--semantics-forms-gap-tight: var(--primitives-space-10);
 	--semantics-forms-label-column-width: var(--primitives-area-240);
 	--semantics-forms-columns-gap: var(--primitives-space-8);
 	--semantics-forms-section-title-font: var(--primitives-font-body-lg-bold-tight);
@@ -978,12 +980,12 @@
 	--semantics-page-sections-sm-margin-inline: var(--primitives-space-16);
 	--semantics-page-sections-sm-margin-block: var(--primitives-space-16);
 	--semantics-page-sections-sm-gap: var(--primitives-space-16);
-	--semantics-page-sections-md-margin-inline: var(--primitives-space-32);
-	--semantics-page-sections-md-margin-block: var(--primitives-space-24);
+	--semantics-page-sections-md-margin-inline: var(--primitives-space-40);
+	--semantics-page-sections-md-margin-block: var(--primitives-space-32);
 	--semantics-page-sections-md-gap: var(--primitives-space-24);
-	--semantics-page-sections-lg-margin-inline: var(--primitives-space-48);
-	--semantics-page-sections-lg-margin-block: var(--primitives-space-32);
-	--semantics-page-sections-lg-gap: var(--primitives-space-24);
+	--semantics-page-sections-lg-margin-inline: var(--primitives-space-56);
+	--semantics-page-sections-lg-margin-block: var(--primitives-space-48);
+	--semantics-page-sections-lg-gap: var(--primitives-space-32);
 
 	/* ## Overlays */
 
@@ -1039,7 +1041,7 @@
 
 	/* ## Card */
 
-	--components-card-background-color: var(--semantics-surfaces-background-color);
+	--components-card-background-color: light-dark(var(--primitives-color-neutral-0), var(--primitives-color-neutral-75));
 	--components-card-corner-radius: var(--primitives-corner-radius-none);
 	--components-card-box-shadow: var(--primitives-box-shadows-level-2);
 
@@ -1070,10 +1072,6 @@
 
 	--components-document-tab-bar-tab-title-font: var(--primitives-font-body-sm-bold-flat);
 
-	/* ## Form field */
-
-	--components-form-field-gap: var(--primitives-space-2);
-
 	/* ## Icon — rijkskleuren
 
 	   Shade per rijkskleur picked to keep ≥400 shade distance from the
@@ -1127,32 +1125,32 @@
 	   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);
+	--components-code-viewer-token-comment-color: var(--semantics-content-secondary-color);
+	--components-code-viewer-token-punctuation-color: var(--semantics-content-color);
+	--components-code-viewer-token-keyword-color: var(--primitives-color-donkergeel-650);
+	--components-code-viewer-token-string-color: var(--primitives-color-groen-650);
+	--components-code-viewer-token-number-color: var(--primitives-color-oranje-650);
+	--components-code-viewer-token-boolean-color: var(--primitives-color-oranje-650);
+	--components-code-viewer-token-null-color: var(--primitives-color-oranje-650);
+	--components-code-viewer-token-function-color: var(--primitives-color-lintblauw-650);
+	--components-code-viewer-token-class-color: var(--primitives-color-donkergeel-650);
+	--components-code-viewer-token-builtin-color: var(--primitives-color-donkergeel-650);
+	--components-code-viewer-token-tag-color: var(--primitives-color-groen-650);
+	--components-code-viewer-token-attr-name-color: var(--primitives-color-lintblauw-650);
+	--components-code-viewer-token-attr-value-color: var(--primitives-color-mintgroen-650);
+	--components-code-viewer-token-property-color: var(--primitives-color-lintblauw-650);
+	--components-code-viewer-token-selector-color: var(--primitives-color-donkergeel-650);
+	--components-code-viewer-token-atrule-color: var(--primitives-color-groen-650);
+	--components-code-viewer-token-regex-color: var(--primitives-color-rood-650);
+	--components-code-viewer-token-url-color: var(--primitives-color-mintgroen-650);
+	--components-code-viewer-token-operator-color: var(--primitives-color-groen-650);
+	--components-code-viewer-token-constant-color: var(--primitives-color-oranje-650);
+	--components-code-viewer-token-deleted-color: var(--primitives-color-rood-650);
+	--components-code-viewer-token-inserted-color: var(--primitives-color-groen-650);
+	--components-code-viewer-token-important-color: var(--primitives-color-rood-650);
+	--components-code-viewer-token-symbol-color: var(--primitives-color-violet-650);
+	--components-code-viewer-token-entity-color: var(--primitives-color-paars-650);
+	--components-code-viewer-token-variable-color: var(--primitives-color-lintblauw-650);
 
 	/* ## List */
 
@@ -1191,6 +1189,12 @@
 	--components-menu-bar-item-is-current-indicator-background-color: var(--semantics-controls-is-highlighted-indicator-color);
 	--components-menu-bar-item-is-current-indicator-height: var(--primitives-space-4);
 
+	/* ## Page footer */
+
+	--components-page-footer-background-color: light-dark(var(--primitives-color-neutral-75), var(--primitives-color-neutral-50));
+	--components-page-footer-divider-color: light-dark(var(--primitives-color-neutral-200), var(--primitives-color-neutral-150));
+	--components-page-footer-legal-bar-item-color: var(--semantics-content-secondary-color);
+
 	/* ## Popover */
 
 	--components-popover-default-width: var(--primitives-area-320);
@@ -1293,6 +1297,11 @@
 	--components-tag-mintgroen-background-color: light-dark(var(--primitives-color-mintgroen-75), var(--primitives-color-mintgroen-150));
 	--components-tag-mintgroen-content-color: var(--primitives-color-mintgroen-750);
 
+	/* ## Timeline track cell */
+
+	--components-timeline-track-cell-color: light-dark(var(--primitives-color-accent-750), var(--primitives-color-accent-650));
+	--components-timeline-track-cell-future-background-color: var(--semantics-surfaces-background-color);
+
 	/* ## Title */
 
 	--components-title-sm-overline-font: var(--primitives-font-body-sm-regular-tight);

package/dist/utilities/page-section-mixin.d.ts

@@ -0,0 +1,53 @@
+import { LitElement } from 'lit';
+type Constructor<T = LitElement> = new (...args: any[]) => T;
+export type PageSectionBackground = 'inherit' | 'base' | 'tinted';
+export type PageSectionScheme = 'inherit' | 'light' | 'dark' | 'inverted';
+export type PageSectionPadding = '0' | '2' | '4' | '6' | '8' | '10' | '12' | '16' | '20' | '24' | '28' | '32' | '40' | '44' | '48' | '56' | '64' | '80' | '96';
+/**
+ * Shared surface controls for the page-section components. Adds three
+ * orthogonal capabilities, all written as inline host styles / custom
+ * properties (no per-component CSS needed for background or scheme — both
+ * `color-scheme` and custom properties inherit through the shadow boundary
+ * into the section's block element and slotted content):
+ *
+ * - **background**: `inherit` (the default — transparent, shows the ancestor's
+ *   surface) | `base` (the base surface colour) | `tinted`. Setting
+ *   `base`/`tinted` also cascades `--context-parent-background-color` so
+ *   descendants (cards, nested sections) read the same surface.
+ * - **scheme**: `inherit` (default) | `light` | `dark` | `inverted`.
+ *   `inverted` resolves to the opposite of the surrounding page scheme and
+ *   re-resolves when `:root[data-scheme]` flips (via onColorSchemeChange).
+ * - **block padding**: `padding-block` (both edges) with `padding-top`
+ *   / `padding-bottom` per-edge overrides, each with responsive `sm-` /
+ *   `md-` / `lg-` variants (12 attrs total). Token scale `0`–`96`; `0` strips
+ *   the padding. Per breakpoint the section CSS resolves: scope override →
+ *   base override → responsive default. The inline (gutter) padding stays
+ *   design-controlled.
+ * - **height**: any CSS length (e.g. '400px', '100dvh') applied as the host's
+ *   min-height (so the section is at least that tall) — mirroring how `width`
+ *   maps to the body max-width.
+ *
+ * @example
+ * ```ts
+ * class NLDDSimpleSection extends PageSectionMixin(LitElement) { … }
+ * ```
+ */
+export declare function PageSectionMixin<TBase extends Constructor<LitElement>>(Base: TBase): TBase & Constructor<LitElement & {
+    background: PageSectionBackground;
+    scheme: PageSectionScheme;
+    paddingBlock?: PageSectionPadding;
+    paddingTop?: PageSectionPadding;
+    paddingBottom?: PageSectionPadding;
+    smPaddingBlock?: PageSectionPadding;
+    smPaddingTop?: PageSectionPadding;
+    smPaddingBottom?: PageSectionPadding;
+    mdPaddingBlock?: PageSectionPadding;
+    mdPaddingTop?: PageSectionPadding;
+    mdPaddingBottom?: PageSectionPadding;
+    lgPaddingBlock?: PageSectionPadding;
+    lgPaddingTop?: PageSectionPadding;
+    lgPaddingBottom?: PageSectionPadding;
+    height?: string;
+}>;
+export {};
+//# sourceMappingURL=page-section-mixin.d.ts.map