Fix missing select styles, improve consistency (#450)

* Refactor for consistency, fix missing theme styles

* Remove unused custom properties from docs

* Add missing custom property to docs

* Add UI test case

docs/docs/experimental/sandbox.md

@@ -172,7 +172,7 @@ layout: page-outline
 <div class="shadow" style="box-shadow: var(--wa-shadow-l);"></div>
 ```
 
-## Tests
+## Alignment Tests
 
 ```html {.example}
 <style>
@@ -254,6 +254,8 @@ layout: page-outline
 </div>
 ```
 
+## Custom Property Tests
+
 ```html {.example}
 <style>
   .wa-theme-test {
@@ -319,4 +321,32 @@ layout: page-outline
   </wa-select>
 </div>
 
+```
+
+## Text Controls Tests
+
+```html {.example}
+<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;">
+  <label>Native Input <input type="text" value="value"></label>
+  <wa-input label="WA Input" type="text" value="value"></wa-input>
+
+  <label>
+    Native Select 
+    <select value="option-1">
+      <option value="option-1">Option 1</option>
+      <option value="option-2">Option 2</option>
+      <option value="option-3">Option 3</option>
+      <option value="option-4">Option 4</option>
+    </select>
+  </label>
+  <wa-select label="WA Select" value="option-1">
+    <wa-option value="option-1">Option 1</wa-option>
+    <wa-option value="option-2">Option 2</wa-option>
+    <wa-option value="option-3">Option 3</wa-option>
+    <wa-option value="option-4">Option 4</wa-option>
+  </wa-select>
+
+  <label>Native Textarea <textarea>value</textarea></label>
+  <wa-textarea label="WA Textarea" value="value"></wa-textarea>
+</div>
 ```

src/components/input/input.ts

@@ -54,6 +54,7 @@ import styles from './input.css';
  * @csspart suffix - The container that wraps the suffix.
  *
  * @cssproperty --background-color - The input's background color.
+ * @cssproperty --border-color - The color of the input's borders.
  * @cssproperty --border-width - The width of the input's borders. Expects a single value.
  * @cssproperty --box-shadow - The shadow effects around the edges of the input.
  */

src/components/select/select.ts

@@ -81,8 +81,6 @@ import styles from './select.css';
  *
  * @cssproperty --background-color - The background color of the select's combobox.
  * @cssproperty --border-color - The border color of the select's combobox.
- * @cssproperty --border-radius - The border radius of the select's combobox.
- * @cssproperty --border-style - The style of the select's borders, including the listbox.
  * @cssproperty --border-width - The width of the select's borders, including the listbox.
  * @cssproperty --box-shadow - The shadow effects around the edges of the select's combobox.
  */

src/components/textarea/textarea.ts

@@ -41,8 +41,6 @@ import styles from './textarea.css';
  *
  * @cssproperty --background-color - The textarea's background color.
  * @cssproperty --border-color - The color of the textarea's borders.
- * @cssproperty --border-radius - The border radius of the textarea's corners.
- * @cssproperty --border-style - The style of the textarea's borders.
  * @cssproperty --border-width - The width of the textarea's borders.
  * @cssproperty --box-shadow - The shadow effects around the edges of the textarea.
  */

src/styles/native/select.css

@@ -1,41 +1,45 @@
 select,
 label:has(select),
 :host {
-  --background-color: var(--wa-form-control-background-color);
-  --border-color: var(--wa-form-control-border-color);
-  --border-radius: var(--wa-form-control-border-radius);
-  --border-style: var(--wa-form-control-border-style);
-  --border-width: var(--wa-form-control-border-width);
-  --box-shadow: initial;
+  /* Defaults for root element. */
+  --outlined-background-color: var(--wa-form-control-background-color);
+  --outlined-border-color: var(--wa-form-control-border-color);
+  --outlined-text-color: var(--wa-form-control-value-color);
+
+  :where(&) {
+    /* Defaults with 0 specificity.
+       * Do NOT reset --background-color and --border-color here so they trickle in from the appearance utils
+       * Instead we provide the fallback when setting
+       */
+    --border-width: var(--wa-form-control-border-width);
+    --box-shadow: initial;
+  }
 }
 select,
 :host [part~='combobox'] {
-  background-color: var(--background-color);
-  border-color: var(--border-color);
-  border-radius: var(--border-radius);
-  border-style: var(--border-style);
+  background-color: var(--background-color, var(--wa-form-control-background-color));
+  border-color: var(--border-color, var(--wa-form-control-border-color));
+  border-radius: var(--wa-form-control-border-radius);
+  border-style: var(--wa-form-control-border-style);
   border-width: var(--border-width);
   box-shadow: var(--box-shadow);
-  width: 100%;
-  min-width: 0;
-  position: relative;
   color: var(--wa-form-control-value-color);
-  font-size: var(--wa-size);
+  cursor: pointer;
   font-family: inherit;
+  font-size: var(--wa-size);
   font-weight: var(--wa-form-control-value-font-weight);
   line-height: var(--wa-form-control-value-line-height);
-  vertical-align: middle;
+  min-width: 0;
   overflow: hidden;
-  cursor: pointer;
+  padding: var(--wa-space-smaller) var(--wa-space);
+  position: relative;
+  vertical-align: middle;
+  width: 100%;
   transition:
-    background var(--wa-transition-normal),
+    background-color var(--wa-transition-normal),
     border var(--wa-transition-normal),
-    box-shadow var(--wa-transition-normal),
-    color var(--wa-transition-normal),
     outline var(--wa-transition-fast);
   transition-timing-function: var(--wa-transition-easing);
-
-  padding: var(--wa-space-smaller) var(--wa-space);
 }
 
 /* Add ellipses to multi select options */