@nldd/design-system 0.8.43 → 0.8.45

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

@@ -1,7 +1,6 @@
-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 `
 
 
@@ -17,9 +16,7 @@ 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;
@@ -27,14 +24,14 @@ export const formFieldStyles = css `
 		gap: var(--components-form-field-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,35 +39,35 @@ export const formFieldStyles = css `
 	/* # Header */
 
 	.form-field__header {
+		box-sizing: border-box;
 		display: flex;
 		flex-direction: column;
-		box-sizing: border-box;
 	}
 
-	: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;
 			flex-shrink: 0;
 			justify-content: center;
-			width: var(--semantics-forms-label-column-width);
-			min-height: var(--semantics-controls-md-min-size);
 		}
 	}
 
-	: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 +77,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 +91,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;
 		}
 	}
@@ -148,11 +145,11 @@ export const formFieldStyles = css `
 
 	.form-field__main {
 		display: flex;
+		min-width: 0;
 		flex-direction: column;
 		flex-grow: 1;
 		flex-shrink: 1;
 		flex-basis: 0;
-		min-width: 0;
 	}
 
 
@@ -167,9 +164,6 @@ export const formFieldStyles = css `
 		margin-top: var(--primitives-space-2);
 	}
 `;
-/* ============================================================
-   nldd-form-field-help-text
-   ============================================================ */
 export const formFieldHelpTextStyles = css `
 
 
@@ -192,10 +186,10 @@ export const formFieldHelpTextStyles = css `
 	/* # Links */
 
 	::slotted(a) {
+		border-radius: var(--primitives-corner-radius-xxs);
 		color: var(--semantics-links-color);
 		text-decoration: underline;
 		text-underline-offset: var(--primitives-space-2);
-		border-radius: var(--primitives-corner-radius-xxs);
 	}
 
 	@media (hover: hover) {
@@ -218,9 +212,6 @@ export const formFieldHelpTextStyles = css `
 		outline: none;
 	}
 `;
-/* ============================================================
-   nldd-form-field-error-text
-   ============================================================ */
 export const formFieldErrorTextStyles = css `
 
 
@@ -247,10 +238,10 @@ export const formFieldErrorTextStyles = css `
 	/* # Links */
 
 	::slotted(a) {
+		border-radius: var(--primitives-corner-radius-xxs);
 		color: var(--semantics-links-color);
 		text-decoration: underline;
 		text-underline-offset: var(--primitives-space-2);
-		border-radius: var(--primitives-corner-radius-xxs);
 	}
 
 	@media (hover: hover) {

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;;;;;;;;;;;;;;;;;;;;;;;;;;;2BA2BP,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"}