@nldd/design-system 0.8.37

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

@@ -0,0 +1,112 @@
+import { css, unsafeCSS } from 'lit';
+import { breakpoints } from '../../../../assets/styles/breakpoints.js';
+const mdMin = unsafeCSS(breakpoints.mdMin);
+const lgMin = unsafeCSS(breakpoints.lgMin);
+export const fullBleedSectionStyles = 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. */
+
+	:host {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		width: 100%;
+	}
+
+	:host([hidden]) {
+		display: none;
+	}
+
+	:host([align="center"]) {
+		flex-grow: 1;
+	}
+
+
+	/* # Block — sm = base; md/lg via @media (fallback) en
+	   @container layout-area (heeft voorrang binnen layout-area). */
+
+	.full-bleed-section {
+		display: flex;
+		flex-direction: column;
+		flex-grow: 1;
+		width: 100%;
+		box-sizing: border-box;
+		padding-block: var(--semantics-page-sections-sm-margin-block);
+
+		@media (min-width: ${mdMin}) {
+			padding-block: var(--semantics-page-sections-md-margin-block);
+		}
+
+		@media (min-width: ${lgMin}) {
+			padding-block: var(--semantics-page-sections-lg-margin-block);
+		}
+
+		@container layout-area (min-width: ${mdMin}) {
+			padding-block: var(--semantics-page-sections-md-margin-block);
+		}
+
+		@container layout-area (min-width: ${lgMin}) {
+			padding-block: var(--semantics-page-sections-lg-margin-block);
+		}
+	}
+
+
+	/* # Header */
+
+	.full-bleed-section__header[hidden] {
+		display: none;
+	}
+
+
+	/* # Body */
+
+	.full-bleed-section__body {
+		display: flex;
+		flex-direction: column;
+		flex-grow: 1;
+		width: 100%;
+		gap: var(--semantics-page-sections-sm-gap);
+
+		@media (min-width: ${mdMin}) {
+			gap: var(--semantics-page-sections-md-gap);
+		}
+
+		@media (min-width: ${lgMin}) {
+			gap: var(--semantics-page-sections-lg-gap);
+		}
+
+		@container layout-area (min-width: ${mdMin}) {
+			gap: var(--semantics-page-sections-md-gap);
+		}
+
+		@container layout-area (min-width: ${lgMin}) {
+			gap: var(--semantics-page-sections-lg-gap);
+		}
+	}
+
+
+	/* # Footer */
+
+	.full-bleed-section__footer[hidden] {
+		display: none;
+	}
+
+
+	/* # Main */
+
+	.full-bleed-section__main {
+		display: flex;
+		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

@@ -0,0 +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"}

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

@@ -0,0 +1,4 @@
+import { TemplateResult } from 'lit';
+import type { NLDDFullBleedSection } from './full-bleed-section.js';
+export declare function fullBleedSectionTemplate(component: NLDDFullBleedSection): TemplateResult;
+//# sourceMappingURL=full-bleed-section.template.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"full-bleed-section.template.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/full-bleed-section/full-bleed-section.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,cAAc,EAAE,MAAM,KAAK,CAAC;AAC3C,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAEpE,wBAAgB,wBAAwB,CAAC,SAAS,EAAE,oBAAoB,GAAG,cAAc,CAgBxF"}

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

@@ -0,0 +1,19 @@
+import { html } from 'lit';
+export function fullBleedSectionTemplate(component) {
+    return html `
+		<section class="full-bleed-section">
+			<div class="full-bleed-section__body">
+				<header class="full-bleed-section__header" hidden>
+					<slot name="header" @slotchange=${component._onSlotChange}></slot>
+				</header>
+				<div class="full-bleed-section__main">
+					<slot></slot>
+				</div>
+				<footer class="full-bleed-section__footer" hidden>
+					<slot name="footer" @slotchange=${component._onSlotChange}></slot>
+				</footer>
+			</div>
+		</section>
+	`;
+}
+//# sourceMappingURL=full-bleed-section.template.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"full-bleed-section.template.js","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/full-bleed-section/full-bleed-section.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAC;AAG3C,MAAM,UAAU,wBAAwB,CAAC,SAA+B;IACvE,OAAO,IAAI,CAAA;;;;uCAI2B,SAAS,CAAC,aAAa;;;;;;uCAMvB,SAAS,CAAC,aAAa;;;;EAI5D,CAAC;AACH,CAAC"}

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

@@ -0,0 +1,26 @@
+/**
+ * Nederlandse Digitale Dienst One Half One Half Section Component (Lit + TypeScript)
+ *
+ * A section with two equal columns side by side.
+ * The columns wrap automatically when they become smaller than 280px.
+ * Padding and gap adjust via container queries.
+ *
+ * @element nldd-one-half-one-half-section
+ *
+ * @slot header - Content above the columns
+ * @slot - Left column (1/2), alternative for slot="left"
+ * @slot left - Left column (1/2)
+ * @slot right - Right column (1/2)
+ * @slot footer - Content below the columns
+ */
+import { LitElement } from 'lit';
+export declare class NLDDOneHalfOneHalfSection extends LitElement {
+    static styles: import("lit").CSSResult;
+    render(): import("lit-html").TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nldd-one-half-one-half-section': NLDDOneHalfOneHalfSection;
+    }
+}
+//# sourceMappingURL=one-half-one-half-section.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,36 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/**
+ * Nederlandse Digitale Dienst One Half One Half Section Component (Lit + TypeScript)
+ *
+ * A section with two equal columns side by side.
+ * The columns wrap automatically when they become smaller than 280px.
+ * Padding and gap adjust via container queries.
+ *
+ * @element nldd-one-half-one-half-section
+ *
+ * @slot header - Content above the columns
+ * @slot - Left column (1/2), alternative for slot="left"
+ * @slot left - Left column (1/2)
+ * @slot right - Right column (1/2)
+ * @slot footer - Content below the columns
+ */
+import { LitElement } from 'lit';
+import { customElement } 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 {
+    render() {
+        return oneHalfOneHalfSectionTemplate(this);
+    }
+};
+NLDDOneHalfOneHalfSection.styles = oneHalfOneHalfSectionStyles;
+NLDDOneHalfOneHalfSection = __decorate([
+    customElement('nldd-one-half-one-half-section')
+], NLDDOneHalfOneHalfSection);
+export { NLDDOneHalfOneHalfSection };
+//# sourceMappingURL=one-half-one-half-section.js.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,2 @@
+export declare const oneHalfOneHalfSectionStyles: import("lit").CSSResult;
+//# sourceMappingURL=one-half-one-half-section.styles.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,120 @@
+import { css, unsafeCSS } from 'lit';
+import { breakpoints } from '../../../../assets/styles/breakpoints.js';
+const mdMin = unsafeCSS(breakpoints.mdMin);
+const lgMin = unsafeCSS(breakpoints.lgMin);
+export const oneHalfOneHalfSectionStyles = 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. */
+
+	:host {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		width: 100%;
+	}
+
+	:host([hidden]) {
+		display: none;
+	}
+
+
+	/* # Block — sm = base; md/lg via @media (fallback) en
+	   @container layout-area (heeft voorrang binnen layout-area). */
+
+	.one-half-one-half-section {
+		display: flex;
+		flex-direction: column;
+		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}) {
+			padding-inline: var(--semantics-page-sections-md-margin-inline);
+			padding-block: var(--semantics-page-sections-md-margin-block);
+		}
+
+		@media (min-width: ${lgMin}) {
+			padding-inline: var(--semantics-page-sections-lg-margin-inline);
+			padding-block: var(--semantics-page-sections-lg-margin-block);
+		}
+
+		@container layout-area (min-width: ${mdMin}) {
+			padding-inline: var(--semantics-page-sections-md-margin-inline);
+			padding-block: var(--semantics-page-sections-md-margin-block);
+		}
+
+		@container layout-area (min-width: ${lgMin}) {
+			padding-inline: var(--semantics-page-sections-lg-margin-inline);
+			padding-block: var(--semantics-page-sections-lg-margin-block);
+		}
+	}
+
+
+	/* # Body */
+
+	.one-half-one-half-section__body {
+		display: flex;
+		flex-direction: column;
+		width: 100%;
+		max-width: var(--semantics-page-sections-body-max-width);
+		gap: var(--semantics-page-sections-sm-gap);
+
+		@media (min-width: ${mdMin}) {
+			gap: var(--semantics-page-sections-md-gap);
+		}
+
+		@media (min-width: ${lgMin}) {
+			gap: var(--semantics-page-sections-lg-gap);
+		}
+
+		@container layout-area (min-width: ${mdMin}) {
+			gap: var(--semantics-page-sections-md-gap);
+		}
+
+		@container layout-area (min-width: ${lgMin}) {
+			gap: var(--semantics-page-sections-lg-gap);
+		}
+	}
+
+
+	/* # Columns */
+
+	.one-half-one-half-section__columns {
+		display: flex;
+		flex-wrap: wrap;
+		gap: var(--semantics-page-sections-sm-gap);
+
+		@media (min-width: ${mdMin}) {
+			gap: var(--semantics-page-sections-md-gap);
+		}
+
+		@media (min-width: ${lgMin}) {
+			gap: var(--semantics-page-sections-lg-gap);
+		}
+
+		@container layout-area (min-width: ${mdMin}) {
+			gap: var(--semantics-page-sections-md-gap);
+		}
+
+		@container layout-area (min-width: ${lgMin}) {
+			gap: var(--semantics-page-sections-lg-gap);
+		}
+	}
+
+	.one-half-one-half-section__left-column {
+		flex: 1;
+		min-width: var(--primitives-area-280);
+	}
+
+	.one-half-one-half-section__right-column {
+		flex: 1;
+		min-width: var(--primitives-area-280);
+	}
+`;
+//# sourceMappingURL=one-half-one-half-section.styles.js.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,4 @@
+import { TemplateResult } from 'lit';
+import type { NLDDOneHalfOneHalfSection } from './one-half-one-half-section.js';
+export declare function oneHalfOneHalfSectionTemplate(_component: NLDDOneHalfOneHalfSection): TemplateResult;
+//# sourceMappingURL=one-half-one-half-section.template.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"one-half-one-half-section.template.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/one-half-one-half-section/one-half-one-half-section.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,cAAc,EAAE,MAAM,KAAK,CAAC;AAC3C,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,gCAAgC,CAAC;AAEhF,wBAAgB,6BAA6B,CAAC,UAAU,EAAE,yBAAyB,GAAG,cAAc,CAkBnG"}

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

@@ -0,0 +1,21 @@
+import { html } from 'lit';
+export function oneHalfOneHalfSectionTemplate(_component) {
+    return html `
+		<section class="one-half-one-half-section">
+			<div class="one-half-one-half-section__body">
+				<slot name="header"></slot>
+				<div class="one-half-one-half-section__columns">
+					<div class="one-half-one-half-section__left-column">
+						<slot></slot>
+						<slot name="left"></slot>
+					</div>
+					<div class="one-half-one-half-section__right-column">
+						<slot name="right"></slot>
+					</div>
+				</div>
+				<slot name="footer"></slot>
+			</div>
+		</section>
+	`;
+}
+//# sourceMappingURL=one-half-one-half-section.template.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"one-half-one-half-section.template.js","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/one-half-one-half-section/one-half-one-half-section.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAC;AAG3C,MAAM,UAAU,6BAA6B,CAAC,UAAqC;IAClF,OAAO,IAAI,CAAA;;;;;;;;;;;;;;;;EAgBV,CAAC;AACH,CAAC"}

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

@@ -0,0 +1,26 @@
+/**
+ * Nederlandse Digitale Dienst One Third Two Thirds Section Component (Lit + TypeScript)
+ *
+ * A section with a 1/3 sidebar on the left and 2/3 main content on the right.
+ * The columns wrap automatically when they become smaller than 280px.
+ * Padding and gap adjust via container queries.
+ *
+ * @element nldd-one-third-two-thirds-section
+ *
+ * @slot header - Content above the columns
+ * @slot left - Left column (1/3)
+ * @slot - Right column (2/3), alternative for slot="right"
+ * @slot right - Right column (2/3)
+ * @slot footer - Content below the columns
+ */
+import { LitElement } from 'lit';
+export declare class NLDDOneThirdTwoThirdsSection extends LitElement {
+    static styles: import("lit").CSSResult;
+    render(): import("lit-html").TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nldd-one-third-two-thirds-section': NLDDOneThirdTwoThirdsSection;
+    }
+}
+//# sourceMappingURL=one-third-two-thirds-section.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,36 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/**
+ * Nederlandse Digitale Dienst One Third Two Thirds Section Component (Lit + TypeScript)
+ *
+ * A section with a 1/3 sidebar on the left and 2/3 main content on the right.
+ * The columns wrap automatically when they become smaller than 280px.
+ * Padding and gap adjust via container queries.
+ *
+ * @element nldd-one-third-two-thirds-section
+ *
+ * @slot header - Content above the columns
+ * @slot left - Left column (1/3)
+ * @slot - Right column (2/3), alternative for slot="right"
+ * @slot right - Right column (2/3)
+ * @slot footer - Content below the columns
+ */
+import { LitElement } from 'lit';
+import { customElement } 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 {
+    render() {
+        return oneThirdTwoThirdsSectionTemplate(this);
+    }
+};
+NLDDOneThirdTwoThirdsSection.styles = oneThirdTwoThirdsSectionStyles;
+NLDDOneThirdTwoThirdsSection = __decorate([
+    customElement('nldd-one-third-two-thirds-section')
+], NLDDOneThirdTwoThirdsSection);
+export { NLDDOneThirdTwoThirdsSection };
+//# sourceMappingURL=one-third-two-thirds-section.js.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,2 @@
+export declare const oneThirdTwoThirdsSectionStyles: import("lit").CSSResult;
+//# sourceMappingURL=one-third-two-thirds-section.styles.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,120 @@
+import { css, unsafeCSS } from 'lit';
+import { breakpoints } from '../../../../assets/styles/breakpoints.js';
+const mdMin = unsafeCSS(breakpoints.mdMin);
+const lgMin = unsafeCSS(breakpoints.lgMin);
+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. */
+
+	:host {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		width: 100%;
+	}
+
+	:host([hidden]) {
+		display: none;
+	}
+
+
+	/* # Block — sm = base; md/lg via @media (fallback) en
+	   @container layout-area (heeft voorrang binnen layout-area). */
+
+	.one-third-two-thirds-section {
+		display: flex;
+		flex-direction: column;
+		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}) {
+			padding-inline: var(--semantics-page-sections-md-margin-inline);
+			padding-block: var(--semantics-page-sections-md-margin-block);
+		}
+
+		@media (min-width: ${lgMin}) {
+			padding-inline: var(--semantics-page-sections-lg-margin-inline);
+			padding-block: var(--semantics-page-sections-lg-margin-block);
+		}
+
+		@container layout-area (min-width: ${mdMin}) {
+			padding-inline: var(--semantics-page-sections-md-margin-inline);
+			padding-block: var(--semantics-page-sections-md-margin-block);
+		}
+
+		@container layout-area (min-width: ${lgMin}) {
+			padding-inline: var(--semantics-page-sections-lg-margin-inline);
+			padding-block: var(--semantics-page-sections-lg-margin-block);
+		}
+	}
+
+
+	/* # Body */
+
+	.one-third-two-thirds-section__body {
+		display: flex;
+		flex-direction: column;
+		width: 100%;
+		max-width: var(--semantics-page-sections-body-max-width);
+		gap: var(--semantics-page-sections-sm-gap);
+
+		@media (min-width: ${mdMin}) {
+			gap: var(--semantics-page-sections-md-gap);
+		}
+
+		@media (min-width: ${lgMin}) {
+			gap: var(--semantics-page-sections-lg-gap);
+		}
+
+		@container layout-area (min-width: ${mdMin}) {
+			gap: var(--semantics-page-sections-md-gap);
+		}
+
+		@container layout-area (min-width: ${lgMin}) {
+			gap: var(--semantics-page-sections-lg-gap);
+		}
+	}
+
+
+	/* # Columns */
+
+	.one-third-two-thirds-section__columns {
+		display: flex;
+		flex-wrap: wrap;
+		gap: var(--semantics-page-sections-sm-gap);
+
+		@media (min-width: ${mdMin}) {
+			gap: var(--semantics-page-sections-md-gap);
+		}
+
+		@media (min-width: ${lgMin}) {
+			gap: var(--semantics-page-sections-lg-gap);
+		}
+
+		@container layout-area (min-width: ${mdMin}) {
+			gap: var(--semantics-page-sections-md-gap);
+		}
+
+		@container layout-area (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);
+	}
+
+	.one-third-two-thirds-section__right-column {
+		flex: 2;
+		min-width: var(--primitives-area-280);
+	}
+`;
+//# 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

@@ -0,0 +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;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;;;;;;;;;;;;;;CAc3C,CAAC"}

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

@@ -0,0 +1,4 @@
+import { TemplateResult } from 'lit';
+import type { NLDDOneThirdTwoThirdsSection } from './one-third-two-thirds-section.js';
+export declare function oneThirdTwoThirdsSectionTemplate(_component: NLDDOneThirdTwoThirdsSection): TemplateResult;
+//# sourceMappingURL=one-third-two-thirds-section.template.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"one-third-two-thirds-section.template.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/one-third-two-thirds-section/one-third-two-thirds-section.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,cAAc,EAAE,MAAM,KAAK,CAAC;AAC3C,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,mCAAmC,CAAC;AAEtF,wBAAgB,gCAAgC,CAAC,UAAU,EAAE,4BAA4B,GAAG,cAAc,CAkBzG"}

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

@@ -0,0 +1,21 @@
+import { html } from 'lit';
+export function oneThirdTwoThirdsSectionTemplate(_component) {
+    return html `
+		<section class="one-third-two-thirds-section">
+			<div class="one-third-two-thirds-section__body">
+				<slot name="header"></slot>
+				<div class="one-third-two-thirds-section__columns">
+					<div class="one-third-two-thirds-section__left-column">
+						<slot name="left"></slot>
+					</div>
+					<div class="one-third-two-thirds-section__right-column">
+						<slot></slot>
+						<slot name="right"></slot>
+					</div>
+				</div>
+				<slot name="footer"></slot>
+			</div>
+		</section>
+	`;
+}
+//# sourceMappingURL=one-third-two-thirds-section.template.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"one-third-two-thirds-section.template.js","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/one-third-two-thirds-section/one-third-two-thirds-section.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAC;AAG3C,MAAM,UAAU,gCAAgC,CAAC,UAAwC;IACxF,OAAO,IAAI,CAAA;;;;;;;;;;;;;;;;EAgBV,CAAC;AACH,CAAC"}

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

@@ -0,0 +1,28 @@
+/**
+ * Nederlandse Digitale Dienst Simple Section Component (Lit + TypeScript)
+ *
+ * A basic section with responsive padding and gap based on container size.
+ * Contains optional header and footer slots. The padding and spacing between
+ * slots adjust automatically via container queries.
+ *
+ * @element nldd-simple-section
+ *
+ * @slot header - Content above the main content
+ * @slot - Main content
+ * @slot footer - Content below the main content
+ *
+ * @attr {string} [align] - Set to "center" to vertically center section content
+ */
+import { LitElement } from 'lit';
+export declare class NLDDSimpleSection extends LitElement {
+    static styles: import("lit").CSSResult;
+    align?: string;
+    _onSlotChange(e: Event): void;
+    render(): import("lit-html").TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nldd-simple-section': NLDDSimpleSection;
+    }
+}
+//# sourceMappingURL=simple-section.d.ts.map