style(form-inputs): align error icon with top of multi-line messages (#627)

pixelflips · web-flow · commit cc3c9945eb04 · 2026-01-09T11:21:47.000-08:00
* style(pds-input): align error icon with top of multi-line error messages

* style(pds-textarea): align error icon with top of multi-line error messages

* style(pds-select): align error icon with top of multi-line error messages

* style(pds-radio-group): align error icon with top of multi-line error messages

* style(pds-radio): align error icon with top of multi-line error messages
diff --git a/libs/core/src/components/pds-input/pds-input.scss b/libs/core/src/components/pds-input/pds-input.scss
@@ -306,10 +306,13 @@
 }
 
 .pds-input__error-message {
-  align-items: center;
   color: var(--pds-input-error-color);
   display: flex;
   gap: var(--pine-dimension-2xs);
+
+  pds-icon {
+    margin-block-start: var(--pine-dimension-025);
+  }
 }
 
 .visually-hidden {
diff --git a/libs/core/src/components/pds-radio-group/pds-radio-group.scss b/libs/core/src/components/pds-radio-group/pds-radio-group.scss
@@ -39,8 +39,11 @@
 }
 
 .pds-radio-group__message--error {
-  align-items: center;
   display: flex;
   gap: var(--pine-dimension-2xs);
+
+  pds-icon {
+    margin-block-start: var(--pine-dimension-050);
+  }
 }
 
diff --git a/libs/core/src/components/pds-radio/pds-radio.scss b/libs/core/src/components/pds-radio/pds-radio.scss
@@ -194,9 +194,12 @@ label:has(input:disabled) {
 }
 
 .pds-radio__message--error {
-  align-items: center;
   display: flex;
   gap: var(--pine-dimension-2xs);
+
+  pds-icon {
+    margin-block-start: var(--pine-dimension-025);
+  }
 }
 
 // Image-based radio styles - matches bordered layout
diff --git a/libs/core/src/components/pds-select/pds-select.scss b/libs/core/src/components/pds-select/pds-select.scss
@@ -148,10 +148,13 @@ select {
 }
 
 .pds-select__error-message {
-  align-items: center;
   color: var(--pine-color-text-message-danger);
   display: flex;
   gap: var(--pine-dimension-2xs);
+
+  pds-icon {
+    margin-block-start: var(--pine-dimension-025);
+  }
 }
 
 .pds-select__message {
diff --git a/libs/core/src/components/pds-textarea/pds-textarea.scss b/libs/core/src/components/pds-textarea/pds-textarea.scss
@@ -66,12 +66,15 @@ label {
 }
 
 .pds-textarea__error-message {
-  align-items: center;
   color: var(--pine-color-text-message-danger);
   display: flex;
   font: var(--pine-typography-body-sm-medium);
   gap: var(--pine-dimension-2xs);
   margin-block-start: var(--pine-dimension-2xs);
+
+  pds-icon {
+    margin-block-start: var(--pine-dimension-025);
+  }
 }
 
 .pds-textarea__field-wrapper {

Original file line number	Diff line number	Diff line change
`@@ -306,10 +306,13 @@`
`306`	`306`	`}`
`307`	`307`
`308`	`308`	`.pds-input__error-message {`
`309`		`- align-items: center;`
`310`	`309`	`color: var(--pds-input-error-color);`
`311`	`310`	`display: flex;`
`312`	`311`	`gap: var(--pine-dimension-2xs);`
	`312`	`+`
	`313`	`+ pds-icon {`
	`314`	`+ margin-block-start: var(--pine-dimension-025);`
	`315`	`+ }`
`313`	`316`	`}`
`314`	`317`
`315`	`318`	`.visually-hidden {`
Original file line number	Diff line number	Diff line change
`@@ -39,8 +39,11 @@`
`39`	`39`	`}`
`40`	`40`
`41`	`41`	`.pds-radio-group__message--error {`
`42`		`- align-items: center;`
`43`	`42`	`display: flex;`
`44`	`43`	`gap: var(--pine-dimension-2xs);`
	`44`	`+`
	`45`	`+ pds-icon {`
	`46`	`+ margin-block-start: var(--pine-dimension-050);`
	`47`	`+ }`
`45`	`48`	`}`
`46`	`49`
Original file line number	Diff line number	Diff line change
`@@ -194,9 +194,12 @@ label:has(input:disabled) {`
`194`	`194`	`}`
`195`	`195`
`196`	`196`	`.pds-radio__message--error {`
`197`		`- align-items: center;`
`198`	`197`	`display: flex;`
`199`	`198`	`gap: var(--pine-dimension-2xs);`
	`199`	`+`
	`200`	`+ pds-icon {`
	`201`	`+ margin-block-start: var(--pine-dimension-025);`
	`202`	`+ }`
`200`	`203`	`}`
`201`	`204`
`202`	`205`	`// Image-based radio styles - matches bordered layout`
Original file line number	Diff line number	Diff line change
`@@ -148,10 +148,13 @@ select {`
`148`	`148`	`}`
`149`	`149`
`150`	`150`	`.pds-select__error-message {`
`151`		`- align-items: center;`
`152`	`151`	`color: var(--pine-color-text-message-danger);`
`153`	`152`	`display: flex;`
`154`	`153`	`gap: var(--pine-dimension-2xs);`
	`154`	`+`
	`155`	`+ pds-icon {`
	`156`	`+ margin-block-start: var(--pine-dimension-025);`
	`157`	`+ }`
`155`	`158`	`}`
`156`	`159`
`157`	`160`	`.pds-select__message {`