filled → appearance=filled rel #330

docs/_includes/search.njk

@@ -6,7 +6,7 @@
         <wa-input
           id="site-search-input"
           type="search"
-          filled
+          appearance="filled"
           size="large"
           clearable
           placeholder="Search"

docs/docs/components/input.md

@@ -55,12 +55,12 @@ Add the `password-toggle` attribute to add a toggle button that will show the pa
 <wa-input type="password" placeholder="Password Toggle" password-toggle></wa-input>
 ```
 
-### Filled Inputs
+### Appearance
 
-Add the `filled` attribute to draw a filled input.
+Use the `appearance` attribute to change the input's visual appearance.
 
 ```html {.example}
-<wa-input placeholder="Type something" filled></wa-input>
+<wa-input placeholder="Type something" appearance="filled"></wa-input>
 ```
 
 ### Disabled

docs/docs/components/select.md

@@ -70,12 +70,12 @@ Use the `clearable` attribute to make the control clearable. The clear button on
 </wa-select>
 ```
 
-### Filled Selects
+### Appearance
 
-Add the `filled` attribute to draw a filled select.
+Use the `appearance` attribute to change the select's visual appearance.
 
 ```html {.example}
-<wa-select filled>
+<wa-select appearance="filled">
   <wa-option value="option-1">Option 1</wa-option>
   <wa-option value="option-2">Option 2</wa-option>
   <wa-option value="option-3">Option 3</wa-option>

docs/docs/components/textarea.md

@@ -47,12 +47,12 @@ Use the `placeholder` attribute to add a placeholder.
 <wa-textarea placeholder="Type something"></wa-textarea>
 ```
 
-### Filled Textareas
+### Appearance
 
-Add the `filled` attribute to draw a filled textarea.
+Use the `appearance` attribute to change the textarea's visual appearance.
 
 ```html {.example}
-<wa-textarea placeholder="Type something" filled></wa-textarea>
+<wa-textarea placeholder="Type something" appearance="filled"></wa-textarea>
 ```
 
 ### Disabled

src/components/input/input.ts

@@ -122,8 +122,8 @@ export default class WaInput extends WebAwesomeFormAssociatedElement {
   /** The input's size. */
   @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
 
-  /** Draws a filled input. */
-  @property({ type: Boolean, reflect: true }) filled = false;
+  /** The input's visual appearance. */
+  @property({ reflect: true }) appearance: 'filled' | 'outlined' = 'outlined';
 
   /** Draws a pill-style input with rounded edges. */
   @property({ type: Boolean, reflect: true }) pill = false;
@@ -431,8 +431,6 @@ export default class WaInput extends WebAwesomeFormAssociatedElement {
 
               // States
               'input--pill': this.pill,
-              'input--standard': !this.filled,
-              'input--filled': this.filled,
               'input--disabled': this.disabled,
               'input--focused': this.hasFocus,
               'input--empty': !this.value,

src/components/select/select.css

@@ -9,7 +9,7 @@
   display: block;
 }
 
-:host([filled]) {
+:host([appearance=filled]) {
   --background-color: var(--wa-color-neutral-fill-quiet);
   --border-color: var(--background-color);
 }

src/components/select/select.ts

@@ -197,8 +197,8 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
    */
   @property({ type: Boolean }) hoist = false;
 
-  /** Draws a filled select. */
-  @property({ type: Boolean, reflect: true }) filled = false;
+  /** The select's visual appearance. */
+  @property({ reflect: true }) appearance: 'filled' | 'outlined' = 'outlined';
 
   /** Draws a pill-style select with rounded edges. */
   @property({ type: Boolean, reflect: true }) pill = false;

src/components/textarea/textarea.css

@@ -9,7 +9,7 @@
   display: block;
 }
 
-:host([filled]) {
+:host([appearance=filled]) {
   --background-color: var(--wa-color-neutral-fill-quiet);
   --border-color: var(--background-color);
 }

src/components/textarea/textarea.ts

@@ -92,8 +92,8 @@ export default class WaTextarea extends WebAwesomeFormAssociatedElement {
   /** The textarea's size. */
   @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
 
-  /** Draws a filled textarea. */
-  @property({ type: Boolean, reflect: true }) filled = false;
+  /** The textarea's visual appearance. */
+  @property({ reflect: true }) appearance: 'filled' | 'outlined' = 'outlined';
 
   /** The textarea's label. If you need to display HTML, use the `label` slot instead. */
   @property() label = '';
@@ -335,8 +335,8 @@ export default class WaTextarea extends WebAwesomeFormAssociatedElement {
               'textarea--small': this.size === 'small',
               'textarea--medium': this.size === 'medium',
               'textarea--large': this.size === 'large',
-              'textarea--standard': !this.filled,
-              'textarea--filled': this.filled,
+              'textarea--standard': this.appearance !== "filled",
+              'textarea--filled': this.appearance === "filled",
               'textarea--disabled': this.disabled,
               'textarea--focused': this.hasFocus,
               'textarea--empty': !this.value,

src/styles/depth/2_chunky.css

@@ -82,7 +82,7 @@ wa-button {
 wa-input,
 wa-select,
 wa-textarea {
-  &:not([filled]):not([disabled]) {
+  &:not([appearance='filled']):not([disabled]) {
     --box-shadow: var(--wa-shadow-xs);
   }
 }

src/styles/depth/3_punchy.css

@@ -61,7 +61,7 @@ wa-button:not([appearance='plain']) {
 wa-input,
 wa-select,
 wa-textarea {
-  &:not([filled]):not([disabled]) {
+  &:not([appearance='filled']):not([disabled]) {
     --box-shadow: var(--wa-shadow-xs);
   }
 }

src/styles/depth/4_glossy.css

@@ -237,14 +237,14 @@ wa-button:not([appearance='outlined']) {
 /* #region Inputs */
 wa-input:not(:focus),
 wa-select {
-  &:not([filled]):not([disabled]) {
+  &:not([appearance='filled']):not([disabled]) {
     --box-shadow: var(--wa-shadow-xs), inset 0 1.25em 0 0 rgb(0 0 0 / 0.02) /* upper tint */,
       inset 0 -1.125em 0 0 rgb(255 255 255 / 0.05) /* lower shade */;
   }
 }
 
 wa-textarea:not(:focus) {
-  &:not([filled]):not([disabled]) {
+  &:not([appearance='filled']):not([disabled]) {
     --box-shadow: var(--wa-shadow-xs);
   }
 }

src/styles/native/input.css

@@ -22,10 +22,10 @@
     --box-shadow: initial;
   }
 
-  /* Set custom properties for filled input variants via class="wa-accent" or <wa-input filled> */
+  /* Set custom properties for filled input variants via class="wa-accent" or <wa-input appearance="filled"> */
   input:where(:not(:host input)).wa-accent:where(&),
   :host(.wa-accent:where(&)),
-  :host([filled]:where(&)) {
+  :host([appearance='filled']:where(&)) {
     --background-color: var(--wa-color-neutral-fill-quiet);
     --border-color: var(--background-color);
   }

src/styles/themes/brutalist.css

@@ -601,8 +601,8 @@
 
   /* preventing shadows on all form input types */
   wa-input:not(:focus),
-  wa-input:not([filled]):not([disabled]),
-  wa-select:not([filled]):not([disabled]) {
+  wa-input:not([appearance=filled]):not([disabled]),
+  wa-select:not([appearance=filled]):not([disabled]) {
     --box-shadow: var(--wa-shadow-level-0);
     --border-width: 0 0 var(--wa-form-control-border-width) var(--wa-form-control-border-width);
   }

src/styles/themes/classic.css

@@ -434,9 +434,9 @@ wa-drawer {
   --spacing: var(--wa-space-l);
 }
 
-wa-input:not([filled]),
-wa-select:not([filled]),
-wa-textarea:not([filled]) {
+wa-input:not([appearance=filled]),
+wa-select:not([appearance=filled]),
+wa-textarea:not([appearance=filled]) {
   --wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width)
     color-mix(in oklab, var(--wa-color-focus), transparent 50%);
   --wa-focus-ring-offset: 0;

src/styles/themes/playful.css

@@ -500,9 +500,9 @@
 
   /* preventing shadows on all form input types */
   wa-input:not(:focus),
-  wa-input:not([filled]):not([disabled]),
+  wa-input:not([appearance=filled]):not([disabled]),
   wa-checkbox:not([checked]):not([indeterminate]),
-  wa-select:not([filled]):not([disabled]) {
+  wa-select:not([appearance=filled]):not([disabled]) {
     --box-shadow: var(--wa-shadow-level-0);
   }