@nldd/design-system 0.8.62 → 0.8.64

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":";;;;;;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyDG;AACH,OAAO,EAAE,UAAU,EAAuB,MAAM,KAAK,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,gBAAgB,EAAE,MAAM,6CAA6C,CAAC;AAC/E,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAclD;6CAC6C;AAC7C,MAAM,WAAW,GAAyC;IACzD,aAAa,EAAE,WAAW;IAC1B,cAAc,EAAE,aAAa;IAC7B,UAAU,EAAE,WAAW;IACvB,WAAW,EAAE,UAAU;IACvB,MAAM,EAAE,WAAW;IACnB,OAAO,EAAE,UAAU;CACnB,CAAC;AAEF,gFAAgF;AAChF,MAAM,WAAW,GAAgD;IAChE,aAAa,EAAE,WAAW;IAC1B,cAAc,EAAE,UAAU;IAC1B,UAAU,EAAE,cAAc;IAC1B,WAAW,EAAE,aAAa;IAC1B,MAAM,EAAE,IAAI;IACZ,OAAO,EAAE,IAAI;CACb,CAAC;AAGK,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,gBAAgB,CAAC,UAAU,CAAC;IAAnD;;QAIN,iBAAY,GAAqB,aAAa,CAAC;QAG/C,cAAS,GAAkB,KAAK,CAAC;QAGjC,mBAAc,GAAuB,QAAQ,CAAC;QAG9C,wBAAmB,GAAwB,MAAM,CAAC;QAElD;yEACiE;QAEjE,qBAAgB,GAAG,EAAE,CAAC;QAEtB,qEAAqE;QAErE,UAAK,GAAG,EAAE,CAAC;QAEX;;sCAE8B;QAE9B,aAAQ,GAAG,EAAE,CAAC;QAGd,gBAAW,GAAG,EAAE,CAAC;QAGjB,eAAU,GAAG,EAAE,CAAC;QAGhB,aAAQ,GAAG,EAAE,CAAC;QAGd,kBAAa,GAAG,KAAK,CAAC;IAwEvB,CAAC;IAtEA,sEAAsE;IACtE,IAAI,SAAS;QACZ,OAAO,IAAI,CAAC,QAAQ,KAAK,EAAE,IAAI,IAAI,CAAC,aAAa,CAAC;IACnD,CAAC;IAEQ,UAAU,CAAC,OAAuB;QAC1C,KAAK,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;QAC1B,sEAAsE;QACtE,sEAAsE;QACtE,wEAAwE;QACxE,wEAAwE;QACxE,MAAM,QAAQ,GAAG,WAAW,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,aAAa,CAAC;QACpF,MAAM,IAAI,GAAG,QAAQ,KAAK,MAAM,IAAI,QAAQ,KAAK,OAAO,CAAC;QACzD,IAAI,WAAW,GAAe,IAAI,CAAC,mBAAmB,KAAK,MAAM;YAChE,CAAC,CAAC,IAAI,CAAC,mBAAmB;YAC1B,CAAC,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;QACzB,sEAAsE;QACtE,yEAAyE;QACzE,wEAAwE;QACxE,0EAA0E;QAC1E,2EAA2E;QAC3E,4EAA4E;QAC5E,sEAAsE;QACtE,IAAI,IAAI,CAAC,SAAS,KAAK,MAAM,IAAI,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,EAAE,CAAC;YAC1D,MAAM,UAAU,GAAG,QAAQ,KAAK,UAAU,IAAI,QAAQ,KAAK,WAAW,CAAC;YACvE,MAAM,IAAI,GAAG,WAAW,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC;YAC7D,WAAW,GAAG,GAAG,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,IAAI,IAAI,EAAE,CAAC;QAC1D,CAAC;QACD,IAAI,CAAC,YAAY,CAAC,mBAAmB,EAAE,WAAW,CAAC,CAAC;QACpD,MAAM,UAAU,GAAG,CAAC,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,IAAI,IAAI,CAAC,SAAS,KAAK,MAAM,CAAC;YACxE,CAAC,CAAC,IAAI;YACN,CAAC,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;QACzB,IAAI,CAAC,YAAY,CAAC,kBAAkB,EAAE,UAAU,IAAI,MAAM,CAAC,CAAC;QAC5D,IAAI,CAAC,eAAe,CAAC,gBAAgB,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;IACxD,CAAC;IAEQ,OAAO,CAAC,OAAuB;QACvC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QACvB,IAAI,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;YAC1B,kEAAkE;YAClE,wDAAwD;YACxD,MAAM,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC;YACrB,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;QACD,IAAI,OAAO,CAAC,GAAG,CAAC,kBAAkB,CAAC,EAAE,CAAC;YACrC,kEAAkE;YAClE,qEAAqE;YACrE,wEAAwE;YACxE,MAAM,KAAK,GAAG,CAAC,IAAI,CAAC,gBAAgB,IAAI,EAAE,CAAC,CAAC,OAAO,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC;YACrE,IAAI,KAAK,IAAI,GAAG,CAAC,QAAQ,CAAC,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC;gBAClD,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,uBAAuB,EAAE,KAAK,CAAC,CAAC;YACxD,CAAC;iBAAM,CAAC;gBACP,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,uBAAuB,CAAC,CAAC;YACpD,CAAC;QACF,CAAC;IACF,CAAC;IAED,4EAA4E;IAC5E,kBAAkB,CAAC,CAAQ;QAC1B,MAAM,IAAI,GAAG,CAAC,CAAC,MAAyB,CAAC;QACzC,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC,MAAM,GAAG,CAAC,CAAC;IACzD,CAAC;IAEQ,MAAM;QACd,OAAO,YAAY,CAAC,IAAI,CAAC,CAAC;IAC3B,CAAC;;AA9Ge,eAAM,GAAG,UAAU,AAAb,CAAc;AAGpC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;8CACvB;AAG/C;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;2CAClC;AAGjC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,iBAAiB,EAAE,CAAC;gDAC1B;AAG9C;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,uBAAuB,EAAE,CAAC;qDAC5B;AAKlD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,oBAAoB,EAAE,CAAC;kDACrD;AAItB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCAC/B;AAMX;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;0CACrC;AAGd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC;6CACrC;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;4CACrC;AAGhB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;0CACrC;AAGd;IADC,KAAK,EAAE;+CACc;AAxCV,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAgHpB"}

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

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

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

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

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

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

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

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

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

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

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

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

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