Use flex columns for form controls, fixes #629 (#636)

* Use flex columns for form controls

* Touch up spacing in color picker example

* Use consistent `display` for related form controls

docs/docs/components/color-picker.md

@@ -66,9 +66,11 @@ Use the `swatches` attribute to add convenient presets to the color picker. Any
 Use the `size` attribute to change the color picker's trigger size.
 
 ```html {.example}
-<wa-color-picker size="small" label="Select a color"></wa-color-picker>
-<wa-color-picker size="medium" label="Select a color"></wa-color-picker>
-<wa-color-picker size="large" label="Select a color"></wa-color-picker>
+<div class="wa-gap-m wa-align-items-baseline">
+  <wa-color-picker size="small" label="Select a color"></wa-color-picker>
+  <wa-color-picker size="medium" label="Select a color"></wa-color-picker>
+  <wa-color-picker size="large" label="Select a color"></wa-color-picker>
+</div>
 ```
 
 ### Disabled

src/components/color-picker/color-picker.css

@@ -15,8 +15,6 @@
   --swatch-border-radius: var(--wa-border-radius-m);
   --swatch-size: 1.5rem;
   --trigger-border-radius: var(--wa-border-radius-circle);
-
-  display: inline-block;
 }
 
 .color-picker {

src/components/input/input.css

@@ -1,6 +1,4 @@
 :host {
-  display: flex;
-  flex-flow: column;
   border-width: 0;
 }
 

src/components/select/select.css

@@ -1,7 +1,3 @@
-:host {
-  display: block;
-}
-
 /** The popup */
 .select {
   flex: 1 1 auto;

src/components/switch/switch.css

@@ -13,7 +13,7 @@
   --thumb-size: calc((var(--height) - var(--border-width) * 2) * 0.75);
   --width: calc(var(--height) * 1.75);
 
-  display: inline-block;
+  display: inline-flex;
 }
 
 label {

src/components/textarea/textarea.css

@@ -1,5 +1,4 @@
 :host {
-  display: block;
   border-width: 0;
 }
 

src/styles/shadow/form-control.css

@@ -1,3 +1,8 @@
+:host {
+  display: flex;
+  flex-direction: column;
+}
+
 /* Label */
 :is([part~='form-control-label'], [part~='label']):has(*:not(:empty)) {
   display: inline-block;