@nldd/design-system 0.8.43 → 0.8.44

package/dist/components/navigation/top-navigation-bar/top-navigation-bar.styles.js

@@ -1,5 +1,6 @@
 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);
@@ -10,26 +11,11 @@ export const topNavigationBarStyles = css `
 	/* # Host */
 
 	:host {
-		--_logo-width: var(--primitives-space-40);
 		--_wordmark-content-color: light-dark(var(--primitives-color-reference-lintblauw), var(--primitives-color-neutral-1000));
+		--_logo-width: var(--primitives-space-40);
+
 		display: block;
 		width: 100%;
-
-		@media (min-width: ${mdMin}) {
-			--_logo-width: var(--primitives-space-44);
-		}
-
-		@media (min-width: ${lgMin}) {
-			--_logo-width: var(--primitives-space-48);
-		}
-
-		@container layout-container (min-width: ${mdMin}) {
-			--_logo-width: var(--primitives-space-44);
-		}
-
-		@container layout-container (min-width: ${lgMin}) {
-			--_logo-width: var(--primitives-space-48);
-		}
 	}
 
 	:host([hidden]) {
@@ -41,12 +27,12 @@ export const topNavigationBarStyles = css `
 
 	.top-navigation-bar {
 		display: flex;
-		flex-direction: column;
-		width: 100%;
-		margin: 0 auto;
 		box-sizing: border-box;
 		container-type: inline-size;
-		container-name: top-navigation-bar;
+		container-name: top-navigation-bar-container;
+		margin: 0 auto;
+		width: 100%;
+		flex-direction: column;
 	}
 
 
@@ -57,21 +43,16 @@ export const topNavigationBarStyles = css `
 		grid-template-columns: 1fr auto 1fr;
 		gap: var(--primitives-space-8);
 		align-items: center;
-		padding-inline: var(--semantics-page-sections-sm-margin-inline);
 
-		@media (min-width: ${mdMin}) {
-			padding-inline: var(--semantics-page-sections-md-margin-inline);
-		}
-
-		@media (min-width: ${lgMin}) {
-			padding-inline: var(--semantics-page-sections-lg-margin-inline);
+		@container top-navigation-bar-container (max-width: ${smMax}) {
+			padding-inline: var(--semantics-page-sections-sm-margin-inline);
 		}
 
-		@container layout-container (min-width: ${mdMin}) {
+		@container top-navigation-bar-container (min-width: ${mdMin}) and (max-width: ${mdMax}) {
 			padding-inline: var(--semantics-page-sections-md-margin-inline);
 		}
 
-		@container layout-container (min-width: ${lgMin}) {
+		@container top-navigation-bar-container (min-width: ${lgMin}) {
 			padding-inline: var(--semantics-page-sections-lg-margin-inline);
 		}
 	}
@@ -79,13 +60,25 @@ export const topNavigationBarStyles = css `
 	/* ## Logo */
 
 	.top-navigation-bar__logo {
+		display: flex;
+		width: var(--_logo-width);
+		height: calc(var(--_logo-width) * 2);
 		grid-column: 2;
 		align-self: start;
-		display: flex;
 		align-items: center;
 		justify-content: center;
-		width: var(--_logo-width);
-		height: calc(var(--_logo-width) * 2);
+
+		@container top-navigation-bar-container (max-width: ${smMax}) {
+			--_logo-width: var(--primitives-space-40);
+		}
+
+		@container top-navigation-bar-container (min-width: ${mdMin}) and (max-width: ${mdMax}) {
+			--_logo-width: var(--primitives-space-44);
+		}
+
+		@container top-navigation-bar-container (min-width: ${lgMin}) {
+			--_logo-width: var(--primitives-space-48);
+		}
 	}
 
 	.top-navigation-bar__logo svg {
@@ -107,8 +100,8 @@ export const topNavigationBarStyles = css `
 	/* ## Logo and wordmark */
 
 	.top-navigation-bar__logo-and-wordmark {
-		grid-column: 2 / 4;
 		display: grid;
+		grid-column: 2 / 4;
 		grid-template-columns: subgrid;
 		align-items: center;
 	}
@@ -134,17 +127,17 @@ export const topNavigationBarStyles = css `
 	/* ## Wordmark */
 
 	.top-navigation-bar__wordmark {
-		grid-column: 3;
 		display: flex;
-		flex-direction: column;
 		min-height: calc(var(--_logo-width) * 2);
+		grid-column: 3;
+		flex-direction: column;
 		color: var(--_wordmark-content-color);
 	}
 
 	.top-navigation-bar__wordmark-spacer {
+		height: var(--_logo-width);
 		flex-grow: 0;
 		flex-shrink: 0;
-		height: var(--_logo-width);
 	}
 
 	.top-navigation-bar__wordmark-content {
@@ -156,18 +149,18 @@ export const topNavigationBarStyles = css `
 	}
 
 	.top-navigation-bar__wordmark-title {
-		font: var(--primitives-font-body-sm-bold-flat);
 		margin: 0;
+		font: var(--primitives-font-body-sm-bold-flat);
 	}
 
 	.top-navigation-bar__wordmark-subtitle {
-		font: var(--primitives-font-body-xs-regular-flat);
 		margin: 0;
+		font: var(--primitives-font-body-xs-regular-flat);
 	}
 
 	.top-navigation-bar__wordmark-supporting-text {
-		font: var(--primitives-font-body-xxs-regular-flat);
 		margin: 0;
+		font: var(--primitives-font-body-xxs-regular-flat);
 	}
 
 
@@ -175,26 +168,20 @@ export const topNavigationBarStyles = css `
 
 	.top-navigation-bar__main-bar {
 		display: flex;
-		flex-direction: column;
-		padding-inline: calc(var(--semantics-page-sections-sm-margin-inline) - var(--components-menu-bar-item-inline-padding));
 
-		@media (min-width: ${mdMin}) {
-			padding-inline: var(--semantics-page-sections-md-margin-inline);
+		@container top-navigation-bar-container (max-width: ${smMax}) {
+			padding-inline: var(--semantics-page-sections-sm-margin-inline);
+			flex-direction: column;
 		}
 
-		@media (min-width: ${lgMin}) {
-			padding-inline: var(--semantics-page-sections-lg-margin-inline);
-		}
-
-		@container layout-container (min-width: ${mdMin}) {
+		@container top-navigation-bar-container (min-width: ${mdMin}) and (max-width: ${mdMax}) {
 			padding-inline: var(--semantics-page-sections-md-margin-inline);
+			flex-direction: row;
+			align-items: center;
 		}
 
-		@container layout-container (min-width: ${lgMin}) {
+		@container top-navigation-bar-container (min-width: ${lgMin}) {
 			padding-inline: var(--semantics-page-sections-lg-margin-inline);
-		}
-
-		@container top-navigation-bar (min-width: ${mdMin}) {
 			flex-direction: row;
 			align-items: center;
 		}
@@ -204,13 +191,13 @@ export const topNavigationBarStyles = css `
 
 	.top-navigation-bar__website-title-bar {
 		display: flex;
+		padding: var(--primitives-space-4) var(--primitives-space-8);
 		align-items: center;
 		justify-content: center;
-		padding: var(--primitives-space-4) var(--primitives-space-8);
 
-		@container top-navigation-bar (min-width: ${mdMin}) {
-			justify-content: flex-start;
+		@container top-navigation-bar-container (min-width: ${mdMin}) {
 			padding: 0;
+			justify-content: flex-start;
 		}
 	}
 
@@ -221,7 +208,7 @@ export const topNavigationBarStyles = css `
 		color: var(--semantics-content-color);
 		white-space: nowrap;
 
-		@container top-navigation-bar (min-width: ${mdMin}) {
+		@container top-navigation-bar-container (min-width: ${mdMin}) {
 			font: var(--components-top-navigation-bar-title-md-font);
 			/* Create spacing between title and menu-bar on md+ where they sit
 			   on the same row. On sm the title-bar stacks above the menu-bar
@@ -229,14 +216,14 @@ export const topNavigationBarStyles = css `
 			margin-inline-end: var(--primitives-space-8);
 		}
 
-		@container top-navigation-bar (min-width: ${lgMin}) {
+		@container top-navigation-bar-container (min-width: ${lgMin}) {
 			font: var(--components-top-navigation-bar-title-lg-font);
 		}
 	}
 
 	a.top-navigation-bar__website-title {
-		text-decoration: none;
 		border-radius: var(--primitives-corner-radius-xxs);
+		text-decoration: none;
 	}
 
 	a.top-navigation-bar__website-title:focus-visible {
@@ -249,24 +236,24 @@ export const topNavigationBarStyles = css `
 
 	.top-navigation-bar__menu-bar {
 		display: flex;
+		min-width: 0;
 		align-items: center;
 		flex-grow: 1;
-		min-width: 0;
 	}
 
 	/* ## Menu bar start */
 
 	.top-navigation-bar__menu-bar-start {
 		display: flex;
-		align-items: center;
 		min-width: 0;
+		align-items: center;
 		flex-grow: 1;
 
-		@container top-navigation-bar (max-width: ${mdMax}) {
+		@container top-navigation-bar-container (max-width: ${mdMax}) {
 			flex-shrink: 0;
 		}
 
-		@container top-navigation-bar (min-width: ${lgMin}) {
+		@container top-navigation-bar-container (min-width: ${lgMin}) {
 			flex-shrink: 1;
 		}
 	}
@@ -275,14 +262,14 @@ export const topNavigationBarStyles = css `
 
 	.top-navigation-bar__menu-bar-end {
 		display: flex;
-		align-items: center;
 		min-width: 0;
+		align-items: center;
 
-		@container top-navigation-bar (max-width: ${mdMax}) {
+		@container top-navigation-bar-container (max-width: ${mdMax}) {
 			flex-shrink: 1;
 		}
 
-		@container top-navigation-bar (min-width: ${lgMin}) {
+		@container top-navigation-bar-container (min-width: ${lgMin}) {
 			flex-shrink: 0;
 		}
 	}
@@ -291,10 +278,10 @@ export const topNavigationBarStyles = css `
 
 	.top-navigation-bar__global-menu-bar {
 		display: none;
+		min-width: 0;
 		flex-grow: 1;
 		flex-shrink: 1;
-		min-width: 0;
-		@container top-navigation-bar (min-width: ${lgMin}) {
+		@container top-navigation-bar-container (min-width: ${lgMin}) {
 			:host(.has-global-items) & {
 				display: flex;
 			}
@@ -306,7 +293,7 @@ export const topNavigationBarStyles = css `
 	.top-navigation-bar__menu-button {
 		display: none;
 
-		@container top-navigation-bar (max-width: ${mdMax}) {
+		@container top-navigation-bar-container (max-width: ${mdMax}) {
 			:host(.has-global-items) & {
 				display: inline-block;
 			}
@@ -317,9 +304,9 @@ export const topNavigationBarStyles = css `
 
 	.top-navigation-bar__utility-menu-bar {
 		display: flex;
+		min-width: 0;
 		flex-grow: 1;
 		flex-shrink: 1;
-		min-width: 0;
 	}
 `;
 //# sourceMappingURL=top-navigation-bar.styles.js.map

package/dist/components/navigation/top-navigation-bar/top-navigation-bar.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"top-navigation-bar.styles.js","sourceRoot":"","sources":["../../../../src/components/navigation/top-navigation-bar/top-navigation-bar.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;AAE3C,8BAA8B;AAE9B,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAG,CAAA;;;;;;;;;;;uBAWlB,KAAK;;;;uBAIL,KAAK;;;;4CAIgB,KAAK;;;;4CAIL,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBAgC1B,KAAK;;;;uBAIL,KAAK;;;;4CAIgB,KAAK;;;;4CAIL,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBA2G1B,KAAK;;;;uBAIL,KAAK;;;;4CAIgB,KAAK;;;;4CAIL,KAAK;;;;8CAIH,KAAK;;;;;;;;;;;;;;8CAcL,KAAK;;;;;;;;;;;;;8CAaL,KAAK;;;;;;;;8CAQL,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;8CAiCL,KAAK;;;;8CAIL,KAAK;;;;;;;;;;;;8CAYL,KAAK;;;;8CAIL,KAAK;;;;;;;;;;;;8CAYL,KAAK;;;;;;;;;;;;8CAYL,KAAK;;;;;;;;;;;;;;;CAelD,CAAC"}
+{"version":3,"file":"top-navigation-bar.styles.js","sourceRoot":"","sources":["../../../../src/components/navigation/top-navigation-bar/top-navigation-bar.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,8BAA8B;AAE9B,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wDAuCe,KAAK;;;;wDAIL,KAAK,qBAAqB,KAAK;;;;wDAI/B,KAAK;;;;;;;;;;;;;;;;wDAgBL,KAAK;;;;wDAIL,KAAK,qBAAqB,KAAK;;;;wDAI/B,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wDA6FL,KAAK;;;;;wDAKL,KAAK,qBAAqB,KAAK;;;;;;wDAM/B,KAAK;;;;;;;;;;;;;;;wDAeL,KAAK;;;;;;;;;;;;;wDAaL,KAAK;;;;;;;;wDAQL,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wDAiCL,KAAK;;;;wDAIL,KAAK;;;;;;;;;;;;wDAYL,KAAK;;;;wDAIL,KAAK;;;;;;;;;;;;wDAYL,KAAK;;;;;;;;;;;;wDAYL,KAAK;;;;;;;;;;;;;;;CAe5D,CAAC"}

package/dist/components/navigation/top-title-bar/top-title-bar.styles.js

@@ -18,11 +18,11 @@ export const topTitleBarStyles = css `
 
 	.top-title-bar {
 		display: flex;
-		flex-direction: row;
-		align-items: center;
-		width: 100%;
 		box-sizing: border-box;
+		width: 100%;
 		padding-inline: var(--primitives-space-6);
+		flex-direction: row;
+		align-items: center;
 	}
 
 
@@ -30,12 +30,12 @@ export const topTitleBarStyles = css `
 
 	.top-title-bar__start {
 		display: flex;
+		min-width: 0;
 		flex-direction: row;
 		align-items: center;
 		flex-grow: 1;
 		flex-shrink: 1;
 		flex-basis: 0;
-		min-width: 0;
 	}
 
 
@@ -43,11 +43,11 @@ export const topTitleBarStyles = css `
 
 	.top-title-bar__end {
 		display: flex;
+		margin-top: var(--primitives-space-6);
 		flex-direction: row;
 		align-items: center;
 		flex-grow: 0;
 		flex-shrink: 0;
-		margin-top: var(--primitives-space-6);
 	}
 
 	.top-title-bar__end[hidden] {
@@ -59,10 +59,10 @@ export const topTitleBarStyles = css `
 
 	.top-title-bar__back-button {
 		display: var(--context-back-button-display, flex);
+		margin-top: var(--primitives-space-6);
+		min-width: 0;
 		flex-direction: row;
 		align-items: center;
-		min-width: 0;
-		margin-top: var(--primitives-space-6);
 	}
 
 	.top-title-bar__text-back-button {
@@ -90,9 +90,9 @@ export const topTitleBarStyles = css `
 
 	.top-title-bar__divider {
 		display: none;
+		background-color: var(--components-top-title-bar-divider-color);
 		width: var(--semantics-dividers-thickness);
 		height: var(--primitives-space-24);
-		background-color: var(--components-top-title-bar-divider-color);
 		flex-shrink: 0;
 	}
 
@@ -105,15 +105,15 @@ export const topTitleBarStyles = css `
 
 	.top-title-bar__title-group {
 		display: none;
+		margin-top: var(--primitives-space-6);
+		min-width: 0;
+		min-height: var(--semantics-controls-md-min-size);
+		overflow: hidden;
+		padding-inline: var(--primitives-space-10);
 		flex-direction: column;
 		justify-content: center;
 		flex-grow: 1;
 		flex-shrink: 1;
-		min-width: 0;
-		min-height: var(--semantics-controls-md-min-size);
-		margin-top: var(--primitives-space-6);
-		padding-inline: var(--primitives-space-10);
-		overflow: hidden;
 	}
 
 	:host(.is-compact) .top-title-bar__title-group {
@@ -122,9 +122,9 @@ export const topTitleBarStyles = css `
 
 	.top-title-bar__title {
 		margin: 0;
+		overflow: hidden;
 		font: var(--primitives-font-body-lg-bold-flat);
 		color: var(--semantics-content-color);
-		overflow: hidden;
 		text-overflow: ellipsis;
 		white-space: nowrap;
 	}
@@ -135,9 +135,9 @@ export const topTitleBarStyles = css `
 
 	.top-title-bar__subtitle {
 		margin: 0;
+		overflow: hidden;
 		font: var(--primitives-font-body-xxs-regular-flat);
 		color: var(--semantics-content-secondary-color);
-		overflow: hidden;
 		text-overflow: ellipsis;
 		white-space: nowrap;
 	}

package/dist/components/{prism-typescript-BlIir5CV.js → prism-typescript-D2EqsCqV.js}

@@ -1,4 +1,4 @@
-import { g as getDefaultExportFromCjs } from "./index-By2jYHEw.js";
+import { g as getDefaultExportFromCjs } from "./index-1v33GjGX.js";
 function _mergeNamespaces(n, m) {
   for (var i = 0; i < m.length; i++) {
     const e = m[i];

package/dist/components/status-and-feedback/badge/badge.styles.js

@@ -66,17 +66,17 @@ export const badgeStyles = css `
 
 	.badge {
 		display: inline-flex;
-		align-items: center;
-		justify-content: center;
 		box-sizing: border-box;
+		border-radius: var(--components-badge-corner-radius);
+		box-shadow: 0 0 0 1px var(--context-parent-background-color, var(--semantics-surfaces-background-color));
+		background-color: var(--_background-color);
 		min-width: var(--_height);
 		height: var(--_height);
 		padding: 0 var(--_inline-padding);
+		align-items: center;
+		justify-content: center;
 		gap: var(--_gap);
-		background-color: var(--_background-color);
 		color: var(--_content-color);
-		border-radius: var(--components-badge-corner-radius);
-		box-shadow: 0 0 0 1px var(--context-parent-background-color, var(--semantics-surfaces-background-color));
 		white-space: nowrap;
 		font: var(--_font);
 	}
@@ -99,11 +99,11 @@ export const badgeStyles = css `
 
 	.badge__icon {
 		display: inline-flex;
+		width: var(--_icon-size);
+		height: var(--_icon-size);
 		align-items: center;
 		justify-content: center;
 		flex-shrink: 0;
-		width: var(--_icon-size);
-		height: var(--_icon-size);
 	}
 
 	.badge__icon:has(+ .badge__text) {

package/dist/components/status-and-feedback/inline-dialog/inline-dialog.styles.js

@@ -37,11 +37,11 @@ export const inlineDialogStyles = css `
 
 	.inline-dialog__body {
 		display: flex;
+		box-sizing: border-box;
+		max-width: var(--primitives-area-480);
 		flex-direction: column;
 		align-items: center;
 		flex-grow: 1;
-		box-sizing: border-box;
-		max-width: var(--primitives-area-480);
 	}
 
 
@@ -49,12 +49,12 @@ export const inlineDialogStyles = css `
 
 	.inline-dialog__icon {
 		display: flex;
-		align-items: center;
-		justify-content: center;
 		width: var(--_icon-size);
 		height: var(--_icon-size);
-		color: var(--_icon-color);
+		align-items: center;
+		justify-content: center;
 		flex-shrink: 0;
+		color: var(--_icon-color);
 	}
 
 
@@ -62,9 +62,9 @@ export const inlineDialogStyles = css `
 
 	.inline-dialog__text {
 		margin: 0;
+		text-align: center;
 		font: var(--primitives-font-body-md-bold-tight);
 		color: var(--semantics-content-color);
-		text-align: center;
 		text-wrap: pretty;
 	}
 
@@ -78,9 +78,9 @@ export const inlineDialogStyles = css `
 
 	.inline-dialog__supporting-text {
 		margin: 0;
+		text-align: center;
 		font: var(--primitives-font-body-sm-regular-tight);
 		color: var(--semantics-content-color);
-		text-align: center;
 		text-wrap: pretty;
 	}
 

package/dist/components/status-and-feedback/modal-dialog/modal-dialog.styles.js

@@ -22,16 +22,16 @@ export const modalDialogStyles = css `
 	/* # Block */
 
 	.modal-dialog {
+		box-sizing: border-box;
 		border: none;
+		border-radius: var(--semantics-overlays-corner-radius);
+		box-shadow: var(--semantics-overlays-box-shadow);
+		outline: none;
+		background-color: var(--semantics-surfaces-background-color);
 		max-width: var(--primitives-area-480);
 		width: calc(100% - var(--primitives-space-16) * 2);
 		max-height: var(--_max-height);
 		overflow-y: auto;
-		background-color: var(--semantics-surfaces-background-color);
-		border-radius: var(--semantics-overlays-corner-radius);
-		box-shadow: var(--semantics-overlays-box-shadow);
-		box-sizing: border-box;
-		outline: none;
 
 		padding: var(--primitives-space-16);