restore desired commits

docs/components/checkbox.md

@@ -60,4 +60,64 @@ import { SlCheckbox } from '@shoelace-style/shoelace/dist/react';
 const App = () => <SlCheckbox disabled>Disabled</SlCheckbox>;
 ```
 
+### Custom Validity
+
+Use the `setCustomValidity()` method to set a custom validation message. This will prevent the form from submitting and make the browser display the error message you provide. To clear the error, call this function with an empty string.
+
+```html preview
+<form class="custom-validity">
+  <sl-checkbox>Check me</sl-checkbox>
+  <br />
+  <sl-button type="submit" variant="primary" style="margin-top: 1rem;">Submit</sl-button>
+</form>
+<script>
+  const form = document.querySelector('.custom-validity');
+  const checkbox = form.querySelector('sl-checkbox');
+  const errorMessage = `Don't forget to check me!`;
+  // Set initial validity as soon as the element is defined
+  customElements.whenDefined('sl-checkbox').then(() => {
+    checkbox.setCustomValidity(errorMessage);
+  });
+  // Update validity on change
+  checkbox.addEventListener('sl-change', () => {
+    checkbox.setCustomValidity(checkbox.checked ? '' : errorMessage);
+  });
+  // Handle submit
+  form.addEventListener('submit', event => {
+    event.preventDefault();
+    alert('All fields are valid!');
+  });
+</script>
+```
+
+```jsx react
+import { useEffect, useRef } from 'react';
+import { SlButton, SlCheckbox } from '@shoelace-style/shoelace/dist/react';
+const App = () => {
+  const checkbox = useRef(null);
+  const errorMessage = `Don't forget to check me!`;
+  function handleChange() {
+    checkbox.current.setCustomValidity(checkbox.current.checked ? '' : errorMessage);
+  }
+  function handleSubmit(event) {
+    event.preventDefault();
+    alert('All fields are valid!');
+  }
+  useEffect(() => {
+    checkbox.current.setCustomValidity(errorMessage);
+  }, []);
+  return (
+    <form class="custom-validity" onSubmit={handleSubmit}>
+      <SlCheckbox ref={checkbox} onSlChange={handleChange}>
+        Check me
+      </SlCheckbox>
+      <br />
+      <SlButton type="submit" variant="primary" style={{ marginTop: '1rem' }}>
+        Submit
+      </SlButton>
+    </form>
+  );
+};
+```
+
 [component-metadata:sl-checkbox]

docs/components/radio-button.md

@@ -414,4 +414,77 @@ const App = () => (
 );
 ```
 
+### Custom Validity
+
+Use the `setCustomValidity()` method to set a custom validation message. This will prevent the form from submitting and make the browser display the error message you provide. To clear the error, call this function with an empty string.
+
+```html preview
+<form class="custom-validity">
+  <sl-radio-group label="Select an option">
+    <sl-radio-button name="a" value="1" checked>Not me</sl-radio-button>
+    <sl-radio-button name="a" value="2">Me neither</sl-radio-button>
+    <sl-radio-button name="a" value="3">Choose me</sl-radio-button>
+  </sl-radio-group>
+  <br />
+  <sl-button type="submit" variant="primary">Submit</sl-button>
+</form>
+<script>
+  const form = document.querySelector('.custom-validity');
+  const radioButton = form.querySelectorAll('sl-radio-button')[2];
+  const errorMessage = 'You must choose this option';
+  // Set initial validity as soon as the element is defined
+  customElements.whenDefined('sl-radio-button').then(() => {
+    radioButton.setCustomValidity(errorMessage);
+  });
+  // Update validity when a selection is made
+  form.addEventListener('sl-change', () => {
+    const isValid = radioButton.checked;
+    radioButton.setCustomValidity(isValid ? '' : errorMessage);
+  });
+  // Handle form submit
+  form.addEventListener('submit', event => {
+    event.preventDefault();
+    alert('All fields are valid!');
+  });
+</script>
+```
+
+```jsx react
+import { useEffect, useRef } from 'react';
+import { SlButton, SlIcon, SlRadioButton, SlRadioGroup } from '@shoelace-style/shoelace/dist/react';
+const App = () => {
+  const radio = useRef(null);
+  const errorMessage = 'You must choose this option';
+  function handleChange(event) {
+    radio.current.setCustomValidity(radio.current.checked ? '' : errorMessage);
+  }
+  function handleSubmit(event) {
+    event.preventDefault();
+    alert('All fields are valid!');
+  }
+  useEffect(() => {
+    radio.current.setCustomValidity(errorMessage);
+  }, []);
+  return (
+    <form class="custom-validity" onSubmit={handleSubmit}>
+      <SlRadioGroup label="Select an option">
+        <SlRadioButton name="a" value="1" checked onSlChange={handleChange}>
+          Not me
+        </SlRadioButton>
+        <SlRadioButton name="a" value="2" onSlChange={handleChange}>
+          Me neither
+        </SlRadioButton>
+        <SlRadioButton ref={radio} name="a" value="3" onSlChange={handleChange}>
+          Choose me
+        </SlRadioButton>
+      </SlRadioGroup>
+      <br />
+      <SlButton type="submit" variant="primary">
+        Submit
+      </SlButton>
+    </form>
+  );
+};
+```
+
 [component-metadata:sl-radio-button]

docs/components/radio.md

@@ -96,4 +96,77 @@ const App = () => (
 );
 ```
 
+### Custom Validity
+
+Use the `setCustomValidity()` method to set a custom validation message. This will prevent the form from submitting and make the browser display the error message you provide. To clear the error, call this function with an empty string.
+
+```html preview
+<form class="custom-validity">
+  <sl-radio-group label="Select an option">
+    <sl-radio name="a" value="1" checked>Not me</sl-radio>
+    <sl-radio name="a" value="2">Me neither</sl-radio>
+    <sl-radio name="a" value="3">Choose me</sl-radio>
+  </sl-radio-group>
+  <br />
+  <sl-button type="submit" variant="primary">Submit</sl-button>
+</form>
+<script>
+  const form = document.querySelector('.custom-validity');
+  const radio = form.querySelectorAll('sl-radio')[2];
+  const errorMessage = 'You must choose this option';
+  // Set initial validity as soon as the element is defined
+  customElements.whenDefined('sl-radio').then(() => {
+    radio.setCustomValidity(errorMessage);
+  });
+  // Update validity when a selection is made
+  form.addEventListener('sl-change', () => {
+    const isValid = radio.checked;
+    radio.setCustomValidity(isValid ? '' : errorMessage);
+  });
+  // Handle form submit
+  form.addEventListener('submit', event => {
+    event.preventDefault();
+    alert('All fields are valid!');
+  });
+</script>
+```
+
+```jsx react
+import { useEffect, useRef } from 'react';
+import { SlButton, SlIcon, SlRadio, SlRadioGroup } from '@shoelace-style/shoelace/dist/react';
+const App = () => {
+  const radio = useRef(null);
+  const errorMessage = 'You must choose this option';
+  function handleChange(event) {
+    radio.current.setCustomValidity(radio.current.checked ? '' : errorMessage);
+  }
+  function handleSubmit(event) {
+    event.preventDefault();
+    alert('All fields are valid!');
+  }
+  useEffect(() => {
+    radio.current.setCustomValidity(errorMessage);
+  }, []);
+  return (
+    <form class="custom-validity" onSubmit={handleSubmit}>
+      <SlRadioGroup label="Select an option">
+        <SlRadio name="a" value="1" checked onSlChange={handleChange}>
+          Not me
+        </SlRadio>
+        <SlRadio name="a" value="2" onSlChange={handleChange}>
+          Me neither
+        </SlRadio>
+        <SlRadio ref={radio} name="a" value="3" onSlChange={handleChange}>
+          Choose me
+        </SlRadio>
+      </SlRadioGroup>
+      <br />
+      <SlButton type="submit" variant="primary">
+        Submit
+      </SlButton>
+    </form>
+  );
+};
+```
+
 [component-metadata:sl-radio]

docs/getting-started/form-controls.md

@@ -194,7 +194,7 @@ const App = () => {
 
 ### Custom Validation
 
-To create a custom validation error, use the `setCustomValidity` method. The form will not be submitted when this method is called with anything other than an empty string, and its message will be shown by the browser as the validation error. To make the input valid again, call the method a second time with an empty string as the argument.
+To create a custom validation error, pass a non-empty string to the `setCustomValidity()` method. This will override any existing validation constraints. The form will not be submitted when a custom validity is set and the browser will show a validation error when the containing form is submitted. To make the input valid again, call `setCustomValidity()` again with an empty string.
 
 ```html preview
 <form class="input-validation-custom">
@@ -257,6 +257,8 @@ const App = () => {
 };
 ```
 
+?> Custom validation can be applied to any form control that supports the `setCustomValidity()` method. It is not limited to inputs and textareas.
+
 ### Custom Validation Styles
 
 The `invalid` attribute reflects the form control's validity, so you can style invalid fields using the `[invalid]` selector. The example below demonstrates how you can give erroneous fields a different appearance. Type something other than "shoelace" to demonstrate this.

docs/resources/changelog.md

@@ -6,6 +6,15 @@ Components with the <sl-badge variant="warning" pill>Experimental</sl-badge> bad
 
 _During the beta period, these restrictions may be relaxed in the event of a mission-critical bug._ 🐛
 
+## Next
+
+- Added `button` part to `<sl-radio-button>`
+- Added custom validity examples and tests to `<sl-checkbox>`, `<sl-radio>`, and `<sl-radio-button>`
+- Fixed a bug that prevented `setCustomValidity()` from working with `<sl-radio-button>`
+- Fixed a bug where the right border of a checked `<sl-radio-button>` was the wrong color
+- Fixed a bug that prevented a number of properties, methods, etc. from being documented in `<sl-radio>` and `<sl-radio-button>`
+- Once again removed path aliasing because it doesn't work with Web Test Runner's esbuild plugin
+
 ## 2.0.0-beta.72
 
 - 🚨 BREAKING: refactored parts in `<sl-input>`, `<sl-range>`, `<sl-select>`, and `<sl-textarea>` to allow you to customize the label and help text position