@nldd/design-system 0.8.46 → 0.8.48

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 */
 
@@ -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);
 
@@ -1123,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 */
 
@@ -1187,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);
@@ -1289,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

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

@@ -0,0 +1 @@
+{"version":3,"file":"page-section-mixin.d.ts","sourceRoot":"","sources":["../../src/utilities/page-section-mixin.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAuB,MAAM,KAAK,CAAC;AAItD,KAAK,WAAW,CAAC,CAAC,GAAG,UAAU,IAAI,KAAK,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,CAAC,CAAC;AAE7D,MAAM,MAAM,qBAAqB,GAAG,SAAS,GAAG,MAAM,GAAG,QAAQ,CAAC;AAClE,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,UAAU,CAAC;AAC1E,MAAM,MAAM,kBAAkB,GAC3B,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAC9D,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAyBhE;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,SAAS,WAAW,CAAC,UAAU,CAAC,EACrE,IAAI,EAAE,KAAK,GAkK0B,KAAK,GACzC,WAAW,CACV,UAAU,GAAG;IACZ,UAAU,EAAE,qBAAqB,CAAC;IAClC,MAAM,EAAE,iBAAiB,CAAC;IAC1B,YAAY,CAAC,EAAE,kBAAkB,CAAC;IAClC,UAAU,CAAC,EAAE,kBAAkB,CAAC;IAChC,aAAa,CAAC,EAAE,kBAAkB,CAAC;IACnC,cAAc,CAAC,EAAE,kBAAkB,CAAC;IACpC,YAAY,CAAC,EAAE,kBAAkB,CAAC;IAClC,eAAe,CAAC,EAAE,kBAAkB,CAAC;IACrC,cAAc,CAAC,EAAE,kBAAkB,CAAC;IACpC,YAAY,CAAC,EAAE,kBAAkB,CAAC;IAClC,eAAe,CAAC,EAAE,kBAAkB,CAAC;IACrC,cAAc,CAAC,EAAE,kBAAkB,CAAC;IACpC,YAAY,CAAC,EAAE,kBAAkB,CAAC;IAClC,eAAe,CAAC,EAAE,kBAAkB,CAAC;IACrC,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB,CACD,CACF"}

package/dist/utilities/page-section-mixin.js

@@ -0,0 +1,239 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { property } from 'lit/decorators.js';
+import { onColorSchemeChange } from './color-scheme-repaint.js';
+const BACKGROUND_TOKEN = {
+    base: 'var(--semantics-surfaces-background-color)',
+    tinted: 'var(--semantics-surfaces-tinted-background-color)',
+};
+function paddingToValue(size) {
+    if (size === undefined || size === '')
+        return null;
+    if (size === '0')
+        return '0';
+    return `var(--primitives-space-${size})`;
+}
+// Block-padding override scopes: base ('') + the sm/md/lg breakpoints. Each
+// scope reads its own props and writes `--_{scope-}padding-top/bottom`, which
+// the section CSS resolves per breakpoint (scope override → base override →
+// responsive default). The CSS var prefix is `${scope}-` (empty for base).
+const PADDING_SCOPES = ['', 'sm', 'md', 'lg'];
+const PADDING_KEYS = [
+    'paddingBlock', 'paddingTop', 'paddingBottom',
+    'smPaddingBlock', 'smPaddingTop', 'smPaddingBottom',
+    'mdPaddingBlock', 'mdPaddingTop', 'mdPaddingBottom',
+    'lgPaddingBlock', 'lgPaddingTop', 'lgPaddingBottom',
+];
+/**
+ * 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 function PageSectionMixin(Base) {
+    class WithPageSection extends Base {
+        constructor() {
+            super(...arguments);
+            this.background = 'inherit';
+            this.scheme = 'inherit';
+        }
+        connectedCallback() {
+            super.connectedCallback();
+            // Re-resolve `inverted` whenever the page color-scheme flips.
+            this._unsubScheme = onColorSchemeChange(() => {
+                if (this.scheme === 'inverted')
+                    this._applyScheme();
+            });
+        }
+        disconnectedCallback() {
+            super.disconnectedCallback();
+            this._unsubScheme?.();
+            this._unsubScheme = undefined;
+        }
+        updated(changed) {
+            super.updated(changed);
+            if (changed.has('background'))
+                this._applyBackground();
+            if (changed.has('scheme'))
+                this._applyScheme();
+            if (PADDING_KEYS.some((k) => changed.has(k)))
+                this._applyPadding();
+            if (changed.has('height'))
+                this._applyHeight();
+        }
+        _applyBackground() {
+            if (this.background === 'base' || this.background === 'tinted') {
+                const token = BACKGROUND_TOKEN[this.background];
+                this.style.backgroundColor = token;
+                // Cascade so descendants (cards, nested sections) match.
+                this.style.setProperty('--context-parent-background-color', token);
+            }
+            else {
+                this.style.backgroundColor = '';
+                this.style.removeProperty('--context-parent-background-color');
+            }
+        }
+        _applyScheme() {
+            if (this.scheme === 'light' || this.scheme === 'dark') {
+                this.style.colorScheme = this.scheme;
+            }
+            else if (this.scheme === 'inverted') {
+                this.style.colorScheme = this._resolveActiveScheme() === 'dark' ? 'light' : 'dark';
+            }
+            else {
+                this.style.removeProperty('color-scheme');
+            }
+        }
+        /**
+         * Best-effort detection of the *actively rendered* scheme around the
+         * section, used to invert it.
+         *
+         * `getComputedStyle(parent).colorScheme` returns the *declared* value
+         * (`'light dark'` for "supports both"; `'normal'` for the initial
+         * value) — not the one the browser actually paints with. For
+         * `'inverted'` we want the painted scheme, so:
+         *   1. Prefer the app's explicit override on `:root[data-scheme]`
+         *      (the project's site-wide light/dark toggle).
+         *   2. Walk up to find an ancestor that pins a single scheme.
+         *   3. Otherwise fall back to `prefers-color-scheme` — that's what
+         *      `'light dark'` resolves to in practice.
+         *
+         * Perf: the per-call cost is `getComputedStyle()` for each ancestor
+         * up to one that pins a scheme. This only runs when the project
+         * does NOT set `:root[data-scheme]` (apps with a global theme
+         * toggle, like regelrecht, hit the fast path and never enter the
+         * walk). When the fallback is needed the walk is bounded by the
+         * DOM depth and only fires on `scheme` prop change or a
+         * color-scheme repaint event — not on every render.
+         *
+         * Cross-shadow caveat: `parentElement` doesn't traverse shadow
+         * boundaries, so a `color-scheme` declared on an outer custom
+         * element's host won't be picked up by the walk; we then fall
+         * through to `prefers-color-scheme`. For reliable `'inverted'`
+         * behaviour inside nested shadow trees, set `data-scheme` on
+         * `:root` so the fast path resolves the painted scheme directly.
+         */
+        _resolveActiveScheme() {
+            const root = document.documentElement.getAttribute('data-scheme');
+            if (root === 'light' || root === 'dark')
+                return root;
+            let el = this.parentElement;
+            while (el) {
+                const declared = getComputedStyle(el).colorScheme;
+                const hasLight = declared.includes('light');
+                const hasDark = declared.includes('dark');
+                if (hasDark && !hasLight)
+                    return 'dark';
+                if (hasLight && !hasDark)
+                    return 'light';
+                el = el.parentElement;
+            }
+            return window.matchMedia?.('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+        }
+        _applyPadding() {
+            const self = this;
+            for (const scope of PADDING_SCOPES) {
+                // Property names: base = paddingBlock(…); scoped = smPaddingBlock(…).
+                const prop = (suffix) => scope ? `${scope}Padding${suffix}` : `padding${suffix}`;
+                const block = self[prop('Block')];
+                const top = self[prop('Top')];
+                const bottom = self[prop('Bottom')];
+                const prefix = scope ? `${scope}-` : '';
+                this._setVar(`--_${prefix}padding-top`, paddingToValue(top ?? block));
+                this._setVar(`--_${prefix}padding-bottom`, paddingToValue(bottom ?? block));
+            }
+        }
+        _applyHeight() {
+            // Like `width` (which sets the body max-width), the `height` keyword
+            // maps to a constraint — here the host's min-height.
+            const v = this.height;
+            if (v && typeof CSS !== 'undefined' && CSS.supports('min-height', v)) {
+                this.style.minHeight = v;
+            }
+            else {
+                this.style.removeProperty('min-height');
+            }
+        }
+        _setVar(name, value) {
+            if (value === null)
+                this.style.removeProperty(name);
+            else
+                this.style.setProperty(name, value);
+        }
+    }
+    __decorate([
+        property({ type: String, reflect: true })
+    ], WithPageSection.prototype, "background", void 0);
+    __decorate([
+        property({ type: String, reflect: true })
+    ], WithPageSection.prototype, "scheme", void 0);
+    __decorate([
+        property({ type: String, reflect: true, attribute: 'padding-block' })
+    ], WithPageSection.prototype, "paddingBlock", void 0);
+    __decorate([
+        property({ type: String, reflect: true, attribute: 'padding-top' })
+    ], WithPageSection.prototype, "paddingTop", void 0);
+    __decorate([
+        property({ type: String, reflect: true, attribute: 'padding-bottom' })
+    ], WithPageSection.prototype, "paddingBottom", void 0);
+    __decorate([
+        property({ type: String, reflect: true, attribute: 'sm-padding-block' })
+    ], WithPageSection.prototype, "smPaddingBlock", void 0);
+    __decorate([
+        property({ type: String, reflect: true, attribute: 'sm-padding-top' })
+    ], WithPageSection.prototype, "smPaddingTop", void 0);
+    __decorate([
+        property({ type: String, reflect: true, attribute: 'sm-padding-bottom' })
+    ], WithPageSection.prototype, "smPaddingBottom", void 0);
+    __decorate([
+        property({ type: String, reflect: true, attribute: 'md-padding-block' })
+    ], WithPageSection.prototype, "mdPaddingBlock", void 0);
+    __decorate([
+        property({ type: String, reflect: true, attribute: 'md-padding-top' })
+    ], WithPageSection.prototype, "mdPaddingTop", void 0);
+    __decorate([
+        property({ type: String, reflect: true, attribute: 'md-padding-bottom' })
+    ], WithPageSection.prototype, "mdPaddingBottom", void 0);
+    __decorate([
+        property({ type: String, reflect: true, attribute: 'lg-padding-block' })
+    ], WithPageSection.prototype, "lgPaddingBlock", void 0);
+    __decorate([
+        property({ type: String, reflect: true, attribute: 'lg-padding-top' })
+    ], WithPageSection.prototype, "lgPaddingTop", void 0);
+    __decorate([
+        property({ type: String, reflect: true, attribute: 'lg-padding-bottom' })
+    ], WithPageSection.prototype, "lgPaddingBottom", void 0);
+    __decorate([
+        property({ type: String, reflect: true })
+    ], WithPageSection.prototype, "height", void 0);
+    return WithPageSection;
+}
+/* eslint-enable @typescript-eslint/no-explicit-any */
+//# sourceMappingURL=page-section-mixin.js.map