Add native textarea styles and share with <wa-textarea>

src/components/textarea/textarea.css

@@ -1,11 +1,4 @@
 :host {
-  --background-color: var(--wa-form-control-background-color);
-  --border-color: var(--wa-form-control-resting-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;
-
   display: block;
 }
 
@@ -14,27 +7,6 @@
   --border-color: var(--background-color);
 }
 
-.textarea {
-  background-color: var(--background-color);
-  border-color: var(--border-color);
-  border-radius: var(--border-radius);
-  border-style: var(--border-style);
-  border-width: var(--border-width);
-  box-shadow: var(--box-shadow);
-  display: grid;
-  align-items: center;
-  position: relative;
-  width: 100%;
-  font: inherit;
-  line-height: var(--wa-form-control-value-line-height);
-  vertical-align: middle;
-  transition:
-    background var(--wa-transition-normal) var(--wa-transition-easing),
-    border var(--wa-transition-normal) var(--wa-transition-easing),
-    outline var(--wa-transition-fast) var(--wa-transition-easing);
-  cursor: text;
-}
-
 .control,
 .size-adjuster {
   grid-area: 1 / 1 / 2 / 2;
@@ -46,33 +18,7 @@
   opacity: 0;
 }
 
-/* Standard textareas */
-.textarea--standard.textarea--focused:not(.textarea--disabled) {
-  outline: var(--wa-focus-ring);
-  outline-offset: var(--wa-focus-ring-offset);
-  border-color: var(--wa-form-control-activated-color);
-}
-
-.textarea--standard.textarea--disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-/* Filled textareas */
-.textarea--filled.textarea--focused:not(.textarea--disabled) {
-  outline: var(--wa-focus-ring);
-  outline-offset: 0;
-}
-
-.textarea--filled.textarea--disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
 .control {
-  font: inherit;
-  line-height: var(--wa-line-height-expanded);
-  color: var(--wa-form-control-value-color);
   border: none;
   background: none;
   box-shadow: none;
@@ -87,35 +33,10 @@
   -webkit-appearance: none;
 }
 
-.control::placeholder {
-  color: var(--wa-form-control-placeholder-color);
-  user-select: none;
-  -webkit-user-select: none;
-}
-
 .control:focus {
   outline: none;
 }
 
-/*
-   * Size modifiers
-   */
-:host {
-  --padding-inline: var(--wa-space-m);
-}
-
-:host([size='small']) {
-  --padding-inline: var(--wa-space-s);
-}
-
-:host([size='large']) {
-  --padding-inline: var(--wa-space-l);
-}
-
-.control {
-  padding: 0.5em var(--padding-inline);
-}
-
 /*
  * Resize types
  */

src/components/textarea/textarea.ts

@@ -11,7 +11,9 @@ import { HasSlotController } from '../../internal/slot.js';
 import { MirrorValidator } from '../../internal/validators/mirror-validator.js';
 import { watch } from '../../internal/watch.js';
 import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-element.js';
+import nativeStyles from '../../styles/native/textarea.css';
 import formControlStyles from '../../styles/shadow/form-control.css';
+import appearanceStyles from '../../styles/utilities/appearance.css';
 import sizeStyles from '../../styles/utilities/size.css';
 import styles from './textarea.css';
 
@@ -46,7 +48,7 @@ import styles from './textarea.css';
  */
 @customElement('wa-textarea')
 export default class WaTextarea extends WebAwesomeFormAssociatedElement {
-  static shadowStyle = [formControlStyles, sizeStyles, styles];
+  static shadowStyle = [formControlStyles, appearanceStyles, sizeStyles, nativeStyles, styles];
 
   static get validators() {
     return [...super.validators, MirrorValidator()];

src/styles/applied.css

@@ -8,6 +8,7 @@
 @import url('native/input.css');
 @import url('native/details.css');
 @import url('native/tables.css');
+@import url('native/textarea.css');
 @import url('native/blockquote.css');
 @import url('native/dialog.css');
 @import url('native/slider.css');

src/styles/native/form-control.css

@@ -5,8 +5,8 @@ label {
   line-height: var(--wa-form-control-label-line-height);
 }
 
-label + input:not([type='checkbox'], [type='radio']),
-label > input:not([type='checkbox'], [type='radio']) {
+label + :is(input:not([type='checkbox'], [type='radio']), textarea),
+label > :is(input:not([type='checkbox'], [type='radio']), textarea) {
   margin-block-start: var(--wa-space-xs);
 }
 

src/styles/native/textarea.css

@@ -0,0 +1,56 @@
+textarea:not(:host *, .wa-off, .wa-off-deep *),
+:host {
+  --background-color: var(--wa-form-control-background-color);
+  --border-color: var(--wa-form-control-resting-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;
+}
+
+textarea:not(:host *, .wa-off, .wa-off-deep *),
+:host .textarea {
+  background-color: var(--background-color);
+  border-color: var(--border-color);
+  border-radius: var(--border-radius);
+  border-style: var(--border-style);
+  border-width: var(--border-width);
+  box-shadow: var(--box-shadow);
+  display: grid;
+  align-items: center;
+  position: relative;
+  width: 100%;
+  font: inherit;
+  line-height: var(--wa-form-control-value-line-height);
+  vertical-align: middle;
+  transition:
+    background var(--wa-transition-normal) var(--wa-transition-easing),
+    border var(--wa-transition-normal) var(--wa-transition-easing),
+    outline var(--wa-transition-fast) var(--wa-transition-easing);
+  cursor: text;
+}
+
+textarea:not(:host *, .wa-off, .wa-off-deep *):focus:not(:disabled),
+:host .textarea:has(> textarea:focus:not(:disabled)) {
+  outline: var(--wa-focus-ring);
+  outline-offset: var(--wa-focus-ring-offset);
+}
+
+textarea:not(:host *, .wa-off, .wa-off-deep *):disabled,
+:host .textarea:has(> textarea:disabled) {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+textarea:not(.wa-off, .wa-off-deep *) {
+  font: inherit;
+  line-height: var(--wa-line-height-normal);
+  color: var(--wa-form-control-value-color);
+  padding: calc(var(--wa-space-smaller) - var(--border-width)) var(--wa-space);
+
+  &::placeholder {
+    color: var(--wa-form-control-placeholder-color);
+    user-select: none;
+    -webkit-user-select: none;
+  }
+}