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

@@ -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>
-```
+```

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('');

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());
   }

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
    */

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);