Add invalid states for interactive elements

styles/10-components-interactive-elements.css

@@ -407,6 +407,12 @@
       box-shadow: 0 0 0 1px var(--color-signal-red) inset;
     }
 
+    .sg-pulldown[aria-invalid="true"],
+    .sg-checkbox-field[aria-invalid="true"],
+    .sg-radio-field[aria-invalid="true"] {
+      box-shadow: 0 0 0 1px var(--color-signal-red) inset;
+    }
+
     .sg-labeled-input-row:has(.sg-input-multi-line) {
       align-items: flex-start;
     }