@nldd/design-system 0.8.37 → 0.8.38

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

@@ -36,10 +36,20 @@ let NLDDPage = class NLDDPage extends LitElement {
         this._scrolled = false;
         this._scrollTarget = null;
         this._headerObserver = null;
+        this._mainSlot = null;
         this._onScroll = () => {
             const target = (this.stickyHeader ? this._scrollEl : this);
             this._scrolled = target.scrollTop > 0;
         };
+        this._updateMainItems = () => {
+            const slot = this._mainSlot;
+            if (!slot)
+                return;
+            const items = slot.assignedElements();
+            const visible = items.filter(el => !el.hasAttribute('hidden'));
+            const last = visible[visible.length - 1];
+            items.forEach(el => el.classList.toggle('is-last', el === last));
+        };
     }
     get scrollTarget() {
         return (this.stickyHeader ? (this._scrollEl ?? this) : this);
@@ -52,6 +62,13 @@ let NLDDPage = class NLDDPage extends LitElement {
     }
     connectedCallback() {
         super.connectedCallback();
+        // Set container-type/name as inline style on the host element. Doing
+        // this from a `:host` rule inside the shadow DOM works in Chromium
+        // but Safari does not always recognise the host as a container for
+        // slotted descendants — a known engine inconsistency. Inline on the
+        // light-DOM host avoids it entirely.
+        this.style.containerType = 'inline-size';
+        this.style.containerName = 'layout-area';
         if (this.hasUpdated) {
             this._setupScrollListener();
             if (this.stickyHeader)
@@ -62,11 +79,13 @@ let NLDDPage = class NLDDPage extends LitElement {
         super.disconnectedCallback();
         this._teardownScrollListener();
         this._teardownHeaderObserver();
+        this._teardownMainSlotListener();
     }
     firstUpdated() {
         this._setupScrollListener();
         if (this.stickyHeader)
             this._setupHeaderObserver();
+        this._setupMainSlotListener();
     }
     updated(changed) {
         if (changed.has('stickyHeader')) {
@@ -114,6 +133,26 @@ let NLDDPage = class NLDDPage extends LitElement {
             this._headerObserver = null;
         }
     }
+    // Mark the last visible main-slot child with `is-last`, so section-style
+    // components can grow to fill remaining vertical space without coupling
+    // to specific tag types or relying on light-DOM `:last-child` (which
+    // breaks when slot="footer" siblings are present). Same shape as
+    // nldd-list's _updateItems().
+    _setupMainSlotListener() {
+        this._teardownMainSlotListener();
+        const slot = this.shadowRoot?.querySelector('slot:not([name])') ?? null;
+        this._mainSlot = slot;
+        if (!slot)
+            return;
+        slot.addEventListener('slotchange', this._updateMainItems);
+        this._updateMainItems();
+    }
+    _teardownMainSlotListener() {
+        if (this._mainSlot) {
+            this._mainSlot.removeEventListener('slotchange', this._updateMainItems);
+            this._mainSlot = null;
+        }
+    }
     render() {
         return pageTemplate(this);
     }

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

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

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,yBAkItB,CAAC"}
+{"version":3,"file":"page.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/page/page.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU,yBAoItB,CAAC"}

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

@@ -14,8 +14,6 @@ export const pageStyles = css `
 		overflow-y: auto;
 		overflow-x: hidden;
 		background-color: var(--_background-color);
-		padding-top: var(--context-bar-split-view-top-bars-height, 0px);
-		padding-bottom: var(--context-bar-split-view-bottom-bars-height, 0px);
 	}
 
 	/* Overflow hidden prevents content from escaping the scroll wrapper.
@@ -41,13 +39,21 @@ export const pageStyles = css `
 	}
 
 
+	/* # Block */
+
+	.page {
+		display: flex;
+		flex-direction: column;
+		flex-grow: 1;
+		min-height: 0;
+	}
+
+
 	/* # Header */
 
 	.page__header {
 		flex-shrink: 0;
 		position: relative;
-		container-type: inline-size;
-		container-name: layout-area;
 	}
 
 	:host([sticky-header]) .page__header {
@@ -98,8 +104,6 @@ export const pageStyles = css `
 		display: flex;
 		flex-direction: column;
 		flex-grow: 1;
-		container-type: inline-size;
-		container-name: layout-area;
 	}
 
 
@@ -108,8 +112,6 @@ export const pageStyles = css `
 	.page__footer {
 		flex-shrink: 0;
 		position: relative;
-		container-type: inline-size;
-		container-name: layout-area;
 	}
 
 	:host([sticky-footer]) .page__footer {

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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkI5B,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoI5B,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"page.template.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/page/page.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,CAchE"}
+{"version":3,"file":"page.template.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/page/page.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,CAgBhE"}

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

@@ -1,16 +1,18 @@
 import { html } from 'lit';
 export function pageTemplate(component) {
     return html `
-		<header class="page__header ${component._scrolled ? 'is-scrolled' : ''}">
-			<slot name="header"></slot>
-		</header>
-		<div class="page__scroll">
-			<main class="page__main">
-				<slot></slot>
-			</main>
-			<footer class="page__footer">
-				<slot name="footer"></slot>
-			</footer>
+		<div class="page">
+			<header class="page__header ${component._scrolled ? 'is-scrolled' : ''}">
+				<slot name="header"></slot>
+			</header>
+			<div class="page__scroll">
+				<main class="page__main">
+					<slot></slot>
+				</main>
+				<footer class="page__footer">
+					<slot name="footer"></slot>
+				</footer>
+			</div>
 		</div>
 	`;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"page.template.js","sourceRoot":"","sources":["../../../../src/components/layout/page/page.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAC;AAG3C,MAAM,UAAU,YAAY,CAAC,SAAmB;IAC/C,OAAO,IAAI,CAAA;gCACoB,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE;;;;;;;;;;;EAWtE,CAAC;AACH,CAAC"}
+{"version":3,"file":"page.template.js","sourceRoot":"","sources":["../../../../src/components/layout/page/page.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAC;AAG3C,MAAM,UAAU,YAAY,CAAC,SAAmB;IAC/C,OAAO,IAAI,CAAA;;iCAEqB,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE;;;;;;;;;;;;EAYvE,CAAC;AACH,CAAC"}

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

@@ -11,12 +11,13 @@
  * @slot - Main content
  * @slot footer - Content below the main content
  *
- * @attr {string} [align] - Set to "center" to vertically center section content
+ * @attr {boolean} [full-width] - Remove the body max-width constraint so the
+ *                                 section spans the full available width
  */
 import { LitElement } from 'lit';
 export declare class NLDDFullBleedSection extends LitElement {
     static styles: import("lit").CSSResult;
-    align?: string;
+    fullWidth: boolean;
     _onSlotChange(e: Event): void;
     render(): import("lit-html").TemplateResult;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"full-bleed-section.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/full-bleed-section/full-bleed-section.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAKjC,qBACa,oBAAqB,SAAQ,UAAU;IACnD,OAAgB,MAAM,0BAA0B;IAGhD,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,aAAa,CAAC,CAAC,EAAE,KAAK;IAMb,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,yBAAyB,EAAE,oBAAoB,CAAC;KAChD;CACD"}
+{"version":3,"file":"full-bleed-section.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/full-bleed-section/full-bleed-section.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAKjC,qBACa,oBAAqB,SAAQ,UAAU;IACnD,OAAgB,MAAM,0BAA0B;IAGhD,SAAS,UAAS;IAElB,aAAa,CAAC,CAAC,EAAE,KAAK;IAMb,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,yBAAyB,EAAE,oBAAoB,CAAC;KAChD;CACD"}

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

@@ -17,13 +17,18 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
  * @slot - Main content
  * @slot footer - Content below the main content
  *
- * @attr {string} [align] - Set to "center" to vertically center section content
+ * @attr {boolean} [full-width] - Remove the body max-width constraint so the
+ *                                 section spans the full available width
  */
 import { LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { fullBleedSectionStyles } from './full-bleed-section.styles.js';
 import { fullBleedSectionTemplate } from './full-bleed-section.template.js';
 let NLDDFullBleedSection = class NLDDFullBleedSection extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.fullWidth = false;
+    }
     _onSlotChange(e) {
         const slot = e.target;
         const wrapper = slot.parentElement;
@@ -35,8 +40,8 @@ let NLDDFullBleedSection = class NLDDFullBleedSection extends LitElement {
 };
 NLDDFullBleedSection.styles = fullBleedSectionStyles;
 __decorate([
-    property({ type: String, reflect: true })
-], NLDDFullBleedSection.prototype, "align", void 0);
+    property({ type: Boolean, reflect: true, attribute: 'full-width' })
+], NLDDFullBleedSection.prototype, "fullWidth", void 0);
 NLDDFullBleedSection = __decorate([
     customElement('nldd-full-bleed-section')
 ], NLDDFullBleedSection);

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

@@ -1 +1 @@
-{"version":3,"file":"full-bleed-section.js","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/full-bleed-section/full-bleed-section.ts"],"names":[],"mappings":";;;;;;AAAA;;;;;;;;;;;;;;GAcG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACjC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAC;AACxE,OAAO,EAAE,wBAAwB,EAAE,MAAM,kCAAkC,CAAC;AAGrE,IAAM,oBAAoB,GAA1B,MAAM,oBAAqB,SAAQ,UAAU;IAMnD,aAAa,CAAC,CAAQ;QACrB,MAAM,IAAI,GAAG,CAAC,CAAC,MAAyB,CAAC;QACzC,MAAM,OAAO,GAAG,IAAI,CAAC,aAA4B,CAAC;QAClD,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC,MAAM,KAAK,CAAC,CAAC;IACvD,CAAC;IAEQ,MAAM;QACd,OAAO,wBAAwB,CAAC,IAAI,CAAC,CAAC;IACvC,CAAC;;AAbe,2BAAM,GAAG,sBAAsB,AAAzB,CAA0B;AAGhD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDAC3B;AAJH,oBAAoB;IADhC,aAAa,CAAC,yBAAyB,CAAC;GAC5B,oBAAoB,CAehC"}
+{"version":3,"file":"full-bleed-section.js","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/full-bleed-section/full-bleed-section.ts"],"names":[],"mappings":";;;;;;AAAA;;;;;;;;;;;;;;;GAeG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACjC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAC;AACxE,OAAO,EAAE,wBAAwB,EAAE,MAAM,kCAAkC,CAAC;AAGrE,IAAM,oBAAoB,GAA1B,MAAM,oBAAqB,SAAQ,UAAU;IAA7C;;QAIN,cAAS,GAAG,KAAK,CAAC;IAWnB,CAAC;IATA,aAAa,CAAC,CAAQ;QACrB,MAAM,IAAI,GAAG,CAAC,CAAC,MAAyB,CAAC;QACzC,MAAM,OAAO,GAAG,IAAI,CAAC,aAA4B,CAAC;QAClD,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC,MAAM,KAAK,CAAC,CAAC;IACvD,CAAC;IAEQ,MAAM;QACd,OAAO,wBAAwB,CAAC,IAAI,CAAC,CAAC;IACvC,CAAC;;AAbe,2BAAM,GAAG,sBAAsB,AAAzB,CAA0B;AAGhD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;uDAClD;AAJN,oBAAoB;IADhC,aAAa,CAAC,yBAAyB,CAAC;GAC5B,oBAAoB,CAehC"}

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":"AAMA,eAAO,MAAM,sBAAsB,yBA0GlC,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,yBAqHlC,CAAC"}

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

@@ -1,6 +1,8 @@
 import { css, unsafeCSS } from 'lit';
 import { breakpoints } from '../../../../assets/styles/breakpoints.js';
+const smMax = unsafeCSS(breakpoints.smMax);
 const mdMin = unsafeCSS(breakpoints.mdMin);
+const mdMax = unsafeCSS(breakpoints.mdMax);
 const lgMin = unsafeCSS(breakpoints.lgMin);
 export const fullBleedSectionStyles = css `
 
@@ -11,6 +13,8 @@ export const fullBleedSectionStyles = css `
 	   zonder layout-area dient @media als fallback. */
 
 	:host {
+		--_max-width: var(--semantics-page-sections-body-max-width);
+
 		display: flex;
 		flex-direction: column;
 		align-items: center;
@@ -21,13 +25,12 @@ export const fullBleedSectionStyles = css `
 		display: none;
 	}
 
-	:host([align="center"]) {
-		flex-grow: 1;
+	:host([full-width]) {
+		--_max-width: none;
 	}
 
 
-	/* # Block — sm = base; md/lg via @media (fallback) en
-	   @container layout-area (heeft voorrang binnen layout-area). */
+	/* # Block */
 
 	.full-bleed-section {
 		display: flex;
@@ -35,9 +38,12 @@ export const fullBleedSectionStyles = css `
 		flex-grow: 1;
 		width: 100%;
 		box-sizing: border-box;
-		padding-block: var(--semantics-page-sections-sm-margin-block);
 
-		@media (min-width: ${mdMin}) {
+		@media (max-width: ${smMax}) {
+			padding-block: var(--semantics-page-sections-sm-margin-block);
+		}
+
+		@media (min-width: ${mdMin}) and (max-width: ${mdMax}) {
 			padding-block: var(--semantics-page-sections-md-margin-block);
 		}
 
@@ -45,7 +51,11 @@ export const fullBleedSectionStyles = css `
 			padding-block: var(--semantics-page-sections-lg-margin-block);
 		}
 
-		@container layout-area (min-width: ${mdMin}) {
+		@container layout-area (max-width: ${smMax}) {
+			padding-block: var(--semantics-page-sections-sm-margin-block);
+		}
+
+		@container layout-area (min-width: ${mdMin}) and (max-width: ${mdMax}) {
 			padding-block: var(--semantics-page-sections-md-margin-block);
 		}
 
@@ -69,9 +79,13 @@ export const fullBleedSectionStyles = css `
 		flex-direction: column;
 		flex-grow: 1;
 		width: 100%;
-		gap: var(--semantics-page-sections-sm-gap);
+		max-width: var(--_max-width);
 
-		@media (min-width: ${mdMin}) {
+		@media (max-width: ${smMax}) {
+			gap: var(--semantics-page-sections-sm-gap);
+		}
+
+		@media (min-width: ${mdMin}) and (max-width: ${mdMax}) {
 			gap: var(--semantics-page-sections-md-gap);
 		}
 
@@ -79,7 +93,11 @@ export const fullBleedSectionStyles = css `
 			gap: var(--semantics-page-sections-lg-gap);
 		}
 
-		@container layout-area (min-width: ${mdMin}) {
+		@container layout-area (max-width: ${smMax}) {
+			gap: var(--semantics-page-sections-sm-gap);
+		}
+
+		@container layout-area (min-width: ${mdMin}) and (max-width: ${mdMax}) {
 			gap: var(--semantics-page-sections-md-gap);
 		}
 
@@ -103,10 +121,5 @@ export const fullBleedSectionStyles = css `
 		flex-direction: column;
 		flex-grow: 1;
 	}
-
-	:host([align="center"]) .full-bleed-section__main {
-		justify-content: center;
-	}
-
 `;
 //# sourceMappingURL=full-bleed-section.styles.js.map

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;AAE3C,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBAmClB,KAAK;;;;uBAIL,KAAK;;;;uCAIW,KAAK;;;;uCAIL,KAAK;;;;;;;;;;;;;;;;;;;;;;uBAsBrB,KAAK;;;;uBAIL,KAAK;;;;uCAIW,KAAK;;;;uCAIL,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;CAyB3C,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBAmClB,KAAK;;;;uBAIL,KAAK,qBAAqB,KAAK;;;;uBAI/B,KAAK;;;;uCAIW,KAAK;;;;uCAIL,KAAK,qBAAqB,KAAK;;;;uCAI/B,KAAK;;;;;;;;;;;;;;;;;;;;;;uBAsBrB,KAAK;;;;uBAIL,KAAK,qBAAqB,KAAK;;;;uBAI/B,KAAK;;;;uCAIW,KAAK;;;;uCAIL,KAAK,qBAAqB,KAAK;;;;uCAI/B,KAAK;;;;;;;;;;;;;;;;;;;;CAoB3C,CAAC"}

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

@@ -12,10 +12,14 @@
  * @slot left - Left column (1/2)
  * @slot right - Right column (1/2)
  * @slot footer - Content below the columns
+ *
+ * @attr {boolean} [full-width] - Remove the body max-width constraint so the
+ *                                 section spans the full available width
  */
 import { LitElement } from 'lit';
 export declare class NLDDOneHalfOneHalfSection extends LitElement {
     static styles: import("lit").CSSResult;
+    fullWidth: boolean;
     render(): import("lit-html").TemplateResult;
 }
 declare global {

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;;;;;;;;;;;;;;GAcG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAKjC,qBACa,yBAA0B,SAAQ,UAAU;IACxD,OAAgB,MAAM,0BAA+B;IAE5C,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;;;;;;;;;;;;;;;;;GAiBG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAKjC,qBACa,yBAA0B,SAAQ,UAAU;IACxD,OAAgB,MAAM,0BAA+B;IAGrD,SAAS,UAAS;IAET,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,gCAAgC,EAAE,yBAAyB,CAAC;KAC5D;CACD"}

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

@@ -18,17 +18,27 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
  * @slot left - Left column (1/2)
  * @slot right - Right column (1/2)
  * @slot footer - Content below the columns
+ *
+ * @attr {boolean} [full-width] - Remove the body max-width constraint so the
+ *                                 section spans the full available width
  */
 import { LitElement } from 'lit';
-import { customElement } from 'lit/decorators.js';
+import { customElement, property } from 'lit/decorators.js';
 import { oneHalfOneHalfSectionStyles } from './one-half-one-half-section.styles.js';
 import { oneHalfOneHalfSectionTemplate } from './one-half-one-half-section.template.js';
 let NLDDOneHalfOneHalfSection = class NLDDOneHalfOneHalfSection extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.fullWidth = false;
+    }
     render() {
         return oneHalfOneHalfSectionTemplate(this);
     }
 };
 NLDDOneHalfOneHalfSection.styles = oneHalfOneHalfSectionStyles;
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'full-width' })
+], NLDDOneHalfOneHalfSection.prototype, "fullWidth", void 0);
 NLDDOneHalfOneHalfSection = __decorate([
     customElement('nldd-one-half-one-half-section')
 ], NLDDOneHalfOneHalfSection);

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

@@ -1 +1 @@
-{"version":3,"file":"one-half-one-half-section.js","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/one-half-one-half-section/one-half-one-half-section.ts"],"names":[],"mappings":";;;;;;AAAA;;;;;;;;;;;;;;GAcG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACjC,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,2BAA2B,EAAE,MAAM,uCAAuC,CAAC;AACpF,OAAO,EAAE,6BAA6B,EAAE,MAAM,yCAAyC,CAAC;AAGjF,IAAM,yBAAyB,GAA/B,MAAM,yBAA0B,SAAQ,UAAU;IAG/C,MAAM;QACd,OAAO,6BAA6B,CAAC,IAAI,CAAC,CAAC;IAC5C,CAAC;;AAJe,gCAAM,GAAG,2BAA2B,AAA9B,CAA+B;AADzC,yBAAyB;IADrC,aAAa,CAAC,gCAAgC,CAAC;GACnC,yBAAyB,CAMrC"}
+{"version":3,"file":"one-half-one-half-section.js","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/one-half-one-half-section/one-half-one-half-section.ts"],"names":[],"mappings":";;;;;;AAAA;;;;;;;;;;;;;;;;;GAiBG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACjC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,2BAA2B,EAAE,MAAM,uCAAuC,CAAC;AACpF,OAAO,EAAE,6BAA6B,EAAE,MAAM,yCAAyC,CAAC;AAGjF,IAAM,yBAAyB,GAA/B,MAAM,yBAA0B,SAAQ,UAAU;IAAlD;;QAIN,cAAS,GAAG,KAAK,CAAC;IAKnB,CAAC;IAHS,MAAM;QACd,OAAO,6BAA6B,CAAC,IAAI,CAAC,CAAC;IAC5C,CAAC;;AAPe,gCAAM,GAAG,2BAA2B,AAA9B,CAA+B;AAGrD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;4DAClD;AAJN,yBAAyB;IADrC,aAAa,CAAC,gCAAgC,CAAC;GACnC,yBAAyB,CASrC"}

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":"AAMA,eAAO,MAAM,2BAA2B,yBAkHvC,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,yBA6IvC,CAAC"}

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

@@ -1,6 +1,8 @@
 import { css, unsafeCSS } from 'lit';
 import { breakpoints } from '../../../../assets/styles/breakpoints.js';
+const smMax = unsafeCSS(breakpoints.smMax);
 const mdMin = unsafeCSS(breakpoints.mdMin);
+const mdMax = unsafeCSS(breakpoints.mdMax);
 const lgMin = unsafeCSS(breakpoints.lgMin);
 export const oneHalfOneHalfSectionStyles = css `
 
@@ -11,6 +13,8 @@ export const oneHalfOneHalfSectionStyles = css `
 	   zonder layout-area dient @media als fallback. */
 
 	:host {
+		--_max-width: var(--semantics-page-sections-body-max-width);
+
 		display: flex;
 		flex-direction: column;
 		align-items: center;
@@ -21,9 +25,12 @@ export const oneHalfOneHalfSectionStyles = css `
 		display: none;
 	}
 
+	:host([full-width]) {
+		--_max-width: none;
+	}
+
 
-	/* # Block — sm = base; md/lg via @media (fallback) en
-	   @container layout-area (heeft voorrang binnen layout-area). */
+	/* # Block */
 
 	.one-half-one-half-section {
 		display: flex;
@@ -31,10 +38,13 @@ export const oneHalfOneHalfSectionStyles = css `
 		align-items: center;
 		width: 100%;
 		box-sizing: border-box;
-		padding-inline: var(--semantics-page-sections-sm-margin-inline);
-		padding-block: var(--semantics-page-sections-sm-margin-block);
 
-		@media (min-width: ${mdMin}) {
+		@media (max-width: ${smMax}) {
+			padding-inline: var(--semantics-page-sections-sm-margin-inline);
+			padding-block: var(--semantics-page-sections-sm-margin-block);
+		}
+
+		@media (min-width: ${mdMin}) and (max-width: ${mdMax}) {
 			padding-inline: var(--semantics-page-sections-md-margin-inline);
 			padding-block: var(--semantics-page-sections-md-margin-block);
 		}
@@ -44,7 +54,12 @@ export const oneHalfOneHalfSectionStyles = css `
 			padding-block: var(--semantics-page-sections-lg-margin-block);
 		}
 
-		@container layout-area (min-width: ${mdMin}) {
+		@container layout-area (max-width: ${smMax}) {
+			padding-inline: var(--semantics-page-sections-sm-margin-inline);
+			padding-block: var(--semantics-page-sections-sm-margin-block);
+		}
+
+		@container layout-area (min-width: ${mdMin}) and (max-width: ${mdMax}) {
 			padding-inline: var(--semantics-page-sections-md-margin-inline);
 			padding-block: var(--semantics-page-sections-md-margin-block);
 		}
@@ -62,10 +77,13 @@ export const oneHalfOneHalfSectionStyles = css `
 		display: flex;
 		flex-direction: column;
 		width: 100%;
-		max-width: var(--semantics-page-sections-body-max-width);
-		gap: var(--semantics-page-sections-sm-gap);
+		max-width: var(--_max-width);
 
-		@media (min-width: ${mdMin}) {
+		@media (max-width: ${smMax}) {
+			gap: var(--semantics-page-sections-sm-gap);
+		}
+
+		@media (min-width: ${mdMin}) and (max-width: ${mdMax}) {
 			gap: var(--semantics-page-sections-md-gap);
 		}
 
@@ -73,7 +91,11 @@ export const oneHalfOneHalfSectionStyles = css `
 			gap: var(--semantics-page-sections-lg-gap);
 		}
 
-		@container layout-area (min-width: ${mdMin}) {
+		@container layout-area (max-width: ${smMax}) {
+			gap: var(--semantics-page-sections-sm-gap);
+		}
+
+		@container layout-area (min-width: ${mdMin}) and (max-width: ${mdMax}) {
 			gap: var(--semantics-page-sections-md-gap);
 		}
 
@@ -88,9 +110,12 @@ export const oneHalfOneHalfSectionStyles = css `
 	.one-half-one-half-section__columns {
 		display: flex;
 		flex-wrap: wrap;
-		gap: var(--semantics-page-sections-sm-gap);
 
-		@media (min-width: ${mdMin}) {
+		@media (max-width: ${smMax}) {
+			gap: var(--semantics-page-sections-sm-gap);
+		}
+
+		@media (min-width: ${mdMin}) and (max-width: ${mdMax}) {
 			gap: var(--semantics-page-sections-md-gap);
 		}
 
@@ -98,7 +123,11 @@ export const oneHalfOneHalfSectionStyles = css `
 			gap: var(--semantics-page-sections-lg-gap);
 		}
 
-		@container layout-area (min-width: ${mdMin}) {
+		@container layout-area (max-width: ${smMax}) {
+			gap: var(--semantics-page-sections-sm-gap);
+		}
+
+		@container layout-area (min-width: ${mdMin}) and (max-width: ${mdMax}) {
 			gap: var(--semantics-page-sections-md-gap);
 		}
 

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;AAE3C,MAAM,CAAC,MAAM,2BAA2B,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBAgCvB,KAAK;;;;;uBAKL,KAAK;;;;;uCAKW,KAAK;;;;;uCAKL,KAAK;;;;;;;;;;;;;;;;uBAgBrB,KAAK;;;;uBAIL,KAAK;;;;uCAIW,KAAK;;;;uCAIL,KAAK;;;;;;;;;;;;;uBAarB,KAAK;;;;uBAIL,KAAK;;;;uCAIW,KAAK;;;;uCAIL,KAAK;;;;;;;;;;;;;;CAc3C,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBAmCvB,KAAK;;;;;uBAKL,KAAK,qBAAqB,KAAK;;;;;uBAK/B,KAAK;;;;;uCAKW,KAAK;;;;;uCAKL,KAAK,qBAAqB,KAAK;;;;;uCAK/B,KAAK;;;;;;;;;;;;;;;uBAerB,KAAK;;;;uBAIL,KAAK,qBAAqB,KAAK;;;;uBAI/B,KAAK;;;;uCAIW,KAAK;;;;uCAIL,KAAK,qBAAqB,KAAK;;;;uCAI/B,KAAK;;;;;;;;;;;;uBAYrB,KAAK;;;;uBAIL,KAAK,qBAAqB,KAAK;;;;uBAI/B,KAAK;;;;uCAIW,KAAK;;;;uCAIL,KAAK,qBAAqB,KAAK;;;;uCAI/B,KAAK;;;;;;;;;;;;;;CAc3C,CAAC"}

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

@@ -12,10 +12,14 @@
  * @slot - Right column (2/3), alternative for slot="right"
  * @slot right - Right column (2/3)
  * @slot footer - Content below the columns
+ *
+ * @attr {boolean} [full-width] - Remove the body max-width constraint so the
+ *                                 section spans the full available width
  */
 import { LitElement } from 'lit';
 export declare class NLDDOneThirdTwoThirdsSection extends LitElement {
     static styles: import("lit").CSSResult;
+    fullWidth: boolean;
     render(): import("lit-html").TemplateResult;
 }
 declare global {

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;;;;;;;;;;;;;;GAcG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAKjC,qBACa,4BAA6B,SAAQ,UAAU;IAC3D,OAAgB,MAAM,0BAAkC;IAE/C,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;;;;;;;;;;;;;;;;;GAiBG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAKjC,qBACa,4BAA6B,SAAQ,UAAU;IAC3D,OAAgB,MAAM,0BAAkC;IAGxD,SAAS,UAAS;IAET,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.js

@@ -18,17 +18,27 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
  * @slot - Right column (2/3), alternative for slot="right"
  * @slot right - Right column (2/3)
  * @slot footer - Content below the columns
+ *
+ * @attr {boolean} [full-width] - Remove the body max-width constraint so the
+ *                                 section spans the full available width
  */
 import { LitElement } from 'lit';
-import { customElement } from 'lit/decorators.js';
+import { customElement, property } from 'lit/decorators.js';
 import { oneThirdTwoThirdsSectionStyles } from './one-third-two-thirds-section.styles.js';
 import { oneThirdTwoThirdsSectionTemplate } from './one-third-two-thirds-section.template.js';
 let NLDDOneThirdTwoThirdsSection = class NLDDOneThirdTwoThirdsSection extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.fullWidth = false;
+    }
     render() {
         return oneThirdTwoThirdsSectionTemplate(this);
     }
 };
 NLDDOneThirdTwoThirdsSection.styles = oneThirdTwoThirdsSectionStyles;
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'full-width' })
+], NLDDOneThirdTwoThirdsSection.prototype, "fullWidth", void 0);
 NLDDOneThirdTwoThirdsSection = __decorate([
     customElement('nldd-one-third-two-thirds-section')
 ], NLDDOneThirdTwoThirdsSection);

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

@@ -1 +1 @@
-{"version":3,"file":"one-third-two-thirds-section.js","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/one-third-two-thirds-section/one-third-two-thirds-section.ts"],"names":[],"mappings":";;;;;;AAAA;;;;;;;;;;;;;;GAcG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACjC,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,8BAA8B,EAAE,MAAM,0CAA0C,CAAC;AAC1F,OAAO,EAAE,gCAAgC,EAAE,MAAM,4CAA4C,CAAC;AAGvF,IAAM,4BAA4B,GAAlC,MAAM,4BAA6B,SAAQ,UAAU;IAGlD,MAAM;QACd,OAAO,gCAAgC,CAAC,IAAI,CAAC,CAAC;IAC/C,CAAC;;AAJe,mCAAM,GAAG,8BAA8B,AAAjC,CAAkC;AAD5C,4BAA4B;IADxC,aAAa,CAAC,mCAAmC,CAAC;GACtC,4BAA4B,CAMxC"}
+{"version":3,"file":"one-third-two-thirds-section.js","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/one-third-two-thirds-section/one-third-two-thirds-section.ts"],"names":[],"mappings":";;;;;;AAAA;;;;;;;;;;;;;;;;;GAiBG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACjC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,8BAA8B,EAAE,MAAM,0CAA0C,CAAC;AAC1F,OAAO,EAAE,gCAAgC,EAAE,MAAM,4CAA4C,CAAC;AAGvF,IAAM,4BAA4B,GAAlC,MAAM,4BAA6B,SAAQ,UAAU;IAArD;;QAIN,cAAS,GAAG,KAAK,CAAC;IAKnB,CAAC;IAHS,MAAM;QACd,OAAO,gCAAgC,CAAC,IAAI,CAAC,CAAC;IAC/C,CAAC;;AAPe,mCAAM,GAAG,8BAA8B,AAAjC,CAAkC;AAGxD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;+DAClD;AAJN,4BAA4B;IADxC,aAAa,CAAC,mCAAmC,CAAC;GACtC,4BAA4B,CASxC"}

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":"AAMA,eAAO,MAAM,8BAA8B,yBAkH1C,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,yBA6I1C,CAAC"}