fix wa-pill and wa-input[pill] styles (#791)

docs/docs/native/input.md

@@ -42,6 +42,14 @@ wa-code-demo::part(preview) {
 <wa-input label="WA Input (url)" type="url"></wa-input>
 ```
 
+## Pill shaped text fields
+
+Add the `wa-pill` class to an `<input>` to make it pill-shaped.
+
+```html {.example}
+<label>Input <input type="text" placeholder="placeholder" class="wa-pill"></label>
+```
+
 ## Color Picker
 
 Basic:

docs/docs/resources/changelog.md

@@ -12,6 +12,11 @@ Components with the <wa-badge variant="warning" pill>Experimental</wa-badge> bad
 During the alpha period, things might break! We take breaking changes very seriously, but sometimes they're necessary to make the final product that much better. We appreciate your patience!
 :::
 
+## Next
+
+- Fixed `wa-pill` class for text fields
+- Fixed `pill` style for `<wa-input>` elements
+
 ## 3.0.0-alpha.11
 
 ### Color Palettes

src/styles/native/input.css

@@ -121,7 +121,8 @@ input:where(:not(
   font: inherit;
 }
 
-.wa-pill,
-:host([pill]) {
-  border-radius: var(--wa-border-radius-pill);
+input.wa-pill,
+textarea.wa-pill,
+:host([pill]) .wa-text-field {
+  border-radius: var(--wa-border-radius-pill) !important;
 }