@nldd/design-system 0.8.95 → 0.8.97

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

@@ -18,20 +18,29 @@ export const heroStyles = css `
 		/* Block-padding overrides from PageSectionMixin; 'initial' makes the
 		   var() in .hero fall back to the responsive default until the mixin
 		   sets a value inline on the host. */
-		--_padding-top: initial;
-		--_padding-bottom: initial;
-		--_sm-padding-top: initial;
-		--_sm-padding-bottom: initial;
-		--_md-padding-top: initial;
-		--_md-padding-bottom: initial;
-		--_lg-padding-top: initial;
-		--_lg-padding-bottom: initial;
-		--_max-width: var(--semantics-page-sections-body-max-width);
-		--_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-content-color);
-		--_main-padding: var(--primitives-space-16);
+		--_hero-padding-top: initial;
+		--_hero-padding-bottom: initial;
+		--_hero-sm-padding-top: initial;
+		--_hero-sm-padding-bottom: initial;
+		--_hero-md-padding-top: initial;
+		--_hero-md-padding-bottom: initial;
+		--_hero-lg-padding-top: initial;
+		--_hero-lg-padding-bottom: initial;
+		--_hero-max-width: var(--semantics-page-sections-body-max-width);
+		--_hero-media-aspect-ratio: 21 / 9;
+		--_hero-media-height: auto;
+		--_hero-main-min-width: var(--primitives-area-480);
+		--_hero-main-max-width: var(--primitives-area-640);
+		--_hero-main-width: auto;
+		--_hero-main-background-color: var(--semantics-categories-accent-reference-background-color);
+		--_hero-main-content-color: var(--semantics-categories-accent-reference-content-color);
+		--_hero-main-padding: var(--primitives-space-16);
+		--_hero-main-inset: var(--primitives-space-0);
+		--_hero-sm-main-inset: var(--semantics-page-sections-sm-gap);
+		--_hero-sm-main-overlap: var(--primitives-space-48);
+		--_hero-overlap-size: initial;
+		--_hero-default-overlap-size: var(--primitives-space-0);
+		--_hero-default-media-height: auto;
 
 		${inheritedTextReset}
 		display: flex;
@@ -44,120 +53,108 @@ export const heroStyles = css `
 		display: none;
 	}
 
-	:host(:last-child),
-	:host(.is-last) {
+	:host([data-growing]),
+	:host([grow]) {
 		flex-grow: 1;
 	}
 
 	:host([width="full"]) {
-		--_max-width: none;
-	}
-
-	:host([main-width="2/3"]) {
-		--_main-width: 66.667%;
-	}
-
-	:host([main-width="3/4"]) {
-		--_main-width: 75%;
-	}
-
-	:host([main-width="full"]) {
-		--_main-width: 100%;
+		--_hero-max-width: none;
 	}
 
 	:host([main-background="base"]) {
-		--_main-background-color: var(--semantics-surfaces-base-background-color);
-		--_main-content-color: var(--semantics-content-color);
+		--_hero-main-background-color: var(--semantics-surfaces-base-background-color);
+		--_hero-main-content-color: var(--semantics-content-color);
 	}
 
 	:host([main-background="lintblauw"]) {
-		--_main-background-color: var(--semantics-categories-lintblauw-reference-background-color);
-		--_main-content-color: var(--semantics-categories-lintblauw-reference-content-color);
+		--_hero-main-background-color: var(--semantics-categories-lintblauw-reference-background-color);
+		--_hero-main-content-color: var(--semantics-categories-lintblauw-reference-content-color);
 	}
 
 	:host([main-background="donkerblauw"]) {
-		--_main-background-color: var(--semantics-categories-donkerblauw-reference-background-color);
-		--_main-content-color: var(--semantics-categories-donkerblauw-reference-content-color);
+		--_hero-main-background-color: var(--semantics-categories-donkerblauw-reference-background-color);
+		--_hero-main-content-color: var(--semantics-categories-donkerblauw-reference-content-color);
 	}
 
 	:host([main-background="hemelblauw"]) {
-		--_main-background-color: var(--semantics-categories-hemelblauw-reference-background-color);
-		--_main-content-color: var(--semantics-categories-hemelblauw-reference-content-color);
+		--_hero-main-background-color: var(--semantics-categories-hemelblauw-reference-background-color);
+		--_hero-main-content-color: var(--semantics-categories-hemelblauw-reference-content-color);
 	}
 
 	:host([main-background="lichtblauw"]) {
-		--_main-background-color: var(--semantics-categories-lichtblauw-reference-background-color);
-		--_main-content-color: var(--semantics-categories-lichtblauw-reference-content-color);
+		--_hero-main-background-color: var(--semantics-categories-lichtblauw-reference-background-color);
+		--_hero-main-content-color: var(--semantics-categories-lichtblauw-reference-content-color);
 	}
 
 	:host([main-background="paars"]) {
-		--_main-background-color: var(--semantics-categories-paars-reference-background-color);
-		--_main-content-color: var(--semantics-categories-paars-reference-content-color);
+		--_hero-main-background-color: var(--semantics-categories-paars-reference-background-color);
+		--_hero-main-content-color: var(--semantics-categories-paars-reference-content-color);
 	}
 
 	:host([main-background="violet"]) {
-		--_main-background-color: var(--semantics-categories-violet-reference-background-color);
-		--_main-content-color: var(--semantics-categories-violet-reference-content-color);
+		--_hero-main-background-color: var(--semantics-categories-violet-reference-background-color);
+		--_hero-main-content-color: var(--semantics-categories-violet-reference-content-color);
 	}
 
 	:host([main-background="robijnrood"]) {
-		--_main-background-color: var(--semantics-categories-robijnrood-reference-background-color);
-		--_main-content-color: var(--semantics-categories-robijnrood-reference-content-color);
+		--_hero-main-background-color: var(--semantics-categories-robijnrood-reference-background-color);
+		--_hero-main-content-color: var(--semantics-categories-robijnrood-reference-content-color);
 	}
 
 	:host([main-background="roze"]) {
-		--_main-background-color: var(--semantics-categories-roze-reference-background-color);
-		--_main-content-color: var(--semantics-categories-roze-reference-content-color);
+		--_hero-main-background-color: var(--semantics-categories-roze-reference-background-color);
+		--_hero-main-content-color: var(--semantics-categories-roze-reference-content-color);
 	}
 
 	:host([main-background="rood"]) {
-		--_main-background-color: var(--semantics-categories-rood-reference-background-color);
-		--_main-content-color: var(--semantics-categories-rood-reference-content-color);
+		--_hero-main-background-color: var(--semantics-categories-rood-reference-background-color);
+		--_hero-main-content-color: var(--semantics-categories-rood-reference-content-color);
 	}
 
 	:host([main-background="oranje"]) {
-		--_main-background-color: var(--semantics-categories-oranje-reference-background-color);
-		--_main-content-color: var(--semantics-categories-oranje-reference-content-color);
+		--_hero-main-background-color: var(--semantics-categories-oranje-reference-background-color);
+		--_hero-main-content-color: var(--semantics-categories-oranje-reference-content-color);
 	}
 
 	:host([main-background="donkergeel"]) {
-		--_main-background-color: var(--semantics-categories-donkergeel-reference-background-color);
-		--_main-content-color: var(--semantics-categories-donkergeel-reference-content-color);
+		--_hero-main-background-color: var(--semantics-categories-donkergeel-reference-background-color);
+		--_hero-main-content-color: var(--semantics-categories-donkergeel-reference-content-color);
 	}
 
 	:host([main-background="geel"]) {
-		--_main-background-color: var(--semantics-categories-geel-reference-background-color);
-		--_main-content-color: var(--semantics-categories-geel-reference-content-color);
+		--_hero-main-background-color: var(--semantics-categories-geel-reference-background-color);
+		--_hero-main-content-color: var(--semantics-categories-geel-reference-content-color);
 	}
 
 	:host([main-background="donkerbruin"]) {
-		--_main-background-color: var(--semantics-categories-donkerbruin-reference-background-color);
-		--_main-content-color: var(--semantics-categories-donkerbruin-reference-content-color);
+		--_hero-main-background-color: var(--semantics-categories-donkerbruin-reference-background-color);
+		--_hero-main-content-color: var(--semantics-categories-donkerbruin-reference-content-color);
 	}
 
 	:host([main-background="bruin"]) {
-		--_main-background-color: var(--semantics-categories-bruin-reference-background-color);
-		--_main-content-color: var(--semantics-categories-bruin-reference-content-color);
+		--_hero-main-background-color: var(--semantics-categories-bruin-reference-background-color);
+		--_hero-main-content-color: var(--semantics-categories-bruin-reference-content-color);
 	}
 
 	:host([main-background="donkergroen"]) {
-		--_main-background-color: var(--semantics-categories-donkergroen-reference-background-color);
-		--_main-content-color: var(--semantics-categories-donkergroen-reference-content-color);
+		--_hero-main-background-color: var(--semantics-categories-donkergroen-reference-background-color);
+		--_hero-main-content-color: var(--semantics-categories-donkergroen-reference-content-color);
 	}
 
 	:host([main-background="groen"]) {
-		--_main-background-color: var(--semantics-categories-groen-reference-background-color);
-		--_main-content-color: var(--semantics-categories-groen-reference-content-color);
+		--_hero-main-background-color: var(--semantics-categories-groen-reference-background-color);
+		--_hero-main-content-color: var(--semantics-categories-groen-reference-content-color);
 	}
 
 	:host([main-background="mosgroen"]) {
-		--_main-background-color: var(--semantics-categories-mosgroen-reference-background-color);
-		--_main-content-color: var(--semantics-categories-mosgroen-reference-content-color);
+		--_hero-main-background-color: var(--semantics-categories-mosgroen-reference-background-color);
+		--_hero-main-content-color: var(--semantics-categories-mosgroen-reference-content-color);
 	}
 
 	:host([main-background="mintgroen"]) {
-		--_main-background-color: var(--semantics-categories-mintgroen-reference-background-color);
-		--_main-content-color: var(--semantics-categories-mintgroen-reference-content-color);
+		--_hero-main-background-color: var(--semantics-categories-mintgroen-reference-background-color);
+		--_hero-main-content-color: var(--semantics-categories-mintgroen-reference-content-color);
 	}
 
 
@@ -177,22 +174,28 @@ export const heroStyles = css `
 
 		@container (max-width: ${smMax}) {
 			padding-inline: var(--semantics-page-sections-sm-margin-inline);
-			padding-top: var(--_sm-padding-top, var(--_padding-top, var(--semantics-page-sections-sm-margin-block)));
-			padding-bottom: var(--_sm-padding-bottom, var(--_padding-bottom, var(--semantics-page-sections-sm-margin-block)));
+			padding-top: var(--_hero-sm-padding-top, var(--_hero-padding-top, calc(var(--semantics-page-sections-sm-margin-block) / 2)));
+			padding-bottom: var(--_hero-sm-padding-bottom, var(--_hero-padding-bottom, var(--semantics-page-sections-sm-margin-block)));
 		}
 
 		@container (min-width: ${mdMin}) and (max-width: ${mdMax}) {
-			--_main-padding: var(--primitives-space-24);
+			--_hero-main-padding: var(--primitives-space-24);
+			--_hero-main-inset: var(--semantics-page-sections-md-gap);
+			--_hero-default-overlap-size: var(--primitives-area-160);
+			--_hero-default-media-height: var(--primitives-area-320);
 			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)));
-			padding-bottom: var(--_md-padding-bottom, var(--_padding-bottom, var(--semantics-page-sections-md-margin-block)));
+			padding-top: var(--_hero-md-padding-top, var(--_hero-padding-top, calc(var(--semantics-page-sections-md-margin-block) / 2)));
+			padding-bottom: var(--_hero-md-padding-bottom, var(--_hero-padding-bottom, var(--semantics-page-sections-md-margin-block)));
 		}
 
 		@container (min-width: ${lgMin}) {
-			--_main-padding: var(--primitives-space-32);
+			--_hero-main-padding: var(--primitives-space-32);
+			--_hero-main-inset: var(--semantics-page-sections-lg-gap);
+			--_hero-default-overlap-size: var(--primitives-area-160);
+			--_hero-default-media-height: var(--primitives-area-400);
 			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)));
-			padding-bottom: var(--_lg-padding-bottom, var(--_padding-bottom, var(--semantics-page-sections-lg-margin-block)));
+			padding-top: var(--_hero-lg-padding-top, var(--_hero-padding-top, calc(var(--semantics-page-sections-lg-margin-block) / 2)));
+			padding-bottom: var(--_hero-lg-padding-bottom, var(--_hero-padding-bottom, var(--semantics-page-sections-lg-margin-block)));
 		}
 	}
 
@@ -207,13 +210,16 @@ export const heroStyles = css `
 	.hero__body {
 		display: grid;
 		position: relative;
-		background-color: var(--_main-background-color);
 		width: 100%;
-		max-width: var(--_max-width);
+		max-width: var(--_hero-max-width);
 		flex-grow: 1;
 		grid-template-columns: 100%;
 	}
 
+	:host(:not([data-has-media])) .hero__body {
+		background-color: var(--_hero-main-background-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 {
@@ -226,10 +232,11 @@ export const heroStyles = css `
 	   (instead of aspect-ratio on the body) keeps growth content-driven
 	   rather than rigidly tied to the width. align-self: start stops the
 	   stretch fit from cancelling the ratio. */
-	:host([data-has-media]:not([main-width="full"])) .hero__body::before {
+	:host([data-has-media]) .hero__body::before {
 		@container (min-width: ${mdMin}) {
 			content: '';
-			aspect-ratio: var(--_media-aspect-ratio);
+			height: var(--_hero-media-height);
+			aspect-ratio: var(--_hero-media-aspect-ratio);
 			grid-area: 1 / 1;
 			align-self: start;
 		}
@@ -262,7 +269,11 @@ export const heroStyles = css `
 		object-fit: cover !important;
 	}
 
+	/* Two heights: the host fills the media area, and the variable makes the
+	   image inside the host fill the host. Without either one it collapses. */
 	.hero__media ::slotted(nldd-image) {
+		--context-image-height: 100%;
+
 		display: block !important;
 		width: 100% !important;
 		height: 100% !important;
@@ -282,7 +293,7 @@ export const heroStyles = css `
 		/* Cascade the panel color so descendants that key off the parent
 		   background (inherit-filled buttons, badge rings) read this
 		   surface. */
-		--context-parent-background-color: var(--_main-background-color);
+		--context-parent-background-color: var(--_hero-main-background-color);
 
 		box-sizing: border-box;
 		display: flex;
@@ -290,15 +301,37 @@ export const heroStyles = css `
 		grid-area: 1 / 1;
 		align-self: end;
 		justify-self: start;
-		background-color: var(--_main-background-color);
-		width: var(--_main-width);
-		padding: var(--_main-padding);
+		background-color: var(--_hero-main-background-color);
+		width: fit-content;
+		min-width: min(var(--_hero-main-min-width), 100% - 2 * var(--_hero-main-inset));
+		max-width: min(var(--_hero-main-max-width), 100% - 2 * var(--_hero-main-inset));
+		padding: var(--_hero-main-padding);
 		flex-direction: column;
-		color: var(--_main-content-color);
+		color: var(--_hero-main-content-color);
 	}
 
 	:host(:not([data-has-media])) .hero__main {
 		width: 100%;
+		min-width: 0;
+		max-width: none;
+	}
+
+	:host([data-has-media]) .hero__main {
+		margin: var(--_hero-main-inset);
+	}
+
+	:host([data-has-media][data-main-width-length]) .hero__main {
+		@container (min-width: ${mdMin}) {
+			width: var(--_hero-main-width);
+			min-width: 0;
+			max-width: calc(100% - 2 * var(--_hero-main-inset));
+		}
+	}
+
+	:host([data-has-media][main-width="full"]) .hero__main {
+		width: auto;
+		max-width: none;
+		justify-self: stretch;
 	}
 
 	:host([main-position="top-left"]) .hero__main {
@@ -314,6 +347,15 @@ export const heroStyles = css `
 		justify-self: end;
 	}
 
+	:host([main-position="bottom-center"]) .hero__main {
+		justify-self: center;
+	}
+
+	:host([main-position="top-center"]) .hero__main {
+		align-self: start;
+		justify-self: center;
+	}
+
 	:host([main-position="left"]) .hero__main {
 		align-self: stretch;
 	}
@@ -330,32 +372,38 @@ 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. 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. */
+	/* # Overlap (md+) — the media keeps a fixed height; the panel sits in the
+	   row below it, pulled up over it by the overlap size. */
 
 	@container (min-width: ${mdMin}) {
-		:host([data-has-media][main-width="full"]) .hero__body {
-			display: flex;
-			flex-direction: column;
+		:host([data-has-media]:not([layout="contained"])) .hero__body::before {
+			content: none;
+		}
+
+		:host([data-has-media]:not([layout="contained"])) .hero__media {
+			position: relative;
+			width: 100%;
+			height: var(--_hero-media-height);
+			aspect-ratio: var(--_hero-media-aspect-ratio);
+			grid-area: 1 / 1;
+			align-self: start;
 		}
 
-		:host([data-has-media][main-width="full"]:is([main-position="top-left"], [main-position="top-right"])) .hero__body {
-			flex-direction: column-reverse;
+		:host([data-has-media]:not([layout="contained"]):not([media-height], [media-aspect-ratio])) .hero__media {
+			height: var(--_hero-default-media-height);
 		}
 
-		:host([data-has-media][main-width="full"]) .hero__media {
-			position: static;
-			aspect-ratio: var(--_media-aspect-ratio);
+		:host([data-has-media]:not([layout="contained"])) .hero__main {
+			margin-top: calc(-1 * var(--_hero-overlap-size, var(--_hero-default-overlap-size)));
+			margin-bottom: 0;
+			grid-area: 2 / 1;
+			align-self: start;
 		}
 	}
 
 
-	/* # Mobile — stack media over a full-width panel. */
+	/* # Mobile — the media on top, the panel below it, indented and overlapping
+	   it a little. */
 
 	@container (max-width: ${smMax}) {
 		.hero__body {
@@ -363,18 +411,24 @@ export const heroStyles = css `
 			flex-direction: column;
 		}
 
-		:host(:is([main-position="top-left"], [main-position="top-right"])) .hero__body {
-			flex-direction: column-reverse;
-		}
-
 		.hero__media {
 			position: static;
+			width: 100%;
+			height: var(--_hero-media-height);
 			overflow: hidden;
-			aspect-ratio: var(--_media-aspect-ratio);
+			aspect-ratio: var(--_hero-media-aspect-ratio);
 		}
 
 		.hero__main {
 			width: 100%;
+			min-width: 0;
+			max-width: none;
+		}
+
+		:host([data-has-media]) .hero__main {
+			margin: calc(-1 * var(--_hero-sm-main-overlap)) var(--_hero-sm-main-inset) 0;
+			width: auto;
+			align-self: stretch;
 		}
 	}
 `;

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;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA4BzB,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BA8IK,KAAK;;;;;;2BAML,KAAK,qBAAqB,KAAK;;;;;;;2BAO/B,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BAuCL,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA4B5B,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0BAmFU,KAAK;;;;;;;;;;;;;;;;;;;0BAmBL,KAAK;;;;;;;;;;;;;;;;;;;;CAoB9B,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,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAqCzB,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BAkIK,KAAK;;;;;;2BAML,KAAK,qBAAqB,KAAK;;;;;;;;;;2BAU/B,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BA6CL,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA6B5B,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BA2DW,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0BAsDN,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0BA8BL,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;CA0B9B,CAAC"}

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

@@ -10,10 +10,12 @@
  * @attr {'inherit'|'base'|'tinted'} [background] - Surface background ('inherit' default; 'base'/'tinted' paint and cascade a surface).
  * @attr {string} [width] - Body max-width: 'full' removes the constraint so the section spans the full available width. Any CSS length (e.g. '480px') overrides the default max-width.
  * @attr {string} [height] - Minimum section height (any CSS length, e.g. '400px', '100dvh') (mirrors width, which sets the body max-width).
+ * @attr {boolean} grow - Takes the height the page has left, so the footer sits at the bottom of a short page. Without it, nldd-page lets its last section grow.
  * @attr {string} [padding-block] - Block (top and bottom) padding override (token 0-96; '0' strips it).
  * @attr {string} [padding-top] - Top padding override.
  * @attr {string} [padding-bottom] - Bottom padding override.
  * @attr {string} [sm-padding-block] - Responsive block padding (sm/md/lg, also per edge: {sm,md,lg}-padding-{top,bottom}).
+ * @attr {'top'|'center'|'bottom'} [vertical-alignment] - Where the shorter column sits next to the longer one ('top' default). Only where the columns stand side by side; stacked, they follow each other.
  *
  * @slot header - Content above the columns
  * @slot - Left column (1/2), alternative for slot="left"
@@ -37,12 +39,14 @@ declare const NLDDOneHalfOneHalfSection_base: typeof LitElement & (new (...args:
     lgPaddingTop?: import("../../../../utilities/page-section-mixin.js").PageSectionPadding;
     lgPaddingBottom?: import("../../../../utilities/page-section-mixin.js").PageSectionPadding;
     height?: string;
+    grow: boolean;
     _onSlotChange(e: Event): void;
 });
 export declare class NLDDOneHalfOneHalfSection extends NLDDOneHalfOneHalfSection_base {
     static styles: import("lit").CSSResult;
     /** Width mode: 'full' (removes body max-width) or any CSS length. */
     width: string;
+    verticalAlignment: 'top' | 'center' | 'bottom';
     updated(changedProperties: Map<string, unknown>): void;
     render(): import("lit-html").TemplateResult;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"one-half-one-half-section.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/one-half-one-half-section/one-half-one-half-section.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;;;;;;;;;;;;;;;;;;AAMjC,qBACa,yBAA0B,SAAQ,8BAA4B;IAC1E,OAAgB,MAAM,0BAA+B;IAErD,qEAAqE;IAErE,KAAK,SAAM;IAEF,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAetD,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,gCAAgC,EAAE,yBAAyB,CAAC;KAC5D;CACD"}
+{"version":3,"file":"one-half-one-half-section.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/one-half-one-half-section/one-half-one-half-section.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;;;;;;;;;;;;;;;;;;;AAOjC,qBACa,yBAA0B,SAAQ,8BAA4B;IAC1E,OAAgB,MAAM,0BAA+B;IAErD,qEAAqE;IAErE,KAAK,SAAM;IAGX,iBAAiB,EAAE,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAS;IAE9C,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAetD,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,gCAAgC,EAAE,yBAAyB,CAAC;KAC5D;CACD"}

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

@@ -16,10 +16,12 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
  * @attr {'inherit'|'base'|'tinted'} [background] - Surface background ('inherit' default; 'base'/'tinted' paint and cascade a surface).
  * @attr {string} [width] - Body max-width: 'full' removes the constraint so the section spans the full available width. Any CSS length (e.g. '480px') overrides the default max-width.
  * @attr {string} [height] - Minimum section height (any CSS length, e.g. '400px', '100dvh') (mirrors width, which sets the body max-width).
+ * @attr {boolean} grow - Takes the height the page has left, so the footer sits at the bottom of a short page. Without it, nldd-page lets its last section grow.
  * @attr {string} [padding-block] - Block (top and bottom) padding override (token 0-96; '0' strips it).
  * @attr {string} [padding-top] - Top padding override.
  * @attr {string} [padding-bottom] - Bottom padding override.
  * @attr {string} [sm-padding-block] - Responsive block padding (sm/md/lg, also per edge: {sm,md,lg}-padding-{top,bottom}).
+ * @attr {'top'|'center'|'bottom'} [vertical-alignment] - Where the shorter column sits next to the longer one ('top' default). Only where the columns stand side by side; stacked, they follow each other.
  *
  * @slot header - Content above the columns
  * @slot - Left column (1/2), alternative for slot="left"
@@ -29,6 +31,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
  */
 import { LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
+import { reflectNonDefault } from '../../../../utilities/reflect-non-default.js';
 import { PageSectionMixin } from '../../../../utilities/page-section-mixin.js';
 import { oneHalfOneHalfSectionStyles } from './one-half-one-half-section.styles.js';
 import { oneHalfOneHalfSectionTemplate } from './one-half-one-half-section.template.js';
@@ -37,6 +40,7 @@ let NLDDOneHalfOneHalfSection = class NLDDOneHalfOneHalfSection extends PageSect
         super(...arguments);
         /** Width mode: 'full' (removes body max-width) or any CSS length. */
         this.width = '';
+        this.verticalAlignment = 'top';
     }
     updated(changedProperties) {
         super.updated(changedProperties);
@@ -44,12 +48,12 @@ let NLDDOneHalfOneHalfSection = class NLDDOneHalfOneHalfSection extends PageSect
             const w = this.width;
             // Sections constrain the body's max-width rather than the host's
             // outer width. The keyword 'full' is handled by CSS (sets
-            // --_max-width: none); CSS lengths feed --_max-width here.
+            // --_one-half-one-half-section-max-width: none); CSS lengths feed --_one-half-one-half-section-max-width here.
             if (w && w !== 'full' && CSS.supports('max-width', w)) {
-                this.style.setProperty('--_max-width', w);
+                this.style.setProperty('--_one-half-one-half-section-max-width', w);
             }
             else {
-                this.style.removeProperty('--_max-width');
+                this.style.removeProperty('--_one-half-one-half-section-max-width');
             }
         }
     }
@@ -59,8 +63,11 @@ let NLDDOneHalfOneHalfSection = class NLDDOneHalfOneHalfSection extends PageSect
 };
 NLDDOneHalfOneHalfSection.styles = oneHalfOneHalfSectionStyles;
 __decorate([
-    property({ type: String, reflect: true })
+    property({ reflect: true, converter: reflectNonDefault('') })
 ], NLDDOneHalfOneHalfSection.prototype, "width", void 0);
+__decorate([
+    property({ reflect: true, attribute: 'vertical-alignment', converter: reflectNonDefault('top') })
+], NLDDOneHalfOneHalfSection.prototype, "verticalAlignment", void 0);
 NLDDOneHalfOneHalfSection = __decorate([
     customElement('nldd-one-half-one-half-section')
 ], NLDDOneHalfOneHalfSection);

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

@@ -1 +1 @@
-{"version":3,"file":"one-half-one-half-section.js","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/one-half-one-half-section/one-half-one-half-section.ts"],"names":[],"mappings":";;;;;;AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACjC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,gBAAgB,EAAE,MAAM,6CAA6C,CAAC;AAC/E,OAAO,EAAE,2BAA2B,EAAE,MAAM,uCAAuC,CAAC;AACpF,OAAO,EAAE,6BAA6B,EAAE,MAAM,yCAAyC,CAAC;AAGjF,IAAM,yBAAyB,GAA/B,MAAM,yBAA0B,SAAQ,gBAAgB,CAAC,UAAU,CAAC;IAApE;;QAGN,qEAAqE;QAErE,UAAK,GAAG,EAAE,CAAC;IAoBZ,CAAC;IAlBS,OAAO,CAAC,iBAAuC;QACvD,KAAK,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;QACjC,IAAI,iBAAiB,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;YACpC,MAAM,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC;YACrB,iEAAiE;YACjE,0DAA0D;YAC1D,2DAA2D;YAC3D,IAAI,CAAC,IAAI,CAAC,KAAK,MAAM,IAAI,GAAG,CAAC,QAAQ,CAAC,WAAW,EAAE,CAAC,CAAC,EAAE,CAAC;gBACvD,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,cAAc,EAAE,CAAC,CAAC,CAAC;YAC3C,CAAC;iBAAM,CAAC;gBACP,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;YAC3C,CAAC;QACF,CAAC;IACF,CAAC;IAEQ,MAAM;QACd,OAAO,6BAA6B,CAAC,IAAI,CAAC,CAAC;IAC5C,CAAC;;AAvBe,gCAAM,GAAG,2BAA2B,AAA9B,CAA+B;AAIrD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wDAC/B;AALC,yBAAyB;IADrC,aAAa,CAAC,gCAAgC,CAAC;GACnC,yBAAyB,CAyBrC"}
+{"version":3,"file":"one-half-one-half-section.js","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/one-half-one-half-section/one-half-one-half-section.ts"],"names":[],"mappings":";;;;;;AAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACjC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,8CAA8C,CAAC;AACjF,OAAO,EAAE,gBAAgB,EAAE,MAAM,6CAA6C,CAAC;AAC/E,OAAO,EAAE,2BAA2B,EAAE,MAAM,uCAAuC,CAAC;AACpF,OAAO,EAAE,6BAA6B,EAAE,MAAM,yCAAyC,CAAC;AAGjF,IAAM,yBAAyB,GAA/B,MAAM,yBAA0B,SAAQ,gBAAgB,CAAC,UAAU,CAAC;IAApE;;QAGN,qEAAqE;QAErE,UAAK,GAAG,EAAE,CAAC;QAGX,sBAAiB,GAAgC,KAAK,CAAC;IAoBxD,CAAC;IAlBS,OAAO,CAAC,iBAAuC;QACvD,KAAK,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;QACjC,IAAI,iBAAiB,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;YACpC,MAAM,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC;YACrB,iEAAiE;YACjE,0DAA0D;YAC1D,+GAA+G;YAC/G,IAAI,CAAC,IAAI,CAAC,KAAK,MAAM,IAAI,GAAG,CAAC,QAAQ,CAAC,WAAW,EAAE,CAAC,CAAC,EAAE,CAAC;gBACvD,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,wCAAwC,EAAE,CAAC,CAAC,CAAC;YACrE,CAAC;iBAAM,CAAC;gBACP,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,wCAAwC,CAAC,CAAC;YACrE,CAAC;QACF,CAAC;IACF,CAAC;IAEQ,MAAM;QACd,OAAO,6BAA6B,CAAC,IAAI,CAAC,CAAC;IAC5C,CAAC;;AA1Be,gCAAM,GAAG,2BAA2B,AAA9B,CAA+B;AAIrD;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,iBAAiB,CAAS,EAAE,CAAC,EAAE,CAAC;wDAC3D;AAGX;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,oBAAoB,EAAE,SAAS,EAAE,iBAAiB,CAA8B,KAAK,CAAC,EAAE,CAAC;oEACxE;AAR3C,yBAAyB;IADrC,aAAa,CAAC,gCAAgC,CAAC;GACnC,yBAAyB,CA4BrC"}

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,yBA2HvC,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,yBAwIvC,CAAC"}

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

@@ -16,15 +16,15 @@ export const oneHalfOneHalfSectionStyles = css `
 		container-type: inline-size;
 		/* Block-padding overrides from PageSectionMixin; 'initial' lets the
 		   block fall back to the responsive default until the mixin sets one. */
-		--_padding-top: initial;
-		--_padding-bottom: initial;
-		--_sm-padding-top: initial;
-		--_sm-padding-bottom: initial;
-		--_md-padding-top: initial;
-		--_md-padding-bottom: initial;
-		--_lg-padding-top: initial;
-		--_lg-padding-bottom: initial;
-		--_max-width: var(--semantics-page-sections-body-max-width);
+		--_one-half-one-half-section-padding-top: initial;
+		--_one-half-one-half-section-padding-bottom: initial;
+		--_one-half-one-half-section-sm-padding-top: initial;
+		--_one-half-one-half-section-sm-padding-bottom: initial;
+		--_one-half-one-half-section-md-padding-top: initial;
+		--_one-half-one-half-section-md-padding-bottom: initial;
+		--_one-half-one-half-section-lg-padding-top: initial;
+		--_one-half-one-half-section-lg-padding-bottom: initial;
+		--_one-half-one-half-section-max-width: var(--semantics-page-sections-body-max-width);
 
 		display: flex;
 		width: 100%;
@@ -36,8 +36,13 @@ export const oneHalfOneHalfSectionStyles = css `
 		display: none;
 	}
 
+	:host([data-growing]),
+	:host([grow]) {
+		flex-grow: 1;
+	}
+
 	:host([width="full"]) {
-		--_max-width: none;
+		--_one-half-one-half-section-max-width: none;
 	}
 
 
@@ -53,20 +58,20 @@ export const oneHalfOneHalfSectionStyles = css `
 
 		@container (max-width: ${smMax}) {
 			padding-inline: var(--semantics-page-sections-sm-margin-inline);
-			padding-top: var(--_sm-padding-top, var(--_padding-top, var(--semantics-page-sections-sm-margin-block)));
-			padding-bottom: var(--_sm-padding-bottom, var(--_padding-bottom, var(--semantics-page-sections-sm-margin-block)));
+			padding-top: var(--_one-half-one-half-section-sm-padding-top, var(--_one-half-one-half-section-padding-top, var(--semantics-page-sections-sm-margin-block)));
+			padding-bottom: var(--_one-half-one-half-section-sm-padding-bottom, var(--_one-half-one-half-section-padding-bottom, var(--semantics-page-sections-sm-margin-block)));
 		}
 
 		@container (min-width: ${mdMin}) and (max-width: ${mdMax}) {
 			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)));
-			padding-bottom: var(--_md-padding-bottom, var(--_padding-bottom, var(--semantics-page-sections-md-margin-block)));
+			padding-top: var(--_one-half-one-half-section-md-padding-top, var(--_one-half-one-half-section-padding-top, var(--semantics-page-sections-md-margin-block)));
+			padding-bottom: var(--_one-half-one-half-section-md-padding-bottom, var(--_one-half-one-half-section-padding-bottom, var(--semantics-page-sections-md-margin-block)));
 		}
 
 		@container (min-width: ${lgMin}) {
 			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)));
-			padding-bottom: var(--_lg-padding-bottom, var(--_padding-bottom, var(--semantics-page-sections-lg-margin-block)));
+			padding-top: var(--_one-half-one-half-section-lg-padding-top, var(--_one-half-one-half-section-padding-top, var(--semantics-page-sections-lg-margin-block)));
+			padding-bottom: var(--_one-half-one-half-section-lg-padding-bottom, var(--_one-half-one-half-section-padding-bottom, var(--semantics-page-sections-lg-margin-block)));
 		}
 	}
 
@@ -76,7 +81,7 @@ export const oneHalfOneHalfSectionStyles = css `
 	.one-half-one-half-section__body {
 		display: flex;
 		width: 100%;
-		max-width: var(--_max-width);
+		max-width: var(--_one-half-one-half-section-max-width);
 		flex-direction: column;
 
 		@container (max-width: ${smMax}) {
@@ -114,6 +119,14 @@ export const oneHalfOneHalfSectionStyles = css `
 		}
 	}
 
+	:host([vertical-alignment="center"]) .one-half-one-half-section__columns {
+		align-items: center;
+	}
+
+	:host([vertical-alignment="bottom"]) .one-half-one-half-section__columns {
+		align-items: flex-end;
+	}
+
 	.one-half-one-half-section__left-column {
 		min-width: var(--primitives-area-280);
 		flex-grow: 1;