@nldd/design-system 0.8.63 → 0.8.64

package/dist/components/layout/container/container.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"container.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/container/container.styles.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,eAAe,yBAkO3B,CAAC"}
+{"version":3,"file":"container.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/container/container.styles.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,eAAe,yBA2Q3B,CAAC"}

package/dist/components/layout/container/container.styles.js

@@ -5,6 +5,9 @@ const mdMin = unsafeCSS(breakpoints.mdMin);
 const mdMax = unsafeCSS(breakpoints.mdMax);
 const lgMin = unsafeCSS(breakpoints.lgMin);
 export const containerStyles = css `
+	:host {
+		box-sizing: border-box;
+	}
 
 
 	/* # Host — outer chrome (padding + scheme + query container) */
@@ -41,6 +44,8 @@ export const containerStyles = css `
 
 		container-type: inline-size;
 		display: block;
+		box-sizing: border-box;
+		width: 100%;
 		height: auto;
 		padding-top: var(--_padding-top);
 		padding-right: var(--_padding-right);
@@ -142,10 +147,44 @@ export const containerStyles = css `
 		break-inside: avoid;
 	}
 
+	/* Lanes — native CSS grid-lanes where supported, CSS multicol fallback
+	   otherwise. CSS-only (no JS). Fallback flows column-order; native lanes
+	   packs shortest-column (row-order). */
+	:host([layout="lanes"]) .container {
+		display: block;
+		columns: var(--_min-column-width);
+		column-gap: var(--_gap);
+	}
+
+	:host([layout="lanes"]) ::slotted(*) {
+		break-inside: avoid;
+		/* multicol has no row-gap; item margin supplies the vertical gap. The
+		   native branch resets this (grid-lanes gap covers both axes). */
+		margin-bottom: var(--_gap);
+	}
+
+	@supports (display: grid-lanes) {
+		:host([layout="lanes"]) .container {
+			display: grid-lanes;
+			grid-template-columns: repeat(
+				var(--_column-count, auto-fill),
+				minmax(var(--_track-min, var(--_min-column-width)), 1fr)
+			);
+		}
+
+		:host([layout="lanes"]) ::slotted(*) {
+			margin-bottom: 0;
+		}
+	}
+
 	:host([layout="columns"][column-count]) .container,
 	:host([layout="columns"][sm-column-count]) .container,
 	:host([layout="columns"][md-column-count]) .container,
-	:host([layout="columns"][lg-column-count]) .container {
+	:host([layout="columns"][lg-column-count]) .container,
+	:host([layout="lanes"][column-count]) .container,
+	:host([layout="lanes"][sm-column-count]) .container,
+	:host([layout="lanes"][md-column-count]) .container,
+	:host([layout="lanes"][lg-column-count]) .container {
 		column-count: var(--_column-count);
 		column-width: auto;
 	}
@@ -216,6 +255,8 @@ export const containerStyles = css `
 	   sm/md/lg-order → order → 0. No-op for layout="columns" (multicol). */
 
 	::slotted(*) {
+		/* Keep padded slotted items inside their track (multicol/grid columns). */
+		box-sizing: border-box;
 		order: var(--_slot-order, 0);
 	}
 

package/dist/components/layout/container/container.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"container.styles.js","sourceRoot":"","sources":["../../../../src/components/layout/container/container.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,uCAAuC,CAAC;AAEpE,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,eAAe,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBA2CX,KAAK;;;;;;;uBAOL,KAAK,qBAAqB,KAAK;;;;;;;uBAO/B,KAAK;;;;;;;4CAOgB,KAAK;;;;;;;4CAOL,KAAK,qBAAqB,KAAK;;;;;;;4CAO/B,KAAK;;;;;;;;;;;;;;;;;;;;;;;;uBAwB1B,KAAK;uBACL,KAAK,qBAAqB,KAAK;uBAC/B,KAAK;;4CAEgB,KAAK;4CACL,KAAK,qBAAqB,KAAK;4CAC/B,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0BAsDvB,KAAK;;;;;;;;;;;;;;;0BAeL,KAAK,qBAAqB,KAAK;;;;;;;;;;;;;;;0BAe/B,KAAK;;;;;;;;;;;;;;;;;;;;;;;0BAuBL,KAAK;;;;0BAIL,KAAK,qBAAqB,KAAK;;;;0BAI/B,KAAK;;;CAG9B,CAAC"}
+{"version":3,"file":"container.styles.js","sourceRoot":"","sources":["../../../../src/components/layout/container/container.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,uCAAuC,CAAC;AAEpE,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,eAAe,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBAgDX,KAAK;;;;;;;uBAOL,KAAK,qBAAqB,KAAK;;;;;;;uBAO/B,KAAK;;;;;;;4CAOgB,KAAK;;;;;;;4CAOL,KAAK,qBAAqB,KAAK;;;;;;;4CAO/B,KAAK;;;;;;;;;;;;;;;;;;;;;;;;uBAwB1B,KAAK;uBACL,KAAK,qBAAqB,KAAK;uBAC/B,KAAK;;4CAEgB,KAAK;4CACL,KAAK,qBAAqB,KAAK;4CAC/B,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0BAwFvB,KAAK;;;;;;;;;;;;;;;0BAeL,KAAK,qBAAqB,KAAK;;;;;;;;;;;;;;;0BAe/B,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;0BAyBL,KAAK;;;;0BAIL,KAAK,qBAAqB,KAAK;;;;0BAI/B,KAAK;;;CAG9B,CAAC"}

package/dist/components/layout/divider/divider.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"divider.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/divider/divider.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,aAAa,yBA+BzB,CAAC"}
+{"version":3,"file":"divider.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/divider/divider.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,aAAa,yBAkCzB,CAAC"}

package/dist/components/layout/divider/divider.styles.js

@@ -1,5 +1,8 @@
 import { css } from 'lit';
 export const dividerStyles = css `
+	:host {
+		box-sizing: border-box;
+	}
 
 
 	/* # Host */

package/dist/components/layout/divider/divider.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"divider.styles.js","sourceRoot":"","sources":["../../../../src/components/layout/divider/divider.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+B/B,CAAC"}
+{"version":3,"file":"divider.styles.js","sourceRoot":"","sources":["../../../../src/components/layout/divider/divider.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkC/B,CAAC"}

package/dist/components/layout/page/page.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"page.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/page/page.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU,yBAgItB,CAAC"}
+{"version":3,"file":"page.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/page/page.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU,yBAmItB,CAAC"}

package/dist/components/layout/page/page.styles.js

@@ -1,5 +1,8 @@
 import { css } from 'lit';
 export const pageStyles = css `
+	:host {
+		box-sizing: border-box;
+	}
 
 
 	/* # Host */

package/dist/components/layout/page/page.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"page.styles.js","sourceRoot":"","sources":["../../../../src/components/layout/page/page.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgI5B,CAAC"}
+{"version":3,"file":"page.styles.js","sourceRoot":"","sources":["../../../../src/components/layout/page/page.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmI5B,CAAC"}

package/dist/components/layout/page-footer/page-footer.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"page-footer.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/page-footer/page-footer.styles.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,gBAAgB,yBAuI5B,CAAC;AAEF,eAAO,MAAM,wBAAwB,yBAoCpC,CAAC;AAEF,eAAO,MAAM,4BAA4B,yBA2BxC,CAAC"}
+{"version":3,"file":"page-footer.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/page-footer/page-footer.styles.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,gBAAgB,yBA0I5B,CAAC;AAEF,eAAO,MAAM,wBAAwB,yBAoCpC,CAAC;AAEF,eAAO,MAAM,4BAA4B,yBA2BxC,CAAC"}

package/dist/components/layout/page-footer/page-footer.styles.js

@@ -1,11 +1,14 @@
 import { css, unsafeCSS } from 'lit';
 import { breakpoints } from '../../../assets/styles/breakpoints.js';
-import { inheritedTextReset } from '../../../assets/styles/slotted-reset.js';
+import { inheritedTextReset } 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 pageFooterStyles = css `
+	:host {
+		box-sizing: border-box;
+	}
 	:host {
 		--_max-width: var(--semantics-page-sections-body-max-width);
 		/* Official Rijksoverheid lintje colour — identical across all

package/dist/components/layout/page-footer/page-footer.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"page-footer.styles.js","sourceRoot":"","sources":["../../../../src/components/layout/page-footer/page-footer.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,uCAAuC,CAAC;AACpE,OAAO,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAC;AAE7E,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,gBAAgB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BAkCR,KAAK;;;;;2BAKL,KAAK,qBAAqB,KAAK;;;;;2BAK/B,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BAoCL,KAAK;;;;2BAIL,KAAK,qBAAqB,KAAK;;;;2BAI/B,KAAK;;;;;;2BAML,KAAK;;;;2BAIL,KAAK,qBAAqB,KAAK;;;;2BAI/B,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiC/B,CAAC;AAEF,MAAM,CAAC,MAAM,wBAAwB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoC1C,CAAC;AAEF,MAAM,CAAC,MAAM,4BAA4B,GAAG,GAAG,CAAA;;IAE3C,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;CAyBrB,CAAC"}
+{"version":3,"file":"page-footer.styles.js","sourceRoot":"","sources":["../../../../src/components/layout/page-footer/page-footer.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,uCAAuC,CAAC;AACpE,OAAO,EAAE,kBAAkB,EAAE,MAAM,wCAAwC,CAAC;AAE5E,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,gBAAgB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BAqCR,KAAK;;;;;2BAKL,KAAK,qBAAqB,KAAK;;;;;2BAK/B,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BAoCL,KAAK;;;;2BAIL,KAAK,qBAAqB,KAAK;;;;2BAI/B,KAAK;;;;;;2BAML,KAAK;;;;2BAIL,KAAK,qBAAqB,KAAK;;;;2BAI/B,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiC/B,CAAC;AAEF,MAAM,CAAC,MAAM,wBAAwB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoC1C,CAAC;AAEF,MAAM,CAAC,MAAM,4BAA4B,GAAG,GAAG,CAAA;;IAE3C,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;CAyBrB,CAAC"}

package/dist/components/layout/page-sections/full-bleed-section/full-bleed-section.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"full-bleed-section.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/full-bleed-section/full-bleed-section.styles.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,sBAAsB,yBAiGlC,CAAC"}
+{"version":3,"file":"full-bleed-section.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/full-bleed-section/full-bleed-section.styles.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,sBAAsB,yBAoGlC,CAAC"}

package/dist/components/layout/page-sections/full-bleed-section/full-bleed-section.styles.js

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

package/dist/components/layout/page-sections/full-bleed-section/full-bleed-section.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"full-bleed-section.styles.js","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/full-bleed-section/full-bleed-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,sBAAsB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BA6Cd,KAAK;;;;;2BAKL,KAAK,qBAAqB,KAAK;;;;;2BAK/B,KAAK;;;;;;;;;;;;;;;;2BAgBL,KAAK;;;;2BAIL,KAAK,qBAAqB,KAAK;;;;2BAI/B,KAAK;;;;;;;;;;;;;;;;;;CAkB/B,CAAC"}
+{"version":3,"file":"full-bleed-section.styles.js","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/full-bleed-section/full-bleed-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,sBAAsB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BAgDd,KAAK;;;;;2BAKL,KAAK,qBAAqB,KAAK;;;;;2BAK/B,KAAK;;;;;;;;;;;;;;;;2BAgBL,KAAK;;;;2BAIL,KAAK,qBAAqB,KAAK;;;;2BAI/B,KAAK;;;;;;;;;;;;;;;;;;CAkB/B,CAAC"}

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

@@ -7,7 +7,7 @@
  * niet instelbaar: 1,5X lintbreedte op smalle containers, 2X op md/lg.
  *
  * De media-hoek volgt automatisch uit `main-position` (zie de tabel in de
- * stories) en is per geval te overschrijven met `media-corner`. Het paneel
+ * stories) en is per geval te overschrijven met `media-corner-position`. Het paneel
  * krijgt zijn eigen afgeronde hoek — op halve maat, zodat de tekst niet
  * tegen de rand komt — op de hoek die diagonaal het mediavlak in wijst.
  * Beslaat het paneel een volledige rand (`left`/`right`, `main-width="full"`
@@ -36,8 +36,15 @@
  * @attr {string} main-background - Vlakkleur van het paneel: 'base' (de base surface)
  *   of een categoriekleur — 'accent' (default) of een rijkskleur zoals
  *   'lintblauw'|'donkerblauw'|'oranje'
- * @attr {'auto'|'top-left'|'top-right'|'bottom-left'|'bottom-right'} media-corner -
+ * @attr {'auto'|'top-left'|'top-right'|'bottom-left'|'bottom-right'} media-corner-position -
  *   Afgeronde hoek van het mediavlak; 'auto' (default) volgt main-position
+ * @attr {string} media-aspect-ratio - Aspect ratio van het mediavlak (CSS-vorm, '16/9' of '16:9');
+ *   default '21/9'. Bepaalt op md/lg de hoogte van de hero, op sm de hoogte van het mediavlak
+ * @attr {string} media-src - Bron van het mediavlak (alternatief voor de media-slot);
+ *   genegeerd zodra de media-slot gevuld is
+ * @attr {string} media-srcset - Responsive source set voor media-src
+ * @attr {string} media-sizes - Source sizes-hint voor media-src
+ * @attr {string} media-alt - Alt-tekst voor media-src; leeg = decoratief
  * @attr {'inherit'|'base'|'tinted'} background - Surface achter de hero (sectie-API)
  * @attr {'inherit'|'light'|'dark'|'inverted'} scheme - Kleurschema (sectie-API)
  * @attr {string} width - Body max-width; 'full' verwijdert de begrenzing (sectie-API)
@@ -45,7 +52,8 @@
  * @attr {string} padding-block - Blokpadding-override, ook per rand en responsief (sectie-API)
  *
  * @slot media - Afbeelding of illustratie (img of nldd-image); vult het vlak en wordt geclipt.
- *   Zet `alt=""` wanneer de afbeelding decoratief is; geef anders een beschrijvende alt-tekst op.
+ *   Heeft voorrang op de media-src-attributen. Zet `alt=""` wanneer de afbeelding decoratief is;
+ *   geef anders een beschrijvende alt-tekst op.
  * @slot - Inhoud van het tekstpaneel (bijv. nldd-title en nldd-rich-text met color="inherit")
  */
 import { LitElement, type PropertyValues } from 'lit';
@@ -76,10 +84,22 @@ export declare class NLDDHero extends NLDDHero_base {
     mainPosition: HeroMainPosition;
     mainWidth: HeroMainWidth;
     mainBackground: HeroMainBackground;
-    mediaCorner: 'auto' | HeroCorner;
+    mediaCornerPosition: 'auto' | HeroCorner;
+    /** Media aspect-ratio in CSS form ('16/9' or '16:9'); default '21/9'. Drives
+     *  the hero height on md/lg and the media strip height on sm. */
+    mediaAspectRatio: string;
     /** Width mode: 'full' (removes body max-width) or any CSS length. */
     width: string;
-    _hasMedia: boolean;
+    /** Hybrid media source: media-src renders an internal <img>, but a slotted
+     *  media element wins (mirrors nldd-image / nldd-byline). srcset/sizes/alt
+     *  feed that internal img. */
+    mediaSrc: string;
+    mediaSrcset: string;
+    mediaSizes: string;
+    mediaAlt: string;
+    _slotHasMedia: boolean;
+    /** Media is present when the slot has content or media-src is set. */
+    get _hasMedia(): boolean;
     willUpdate(changed: PropertyValues): void;
     updated(changed: PropertyValues): void;
     /** @internal Tracks the media slot so the no-media mode can collapse it. */

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

@@ -1 +1 @@
-{"version":3,"file":"hero.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/hero/hero.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiDG;AACH,OAAO,EAAE,UAAU,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAMtD,MAAM,MAAM,gBAAgB,GAAG,UAAU,GAAG,WAAW,GAAG,aAAa,GAAG,cAAc,GAAG,MAAM,GAAG,OAAO,CAAC;AAC5G,MAAM,MAAM,UAAU,GAAG,UAAU,GAAG,WAAW,GAAG,aAAa,GAAG,cAAc,CAAC;AACnF,MAAM,MAAM,aAAa,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,MAAM,CAAC;AAC3D,MAAM,MAAM,kBAAkB,GAC3B,MAAM,GAAG,QAAQ,GACjB,WAAW,GAAG,aAAa,GAAG,YAAY,GAAG,YAAY,GACzD,OAAO,GAAG,QAAQ,GAClB,YAAY,GAAG,MAAM,GAAG,MAAM,GAAG,QAAQ,GACzC,YAAY,GAAG,MAAM,GACrB,aAAa,GAAG,OAAO,GACvB,aAAa,GAAG,OAAO,GAAG,UAAU,GAAG,WAAW,CAAC;;;;;;;;;;;;;;;;;;;AAuBtD,qBACa,QAAS,SAAQ,aAA4B;IACzD,OAAgB,MAAM,0BAAc;IAGpC,YAAY,EAAE,gBAAgB,CAAiB;IAG/C,SAAS,EAAE,aAAa,CAAS;IAGjC,cAAc,EAAE,kBAAkB,CAAY;IAG9C,WAAW,EAAE,MAAM,GAAG,UAAU,CAAU;IAE1C,qEAAqE;IAErE,KAAK,SAAM;IAGX,SAAS,UAAS;IAET,UAAU,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IA+BzC,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAc/C,4EAA4E;IAC5E,kBAAkB,CAAC,CAAC,EAAE,KAAK,GAAG,IAAI;IAKzB,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,WAAW,EAAE,QAAQ,CAAC;KACtB;CACD"}
+{"version":3,"file":"hero.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/hero/hero.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyDG;AACH,OAAO,EAAE,UAAU,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAMtD,MAAM,MAAM,gBAAgB,GAAG,UAAU,GAAG,WAAW,GAAG,aAAa,GAAG,cAAc,GAAG,MAAM,GAAG,OAAO,CAAC;AAC5G,MAAM,MAAM,UAAU,GAAG,UAAU,GAAG,WAAW,GAAG,aAAa,GAAG,cAAc,CAAC;AACnF,MAAM,MAAM,aAAa,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,MAAM,CAAC;AAC3D,MAAM,MAAM,kBAAkB,GAC3B,MAAM,GAAG,QAAQ,GACjB,WAAW,GAAG,aAAa,GAAG,YAAY,GAAG,YAAY,GACzD,OAAO,GAAG,QAAQ,GAClB,YAAY,GAAG,MAAM,GAAG,MAAM,GAAG,QAAQ,GACzC,YAAY,GAAG,MAAM,GACrB,aAAa,GAAG,OAAO,GACvB,aAAa,GAAG,OAAO,GAAG,UAAU,GAAG,WAAW,CAAC;;;;;;;;;;;;;;;;;;;AAuBtD,qBACa,QAAS,SAAQ,aAA4B;IACzD,OAAgB,MAAM,0BAAc;IAGpC,YAAY,EAAE,gBAAgB,CAAiB;IAG/C,SAAS,EAAE,aAAa,CAAS;IAGjC,cAAc,EAAE,kBAAkB,CAAY;IAG9C,mBAAmB,EAAE,MAAM,GAAG,UAAU,CAAU;IAElD;qEACiE;IAEjE,gBAAgB,SAAM;IAEtB,qEAAqE;IAErE,KAAK,SAAM;IAEX;;kCAE8B;IAE9B,QAAQ,SAAM;IAGd,WAAW,SAAM;IAGjB,UAAU,SAAM;IAGhB,QAAQ,SAAM;IAGd,aAAa,UAAS;IAEtB,sEAAsE;IACtE,IAAI,SAAS,IAAI,OAAO,CAEvB;IAEQ,UAAU,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IA+BzC,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAyB/C,4EAA4E;IAC5E,kBAAkB,CAAC,CAAC,EAAE,KAAK,GAAG,IAAI;IAKzB,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,WAAW,EAAE,QAAQ,CAAC;KACtB;CACD"}

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

@@ -13,7 +13,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
  * niet instelbaar: 1,5X lintbreedte op smalle containers, 2X op md/lg.
  *
  * De media-hoek volgt automatisch uit `main-position` (zie de tabel in de
- * stories) en is per geval te overschrijven met `media-corner`. Het paneel
+ * stories) en is per geval te overschrijven met `media-corner-position`. Het paneel
  * krijgt zijn eigen afgeronde hoek — op halve maat, zodat de tekst niet
  * tegen de rand komt — op de hoek die diagonaal het mediavlak in wijst.
  * Beslaat het paneel een volledige rand (`left`/`right`, `main-width="full"`
@@ -42,8 +42,15 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
  * @attr {string} main-background - Vlakkleur van het paneel: 'base' (de base surface)
  *   of een categoriekleur — 'accent' (default) of een rijkskleur zoals
  *   'lintblauw'|'donkerblauw'|'oranje'
- * @attr {'auto'|'top-left'|'top-right'|'bottom-left'|'bottom-right'} media-corner -
+ * @attr {'auto'|'top-left'|'top-right'|'bottom-left'|'bottom-right'} media-corner-position -
  *   Afgeronde hoek van het mediavlak; 'auto' (default) volgt main-position
+ * @attr {string} media-aspect-ratio - Aspect ratio van het mediavlak (CSS-vorm, '16/9' of '16:9');
+ *   default '21/9'. Bepaalt op md/lg de hoogte van de hero, op sm de hoogte van het mediavlak
+ * @attr {string} media-src - Bron van het mediavlak (alternatief voor de media-slot);
+ *   genegeerd zodra de media-slot gevuld is
+ * @attr {string} media-srcset - Responsive source set voor media-src
+ * @attr {string} media-sizes - Source sizes-hint voor media-src
+ * @attr {string} media-alt - Alt-tekst voor media-src; leeg = decoratief
  * @attr {'inherit'|'base'|'tinted'} background - Surface achter de hero (sectie-API)
  * @attr {'inherit'|'light'|'dark'|'inverted'} scheme - Kleurschema (sectie-API)
  * @attr {string} width - Body max-width; 'full' verwijdert de begrenzing (sectie-API)
@@ -51,7 +58,8 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
  * @attr {string} padding-block - Blokpadding-override, ook per rand en responsief (sectie-API)
  *
  * @slot media - Afbeelding of illustratie (img of nldd-image); vult het vlak en wordt geclipt.
- *   Zet `alt=""` wanneer de afbeelding decoratief is; geef anders een beschrijvende alt-tekst op.
+ *   Heeft voorrang op de media-src-attributen. Zet `alt=""` wanneer de afbeelding decoratief is;
+ *   geef anders een beschrijvende alt-tekst op.
  * @slot - Inhoud van het tekstpaneel (bijv. nldd-title en nldd-rich-text met color="inherit")
  */
 import { LitElement } from 'lit';
@@ -84,10 +92,24 @@ let NLDDHero = class NLDDHero extends PageSectionMixin(LitElement) {
         this.mainPosition = 'bottom-left';
         this.mainWidth = '1/2';
         this.mainBackground = 'accent';
-        this.mediaCorner = 'auto';
+        this.mediaCornerPosition = 'auto';
+        /** Media aspect-ratio in CSS form ('16/9' or '16:9'); default '21/9'. Drives
+         *  the hero height on md/lg and the media strip height on sm. */
+        this.mediaAspectRatio = '';
         /** Width mode: 'full' (removes body max-width) or any CSS length. */
         this.width = '';
-        this._hasMedia = false;
+        /** Hybrid media source: media-src renders an internal <img>, but a slotted
+         *  media element wins (mirrors nldd-image / nldd-byline). srcset/sizes/alt
+         *  feed that internal img. */
+        this.mediaSrc = '';
+        this.mediaSrcset = '';
+        this.mediaSizes = '';
+        this.mediaAlt = '';
+        this._slotHasMedia = false;
+    }
+    /** Media is present when the slot has content or media-src is set. */
+    get _hasMedia() {
+        return this.mediaSrc !== '' || this._slotHasMedia;
     }
     willUpdate(changed) {
         super.willUpdate(changed);
@@ -97,8 +119,8 @@ let NLDDHero = class NLDDHero extends PageSectionMixin(LitElement) {
         // default for an unknown or empty value (the design-system convention).
         const position = AUTO_CORNER[this.mainPosition] ? this.mainPosition : 'bottom-left';
         const edge = position === 'left' || position === 'right';
-        let mediaCorner = this.mediaCorner !== 'auto'
-            ? this.mediaCorner
+        let mediaCorner = this.mediaCornerPosition !== 'auto'
+            ? this.mediaCornerPosition
             : AUTO_CORNER[position];
         // At main-width="full" the media stacks above or below the full-width
         // panel instead of sitting behind it, so its rounded corner must land on
@@ -132,11 +154,23 @@ let NLDDHero = class NLDDHero extends PageSectionMixin(LitElement) {
                 this.style.removeProperty('--_max-width');
             }
         }
+        if (changed.has('mediaAspectRatio')) {
+            // Accept '16:9' as well as '16/9' (like nldd-image). Clearing the
+            // attribute makes Lit set the property to null, so guard with ?? '';
+            // the empty value falls back to the stylesheet's --_media-aspect-ratio.
+            const ratio = (this.mediaAspectRatio ?? '').replace(':', '/').trim();
+            if (ratio && CSS.supports('aspect-ratio', ratio)) {
+                this.style.setProperty('--_media-aspect-ratio', ratio);
+            }
+            else {
+                this.style.removeProperty('--_media-aspect-ratio');
+            }
+        }
     }
     /** @internal Tracks the media slot so the no-media mode can collapse it. */
     _onMediaSlotChange(e) {
         const slot = e.target;
-        this._hasMedia = slot.assignedElements().length > 0;
+        this._slotHasMedia = slot.assignedElements().length > 0;
     }
     render() {
         return heroTemplate(this);
@@ -153,14 +187,29 @@ __decorate([
     property({ type: String, reflect: true, attribute: 'main-background' })
 ], NLDDHero.prototype, "mainBackground", void 0);
 __decorate([
-    property({ type: String, reflect: true, attribute: 'media-corner' })
-], NLDDHero.prototype, "mediaCorner", void 0);
+    property({ type: String, reflect: true, attribute: 'media-corner-position' })
+], NLDDHero.prototype, "mediaCornerPosition", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'media-aspect-ratio' })
+], NLDDHero.prototype, "mediaAspectRatio", void 0);
 __decorate([
     property({ type: String, reflect: true })
 ], NLDDHero.prototype, "width", void 0);
+__decorate([
+    property({ type: String, attribute: 'media-src' })
+], NLDDHero.prototype, "mediaSrc", void 0);
+__decorate([
+    property({ type: String, attribute: 'media-srcset' })
+], NLDDHero.prototype, "mediaSrcset", void 0);
+__decorate([
+    property({ type: String, attribute: 'media-sizes' })
+], NLDDHero.prototype, "mediaSizes", void 0);
+__decorate([
+    property({ type: String, attribute: 'media-alt' })
+], NLDDHero.prototype, "mediaAlt", void 0);
 __decorate([
     state()
-], NLDDHero.prototype, "_hasMedia", void 0);
+], NLDDHero.prototype, "_slotHasMedia", void 0);
 NLDDHero = __decorate([
     customElement('nldd-hero')
 ], NLDDHero);

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

@@ -1 +1 @@
-{"version":3,"file":"hero.js","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/hero/hero.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"hero.js","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/hero/hero.ts"],"names":[],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"hero.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/hero/hero.styles.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,UAAU,yBA2ftB,CAAC"}
+{"version":3,"file":"hero.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/hero/hero.styles.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,UAAU,yBAsgBtB,CAAC"}

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 */
@@ -29,6 +32,7 @@ export const heroStyles = css `
 		   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);
@@ -253,7 +257,7 @@ 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;
 		}
@@ -317,6 +321,13 @@ export const heroStyles = css `
 		height: 100% !important;
 	}
 
+	.hero__media img {
+		display: block;
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+	}
+
 
 	/* # Main */
 
@@ -463,7 +474,7 @@ 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);
 		}
 	}
 
@@ -489,7 +500,7 @@ export const heroStyles = css `
 		.hero__media {
 			position: static;
 			overflow: hidden;
-			aspect-ratio: 21 / 9;
+			aspect-ratio: var(--_media-aspect-ratio);
 		}
 
 		/* On mobile the rounded corner always sits at the top: a bottom

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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAiCzB,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BAkJK,KAAK;;;;;;2BAML,KAAK,qBAAqB,KAAK;;;;;;;;2BAQ/B,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BAyDL,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAqD5B,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BAsFW,KAAK;;;;;;2BAML,KAAK;;;;;;;;;;;2BAWL,KAAK;;;;;;;;;2BASL,KAAK;;;;;;;;;2BASL,KAAK;;;;;;;;;2BASL,KAAK;;;;;;;;;;;;;;;;;;;;;;;;0BAwBN,KAAK;;;;;;;;;;;;;;;;;;;;;0BAqBL,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwC9B,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"}