From 7d3a629a1edfd5e3c599ecdf4f2efe20770fa343 Mon Sep 17 00:00:00 2001
From: Konnor Rogers <konnor5456@gmail.com>
Date: Wed, 18 Dec 2024 23:27:50 -0500
Subject: [PATCH] fix host context selectors for unsupported browsers (#335)

* fix host context selectors

* fix textarea value being lost

* fix textarea

* fix example

* fix textarea value being lost
---
 docs/docs/components/textarea.md             | 10 +++++++++-
 src/components/textarea/textarea.test.ts     |  2 +-
 src/components/textarea/textarea.ts          |  2 ++
 src/styles/themes/default/color-semantic.css |  3 ++-
 src/styles/themes/default/groups.css         |  3 ++-
 5 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/docs/docs/components/textarea.md b/docs/docs/components/textarea.md
index a01c4b774..0f8a34b72 100644
--- a/docs/docs/components/textarea.md
+++ b/docs/docs/components/textarea.md
@@ -63,6 +63,14 @@ Use the `disabled` attribute to disable a textarea.
 <wa-textarea placeholder="Textarea" disabled></wa-textarea>
 ```
 
+### Value
+
+Use the `value` attribute to set an initial value.
+
+```html {.example}
+<wa-textarea value="Write something awesome!"></wa-textarea>
+```
+
 ### Sizes
 
 Use the `size` attribute to change a textarea's size.
@@ -89,4 +97,4 @@ Textareas will automatically resize to expand to fit their content when `resize`
 
 ```html {.example}
 <wa-textarea resize="auto"></wa-textarea>
-```
+```
\ No newline at end of file
diff --git a/src/components/textarea/textarea.test.ts b/src/components/textarea/textarea.test.ts
index 46a52d794..9095cde74 100644
--- a/src/components/textarea/textarea.test.ts
+++ b/src/components/textarea/textarea.test.ts
@@ -25,7 +25,7 @@ describe('<wa-textarea>', () => {
         expect(el.value).to.equal('');
         expect(el.defaultValue).to.equal('');
         expect(el.title).to.equal('');
-        expect(el.filled).to.be.false;
+        expect(el.appearance).to.equal('outlined');
         expect(el.label).to.equal('');
         expect(el.hint).to.equal('');
         expect(el.placeholder).to.equal('');
diff --git a/src/components/textarea/textarea.ts b/src/components/textarea/textarea.ts
index c8ead5212..90da17cf6 100644
--- a/src/components/textarea/textarea.ts
+++ b/src/components/textarea/textarea.ts
@@ -210,6 +210,7 @@ export default class WaTextarea extends WebAwesomeFormAssociatedElement {
   }
 
   private handleChange() {
+    this.valueHasChanged = true;
     this.value = this.input.value;
     this.setTextareaHeight();
     this.dispatchEvent(new WaChangeEvent());
@@ -222,6 +223,7 @@ export default class WaTextarea extends WebAwesomeFormAssociatedElement {
   }
 
   private handleInput() {
+    this.valueHasChanged = true;
     this.value = this.input.value;
     this.dispatchEvent(new WaInputEvent());
   }
diff --git a/src/styles/themes/default/color-semantic.css b/src/styles/themes/default/color-semantic.css
index 6db7008a1..ea619f99d 100644
--- a/src/styles/themes/default/color-semantic.css
+++ b/src/styles/themes/default/color-semantic.css
@@ -101,8 +101,9 @@
   --wa-color-neutral-on-loud: white;
 }
 
+/** need to wrap :host-context() in an :is() selector for unsupported browsers */
 .wa-theme-default-dark,
-:host-context(.wa-theme-default-dark) {
+:is(:host-context(.wa-theme-default-dark)) {
   /**
    * Foundational Colors
    */
diff --git a/src/styles/themes/default/groups.css b/src/styles/themes/default/groups.css
index e3b5e7bff..c3d895366 100644
--- a/src/styles/themes/default/groups.css
+++ b/src/styles/themes/default/groups.css
@@ -48,8 +48,9 @@
   --wa-tooltip-line-height: var(--wa-line-height-normal);
 }
 
+/** need to wrap :host-context() in an :is() selector for unsupported browsers */
 .wa-theme-default-dark,
-:host-context(.wa-theme-default-dark) {
+:is(:host-context(.wa-theme-default-dark)) {
   /* Form controls */
   --wa-form-control-background-color: var(--wa-color-surface-default);