diff --git a/checkbox/internal/checkbox.ts b/checkbox/internal/checkbox.ts index 21a8ee03b5..d3f64f724a 100644 --- a/checkbox/internal/checkbox.ts +++ b/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); diff --git a/checkbox/internal/checkbox_test.ts b/checkbox/internal/checkbox_test.ts index 61f368a332..dbfe06b843 100644 --- a/checkbox/internal/checkbox_test.ts +++ b/checkbox/internal/checkbox_test.ts @@ -50,6 +50,7 @@ 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 () => { @@ -57,6 +58,7 @@ describe('checkbox', () => { 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 () => { diff --git a/docs/components/checkbox.md b/docs/components/checkbox.md index 2ae0332224..82ebc97bf5 100644 --- a/docs/components/checkbox.md +++ b/docs/components/checkbox.md @@ -209,3 +209,9 @@ Token | Default value + +#### States + +| State | Description | +| --- | --- | +| `checked` | Set if this checkbox is checked. | diff --git a/package.json b/package.json index e74c250091..dcf0c8be44 100644 --- a/package.json +++ b/package.json @@ -65,6 +65,7 @@ "@rollup/plugin-node-resolve": "^15.2.3", "@rollup/plugin-terser": "^0.4.4", "@types/jasmine": "^4.0.3", + "@types/web": "^0.0.175", "@web/test-runner": "^0.18.2", "@web/test-runner-playwright": "^0.9.0", "jasmine": "^4.5.0",