feat: add "checked" state to <md-checkbox> via CustomStateSet

PiperOrigin-RevId: 692246916

Author: material-web-copybara

checkbox/internal/checkbox.ts

@@ -23,7 +23,10 @@ import {
   getValidityAnchor,
   mixinConstraintValidation,
 } from '../../labs/behaviors/constraint-validation.js';
-import {mixinElementInternals} from '../../labs/behaviors/element-internals.js';
+import {
+  internals,
+  mixinElementInternals,
+} from '../../labs/behaviors/element-internals.js';
 import {
   getFormState,
   getFormValue,
@@ -111,6 +114,12 @@ export class Checkbox extends checkboxBaseClass {
       this.prevDisabled = changed.get('disabled') ?? this.disabled;
       this.prevIndeterminate =
         changed.get('indeterminate') ?? this.indeterminate;
+
+      if (this.checked) {
+        this[internals].states.add('checked');
+      } else {
+        this[internals].states.delete('checked');
+      }
     }
 
     super.update(changed);

checkbox/internal/checkbox_test.ts

@@ -50,13 +50,15 @@ describe('checkbox', () => {
       expect(harness.element.indeterminate).toEqual(false);
       expect(harness.element.disabled).toEqual(false);
       expect(harness.element.value).toEqual('on');
+      expect(harness.element.matches(':state(checked)')).toEqual(false);
     });
 
     it('user input updates checked state', async () => {
       const {harness} = await setupTest();
       await harness.clickWithMouse();
       await env.waitForStability();
       expect(harness.element.checked).toEqual(true);
+      expect(harness.element.matches(':state(checked)')).toEqual(true);
     });
 
     it('should trigger changed event when checkbox is selected', async () => {

docs/components/checkbox.md

@@ -209,3 +209,9 @@ Token                                    | Default value
 <!-- mdformat on(autogenerated might break rendering in catalog) -->
 
 <!-- auto-generated API docs end -->
+
+#### States
+
+| State | Description |
+| --- | --- |
+| `checked` | Set if this checkbox is checked. |