From daebd0847596f04037866b33e34d983075a66d15 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Fri, 18 Nov 2022 09:56:05 -0500
Subject: [PATCH] add validation states to all form controls; closes #1011

---
 docs/resources/changelog.md                 |  12 ++
 src/components/button/button.ts             |  72 ++++++++++--
 src/components/checkbox/checkbox.ts         |  17 ++-
 src/components/color-picker/color-picker.ts |  35 +++---
 src/components/input/input.ts               |  23 ++--
 src/components/radio-group/radio-group.ts   |  19 ++--
 src/components/range/range.ts               |  23 ++--
 src/components/select/select.ts             |  19 +++-
 src/components/switch/switch.ts             |  17 +--
 src/components/textarea/textarea.ts         |  19 ++--
 src/internal/default-value.ts               |   6 +-
 src/internal/form.ts                        | 119 ++++++++++++++++----
 src/internal/shoelace-element.ts            |  26 +++++
 13 files changed, 295 insertions(+), 112 deletions(-)

diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md
index 4bdf2901e..e60361a1f 100644
--- a/docs/resources/changelog.md
+++ b/docs/resources/changelog.md
@@ -13,6 +13,16 @@ New versions of Shoelace are released as-needed and generally occur when a criti
 - 🚨 BREAKING: Removed the `fieldset` property from `<sl-radio-group>` (use CSS parts if you want to keep the border) [#965](https://github.com/shoelace-style/shoelace/issues/965)
 - 🚨 BREAKING: Removed `base` and `label` parts from `<sl-radio-group>` (use `form-control` and `form-control__label` instead) [#965](https://github.com/shoelace-style/shoelace/issues/965)
 - 🚨 BREAKING: Removed the `base` part from `<sl-icon>` (style the host element directly instead)
+- 🚨 BREAKING: Removed the `invalid` attribute from form controls (use `[data-invalid]` to target it with CSS)
+- Added validation states to all form controls to allow styling based on various validation states [#1011](https://github.com/shoelace-style/shoelace/issues/1011)
+  - `data-required` - indicates that a value is required
+  - `data-optional` - indicates that a value is NOT required
+  - `data-invalid` - indicates that the form control is invalid
+  - `data-valid` - indicates that the form control is valid
+  - `data-user-invalid` - indicates the form control is invalid and the user has interacted with it
+  - `data-user-valid` - indicates the form control is valid and the user has interacted with it
+- Added `checkValidity()` method to all form controls
+- Added `reportValidity()` method to `<sl-range>`
 - Added `button--checked` to `<sl-radio-button>` and `control--checked` to `<sl-radio>` to style just the checked state [#933](https://github.com/shoelace-style/shoelace/pull/933)
 - Added tests for `<sl-menu>`, `<sl-menu-item>`, `<sl-menu-label>`, `<sl-rating>`, `<sl-relative-time>`, `<sl-skeleton>`, `<sl-tab-panel>` and `<sl-tag>` [#935](https://github.com/shoelace-style/shoelace/pull/935)
   [#949](https://github.com/shoelace-style/shoelace/pull/949) [#951](https://github.com/shoelace-style/shoelace/pull/951) [#953](https://github.com/shoelace-style/shoelace/pull/953)
@@ -37,6 +47,7 @@ New versions of Shoelace are released as-needed and generally occur when a criti
 - Fixed a bug in `<sl-radio-group>` that prevented the `invalid` property from correctly reflecting validity sometimes [#992](https://github.com/shoelace-style/shoelace/issues/992)
 - Fixed a bug in `<sl-tree>` that prevented selections from working correctly on dynamically added tree items [#963](https://github.com/shoelace-style/shoelace/issues/963)
 - Fixed module paths in `custom-elements.json` so they point to the dist file instead of the source file [#725](https://github.com/shoelace-style/shoelace/issues/725)
+- Fixed an incorrect return value for `reportValidity()` in `<sl-color-picker>`
 - Improved `<sl-badge>` to improve padding and render relative to the current font size
 - Improved how many components display in forced-colors mode / Windows High Contrast mode
   - Improved `<sl-color-picker>` so it's usable in forced-colors mode
@@ -50,6 +61,7 @@ New versions of Shoelace are released as-needed and generally occur when a criti
   - Improved `<sl-tree-item>` so selected items are visible in forced-colors mode
   - Improved `<sl-tab-group>` so tabs are cleaner and easier to understand in forced-colors mode
 - Moved all component descriptions to `@summary` to get them within documentation tools [#962](https://github.com/shoelace-style/shoelace/pull/962)
+- Refactored form controls to use the `ShoelaceFormControl` interface to improve type safety and consistency
 - Updated Lit to 2.4.1
 - Updated Bootstrap Icons to 1.10.2
 - Updated TypeScript to 4.8.4
diff --git a/src/components/button/button.ts b/src/components/button/button.ts
index c9ffa9777..191a5cd3e 100644
--- a/src/components/button/button.ts
+++ b/src/components/button/button.ts
@@ -5,10 +5,12 @@ import { html, literal } from 'lit/static-html.js';
 import { FormSubmitController } from '../../internal/form';
 import ShoelaceElement from '../../internal/shoelace-element';
 import { HasSlotController } from '../../internal/slot';
+import { watch } from '../../internal/watch';
 import { LocalizeController } from '../../utilities/localize';
 import '../icon/icon';
 import '../spinner/spinner';
 import styles from './button.styles';
+import type { ShoelaceFormControl } from '../../internal/shoelace-element';
 import type { CSSResultGroup } from 'lit';
 
 /**
@@ -34,13 +36,13 @@ import type { CSSResultGroup } from 'lit';
  * @csspart caret - The button's caret icon.
  */
 @customElement('sl-button')
-export default class SlButton extends ShoelaceElement {
+export default class SlButton extends ShoelaceElement implements ShoelaceFormControl {
   static styles: CSSResultGroup = styles;
 
   @query('.button') button: HTMLButtonElement | HTMLLinkElement;
 
   private readonly formSubmitController = new FormSubmitController(this, {
-    form: (input: HTMLInputElement) => {
+    form: input => {
       // Buttons support a form attribute that points to an arbitrary form, so if this attribute it set we need to query
       // the form from the same root using its id
       if (input.hasAttribute('form')) {
@@ -57,6 +59,7 @@ export default class SlButton extends ShoelaceElement {
   private readonly localize = new LocalizeController(this);
 
   @state() private hasFocus = false;
+  @state() invalid = false;
 
   /** The button's variant. */
   @property({ reflect: true }) variant: 'default' | 'primary' | 'success' | 'neutral' | 'warning' | 'danger' | 'text' =
@@ -90,16 +93,16 @@ export default class SlButton extends ShoelaceElement {
   @property() type: 'button' | 'submit' | 'reset' = 'button';
 
   /** An optional name for the button. Ignored when `href` is set. */
-  @property() name?: string;
+  @property() name = '';
 
   /** An optional value for the button. Ignored when `href` is set. */
-  @property() value?: string;
+  @property() value = '';
 
   /** When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`. */
-  @property() href?: string;
+  @property() href = '';
 
   /** Tells the browser where to open the link. Only used when `href` is set. */
-  @property() target?: '_blank' | '_parent' | '_self' | '_top';
+  @property() target: '_blank' | '_parent' | '_self' | '_top';
 
   /** Tells the browser to download the linked file as this filename. Only used when `href` is set. */
   @property() download?: string;
@@ -122,6 +125,12 @@ export default class SlButton extends ShoelaceElement {
   /** Used to override the form owner's `target` attribute. */
   @property({ attribute: 'formtarget' }) formTarget: '_self' | '_blank' | '_parent' | '_top' | string;
 
+  firstUpdated() {
+    if (this.isButton()) {
+      this.invalid = !(this.button as HTMLButtonElement).checkValidity();
+    }
+  }
+
   /** Simulates a click on the button. */
   click() {
     this.button.click();
@@ -137,6 +146,32 @@ export default class SlButton extends ShoelaceElement {
     this.button.blur();
   }
 
+  /** Checks for validity but does not show the browser's validation message. */
+  checkValidity() {
+    if (this.isButton()) {
+      return (this.button as HTMLButtonElement).checkValidity();
+    }
+
+    return true;
+  }
+
+  /** Checks for validity and shows the browser's validation message if the control is invalid. */
+  reportValidity() {
+    if (this.isButton()) {
+      return (this.button as HTMLButtonElement).reportValidity();
+    }
+
+    return true;
+  }
+
+  /** Sets a custom validation message. If `message` is not empty, the field will be considered invalid. */
+  setCustomValidity(message: string) {
+    if (this.isButton()) {
+      (this.button as HTMLButtonElement).setCustomValidity(message);
+      this.invalid = !(this.button as HTMLButtonElement).checkValidity();
+    }
+  }
+
   handleBlur() {
     this.hasFocus = false;
     this.emit('sl-blur');
@@ -163,11 +198,29 @@ export default class SlButton extends ShoelaceElement {
     }
   }
 
+  @watch('disabled', { waitUntilFirstUpdate: true })
+  handleDisabledChange() {
+    // Disabled form controls are always valid, so we need to recheck validity when the state changes
+    if (this.isButton()) {
+      this.button.disabled = this.disabled;
+      this.invalid = !(this.button as HTMLButtonElement).checkValidity();
+    }
+  }
+
+  private isButton() {
+    return this.href ? false : true;
+  }
+
+  private isLink() {
+    return this.href ? true : false;
+  }
+
   render() {
-    const isLink = this.href ? true : false;
+    const isLink = this.isLink();
     const tag = isLink ? literal`a` : literal`button`;
 
-    /* eslint-disable lit/binding-positions, lit/no-invalid-html */
+    /* eslint-disable lit/no-invalid-html */
+    /* eslint-disable lit/binding-positions */
     return html`
       <${tag}
         part="base"
@@ -226,7 +279,8 @@ export default class SlButton extends ShoelaceElement {
         ${this.loading ? html`<sl-spinner></sl-spinner>` : ''}
       </${tag}>
     `;
-    /* eslint-enable lit/binding-positions, lit/no-invalid-html */
+    /* eslint-enable lit/no-invalid-html */
+    /* eslint-enable lit/binding-positions */
   }
 }
 
diff --git a/src/components/checkbox/checkbox.ts b/src/components/checkbox/checkbox.ts
index dcaae848b..4025ea029 100644
--- a/src/components/checkbox/checkbox.ts
+++ b/src/components/checkbox/checkbox.ts
@@ -9,6 +9,7 @@ import ShoelaceElement from '../../internal/shoelace-element';
 import { watch } from '../../internal/watch';
 import '../icon/icon';
 import styles from './checkbox.styles';
+import type { ShoelaceFormControl } from '../../internal/shoelace-element';
 import type { CSSResultGroup } from 'lit';
 
 /**
@@ -32,7 +33,7 @@ import type { CSSResultGroup } from 'lit';
  * @csspart label - The checkbox label.
  */
 @customElement('sl-checkbox')
-export default class SlCheckbox extends ShoelaceElement {
+export default class SlCheckbox extends ShoelaceElement implements ShoelaceFormControl {
   static styles: CSSResultGroup = styles;
 
   @query('input[type="checkbox"]') input: HTMLInputElement;
@@ -45,6 +46,7 @@ export default class SlCheckbox extends ShoelaceElement {
   });
 
   @state() private hasFocus = false;
+  @state() invalid = false;
 
   /** Name of the HTML form control. Submitted with the form as part of a name/value pair. */
   @property() name: string;
@@ -64,12 +66,8 @@ export default class SlCheckbox extends ShoelaceElement {
   /** Draws the checkbox in an indeterminate state. Usually applies to a checkbox that represents "select all" or "select none" when the items to which it applies are a mix of selected and unselected. */
   @property({ type: Boolean, reflect: true }) indeterminate = false;
 
-  /** This will be true when the control is in an invalid state. Validity is determined by the `required` prop. */
-  @property({ type: Boolean, reflect: true }) invalid = false;
-
   /** Gets or sets the default value used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. */
-  @defaultValue('checked')
-  defaultChecked = false;
+  @defaultValue('checked') defaultChecked = false;
 
   firstUpdated() {
     this.invalid = !this.input.checkValidity();
@@ -90,6 +88,11 @@ export default class SlCheckbox extends ShoelaceElement {
     this.input.blur();
   }
 
+  /** Checks for validity but does not show the browser's validation message. */
+  checkValidity() {
+    return this.input.checkValidity();
+  }
+
   /** Checks for validity and shows the browser's validation message if the control is invalid. */
   reportValidity() {
     return this.input.reportValidity();
@@ -127,6 +130,8 @@ export default class SlCheckbox extends ShoelaceElement {
   @watch('checked', { waitUntilFirstUpdate: true })
   @watch('indeterminate', { waitUntilFirstUpdate: true })
   handleStateChange() {
+    this.input.checked = this.checked; // force a sync update
+    this.input.indeterminate = this.indeterminate; // force a sync update
     this.invalid = !this.input.checkValidity();
   }
 
diff --git a/src/components/color-picker/color-picker.ts b/src/components/color-picker/color-picker.ts
index 73cdf1730..caf861a72 100644
--- a/src/components/color-picker/color-picker.ts
+++ b/src/components/color-picker/color-picker.ts
@@ -19,6 +19,7 @@ import '../icon/icon';
 import '../input/input';
 import '../visually-hidden/visually-hidden';
 import styles from './color-picker.styles';
+import type { ShoelaceFormControl } from '../../internal/shoelace-element';
 import type SlDropdown from '../dropdown/dropdown';
 import type SlInput from '../input/input';
 import type { CSSResultGroup } from 'lit';
@@ -84,7 +85,7 @@ declare const EyeDropper: EyeDropperConstructor;
  * @cssproperty --swatch-size - The size of each predefined color swatch.
  */
 @customElement('sl-color-picker')
-export default class SlColorPicker extends ShoelaceElement {
+export default class SlColorPicker extends ShoelaceElement implements ShoelaceFormControl {
   static styles: CSSResultGroup = styles;
 
   @query('[part~="input"]') input: SlInput;
@@ -105,13 +106,13 @@ export default class SlColorPicker extends ShoelaceElement {
   @state() private lightness = 100;
   @state() private brightness = 100;
   @state() private alpha = 100;
+  @state() invalid = false;
 
   /** The current color. */
   @property() value = '';
 
   /** Gets or sets the default value used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. */
-  @defaultValue()
-  defaultValue = '';
+  @defaultValue() defaultValue = '';
 
   /**
    * The color picker's label. This will not be displayed, but it will be announced by assistive devices. If you need to
@@ -141,12 +142,6 @@ export default class SlColorPicker extends ShoelaceElement {
   /** Disables the color picker. */
   @property({ type: Boolean, reflect: true }) disabled = false;
 
-  /**
-   * This will be true when the control is in an invalid state. Validity is determined by the `setCustomValidity()`
-   * method using the browser's constraint validation API.
-   */
-  @property({ type: Boolean, reflect: true }) invalid = false;
-
   /**
    * Enable this option to prevent the panel from being clipped when the component is placed inside a container with
    * `overflow: auto|scroll`.
@@ -233,22 +228,20 @@ export default class SlColorPicker extends ShoelaceElement {
     return clamp(((((200 - this.saturation) * brightness) / 100) * 5) / 10, 0, 100);
   }
 
+  /** Checks for validity but does not show the browser's validation message. */
+  checkValidity() {
+    return this.input.checkValidity();
+  }
+
   /** Checks for validity and shows the browser's validation message if the control is invalid. */
   reportValidity() {
-    // If the input is invalid, show the dropdown so the browser can focus on it
     if (!this.inline && this.input.invalid) {
-      return new Promise<void>(resolve => {
-        this.dropdown.addEventListener(
-          'sl-after-show',
-          () => {
-            this.input.reportValidity();
-            resolve();
-          },
-          { once: true }
-        );
-        this.dropdown.show();
-      });
+      // If the input is inline and invalid, show the dropdown so the browser can focus on it
+      this.dropdown.show();
+      this.addEventListener('sl-after-show', () => this.input.reportValidity(), { once: true });
+      return this.checkValidity();
     }
+
     return this.input.reportValidity();
   }
 
diff --git a/src/components/input/input.ts b/src/components/input/input.ts
index d62de0e29..a2d0cd163 100644
--- a/src/components/input/input.ts
+++ b/src/components/input/input.ts
@@ -11,6 +11,7 @@ import { watch } from '../../internal/watch';
 import { LocalizeController } from '../../utilities/localize';
 import '../icon/icon';
 import styles from './input.styles';
+import type { ShoelaceFormControl } from '../../internal/shoelace-element';
 import type { CSSResultGroup } from 'lit';
 
 // It's currently impossible to hide Firefox's built-in clear icon when using <input type="date|time">, so we need this
@@ -58,7 +59,7 @@ const isFirefox = isChromium ? false : navigator.userAgent.includes('Firefox');
  * @csspart suffix - The input suffix container.
  */
 @customElement('sl-input')
-export default class SlInput extends ShoelaceElement {
+export default class SlInput extends ShoelaceElement implements ShoelaceFormControl {
   static styles: CSSResultGroup = styles;
 
   @query('.input__control') input: HTMLInputElement;
@@ -68,6 +69,7 @@ export default class SlInput extends ShoelaceElement {
   private readonly localize = new LocalizeController(this);
 
   @state() private hasFocus = false;
+  @state() invalid = false;
 
   /** The input's type. */
   @property({ reflect: true }) type:
@@ -92,8 +94,7 @@ export default class SlInput extends ShoelaceElement {
   @property() value = '';
 
   /** Gets or sets the default value used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. */
-  @defaultValue()
-  defaultValue = '';
+  @defaultValue() defaultValue = '';
 
   /** Draws a filled input. */
   @property({ type: Boolean, reflect: true }) filled = false;
@@ -135,10 +136,10 @@ export default class SlInput extends ShoelaceElement {
   @property({ type: Number }) maxlength: number;
 
   /** The input's minimum value. */
-  @property() min: number | string;
+  @property() min: number;
 
   /** The input's maximum value. */
-  @property() max: number | string;
+  @property() max: number;
 
   /**
    * Specifies the granularity that the value must adhere to, or the special value `any` which means no stepping is
@@ -152,12 +153,6 @@ export default class SlInput extends ShoelaceElement {
   /** Makes the input a required field. */
   @property({ type: Boolean, reflect: true }) required = false;
 
-  /**
-   * This will be true when the control is in an invalid state. Validity is determined by props such as `type`,
-   * `required`, `minlength`, `maxlength`, and `pattern` using the browser's constraint validation API.
-   */
-  @property({ type: Boolean, reflect: true }) invalid = false;
-
   /** The input's autocapitalize attribute. */
   @property() autocapitalize: 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters';
 
@@ -252,6 +247,11 @@ export default class SlInput extends ShoelaceElement {
     }
   }
 
+  /** Checks for validity but does not show the browser's validation message. */
+  checkValidity() {
+    return this.input.checkValidity();
+  }
+
   /** Checks for validity and shows the browser's validation message if the control is invalid. */
   reportValidity() {
     return this.input.reportValidity();
@@ -338,6 +338,7 @@ export default class SlInput extends ShoelaceElement {
 
   @watch('value', { waitUntilFirstUpdate: true })
   handleValueChange() {
+    this.input.value = this.value; // force a sync update
     this.invalid = !this.input.checkValidity();
   }
 
diff --git a/src/components/radio-group/radio-group.ts b/src/components/radio-group/radio-group.ts
index 7b50ddb41..b5a3ac602 100644
--- a/src/components/radio-group/radio-group.ts
+++ b/src/components/radio-group/radio-group.ts
@@ -7,6 +7,7 @@ import { HasSlotController } from '../../internal/slot';
 import { watch } from '../../internal/watch';
 import '../button-group/button-group';
 import styles from './radio-group.styles';
+import type { ShoelaceFormControl } from '../../internal/shoelace-element';
 import type SlRadioButton from '../radio-button/radio-button';
 import type SlRadio from '../radio/radio';
 import type { CSSResultGroup } from 'lit';
@@ -32,11 +33,11 @@ import type { CSSResultGroup } from 'lit';
  * @csspart button-group__base - The button group's `base` part.
  */
 @customElement('sl-radio-group')
-export default class SlRadioGroup extends ShoelaceElement {
+export default class SlRadioGroup extends ShoelaceElement implements ShoelaceFormControl {
   static styles: CSSResultGroup = styles;
 
   protected readonly formSubmitController = new FormSubmitController(this, {
-    defaultValue: (control: SlRadioGroup) => control.defaultValue
+    defaultValue: control => control.defaultValue
   });
   private readonly hasSlotController = new HasSlotController(this, 'help-text', 'label');
 
@@ -46,7 +47,8 @@ export default class SlRadioGroup extends ShoelaceElement {
   @state() private hasButtonGroup = false;
   @state() private errorMessage = '';
   @state() private customErrorMessage = '';
-  @state() private defaultValue = '';
+  @state() defaultValue = '';
+  @state() invalid = false;
 
   /**
    * The radio group label. Required for proper accessibility. If you need to display HTML, you can use the `label` slot
@@ -63,12 +65,6 @@ export default class SlRadioGroup extends ShoelaceElement {
   /** The name assigned to the radio controls. */
   @property() name = 'option';
 
-  /**
-   * This will be true when the control is in an invalid state. Validity is determined by props such as `type`,
-   * `required`, `minlength`, `maxlength`, and `pattern` using the browser's constraint validation API.
-   */
-  @property({ type: Boolean, reflect: true }) invalid = false;
-
   /** Ensures a child radio is checked before allowing the containing form to submit. */
   @property({ type: Boolean, reflect: true }) required = false;
 
@@ -89,6 +85,11 @@ export default class SlRadioGroup extends ShoelaceElement {
     this.invalid = !this.validity.valid;
   }
 
+  /** Checks for validity but does not show the browser's validation message. */
+  checkValidity() {
+    return this.validity.valid;
+  }
+
   /** Sets a custom validation message. If `message` is not empty, the field will be considered invalid. */
   setCustomValidity(message = '') {
     this.customErrorMessage = message;
diff --git a/src/components/range/range.ts b/src/components/range/range.ts
index a5b7daa72..1702dd847 100644
--- a/src/components/range/range.ts
+++ b/src/components/range/range.ts
@@ -10,6 +10,7 @@ import { HasSlotController } from '../../internal/slot';
 import { watch } from '../../internal/watch';
 import { LocalizeController } from '../../utilities/localize';
 import styles from './range.styles';
+import type { ShoelaceFormControl } from '../../internal/shoelace-element';
 import type { CSSResultGroup } from 'lit';
 
 /**
@@ -41,7 +42,7 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --track-active-offset - The point of origin of the active track.
  */
 @customElement('sl-range')
-export default class SlRange extends ShoelaceElement {
+export default class SlRange extends ShoelaceElement implements ShoelaceFormControl {
   static styles: CSSResultGroup = styles;
 
   @query('.range__control') input: HTMLInputElement;
@@ -55,6 +56,7 @@ export default class SlRange extends ShoelaceElement {
 
   @state() private hasFocus = false;
   @state() private hasTooltip = false;
+  @state() invalid = false;
 
   /** The input's name attribute. */
   @property() name = '';
@@ -71,12 +73,6 @@ export default class SlRange extends ShoelaceElement {
   /** Disables the range. */
   @property({ type: Boolean, reflect: true }) disabled = false;
 
-  /**
-   * This will be true when the control is in an invalid state. Validity in range inputs is determined by the message
-   * provided by the `setCustomValidity` method.
-   */
-  @property({ type: Boolean, reflect: true }) invalid = false;
-
   /** The input's min attribute. */
   @property({ type: Number }) min = 0;
 
@@ -93,8 +89,7 @@ export default class SlRange extends ShoelaceElement {
   @property({ attribute: false }) tooltipFormatter: (value: number) => string = (value: number) => value.toString();
 
   /** Gets or sets the default value used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. */
-  @defaultValue()
-  defaultValue = 0;
+  @defaultValue() defaultValue = 0;
 
   connectedCallback() {
     super.connectedCallback();
@@ -128,6 +123,16 @@ export default class SlRange extends ShoelaceElement {
     this.input.blur();
   }
 
+  /** Checks for validity but does not show the browser's validation message. */
+  checkValidity() {
+    return this.input.checkValidity();
+  }
+
+  /** Checks for validity and shows the browser's validation message if the control is invalid. */
+  reportValidity() {
+    return this.input.reportValidity();
+  }
+
   /** Sets a custom validation message. If `message` is not empty, the field will be considered invalid. */
   setCustomValidity(message: string) {
     this.input.setCustomValidity(message);
diff --git a/src/components/select/select.ts b/src/components/select/select.ts
index 2298b2c4e..d8750b852 100644
--- a/src/components/select/select.ts
+++ b/src/components/select/select.ts
@@ -13,6 +13,7 @@ import '../icon/icon';
 import '../menu/menu';
 import '../tag/tag';
 import styles from './select.styles';
+import type { ShoelaceFormControl } from '../../internal/shoelace-element';
 import type SlDropdown from '../dropdown/dropdown';
 import type SlIconButton from '../icon-button/icon-button';
 import type SlMenuItem from '../menu-item/menu-item';
@@ -41,6 +42,7 @@ import type { TemplateResult, CSSResultGroup } from 'lit';
  *
  * @event sl-clear - Emitted when the clear button is activated.
  * @event sl-change - Emitted when the control's value changes.
+ * @event sl-input - Emitted when the control receives input.
  * @event sl-focus - Emitted when the control gains focus.
  * @event sl-blur - Emitted when the control loses focus.
  *
@@ -63,7 +65,7 @@ import type { TemplateResult, CSSResultGroup } from 'lit';
  * @csspart tags - The container in which multi select options are rendered.
  */
 @customElement('sl-select')
-export default class SlSelect extends ShoelaceElement {
+export default class SlSelect extends ShoelaceElement implements ShoelaceFormControl {
   static styles: CSSResultGroup = styles;
 
   @query('.select') dropdown: SlDropdown;
@@ -82,6 +84,7 @@ export default class SlSelect extends ShoelaceElement {
   @state() private isOpen = false;
   @state() private displayLabel = '';
   @state() private displayTags: TemplateResult[] = [];
+  @state() invalid = false;
 
   /** Enables multi select. With this enabled, value will be an array. */
   @property({ type: Boolean, reflect: true }) multiple = false;
@@ -137,12 +140,8 @@ export default class SlSelect extends ShoelaceElement {
   /** Adds a clear button when the select is populated. */
   @property({ type: Boolean }) clearable = false;
 
-  /** This will be true when the control is in an invalid state. Validity is determined by the `required` prop. */
-  @property({ type: Boolean, reflect: true }) invalid = false;
-
   /** Gets or sets the default value used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. */
-  @defaultValue()
-  defaultValue = '';
+  @defaultValue() defaultValue = '';
 
   connectedCallback() {
     super.connectedCallback();
@@ -163,6 +162,11 @@ export default class SlSelect extends ShoelaceElement {
     this.resizeObserver.unobserve(this);
   }
 
+  /** Checks for validity but does not show the browser's validation message. */
+  checkValidity() {
+    return this.input.checkValidity();
+  }
+
   /** Checks for validity and shows the browser's validation message if the control is invalid. */
   reportValidity() {
     return this.input.reportValidity();
@@ -365,8 +369,11 @@ export default class SlSelect extends ShoelaceElement {
   async handleValueChange() {
     this.syncItemsFromValue();
     await this.updateComplete;
+
     this.invalid = !this.input.checkValidity();
+
     this.emit('sl-change');
+    this.emit('sl-input');
   }
 
   resizeMenu() {
diff --git a/src/components/switch/switch.ts b/src/components/switch/switch.ts
index d9844beb8..423d1137f 100644
--- a/src/components/switch/switch.ts
+++ b/src/components/switch/switch.ts
@@ -8,6 +8,7 @@ import { FormSubmitController } from '../../internal/form';
 import ShoelaceElement from '../../internal/shoelace-element';
 import { watch } from '../../internal/watch';
 import styles from './switch.styles';
+import type { ShoelaceFormControl } from '../../internal/shoelace-element';
 import type { CSSResultGroup } from 'lit';
 
 /**
@@ -32,7 +33,7 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --thumb-size - The size of the thumb.
  */
 @customElement('sl-switch')
-export default class SlSwitch extends ShoelaceElement {
+export default class SlSwitch extends ShoelaceElement implements ShoelaceFormControl {
   static styles: CSSResultGroup = styles;
 
   @query('input[type="checkbox"]') input: HTMLInputElement;
@@ -45,6 +46,7 @@ export default class SlSwitch extends ShoelaceElement {
   });
 
   @state() private hasFocus = false;
+  @state() invalid = false;
 
   /** The switch's name attribute. */
   @property() name: string;
@@ -61,12 +63,8 @@ export default class SlSwitch extends ShoelaceElement {
   /** Draws the switch in a checked state. */
   @property({ type: Boolean, reflect: true }) checked = false;
 
-  /** This will be true when the control is in an invalid state. Validity is determined by the `required` prop. */
-  @property({ type: Boolean, reflect: true }) invalid = false;
-
   /** Gets or sets the default value used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. */
-  @defaultValue('checked')
-  defaultChecked = false;
+  @defaultValue('checked') defaultChecked = false;
 
   firstUpdated() {
     this.invalid = !this.input.checkValidity();
@@ -87,6 +85,11 @@ export default class SlSwitch extends ShoelaceElement {
     this.input.blur();
   }
 
+  /** Checks for validity but does not show the browser's validation message. */
+  checkValidity() {
+    return this.input.checkValidity();
+  }
+
   /** Checks for validity and shows the browser's validation message if the control is invalid. */
   reportValidity() {
     return this.input.reportValidity();
@@ -105,7 +108,7 @@ export default class SlSwitch extends ShoelaceElement {
 
   @watch('checked', { waitUntilFirstUpdate: true })
   handleCheckedChange() {
-    this.input.checked = this.checked;
+    this.input.checked = this.checked; // force a sync update
     this.invalid = !this.input.checkValidity();
   }
 
diff --git a/src/components/textarea/textarea.ts b/src/components/textarea/textarea.ts
index d685eec87..32f57a3fb 100644
--- a/src/components/textarea/textarea.ts
+++ b/src/components/textarea/textarea.ts
@@ -9,6 +9,7 @@ import ShoelaceElement from '../../internal/shoelace-element';
 import { HasSlotController } from '../../internal/slot';
 import { watch } from '../../internal/watch';
 import styles from './textarea.styles';
+import type { ShoelaceFormControl } from '../../internal/shoelace-element';
 import type { CSSResultGroup } from 'lit';
 
 /**
@@ -33,7 +34,7 @@ import type { CSSResultGroup } from 'lit';
  * @csspart textarea - The textarea control.
  */
 @customElement('sl-textarea')
-export default class SlTextarea extends ShoelaceElement {
+export default class SlTextarea extends ShoelaceElement implements ShoelaceFormControl {
   static styles: CSSResultGroup = styles;
 
   @query('.textarea__control') input: HTMLTextAreaElement;
@@ -44,6 +45,7 @@ export default class SlTextarea extends ShoelaceElement {
   private resizeObserver: ResizeObserver;
 
   @state() private hasFocus = false;
+  @state() invalid = false;
 
   /** The textarea's size. */
   @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
@@ -87,12 +89,6 @@ export default class SlTextarea extends ShoelaceElement {
   /** Makes the textarea a required field. */
   @property({ type: Boolean, reflect: true }) required = false;
 
-  /**
-   * This will be true when the control is in an invalid state. Validity is determined by props such as `type`,
-   * `required`, `minlength`, and `maxlength` using the browser's constraint validation API.
-   */
-  @property({ type: Boolean, reflect: true }) invalid = false;
-
   /** The textarea's autocapitalize attribute. */
   @property() autocapitalize: 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters';
 
@@ -118,8 +114,7 @@ export default class SlTextarea extends ShoelaceElement {
   @property() inputmode: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
 
   /** Gets or sets the default value used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. */
-  @defaultValue()
-  defaultValue = '';
+  @defaultValue() defaultValue = '';
 
   connectedCallback() {
     super.connectedCallback();
@@ -200,6 +195,11 @@ export default class SlTextarea extends ShoelaceElement {
     }
   }
 
+  /** Checks for validity but does not show the browser's validation message. */
+  checkValidity() {
+    return this.input.checkValidity();
+  }
+
   /** Checks for validity and shows the browser's validation message if the control is invalid. */
   reportValidity() {
     return this.input.reportValidity();
@@ -246,6 +246,7 @@ export default class SlTextarea extends ShoelaceElement {
 
   @watch('value', { waitUntilFirstUpdate: true })
   handleValueChange() {
+    this.input.value = this.value; // force a sync update
     this.invalid = !this.input.checkValidity();
     this.updateComplete.then(() => this.setTextareaHeight());
   }
diff --git a/src/internal/default-value.ts b/src/internal/default-value.ts
index 7eafec4c0..d1bf20b22 100644
--- a/src/internal/default-value.ts
+++ b/src/internal/default-value.ts
@@ -9,11 +9,9 @@
 //
 // Usage:
 //
-//  @property({ type: Boolean, reflect: true })
-//  checked = false;
+//  @property({ type: Boolean, reflect: true }) checked = false;
 //
-//  @defaultValue('checked')
-//  defaultChecked = false;
+//  @defaultValue('checked') defaultChecked = false;
 //
 
 import { defaultConverter } from 'lit';
diff --git a/src/internal/form.ts b/src/internal/form.ts
index 29c802e54..8089a9439 100644
--- a/src/internal/form.ts
+++ b/src/internal/form.ts
@@ -1,61 +1,82 @@
 import './formdata-event-polyfill';
 import type SlButton from '../components/button/button';
+import type { ShoelaceFormControl } from '../internal/shoelace-element';
 import type { ReactiveController, ReactiveControllerHost } from 'lit';
 
+//
+// We store a WeakMap of forms + controls so we can keep references to all Shoelace controls within a given form. As
+// elements connect and disconnect to/from the DOM, their containing form is used as the key and the form control is
+// added and removed from the form's set, respectively.
+//
+const formCollections: WeakMap<HTMLFormElement, Set<ShoelaceFormControl>> = new WeakMap();
+
+//
+// We store a WeakMap of controls that users have interacted with. This allows us to determine the interaction state
+// without littering the DOM with additional data attributes.
+//
+const userInteractedControls: WeakMap<ShoelaceFormControl, boolean> = new WeakMap();
+
+//
+// We store a WeakMap of reportValidity() overloads so we can override it when form controls connect to the DOM and
+// restore the original behavior when they disconnect.
+//
 const reportValidityOverloads: WeakMap<HTMLFormElement, () => boolean> = new WeakMap();
 
 export interface FormSubmitControllerOptions {
   /** A function that returns the form containing the form control. */
-  form: (input: unknown) => HTMLFormElement | null;
+  form: (input: ShoelaceFormControl) => HTMLFormElement | null;
   /** A function that returns the form control's name, which will be submitted with the form data. */
-  name: (input: unknown) => string;
+  name: (input: ShoelaceFormControl) => string;
   /** A function that returns the form control's current value. */
-  value: (input: unknown) => unknown | unknown[];
+  value: (input: ShoelaceFormControl) => unknown | unknown[];
   /** A function that returns the form control's default value. */
-  defaultValue: (input: unknown) => unknown | unknown[];
+  defaultValue: (input: ShoelaceFormControl) => unknown | unknown[];
   /** A function that returns the form control's current disabled state. If disabled, the value won't be submitted. */
-  disabled: (input: unknown) => boolean;
+  disabled: (input: ShoelaceFormControl) => boolean;
   /**
    * A function that maps to the form control's reportValidity() function. When the control is invalid, this will
    * prevent submission and trigger the browser's constraint violation warning.
    */
-  reportValidity: (input: unknown) => boolean;
-
+  reportValidity: (input: ShoelaceFormControl) => boolean;
   /** A function that sets the form control's value */
-  setValue: (input: unknown, value: unknown) => void;
+  setValue: (input: ShoelaceFormControl, value: unknown) => void;
 }
 
 export class FormSubmitController implements ReactiveController {
-  host?: ReactiveControllerHost & Element;
+  host: ShoelaceFormControl & ReactiveControllerHost;
   form?: HTMLFormElement | null;
   options: FormSubmitControllerOptions;
 
-  constructor(host: ReactiveControllerHost & Element, options?: Partial<FormSubmitControllerOptions>) {
+  constructor(host: ReactiveControllerHost & ShoelaceFormControl, options?: Partial<FormSubmitControllerOptions>) {
     (this.host = host).addController(this);
     this.options = {
-      form: (input: HTMLInputElement) => input.closest('form'),
-      name: (input: HTMLInputElement) => input.name,
-      value: (input: HTMLInputElement) => input.value,
-      defaultValue: (input: HTMLInputElement) => input.defaultValue,
-      disabled: (input: HTMLInputElement) => input.disabled,
-      reportValidity: (input: HTMLInputElement) => {
-        return typeof input.reportValidity === 'function' ? input.reportValidity() : true;
-      },
-      setValue: (input: HTMLInputElement, value: string) => {
-        input.value = value;
-      },
+      form: input => input.closest('form'),
+      name: input => input.name,
+      value: input => input.value,
+      defaultValue: input => input.defaultValue,
+      disabled: input => input.disabled ?? false,
+      reportValidity: input => (typeof input.reportValidity === 'function' ? input.reportValidity() : true),
+      setValue: (input, value: string) => (input.value = value),
       ...options
     };
     this.handleFormData = this.handleFormData.bind(this);
     this.handleFormSubmit = this.handleFormSubmit.bind(this);
     this.handleFormReset = this.handleFormReset.bind(this);
     this.reportFormValidity = this.reportFormValidity.bind(this);
+    this.handleUserInput = this.handleUserInput.bind(this);
   }
 
   hostConnected() {
     this.form = this.options.form(this.host);
 
     if (this.form) {
+      // Add this element to the form's collection
+      if (formCollections.has(this.form)) {
+        formCollections.get(this.form)!.add(this.host);
+      } else {
+        formCollections.set(this.form, new Set<ShoelaceFormControl>([this.host]));
+      }
+
       this.form.addEventListener('formdata', this.handleFormData);
       this.form.addEventListener('submit', this.handleFormSubmit);
       this.form.addEventListener('reset', this.handleFormReset);
@@ -66,10 +87,15 @@ export class FormSubmitController implements ReactiveController {
         this.form.reportValidity = () => this.reportFormValidity();
       }
     }
+
+    this.host.addEventListener('sl-input', this.handleUserInput);
   }
 
   hostDisconnected() {
     if (this.form) {
+      // Remove this element from the form's collection
+      formCollections.get(this.form)?.delete(this.host);
+
       this.form.removeEventListener('formdata', this.handleFormData);
       this.form.removeEventListener('submit', this.handleFormSubmit);
       this.form.removeEventListener('reset', this.handleFormReset);
@@ -82,6 +108,39 @@ export class FormSubmitController implements ReactiveController {
 
       this.form = undefined;
     }
+
+    this.host.removeEventListener('sl-input', this.handleUserInput);
+  }
+
+  hostUpdated() {
+    //
+    // We're mapping the following "states" to data attributes. In the future, we can use ElementInternals.states to
+    // create a similar mapping, but instead of [data-invalid] it will look like :--invalid.
+    //
+    // See this RFC for more details: https://github.com/shoelace-style/shoelace/issues/1011
+    //
+    const host = this.host;
+    const hasInteracted = Boolean(userInteractedControls.get(host));
+    const invalid = Boolean(host.invalid);
+    const required = Boolean(host.required);
+
+    if (this.form?.noValidate) {
+      // Form validation is disabled, remove the attributes
+      host.removeAttribute('data-required');
+      host.removeAttribute('data-optional');
+      host.removeAttribute('data-invalid');
+      host.removeAttribute('data-valid');
+      host.removeAttribute('data-user-invalid');
+      host.removeAttribute('data-user-valid');
+    } else {
+      // Form validation is enabled, set the attributes
+      host.toggleAttribute('data-required', required);
+      host.toggleAttribute('data-optional', !required);
+      host.toggleAttribute('data-invalid', invalid);
+      host.toggleAttribute('data-valid', !invalid);
+      host.toggleAttribute('data-user-invalid', invalid && hasInteracted);
+      host.toggleAttribute('data-user-valid', !invalid && hasInteracted);
+    }
   }
 
   handleFormData(event: FormDataEvent) {
@@ -104,6 +163,13 @@ export class FormSubmitController implements ReactiveController {
     const disabled = this.options.disabled(this.host);
     const reportValidity = this.options.reportValidity;
 
+    // Update the interacted state for all controls when the form is submitted
+    if (this.form && !this.form.noValidate) {
+      formCollections.get(this.form)?.forEach(control => {
+        this.setUserInteracted(control, true);
+      });
+    }
+
     if (this.form && !this.form.noValidate && !disabled && !reportValidity(this.host)) {
       event.preventDefault();
       event.stopImmediatePropagation();
@@ -112,6 +178,12 @@ export class FormSubmitController implements ReactiveController {
 
   handleFormReset() {
     this.options.setValue(this.host, this.options.defaultValue(this.host));
+    this.setUserInteracted(this.host, false);
+  }
+
+  async handleUserInput() {
+    await this.host.updateComplete;
+    this.setUserInteracted(this.host, true);
   }
 
   reportFormValidity() {
@@ -144,6 +216,11 @@ export class FormSubmitController implements ReactiveController {
     return true;
   }
 
+  setUserInteracted(el: ShoelaceFormControl, hasInteracted: boolean) {
+    userInteractedControls.set(el, hasInteracted);
+    el.requestUpdate();
+  }
+
   doAction(type: 'submit' | 'reset', invoker?: HTMLInputElement | SlButton) {
     if (this.form) {
       const button = document.createElement('button');
diff --git a/src/internal/shoelace-element.ts b/src/internal/shoelace-element.ts
index 93786d193..f6a9e3968 100644
--- a/src/internal/shoelace-element.ts
+++ b/src/internal/shoelace-element.ts
@@ -21,3 +21,29 @@ export default class ShoelaceElement extends LitElement {
     return event;
   }
 }
+
+export interface ShoelaceFormControl extends ShoelaceElement {
+  // Standard form attributes
+  name: string;
+  value: unknown;
+  disabled?: boolean;
+  defaultValue?: unknown;
+  defaultChecked?: boolean;
+
+  // Standard validation attributes
+  pattern?: string;
+  min?: number | Date;
+  max?: number | Date;
+  step?: number | 'any';
+  required?: boolean;
+  minlength?: number;
+  maxlength?: number;
+
+  // Proprietary validation properties (non-attributes)
+  invalid: boolean;
+
+  // Validation methods
+  checkValidity: () => boolean;
+  reportValidity: () => boolean;
+  setCustomValidity: (message: string) => void;
+}