@nldd/design-system 0.8.46 → 0.8.48

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

@@ -7,10 +7,12 @@ const lgMin = unsafeCSS(breakpoints.lgMin);
 export const containerStyles = css `
 
 
-	/* # Host */
+	/* # Host — outer chrome (padding + scheme + query container) */
 
 	:host {
+		--_min-column-width: var(--primitives-area-280);
 		--_justify-content: initial;
+		--_justify-items: initial;
 		--_align-items: initial;
 		--_gap: 0;
 		--_sm-gap: var(--_gap);
@@ -33,20 +35,15 @@ export const containerStyles = css `
 		--_lg-padding-bottom: var(--_padding-bottom);
 		--_lg-padding-left: var(--_padding-left);
 
-		display: flex;
+		container-type: inline-size;
+		display: block;
 		height: auto;
-		flex-direction: column;
-		flex-wrap: nowrap;
-		justify-content: var(--_justify-content);
-		align-items: var(--_align-items);
-		gap: var(--_gap);
 		padding-top: var(--_padding-top);
 		padding-right: var(--_padding-right);
 		padding-bottom: var(--_padding-bottom);
 		padding-left: var(--_padding-left);
 
 		@media (max-width: ${smMax}) {
-			gap: var(--_sm-gap);
 			padding-top: var(--_sm-padding-top);
 			padding-right: var(--_sm-padding-right);
 			padding-bottom: var(--_sm-padding-bottom);
@@ -54,7 +51,6 @@ export const containerStyles = css `
 		}
 
 		@media (min-width: ${mdMin}) and (max-width: ${mdMax}) {
-			gap: var(--_md-gap);
 			padding-top: var(--_md-padding-top);
 			padding-right: var(--_md-padding-right);
 			padding-bottom: var(--_md-padding-bottom);
@@ -62,7 +58,6 @@ export const containerStyles = css `
 		}
 
 		@media (min-width: ${lgMin}) {
-			gap: var(--_lg-gap);
 			padding-top: var(--_lg-padding-top);
 			padding-right: var(--_lg-padding-right);
 			padding-bottom: var(--_lg-padding-bottom);
@@ -70,7 +65,6 @@ export const containerStyles = css `
 		}
 
 		@container layout-container (max-width: ${smMax}) {
-			gap: var(--_sm-gap);
 			padding-top: var(--_sm-padding-top);
 			padding-right: var(--_sm-padding-right);
 			padding-bottom: var(--_sm-padding-bottom);
@@ -78,7 +72,6 @@ export const containerStyles = css `
 		}
 
 		@container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) {
-			gap: var(--_md-gap);
 			padding-top: var(--_md-padding-top);
 			padding-right: var(--_md-padding-right);
 			padding-bottom: var(--_md-padding-bottom);
@@ -86,7 +79,6 @@ export const containerStyles = css `
 		}
 
 		@container layout-container (min-width: ${lgMin}) {
-			gap: var(--_lg-gap);
 			padding-top: var(--_lg-padding-top);
 			padding-right: var(--_lg-padding-right);
 			padding-bottom: var(--_lg-padding-bottom);
@@ -98,12 +90,266 @@ export const containerStyles = css `
 		display: none;
 	}
 
-	:host([direction="row"]) {
+
+	/* # Inner — actual layout */
+
+	.container {
+		display: flex;
+		flex-direction: column;
+		flex-wrap: nowrap;
+		justify-content: var(--_justify-content);
+		justify-items: var(--_justify-items);
+		align-items: var(--_align-items);
+		gap: var(--_gap);
+
+		@media (max-width: ${smMax}) { gap: var(--_sm-gap); }
+		@media (min-width: ${mdMin}) and (max-width: ${mdMax}) { gap: var(--_md-gap); }
+		@media (min-width: ${lgMin}) { gap: var(--_lg-gap); }
+
+		@container layout-container (max-width: ${smMax}) { gap: var(--_sm-gap); }
+		@container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) { gap: var(--_md-gap); }
+		@container layout-container (min-width: ${lgMin}) { gap: var(--_lg-gap); }
+	}
+
+	:host([layout="row"]) .container {
 		flex-direction: row;
 	}
 
-	:host([wrap]) {
+	:host([layout="wrap"]) .container {
+		flex-direction: row;
 		flex-wrap: wrap;
 	}
+
+	:host([layout="grid"]) .container {
+		display: grid;
+		grid-template-columns: repeat(
+			var(--_column-count, auto-fit),
+			minmax(var(--_track-min, var(--_min-column-width)), 1fr)
+		);
+	}
+
+	:host([layout="columns"]) .container {
+		display: block;
+		columns: var(--_min-column-width);
+		column-gap: var(--_gap);
+	}
+
+	:host([layout="columns"]) ::slotted(*) {
+		break-inside: avoid;
+	}
+
+	:host([layout="columns"][column-count]) .container,
+	:host([layout="columns"][sm-column-count]) .container,
+	:host([layout="columns"][md-column-count]) .container,
+	:host([layout="columns"][lg-column-count]) .container {
+		column-count: var(--_column-count);
+		column-width: auto;
+	}
+
+
+	/* # Column count — base scope */
+
+	:host([column-count="1"]) .container { --_column-count: 1; }
+	:host([column-count="2"]) .container { --_column-count: 2; }
+	:host([column-count="3"]) .container { --_column-count: 3; }
+	:host([column-count="4"]) .container { --_column-count: 4; }
+	:host([column-count="5"]) .container { --_column-count: 5; }
+	:host([column-count="6"]) .container { --_column-count: 6; }
+	:host([column-count="7"]) .container { --_column-count: 7; }
+	:host([column-count="8"]) .container { --_column-count: 8; }
+	:host([column-count]) .container { --_track-min: 0; }
+
+
+	/* # Column count — sm scope (queries :host own width) */
+
+	@container (max-width: ${smMax}) {
+		:host([sm-column-count="1"]) .container { --_column-count: 1; }
+		:host([sm-column-count="2"]) .container { --_column-count: 2; }
+		:host([sm-column-count="3"]) .container { --_column-count: 3; }
+		:host([sm-column-count="4"]) .container { --_column-count: 4; }
+		:host([sm-column-count="5"]) .container { --_column-count: 5; }
+		:host([sm-column-count="6"]) .container { --_column-count: 6; }
+		:host([sm-column-count="7"]) .container { --_column-count: 7; }
+		:host([sm-column-count="8"]) .container { --_column-count: 8; }
+		:host([sm-column-count]) .container { --_track-min: 0; }
+	}
+
+
+	/* # Column count — md scope */
+
+	@container (min-width: ${mdMin}) and (max-width: ${mdMax}) {
+		:host([md-column-count="1"]) .container { --_column-count: 1; }
+		:host([md-column-count="2"]) .container { --_column-count: 2; }
+		:host([md-column-count="3"]) .container { --_column-count: 3; }
+		:host([md-column-count="4"]) .container { --_column-count: 4; }
+		:host([md-column-count="5"]) .container { --_column-count: 5; }
+		:host([md-column-count="6"]) .container { --_column-count: 6; }
+		:host([md-column-count="7"]) .container { --_column-count: 7; }
+		:host([md-column-count="8"]) .container { --_column-count: 8; }
+		:host([md-column-count]) .container { --_track-min: 0; }
+	}
+
+
+	/* # Column count — lg scope */
+
+	@container (min-width: ${lgMin}) {
+		:host([lg-column-count="1"]) .container { --_column-count: 1; }
+		:host([lg-column-count="2"]) .container { --_column-count: 2; }
+		:host([lg-column-count="3"]) .container { --_column-count: 3; }
+		:host([lg-column-count="4"]) .container { --_column-count: 4; }
+		:host([lg-column-count="5"]) .container { --_column-count: 5; }
+		:host([lg-column-count="6"]) .container { --_column-count: 6; }
+		:host([lg-column-count="7"]) .container { --_column-count: 7; }
+		:host([lg-column-count="8"]) .container { --_column-count: 8; }
+		:host([lg-column-count]) .container { --_track-min: 0; }
+	}
+
+
+	/* # Reverse — base (applies at all breakpoints) */
+
+	:host([reverse]:not([layout])) .container,
+	:host([reverse][layout="stack"]) .container {
+		flex-direction: column-reverse;
+	}
+
+	:host([reverse][layout="row"]) .container {
+		flex-direction: row-reverse;
+	}
+
+	:host([reverse][layout="wrap"]) .container {
+		flex-direction: row-reverse;
+		flex-wrap: wrap-reverse;
+	}
+
+	/* Grid + reverse: fall back to flex so the 2D order truly reverses.
+	   Trade-off: last row no longer aligns to grid track. */
+	:host([reverse][layout="grid"]) .container {
+		display: flex;
+		flex-direction: row-reverse;
+		flex-wrap: wrap-reverse;
+	}
+	:host([reverse][layout="grid"]) ::slotted(*) {
+		flex-grow: 1;
+		flex-shrink: 1;
+		flex-basis: var(--_min-column-width);
+		min-width: 0;
+	}
+	:host([reverse][layout="grid"][column-count]) ::slotted(*) {
+		flex-basis: calc((100% - (var(--_column-count) - 1) * var(--_gap)) / var(--_column-count));
+	}
+
+	/* layout="columns" + reverse: intentional no-op (multicol has no
+	   item-order hook). */
+
+
+	/* # Reverse — sm scope */
+
+	@media (max-width: ${smMax}) {
+		:host([sm-reverse]:not([layout])) .container,
+		:host([sm-reverse][layout="stack"]) .container { flex-direction: column-reverse; }
+		:host([sm-reverse][layout="row"]) .container { flex-direction: row-reverse; }
+		:host([sm-reverse][layout="wrap"]) .container { flex-direction: row-reverse; flex-wrap: wrap-reverse; }
+		:host([sm-reverse][layout="grid"]) .container { display: flex; flex-direction: row-reverse; flex-wrap: wrap-reverse; }
+		:host([sm-reverse][layout="grid"]) ::slotted(*) {
+			flex-grow: 1;
+			flex-shrink: 1;
+			flex-basis: var(--_min-column-width);
+			min-width: 0;
+		}
+		:host([sm-reverse][layout="grid"][column-count]) ::slotted(*) {
+			flex-basis: calc((100% - (var(--_column-count) - 1) * var(--_gap)) / var(--_column-count));
+		}
+	}
+
+	@container layout-container (max-width: ${smMax}) {
+		:host([sm-reverse]:not([layout])) .container,
+		:host([sm-reverse][layout="stack"]) .container { flex-direction: column-reverse; }
+		:host([sm-reverse][layout="row"]) .container { flex-direction: row-reverse; }
+		:host([sm-reverse][layout="wrap"]) .container { flex-direction: row-reverse; flex-wrap: wrap-reverse; }
+		:host([sm-reverse][layout="grid"]) .container { display: flex; flex-direction: row-reverse; flex-wrap: wrap-reverse; }
+		:host([sm-reverse][layout="grid"]) ::slotted(*) {
+			flex-grow: 1;
+			flex-shrink: 1;
+			flex-basis: var(--_min-column-width);
+			min-width: 0;
+		}
+		:host([sm-reverse][layout="grid"][column-count]) ::slotted(*) {
+			flex-basis: calc((100% - (var(--_column-count) - 1) * var(--_gap)) / var(--_column-count));
+		}
+	}
+
+
+	/* # Reverse — md scope */
+
+	@media (min-width: ${mdMin}) and (max-width: ${mdMax}) {
+		:host([md-reverse]:not([layout])) .container,
+		:host([md-reverse][layout="stack"]) .container { flex-direction: column-reverse; }
+		:host([md-reverse][layout="row"]) .container { flex-direction: row-reverse; }
+		:host([md-reverse][layout="wrap"]) .container { flex-direction: row-reverse; flex-wrap: wrap-reverse; }
+		:host([md-reverse][layout="grid"]) .container { display: flex; flex-direction: row-reverse; flex-wrap: wrap-reverse; }
+		:host([md-reverse][layout="grid"]) ::slotted(*) {
+			flex-grow: 1;
+			flex-shrink: 1;
+			flex-basis: var(--_min-column-width);
+			min-width: 0;
+		}
+		:host([md-reverse][layout="grid"][column-count]) ::slotted(*) {
+			flex-basis: calc((100% - (var(--_column-count) - 1) * var(--_gap)) / var(--_column-count));
+		}
+	}
+
+	@container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) {
+		:host([md-reverse]:not([layout])) .container,
+		:host([md-reverse][layout="stack"]) .container { flex-direction: column-reverse; }
+		:host([md-reverse][layout="row"]) .container { flex-direction: row-reverse; }
+		:host([md-reverse][layout="wrap"]) .container { flex-direction: row-reverse; flex-wrap: wrap-reverse; }
+		:host([md-reverse][layout="grid"]) .container { display: flex; flex-direction: row-reverse; flex-wrap: wrap-reverse; }
+		:host([md-reverse][layout="grid"]) ::slotted(*) {
+			flex-grow: 1;
+			flex-shrink: 1;
+			flex-basis: var(--_min-column-width);
+			min-width: 0;
+		}
+		:host([md-reverse][layout="grid"][column-count]) ::slotted(*) {
+			flex-basis: calc((100% - (var(--_column-count) - 1) * var(--_gap)) / var(--_column-count));
+		}
+	}
+
+
+	/* # Reverse — lg scope */
+
+	@media (min-width: ${lgMin}) {
+		:host([lg-reverse]:not([layout])) .container,
+		:host([lg-reverse][layout="stack"]) .container { flex-direction: column-reverse; }
+		:host([lg-reverse][layout="row"]) .container { flex-direction: row-reverse; }
+		:host([lg-reverse][layout="wrap"]) .container { flex-direction: row-reverse; flex-wrap: wrap-reverse; }
+		:host([lg-reverse][layout="grid"]) .container { display: flex; flex-direction: row-reverse; flex-wrap: wrap-reverse; }
+		:host([lg-reverse][layout="grid"]) ::slotted(*) {
+			flex-grow: 1;
+			flex-shrink: 1;
+			flex-basis: var(--_min-column-width);
+			min-width: 0;
+		}
+		:host([lg-reverse][layout="grid"][column-count]) ::slotted(*) {
+			flex-basis: calc((100% - (var(--_column-count) - 1) * var(--_gap)) / var(--_column-count));
+		}
+	}
+
+	@container layout-container (min-width: ${lgMin}) {
+		:host([lg-reverse]:not([layout])) .container,
+		:host([lg-reverse][layout="stack"]) .container { flex-direction: column-reverse; }
+		:host([lg-reverse][layout="row"]) .container { flex-direction: row-reverse; }
+		:host([lg-reverse][layout="wrap"]) .container { flex-direction: row-reverse; flex-wrap: wrap-reverse; }
+		:host([lg-reverse][layout="grid"]) .container { display: flex; flex-direction: row-reverse; flex-wrap: wrap-reverse; }
+		:host([lg-reverse][layout="grid"]) ::slotted(*) {
+			flex-grow: 1;
+			flex-shrink: 1;
+			flex-basis: var(--_min-column-width);
+			min-width: 0;
+		}
+		:host([lg-reverse][layout="grid"][column-count]) ::slotted(*) {
+			flex-basis: calc((100% - (var(--_column-count) - 1) * var(--_gap)) / var(--_column-count));
+		}
+	}
 `;
 //# sourceMappingURL=container.styles.js.map

package/dist/components/layout/container/container.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"container.styles.js","sourceRoot":"","sources":["../../../../src/components/layout/container/container.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,uCAAuC,CAAC;AAEpE,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,eAAe,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBAyCX,KAAK;;;;;;;;uBAQL,KAAK,qBAAqB,KAAK;;;;;;;;uBAQ/B,KAAK;;;;;;;;4CAQgB,KAAK;;;;;;;;4CAQL,KAAK,qBAAqB,KAAK;;;;;;;;4CAQ/B,KAAK;;;;;;;;;;;;;;;;;;;;CAoBhD,CAAC"}
+{"version":3,"file":"container.styles.js","sourceRoot":"","sources":["../../../../src/components/layout/container/container.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,uCAAuC,CAAC;AAEpE,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,eAAe,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBAuCX,KAAK;;;;;;;uBAOL,KAAK,qBAAqB,KAAK;;;;;;;uBAO/B,KAAK;;;;;;;4CAOgB,KAAK;;;;;;;4CAOL,KAAK,qBAAqB,KAAK;;;;;;;4CAO/B,KAAK;;;;;;;;;;;;;;;;;;;;;;;;uBAwB1B,KAAK;uBACL,KAAK,qBAAqB,KAAK;uBAC/B,KAAK;;4CAEgB,KAAK;4CACL,KAAK,qBAAqB,KAAK;4CAC/B,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0BAsDvB,KAAK;;;;;;;;;;;;;;;0BAeL,KAAK,qBAAqB,KAAK;;;;;;;;;;;;;;;0BAe/B,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBAoDT,KAAK;;;;;;;;;;;;;;;;;2CAiBgB,KAAK;;;;;;;;;;;;;;;;;;;;sBAoB1B,KAAK,qBAAqB,KAAK;;;;;;;;;;;;;;;;;2CAiBV,KAAK,qBAAqB,KAAK;;;;;;;;;;;;;;;;;;;;sBAoBpD,KAAK;;;;;;;;;;;;;;;;;2CAiBgB,KAAK;;;;;;;;;;;;;;;;CAgB/C,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"container.template.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/container/container.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,cAAc,EAAE,MAAM,KAAK,CAAC;AAC3C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAEpD,wBAAgB,iBAAiB,CAAC,UAAU,EAAE,aAAa,GAAG,cAAc,CAE3E"}
+{"version":3,"file":"container.template.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/container/container.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,cAAc,EAAE,MAAM,KAAK,CAAC;AAC3C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAEpD,wBAAgB,iBAAiB,CAAC,UAAU,EAAE,aAAa,GAAG,cAAc,CAM3E"}

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

@@ -1,5 +1,9 @@
 import { html } from 'lit';
 export function containerTemplate(_component) {
-    return html `<slot></slot>`;
+    // Inner .container holds the layout (display, grid, flex, columns). The
+    // :host stays the padding wrapper + the query container (container-type:
+    // inline-size). CSS spec forbids an element from matching its own
+    // container queries, so the layout rules live on a descendant of :host.
+    return html `<div class="container"><slot></slot></div>`;
 }
 //# sourceMappingURL=container.template.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"container.template.js","sourceRoot":"","sources":["../../../../src/components/layout/container/container.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAC;AAG3C,MAAM,UAAU,iBAAiB,CAAC,UAAyB;IAC1D,OAAO,IAAI,CAAA,eAAe,CAAC;AAC5B,CAAC"}
+{"version":3,"file":"container.template.js","sourceRoot":"","sources":["../../../../src/components/layout/container/container.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAC;AAG3C,MAAM,UAAU,iBAAiB,CAAC,UAAyB;IAC1D,wEAAwE;IACxE,yEAAyE;IACzE,kEAAkE;IAClE,wEAAwE;IACxE,OAAO,IAAI,CAAA,4CAA4C,CAAC;AACzD,CAAC"}

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

@@ -11,7 +11,7 @@
  *
  * @attr {boolean} sticky-header - Sticky header
  * @attr {boolean} sticky-footer - Sticky footer
- * @attr {'inherit'|'default'|'tinted'} background - Use a grey background instead of white
+ * @attr {'inherit'|'base'|'tinted'} background - Use a grey background instead of white
  *
  * @slot header - Header content
  * @slot - Main content (scrollable)
@@ -22,7 +22,7 @@ export declare class NLDDPage extends LitElement {
     static styles: import("lit").CSSResult;
     stickyHeader: boolean;
     stickyFooter: boolean;
-    background: 'inherit' | 'default' | 'tinted';
+    background: 'inherit' | 'base' | 'tinted';
     _scrolled: boolean;
     private _scrollTarget;
     private _headerObserver;

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

@@ -1 +1 @@
-{"version":3,"file":"page.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/page/page.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AACH,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAKjD,qBACa,QAAS,SAAQ,UAAU;IACvC,OAAgB,MAAM,0BAAc;IAGpC,YAAY,UAAS;IAGrB,YAAY,UAAS;IAGrB,UAAU,EAAE,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAa;IAGzD,SAAS,UAAS;IAElB,OAAO,CAAC,aAAa,CAA4B;IACjD,OAAO,CAAC,eAAe,CAA+B;IACtD,OAAO,CAAC,SAAS,CAAgC;IAEjD,IAAI,YAAY,IAAI,WAAW,CAE9B;IAED,OAAO,KAAK,SAAS,GAEpB;IAED,OAAO,KAAK,SAAS,GAEpB;IAEQ,iBAAiB;IAejB,oBAAoB;IAOpB,YAAY;IAMZ,OAAO,CAAC,OAAO,EAAE,cAAc;IAcxC,OAAO,CAAC,oBAAoB;IAO5B,OAAO,CAAC,uBAAuB;IAO/B,OAAO,CAAC,oBAAoB;IAa5B,OAAO,CAAC,uBAAuB;IAO/B,OAAO,CAAC,SAAS,CAGf;IAOF,OAAO,CAAC,sBAAsB;IAS9B,OAAO,CAAC,yBAAyB;IAOjC,OAAO,CAAC,gBAAgB,CAOtB;IAEO,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,WAAW,EAAE,QAAQ,CAAC;KACtB;CACD"}
+{"version":3,"file":"page.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/page/page.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AACH,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAKjD,qBACa,QAAS,SAAQ,UAAU;IACvC,OAAgB,MAAM,0BAAc;IAGpC,YAAY,UAAS;IAGrB,YAAY,UAAS;IAGrB,UAAU,EAAE,SAAS,GAAG,MAAM,GAAG,QAAQ,CAAa;IAGtD,SAAS,UAAS;IAElB,OAAO,CAAC,aAAa,CAA4B;IACjD,OAAO,CAAC,eAAe,CAA+B;IACtD,OAAO,CAAC,SAAS,CAAgC;IAEjD,IAAI,YAAY,IAAI,WAAW,CAE9B;IAED,OAAO,KAAK,SAAS,GAEpB;IAED,OAAO,KAAK,SAAS,GAEpB;IAEQ,iBAAiB;IAejB,oBAAoB;IAOpB,YAAY;IAMZ,OAAO,CAAC,OAAO,EAAE,cAAc;IAcxC,OAAO,CAAC,oBAAoB;IAO5B,OAAO,CAAC,uBAAuB;IAO/B,OAAO,CAAC,oBAAoB;IAa5B,OAAO,CAAC,uBAAuB;IAO/B,OAAO,CAAC,SAAS,CAGf;IAOF,OAAO,CAAC,sBAAsB;IAS9B,OAAO,CAAC,yBAAyB;IAOjC,OAAO,CAAC,gBAAgB,CAOtB;IAEO,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,WAAW,EAAE,QAAQ,CAAC;KACtB;CACD"}

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

@@ -17,7 +17,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
  *
  * @attr {boolean} sticky-header - Sticky header
  * @attr {boolean} sticky-footer - Sticky footer
- * @attr {'inherit'|'default'|'tinted'} background - Use a grey background instead of white
+ * @attr {'inherit'|'base'|'tinted'} background - Use a grey background instead of white
  *
  * @slot header - Header content
  * @slot - Main content (scrollable)

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

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

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

@@ -24,7 +24,7 @@ export const pageStyles = css `
 		display: none;
 	}
 
-	:host([background="default"]) {
+	:host([background="base"]) {
 		--context-parent-background-color: var(--semantics-surfaces-background-color);
 		--_background-color: var(--context-parent-background-color);
 	}

package/dist/components/layout/page-footer/page-footer.d.ts

@@ -0,0 +1,84 @@
+/**
+ * Nederlandse Digitale Dienst Page Footer Component (Lit + TypeScript)
+ *
+ * The footer band at the bottom of a page. Hosts three optional rows in a
+ * fixed order: breadcrumbs (top), consumer-defined main content (middle),
+ * and a legal-bar (bottom). Dividers are drawn automatically between
+ * non-empty rows. Establishes its own container query
+ * (`page-footer-container`) so the responsive padding and gap react to the
+ * footer's own width, not the viewport.
+ *
+ * The host has `id="page-footer"` so a skip-link can target it directly.
+ *
+ * Use the sub-components `nldd-page-footer-legal-bar` and
+ * `nldd-page-footer-legal-bar-item` for the bottom row.
+ *
+ * @element nldd-page-footer
+ *
+ * @slot breadcrumbs - `nldd-breadcrumbs` for the top row.
+ * @slot             - Main footer content (typically a container with a grid
+ *                     of link columns).
+ * @slot legal-bar   - `nldd-page-footer-legal-bar` for the bottom row.
+ */
+import { LitElement, type PropertyValues } from 'lit';
+import { type NLDDPageFooterTranslations } from './page-footer.i18n.js';
+/**
+ * A single entry in an `nldd-page-footer-legal-bar`. Renders as a link
+ * when `href` is set, as plain text otherwise. Uses the content color
+ * (not the link color) so the legal bar reads as a subdued utility row.
+ *
+ * @attr {string} href - Link target. When omitted, the item renders as plain text.
+ * @attr {string} text - Item label. Falls back to the default slot.
+ *
+ * @slot - Item label (alternative to `text`).
+ */
+export declare class NLDDPageFooterLegalBarItem extends LitElement {
+    static styles: import("lit").CSSResult;
+    href?: string;
+    text: string;
+    render(): import("lit-html").TemplateResult;
+}
+/**
+ * Holds the legal links row at the bottom of a `nldd-page-footer`. Items
+ * in `start` render flush-left, items in `end` flush-right, separated by
+ * spacing only (no separators). On narrow containers the two groups wrap
+ * to their own rows with `start` above `end`.
+ *
+ * @attr {string} accessible-label - Override the nav's aria-label.
+ *                                   Defaults to the i18n value (NL: "Juridische links").
+ * @attr {object} translations     - Override translation keys; unset keys
+ *                                   fall back to the Dutch default.
+ *
+ * @slot start - Items rendered flush-left (e.g. © notice, version).
+ * @slot end   - Items rendered flush-right (e.g. privacy, accessibility).
+ */
+export declare class NLDDPageFooterLegalBar extends LitElement {
+    static styles: import("lit").CSSResult;
+    accessibleLabel: string;
+    translations: Partial<NLDDPageFooterTranslations>;
+    _hasStart: boolean;
+    _hasEnd: boolean;
+    private _mergedTranslations;
+    willUpdate(changed: PropertyValues): void;
+    _t(key: keyof NLDDPageFooterTranslations): string;
+    _onSlotChange: (e: Event) => void;
+    render(): import("lit-html").TemplateResult;
+}
+export declare class NLDDPageFooter extends LitElement {
+    static styles: import("lit").CSSResult;
+    _hasBreadcrumbs: boolean;
+    _hasMain: boolean;
+    _hasLegalBar: boolean;
+    connectedCallback(): void;
+    _hasMeaningfulContent(slot: HTMLSlotElement | null): boolean;
+    _onSlotChange: (e: Event) => void;
+    render(): import("lit-html").TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nldd-page-footer': NLDDPageFooter;
+        'nldd-page-footer-legal-bar': NLDDPageFooterLegalBar;
+        'nldd-page-footer-legal-bar-item': NLDDPageFooterLegalBarItem;
+    }
+}
+//# sourceMappingURL=page-footer.d.ts.map

package/dist/components/layout/page-footer/page-footer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-footer.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/page-footer/page-footer.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,OAAO,EAAE,UAAU,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAYtD,OAAO,EAA8B,KAAK,0BAA0B,EAAE,MAAM,uBAAuB,CAAC;AAKpG;;;;;;;;;GASG;AACH,qBAAa,0BAA2B,SAAQ,UAAU;IACzD,OAAgB,MAAM,0BAAgC;IAGtD,IAAI,CAAC,EAAE,MAAM,CAAC;IAGd,IAAI,SAAM;IAED,MAAM;CAGf;AAcD;;;;;;;;;;;;;GAaG;AACH,qBAAa,sBAAuB,SAAQ,UAAU;IACrD,OAAgB,MAAM,0BAA4B;IAGlD,eAAe,SAAM;IAGrB,YAAY,EAAE,OAAO,CAAC,0BAA0B,CAAC,CAAM;IAGvD,SAAS,UAAS;IAGlB,OAAO,UAAS;IAEhB,OAAO,CAAC,mBAAmB,CAAiE;IAEnF,UAAU,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAYlD,EAAE,CAAC,GAAG,EAAE,MAAM,0BAA0B,GAAG,MAAM;IAWjD,aAAa,GAAI,GAAG,KAAK,UAMvB;IAEO,MAAM;CAGf;AAWD,qBACa,cAAe,SAAQ,UAAU;IAC7C,OAAgB,MAAM,0BAAoB;IAG1C,eAAe,UAAS;IAGxB,QAAQ,UAAS;IAGjB,YAAY,UAAS;IAEZ,iBAAiB,IAAI,IAAI;IA6BlC,qBAAqB,CAAC,IAAI,EAAE,eAAe,GAAG,IAAI,GAAG,OAAO;IAQ5D,aAAa,GAAI,GAAG,KAAK,UAYvB;IAEO,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,kBAAkB,EAAE,cAAc,CAAC;QACnC,4BAA4B,EAAE,sBAAsB,CAAC;QACrD,iCAAiC,EAAE,0BAA0B,CAAC;KAC9D;CACD"}

package/dist/components/layout/page-footer/page-footer.i18n.d.ts

@@ -0,0 +1,5 @@
+export declare const nlddPageFooterTranslations: {
+    'components.page-footer.legal-bar-accessible-label': string;
+};
+export type NLDDPageFooterTranslations = typeof nlddPageFooterTranslations;
+//# sourceMappingURL=page-footer.i18n.d.ts.map

package/dist/components/layout/page-footer/page-footer.i18n.d.ts.map

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

package/dist/components/layout/page-footer/page-footer.i18n.js

@@ -0,0 +1,4 @@
+export const nlddPageFooterTranslations = {
+    'components.page-footer.legal-bar-accessible-label': 'Juridische links',
+};
+//# sourceMappingURL=page-footer.i18n.js.map

package/dist/components/layout/page-footer/page-footer.i18n.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-footer.i18n.js","sourceRoot":"","sources":["../../../../src/components/layout/page-footer/page-footer.i18n.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,0BAA0B,GAAG;IACzC,mDAAmD,EAAE,kBAAkB;CACvE,CAAC"}