@nldd/design-system 0.8.37 → 0.8.39

package/dist/components/layout/page-sections/simple-section/simple-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 { simpleSectionStyles } from './simple-section.styles.js';
 import { simpleSectionTemplate } from './simple-section.template.js';
 let NLDDSimpleSection = class NLDDSimpleSection extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.fullWidth = false;
+    }
     _onSlotChange(e) {
         const slot = e.target;
         const wrapper = slot.parentElement;
@@ -35,8 +40,8 @@ let NLDDSimpleSection = class NLDDSimpleSection extends LitElement {
 };
 NLDDSimpleSection.styles = simpleSectionStyles;
 __decorate([
-    property({ type: String, reflect: true })
-], NLDDSimpleSection.prototype, "align", void 0);
+    property({ type: Boolean, reflect: true, attribute: 'full-width' })
+], NLDDSimpleSection.prototype, "fullWidth", 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;;;;;;;;;;;;;;GAcG;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;IAMhD,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,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;gDAC3B;AAJH,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;;;;;;;;;;;;;;;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"}

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

@@ -1 +1 @@
-{"version":3,"file":"simple-section.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/simple-section/simple-section.styles.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,mBAAmB,yBAgH/B,CAAC"}
+{"version":3,"file":"simple-section.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/simple-section/simple-section.styles.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,mBAAmB,yBAiI/B,CAAC"}

package/dist/components/layout/page-sections/simple-section/simple-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 simpleSectionStyles = css `
 
@@ -11,6 +13,8 @@ export const simpleSectionStyles = 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,17 @@ export const simpleSectionStyles = css `
 		display: none;
 	}
 
-	:host([align="center"]) {
+	:host(:last-child),
+	:host(.is-last) {
 		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 */
 
 	.simple-section {
 		display: flex;
@@ -36,10 +44,13 @@ export const simpleSectionStyles = 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);
 		}
@@ -49,7 +60,12 @@ export const simpleSectionStyles = 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);
 		}
@@ -75,10 +91,13 @@ export const simpleSectionStyles = css `
 		flex-direction: column;
 		flex-grow: 1;
 		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);
 		}
 
@@ -86,7 +105,11 @@ export const simpleSectionStyles = 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);
 		}
 
@@ -110,9 +133,5 @@ export const simpleSectionStyles = css `
 		flex-direction: column;
 		flex-grow: 1;
 	}
-
-	:host([align="center"]) .simple-section__main {
-		justify-content: center;
-	}
 `;
 //# 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;AAE3C,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBAqCf,KAAK;;;;;uBAKL,KAAK;;;;;uCAKW,KAAK;;;;;uCAKL,KAAK;;;;;;;;;;;;;;;;;;;;;;;;uBAwBrB,KAAK;;;;uBAIL,KAAK;;;;uCAIW,KAAK;;;;uCAIL,KAAK;;;;;;;;;;;;;;;;;;;;;;;;CAwB3C,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;;;;;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"}

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

@@ -12,10 +12,14 @@
  * @slot left - Left column (2/3)
  * @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
  */
 import { LitElement } from 'lit';
 export declare class NLDDTwoThirdsOneThirdSection extends LitElement {
     static styles: import("lit").CSSResult;
+    fullWidth: boolean;
     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;;;;;;;;;;;;;;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":"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"}

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

@@ -18,17 +18,27 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
  * @slot left - Left column (2/3)
  * @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
  */
 import { LitElement } from 'lit';
-import { customElement } from 'lit/decorators.js';
+import { customElement, property } from 'lit/decorators.js';
 import { twoThirdsOneThirdSectionStyles } from './two-thirds-one-third-section.styles.js';
 import { twoThirdsOneThirdSectionTemplate } from './two-thirds-one-third-section.template.js';
 let NLDDTwoThirdsOneThirdSection = class NLDDTwoThirdsOneThirdSection extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.fullWidth = false;
+    }
     render() {
         return twoThirdsOneThirdSectionTemplate(this);
     }
 };
 NLDDTwoThirdsOneThirdSection.styles = twoThirdsOneThirdSectionStyles;
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'full-width' })
+], NLDDTwoThirdsOneThirdSection.prototype, "fullWidth", 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;;;;;;;;;;;;;;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":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"two-thirds-one-third-section.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/two-thirds-one-third-section/two-thirds-one-third-section.styles.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,8BAA8B,yBAmH1C,CAAC"}
+{"version":3,"file":"two-thirds-one-third-section.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/two-thirds-one-third-section/two-thirds-one-third-section.styles.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,8BAA8B,yBA6I1C,CAAC"}

package/dist/components/layout/page-sections/two-thirds-one-third-section/two-thirds-one-third-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 twoThirdsOneThirdSectionStyles = css `
 
@@ -11,6 +13,8 @@ export const twoThirdsOneThirdSectionStyles = 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 twoThirdsOneThirdSectionStyles = 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 */
 
 	.two-thirds-one-third-section {
 		display: flex;
@@ -31,10 +38,13 @@ export const twoThirdsOneThirdSectionStyles = 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 twoThirdsOneThirdSectionStyles = 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 twoThirdsOneThirdSectionStyles = 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 (max-width: ${smMax}) {
+			gap: var(--semantics-page-sections-sm-gap);
+		}
 
-		@media (min-width: ${mdMin}) {
+		@media (min-width: ${mdMin}) and (max-width: ${mdMax}) {
 			gap: var(--semantics-page-sections-md-gap);
 		}
 
@@ -73,7 +91,11 @@ export const twoThirdsOneThirdSectionStyles = 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 twoThirdsOneThirdSectionStyles = css `
 	.two-thirds-one-third-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 twoThirdsOneThirdSectionStyles = 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);
 		}
 
@@ -116,6 +145,5 @@ export const twoThirdsOneThirdSectionStyles = css `
 		flex: 1;
 		min-width: var(--primitives-area-280);
 	}
-
 `;
 //# 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;AAE3C,MAAM,CAAC,MAAM,8BAA8B,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBAgC1B,KAAK;;;;;uBAKL,KAAK;;;;;uCAKW,KAAK;;;;;uCAKL,KAAK;;;;;;;;;;;;;;;;uBAgBrB,KAAK;;;;uBAIL,KAAK;;;;uCAIW,KAAK;;;;uCAIL,KAAK;;;;;;;;;;;;;uBAarB,KAAK;;;;uBAIL,KAAK;;;;uCAIW,KAAK;;;;uCAIL,KAAK;;;;;;;;;;;;;;;CAe3C,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;;;;;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/popover/popover.d.ts

@@ -20,9 +20,33 @@
  *
  * @element nldd-popover
  *
- * @attr {string} anchor           - ID van het trigger-element voor positionering
- * @attr {string} placement        - Floating UI placement (default: 'bottom-start')
- * @attr {string} width            - Expliciete width (default: 320px via --components-popover-default-width)
+ * @attr {string}  anchor          - ID van het trigger-element voor positionering
+ * @attr {string}  placement       - Floating UI placement (default: 'bottom-start')
+ * @attr {string}  width           - Expliciete width (default: 320px via --components-popover-default-width)
+ * @attr {string}  top             - CSS top-positie. Wanneer gezet (alleen of
+ *                                    samen met andere edge-attrs of `centered`)
+ *                                    wordt Floating UI's anchor-positionering
+ *                                    overgeslagen — de popover staat dan vrij
+ *                                    op het scherm. De `anchor` blijft wel
+ *                                    nodig voor ARIA-koppeling op de trigger.
+ *                                    Geen effect op sm (bottom-sheet wint).
+ * @attr {string}  left            - CSS left-positie. Zie `top` voor semantiek.
+ * @attr {string}  right           - CSS right-positie. Zie `top` voor semantiek.
+ * @attr {string}  bottom          - CSS bottom-positie. Zie `top` voor semantiek.
+ * @attr {boolean} centered        - Centreert beide assen op de viewport. Per
+ *                                    as overrideable: `centered top="0"` =
+ *                                    horizontaal gecentreerd, top-aligned.
+ *                                    Mirrort CSS `place-items: center` met
+ *                                    `align-items`/`justify-items` overrides.
+ * @attr {boolean} sm-full-height  - Op sm-viewport (waar de popover als
+ *                                    bottom-sheet rendert) de volledige
+ *                                    beschikbare hoogte vullen i.p.v. te
+ *                                    krimpen naar content. Geen effect op
+ *                                    md+ (anchored modus). Opt-in voor
+ *                                    content-heavy use cases zoals zoek-
+ *                                    resultaten of lange detail-views; volgt
+ *                                    Apple/Material conventie van content-
+ *                                    sized als default.
  * @attr {string} accessible-label - (verplicht) Toegankelijke naam (aria-label).
  *                                    Valt terug op de i18n default ('Popover')
  *                                    als niet gezet — geef altijd een unieke,
@@ -60,6 +84,12 @@ export declare class NLDDPopover extends LitElement {
     anchorElement: Element | null;
     placement: Placement;
     width: string | undefined;
+    top: string | undefined;
+    left: string | undefined;
+    right: string | undefined;
+    bottom: string | undefined;
+    centered: boolean;
+    smFullHeight: boolean;
     accessibleLabel: string;
     /**
      * Override one or more translation keys.
@@ -73,6 +103,7 @@ export declare class NLDDPopover extends LitElement {
     /** Cleanup-functie van Floating UI's autoUpdate, alleen actief tijdens open. */
     private _cleanupAutoUpdate;
     private _smQuery;
+    private _wasOnSm;
     private _previousAnchorEl;
     get open(): boolean;
     connectedCallback(): void;
@@ -84,6 +115,14 @@ export declare class NLDDPopover extends LitElement {
     private _warnIfMissingLabel;
     hide(): void;
     toggle(): void;
+    /**
+     * Restore the inline transition after a breakpoint-suppressed tick. Force
+     * a layout flush first (`void offsetHeight`) so the just-applied position
+     * styles commit before transitions resume — otherwise the cleared
+     * `transition: ''` would re-enable animations on those exact properties
+     * and you'd still see the slide we were trying to suppress.
+     */
+    private _restoreTransition;
     /** Herberekent positie t.o.v. anchor. Wordt automatisch aangeroepen bij openen. */
     reposition(): Promise<void>;
     private _getAnchorEl;

package/dist/components/layout/popover/popover.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/popover/popover.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoDG;AAEH,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAEjD,OAAO,EAAkD,KAAK,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAGlG,OAAO,EAA2B,KAAK,uBAAuB,EAAE,MAAM,mBAAmB,CAAC;AAK1F,qBACa,WAAY,SAAQ,UAAU;IAC1C,OAAgB,MAAM,0BAAiB;IAGvC,MAAM,SAAM;IAGZ,aAAa,EAAE,OAAO,GAAG,IAAI,CAAQ;IAGrC,SAAS,EAAE,SAAS,CAAkB;IAGtC,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAG1B,eAAe,SAAM;IAErB;;;OAGG;IAEH,YAAY,EAAE,OAAO,CAAC,uBAAuB,CAAC,CAAM;IAEpD,OAAO,CAAC,OAAO,CAAS;IACxB,OAAO,CAAC,eAAe,CAAS;IAChC,OAAO,CAAC,cAAc,CAA4B;IAClD,OAAO,CAAC,SAAS,CAAK;IACtB,gFAAgF;IAChF,OAAO,CAAC,kBAAkB,CAA6B;IACvD,OAAO,CAAC,QAAQ,CAA+B;IAC/C,OAAO,CAAC,iBAAiB,CAAwB;IAEjD,IAAI,IAAI,IAAI,OAAO,CAElB;IAEQ,iBAAiB,IAAI,IAAI;IAuBzB,oBAAoB,IAAI,IAAI;IA0B5B,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAuB/C,OAAO,CAAC,EAAE;IAIV,IAAI,wBAAwB,IAAI,MAAM,CAErC;IAID,IAAI,IAAI,IAAI;IAUZ,OAAO,CAAC,mBAAmB;IAQ3B,IAAI,IAAI,IAAI;IAKZ,MAAM,IAAI,IAAI;IAKd,mFAAmF;IAC7E,UAAU,IAAI,OAAO,CAAC,IAAI,CAAC;IA6CjC,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,iBAAiB;IAkCzB,OAAO,CAAC,qBAAqB,CAE3B;IAEF,OAAO,CAAC,oBAAoB,CAgB1B;IAEF,OAAO,CAAC,aAAa,CA+BnB;IAEF,OAAO,CAAC,cAAc,CAiBpB;IAIF,OAAO,CAAC,YAAY;IAUpB,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,cAAc;IA2Cb,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,cAAc,EAAE,WAAW,CAAC;KAC5B;CACD"}
+{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/popover/popover.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4EG;AAEH,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAEjD,OAAO,EAAkD,KAAK,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAGlG,OAAO,EAA2B,KAAK,uBAAuB,EAAE,MAAM,mBAAmB,CAAC;AAK1F,qBACa,WAAY,SAAQ,UAAU;IAC1C,OAAgB,MAAM,0BAAiB;IAGvC,MAAM,SAAM;IAGZ,aAAa,EAAE,OAAO,GAAG,IAAI,CAAQ;IAGrC,SAAS,EAAE,SAAS,CAAkB;IAGtC,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAO1B,GAAG,EAAE,MAAM,GAAG,SAAS,CAAa;IAGpC,IAAI,EAAE,MAAM,GAAG,SAAS,CAAa;IAGrC,KAAK,EAAE,MAAM,GAAG,SAAS,CAAa;IAGtC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAa;IAGvC,QAAQ,UAAS;IAGjB,YAAY,UAAS;IAGrB,eAAe,SAAM;IAErB;;;OAGG;IAEH,YAAY,EAAE,OAAO,CAAC,uBAAuB,CAAC,CAAM;IAEpD,OAAO,CAAC,OAAO,CAAS;IACxB,OAAO,CAAC,eAAe,CAAS;IAChC,OAAO,CAAC,cAAc,CAA4B;IAClD,OAAO,CAAC,SAAS,CAAK;IACtB,gFAAgF;IAChF,OAAO,CAAC,kBAAkB,CAA6B;IACvD,OAAO,CAAC,QAAQ,CAA+B;IAC/C,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,iBAAiB,CAAwB;IAEjD,IAAI,IAAI,IAAI,OAAO,CAElB;IAEQ,iBAAiB,IAAI,IAAI;IA0BzB,oBAAoB,IAAI,IAAI;IA0B5B,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAoC/C,OAAO,CAAC,EAAE;IAIV,IAAI,wBAAwB,IAAI,MAAM,CAErC;IAID,IAAI,IAAI,IAAI;IAUZ,OAAO,CAAC,mBAAmB;IAQ3B,IAAI,IAAI,IAAI;IAKZ,MAAM,IAAI,IAAI;IAKd;;;;;;OAMG;IACH,OAAO,CAAC,kBAAkB;IAK1B,mFAAmF;IAC7E,UAAU,IAAI,OAAO,CAAC,IAAI,CAAC;IA+FjC,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,iBAAiB;IAkCzB,OAAO,CAAC,qBAAqB,CAa3B;IAEF,OAAO,CAAC,oBAAoB,CAgB1B;IAEF,OAAO,CAAC,aAAa,CA+BnB;IAEF,OAAO,CAAC,cAAc,CAiBpB;IAIF,OAAO,CAAC,YAAY;IAUpB,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,cAAc;IA2Cb,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,cAAc,EAAE,WAAW,CAAC;KAC5B;CACD"}