@nldd/design-system 0.8.44 → 0.8.46

package/dist/components/content/tooltip/tooltip.styles.js

@@ -5,14 +5,14 @@ export const tooltipStyles = css `
 	/* # Host */
 
 	:host {
+		--_hide-duration: var(--primitives-transition-duration-fast);
+		--_show-duration: var(--primitives-transition-duration-fast);
+		--_max-width: var(--primitives-area-280);
 		--_z-index: 10000;
 		--_show-delay: 700ms;
-		--_show-duration: var(--primitives-transition-duration-fast);
 		--_hide-delay: 50; /* unitless ms, read by JavaScript */
-		--_hide-duration: var(--primitives-transition-duration-fast);
 		--_offset: 4; /* px, unitless — read by JS */
 		--_shift-padding: 8; /* px, unitless — read by JS */
-		--_max-width: var(--primitives-area-280);
 
 		display: contents;
 	}
@@ -51,12 +51,20 @@ export const tooltipStyles = css `
 		}
 	}
 
+	@media (prefers-reduced-motion: reduce) {
+		.tooltip,
+		.tooltip.is-visible,
+		.tooltip.is-focus-visible {
+			transition: none;
+		}
+	}
+
 
 	/* ## Tooltip body */
 
 	.tooltip__body {
-		box-shadow: var(--components-tooltip-box-shadow);
 		border-radius: var(--primitives-corner-radius-xs);
+		box-shadow: var(--components-tooltip-box-shadow);
 		background-color: var(--components-tooltip-background-color);
 		width: max-content;
 		max-width: var(--_max-width);
@@ -67,21 +75,10 @@ export const tooltipStyles = css `
 		overflow-wrap: break-word;
 	}
 
-
-	/* # Toegankelijkheid */
-
 	@media (forced-colors: active) {
 		.tooltip__body {
 			border: 1px solid CanvasText;
 		}
 	}
-
-	@media (prefers-reduced-motion: reduce) {
-		.tooltip,
-		.tooltip.is-visible,
-		.tooltip.is-focus-visible {
-			transition: none;
-		}
-	}
 `;
 //# sourceMappingURL=tooltip.styles.js.map

package/dist/components/content/tooltip/tooltip.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.styles.js","sourceRoot":"","sources":["../../../../src/components/content/tooltip/tooltip.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoF/B,CAAC"}
+{"version":3,"file":"tooltip.styles.js","sourceRoot":"","sources":["../../../../src/components/content/tooltip/tooltip.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiF/B,CAAC"}

package/dist/components/forms/form-actions/form-actions.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"form-actions.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/form-actions/form-actions.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB,yBAyD7B,CAAC"}
+{"version":3,"file":"form-actions.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/form-actions/form-actions.styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,iBAAiB,yBAuD7B,CAAC"}

package/dist/components/forms/form-actions/form-actions.styles.js

@@ -1,4 +1,6 @@
-import { css } from 'lit';
+import { css, unsafeCSS } from 'lit';
+import { breakpoints } from '../../../assets/styles/breakpoints.js';
+const mdMin = unsafeCSS(breakpoints.mdMin);
 export const formActionsStyles = css `
 
 
@@ -14,31 +16,29 @@ export const formActionsStyles = css `
 	}
 
 
-	/* # Block
-	   641px = breakpoints.mdMin (zie src/assets/styles/breakpoints.ts).
-	   Houd in sync met form.css's @media queries en form-field. */
+	/* # Block */
 
 	.form-actions {
 		display: flex;
 		flex-direction: column;
 	}
 
-	:host([label-alignment='left']) .form-actions,
-	:host([label-alignment='right']) .form-actions,
-	:host(:not([label-alignment])[form-label-alignment='left']) .form-actions,
-	:host(:not([label-alignment])[form-label-alignment='right']) .form-actions {
-		@container (min-width: 641px) {
+	:host([label-alignment="left"]) .form-actions,
+	:host([label-alignment="right"]) .form-actions,
+	:host(:not([label-alignment])[form-label-alignment="left"]) .form-actions,
+	:host(:not([label-alignment])[form-label-alignment="right"]) .form-actions {
+		@container (min-width: ${mdMin}) {
 			flex-direction: row;
-			align-items: start;
 			gap: var(--semantics-forms-columns-gap);
+			align-items: start;
 		}
 	}
 
-	:host([label-alignment='left']) .form-actions::before,
-	:host([label-alignment='right']) .form-actions::before,
-	:host(:not([label-alignment])[form-label-alignment='left']) .form-actions::before,
-	:host(:not([label-alignment])[form-label-alignment='right']) .form-actions::before {
-		@container (min-width: 641px) {
+	:host([label-alignment="left"]) .form-actions::before,
+	:host([label-alignment="right"]) .form-actions::before,
+	:host(:not([label-alignment])[form-label-alignment="left"]) .form-actions::before,
+	:host(:not([label-alignment])[form-label-alignment="right"]) .form-actions::before {
+		@container (min-width: ${mdMin}) {
 			content: '';
 			width: var(--semantics-forms-label-column-width);
 			flex-grow: 0;
@@ -47,7 +47,7 @@ export const formActionsStyles = css `
 	}
 
 
-	/* # Main */
+	/* # Elements */
 
 	.form-actions__main {
 		display: flex;

package/dist/components/forms/form-actions/form-actions.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"form-actions.styles.js","sourceRoot":"","sources":["../../../../src/components/forms/form-actions/form-actions.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyDnC,CAAC"}
+{"version":3,"file":"form-actions.styles.js","sourceRoot":"","sources":["../../../../src/components/forms/form-actions/form-actions.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;AAE3C,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;2BA0BT,KAAK;;;;;;;;;;;2BAWL,KAAK;;;;;;;;;;;;;;;;;;CAkB/B,CAAC"}

package/dist/components/forms/form-field/form-field.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"form-field.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/form-field/form-field.styles.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,eAAe,yBAoK3B,CAAC;AAMF,eAAO,MAAM,uBAAuB,yBA+CnC,CAAC;AAMF,eAAO,MAAM,wBAAwB,yBAmDpC,CAAC"}
+{"version":3,"file":"form-field.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/form-field/form-field.styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,eAAe,yBAoK3B,CAAC;AAEF,eAAO,MAAM,uBAAuB,yBA+CnC,CAAC;AAEF,eAAO,MAAM,wBAAwB,yBAmDpC,CAAC"}

package/dist/components/forms/form-field/form-field.styles.js

@@ -1,13 +1,14 @@
-import { css } from 'lit';
-/* ============================================================
-   nldd-form-field
-   ============================================================ */
+import { css, unsafeCSS } from 'lit';
+import { breakpoints } from '../../../assets/styles/breakpoints.js';
+const mdMin = unsafeCSS(breakpoints.mdMin);
 export const formFieldStyles = css `
 
 
 	/* # Host */
 
 	:host {
+		--_gap: calc(var(--primitives-space-10) / 2);
+
 		display: block;
 		container-type: inline-size;
 	}
@@ -17,24 +18,22 @@ export const formFieldStyles = css `
 	}
 
 
-	/* # Block
-	   641px = breakpoints.mdMin (zie src/assets/styles/breakpoints.ts).
-	   Houd in sync met form.css's @media queries en form-actions. */
+	/* # Block */
 
 	.form-field {
 		display: flex;
 		flex-direction: column;
-		gap: var(--components-form-field-gap);
+		gap: var(--_gap);
 	}
 
-	:host([label-alignment='left']) .form-field,
-	:host([label-alignment='right']) .form-field,
-	:host(:not([label-alignment])[form-label-alignment='left']) .form-field,
-	:host(:not([label-alignment])[form-label-alignment='right']) .form-field {
-		@container (min-width: 641px) {
+	:host([label-alignment="left"]) .form-field,
+	:host([label-alignment="right"]) .form-field,
+	:host(:not([label-alignment])[form-label-alignment="left"]) .form-field,
+	:host(:not([label-alignment])[form-label-alignment="right"]) .form-field {
+		@container (min-width: ${mdMin}) {
 			flex-direction: row;
-			align-items: start;
 			gap: var(--semantics-forms-columns-gap);
+			align-items: start;
 		}
 	}
 
@@ -42,16 +41,16 @@ export const formFieldStyles = css `
 	/* # Header */
 
 	.form-field__header {
-		display: flex;
 		box-sizing: border-box;
+		display: flex;
 		flex-direction: column;
 	}
 
-	:host([label-alignment='left']) .form-field__header,
-	:host([label-alignment='right']) .form-field__header,
-	:host(:not([label-alignment])[form-label-alignment='left']) .form-field__header,
-	:host(:not([label-alignment])[form-label-alignment='right']) .form-field__header {
-		@container (min-width: 641px) {
+	:host([label-alignment="left"]) .form-field__header,
+	:host([label-alignment="right"]) .form-field__header,
+	:host(:not([label-alignment])[form-label-alignment="left"]) .form-field__header,
+	:host(:not([label-alignment])[form-label-alignment="right"]) .form-field__header {
+		@container (min-width: ${mdMin}) {
 			width: var(--semantics-forms-label-column-width);
 			min-height: var(--semantics-controls-md-min-size);
 			flex-grow: 0;
@@ -60,17 +59,17 @@ export const formFieldStyles = css `
 		}
 	}
 
-	:host([label-alignment='right']) .form-field__header,
-	:host(:not([label-alignment])[form-label-alignment='right']) .form-field__header {
-		@container (min-width: 641px) {
+	:host([label-alignment="right"]) .form-field__header,
+	:host(:not([label-alignment])[form-label-alignment="right"]) .form-field__header {
+		@container (min-width: ${mdMin}) {
 			align-items: end;
 			text-align: right;
 		}
 	}
 
-	:host([label-alignment='left']) .form-field__header,
-	:host(:not([label-alignment])[form-label-alignment='left']) .form-field__header {
-		@container (min-width: 641px) {
+	:host([label-alignment="left"]) .form-field__header,
+	:host(:not([label-alignment])[form-label-alignment="left"]) .form-field__header {
+		@container (min-width: ${mdMin}) {
 			align-items: start;
 			text-align: left;
 		}
@@ -80,11 +79,11 @@ export const formFieldStyles = css `
 		display: none;
 	}
 
-	:host([label-alignment='left']) .form-field__header.is-empty,
-	:host([label-alignment='right']) .form-field__header.is-empty,
-	:host(:not([label-alignment])[form-label-alignment='left']) .form-field__header.is-empty,
-	:host(:not([label-alignment])[form-label-alignment='right']) .form-field__header.is-empty {
-		@container (min-width: 641px) {
+	:host([label-alignment="left"]) .form-field__header.is-empty,
+	:host([label-alignment="right"]) .form-field__header.is-empty,
+	:host(:not([label-alignment])[form-label-alignment="left"]) .form-field__header.is-empty,
+	:host(:not([label-alignment])[form-label-alignment="right"]) .form-field__header.is-empty {
+		@container (min-width: ${mdMin}) {
 			display: flex;
 		}
 	}
@@ -94,34 +93,34 @@ export const formFieldStyles = css `
 
 	.form-field__label {
 		display: inline-flex;
-		align-items: baseline;
 		gap: var(--primitives-space-4);
+		align-items: baseline;
 		color: var(--semantics-content-color);
 		font: var(--primitives-font-body-md-regular-tight);
 		text-wrap: pretty;
 	}
 
-	:host([label-alignment='left']) .form-field__label,
-	:host([label-alignment='right']) .form-field__label,
-	:host(:not([label-alignment])[form-label-alignment='left']) .form-field__label,
-	:host(:not([label-alignment])[form-label-alignment='right']) .form-field__label {
-		@container (min-width: 641px) {
+	:host([label-alignment="left"]) .form-field__label,
+	:host([label-alignment="right"]) .form-field__label,
+	:host(:not([label-alignment])[form-label-alignment="left"]) .form-field__label,
+	:host(:not([label-alignment])[form-label-alignment="right"]) .form-field__label {
+		@container (min-width: ${mdMin}) {
 			display: flex;
 			flex-direction: column;
 			gap: var(--primitives-space-0);
 		}
 	}
 
-	:host([label-alignment='right']) .form-field__label,
-	:host(:not([label-alignment])[form-label-alignment='right']) .form-field__label {
-		@container (min-width: 641px) {
+	:host([label-alignment="right"]) .form-field__label,
+	:host(:not([label-alignment])[form-label-alignment="right"]) .form-field__label {
+		@container (min-width: ${mdMin}) {
 			align-items: end;
 		}
 	}
 
-	:host([label-alignment='left']) .form-field__label,
-	:host(:not([label-alignment])[form-label-alignment='left']) .form-field__label {
-		@container (min-width: 641px) {
+	:host([label-alignment="left"]) .form-field__label,
+	:host(:not([label-alignment])[form-label-alignment="left"]) .form-field__label {
+		@container (min-width: ${mdMin}) {
 			align-items: start;
 		}
 	}
@@ -167,9 +166,6 @@ export const formFieldStyles = css `
 		margin-top: var(--primitives-space-2);
 	}
 `;
-/* ============================================================
-   nldd-form-field-help-text
-   ============================================================ */
 export const formFieldHelpTextStyles = css `
 
 
@@ -218,9 +214,6 @@ export const formFieldHelpTextStyles = css `
 		outline: none;
 	}
 `;
-/* ============================================================
-   nldd-form-field-error-text
-   ============================================================ */
 export const formFieldErrorTextStyles = css `
 
 

package/dist/components/forms/form-field/form-field.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"form-field.styles.js","sourceRoot":"","sources":["../../../../src/components/forms/form-field/form-field.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;kEAEkE;AAElE,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoKjC,CAAC;AAEF;;kEAEkE;AAElE,MAAM,CAAC,MAAM,uBAAuB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+CzC,CAAC;AAEF;;kEAEkE;AAElE,MAAM,CAAC,MAAM,wBAAwB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmD1C,CAAC"}
+{"version":3,"file":"form-field.styles.js","sourceRoot":"","sources":["../../../../src/components/forms/form-field/form-field.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;AAE3C,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BA6BP,KAAK;;;;;;;;;;;;;;;;;;;;2BAoBL,KAAK;;;;;;;;;;;2BAWL,KAAK;;;;;;;;2BAQL,KAAK;;;;;;;;;;;;;;2BAcL,KAAK;;;;;;;;;;;;;;;;;;;;;2BAqBL,KAAK;;;;;;;;;2BASL,KAAK;;;;;;;2BAOL,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6C/B,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+CzC,CAAC;AAEF,MAAM,CAAC,MAAM,wBAAwB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmD1C,CAAC"}