@nldd/design-system 0.8.63 → 0.8.65

package/dist/components/layout/page-sections/hero/hero.styles.js

@@ -1,11 +1,14 @@
 import { css, unsafeCSS } from 'lit';
 import { breakpoints } from '../../../../assets/styles/breakpoints.js';
-import { inheritedTextReset, slottedReset } from '../../../../assets/styles/slotted-reset.js';
+import { inheritedTextReset, slottedReset } from '../../../../assets/styles/style-resets.js';
 const smMax = unsafeCSS(breakpoints.smMax);
 const mdMin = unsafeCSS(breakpoints.mdMin);
 const mdMax = unsafeCSS(breakpoints.mdMax);
 const lgMin = unsafeCSS(breakpoints.lgMin);
 export const heroStyles = css `
+	:host {
+		box-sizing: border-box;
+	}
 
 
 	/* # Host */
@@ -24,11 +27,7 @@ export const heroStyles = css `
 		--_lg-padding-top: initial;
 		--_lg-padding-bottom: initial;
 		--_max-width: var(--semantics-page-sections-body-max-width);
-		/* Rijkshuisstijl shape language: the corner radius derives from the
-		   ribbon width — 1.5X on small containers, 2X on md/lg, and the panel
-		   corner at half the media radius so text clears the curve. Never
-		   animated. */
-		--_corner-radius: calc(var(--semantics-brand-ribbon-sm-width) * 1.5);
+		--_media-aspect-ratio: 21 / 9;
 		--_main-width: 50%;
 		--_main-background-color: var(--semantics-categories-accent-reference-background-color);
 		--_main-content-color: var(--semantics-categories-accent-reference-primary-content-color);
@@ -172,13 +171,9 @@ export const heroStyles = css `
 		flex-grow: 1;
 		align-items: center;
 
-		/* The responsive overrides live here, not on :host — a container
-		   query inside :host would match an ancestor container, while these
-		   must query the host's own inline size. The derived panel radius is
-		   also declared here (not on :host): a custom property resolves its
-		   var() on the declaring element, so it must sit below the
-		   breakpoint overrides to track them. */
-		--_main-corner-radius: calc(var(--_corner-radius) / 2);
+		/* The responsive overrides live here, not on :host — a container query
+		   inside :host would match an ancestor container, while these must query
+		   the host's own inline size. */
 
 		@container (max-width: ${smMax}) {
 			padding-inline: var(--semantics-page-sections-sm-margin-inline);
@@ -187,7 +182,6 @@ export const heroStyles = css `
 		}
 
 		@container (min-width: ${mdMin}) and (max-width: ${mdMax}) {
-			--_corner-radius: calc(var(--semantics-brand-ribbon-md-width) * 2);
 			--_main-padding: var(--primitives-space-24);
 			padding-inline: var(--semantics-page-sections-md-margin-inline);
 			padding-top: var(--_md-padding-top, var(--_padding-top, var(--semantics-page-sections-md-margin-block)));
@@ -195,7 +189,6 @@ export const heroStyles = css `
 		}
 
 		@container (min-width: ${lgMin}) {
-			--_corner-radius: calc(var(--semantics-brand-ribbon-lg-width) * 2);
 			--_main-padding: var(--primitives-space-32);
 			padding-inline: var(--semantics-page-sections-lg-margin-inline);
 			padding-top: var(--_lg-padding-top, var(--_padding-top, var(--semantics-page-sections-lg-margin-block)));
@@ -221,27 +214,10 @@ export const heroStyles = css `
 		grid-template-columns: 100%;
 	}
 
-	/* Without media a base-colored shape would be invisible on the base
-	   surface; border the sides that meet the rounded corner, like
-	   blockquote does. */
-	:host(:not([data-has-media])[main-background="base"][data-media-corner="top-left"]) .hero__body {
-		border-top: var(--primitives-border-width-regular) solid var(--semantics-content-color);
-		border-left: var(--primitives-border-width-regular) solid var(--semantics-content-color);
-	}
-
-	:host(:not([data-has-media])[main-background="base"][data-media-corner="top-right"]) .hero__body {
-		border-top: var(--primitives-border-width-regular) solid var(--semantics-content-color);
-		border-right: var(--primitives-border-width-regular) solid var(--semantics-content-color);
-	}
-
-	:host(:not([data-has-media])[main-background="base"][data-media-corner="bottom-left"]) .hero__body {
-		border-bottom: var(--primitives-border-width-regular) solid var(--semantics-content-color);
-		border-left: var(--primitives-border-width-regular) solid var(--semantics-content-color);
-	}
-
-	:host(:not([data-has-media])[main-background="base"][data-media-corner="bottom-right"]) .hero__body {
-		border-bottom: var(--primitives-border-width-regular) solid var(--semantics-content-color);
-		border-right: var(--primitives-border-width-regular) solid var(--semantics-content-color);
+	/* Without media a base-colored panel would be invisible on the base surface;
+	   give it a full border so the rectangle reads. */
+	:host(:not([data-has-media])[main-background="base"]) .hero__body {
+		border: var(--primitives-border-width-regular) solid var(--semantics-content-color);
 	}
 
 	/* A ghost cell sets the body's minimum height from the aspect ratio
@@ -253,36 +229,12 @@ export const heroStyles = css `
 	:host([data-has-media]:not([main-width="full"])) .hero__body::before {
 		@container (min-width: ${mdMin}) {
 			content: '';
-			aspect-ratio: 21 / 9;
+			aspect-ratio: var(--_media-aspect-ratio);
 			grid-area: 1 / 1;
 			align-self: start;
 		}
 	}
 
-	/* Without media the full-bleed panel would paint square over the
-	   body's rounded corner; clipping is safe here because there is no
-	   aspect-ratio in this mode, so the content minimum still sizes the
-	   body. */
-	:host(:not([data-has-media])) .hero__body {
-		overflow: hidden;
-	}
-
-	:host([data-media-corner="top-left"]) .hero__body {
-		border-top-left-radius: var(--_corner-radius);
-	}
-
-	:host([data-media-corner="top-right"]) .hero__body {
-		border-top-right-radius: var(--_corner-radius);
-	}
-
-	:host([data-media-corner="bottom-left"]) .hero__body {
-		border-bottom-left-radius: var(--_corner-radius);
-	}
-
-	:host([data-media-corner="bottom-right"]) .hero__body {
-		border-bottom-right-radius: var(--_corner-radius);
-	}
-
 	@media (forced-colors: active) {
 		.hero__body {
 			border: var(--primitives-border-width-thin) solid CanvasText;
@@ -296,7 +248,6 @@ export const heroStyles = css `
 		position: absolute;
 		inset: 0;
 		overflow: hidden;
-		border-radius: inherit;
 	}
 
 	.hero__media[hidden] {
@@ -317,6 +268,13 @@ export const heroStyles = css `
 		height: 100% !important;
 	}
 
+	.hero__media img {
+		display: block;
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+	}
+
 
 	/* # Main */
 
@@ -343,16 +301,6 @@ export const heroStyles = css `
 		width: 100%;
 	}
 
-	/* Without media the big corner radius sits on the panel itself; give the
-	   corner-adjacent inline side extra room so content clears the curve. */
-	:host(:not([data-has-media]):is([data-media-corner="top-left"], [data-media-corner="bottom-left"])) .hero__main {
-		padding-left: calc(var(--_main-padding) + var(--_corner-radius) / 2);
-	}
-
-	:host(:not([data-has-media]):is([data-media-corner="top-right"], [data-media-corner="bottom-right"])) .hero__main {
-		padding-right: calc(var(--_main-padding) + var(--_corner-radius) / 2);
-	}
-
 	:host([main-position="top-left"]) .hero__main {
 		align-self: start;
 	}
@@ -375,64 +323,6 @@ export const heroStyles = css `
 		justify-self: end;
 	}
 
-	/* A grown corner panel keeps at least the corner-radius height of media
-	   visible on its media-facing side, so the rounded corner never gets
-	   squeezed out. Keyed off the JS-computed main corner (top-* sits the panel
-	   at the bottom → margin-top; bottom-* → margin-bottom) rather than
-	   main-position, so it still holds when main-position is left to its default
-	   and the attribute isn't reflected. The cornerless left/right panels have
-	   data-main-corner="none" and fall through. Only in the overlay layout (md+). */
-	:host([data-has-media]:is([data-main-corner="top-left"], [data-main-corner="top-right"])) .hero__main {
-		@container (min-width: ${mdMin}) {
-			margin-top: var(--_corner-radius);
-		}
-	}
-
-	:host([data-has-media]:is([data-main-corner="bottom-left"], [data-main-corner="bottom-right"])) .hero__main {
-		@container (min-width: ${mdMin}) {
-			margin-bottom: var(--_corner-radius);
-		}
-	}
-
-	/* The two sides meeting the panel's rounded corner get a step more
-	   padding so content clears the curve. Only md and up — mobile zeroes
-	   the corner. */
-	:host([data-main-corner="top-left"]) .hero__main {
-		border-top-left-radius: var(--_main-corner-radius);
-
-		@container (min-width: ${mdMin}) {
-			padding-top: calc(var(--_main-padding) + var(--primitives-space-8));
-			padding-left: calc(var(--_main-padding) + var(--primitives-space-8));
-		}
-	}
-
-	:host([data-main-corner="top-right"]) .hero__main {
-		border-top-right-radius: var(--_main-corner-radius);
-
-		@container (min-width: ${mdMin}) {
-			padding-top: calc(var(--_main-padding) + var(--primitives-space-8));
-			padding-right: calc(var(--_main-padding) + var(--primitives-space-8));
-		}
-	}
-
-	:host([data-main-corner="bottom-left"]) .hero__main {
-		border-bottom-left-radius: var(--_main-corner-radius);
-
-		@container (min-width: ${mdMin}) {
-			padding-bottom: calc(var(--_main-padding) + var(--primitives-space-8));
-			padding-left: calc(var(--_main-padding) + var(--primitives-space-8));
-		}
-	}
-
-	:host([data-main-corner="bottom-right"]) .hero__main {
-		border-bottom-right-radius: var(--_main-corner-radius);
-
-		@container (min-width: ${mdMin}) {
-			padding-bottom: calc(var(--_main-padding) + var(--primitives-space-8));
-			padding-right: calc(var(--_main-padding) + var(--primitives-space-8));
-		}
-	}
-
 	@media (forced-colors: active) {
 		.hero__main {
 			border: var(--primitives-border-width-thin) solid CanvasText;
@@ -442,14 +332,11 @@ export const heroStyles = css `
 
 	/* # Full-width strip (md+)
 	   With main-width="full" the panel is a full top or bottom strip and the
-	   media stacks on the opposite side instead of sitting behind it — the
-	   overlay's absolute media would otherwise hide its own rounded corner under
-	   the panel. Switch the body to a column so the two blocks stack: a bottom
-	   panel keeps the media on top, a top panel (column-reverse) drops it below.
-	   The media keeps the overlay's 21/9 strip. Below sm every layout already
-	   stacks, so this only targets md and up. The rounded corner still follows
-	   data-media-corner — resolved to the strip's outer edge in hero.ts — so the
-	   per-corner body rules above keep painting it. */
+	   media stacks on the opposite side instead of sitting behind it. Switch the
+	   body to a column so the two blocks stack: a bottom panel keeps the media on
+	   top, a top panel (column-reverse) drops it below. The media keeps the
+	   overlay's 21/9 strip. Below sm every layout already stacks, so this only
+	   targets md and up. */
 
 	@container (min-width: ${mdMin}) {
 		:host([data-has-media][main-width="full"]) .hero__body {
@@ -463,14 +350,12 @@ export const heroStyles = css `
 
 		:host([data-has-media][main-width="full"]) .hero__media {
 			position: static;
-			aspect-ratio: 21 / 9;
+			aspect-ratio: var(--_media-aspect-ratio);
 		}
 	}
 
 
-	/* # Mobile — stack media over a full-width cornerless panel.
-	   Placed after the corner rules so the equal-specificity zero-out
-	   wins on source order. */
+	/* # Mobile — stack media over a full-width panel. */
 
 	@container (max-width: ${smMax}) {
 		.hero__body {
@@ -482,30 +367,10 @@ export const heroStyles = css `
 			flex-direction: column-reverse;
 		}
 
-		:host([data-media-corner]) .hero__body {
-			border-radius: 0;
-		}
-
 		.hero__media {
 			position: static;
 			overflow: hidden;
-			aspect-ratio: 21 / 9;
-		}
-
-		/* On mobile the rounded corner always sits at the top: a bottom
-		   corner flips to its top counterpart, also when the consumer set
-		   one explicitly. The radius goes on the body so its painted
-		   background rounds along; the media inherits it. */
-		:host(:is([data-media-corner="top-left"], [data-media-corner="bottom-left"])) .hero__body {
-			border-top-left-radius: var(--_corner-radius);
-		}
-
-		:host(:is([data-media-corner="top-right"], [data-media-corner="bottom-right"])) .hero__body {
-			border-top-right-radius: var(--_corner-radius);
-		}
-
-		:host([data-main-corner]) .hero__main {
-			border-radius: 0;
+			aspect-ratio: var(--_media-aspect-ratio);
 		}
 
 		.hero__main {

package/dist/components/layout/page-sections/hero/hero.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"hero.styles.js","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/hero/hero.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,0CAA0C,CAAC;AACvE,OAAO,EAAE,kBAAkB,EAAE,YAAY,EAAE,MAAM,4CAA4C,CAAC;AAE9F,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC3C,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC3C,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC3C,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAE3C,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA6BzB,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BAkJK,KAAK;;;;;;2BAML,KAAK,qBAAqB,KAAK;;;;;;;;2BAQ/B,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BAyDL,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAqD5B,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BA+EW,KAAK;;;;;;2BAML,KAAK;;;;;;;;;;;2BAWL,KAAK;;;;;;;;;2BASL,KAAK;;;;;;;;;2BASL,KAAK;;;;;;;;;2BASL,KAAK;;;;;;;;;;;;;;;;;;;;;;;;0BAwBN,KAAK;;;;;;;;;;;;;;;;;;;;;0BAqBL,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwC9B,CAAC"}
+{"version":3,"file":"hero.styles.js","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/hero/hero.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,0CAA0C,CAAC;AACvE,OAAO,EAAE,kBAAkB,EAAE,YAAY,EAAE,MAAM,2CAA2C,CAAC;AAE7F,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC3C,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC3C,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC3C,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAE3C,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA4BzB,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BA8IK,KAAK;;;;;;2BAML,KAAK,qBAAqB,KAAK;;;;;;;2BAO/B,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BAuCL,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA4B5B,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0BAmFU,KAAK;;;;;;;;;;;;;;;;;;;0BAmBL,KAAK;;;;;;;;;;;;;;;;;;;;CAoB9B,CAAC"}

package/dist/components/layout/page-sections/hero/hero.template.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hero.template.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/hero/hero.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,cAAc,EAAE,MAAM,KAAK,CAAC;AAC3C,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAE1C,wBAAgB,YAAY,CAAC,SAAS,EAAE,QAAQ,GAAG,cAAc,CAehE"}
+{"version":3,"file":"hero.template.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/hero/hero.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,cAAc,EAAE,MAAM,KAAK,CAAC;AACpD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAE1C,wBAAgB,YAAY,CAAC,SAAS,EAAE,QAAQ,GAAG,cAAc,CA2BhE"}

package/dist/components/layout/page-sections/hero/hero.template.js

@@ -1,5 +1,16 @@
-import { html } from 'lit';
+import { html, nothing } from 'lit';
 export function heroTemplate(component) {
+    // Internal media image from media-src, only when nothing is slotted (the
+    // slot wins, mirroring nldd-image / nldd-byline).
+    const mediaImage = component.mediaSrc && !component._slotHasMedia
+        ? html `<img src=${component.mediaSrc}
+				srcset=${component.mediaSrcset || nothing}
+				sizes=${component.mediaSizes || nothing}
+				alt=${component.mediaAlt}
+				loading="eager"
+				decoding="async"
+			>`
+        : nothing;
     return html `
 		<section class="hero">
 			<div class="hero__body">
@@ -7,6 +18,7 @@ export function heroTemplate(component) {
 					?hidden=${!component._hasMedia}
 				>
 					<slot name="media" @slotchange=${component._onMediaSlotChange}></slot>
+					${mediaImage}
 				</div>
 				<div class="hero__main">
 					<slot></slot>

package/dist/components/layout/page-sections/hero/hero.template.js.map

@@ -1 +1 @@
-{"version":3,"file":"hero.template.js","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/hero/hero.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAC;AAG3C,MAAM,UAAU,YAAY,CAAC,SAAmB;IAC/C,OAAO,IAAI,CAAA;;;;eAIG,CAAC,SAAS,CAAC,SAAS;;sCAEG,SAAS,CAAC,kBAAkB;;;;;;;EAOhE,CAAC;AACH,CAAC"}
+{"version":3,"file":"hero.template.js","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/hero/hero.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAkB,MAAM,KAAK,CAAC;AAGpD,MAAM,UAAU,YAAY,CAAC,SAAmB;IAC/C,yEAAyE;IACzE,kDAAkD;IAClD,MAAM,UAAU,GAAG,SAAS,CAAC,QAAQ,IAAI,CAAC,SAAS,CAAC,aAAa;QAChE,CAAC,CAAC,IAAI,CAAA,YAAY,SAAS,CAAC,QAAQ;aACzB,SAAS,CAAC,WAAW,IAAI,OAAO;YACjC,SAAS,CAAC,UAAU,IAAI,OAAO;UACjC,SAAS,CAAC,QAAQ;;;KAGvB;QACH,CAAC,CAAC,OAAO,CAAC;IACX,OAAO,IAAI,CAAA;;;;eAIG,CAAC,SAAS,CAAC,SAAS;;sCAEG,SAAS,CAAC,kBAAkB;OAC3D,UAAU;;;;;;;EAOf,CAAC;AACH,CAAC"}

package/dist/components/layout/page-sections/one-half-one-half-section/one-half-one-half-section.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"one-half-one-half-section.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/one-half-one-half-section/one-half-one-half-section.styles.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,2BAA2B,yBAwHvC,CAAC"}
+{"version":3,"file":"one-half-one-half-section.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/one-half-one-half-section/one-half-one-half-section.styles.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,2BAA2B,yBA2HvC,CAAC"}

package/dist/components/layout/page-sections/one-half-one-half-section/one-half-one-half-section.styles.js

@@ -5,6 +5,9 @@ const mdMin = unsafeCSS(breakpoints.mdMin);
 const mdMax = unsafeCSS(breakpoints.mdMax);
 const lgMin = unsafeCSS(breakpoints.lgMin);
 export const oneHalfOneHalfSectionStyles = css `
+	:host {
+		box-sizing: border-box;
+	}
 
 
 	/* # Host */

package/dist/components/layout/page-sections/one-half-one-half-section/one-half-one-half-section.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"one-half-one-half-section.styles.js","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/one-half-one-half-section/one-half-one-half-section.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,0CAA0C,CAAC;AAEvE,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC3C,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC3C,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC3C,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAE3C,MAAM,CAAC,MAAM,2BAA2B,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BA4CnB,KAAK;;;;;;2BAML,KAAK,qBAAqB,KAAK;;;;;;2BAM/B,KAAK;;;;;;;;;;;;;;;;2BAgBL,KAAK;;;;2BAIL,KAAK,qBAAqB,KAAK;;;;2BAI/B,KAAK;;;;;;;;;;;;;;2BAcL,KAAK;;;;2BAIL,KAAK,qBAAqB,KAAK;;;;2BAI/B,KAAK;;;;;;;;;;;;;;;;;;CAkB/B,CAAC"}
+{"version":3,"file":"one-half-one-half-section.styles.js","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/one-half-one-half-section/one-half-one-half-section.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,0CAA0C,CAAC;AAEvE,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC3C,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC3C,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC3C,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAE3C,MAAM,CAAC,MAAM,2BAA2B,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BA+CnB,KAAK;;;;;;2BAML,KAAK,qBAAqB,KAAK;;;;;;2BAM/B,KAAK;;;;;;;;;;;;;;;;2BAgBL,KAAK;;;;2BAIL,KAAK,qBAAqB,KAAK;;;;2BAI/B,KAAK;;;;;;;;;;;;;;2BAcL,KAAK;;;;2BAIL,KAAK,qBAAqB,KAAK;;;;2BAI/B,KAAK;;;;;;;;;;;;;;;;;;CAkB/B,CAAC"}

package/dist/components/layout/page-sections/one-third-two-thirds-section/one-third-two-thirds-section.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"one-third-two-thirds-section.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/one-third-two-thirds-section/one-third-two-thirds-section.styles.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,8BAA8B,yBAiI1C,CAAC"}
+{"version":3,"file":"one-third-two-thirds-section.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/one-third-two-thirds-section/one-third-two-thirds-section.styles.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,8BAA8B,yBAoI1C,CAAC"}

package/dist/components/layout/page-sections/one-third-two-thirds-section/one-third-two-thirds-section.styles.js

@@ -5,6 +5,9 @@ const mdMin = unsafeCSS(breakpoints.mdMin);
 const mdMax = unsafeCSS(breakpoints.mdMax);
 const lgMin = unsafeCSS(breakpoints.lgMin);
 export const oneThirdTwoThirdsSectionStyles = css `
+	:host {
+		box-sizing: border-box;
+	}
 
 
 	/* # Host */

package/dist/components/layout/page-sections/one-third-two-thirds-section/one-third-two-thirds-section.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"one-third-two-thirds-section.styles.js","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/one-third-two-thirds-section/one-third-two-thirds-section.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,0CAA0C,CAAC;AAEvE,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC3C,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC3C,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC3C,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAE3C,MAAM,CAAC,MAAM,8BAA8B,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BA4CtB,KAAK;;;;;;2BAML,KAAK,qBAAqB,KAAK;;;;;;2BAM/B,KAAK;;;;;;;;;;;;;;;;2BAgBL,KAAK;;;;2BAIL,KAAK,qBAAqB,KAAK;;;;2BAI/B,KAAK;;;;;;;;;;;;;;;;;;;;;;;2BAuBL,KAAK;;;;2BAIL,KAAK,qBAAqB,KAAK;;;;2BAI/B,KAAK;;;;;;;;;;;;;;;;;;CAkB/B,CAAC"}
+{"version":3,"file":"one-third-two-thirds-section.styles.js","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/one-third-two-thirds-section/one-third-two-thirds-section.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,0CAA0C,CAAC;AAEvE,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC3C,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC3C,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC3C,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAE3C,MAAM,CAAC,MAAM,8BAA8B,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BA+CtB,KAAK;;;;;;2BAML,KAAK,qBAAqB,KAAK;;;;;;2BAM/B,KAAK;;;;;;;;;;;;;;;;2BAgBL,KAAK;;;;2BAIL,KAAK,qBAAqB,KAAK;;;;2BAI/B,KAAK;;;;;;;;;;;;;;;;;;;;;;;2BAuBL,KAAK;;;;2BAIL,KAAK,qBAAqB,KAAK;;;;2BAI/B,KAAK;;;;;;;;;;;;;;;;;;CAkB/B,CAAC"}

package/dist/components/layout/page-sections/sidebar-section/sidebar-section.d.ts

@@ -0,0 +1,119 @@
+/**
+ * Nederlandse Digitale Dienst Sidebar Section Component (Lit + TypeScript)
+ *
+ * A page section with a left sidebar alongside the main content.
+ *
+ * - **Wide (section >= 1008px):** two columns. The sidebar is a sticky, scrollable
+ *   tinted box (max-width 320px) beside the main content. Its sticky top/bottom insets
+ *   default to 16px; override with `sticky-top` / `sticky-bottom` so it clears
+ *   other sticky page elements (e.g. a sticky header).
+ * - **Narrow (section < 1008px):** the sidebar collapses behind a sheet (a left panel on
+ *   md+ viewports, a bottom sheet on mobile), and the host reflects a `collapsed`
+ *   attribute. The consumer owns the trigger: place
+ *   any chrome (a button, a chosen-filters bar, …) wherever you want, show it only
+ *   while collapsed (e.g. `nldd-sidebar-section[collapsed] .my-trigger { … }` or by
+ *   reading `collapsed` / listening to `collapse-change`), and call `show()` /
+ *   `toggle()` to open the sheet. Bind `aria-expanded` via the `open`/`close` events.
+ *   The sheet gets a sticky title bar by default — the `sidebar-label` as title plus a
+ *   "Sluit" button — overridable via the `sheet-top-title-bar` slot.
+ *
+ * The sidebar content lives in `slot="sidebar"`. Its slot outlet moves between the
+ * box (expanded) and the sheet (collapsed) so there is a single, never-duplicated
+ * copy — the light DOM (and its state) is preserved across the switch.
+ *
+ * The box <-> sheet switch follows the section's OWN width (a ResizeObserver on the
+ * host), not the viewport — so a sidebar-section in a narrow column or a split-view
+ * pane collapses to the sheet just like one in a narrow viewport, and the sidebar
+ * never stacks above or crowds the main. Set `no-collapse` to opt out: a narrow
+ * section then stacks the sidebar (full-width) above the main instead of using a sheet.
+ *
+ * Inherits block `padding` and `height` from PageSectionMixin.
+ *
+ * @element nldd-sidebar-section
+ *
+ * @slot                    - Main content
+ * @slot sidebar            - Sidebar content (sticky box when expanded, a left/bottom sheet when
+ *                            collapsed). The box and the sheet add no padding of their own — wrap
+ *                            the content in a padded container (e.g. nldd-container) for inset spacing.
+ * @slot sheet-top-title-bar - Replaces the sheet's default title bar (when collapsed). Empty falls back to an
+ *                            `nldd-top-title-bar` with the `sidebar-label` as title and a "Sluit" button.
+ * @slot header              - Content above the columns
+ * @slot footer              - Content below the columns
+ *
+ * @attr {boolean} [collapsed]    - Read-only, reflected: true while the sidebar is a sheet (the section is narrower than lg). Target it via CSS to reveal sheet-only chrome.
+ * @attr {boolean} [no-collapse]  - Opt out of the sheet: a narrow section stacks the sidebar above the main instead of collapsing. `collapsed` then stays false.
+ * @attr {string}  [width]        - Body max-width: 'full' removes the constraint; any CSS length overrides the default.
+ * @attr {string}  [sticky-top]   - Sticky top inset on lg (CSS length; default = 16px).
+ * @attr {string}  [sticky-bottom]- Sticky bottom inset on lg (CSS length; default = 16px).
+ * @attr {string}  [sidebar-label]- Accessible name for the sidebar (the aside landmark on lg and the sheet on sm/md). Default 'Zijbalk'.
+ *
+ * @fires open            - The sidebar sheet opened.
+ * @fires close           - The sidebar sheet closed.
+ * @fires collapse-change - The collapsed state flipped because the section's width crossed the lg breakpoint; `{ collapsed }`.
+ *
+ * @method show()   - Opens the sidebar sheet (collapsed only; no-op on lg).
+ * @method hide()   - Closes the sidebar sheet.
+ * @method toggle() - Opens or closes the sidebar sheet (collapsed only).
+ */
+import { LitElement, type PropertyValues } from 'lit';
+import '../../sheet/sheet.js';
+import '../../page/page.js';
+import '../../../navigation/top-title-bar/top-title-bar.js';
+declare const NLDDSidebarSection_base: typeof LitElement & (new (...args: any[]) => LitElement & {
+    background: import("../../../../utilities/page-section-mixin.js").PageSectionBackground;
+    scheme: import("../../../../utilities/page-section-mixin.js").PageSectionScheme;
+    paddingBlock?: import("../../../../utilities/page-section-mixin.js").PageSectionPadding;
+    paddingTop?: import("../../../../utilities/page-section-mixin.js").PageSectionPadding;
+    paddingBottom?: import("../../../../utilities/page-section-mixin.js").PageSectionPadding;
+    smPaddingBlock?: import("../../../../utilities/page-section-mixin.js").PageSectionPadding;
+    smPaddingTop?: import("../../../../utilities/page-section-mixin.js").PageSectionPadding;
+    smPaddingBottom?: import("../../../../utilities/page-section-mixin.js").PageSectionPadding;
+    mdPaddingBlock?: import("../../../../utilities/page-section-mixin.js").PageSectionPadding;
+    mdPaddingTop?: import("../../../../utilities/page-section-mixin.js").PageSectionPadding;
+    mdPaddingBottom?: import("../../../../utilities/page-section-mixin.js").PageSectionPadding;
+    lgPaddingBlock?: import("../../../../utilities/page-section-mixin.js").PageSectionPadding;
+    lgPaddingTop?: import("../../../../utilities/page-section-mixin.js").PageSectionPadding;
+    lgPaddingBottom?: import("../../../../utilities/page-section-mixin.js").PageSectionPadding;
+    height?: string;
+    _onSlotChange(e: Event): void;
+});
+export declare class NLDDSidebarSection extends NLDDSidebarSection_base {
+    static styles: import("lit").CSSResult;
+    width: string;
+    stickyTop: string;
+    stickyBottom: string;
+    sidebarLabel: string;
+    noCollapse: boolean;
+    collapsed: boolean;
+    private _sheet?;
+    private _ro?;
+    private readonly _lgMin;
+    private _hasMeasured;
+    private _sheetOpen;
+    get _resolvedSidebarLabel(): string;
+    /** Dismiss-button label for the sheet's default title bar (i18n). */
+    get _sheetDismissText(): string;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    firstUpdated(): void;
+    private _onResize;
+    private _applyCollapsed;
+    updated(changed: PropertyValues): void;
+    private _applyInset;
+    /** Opens the sidebar sheet. No-op on lg, where the sidebar is always visible. */
+    show(): void;
+    /** Closes the sidebar sheet. */
+    hide(): void;
+    /** Opens or closes the sidebar sheet. No-op on lg. */
+    toggle(): void;
+    _onSheetOpen: () => void;
+    _onSheetClose: () => void;
+    render(): import("lit-html").TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nldd-sidebar-section': NLDDSidebarSection;
+    }
+}
+export {};
+//# sourceMappingURL=sidebar-section.d.ts.map

package/dist/components/layout/page-sections/sidebar-section/sidebar-section.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar-section.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/sidebar-section/sidebar-section.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwDG;AACH,OAAO,EAAE,UAAU,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAOtD,OAAO,sBAAsB,CAAC;AAC9B,OAAO,oBAAoB,CAAC;AAC5B,OAAO,oDAAoD,CAAC;;;;;;;;;;;;;;;;;;;AAG5D,qBACa,kBAAmB,SAAQ,uBAA4B;IACnE,OAAgB,MAAM,0BAAwB;IAG9C,KAAK,SAAM;IAGX,SAAS,SAAM;IAGf,YAAY,SAAM;IAGlB,YAAY,SAAM;IAGlB,UAAU,UAAS;IAGnB,SAAS,UAAS;IAGlB,OAAO,CAAC,MAAM,CAAC,CAAY;IAE3B,OAAO,CAAC,GAAG,CAAC,CAAiB;IAC7B,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAmC;IAC1D,OAAO,CAAC,YAAY,CAAS;IAC7B,OAAO,CAAC,UAAU,CAAS;IAE3B,IAAI,qBAAqB,IAAI,MAAM,CAElC;IAED,qEAAqE;IACrE,IAAI,iBAAiB,IAAI,MAAM,CAE9B;IAEQ,iBAAiB,IAAI,IAAI;IAQzB,oBAAoB,IAAI,IAAI;IAO5B,YAAY,IAAI,IAAI;IAM7B,OAAO,CAAC,SAAS,CAOf;IAEF,OAAO,CAAC,eAAe;IAcd,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAoB/C,OAAO,CAAC,WAAW;IAQnB,iFAAiF;IACjF,IAAI,IAAI,IAAI;IAKZ,gCAAgC;IAChC,IAAI,IAAI,IAAI;IAIZ,sDAAsD;IACtD,MAAM,IAAI,IAAI;IAQd,YAAY,QAAO,IAAI,CAAgC;IACvD,aAAa,QAAO,IAAI,CAAiC;IAEhD,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,sBAAsB,EAAE,kBAAkB,CAAC;KAC3C;CACD"}

package/dist/components/layout/page-sections/sidebar-section/sidebar-section.i18n.d.ts

@@ -0,0 +1,6 @@
+export declare const nlddSidebarSectionTranslations: {
+    'components.sidebar-section.sidebar-label': string;
+    'components.sidebar-section.sheet-dismiss-action': string;
+};
+export type NLDDSidebarSectionTranslations = typeof nlddSidebarSectionTranslations;
+//# sourceMappingURL=sidebar-section.i18n.d.ts.map

package/dist/components/layout/page-sections/sidebar-section/sidebar-section.i18n.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar-section.i18n.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/sidebar-section/sidebar-section.i18n.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,8BAA8B;;;CAG1C,CAAC;AAEF,MAAM,MAAM,8BAA8B,GAAG,OAAO,8BAA8B,CAAC"}

package/dist/components/layout/page-sections/sidebar-section/sidebar-section.i18n.js

@@ -0,0 +1,5 @@
+export const nlddSidebarSectionTranslations = {
+    'components.sidebar-section.sidebar-label': 'Zijbalk',
+    'components.sidebar-section.sheet-dismiss-action': 'Sluit',
+};
+//# sourceMappingURL=sidebar-section.i18n.js.map

package/dist/components/layout/page-sections/sidebar-section/sidebar-section.i18n.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar-section.i18n.js","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/sidebar-section/sidebar-section.i18n.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,8BAA8B,GAAG;IAC7C,0CAA0C,EAAE,SAAS;IACrD,iDAAiD,EAAE,OAAO;CAC1D,CAAC"}