@nldd/design-system 0.8.56 → 0.8.58

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

@@ -0,0 +1,488 @@
+import { css, unsafeCSS } from 'lit';
+import { breakpoints } from '../../../../assets/styles/breakpoints.js';
+import { inheritedTextReset, slottedReset } from '../../../../assets/styles/slotted-reset.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 */
+
+	:host {
+		container-type: inline-size;
+		/* 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);
+		/* 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);
+		--_main-width: 50%;
+		--_main-background-color: var(--semantics-categories-accent-reference-background-color);
+		--_main-content-color: var(--semantics-categories-accent-reference-primary-content-color);
+		--_main-padding: var(--primitives-space-16);
+
+		${inheritedTextReset}
+		display: flex;
+		width: 100%;
+		flex-direction: column;
+		align-items: center;
+	}
+
+	:host([hidden]) {
+		display: none;
+	}
+
+	:host(:last-child),
+	:host(.is-last) {
+		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%;
+	}
+
+	:host([main-background="base"]) {
+		--_main-background-color: var(--semantics-surfaces-base-background-color);
+		--_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-primary-content-color);
+	}
+
+	:host([main-background="donkerblauw"]) {
+		--_main-background-color: var(--semantics-categories-donkerblauw-reference-background-color);
+		--_main-content-color: var(--semantics-categories-donkerblauw-reference-primary-content-color);
+	}
+
+	:host([main-background="hemelblauw"]) {
+		--_main-background-color: var(--semantics-categories-hemelblauw-reference-background-color);
+		--_main-content-color: var(--semantics-categories-hemelblauw-reference-primary-content-color);
+	}
+
+	:host([main-background="lichtblauw"]) {
+		--_main-background-color: var(--semantics-categories-lichtblauw-reference-background-color);
+		--_main-content-color: var(--semantics-categories-lichtblauw-reference-primary-content-color);
+	}
+
+	:host([main-background="paars"]) {
+		--_main-background-color: var(--semantics-categories-paars-reference-background-color);
+		--_main-content-color: var(--semantics-categories-paars-reference-primary-content-color);
+	}
+
+	:host([main-background="violet"]) {
+		--_main-background-color: var(--semantics-categories-violet-reference-background-color);
+		--_main-content-color: var(--semantics-categories-violet-reference-primary-content-color);
+	}
+
+	:host([main-background="robijnrood"]) {
+		--_main-background-color: var(--semantics-categories-robijnrood-reference-background-color);
+		--_main-content-color: var(--semantics-categories-robijnrood-reference-primary-content-color);
+	}
+
+	:host([main-background="roze"]) {
+		--_main-background-color: var(--semantics-categories-roze-reference-background-color);
+		--_main-content-color: var(--semantics-categories-roze-reference-primary-content-color);
+	}
+
+	:host([main-background="rood"]) {
+		--_main-background-color: var(--semantics-categories-rood-reference-background-color);
+		--_main-content-color: var(--semantics-categories-rood-reference-primary-content-color);
+	}
+
+	:host([main-background="oranje"]) {
+		--_main-background-color: var(--semantics-categories-oranje-reference-background-color);
+		--_main-content-color: var(--semantics-categories-oranje-reference-primary-content-color);
+	}
+
+	:host([main-background="donkergeel"]) {
+		--_main-background-color: var(--semantics-categories-donkergeel-reference-background-color);
+		--_main-content-color: var(--semantics-categories-donkergeel-reference-primary-content-color);
+	}
+
+	:host([main-background="geel"]) {
+		--_main-background-color: var(--semantics-categories-geel-reference-background-color);
+		--_main-content-color: var(--semantics-categories-geel-reference-primary-content-color);
+	}
+
+	:host([main-background="donkerbruin"]) {
+		--_main-background-color: var(--semantics-categories-donkerbruin-reference-background-color);
+		--_main-content-color: var(--semantics-categories-donkerbruin-reference-primary-content-color);
+	}
+
+	:host([main-background="bruin"]) {
+		--_main-background-color: var(--semantics-categories-bruin-reference-background-color);
+		--_main-content-color: var(--semantics-categories-bruin-reference-primary-content-color);
+	}
+
+	:host([main-background="donkergroen"]) {
+		--_main-background-color: var(--semantics-categories-donkergroen-reference-background-color);
+		--_main-content-color: var(--semantics-categories-donkergroen-reference-primary-content-color);
+	}
+
+	:host([main-background="groen"]) {
+		--_main-background-color: var(--semantics-categories-groen-reference-background-color);
+		--_main-content-color: var(--semantics-categories-groen-reference-primary-content-color);
+	}
+
+	:host([main-background="mosgroen"]) {
+		--_main-background-color: var(--semantics-categories-mosgroen-reference-background-color);
+		--_main-content-color: var(--semantics-categories-mosgroen-reference-primary-content-color);
+	}
+
+	:host([main-background="mintgroen"]) {
+		--_main-background-color: var(--semantics-categories-mintgroen-reference-background-color);
+		--_main-content-color: var(--semantics-categories-mintgroen-reference-primary-content-color);
+	}
+
+
+	/* # Block */
+
+	.hero {
+		box-sizing: border-box;
+		display: flex;
+		width: 100%;
+		flex-direction: column;
+		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);
+
+		@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)));
+		}
+
+		@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)));
+			padding-bottom: var(--_md-padding-bottom, var(--_padding-bottom, var(--semantics-page-sections-md-margin-block)));
+		}
+
+		@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)));
+			padding-bottom: var(--_lg-padding-bottom, var(--_padding-bottom, var(--semantics-page-sections-lg-margin-block)));
+		}
+	}
+
+
+	/* # Body
+	   No overflow clipping here: it would zero the grid's automatic content
+	   minimum and stop the hero from growing with the panel. The background
+	   is painted in the panel color so subpixel seams between the media and
+	   the panel (fractional aspect-ratio heights) never show as a light
+	   hairline. */
+
+	.hero__body {
+		display: grid;
+		position: relative;
+		background-color: var(--_main-background-color);
+		width: 100%;
+		max-width: var(--_max-width);
+		flex-grow: 1;
+		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);
+	}
+
+	/* A ghost cell sets the body's minimum height from the aspect ratio
+	   without forcing it: the panel shares the same grid cell, so a taller
+	   panel grows the row past this floor. Putting the ratio on a ghost
+	   (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]) .hero__body::before {
+		@container (min-width: ${mdMin}) {
+			content: '';
+			aspect-ratio: 21 / 9;
+			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;
+		}
+	}
+
+
+	/* # Media */
+
+	.hero__media {
+		position: absolute;
+		inset: 0;
+		overflow: hidden;
+		border-radius: inherit;
+	}
+
+	.hero__media[hidden] {
+		display: none;
+	}
+
+	.hero__media ::slotted(img) {
+		${slottedReset}
+		display: block !important;
+		width: 100% !important;
+		height: 100% !important;
+		object-fit: cover !important;
+	}
+
+	.hero__media ::slotted(nldd-image) {
+		display: block !important;
+		width: 100% !important;
+		height: 100% !important;
+	}
+
+
+	/* # Main */
+
+	.hero__main {
+		/* 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);
+
+		box-sizing: border-box;
+		display: flex;
+		position: relative;
+		grid-area: 1 / 1;
+		align-self: end;
+		justify-self: start;
+		background-color: var(--_main-background-color);
+		width: var(--_main-width);
+		padding: var(--_main-padding);
+		flex-direction: column;
+		color: var(--_main-content-color);
+	}
+
+	:host(:not([data-has-media])) .hero__main {
+		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;
+	}
+
+	:host([main-position="top-right"]) .hero__main {
+		align-self: start;
+		justify-self: end;
+	}
+
+	:host([main-position="bottom-right"]) .hero__main {
+		justify-self: end;
+	}
+
+	:host([main-position="left"]) .hero__main {
+		align-self: stretch;
+	}
+
+	:host([main-position="right"]) .hero__main {
+		align-self: stretch;
+		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;
+		}
+	}
+
+
+	/* # Mobile — stack media over a full-width cornerless panel.
+	   Placed after the corner rules so the equal-specificity zero-out
+	   wins on source order. */
+
+	@container (max-width: ${smMax}) {
+		.hero__body {
+			display: flex;
+			flex-direction: column;
+		}
+
+		:host(:is([main-position="top-left"], [main-position="top-right"])) .hero__body {
+			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;
+		}
+
+		.hero__main {
+			width: 100%;
+		}
+	}
+`;
+//# sourceMappingURL=hero.styles.js.map

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

@@ -0,0 +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;;;;;;;;;;;;;;;;;0BAiBN,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwC9B,CAAC"}

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

@@ -0,0 +1,4 @@
+import { TemplateResult } from 'lit';
+import type { NLDDHero } from './hero.js';
+export declare function heroTemplate(component: NLDDHero): TemplateResult;
+//# sourceMappingURL=hero.template.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,18 @@
+import { html } from 'lit';
+export function heroTemplate(component) {
+    return html `
+		<section class="hero">
+			<div class="hero__body">
+				<div class="hero__media"
+					?hidden=${!component._hasMedia}
+				>
+					<slot name="media" @slotchange=${component._onMediaSlotChange}></slot>
+				</div>
+				<div class="hero__main">
+					<slot></slot>
+				</div>
+			</div>
+		</section>
+	`;
+}
+//# sourceMappingURL=hero.template.js.map

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

@@ -0,0 +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"}

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

@@ -41,6 +41,7 @@ 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;
+    _onSlotChange(e: Event): void;
 });
 export declare class NLDDOneHalfOneHalfSection extends NLDDOneHalfOneHalfSection_base {
     static styles: import("lit").CSSResult;

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;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;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;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;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"}

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,yBAmHvC,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,yBAwHvC,CAAC"}

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

@@ -89,6 +89,11 @@ export const oneHalfOneHalfSectionStyles = css `
 		}
 	}
 
+	.one-half-one-half-section__header[hidden],
+	.one-half-one-half-section__footer[hidden] {
+		display: none;
+	}
+
 	.one-half-one-half-section__columns {
 		display: flex;
 		flex-wrap: wrap;

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;;;;;;;;;2BASL,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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"}

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

@@ -1,4 +1,4 @@
 import { TemplateResult } from 'lit';
 import type { NLDDOneHalfOneHalfSection } from './one-half-one-half-section.js';
-export declare function oneHalfOneHalfSectionTemplate(_component: NLDDOneHalfOneHalfSection): TemplateResult;
+export declare function oneHalfOneHalfSectionTemplate(component: NLDDOneHalfOneHalfSection): TemplateResult;
 //# sourceMappingURL=one-half-one-half-section.template.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"one-half-one-half-section.template.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/one-half-one-half-section/one-half-one-half-section.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,cAAc,EAAE,MAAM,KAAK,CAAC;AAC3C,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,gCAAgC,CAAC;AAEhF,wBAAgB,6BAA6B,CAAC,UAAU,EAAE,yBAAyB,GAAG,cAAc,CAkBnG"}
+{"version":3,"file":"one-half-one-half-section.template.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/one-half-one-half-section/one-half-one-half-section.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,cAAc,EAAE,MAAM,KAAK,CAAC;AAC3C,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,gCAAgC,CAAC;AAEhF,wBAAgB,6BAA6B,CAAC,SAAS,EAAE,yBAAyB,GAAG,cAAc,CA0BlG"}

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

@@ -1,9 +1,13 @@
 import { html } from 'lit';
-export function oneHalfOneHalfSectionTemplate(_component) {
+export function oneHalfOneHalfSectionTemplate(component) {
     return html `
 		<section class="one-half-one-half-section">
 			<div class="one-half-one-half-section__body">
-				<slot name="header"></slot>
+				<header class="one-half-one-half-section__header"
+					hidden
+				>
+					<slot name="header" @slotchange=${component._onSlotChange}></slot>
+				</header>
 				<div class="one-half-one-half-section__columns">
 					<div class="one-half-one-half-section__left-column">
 						<slot></slot>
@@ -13,7 +17,11 @@ export function oneHalfOneHalfSectionTemplate(_component) {
 						<slot name="right"></slot>
 					</div>
 				</div>
-				<slot name="footer"></slot>
+				<footer class="one-half-one-half-section__footer"
+					hidden
+				>
+					<slot name="footer" @slotchange=${component._onSlotChange}></slot>
+				</footer>
 			</div>
 		</section>
 	`;

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

@@ -1 +1 @@
-{"version":3,"file":"one-half-one-half-section.template.js","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/one-half-one-half-section/one-half-one-half-section.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAC;AAG3C,MAAM,UAAU,6BAA6B,CAAC,UAAqC;IAClF,OAAO,IAAI,CAAA;;;;;;;;;;;;;;;;EAgBV,CAAC;AACH,CAAC"}
+{"version":3,"file":"one-half-one-half-section.template.js","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/one-half-one-half-section/one-half-one-half-section.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAC;AAG3C,MAAM,UAAU,6BAA6B,CAAC,SAAoC;IACjF,OAAO,IAAI,CAAA;;;;;;uCAM2B,SAAS,CAAC,aAAa;;;;;;;;;;;;;;uCAcvB,SAAS,CAAC,aAAa;;;;EAI5D,CAAC;AACH,CAAC"}

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

@@ -41,6 +41,7 @@ declare const NLDDOneThirdTwoThirdsSection_base: typeof LitElement & (new (...ar
     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 NLDDOneThirdTwoThirdsSection extends NLDDOneThirdTwoThirdsSection_base {
     static styles: import("lit").CSSResult;

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

@@ -1 +1 @@
-{"version":3,"file":"one-third-two-thirds-section.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/one-third-two-thirds-section/one-third-two-thirds-section.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;;;;;;;;;;;;;;;;;;AAMjC,qBACa,4BAA6B,SAAQ,iCAA4B;IAC7E,OAAgB,MAAM,0BAAkC;IAExD,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,mCAAmC,EAAE,4BAA4B,CAAC;KAClE;CACD"}
+{"version":3,"file":"one-third-two-thirds-section.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/one-third-two-thirds-section/one-third-two-thirds-section.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;;;;;;;;;;;;;;;;;;;AAMjC,qBACa,4BAA6B,SAAQ,iCAA4B;IAC7E,OAAgB,MAAM,0BAAkC;IAExD,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,mCAAmC,EAAE,4BAA4B,CAAC;KAClE;CACD"}

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,yBA4H1C,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,yBAiI1C,CAAC"}

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

@@ -89,6 +89,11 @@ export const oneThirdTwoThirdsSectionStyles = css `
 		}
 	}
 
+	.one-third-two-thirds-section__header[hidden],
+	.one-third-two-thirds-section__footer[hidden] {
+		display: none;
+	}
+
 	.one-third-two-thirds-section__columns {
 		display: flex;
 		flex-wrap: wrap;

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;;;;;;;;;;;;;;;;;;2BAkBL,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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"}

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

@@ -1,4 +1,4 @@
 import { TemplateResult } from 'lit';
 import type { NLDDOneThirdTwoThirdsSection } from './one-third-two-thirds-section.js';
-export declare function oneThirdTwoThirdsSectionTemplate(_component: NLDDOneThirdTwoThirdsSection): TemplateResult;
+export declare function oneThirdTwoThirdsSectionTemplate(component: NLDDOneThirdTwoThirdsSection): TemplateResult;
 //# sourceMappingURL=one-third-two-thirds-section.template.d.ts.map