add filled variant

docs/components/input.md

@@ -42,6 +42,14 @@ Add the `toggle-password` attribute to add a toggle button that will show the pa
 <sl-input type="password" placeholder="Password Toggle" size="large" toggle-password></sl-input>
 ```
 
+### Filled Inputs
+
+Add the `filled` attribute to draw a filled input.
+
+```html preview
+<sl-input placeholder="Type something" filled></sl-input>
+```
+
 ### Pill
 
 Use the `pill` attribute to give inputs rounded edges.

docs/components/select.md

@@ -44,6 +44,18 @@ Use the `clearable` attribute to make the control clearable.
 </sl-select>
 ```
 
+### Filled Selects
+
+Add the `filled` attribute to draw a filled select.
+
+```html preview
+<sl-select filled>
+  <sl-menu-item value="option-1">Option 1</sl-menu-item>
+  <sl-menu-item value="option-2">Option 2</sl-menu-item>
+  <sl-menu-item value="option-3">Option 3</sl-menu-item>
+</sl-select>
+```
+
 ### Pill
 
 Use the `pill` attribute to give selects rounded edges.

docs/components/textarea.md

@@ -30,9 +30,17 @@ Use the `placeholder` attribute to add a placeholder.
 <sl-textarea placeholder="Type something"></sl-textarea>
 ```
 
+### Filled Textareas
+
+Add the `filled` attribute to draw a filled textarea.
+
+```html preview
+<sl-textarea placeholder="Type something" filled></sl-textarea>
+```
+
 ### Disabled
 
-Use the `disabled` attribute to disable an input.
+Use the `disabled` attribute to disable a textarea.
 
 ```html preview
 <sl-textarea placeholder="Textarea" disabled></sl-textarea>

docs/resources/changelog.md

@@ -10,7 +10,8 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 
 - Added initial surface design tokens
 - Added missing background color to `<sl-details>`
-- Added the `outline` attribute to `<sl-button>` for outlined buttons [#522](https://github.com/shoelace-style/shoelace/issues/522)
+- Added the `outline` variation to `<sl-button>` [#522](https://github.com/shoelace-style/shoelace/issues/522)
+- Added the `filled` variation to `<sl-input>`, `<sl-textarea>`, and `<sl-select>` 
 - Added the `control` part to `<sl-select>` so you can target the main control with CSS [#538](https://github.com/shoelace-style/shoelace/issues/538)
 - Changed the default `distance` in `<sl-dropdown>` from `2` to `0` [#538](https://github.com/shoelace-style/shoelace/issues/538)
 - Modified the color scale to no longer use a luminance shift

src/components/input/input.styles.ts

@@ -20,48 +20,67 @@ export default css`
     font-family: var(--sl-input-font-family);
     font-weight: var(--sl-input-font-weight);
     letter-spacing: var(--sl-input-letter-spacing);
-    background-color: rgb(var(--sl-input-background-color));
-    border: solid var(--sl-input-border-width) rgb(var(--sl-input-border-color));
     vertical-align: middle;
     overflow: hidden;
-    transition: var(--sl-transition-fast) color, var(--sl-transition-fast) border, var(--sl-transition-fast) box-shadow;
     cursor: text;
+    transition: var(--sl-transition-fast) color, var(--sl-transition-fast) border, var(--sl-transition-fast) box-shadow,
+      var(--sl-transition-fast) background-color;
   }
 
-  .input:hover:not(.input--disabled) {
+  /* Standard inputs */
+  .input--standard {
+    background-color: rgb(var(--sl-input-background-color));
+    border: solid var(--sl-input-border-width) rgb(var(--sl-input-border-color));
+  }
+
+  .input--standard:hover:not(.input--disabled) {
     background-color: rgb(var(--sl-input-background-color-hover));
     border-color: rgb(var(--sl-input-border-color-hover));
   }
 
-  .input:hover:not(.input--disabled) .input__control {
-    color: rgb(var(--sl-input-color-hover));
-  }
-
-  .input.input--focused:not(.input--disabled) {
+  .input--standard.input--focused:not(.input--disabled) {
     background-color: rgb(var(--sl-input-background-color-focus));
     border-color: rgb(var(--sl-input-border-color-focus));
     box-shadow: var(--sl-focus-ring);
   }
 
-  .input.input--focused:not(.input--disabled) .input__control {
+  .input--standard.input--focused:not(.input--disabled) .input__control {
     color: rgb(var(--sl-input-color-focus));
   }
 
-  .input.input--disabled {
+  .input--standard.input--disabled {
     background-color: rgb(var(--sl-input-background-color-disabled));
     border-color: rgb(var(--sl-input-border-color-disabled));
     opacity: 0.5;
     cursor: not-allowed;
   }
 
-  .input.input--disabled .input__control {
+  .input--standard.input--disabled .input__control {
     color: rgb(var(--sl-input-color-disabled));
   }
 
-  .input.input--disabled .input__control::placeholder {
+  .input--standard.input--disabled .input__control::placeholder {
     color: rgb(var(--sl-input-placeholder-color-disabled));
   }
 
+  /* Filled inputs */
+  .input--filled {
+    background-color: rgb(var(--sl-color-neutral-100));
+    border: solid 1px rgb(var(--sl-color-neutral-100));
+    color: rgb(var(--sl-input-color));
+  }
+
+  .input--filled.input--focused:not(.input--disabled) {
+    background-color: rgb(var(--sl-color-neutral-0));
+    border-color: rgb(var(--sl-color-primary-500));
+    box-shadow: var(--sl-focus-ring);
+  }
+
+  .input--filled.input--disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
   .input__control {
     flex: 1 1 auto;
     font-family: inherit;
@@ -99,6 +118,10 @@ export default css`
     user-select: none;
   }
 
+  .input:hover:not(.input--disabled) .input__control {
+    color: rgb(var(--sl-input-color-hover));
+  }
+
   .input__control:focus {
     outline: none;
   }

src/components/input/input.ts

@@ -71,6 +71,9 @@ export default class SlInput extends LitElement {
   /** The input's value attribute. */
   @property() value = '';
 
+  /** Draws a filled input. */
+  @property({ type: Boolean, reflect: true }) filled = false;
+
   /** Draws a pill-style input with rounded edges. */
   @property({ type: Boolean, reflect: true }) pill = false;
 
@@ -293,6 +296,8 @@ export default class SlInput extends LitElement {
 
             // 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?.length === 0,

src/components/select/select.styles.ts

@@ -23,21 +23,26 @@ export default css`
     font-family: var(--sl-input-font-family);
     font-weight: var(--sl-input-font-weight);
     letter-spacing: var(--sl-input-letter-spacing);
-    background-color: rgb(var(--sl-input-background-color));
-    border: solid var(--sl-input-border-width) rgb(var(--sl-input-border-color));
     vertical-align: middle;
     overflow: hidden;
     transition: var(--sl-transition-fast) color, var(--sl-transition-fast) border, var(--sl-transition-fast) box-shadow;
     cursor: pointer;
   }
 
-  .select:not(.select--disabled) .select__control:hover {
+  /* Standard selects */
+  .select--standard .select__control {
+    background-color: rgb(var(--sl-input-background-color));
+    border: solid var(--sl-input-border-width) rgb(var(--sl-input-border-color));
+    color: rgb(var(--sl-input-color));
+  }
+
+  .select--standard:not(.select--disabled) .select__control:hover {
     background-color: rgb(var(--sl-input-background-color-hover));
     border-color: rgb(var(--sl-input-border-color-hover));
     color: rgb(var(--sl-input-color-hover));
   }
 
-  .select.select--focused:not(.select--disabled) .select__control {
+  .select--standard.select--focused:not(.select--disabled) .select__control {
     background-color: rgb(var(--sl-input-background-color-focus));
     border-color: rgb(var(--sl-input-border-color-focus));
     box-shadow: var(--sl-focus-ring);
@@ -45,7 +50,7 @@ export default css`
     color: rgb(var(--sl-input-color-focus));
   }
 
-  .select--disabled .select__control {
+  .select--standard.select--disabled .select__control {
     background-color: rgb(var(--sl-input-background-color-disabled));
     border-color: rgb(var(--sl-input-border-color-disabled));
     color: rgb(var(--sl-input-color-disabled));
@@ -54,6 +59,26 @@ export default css`
     outline: none;
   }
 
+  /* Filled selects */
+  .select--filled .select__control {
+    background-color: rgb(var(--sl-color-neutral-100));
+    border: solid 1px rgb(var(--sl-color-neutral-100));
+    color: rgb(var(--sl-input-color));
+  }
+
+  .select--filled.select--focused:not(.select--disabled) .select__control {
+    background-color: rgb(var(--sl-color-neutral-0));
+    border-color: rgb(var(--sl-color-primary-500));
+    box-shadow: var(--sl-focus-ring);
+    outline: none;
+  }
+
+  .select--filled.select--disabled .select__control {
+    opacity: 0.5;
+    cursor: not-allowed;
+    outline: none;
+  }
+
   .select--disabled .select__tags,
   .select--disabled .select__clear {
     pointer-events: none;

src/components/select/select.ts

@@ -43,7 +43,7 @@ let id = 0;
  * @event sl-blur - Emitted when the control loses focus.
  *
  * @csspart base - The component's base wrapper.
- * @csspart clear-button - The input's clear button, exported from <sl-input>.
+ * @csspart clear-button - The clear button.
  * @csspart control - The container that holds the prefix, label, and suffix.
  * @csspart form-control - The form control that wraps the label, input, and help text.
  * @csspart help-text - The select's help text.
@@ -106,6 +106,9 @@ export default class SlSelect extends LitElement {
   /** The value of the control. This will be a string or an array depending on `multiple`. */
   @property() value: string | Array<string> = '';
 
+  /** Draws a filled select. */
+  @property({ type: Boolean, reflect: true }) filled = false;
+
   /** Draws a pill-style select with rounded edges. */
   @property({ type: Boolean, reflect: true }) pill = false;
 
@@ -453,6 +456,8 @@ export default class SlSelect extends LitElement {
             'select--clearable': this.clearable,
             'select--disabled': this.disabled,
             'select--multiple': this.multiple,
+            'select--standard': !this.filled,
+            'select--filled': this.filled,
             'select--has-tags': this.multiple && this.displayTags.length > 0,
             'select--placeholder-visible': this.displayLabel === '',
             'select--small': this.size === 'small',

src/components/textarea/textarea.styles.ts

@@ -19,47 +19,73 @@ export default css`
     font-weight: var(--sl-input-font-weight);
     line-height: var(--sl-line-height-normal);
     letter-spacing: var(--sl-input-letter-spacing);
-    background-color: rgb(var(--sl-input-background-color));
-    border: solid var(--sl-input-border-width) rgb(var(--sl-input-border-color));
     vertical-align: middle;
-    transition: var(--sl-transition-fast) color, var(--sl-transition-fast) border, var(--sl-transition-fast) box-shadow;
+    transition: var(--sl-transition-fast) color, var(--sl-transition-fast) border, var(--sl-transition-fast) box-shadow,
+      var(--sl-transition-fast) background-color;
     cursor: text;
   }
 
-  .textarea:hover:not(.textarea--disabled) {
+  /* Standard textareas */
+  .textarea--standard {
+    background-color: rgb(var(--sl-input-background-color));
+    border: solid var(--sl-input-border-width) rgb(var(--sl-input-border-color));
+  }
+
+  .textarea--standard:hover:not(.textarea--disabled) {
     background-color: rgb(var(--sl-input-background-color-hover));
     border-color: rgb(var(--sl-input-border-color-hover));
   }
-  .textarea:hover:not(.textarea--disabled) .textarea__control {
+  .textarea--standard:hover:not(.textarea--disabled) .textarea__control {
     color: rgb(var(--sl-input-color-hover));
   }
 
-  .textarea.textarea--focused:not(.textarea--disabled) {
+  .textarea--standard.textarea--focused:not(.textarea--disabled) {
     background-color: rgb(var(--sl-input-background-color-focus));
     border-color: rgb(var(--sl-input-border-color-focus));
     box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-color-primary-500) / var(--sl-focus-ring-alpha));
     color: rgb(var(--sl-input-color-focus));
   }
 
-  .textarea.textarea--focused:not(.textarea--disabled) .textarea__control {
+  .textarea--standard.textarea--focused:not(.textarea--disabled) .textarea__control {
     color: rgb(var(--sl-input-color-focus));
   }
 
-  .textarea.textarea--disabled {
+  .textarea--standard.textarea--disabled {
     background-color: rgb(var(--sl-input-background-color-disabled));
     border-color: rgb(var(--sl-input-border-color-disabled));
     opacity: 0.5;
     cursor: not-allowed;
   }
 
-  .textarea.textarea--disabled .textarea__control {
+  .textarea--standard.textarea--disabled .textarea__control {
     color: rgb(var(--sl-input-color-disabled));
   }
 
-  .textarea.textarea--disabled .textarea__control::placeholder {
+  .textarea--standard.textarea--disabled .textarea__control::placeholder {
     color: rgb(var(--sl-input-placeholder-color-disabled));
   }
 
+  /* Filled textareas */
+  .textarea--filled {
+    background-color: rgb(var(--sl-color-neutral-100));
+    border: solid 1px rgb(var(--sl-color-neutral-100));
+  }
+
+  .textarea--filled:hover:not(.textarea--disabled) .textarea__control {
+    color: rgb(var(--sl-input-color-hover));
+  }
+
+  .textarea--filled.textarea--focused:not(.textarea--disabled) {
+    background-color: rgb(var(--sl-color-neutral-0));
+    border-color: rgb(var(--sl-color-primary-500));
+    box-shadow: var(--sl-focus-ring);
+  }
+
+  .textarea--filled.textarea--disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
   .textarea__control {
     flex: 1 1 auto;
     font-family: inherit;

src/components/textarea/textarea.ts

@@ -53,6 +53,9 @@ export default class SlTextarea extends LitElement {
   /** The textarea's value attribute. */
   @property() value = '';
 
+  /** Draws a filled textarea. */
+  @property({ type: Boolean, reflect: true }) filled = false;
+
   /** The textarea's label. Alternatively, you can use the label slot. */
   @property() label: string;
 
@@ -297,6 +300,8 @@ export default class SlTextarea extends LitElement {
             'textarea--small': this.size === 'small',
             'textarea--medium': this.size === 'medium',
             'textarea--large': this.size === 'large',
+            'textarea--standard': !this.filled,
+            'textarea--filled': this.filled,
             'textarea--disabled': this.disabled,
             'textarea--focused': this.hasFocus,
             'textarea--empty': this.value?.length === 0,