@nldd/design-system 0.8.42 → 0.8.44

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

@@ -13,13 +13,16 @@
  * @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
+ * @attr {string} [width] - Body max-width: 'full' removes the constraint so the
+ *                          section spans the full available width. Any CSS
+ *                          length (e.g. '480px') overrides the default max-width.
  */
 import { LitElement } from 'lit';
 export declare class NLDDOneThirdTwoThirdsSection extends LitElement {
     static styles: import("lit").CSSResult;
-    fullWidth: boolean;
+    /** Width mode: 'full' (removes body max-width) or any CSS length. */
+    width: string;
+    updated(changedProperties: Map<string, unknown>): void;
     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;;;;;;;;;;;;;;;;;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"}
+{"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;;;;;;;;;;;;;;;;;;GAkBG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAKjC,qBACa,4BAA6B,SAAQ,UAAU;IAC3D,OAAgB,MAAM,0BAAkC;IAExD,qEAAqE;IAErE,KAAK,SAAM;IAEF,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IActD,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

@@ -19,8 +19,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
  * @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
+ * @attr {string} [width] - Body max-width: 'full' removes the constraint so the
+ *                          section spans the full available width. Any CSS
+ *                          length (e.g. '480px') overrides the default max-width.
  */
 import { LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
@@ -29,7 +30,22 @@ import { oneThirdTwoThirdsSectionTemplate } from './one-third-two-thirds-section
 let NLDDOneThirdTwoThirdsSection = class NLDDOneThirdTwoThirdsSection extends LitElement {
     constructor() {
         super(...arguments);
-        this.fullWidth = false;
+        /** Width mode: 'full' (removes body max-width) or any CSS length. */
+        this.width = '';
+    }
+    updated(changedProperties) {
+        if (changedProperties.has('width')) {
+            const w = this.width;
+            // Sections constrain the body's max-width rather than the host's
+            // outer width. The keyword 'full' is handled by CSS (sets
+            // --_max-width: none); CSS lengths feed --_max-width here.
+            if (w && w !== 'full' && CSS.supports('max-width', w)) {
+                this.style.setProperty('--_max-width', w);
+            }
+            else {
+                this.style.removeProperty('--_max-width');
+            }
+        }
     }
     render() {
         return oneThirdTwoThirdsSectionTemplate(this);
@@ -37,8 +53,8 @@ let NLDDOneThirdTwoThirdsSection = class NLDDOneThirdTwoThirdsSection extends Li
 };
 NLDDOneThirdTwoThirdsSection.styles = oneThirdTwoThirdsSectionStyles;
 __decorate([
-    property({ type: Boolean, reflect: true, attribute: 'full-width' })
-], NLDDOneThirdTwoThirdsSection.prototype, "fullWidth", void 0);
+    property({ type: String, reflect: true })
+], NLDDOneThirdTwoThirdsSection.prototype, "width", 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;;;;;;;;;;;;;;;;;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"}
+{"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;;;;;;;;;;;;;;;;;;GAkBG;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;;QAGN,qEAAqE;QAErE,UAAK,GAAG,EAAE,CAAC;IAmBZ,CAAC;IAjBS,OAAO,CAAC,iBAAuC;QACvD,IAAI,iBAAiB,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;YACpC,MAAM,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC;YACrB,iEAAiE;YACjE,0DAA0D;YAC1D,2DAA2D;YAC3D,IAAI,CAAC,IAAI,CAAC,KAAK,MAAM,IAAI,GAAG,CAAC,QAAQ,CAAC,WAAW,EAAE,CAAC,CAAC,EAAE,CAAC;gBACvD,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,cAAc,EAAE,CAAC,CAAC,CAAC;YAC3C,CAAC;iBAAM,CAAC;gBACP,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;YAC3C,CAAC;QACF,CAAC;IACF,CAAC;IAEQ,MAAM;QACd,OAAO,gCAAgC,CAAC,IAAI,CAAC,CAAC;IAC/C,CAAC;;AAtBe,mCAAM,GAAG,8BAA8B,AAAjC,CAAkC;AAIxD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2DAC/B;AALC,4BAA4B;IADxC,aAAa,CAAC,mCAAmC,CAAC;GACtC,4BAA4B,CAwBxC"}

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

@@ -9,23 +9,23 @@ export const oneThirdTwoThirdsSectionStyles = css `
 
 	/* # Host
 	   Geen eigen container-type: page-sections luisteren naar de outer
-	   layout-area (gezet door nldd-page / nldd-card). Voor contexten
-	   zonder layout-area dient @media als fallback. */
+	   layout-container (gezet door nldd-page / nldd-card). Voor contexten
+	   zonder layout-container dient @media als fallback. */
 
 	:host {
 		--_max-width: var(--semantics-page-sections-body-max-width);
 
 		display: flex;
+		width: 100%;
 		flex-direction: column;
 		align-items: center;
-		width: 100%;
 	}
 
 	:host([hidden]) {
 		display: none;
 	}
 
-	:host([full-width]) {
+	:host([width="full"]) {
 		--_max-width: none;
 	}
 
@@ -34,10 +34,10 @@ export const oneThirdTwoThirdsSectionStyles = css `
 
 	.one-third-two-thirds-section {
 		display: flex;
+		box-sizing: border-box;
+		width: 100%;
 		flex-direction: column;
 		align-items: center;
-		width: 100%;
-		box-sizing: border-box;
 
 		@media (max-width: ${smMax}) {
 			padding-inline: var(--semantics-page-sections-sm-margin-inline);
@@ -54,17 +54,17 @@ export const oneThirdTwoThirdsSectionStyles = css `
 			padding-block: var(--semantics-page-sections-lg-margin-block);
 		}
 
-		@container layout-area (max-width: ${smMax}) {
+		@container layout-container (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}) {
+		@container layout-container (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);
 		}
 
-		@container layout-area (min-width: ${lgMin}) {
+		@container layout-container (min-width: ${lgMin}) {
 			padding-inline: var(--semantics-page-sections-lg-margin-inline);
 			padding-block: var(--semantics-page-sections-lg-margin-block);
 		}
@@ -75,9 +75,9 @@ export const oneThirdTwoThirdsSectionStyles = css `
 
 	.one-third-two-thirds-section__body {
 		display: flex;
-		flex-direction: column;
 		width: 100%;
 		max-width: var(--_max-width);
+		flex-direction: column;
 
 		@media (max-width: ${smMax}) {
 			gap: var(--semantics-page-sections-sm-gap);
@@ -91,15 +91,15 @@ export const oneThirdTwoThirdsSectionStyles = css `
 			gap: var(--semantics-page-sections-lg-gap);
 		}
 
-		@container layout-area (max-width: ${smMax}) {
+		@container layout-container (max-width: ${smMax}) {
 			gap: var(--semantics-page-sections-sm-gap);
 		}
 
-		@container layout-area (min-width: ${mdMin}) and (max-width: ${mdMax}) {
+		@container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) {
 			gap: var(--semantics-page-sections-md-gap);
 		}
 
-		@container layout-area (min-width: ${lgMin}) {
+		@container layout-container (min-width: ${lgMin}) {
 			gap: var(--semantics-page-sections-lg-gap);
 		}
 	}
@@ -123,27 +123,27 @@ export const oneThirdTwoThirdsSectionStyles = css `
 			gap: var(--semantics-page-sections-lg-gap);
 		}
 
-		@container layout-area (max-width: ${smMax}) {
+		@container layout-container (max-width: ${smMax}) {
 			gap: var(--semantics-page-sections-sm-gap);
 		}
 
-		@container layout-area (min-width: ${mdMin}) and (max-width: ${mdMax}) {
+		@container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) {
 			gap: var(--semantics-page-sections-md-gap);
 		}
 
-		@container layout-area (min-width: ${lgMin}) {
+		@container layout-container (min-width: ${lgMin}) {
 			gap: var(--semantics-page-sections-lg-gap);
 		}
 	}
 
 	.one-third-two-thirds-section__left-column {
-		flex: 1;
 		min-width: var(--primitives-area-280);
+		flex: 1;
 	}
 
 	.one-third-two-thirds-section__right-column {
-		flex: 2;
 		min-width: var(--primitives-area-280);
+		flex: 2;
 	}
 `;
 //# sourceMappingURL=one-third-two-thirds-section.styles.js.map

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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBAmC1B,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"}
+{"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBAmC1B,KAAK;;;;;uBAKL,KAAK,qBAAqB,KAAK;;;;;uBAK/B,KAAK;;;;;4CAKgB,KAAK;;;;;4CAKL,KAAK,qBAAqB,KAAK;;;;;4CAK/B,KAAK;;;;;;;;;;;;;;;uBAe1B,KAAK;;;;uBAIL,KAAK,qBAAqB,KAAK;;;;uBAI/B,KAAK;;;;4CAIgB,KAAK;;;;4CAIL,KAAK,qBAAqB,KAAK;;;;4CAI/B,KAAK;;;;;;;;;;;;uBAY1B,KAAK;;;;uBAIL,KAAK,qBAAqB,KAAK;;;;uBAI/B,KAAK;;;;4CAIgB,KAAK;;;;4CAIL,KAAK,qBAAqB,KAAK;;;;4CAI/B,KAAK;;;;;;;;;;;;;;CAchD,CAAC"}

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

@@ -11,13 +11,16 @@
  * @slot - Main content
  * @slot footer - Content below the main content
  *
- * @attr {boolean} [full-width] - Remove the body max-width constraint so the
- *                                 section spans the full available width
+ * @attr {string} [width] - Body max-width: 'full' removes the constraint so the
+ *                          section spans the full available width. Any CSS
+ *                          length (e.g. '480px') overrides the default max-width.
  */
 import { LitElement } from 'lit';
 export declare class NLDDSimpleSection extends LitElement {
     static styles: import("lit").CSSResult;
-    fullWidth: boolean;
+    /** Width mode: 'full' (removes body max-width) or any CSS length. */
+    width: string;
+    updated(changedProperties: Map<string, unknown>): void;
     _onSlotChange(e: Event): void;
     render(): import("lit-html").TemplateResult;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"simple-section.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/simple-section/simple-section.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAKjC,qBACa,iBAAkB,SAAQ,UAAU;IAChD,OAAgB,MAAM,0BAAuB;IAG7C,SAAS,UAAS;IAElB,aAAa,CAAC,CAAC,EAAE,KAAK;IAMb,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,qBAAqB,EAAE,iBAAiB,CAAC;KACzC;CACD"}
+{"version":3,"file":"simple-section.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/simple-section/simple-section.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAKjC,qBACa,iBAAkB,SAAQ,UAAU;IAChD,OAAgB,MAAM,0BAAuB;IAE7C,qEAAqE;IAErE,KAAK,SAAM;IAEF,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAc/D,aAAa,CAAC,CAAC,EAAE,KAAK;IAMb,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,qBAAqB,EAAE,iBAAiB,CAAC;KACzC;CACD"}

package/dist/components/layout/page-sections/simple-section/simple-section.js

@@ -17,8 +17,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
  * @slot - Main content
  * @slot footer - Content below the main content
  *
- * @attr {boolean} [full-width] - Remove the body max-width constraint so the
- *                                 section spans the full available width
+ * @attr {string} [width] - Body max-width: 'full' removes the constraint so the
+ *                          section spans the full available width. Any CSS
+ *                          length (e.g. '480px') overrides the default max-width.
  */
 import { LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
@@ -27,7 +28,22 @@ import { simpleSectionTemplate } from './simple-section.template.js';
 let NLDDSimpleSection = class NLDDSimpleSection extends LitElement {
     constructor() {
         super(...arguments);
-        this.fullWidth = false;
+        /** Width mode: 'full' (removes body max-width) or any CSS length. */
+        this.width = '';
+    }
+    updated(changedProperties) {
+        if (changedProperties.has('width')) {
+            const w = this.width;
+            // Sections constrain the body's max-width rather than the host's
+            // outer width. The keyword 'full' is handled by CSS (sets
+            // --_max-width: none); CSS lengths feed --_max-width here.
+            if (w && w !== 'full' && CSS.supports('max-width', w)) {
+                this.style.setProperty('--_max-width', w);
+            }
+            else {
+                this.style.removeProperty('--_max-width');
+            }
+        }
     }
     _onSlotChange(e) {
         const slot = e.target;
@@ -40,8 +56,8 @@ let NLDDSimpleSection = class NLDDSimpleSection extends LitElement {
 };
 NLDDSimpleSection.styles = simpleSectionStyles;
 __decorate([
-    property({ type: Boolean, reflect: true, attribute: 'full-width' })
-], NLDDSimpleSection.prototype, "fullWidth", void 0);
+    property({ type: String, reflect: true })
+], NLDDSimpleSection.prototype, "width", void 0);
 NLDDSimpleSection = __decorate([
     customElement('nldd-simple-section')
 ], NLDDSimpleSection);

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

@@ -1 +1 @@
-{"version":3,"file":"simple-section.js","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/simple-section/simple-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,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,EAAE,qBAAqB,EAAE,MAAM,8BAA8B,CAAC;AAG9D,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,UAAU;IAA1C;;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,qBAAqB,CAAC,IAAI,CAAC,CAAC;IACpC,CAAC;;AAbe,wBAAM,GAAG,mBAAmB,AAAtB,CAAuB;AAG7C;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;oDAClD;AAJN,iBAAiB;IAD7B,aAAa,CAAC,qBAAqB,CAAC;GACxB,iBAAiB,CAe7B"}
+{"version":3,"file":"simple-section.js","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/simple-section/simple-section.ts"],"names":[],"mappings":";;;;;;AAAA;;;;;;;;;;;;;;;;GAgBG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACjC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,EAAE,qBAAqB,EAAE,MAAM,8BAA8B,CAAC;AAG9D,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,UAAU;IAA1C;;QAGN,qEAAqE;QAErE,UAAK,GAAG,EAAE,CAAC;IAyBZ,CAAC;IAvBS,OAAO,CAAC,iBAAuC;QACvD,IAAI,iBAAiB,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;YACpC,MAAM,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC;YACrB,iEAAiE;YACjE,0DAA0D;YAC1D,2DAA2D;YAC3D,IAAI,CAAC,IAAI,CAAC,KAAK,MAAM,IAAI,GAAG,CAAC,QAAQ,CAAC,WAAW,EAAE,CAAC,CAAC,EAAE,CAAC;gBACvD,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,cAAc,EAAE,CAAC,CAAC,CAAC;YAC3C,CAAC;iBAAM,CAAC;gBACP,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;YAC3C,CAAC;QACF,CAAC;IACF,CAAC;IAED,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,qBAAqB,CAAC,IAAI,CAAC,CAAC;IACpC,CAAC;;AA5Be,wBAAM,GAAG,mBAAmB,AAAtB,CAAuB;AAI7C;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;gDAC/B;AALC,iBAAiB;IAD7B,aAAa,CAAC,qBAAqB,CAAC;GACxB,iBAAiB,CA8B7B"}

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

@@ -9,16 +9,16 @@ export const simpleSectionStyles = css `
 
 	/* # Host
 	   Geen eigen container-type: page-sections luisteren naar de outer
-	   layout-area (gezet door nldd-page / nldd-card). Voor contexten
-	   zonder layout-area dient @media als fallback. */
+	   layout-container (gezet door nldd-page / nldd-card). Voor contexten
+	   zonder layout-container dient @media als fallback. */
 
 	:host {
 		--_max-width: var(--semantics-page-sections-body-max-width);
 
 		display: flex;
+		width: 100%;
 		flex-direction: column;
 		align-items: center;
-		width: 100%;
 	}
 
 	:host([hidden]) {
@@ -30,7 +30,7 @@ export const simpleSectionStyles = css `
 		flex-grow: 1;
 	}
 
-	:host([full-width]) {
+	:host([width="full"]) {
 		--_max-width: none;
 	}
 
@@ -39,11 +39,11 @@ export const simpleSectionStyles = css `
 
 	.simple-section {
 		display: flex;
+		box-sizing: border-box;
+		width: 100%;
 		flex-direction: column;
 		flex-grow: 1;
 		align-items: center;
-		width: 100%;
-		box-sizing: border-box;
 
 		@media (max-width: ${smMax}) {
 			padding-inline: var(--semantics-page-sections-sm-margin-inline);
@@ -60,38 +60,31 @@ export const simpleSectionStyles = css `
 			padding-block: var(--semantics-page-sections-lg-margin-block);
 		}
 
-		@container layout-area (max-width: ${smMax}) {
+		@container layout-container (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}) {
+		@container layout-container (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);
 		}
 
-		@container layout-area (min-width: ${lgMin}) {
+		@container layout-container (min-width: ${lgMin}) {
 			padding-inline: var(--semantics-page-sections-lg-margin-inline);
 			padding-block: var(--semantics-page-sections-lg-margin-block);
 		}
 	}
 
 
-	/* # Header */
-
-	.simple-section__header[hidden] {
-		display: none;
-	}
-
-
 	/* # Body */
 
 	.simple-section__body {
 		display: flex;
-		flex-direction: column;
-		flex-grow: 1;
 		width: 100%;
 		max-width: var(--_max-width);
+		flex-direction: column;
+		flex-grow: 1;
 
 		@media (max-width: ${smMax}) {
 			gap: var(--semantics-page-sections-sm-gap);
@@ -105,23 +98,23 @@ export const simpleSectionStyles = css `
 			gap: var(--semantics-page-sections-lg-gap);
 		}
 
-		@container layout-area (max-width: ${smMax}) {
+		@container layout-container (max-width: ${smMax}) {
 			gap: var(--semantics-page-sections-sm-gap);
 		}
 
-		@container layout-area (min-width: ${mdMin}) and (max-width: ${mdMax}) {
+		@container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) {
 			gap: var(--semantics-page-sections-md-gap);
 		}
 
-		@container layout-area (min-width: ${lgMin}) {
+		@container layout-container (min-width: ${lgMin}) {
 			gap: var(--semantics-page-sections-lg-gap);
 		}
 	}
 
 
-	/* # Footer */
+	/* # Header */
 
-	.simple-section__footer[hidden] {
+	.simple-section__header[hidden] {
 		display: none;
 	}
 
@@ -133,5 +126,12 @@ export const simpleSectionStyles = css `
 		flex-direction: column;
 		flex-grow: 1;
 	}
+
+
+	/* # Footer */
+
+	.simple-section__footer[hidden] {
+		display: none;
+	}
 `;
 //# sourceMappingURL=simple-section.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"simple-section.styles.js","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/simple-section/simple-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,mBAAmB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBAyCf,KAAK;;;;;uBAKL,KAAK,qBAAqB,KAAK;;;;;uBAK/B,KAAK;;;;;uCAKW,KAAK;;;;;uCAKL,KAAK,qBAAqB,KAAK;;;;;uCAK/B,KAAK;;;;;;;;;;;;;;;;;;;;;;;uBAuBrB,KAAK;;;;uBAIL,KAAK,qBAAqB,KAAK;;;;uBAI/B,KAAK;;;;uCAIW,KAAK;;;;uCAIL,KAAK,qBAAqB,KAAK;;;;uCAI/B,KAAK;;;;;;;;;;;;;;;;;;;;CAoB3C,CAAC"}
+{"version":3,"file":"simple-section.styles.js","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/simple-section/simple-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,mBAAmB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBAyCf,KAAK;;;;;uBAKL,KAAK,qBAAqB,KAAK;;;;;uBAK/B,KAAK;;;;;4CAKgB,KAAK;;;;;4CAKL,KAAK,qBAAqB,KAAK;;;;;4CAK/B,KAAK;;;;;;;;;;;;;;;;uBAgB1B,KAAK;;;;uBAIL,KAAK,qBAAqB,KAAK;;;;uBAI/B,KAAK;;;;4CAIgB,KAAK;;;;4CAIL,KAAK,qBAAqB,KAAK;;;;4CAI/B,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BhD,CAAC"}

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

@@ -13,13 +13,16 @@
  * @slot right - Right column (1/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
+ * @attr {string} [width] - Body max-width: 'full' removes the constraint so the
+ *                          section spans the full available width. Any CSS
+ *                          length (e.g. '480px') overrides the default max-width.
  */
 import { LitElement } from 'lit';
 export declare class NLDDTwoThirdsOneThirdSection extends LitElement {
     static styles: import("lit").CSSResult;
-    fullWidth: boolean;
+    /** Width mode: 'full' (removes body max-width) or any CSS length. */
+    width: string;
+    updated(changedProperties: Map<string, unknown>): void;
     render(): import("lit-html").TemplateResult;
 }
 declare global {

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

@@ -1 +1 @@
-{"version":3,"file":"two-thirds-one-third-section.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/two-thirds-one-third-section/two-thirds-one-third-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"}
+{"version":3,"file":"two-thirds-one-third-section.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/two-thirds-one-third-section/two-thirds-one-third-section.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAKjC,qBACa,4BAA6B,SAAQ,UAAU;IAC3D,OAAgB,MAAM,0BAAkC;IAExD,qEAAqE;IAErE,KAAK,SAAM;IAEF,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IActD,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,mCAAmC,EAAE,4BAA4B,CAAC;KAClE;CACD"}

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

@@ -19,8 +19,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
  * @slot right - Right column (1/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
+ * @attr {string} [width] - Body max-width: 'full' removes the constraint so the
+ *                          section spans the full available width. Any CSS
+ *                          length (e.g. '480px') overrides the default max-width.
  */
 import { LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
@@ -29,7 +30,22 @@ import { twoThirdsOneThirdSectionTemplate } from './two-thirds-one-third-section
 let NLDDTwoThirdsOneThirdSection = class NLDDTwoThirdsOneThirdSection extends LitElement {
     constructor() {
         super(...arguments);
-        this.fullWidth = false;
+        /** Width mode: 'full' (removes body max-width) or any CSS length. */
+        this.width = '';
+    }
+    updated(changedProperties) {
+        if (changedProperties.has('width')) {
+            const w = this.width;
+            // Sections constrain the body's max-width rather than the host's
+            // outer width. The keyword 'full' is handled by CSS (sets
+            // --_max-width: none); CSS lengths feed --_max-width here.
+            if (w && w !== 'full' && CSS.supports('max-width', w)) {
+                this.style.setProperty('--_max-width', w);
+            }
+            else {
+                this.style.removeProperty('--_max-width');
+            }
+        }
     }
     render() {
         return twoThirdsOneThirdSectionTemplate(this);
@@ -37,8 +53,8 @@ let NLDDTwoThirdsOneThirdSection = class NLDDTwoThirdsOneThirdSection extends Li
 };
 NLDDTwoThirdsOneThirdSection.styles = twoThirdsOneThirdSectionStyles;
 __decorate([
-    property({ type: Boolean, reflect: true, attribute: 'full-width' })
-], NLDDTwoThirdsOneThirdSection.prototype, "fullWidth", void 0);
+    property({ type: String, reflect: true })
+], NLDDTwoThirdsOneThirdSection.prototype, "width", void 0);
 NLDDTwoThirdsOneThirdSection = __decorate([
     customElement('nldd-two-thirds-one-third-section')
 ], NLDDTwoThirdsOneThirdSection);

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

@@ -1 +1 @@
-{"version":3,"file":"two-thirds-one-third-section.js","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/two-thirds-one-third-section/two-thirds-one-third-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"}
+{"version":3,"file":"two-thirds-one-third-section.js","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/two-thirds-one-third-section/two-thirds-one-third-section.ts"],"names":[],"mappings":";;;;;;AAAA;;;;;;;;;;;;;;;;;;GAkBG;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;;QAGN,qEAAqE;QAErE,UAAK,GAAG,EAAE,CAAC;IAmBZ,CAAC;IAjBS,OAAO,CAAC,iBAAuC;QACvD,IAAI,iBAAiB,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;YACpC,MAAM,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC;YACrB,iEAAiE;YACjE,0DAA0D;YAC1D,2DAA2D;YAC3D,IAAI,CAAC,IAAI,CAAC,KAAK,MAAM,IAAI,GAAG,CAAC,QAAQ,CAAC,WAAW,EAAE,CAAC,CAAC,EAAE,CAAC;gBACvD,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,cAAc,EAAE,CAAC,CAAC,CAAC;YAC3C,CAAC;iBAAM,CAAC;gBACP,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;YAC3C,CAAC;QACF,CAAC;IACF,CAAC;IAEQ,MAAM;QACd,OAAO,gCAAgC,CAAC,IAAI,CAAC,CAAC;IAC/C,CAAC;;AAtBe,mCAAM,GAAG,8BAA8B,AAAjC,CAAkC;AAIxD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2DAC/B;AALC,4BAA4B;IADxC,aAAa,CAAC,mCAAmC,CAAC;GACtC,4BAA4B,CAwBxC"}

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

@@ -9,23 +9,23 @@ export const twoThirdsOneThirdSectionStyles = css `
 
 	/* # Host
 	   Geen eigen container-type: page-sections luisteren naar de outer
-	   layout-area (gezet door nldd-page / nldd-card). Voor contexten
-	   zonder layout-area dient @media als fallback. */
+	   layout-container (gezet door nldd-page / nldd-card). Voor contexten
+	   zonder layout-container dient @media als fallback. */
 
 	:host {
 		--_max-width: var(--semantics-page-sections-body-max-width);
 
 		display: flex;
+		width: 100%;
 		flex-direction: column;
 		align-items: center;
-		width: 100%;
 	}
 
 	:host([hidden]) {
 		display: none;
 	}
 
-	:host([full-width]) {
+	:host([width="full"]) {
 		--_max-width: none;
 	}
 
@@ -34,10 +34,10 @@ export const twoThirdsOneThirdSectionStyles = css `
 
 	.two-thirds-one-third-section {
 		display: flex;
+		box-sizing: border-box;
+		width: 100%;
 		flex-direction: column;
 		align-items: center;
-		width: 100%;
-		box-sizing: border-box;
 
 		@media (max-width: ${smMax}) {
 			padding-inline: var(--semantics-page-sections-sm-margin-inline);
@@ -54,17 +54,17 @@ export const twoThirdsOneThirdSectionStyles = css `
 			padding-block: var(--semantics-page-sections-lg-margin-block);
 		}
 
-		@container layout-area (max-width: ${smMax}) {
+		@container layout-container (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}) {
+		@container layout-container (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);
 		}
 
-		@container layout-area (min-width: ${lgMin}) {
+		@container layout-container (min-width: ${lgMin}) {
 			padding-inline: var(--semantics-page-sections-lg-margin-inline);
 			padding-block: var(--semantics-page-sections-lg-margin-block);
 		}
@@ -75,9 +75,9 @@ export const twoThirdsOneThirdSectionStyles = css `
 
 	.two-thirds-one-third-section__body {
 		display: flex;
-		flex-direction: column;
 		width: 100%;
 		max-width: var(--_max-width);
+		flex-direction: column;
 
 		@media (max-width: ${smMax}) {
 			gap: var(--semantics-page-sections-sm-gap);
@@ -91,15 +91,15 @@ export const twoThirdsOneThirdSectionStyles = css `
 			gap: var(--semantics-page-sections-lg-gap);
 		}
 
-		@container layout-area (max-width: ${smMax}) {
+		@container layout-container (max-width: ${smMax}) {
 			gap: var(--semantics-page-sections-sm-gap);
 		}
 
-		@container layout-area (min-width: ${mdMin}) and (max-width: ${mdMax}) {
+		@container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) {
 			gap: var(--semantics-page-sections-md-gap);
 		}
 
-		@container layout-area (min-width: ${lgMin}) {
+		@container layout-container (min-width: ${lgMin}) {
 			gap: var(--semantics-page-sections-lg-gap);
 		}
 	}
@@ -123,27 +123,27 @@ export const twoThirdsOneThirdSectionStyles = css `
 			gap: var(--semantics-page-sections-lg-gap);
 		}
 
-		@container layout-area (max-width: ${smMax}) {
+		@container layout-container (max-width: ${smMax}) {
 			gap: var(--semantics-page-sections-sm-gap);
 		}
 
-		@container layout-area (min-width: ${mdMin}) and (max-width: ${mdMax}) {
+		@container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) {
 			gap: var(--semantics-page-sections-md-gap);
 		}
 
-		@container layout-area (min-width: ${lgMin}) {
+		@container layout-container (min-width: ${lgMin}) {
 			gap: var(--semantics-page-sections-lg-gap);
 		}
 	}
 
 	.two-thirds-one-third-section__left-column {
-		flex: 2;
 		min-width: var(--primitives-area-280);
+		flex: 2;
 	}
 
 	.two-thirds-one-third-section__right-column {
-		flex: 1;
 		min-width: var(--primitives-area-280);
+		flex: 1;
 	}
 `;
 //# sourceMappingURL=two-thirds-one-third-section.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"two-thirds-one-third-section.styles.js","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/two-thirds-one-third-section/two-thirds-one-third-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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBAmC1B,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"}
+{"version":3,"file":"two-thirds-one-third-section.styles.js","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/two-thirds-one-third-section/two-thirds-one-third-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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBAmC1B,KAAK;;;;;uBAKL,KAAK,qBAAqB,KAAK;;;;;uBAK/B,KAAK;;;;;4CAKgB,KAAK;;;;;4CAKL,KAAK,qBAAqB,KAAK;;;;;4CAK/B,KAAK;;;;;;;;;;;;;;;uBAe1B,KAAK;;;;uBAIL,KAAK,qBAAqB,KAAK;;;;uBAI/B,KAAK;;;;4CAIgB,KAAK;;;;4CAIL,KAAK,qBAAqB,KAAK;;;;4CAI/B,KAAK;;;;;;;;;;;;uBAY1B,KAAK;;;;uBAIL,KAAK,qBAAqB,KAAK;;;;uBAI/B,KAAK;;;;4CAIgB,KAAK;;;;4CAIL,KAAK,qBAAqB,KAAK;;;;4CAI/B,KAAK;;;;;;;;;;;;;;CAchD,CAAC"}