fix(switch): clicking on label should toggle checked state

.changeset/big-wombats-attack.md

@@ -0,0 +1,5 @@
+---
+'@lion/switch': patch
+---
+
+When clicking on the label the checked state should be toggled. This expected behavior comes from the native radio or checkbox.

.lintstagedrc.js

@@ -2,7 +2,7 @@
 module.exports = {
   '*': ['eclint fix', 'git add'],
   '*.js': ['eslint --fix', 'prettier --write', 'git add'],
-  '*.md': ['prettier --write', 'markdownlint', 'git add'],
+  '{*!(.changeset)/**/*.md,*.md}': ['prettier --write', 'markdownlint', 'git add'],
   'yarn.lock': ['node ./scripts/yarn-lock-scan.js'],
   '*package.json': absolutePaths => {
     const sortPackages = [];

package.json

@@ -16,7 +16,7 @@
     "lint": "run-p lint:*",
     "lint:eclint": "git ls-files | xargs eclint check",
     "lint:eslint": "eslint --ext .js,.html .",
-    "lint:markdownlint": "git ls-files '*.md' | xargs markdownlint --ignore '**/CHANGELOG.md'",
+    "lint:markdownlint": "git ls-files '*.md' | xargs markdownlint --ignore '{.changeset/*.md,**/CHANGELOG.md}'",
     "lint:prettier": "prettier \"**/*.js\" --list-different || (echo '↑↑ these files are not prettier formatted ↑↑' && exit 1)",
     "lint:types": "tsc",
     "lint:versions": "node ./scripts/lint-versions.js",

packages/form-core/src/choice-group/ChoiceInputMixin.js

@@ -81,6 +81,7 @@ export const ChoiceInputMixin = superclass =>
     constructor() {
       super();
       this.modelValue = { value: '', checked: false };
+      this.__toggleChecked = this.__toggleChecked.bind(this);
     }
 
     /**

packages/switch/src/LionSwitch.js

@@ -61,10 +61,19 @@ export class LionSwitch extends ScopedElementsMixin(ChoiceInputMixin(LionField))
       'checked-changed',
       this.__handleButtonSwitchCheckedChanged.bind(this),
     );
+    if (this._labelNode) {
+      this._labelNode.addEventListener('click', this.__toggleChecked);
+    }
     this._syncButtonSwitch();
     this.submitted = true;
   }
 
+  disconnectedCallback() {
+    if (this._labelNode) {
+      this._labelNode.removeEventListener('click', this.__toggleChecked);
+    }
+  }
+
   updated(changedProperties) {
     super.updated(changedProperties);
     this._syncButtonSwitch();

packages/switch/test/lion-switch.test.js

@@ -7,6 +7,14 @@ describe('lion-switch', () => {
     expect(Array.from(el.children).find(child => child.slot === 'input')).not.to.be.false;
   });
 
+  it('clicking the label should toggle the checked state', async () => {
+    const el = await fixture(html`<lion-switch label="Enable Setting"></lion-switch>`);
+    el._labelNode.click();
+    expect(el.checked).to.be.true;
+    el._labelNode.click();
+    expect(el.checked).to.be.false;
+  });
+
   it('should sync its "disabled" state to child button', async () => {
     const el = await fixture(html`<lion-switch disabled></lion-switch>`);
     expect(el._inputNode.disabled).to.be.true;