Add styling for error-containers components

* Because of the structure that `practical-error-handling` needs, we
	need some custom CSS to hide `wa-callouts` used for error message
	containers
* Also added polish to make single-item field errors bold, and remove
	the multi-line blurb
* The fallback error section always retains its list styling, even if
	there is only 1 error

Author: tcannonfodder

css/components/error-containers.scss

@@ -0,0 +1,28 @@
+wa-callout > [data-pf-error-container] > ul > li {
+  font-weight: var(--wa-font-weight-body);
+}
+
+wa-callout:has(> [data-pf-error-container]):not(:has([data-pf-error-visible])) {
+  display: none;
+}
+
+wa-callout:has(> [data-pf-error-container] > ul > li:not([data-pf-error-visible])) {
+  display: none;
+}
+
+wa-callout:not(:has(> [data-pf-fallback-error-section])){
+  &:has(> [data-pf-error-container] > ul > li[data-pf-error-visible]:only-child) {
+    [data-pf-field-multiple-errors-blurb] {
+      display: none;
+    }
+
+    [data-pf-error-container] > ul {
+      list-style: none;
+      margin-inline-start: 0;
+
+      > li {
+        font-weight: unset;
+      }
+    }
+  }
+}

css/components/index.scss

@@ -1,4 +1,5 @@
 @use 'toast';
+@use 'error-containers';
 @use 'wa-component-with-fallback';
 @use 'dropdown-navigation';
 @use 'icon-text';