From d12b97b0b0abffc748d8d8b458791081dc898f2f Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Wed, 12 Mar 2025 12:19:50 -0400
Subject: [PATCH] fix wa-pill and wa-input[pill] styles (#791)

---
 docs/docs/native/input.md        | 8 ++++++++
 docs/docs/resources/changelog.md | 5 +++++
 src/styles/native/input.css      | 7 ++++---
 3 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/docs/docs/native/input.md b/docs/docs/native/input.md
index c7c11f0dc..ef7c483e5 100644
--- a/docs/docs/native/input.md
+++ b/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:
diff --git a/docs/docs/resources/changelog.md b/docs/docs/resources/changelog.md
index 51bd55882..cbea1f20e 100644
--- a/docs/docs/resources/changelog.md
+++ b/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
diff --git a/src/styles/native/input.css b/src/styles/native/input.css
index 246812a7a..7580e33d3 100644
--- a/src/styles/native/input.css
+++ b/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;
 }