@spectrum-web-components/checkbox 0.32.1-overlay.41 → 0.33.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/custom-elements.json +23 -23
  2. package/package.json +6 -6
  3. package/src/Checkbox.d.ts +1 -0
  4. package/src/Checkbox.dev.js +6 -6
  5. package/src/Checkbox.dev.js.map +2 -2
  6. package/src/Checkbox.js +4 -4
  7. package/src/Checkbox.js.map +2 -2
  8. package/src/CheckboxBase.dev.js +0 -1
  9. package/src/CheckboxBase.dev.js.map +2 -2
  10. package/src/CheckboxBase.js +2 -3
  11. package/src/CheckboxBase.js.map +2 -2
  12. package/stories/checkbox.stories.js +7 -1
  13. package/stories/checkbox.stories.js.map +2 -2
  14. package/test/checkbox.test.js +81 -1
  15. package/test/checkbox.test.js.map +2 -2
package/custom-elements.json CHANGED
@@ -4,7 +4,7 @@
4
4
  "modules": [
5
5
  {
6
6
  "kind": "javascript-module",
7
- "path": "sp-checkbox.ts",
7
+ "path": "sp-checkbox.js",
8
8
  "declarations": [],
9
9
  "exports": [
10
10
  {
@@ -19,7 +19,7 @@
19
19
  },
20
20
  {
21
21
  "kind": "javascript-module",
22
- "path": "src/Checkbox.ts",
22
+ "path": "src/Checkbox.js",
23
23
  "declarations": [
24
24
  {
25
25
  "kind": "class",
@@ -65,6 +65,20 @@
65
65
  "attribute": "emphasized",
66
66
  "reflects": true
67
67
  },
68
+ {
69
+ "kind": "method",
70
+ "name": "handleChange",
71
+ "privacy": "public",
72
+ "return": {
73
+ "type": {
74
+ "text": "void"
75
+ }
76
+ },
77
+ "inheritedFrom": {
78
+ "name": "CheckboxBase",
79
+ "module": "src/CheckboxBase.js"
80
+ }
81
+ },
68
82
  {
69
83
  "kind": "field",
70
84
  "name": "checked",
@@ -77,7 +91,7 @@
77
91
  "reflects": true,
78
92
  "inheritedFrom": {
79
93
  "name": "CheckboxBase",
80
- "module": "src/CheckboxBase.ts"
94
+ "module": "src/CheckboxBase.js"
81
95
  }
82
96
  },
83
97
  {
@@ -92,7 +106,7 @@
92
106
  "reflects": true,
93
107
  "inheritedFrom": {
94
108
  "name": "CheckboxBase",
95
- "module": "src/CheckboxBase.ts"
109
+ "module": "src/CheckboxBase.js"
96
110
  }
97
111
  },
98
112
  {
@@ -104,7 +118,7 @@
104
118
  "privacy": "protected",
105
119
  "inheritedFrom": {
106
120
  "name": "CheckboxBase",
107
- "module": "src/CheckboxBase.ts"
121
+ "module": "src/CheckboxBase.js"
108
122
  }
109
123
  },
110
124
  {
@@ -117,21 +131,7 @@
117
131
  "readonly": true,
118
132
  "inheritedFrom": {
119
133
  "name": "CheckboxBase",
120
- "module": "src/CheckboxBase.ts"
121
- }
122
- },
123
- {
124
- "kind": "method",
125
- "name": "handleChange",
126
- "privacy": "public",
127
- "return": {
128
- "type": {
129
- "text": "void"
130
- }
131
- },
132
- "inheritedFrom": {
133
- "name": "CheckboxBase",
134
- "module": "src/CheckboxBase.ts"
134
+ "module": "src/CheckboxBase.js"
135
135
  }
136
136
  }
137
137
  ],
@@ -211,14 +211,14 @@
211
211
  "name": "Checkbox",
212
212
  "declaration": {
213
213
  "name": "Checkbox",
214
- "module": "src/Checkbox.ts"
214
+ "module": "src/Checkbox.js"
215
215
  }
216
216
  }
217
217
  ]
218
218
  },
219
219
  {
220
220
  "kind": "javascript-module",
221
- "path": "src/CheckboxBase.ts",
221
+ "path": "src/CheckboxBase.js",
222
222
  "declarations": [
223
223
  {
224
224
  "kind": "class",
@@ -305,7 +305,7 @@
305
305
  "name": "CheckboxBase",
306
306
  "declaration": {
307
307
  "name": "CheckboxBase",
308
- "module": "src/CheckboxBase.ts"
308
+ "module": "src/CheckboxBase.js"
309
309
  }
310
310
  }
311
311
  ]
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spectrum-web-components/checkbox",
3
- "version": "0.32.1-overlay.41+ea2752a5d",
3
+ "version": "0.33.0",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -61,10 +61,10 @@
61
61
  "lit-html"
62
62
  ],
63
63
  "dependencies": {
64
- "@spectrum-web-components/base": "^0.32.1-overlay.41+ea2752a5d",
65
- "@spectrum-web-components/icon": "^0.32.1-overlay.41+ea2752a5d",
66
- "@spectrum-web-components/icons-ui": "^0.32.1-overlay.41+ea2752a5d",
67
- "@spectrum-web-components/shared": "^0.32.1-overlay.41+ea2752a5d"
64
+ "@spectrum-web-components/base": "^0.33.0",
65
+ "@spectrum-web-components/icon": "^0.33.0",
66
+ "@spectrum-web-components/icons-ui": "^0.33.0",
67
+ "@spectrum-web-components/shared": "^0.33.0"
68
68
  },
69
69
  "devDependencies": {
70
70
  "@spectrum-css/checkbox": "^6.0.32"
@@ -75,5 +75,5 @@
75
75
  "./sp-*.js",
76
76
  "./**/*.dev.js"
77
77
  ],
78
- "gitHead": "ea2752a5dab7c3fc9f9d68148e74af23c63e2cfd"
78
+ "gitHead": "0f46cf0508f39ec42ce8c52b1e6f0055bacb4f00"
79
79
  }
package/src/Checkbox.d.ts CHANGED
@@ -22,6 +22,7 @@ export declare class Checkbox extends Checkbox_base {
22
22
  invalid: boolean;
23
23
  emphasized: boolean;
24
24
  static get styles(): CSSResultArray;
25
+ handleChange(): void;
25
26
  protected render(): TemplateResult;
26
27
  protected updated(changes: PropertyValues): void;
27
28
  }
package/src/Checkbox.dev.js CHANGED
@@ -89,6 +89,10 @@ export class Checkbox extends SizedMixin(CheckboxBase) {
89
89
  static get styles() {
90
90
  return [checkboxStyles, checkmarkSmallStyles, dashSmallStyles];
91
91
  }
92
+ handleChange() {
93
+ this.indeterminate = false;
94
+ super.handleChange();
95
+ }
92
96
  render() {
93
97
  return html`
94
98
  ${super.render()}
@@ -96,7 +100,7 @@ export class Checkbox extends SizedMixin(CheckboxBase) {
96
100
  ${checkmarkIcon[this.size]}
97
101
  ${dashIcon[this.size]}
98
102
  </span>
99
- <label id="label"><slot></slot></label>
103
+ <label id="label" for="input"><slot></slot></label>
100
104
  `;
101
105
  }
102
106
  updated(changes) {
@@ -109,11 +113,7 @@ export class Checkbox extends SizedMixin(CheckboxBase) {
109
113
  }
110
114
  }
111
115
  if (changes.has("indeterminate")) {
112
- if (this.indeterminate) {
113
- this.inputElement.setAttribute("aria-checked", "mixed");
114
- } else {
115
- this.inputElement.removeAttribute("aria-checked");
116
- }
116
+ this.inputElement.indeterminate = this.indeterminate;
117
117
  }
118
118
  }
119
119
  }
package/src/Checkbox.dev.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["Checkbox.ts"],
4
- "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n CSSResultArray,\n DefaultElementSize,\n html,\n PropertyValues,\n SizedMixin,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport { CheckboxBase } from './CheckboxBase.dev.js'\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-checkmark75.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-checkmark100.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-checkmark200.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-checkmark300.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-dash75.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-dash100.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-dash200.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-dash300.js';\nimport checkboxStyles from './checkbox.css.js';\nimport checkmarkSmallStyles from '@spectrum-web-components/icon/src/spectrum-icon-checkmark.css.js';\nimport dashSmallStyles from '@spectrum-web-components/icon/src/spectrum-icon-dash.css.js';\n\nconst checkmarkIcon = {\n s: html`\n <sp-icon-checkmark75\n id=\"checkmark\"\n class=\"spectrum-UIIcon-Checkmark75\"\n ></sp-icon-checkmark75>\n `,\n m: html`\n <sp-icon-checkmark100\n id=\"checkmark\"\n class=\"spectrum-UIIcon-Checkmark100\"\n ></sp-icon-checkmark100>\n `,\n l: html`\n <sp-icon-checkmark200\n id=\"checkmark\"\n class=\"spectrum-UIIcon-Checkmark200\"\n ></sp-icon-checkmark200>\n `,\n xl: html`\n <sp-icon-checkmark300\n id=\"checkmark\"\n class=\"spectrum-UIIcon-Checkmark300\"\n ></sp-icon-checkmark300>\n `,\n};\n\nconst dashIcon = {\n s: html`\n <sp-icon-dash75\n id=\"partialCheckmark\"\n class=\"spectrum-UIIcon-Dash75\"\n ></sp-icon-dash75>\n `,\n m: html`\n <sp-icon-dash100\n id=\"partialCheckmark\"\n class=\"spectrum-UIIcon-Dash100\"\n ></sp-icon-dash100>\n `,\n l: html`\n <sp-icon-dash200\n id=\"partialCheckmark\"\n class=\"spectrum-UIIcon-Dash200\"\n ></sp-icon-dash200>\n `,\n xl: html`\n <sp-icon-dash300\n id=\"partialCheckmark\"\n class=\"spectrum-UIIcon-Dash300\"\n ></sp-icon-dash300>\n `,\n};\n\n/**\n * @element sp-checkbox\n * @slot - content to display as the label for the Checkbox\n * @fires change - Announces a change in the `checked` property of a Checkbox\n */\nexport class Checkbox extends SizedMixin(CheckboxBase) {\n @property({ type: Boolean, reflect: true })\n public indeterminate = false;\n\n @property({ type: Boolean, reflect: true })\n public invalid = false;\n\n @property({ type: Boolean, reflect: true })\n public emphasized = false;\n\n public static override get styles(): CSSResultArray {\n return [checkboxStyles, checkmarkSmallStyles, dashSmallStyles];\n }\n\n protected override render(): TemplateResult {\n return html`\n ${super.render()}\n <span id=\"box\">\n ${checkmarkIcon[this.size as DefaultElementSize]}\n ${dashIcon[this.size as DefaultElementSize]}\n </span>\n <label id=\"label\"><slot></slot></label>\n `;\n }\n\n protected override updated(changes: PropertyValues): void {\n super.updated(changes);\n if (changes.has('invalid')) {\n if (this.invalid) {\n this.inputElement.setAttribute('aria-invalid', 'true');\n } else {\n this.inputElement.removeAttribute('aria-invalid');\n }\n }\n if (changes.has('indeterminate')) {\n if (this.indeterminate) {\n this.inputElement.setAttribute('aria-checked', 'mixed');\n } else {\n this.inputElement.removeAttribute('aria-checked');\n }\n }\n }\n}\n"],
5
- "mappings": ";;;;;;;;;;;;AAYA;AAAA,EAGI;AAAA,EAEA;AAAA,OAEG;AACP,SAAS,gBAAgB;AACzB,SAAS,oBAAoB;AAC7B,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO,oBAAoB;AAC3B,OAAO,0BAA0B;AACjC,OAAO,qBAAqB;AAE5B,MAAM,gBAAgB;AAAA,EAClB,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMH,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMH,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMH,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAMR;AAEA,MAAM,WAAW;AAAA,EACb,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMH,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMH,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMH,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAMR;AAOO,aAAM,iBAAiB,WAAW,YAAY,EAAE;AAAA,EAAhD;AAAA;AAEH,SAAO,gBAAgB;AAGvB,SAAO,UAAU;AAGjB,SAAO,aAAa;AAAA;AAAA,EAEpB,WAA2B,SAAyB;AAChD,WAAO,CAAC,gBAAgB,sBAAsB,eAAe;AAAA,EACjE;AAAA,EAEmB,SAAyB;AACxC,WAAO;AAAA,cACD,MAAM,OAAO;AAAA;AAAA,kBAET,cAAc,KAAK,IAA0B;AAAA,kBAC7C,SAAS,KAAK,IAA0B;AAAA;AAAA;AAAA;AAAA,EAItD;AAAA,EAEmB,QAAQ,SAA+B;AACtD,UAAM,QAAQ,OAAO;AACrB,QAAI,QAAQ,IAAI,SAAS,GAAG;AACxB,UAAI,KAAK,SAAS;AACd,aAAK,aAAa,aAAa,gBAAgB,MAAM;AAAA,MACzD,OAAO;AACH,aAAK,aAAa,gBAAgB,cAAc;AAAA,MACpD;AAAA,IACJ;AACA,QAAI,QAAQ,IAAI,eAAe,GAAG;AAC9B,UAAI,KAAK,eAAe;AACpB,aAAK,aAAa,aAAa,gBAAgB,OAAO;AAAA,MAC1D,OAAO;AACH,aAAK,aAAa,gBAAgB,cAAc;AAAA,MACpD;AAAA,IACJ;AAAA,EACJ;AACJ;AAxCW;AAAA,EADN,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GADjC,SAEF;AAGA;AAAA,EADN,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAJjC,SAKF;AAGA;AAAA,EADN,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAPjC,SAQF;",
4
+ "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n CSSResultArray,\n DefaultElementSize,\n html,\n PropertyValues,\n SizedMixin,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport { CheckboxBase } from './CheckboxBase.dev.js'\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-checkmark75.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-checkmark100.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-checkmark200.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-checkmark300.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-dash75.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-dash100.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-dash200.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-dash300.js';\nimport checkboxStyles from './checkbox.css.js';\nimport checkmarkSmallStyles from '@spectrum-web-components/icon/src/spectrum-icon-checkmark.css.js';\nimport dashSmallStyles from '@spectrum-web-components/icon/src/spectrum-icon-dash.css.js';\n\nconst checkmarkIcon = {\n s: html`\n <sp-icon-checkmark75\n id=\"checkmark\"\n class=\"spectrum-UIIcon-Checkmark75\"\n ></sp-icon-checkmark75>\n `,\n m: html`\n <sp-icon-checkmark100\n id=\"checkmark\"\n class=\"spectrum-UIIcon-Checkmark100\"\n ></sp-icon-checkmark100>\n `,\n l: html`\n <sp-icon-checkmark200\n id=\"checkmark\"\n class=\"spectrum-UIIcon-Checkmark200\"\n ></sp-icon-checkmark200>\n `,\n xl: html`\n <sp-icon-checkmark300\n id=\"checkmark\"\n class=\"spectrum-UIIcon-Checkmark300\"\n ></sp-icon-checkmark300>\n `,\n};\n\nconst dashIcon = {\n s: html`\n <sp-icon-dash75\n id=\"partialCheckmark\"\n class=\"spectrum-UIIcon-Dash75\"\n ></sp-icon-dash75>\n `,\n m: html`\n <sp-icon-dash100\n id=\"partialCheckmark\"\n class=\"spectrum-UIIcon-Dash100\"\n ></sp-icon-dash100>\n `,\n l: html`\n <sp-icon-dash200\n id=\"partialCheckmark\"\n class=\"spectrum-UIIcon-Dash200\"\n ></sp-icon-dash200>\n `,\n xl: html`\n <sp-icon-dash300\n id=\"partialCheckmark\"\n class=\"spectrum-UIIcon-Dash300\"\n ></sp-icon-dash300>\n `,\n};\n\n/**\n * @element sp-checkbox\n * @slot - content to display as the label for the Checkbox\n * @fires change - Announces a change in the `checked` property of a Checkbox\n */\nexport class Checkbox extends SizedMixin(CheckboxBase) {\n @property({ type: Boolean, reflect: true })\n public indeterminate = false;\n\n @property({ type: Boolean, reflect: true })\n public invalid = false;\n\n @property({ type: Boolean, reflect: true })\n public emphasized = false;\n\n public static override get styles(): CSSResultArray {\n return [checkboxStyles, checkmarkSmallStyles, dashSmallStyles];\n }\n\n public override handleChange(): void {\n this.indeterminate = false;\n super.handleChange();\n }\n\n protected override render(): TemplateResult {\n return html`\n ${super.render()}\n <span id=\"box\">\n ${checkmarkIcon[this.size as DefaultElementSize]}\n ${dashIcon[this.size as DefaultElementSize]}\n </span>\n <label id=\"label\" for=\"input\"><slot></slot></label>\n `;\n }\n\n protected override updated(changes: PropertyValues): void {\n super.updated(changes);\n if (changes.has('invalid')) {\n if (this.invalid) {\n this.inputElement.setAttribute('aria-invalid', 'true');\n } else {\n this.inputElement.removeAttribute('aria-invalid');\n }\n }\n if (changes.has('indeterminate')) {\n this.inputElement.indeterminate = this.indeterminate;\n }\n }\n}\n"],
5
+ "mappings": ";;;;;;;;;;;;AAYA;AAAA,EAGI;AAAA,EAEA;AAAA,OAEG;AACP,SAAS,gBAAgB;AACzB,SAAS,oBAAoB;AAC7B,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO,oBAAoB;AAC3B,OAAO,0BAA0B;AACjC,OAAO,qBAAqB;AAE5B,MAAM,gBAAgB;AAAA,EAClB,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMH,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMH,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMH,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAMR;AAEA,MAAM,WAAW;AAAA,EACb,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMH,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMH,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMH,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAMR;AAOO,aAAM,iBAAiB,WAAW,YAAY,EAAE;AAAA,EAAhD;AAAA;AAEH,SAAO,gBAAgB;AAGvB,SAAO,UAAU;AAGjB,SAAO,aAAa;AAAA;AAAA,EAEpB,WAA2B,SAAyB;AAChD,WAAO,CAAC,gBAAgB,sBAAsB,eAAe;AAAA,EACjE;AAAA,EAEgB,eAAqB;AACjC,SAAK,gBAAgB;AACrB,UAAM,aAAa;AAAA,EACvB;AAAA,EAEmB,SAAyB;AACxC,WAAO;AAAA,cACD,MAAM,OAAO;AAAA;AAAA,kBAET,cAAc,KAAK,IAA0B;AAAA,kBAC7C,SAAS,KAAK,IAA0B;AAAA;AAAA;AAAA;AAAA,EAItD;AAAA,EAEmB,QAAQ,SAA+B;AACtD,UAAM,QAAQ,OAAO;AACrB,QAAI,QAAQ,IAAI,SAAS,GAAG;AACxB,UAAI,KAAK,SAAS;AACd,aAAK,aAAa,aAAa,gBAAgB,MAAM;AAAA,MACzD,OAAO;AACH,aAAK,aAAa,gBAAgB,cAAc;AAAA,MACpD;AAAA,IACJ;AACA,QAAI,QAAQ,IAAI,eAAe,GAAG;AAC9B,WAAK,aAAa,gBAAgB,KAAK;AAAA,IAC3C;AAAA,EACJ;AACJ;AAzCW;AAAA,EADN,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GADjC,SAEF;AAGA;AAAA,EADN,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAJjC,SAKF;AAGA;AAAA,EADN,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAPjC,SAQF;",
6
6
  "names": []
7
7
  }
package/src/Checkbox.js CHANGED
@@ -1,4 +1,4 @@
1
- "use strict";var p=Object.defineProperty;var n=Object.getOwnPropertyDescriptor;var a=(c,r,t,s)=>{for(var i=s>1?void 0:s?n(r,t):r,l=c.length-1,m;l>=0;l--)(m=c[l])&&(i=(s?m(r,t,i):m(i))||i);return s&&i&&p(r,t,i),i};import{html as e,SizedMixin as h}from"@spectrum-web-components/base";import{property as o}from"@spectrum-web-components/base/src/decorators.js";import{CheckboxBase as d}from"./CheckboxBase.js";import"@spectrum-web-components/icons-ui/icons/sp-icon-checkmark75.js";import"@spectrum-web-components/icons-ui/icons/sp-icon-checkmark100.js";import"@spectrum-web-components/icons-ui/icons/sp-icon-checkmark200.js";import"@spectrum-web-components/icons-ui/icons/sp-icon-checkmark300.js";import"@spectrum-web-components/icons-ui/icons/sp-icon-dash75.js";import"@spectrum-web-components/icons-ui/icons/sp-icon-dash100.js";import"@spectrum-web-components/icons-ui/icons/sp-icon-dash200.js";import"@spectrum-web-components/icons-ui/icons/sp-icon-dash300.js";import k from"./checkbox.css.js";import u from"@spectrum-web-components/icon/src/spectrum-icon-checkmark.css.js";import f from"@spectrum-web-components/icon/src/spectrum-icon-dash.css.js";const I={s:e`
1
+ "use strict";var m=Object.defineProperty;var n=Object.getOwnPropertyDescriptor;var s=(c,r,t,a)=>{for(var i=a>1?void 0:a?n(r,t):r,l=c.length-1,o;l>=0;l--)(o=c[l])&&(i=(a?o(r,t,i):o(i))||i);return a&&i&&m(r,t,i),i};import{html as e,SizedMixin as h}from"@spectrum-web-components/base";import{property as p}from"@spectrum-web-components/base/src/decorators.js";import{CheckboxBase as d}from"./CheckboxBase.js";import"@spectrum-web-components/icons-ui/icons/sp-icon-checkmark75.js";import"@spectrum-web-components/icons-ui/icons/sp-icon-checkmark100.js";import"@spectrum-web-components/icons-ui/icons/sp-icon-checkmark200.js";import"@spectrum-web-components/icons-ui/icons/sp-icon-checkmark300.js";import"@spectrum-web-components/icons-ui/icons/sp-icon-dash75.js";import"@spectrum-web-components/icons-ui/icons/sp-icon-dash100.js";import"@spectrum-web-components/icons-ui/icons/sp-icon-dash200.js";import"@spectrum-web-components/icons-ui/icons/sp-icon-dash300.js";import k from"./checkbox.css.js";import u from"@spectrum-web-components/icon/src/spectrum-icon-checkmark.css.js";import f from"@spectrum-web-components/icon/src/spectrum-icon-dash.css.js";const I={s:e`
2
2
  <sp-icon-checkmark75
3
3
  id="checkmark"
4
4
  class="spectrum-UIIcon-Checkmark75"
@@ -38,12 +38,12 @@
38
38
  id="partialCheckmark"
39
39
  class="spectrum-UIIcon-Dash300"
40
40
  ></sp-icon-dash300>
41
- `};export class Checkbox extends h(d){constructor(){super(...arguments);this.indeterminate=!1;this.invalid=!1;this.emphasized=!1}static get styles(){return[k,u,f]}render(){return e`
41
+ `};export class Checkbox extends h(d){constructor(){super(...arguments);this.indeterminate=!1;this.invalid=!1;this.emphasized=!1}static get styles(){return[k,u,f]}handleChange(){this.indeterminate=!1,super.handleChange()}render(){return e`
42
42
  ${super.render()}
43
43
  <span id="box">
44
44
  ${I[this.size]}
45
45
  ${S[this.size]}
46
46
  </span>
47
- <label id="label"><slot></slot></label>
48
- `}updated(t){super.updated(t),t.has("invalid")&&(this.invalid?this.inputElement.setAttribute("aria-invalid","true"):this.inputElement.removeAttribute("aria-invalid")),t.has("indeterminate")&&(this.indeterminate?this.inputElement.setAttribute("aria-checked","mixed"):this.inputElement.removeAttribute("aria-checked"))}}a([o({type:Boolean,reflect:!0})],Checkbox.prototype,"indeterminate",2),a([o({type:Boolean,reflect:!0})],Checkbox.prototype,"invalid",2),a([o({type:Boolean,reflect:!0})],Checkbox.prototype,"emphasized",2);
47
+ <label id="label" for="input"><slot></slot></label>
48
+ `}updated(t){super.updated(t),t.has("invalid")&&(this.invalid?this.inputElement.setAttribute("aria-invalid","true"):this.inputElement.removeAttribute("aria-invalid")),t.has("indeterminate")&&(this.inputElement.indeterminate=this.indeterminate)}}s([p({type:Boolean,reflect:!0})],Checkbox.prototype,"indeterminate",2),s([p({type:Boolean,reflect:!0})],Checkbox.prototype,"invalid",2),s([p({type:Boolean,reflect:!0})],Checkbox.prototype,"emphasized",2);
49
49
  //# sourceMappingURL=Checkbox.js.map
package/src/Checkbox.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["Checkbox.ts"],
4
- "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n CSSResultArray,\n DefaultElementSize,\n html,\n PropertyValues,\n SizedMixin,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport { CheckboxBase } from './CheckboxBase.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-checkmark75.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-checkmark100.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-checkmark200.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-checkmark300.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-dash75.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-dash100.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-dash200.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-dash300.js';\nimport checkboxStyles from './checkbox.css.js';\nimport checkmarkSmallStyles from '@spectrum-web-components/icon/src/spectrum-icon-checkmark.css.js';\nimport dashSmallStyles from '@spectrum-web-components/icon/src/spectrum-icon-dash.css.js';\n\nconst checkmarkIcon = {\n s: html`\n <sp-icon-checkmark75\n id=\"checkmark\"\n class=\"spectrum-UIIcon-Checkmark75\"\n ></sp-icon-checkmark75>\n `,\n m: html`\n <sp-icon-checkmark100\n id=\"checkmark\"\n class=\"spectrum-UIIcon-Checkmark100\"\n ></sp-icon-checkmark100>\n `,\n l: html`\n <sp-icon-checkmark200\n id=\"checkmark\"\n class=\"spectrum-UIIcon-Checkmark200\"\n ></sp-icon-checkmark200>\n `,\n xl: html`\n <sp-icon-checkmark300\n id=\"checkmark\"\n class=\"spectrum-UIIcon-Checkmark300\"\n ></sp-icon-checkmark300>\n `,\n};\n\nconst dashIcon = {\n s: html`\n <sp-icon-dash75\n id=\"partialCheckmark\"\n class=\"spectrum-UIIcon-Dash75\"\n ></sp-icon-dash75>\n `,\n m: html`\n <sp-icon-dash100\n id=\"partialCheckmark\"\n class=\"spectrum-UIIcon-Dash100\"\n ></sp-icon-dash100>\n `,\n l: html`\n <sp-icon-dash200\n id=\"partialCheckmark\"\n class=\"spectrum-UIIcon-Dash200\"\n ></sp-icon-dash200>\n `,\n xl: html`\n <sp-icon-dash300\n id=\"partialCheckmark\"\n class=\"spectrum-UIIcon-Dash300\"\n ></sp-icon-dash300>\n `,\n};\n\n/**\n * @element sp-checkbox\n * @slot - content to display as the label for the Checkbox\n * @fires change - Announces a change in the `checked` property of a Checkbox\n */\nexport class Checkbox extends SizedMixin(CheckboxBase) {\n @property({ type: Boolean, reflect: true })\n public indeterminate = false;\n\n @property({ type: Boolean, reflect: true })\n public invalid = false;\n\n @property({ type: Boolean, reflect: true })\n public emphasized = false;\n\n public static override get styles(): CSSResultArray {\n return [checkboxStyles, checkmarkSmallStyles, dashSmallStyles];\n }\n\n protected override render(): TemplateResult {\n return html`\n ${super.render()}\n <span id=\"box\">\n ${checkmarkIcon[this.size as DefaultElementSize]}\n ${dashIcon[this.size as DefaultElementSize]}\n </span>\n <label id=\"label\"><slot></slot></label>\n `;\n }\n\n protected override updated(changes: PropertyValues): void {\n super.updated(changes);\n if (changes.has('invalid')) {\n if (this.invalid) {\n this.inputElement.setAttribute('aria-invalid', 'true');\n } else {\n this.inputElement.removeAttribute('aria-invalid');\n }\n }\n if (changes.has('indeterminate')) {\n if (this.indeterminate) {\n this.inputElement.setAttribute('aria-checked', 'mixed');\n } else {\n this.inputElement.removeAttribute('aria-checked');\n }\n }\n }\n}\n"],
5
- "mappings": "qNAYA,OAGI,QAAAA,EAEA,cAAAC,MAEG,gCACP,OAAS,YAAAC,MAAgB,kDACzB,OAAS,gBAAAC,MAAoB,oBAC7B,MAAO,iEACP,MAAO,kEACP,MAAO,kEACP,MAAO,kEACP,MAAO,4DACP,MAAO,6DACP,MAAO,6DACP,MAAO,6DACP,OAAOC,MAAoB,oBAC3B,OAAOC,MAA0B,mEACjC,OAAOC,MAAqB,8DAE5B,MAAMC,EAAgB,CAClB,EAAGP;AAAA;AAAA;AAAA;AAAA;AAAA,MAMH,EAAGA;AAAA;AAAA;AAAA;AAAA;AAAA,MAMH,EAAGA;AAAA;AAAA;AAAA;AAAA;AAAA,MAMH,GAAIA;AAAA;AAAA;AAAA;AAAA;AAAA,KAMR,EAEMQ,EAAW,CACb,EAAGR;AAAA;AAAA;AAAA;AAAA;AAAA,MAMH,EAAGA;AAAA;AAAA;AAAA;AAAA;AAAA,MAMH,EAAGA;AAAA;AAAA;AAAA;AAAA;AAAA,MAMH,GAAIA;AAAA;AAAA;AAAA;AAAA;AAAA,KAMR,EAOO,aAAM,iBAAiBC,EAAWE,CAAY,CAAE,CAAhD,kCAEH,KAAO,cAAgB,GAGvB,KAAO,QAAU,GAGjB,KAAO,WAAa,GAEpB,WAA2B,QAAyB,CAChD,MAAO,CAACC,EAAgBC,EAAsBC,CAAe,CACjE,CAEmB,QAAyB,CACxC,OAAON;AAAA,cACD,MAAM,OAAO;AAAA;AAAA,kBAETO,EAAc,KAAK,IAA0B;AAAA,kBAC7CC,EAAS,KAAK,IAA0B;AAAA;AAAA;AAAA,SAItD,CAEmB,QAAQC,EAA+B,CACtD,MAAM,QAAQA,CAAO,EACjBA,EAAQ,IAAI,SAAS,IACjB,KAAK,QACL,KAAK,aAAa,aAAa,eAAgB,MAAM,EAErD,KAAK,aAAa,gBAAgB,cAAc,GAGpDA,EAAQ,IAAI,eAAe,IACvB,KAAK,cACL,KAAK,aAAa,aAAa,eAAgB,OAAO,EAEtD,KAAK,aAAa,gBAAgB,cAAc,EAG5D,CACJ,CAxCWC,EAAA,CADNR,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GADjC,SAEF,6BAGAQ,EAAA,CADNR,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GAJjC,SAKF,uBAGAQ,EAAA,CADNR,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GAPjC,SAQF",
4
+ "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n CSSResultArray,\n DefaultElementSize,\n html,\n PropertyValues,\n SizedMixin,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport { CheckboxBase } from './CheckboxBase.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-checkmark75.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-checkmark100.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-checkmark200.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-checkmark300.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-dash75.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-dash100.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-dash200.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-dash300.js';\nimport checkboxStyles from './checkbox.css.js';\nimport checkmarkSmallStyles from '@spectrum-web-components/icon/src/spectrum-icon-checkmark.css.js';\nimport dashSmallStyles from '@spectrum-web-components/icon/src/spectrum-icon-dash.css.js';\n\nconst checkmarkIcon = {\n s: html`\n <sp-icon-checkmark75\n id=\"checkmark\"\n class=\"spectrum-UIIcon-Checkmark75\"\n ></sp-icon-checkmark75>\n `,\n m: html`\n <sp-icon-checkmark100\n id=\"checkmark\"\n class=\"spectrum-UIIcon-Checkmark100\"\n ></sp-icon-checkmark100>\n `,\n l: html`\n <sp-icon-checkmark200\n id=\"checkmark\"\n class=\"spectrum-UIIcon-Checkmark200\"\n ></sp-icon-checkmark200>\n `,\n xl: html`\n <sp-icon-checkmark300\n id=\"checkmark\"\n class=\"spectrum-UIIcon-Checkmark300\"\n ></sp-icon-checkmark300>\n `,\n};\n\nconst dashIcon = {\n s: html`\n <sp-icon-dash75\n id=\"partialCheckmark\"\n class=\"spectrum-UIIcon-Dash75\"\n ></sp-icon-dash75>\n `,\n m: html`\n <sp-icon-dash100\n id=\"partialCheckmark\"\n class=\"spectrum-UIIcon-Dash100\"\n ></sp-icon-dash100>\n `,\n l: html`\n <sp-icon-dash200\n id=\"partialCheckmark\"\n class=\"spectrum-UIIcon-Dash200\"\n ></sp-icon-dash200>\n `,\n xl: html`\n <sp-icon-dash300\n id=\"partialCheckmark\"\n class=\"spectrum-UIIcon-Dash300\"\n ></sp-icon-dash300>\n `,\n};\n\n/**\n * @element sp-checkbox\n * @slot - content to display as the label for the Checkbox\n * @fires change - Announces a change in the `checked` property of a Checkbox\n */\nexport class Checkbox extends SizedMixin(CheckboxBase) {\n @property({ type: Boolean, reflect: true })\n public indeterminate = false;\n\n @property({ type: Boolean, reflect: true })\n public invalid = false;\n\n @property({ type: Boolean, reflect: true })\n public emphasized = false;\n\n public static override get styles(): CSSResultArray {\n return [checkboxStyles, checkmarkSmallStyles, dashSmallStyles];\n }\n\n public override handleChange(): void {\n this.indeterminate = false;\n super.handleChange();\n }\n\n protected override render(): TemplateResult {\n return html`\n ${super.render()}\n <span id=\"box\">\n ${checkmarkIcon[this.size as DefaultElementSize]}\n ${dashIcon[this.size as DefaultElementSize]}\n </span>\n <label id=\"label\" for=\"input\"><slot></slot></label>\n `;\n }\n\n protected override updated(changes: PropertyValues): void {\n super.updated(changes);\n if (changes.has('invalid')) {\n if (this.invalid) {\n this.inputElement.setAttribute('aria-invalid', 'true');\n } else {\n this.inputElement.removeAttribute('aria-invalid');\n }\n }\n if (changes.has('indeterminate')) {\n this.inputElement.indeterminate = this.indeterminate;\n }\n }\n}\n"],
5
+ "mappings": "qNAYA,OAGI,QAAAA,EAEA,cAAAC,MAEG,gCACP,OAAS,YAAAC,MAAgB,kDACzB,OAAS,gBAAAC,MAAoB,oBAC7B,MAAO,iEACP,MAAO,kEACP,MAAO,kEACP,MAAO,kEACP,MAAO,4DACP,MAAO,6DACP,MAAO,6DACP,MAAO,6DACP,OAAOC,MAAoB,oBAC3B,OAAOC,MAA0B,mEACjC,OAAOC,MAAqB,8DAE5B,MAAMC,EAAgB,CAClB,EAAGP;AAAA;AAAA;AAAA;AAAA;AAAA,MAMH,EAAGA;AAAA;AAAA;AAAA;AAAA;AAAA,MAMH,EAAGA;AAAA;AAAA;AAAA;AAAA;AAAA,MAMH,GAAIA;AAAA;AAAA;AAAA;AAAA;AAAA,KAMR,EAEMQ,EAAW,CACb,EAAGR;AAAA;AAAA;AAAA;AAAA;AAAA,MAMH,EAAGA;AAAA;AAAA;AAAA;AAAA;AAAA,MAMH,EAAGA;AAAA;AAAA;AAAA;AAAA;AAAA,MAMH,GAAIA;AAAA;AAAA;AAAA;AAAA;AAAA,KAMR,EAOO,aAAM,iBAAiBC,EAAWE,CAAY,CAAE,CAAhD,kCAEH,KAAO,cAAgB,GAGvB,KAAO,QAAU,GAGjB,KAAO,WAAa,GAEpB,WAA2B,QAAyB,CAChD,MAAO,CAACC,EAAgBC,EAAsBC,CAAe,CACjE,CAEgB,cAAqB,CACjC,KAAK,cAAgB,GACrB,MAAM,aAAa,CACvB,CAEmB,QAAyB,CACxC,OAAON;AAAA,cACD,MAAM,OAAO;AAAA;AAAA,kBAETO,EAAc,KAAK,IAA0B;AAAA,kBAC7CC,EAAS,KAAK,IAA0B;AAAA;AAAA;AAAA,SAItD,CAEmB,QAAQC,EAA+B,CACtD,MAAM,QAAQA,CAAO,EACjBA,EAAQ,IAAI,SAAS,IACjB,KAAK,QACL,KAAK,aAAa,aAAa,eAAgB,MAAM,EAErD,KAAK,aAAa,gBAAgB,cAAc,GAGpDA,EAAQ,IAAI,eAAe,IAC3B,KAAK,aAAa,cAAgB,KAAK,cAE/C,CACJ,CAzCWC,EAAA,CADNR,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GADjC,SAEF,6BAGAQ,EAAA,CADNR,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GAJjC,SAKF,uBAGAQ,EAAA,CADNR,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GAPjC,SAQF",
6
6
  "names": ["html", "SizedMixin", "property", "CheckboxBase", "checkboxStyles", "checkmarkSmallStyles", "dashSmallStyles", "checkmarkIcon", "dashIcon", "changes", "__decorateClass"]
7
7
  }
package/src/CheckboxBase.dev.js CHANGED
@@ -46,7 +46,6 @@ export class CheckboxBase extends Focusable {
46
46
  return html`
47
47
  <input
48
48
  id="input"
49
- aria-labelledby="label"
50
49
  type="checkbox"
51
50
  .checked=${this.checked}
52
51
  @change=${this.handleChange}
package/src/CheckboxBase.dev.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["CheckboxBase.ts"],
4
- "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { html, TemplateResult } from '@spectrum-web-components/base';\nimport {\n property,\n query,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport { Focusable } from '@spectrum-web-components/shared/src/focusable.js';\n\nexport class CheckboxBase extends Focusable {\n @property({ type: Boolean, reflect: true })\n public checked = false;\n\n @property({ type: Boolean, reflect: true })\n public readonly = false;\n\n @query('#input')\n protected inputElement!: HTMLInputElement;\n\n public override get focusElement(): HTMLElement {\n return this.inputElement;\n }\n\n public handleChange(): void {\n if (this.readonly) {\n this.inputElement.checked = this.checked;\n return;\n }\n this.checked = this.inputElement.checked;\n\n const changeEvent = new CustomEvent('change', {\n bubbles: true,\n cancelable: true,\n composed: true,\n });\n const applyDefault = this.dispatchEvent(changeEvent);\n\n if (!applyDefault) {\n this.checked = !this.inputElement.checked;\n this.inputElement.checked = this.checked;\n }\n }\n\n protected override render(): TemplateResult {\n return html`\n <input\n id=\"input\"\n aria-labelledby=\"label\"\n type=\"checkbox\"\n .checked=${this.checked}\n @change=${this.handleChange}\n />\n `;\n }\n}\n"],
5
- "mappings": ";;;;;;;;;;;;AAYA,SAAS,YAA4B;AACrC;AAAA,EACI;AAAA,EACA;AAAA,OACG;AACP,SAAS,iBAAiB;AAEnB,aAAM,qBAAqB,UAAU;AAAA,EAArC;AAAA;AAEH,SAAO,UAAU;AAGjB,SAAO,WAAW;AAAA;AAAA,EAKlB,IAAoB,eAA4B;AAC5C,WAAO,KAAK;AAAA,EAChB;AAAA,EAEO,eAAqB;AACxB,QAAI,KAAK,UAAU;AACf,WAAK,aAAa,UAAU,KAAK;AACjC;AAAA,IACJ;AACA,SAAK,UAAU,KAAK,aAAa;AAEjC,UAAM,cAAc,IAAI,YAAY,UAAU;AAAA,MAC1C,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,UAAU;AAAA,IACd,CAAC;AACD,UAAM,eAAe,KAAK,cAAc,WAAW;AAEnD,QAAI,CAAC,cAAc;AACf,WAAK,UAAU,CAAC,KAAK,aAAa;AAClC,WAAK,aAAa,UAAU,KAAK;AAAA,IACrC;AAAA,EACJ;AAAA,EAEmB,SAAyB;AACxC,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA,2BAKY,KAAK;AAAA,0BACN,KAAK;AAAA;AAAA;AAAA,EAG3B;AACJ;AA3CW;AAAA,EADN,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GADjC,aAEF;AAGA;AAAA,EADN,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAJjC,aAKF;AAGG;AAAA,EADT,MAAM,QAAQ;AAAA,GAPN,aAQC;",
4
+ "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { html, TemplateResult } from '@spectrum-web-components/base';\nimport {\n property,\n query,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport { Focusable } from '@spectrum-web-components/shared/src/focusable.js';\n\nexport class CheckboxBase extends Focusable {\n @property({ type: Boolean, reflect: true })\n public checked = false;\n\n @property({ type: Boolean, reflect: true })\n public readonly = false;\n\n @query('#input')\n protected inputElement!: HTMLInputElement;\n\n public override get focusElement(): HTMLElement {\n return this.inputElement;\n }\n\n public handleChange(): void {\n if (this.readonly) {\n this.inputElement.checked = this.checked;\n return;\n }\n this.checked = this.inputElement.checked;\n\n const changeEvent = new CustomEvent('change', {\n bubbles: true,\n cancelable: true,\n composed: true,\n });\n const applyDefault = this.dispatchEvent(changeEvent);\n\n if (!applyDefault) {\n this.checked = !this.inputElement.checked;\n this.inputElement.checked = this.checked;\n }\n }\n\n protected override render(): TemplateResult {\n return html`\n <input\n id=\"input\"\n type=\"checkbox\"\n .checked=${this.checked}\n @change=${this.handleChange}\n />\n `;\n }\n}\n"],
5
+ "mappings": ";;;;;;;;;;;;AAYA,SAAS,YAA4B;AACrC;AAAA,EACI;AAAA,EACA;AAAA,OACG;AACP,SAAS,iBAAiB;AAEnB,aAAM,qBAAqB,UAAU;AAAA,EAArC;AAAA;AAEH,SAAO,UAAU;AAGjB,SAAO,WAAW;AAAA;AAAA,EAKlB,IAAoB,eAA4B;AAC5C,WAAO,KAAK;AAAA,EAChB;AAAA,EAEO,eAAqB;AACxB,QAAI,KAAK,UAAU;AACf,WAAK,aAAa,UAAU,KAAK;AACjC;AAAA,IACJ;AACA,SAAK,UAAU,KAAK,aAAa;AAEjC,UAAM,cAAc,IAAI,YAAY,UAAU;AAAA,MAC1C,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,UAAU;AAAA,IACd,CAAC;AACD,UAAM,eAAe,KAAK,cAAc,WAAW;AAEnD,QAAI,CAAC,cAAc;AACf,WAAK,UAAU,CAAC,KAAK,aAAa;AAClC,WAAK,aAAa,UAAU,KAAK;AAAA,IACrC;AAAA,EACJ;AAAA,EAEmB,SAAyB;AACxC,WAAO;AAAA;AAAA;AAAA;AAAA,2BAIY,KAAK;AAAA,0BACN,KAAK;AAAA;AAAA;AAAA,EAG3B;AACJ;AA1CW;AAAA,EADN,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GADjC,aAEF;AAGA;AAAA,EADN,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAJjC,aAKF;AAGG;AAAA,EADT,MAAM,QAAQ;AAAA,GAPN,aAQC;",
6
6
  "names": []
7
7
  }
package/src/CheckboxBase.js CHANGED
@@ -1,10 +1,9 @@
1
- "use strict";var u=Object.defineProperty;var a=Object.getOwnPropertyDescriptor;var n=(i,t,c,l)=>{for(var e=l>1?void 0:l?a(t,c):t,r=i.length-1,p;r>=0;r--)(p=i[r])&&(e=(l?p(t,c,e):p(e))||e);return l&&e&&u(t,c,e),e};import{html as d}from"@spectrum-web-components/base";import{property as h,query as s}from"@spectrum-web-components/base/src/decorators.js";import{Focusable as o}from"@spectrum-web-components/shared/src/focusable.js";export class CheckboxBase extends o{constructor(){super(...arguments);this.checked=!1;this.readonly=!1}get focusElement(){return this.inputElement}handleChange(){if(this.readonly){this.inputElement.checked=this.checked;return}this.checked=this.inputElement.checked;const c=new CustomEvent("change",{bubbles:!0,cancelable:!0,composed:!0});this.dispatchEvent(c)||(this.checked=!this.inputElement.checked,this.inputElement.checked=this.checked)}render(){return d`
1
+ "use strict";var u=Object.defineProperty;var s=Object.getOwnPropertyDescriptor;var l=(i,t,c,n)=>{for(var e=n>1?void 0:n?s(t,c):t,p=i.length-1,r;p>=0;p--)(r=i[p])&&(e=(n?r(t,c,e):r(e))||e);return n&&e&&u(t,c,e),e};import{html as d}from"@spectrum-web-components/base";import{property as h,query as o}from"@spectrum-web-components/base/src/decorators.js";import{Focusable as a}from"@spectrum-web-components/shared/src/focusable.js";export class CheckboxBase extends a{constructor(){super(...arguments);this.checked=!1;this.readonly=!1}get focusElement(){return this.inputElement}handleChange(){if(this.readonly){this.inputElement.checked=this.checked;return}this.checked=this.inputElement.checked;const c=new CustomEvent("change",{bubbles:!0,cancelable:!0,composed:!0});this.dispatchEvent(c)||(this.checked=!this.inputElement.checked,this.inputElement.checked=this.checked)}render(){return d`
2
2
  <input
3
3
  id="input"
4
- aria-labelledby="label"
5
4
  type="checkbox"
6
5
  .checked=${this.checked}
7
6
  @change=${this.handleChange}
8
7
  />
9
- `}}n([h({type:Boolean,reflect:!0})],CheckboxBase.prototype,"checked",2),n([h({type:Boolean,reflect:!0})],CheckboxBase.prototype,"readonly",2),n([s("#input")],CheckboxBase.prototype,"inputElement",2);
8
+ `}}l([h({type:Boolean,reflect:!0})],CheckboxBase.prototype,"checked",2),l([h({type:Boolean,reflect:!0})],CheckboxBase.prototype,"readonly",2),l([o("#input")],CheckboxBase.prototype,"inputElement",2);
10
9
  //# sourceMappingURL=CheckboxBase.js.map
package/src/CheckboxBase.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["CheckboxBase.ts"],
4
- "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { html, TemplateResult } from '@spectrum-web-components/base';\nimport {\n property,\n query,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport { Focusable } from '@spectrum-web-components/shared/src/focusable.js';\n\nexport class CheckboxBase extends Focusable {\n @property({ type: Boolean, reflect: true })\n public checked = false;\n\n @property({ type: Boolean, reflect: true })\n public readonly = false;\n\n @query('#input')\n protected inputElement!: HTMLInputElement;\n\n public override get focusElement(): HTMLElement {\n return this.inputElement;\n }\n\n public handleChange(): void {\n if (this.readonly) {\n this.inputElement.checked = this.checked;\n return;\n }\n this.checked = this.inputElement.checked;\n\n const changeEvent = new CustomEvent('change', {\n bubbles: true,\n cancelable: true,\n composed: true,\n });\n const applyDefault = this.dispatchEvent(changeEvent);\n\n if (!applyDefault) {\n this.checked = !this.inputElement.checked;\n this.inputElement.checked = this.checked;\n }\n }\n\n protected override render(): TemplateResult {\n return html`\n <input\n id=\"input\"\n aria-labelledby=\"label\"\n type=\"checkbox\"\n .checked=${this.checked}\n @change=${this.handleChange}\n />\n `;\n }\n}\n"],
5
- "mappings": "qNAYA,OAAS,QAAAA,MAA4B,gCACrC,OACI,YAAAC,EACA,SAAAC,MACG,kDACP,OAAS,aAAAC,MAAiB,mDAEnB,aAAM,qBAAqBA,CAAU,CAArC,kCAEH,KAAO,QAAU,GAGjB,KAAO,SAAW,GAKlB,IAAoB,cAA4B,CAC5C,OAAO,KAAK,YAChB,CAEO,cAAqB,CACxB,GAAI,KAAK,SAAU,CACf,KAAK,aAAa,QAAU,KAAK,QACjC,OAEJ,KAAK,QAAU,KAAK,aAAa,QAEjC,MAAMC,EAAc,IAAI,YAAY,SAAU,CAC1C,QAAS,GACT,WAAY,GACZ,SAAU,EACd,CAAC,EACoB,KAAK,cAAcA,CAAW,IAG/C,KAAK,QAAU,CAAC,KAAK,aAAa,QAClC,KAAK,aAAa,QAAU,KAAK,QAEzC,CAEmB,QAAyB,CACxC,OAAOJ;AAAA;AAAA;AAAA;AAAA;AAAA,2BAKY,KAAK;AAAA,0BACN,KAAK;AAAA;AAAA,SAG3B,CACJ,CA3CWK,EAAA,CADNJ,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GADjC,aAEF,uBAGAI,EAAA,CADNJ,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GAJjC,aAKF,wBAGGI,EAAA,CADTH,EAAM,QAAQ,GAPN,aAQC",
4
+ "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { html, TemplateResult } from '@spectrum-web-components/base';\nimport {\n property,\n query,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport { Focusable } from '@spectrum-web-components/shared/src/focusable.js';\n\nexport class CheckboxBase extends Focusable {\n @property({ type: Boolean, reflect: true })\n public checked = false;\n\n @property({ type: Boolean, reflect: true })\n public readonly = false;\n\n @query('#input')\n protected inputElement!: HTMLInputElement;\n\n public override get focusElement(): HTMLElement {\n return this.inputElement;\n }\n\n public handleChange(): void {\n if (this.readonly) {\n this.inputElement.checked = this.checked;\n return;\n }\n this.checked = this.inputElement.checked;\n\n const changeEvent = new CustomEvent('change', {\n bubbles: true,\n cancelable: true,\n composed: true,\n });\n const applyDefault = this.dispatchEvent(changeEvent);\n\n if (!applyDefault) {\n this.checked = !this.inputElement.checked;\n this.inputElement.checked = this.checked;\n }\n }\n\n protected override render(): TemplateResult {\n return html`\n <input\n id=\"input\"\n type=\"checkbox\"\n .checked=${this.checked}\n @change=${this.handleChange}\n />\n `;\n }\n}\n"],
5
+ "mappings": "qNAYA,OAAS,QAAAA,MAA4B,gCACrC,OACI,YAAAC,EACA,SAAAC,MACG,kDACP,OAAS,aAAAC,MAAiB,mDAEnB,aAAM,qBAAqBA,CAAU,CAArC,kCAEH,KAAO,QAAU,GAGjB,KAAO,SAAW,GAKlB,IAAoB,cAA4B,CAC5C,OAAO,KAAK,YAChB,CAEO,cAAqB,CACxB,GAAI,KAAK,SAAU,CACf,KAAK,aAAa,QAAU,KAAK,QACjC,OAEJ,KAAK,QAAU,KAAK,aAAa,QAEjC,MAAMC,EAAc,IAAI,YAAY,SAAU,CAC1C,QAAS,GACT,WAAY,GACZ,SAAU,EACd,CAAC,EACoB,KAAK,cAAcA,CAAW,IAG/C,KAAK,QAAU,CAAC,KAAK,aAAa,QAClC,KAAK,aAAa,QAAU,KAAK,QAEzC,CAEmB,QAAyB,CACxC,OAAOJ;AAAA;AAAA;AAAA;AAAA,2BAIY,KAAK;AAAA,0BACN,KAAK;AAAA;AAAA,SAG3B,CACJ,CA1CWK,EAAA,CADNJ,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GADjC,aAEF,uBAGAI,EAAA,CADNJ,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GAJjC,aAKF,wBAGGI,EAAA,CADTH,EAAM,QAAQ,GAPN,aAQC",
6
6
  "names": ["html", "property", "query", "Focusable", "changeEvent", "__decorateClass"]
7
7
  }
package/stories/checkbox.stories.js CHANGED
@@ -18,7 +18,13 @@ export const readonly = () => {
18
18
  };
19
19
  export const Indeterminate = () => {
20
20
  return html`
21
- <sp-checkbox indeterminate>Checkbox</sp-checkbox>
21
+ <sp-checkbox indeterminate>
22
+ Checkbox, indeterminate, not checked
23
+ </sp-checkbox>
24
+ <br />
25
+ <sp-checkbox indeterminate checked>
26
+ Checkbox, indeterminate, checked
27
+ </sp-checkbox>
22
28
  `;
23
29
  };
24
30
  export const Checked = () => {
package/stories/checkbox.stories.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["checkbox.stories.ts"],
4
- "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport '@spectrum-web-components/checkbox/sp-checkbox.js';\nimport '@spectrum-web-components/field-group/sp-field-group.js';\nimport { html, TemplateResult } from '@spectrum-web-components/base';\n\nexport default {\n component: 'sp-checkbox',\n title: 'Checkbox',\n};\n\nexport const Default = (): TemplateResult => {\n return html`\n <sp-checkbox>Checkbox</sp-checkbox>\n `;\n};\n\nexport const readonly = (): TemplateResult => {\n return html`\n <sp-checkbox checked readonly>Checkbox</sp-checkbox>\n `;\n};\n\nexport const Indeterminate = (): TemplateResult => {\n return html`\n <sp-checkbox indeterminate>Checkbox</sp-checkbox>\n `;\n};\n\nexport const Checked = (): TemplateResult => {\n return html`\n <sp-checkbox checked>Checkbox</sp-checkbox>\n `;\n};\n\nexport const emphasized = (): TemplateResult => {\n return html`\n <sp-checkbox emphasized>Checkbox</sp-checkbox>\n `;\n};\n\nexport const emphasizedIndeterminate = (): TemplateResult => {\n return html`\n <sp-checkbox emphasized indeterminate>Checkbox</sp-checkbox>\n `;\n};\n\nexport const emphasizedChecked = (): TemplateResult => {\n return html`\n <sp-checkbox emphasized checked>Checkbox</sp-checkbox>\n `;\n};\n\nexport const emphasizedInvalid = (): TemplateResult => {\n return html`\n <sp-checkbox emphasized invalid>Checkbox</sp-checkbox>\n `;\n};\n\nexport const emphasizedInvalidIndeterminate = (): TemplateResult => {\n return html`\n <sp-checkbox emphasized invalid indeterminate>Checkbox</sp-checkbox>\n `;\n};\n\nexport const emphasizedInvalidChecked = (): TemplateResult => {\n return html`\n <sp-checkbox emphasized invalid checked>Checkbox</sp-checkbox>\n `;\n};\n\nexport const Invalid = (): TemplateResult => {\n return html`\n <sp-checkbox invalid>Checkbox</sp-checkbox>\n `;\n};\n\nexport const invalidIndeterminate = (): TemplateResult => {\n return html`\n <sp-checkbox invalid indeterminate>Checkbox</sp-checkbox>\n `;\n};\n\nexport const invalidChecked = (): TemplateResult => {\n return html`\n <sp-checkbox invalid checked>Checkbox</sp-checkbox>\n `;\n};\n\nexport const Autofocus = (): TemplateResult => {\n return html`\n <sp-checkbox autofocus>Checkbox</sp-checkbox>\n `;\n};\n\nexport const Disabled = (): TemplateResult => {\n return html`\n <sp-checkbox disabled>Checkbox</sp-checkbox>\n `;\n};\n\nexport const disabledChecked = (): TemplateResult => {\n return html`\n <sp-checkbox disabled checked>Checkbox</sp-checkbox>\n `;\n};\n\nexport const disabledIndeterminate = (): TemplateResult => {\n return html`\n <sp-checkbox disabled indeterminate>Checkbox</sp-checkbox>\n `;\n};\n\nexport const emphasizedDisabled = (): TemplateResult => {\n return html`\n <sp-checkbox emphasized disabled>Checkbox</sp-checkbox>\n `;\n};\n\nexport const emphasizedDisabledIndeterminate = (): TemplateResult => {\n return html`\n <sp-checkbox emphasized disabled indeterminate>Checkbox</sp-checkbox>\n `;\n};\n\nexport const emphasizedDisabledChecked = (): TemplateResult => {\n return html`\n <sp-checkbox emphasized checked>Checkbox</sp-checkbox>\n `;\n};\n\nexport const tabIndexExample = (): TemplateResult => {\n return html`\n <sp-field-group horizontal>\n <sp-checkbox tabindex=\"0\">Checkbox 0</sp-checkbox>\n <sp-checkbox disabled tabindex=\"3\">Checkbox 3</sp-checkbox>\n <sp-checkbox tabindex=\"4\">Checkbox 4</sp-checkbox>\n <sp-checkbox tabindex=\"2\" autofocus>Checkbox 2</sp-checkbox>\n <sp-checkbox tabindex=\"1\">Checkbox 1</sp-checkbox>\n </sp-field-group>\n `;\n};\n\nexport const verticalTabIndexExample = (): TemplateResult => {\n return html`\n <sp-field-group vertical>\n <sp-checkbox tabindex=\"0\">Checkbox 0</sp-checkbox>\n <sp-checkbox disabled tabindex=\"3\">Checkbox 3</sp-checkbox>\n <sp-checkbox tabindex=\"4\">Checkbox 4</sp-checkbox>\n <sp-checkbox tabindex=\"2\" autofocus>Checkbox 2</sp-checkbox>\n <sp-checkbox tabindex=\"1\">Checkbox 1</sp-checkbox>\n </sp-field-group>\n `;\n};\n"],
5
- "mappings": ";AAWA,OAAO;AACP,OAAO;AACP,SAAS,YAA4B;AAErC,eAAe;AAAA,EACX,WAAW;AAAA,EACX,OAAO;AACX;AAEO,aAAM,UAAU,MAAsB;AACzC,SAAO;AAAA;AAAA;AAGX;AAEO,aAAM,WAAW,MAAsB;AAC1C,SAAO;AAAA;AAAA;AAGX;AAEO,aAAM,gBAAgB,MAAsB;AAC/C,SAAO;AAAA;AAAA;AAGX;AAEO,aAAM,UAAU,MAAsB;AACzC,SAAO;AAAA;AAAA;AAGX;AAEO,aAAM,aAAa,MAAsB;AAC5C,SAAO;AAAA;AAAA;AAGX;AAEO,aAAM,0BAA0B,MAAsB;AACzD,SAAO;AAAA;AAAA;AAGX;AAEO,aAAM,oBAAoB,MAAsB;AACnD,SAAO;AAAA;AAAA;AAGX;AAEO,aAAM,oBAAoB,MAAsB;AACnD,SAAO;AAAA;AAAA;AAGX;AAEO,aAAM,iCAAiC,MAAsB;AAChE,SAAO;AAAA;AAAA;AAGX;AAEO,aAAM,2BAA2B,MAAsB;AAC1D,SAAO;AAAA;AAAA;AAGX;AAEO,aAAM,UAAU,MAAsB;AACzC,SAAO;AAAA;AAAA;AAGX;AAEO,aAAM,uBAAuB,MAAsB;AACtD,SAAO;AAAA;AAAA;AAGX;AAEO,aAAM,iBAAiB,MAAsB;AAChD,SAAO;AAAA;AAAA;AAGX;AAEO,aAAM,YAAY,MAAsB;AAC3C,SAAO;AAAA;AAAA;AAGX;AAEO,aAAM,WAAW,MAAsB;AAC1C,SAAO;AAAA;AAAA;AAGX;AAEO,aAAM,kBAAkB,MAAsB;AACjD,SAAO;AAAA;AAAA;AAGX;AAEO,aAAM,wBAAwB,MAAsB;AACvD,SAAO;AAAA;AAAA;AAGX;AAEO,aAAM,qBAAqB,MAAsB;AACpD,SAAO;AAAA;AAAA;AAGX;AAEO,aAAM,kCAAkC,MAAsB;AACjE,SAAO;AAAA;AAAA;AAGX;AAEO,aAAM,4BAA4B,MAAsB;AAC3D,SAAO;AAAA;AAAA;AAGX;AAEO,aAAM,kBAAkB,MAAsB;AACjD,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASX;AAEO,aAAM,0BAA0B,MAAsB;AACzD,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASX;",
4
+ "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport '@spectrum-web-components/checkbox/sp-checkbox.js';\nimport '@spectrum-web-components/field-group/sp-field-group.js';\nimport { html, TemplateResult } from '@spectrum-web-components/base';\n\nexport default {\n component: 'sp-checkbox',\n title: 'Checkbox',\n};\n\nexport const Default = (): TemplateResult => {\n return html`\n <sp-checkbox>Checkbox</sp-checkbox>\n `;\n};\n\nexport const readonly = (): TemplateResult => {\n return html`\n <sp-checkbox checked readonly>Checkbox</sp-checkbox>\n `;\n};\n\nexport const Indeterminate = (): TemplateResult => {\n return html`\n <sp-checkbox indeterminate>\n Checkbox, indeterminate, not checked\n </sp-checkbox>\n <br />\n <sp-checkbox indeterminate checked>\n Checkbox, indeterminate, checked\n </sp-checkbox>\n `;\n};\n\nexport const Checked = (): TemplateResult => {\n return html`\n <sp-checkbox checked>Checkbox</sp-checkbox>\n `;\n};\n\nexport const emphasized = (): TemplateResult => {\n return html`\n <sp-checkbox emphasized>Checkbox</sp-checkbox>\n `;\n};\n\nexport const emphasizedIndeterminate = (): TemplateResult => {\n return html`\n <sp-checkbox emphasized indeterminate>Checkbox</sp-checkbox>\n `;\n};\n\nexport const emphasizedChecked = (): TemplateResult => {\n return html`\n <sp-checkbox emphasized checked>Checkbox</sp-checkbox>\n `;\n};\n\nexport const emphasizedInvalid = (): TemplateResult => {\n return html`\n <sp-checkbox emphasized invalid>Checkbox</sp-checkbox>\n `;\n};\n\nexport const emphasizedInvalidIndeterminate = (): TemplateResult => {\n return html`\n <sp-checkbox emphasized invalid indeterminate>Checkbox</sp-checkbox>\n `;\n};\n\nexport const emphasizedInvalidChecked = (): TemplateResult => {\n return html`\n <sp-checkbox emphasized invalid checked>Checkbox</sp-checkbox>\n `;\n};\n\nexport const Invalid = (): TemplateResult => {\n return html`\n <sp-checkbox invalid>Checkbox</sp-checkbox>\n `;\n};\n\nexport const invalidIndeterminate = (): TemplateResult => {\n return html`\n <sp-checkbox invalid indeterminate>Checkbox</sp-checkbox>\n `;\n};\n\nexport const invalidChecked = (): TemplateResult => {\n return html`\n <sp-checkbox invalid checked>Checkbox</sp-checkbox>\n `;\n};\n\nexport const Autofocus = (): TemplateResult => {\n return html`\n <sp-checkbox autofocus>Checkbox</sp-checkbox>\n `;\n};\n\nexport const Disabled = (): TemplateResult => {\n return html`\n <sp-checkbox disabled>Checkbox</sp-checkbox>\n `;\n};\n\nexport const disabledChecked = (): TemplateResult => {\n return html`\n <sp-checkbox disabled checked>Checkbox</sp-checkbox>\n `;\n};\n\nexport const disabledIndeterminate = (): TemplateResult => {\n return html`\n <sp-checkbox disabled indeterminate>Checkbox</sp-checkbox>\n `;\n};\n\nexport const emphasizedDisabled = (): TemplateResult => {\n return html`\n <sp-checkbox emphasized disabled>Checkbox</sp-checkbox>\n `;\n};\n\nexport const emphasizedDisabledIndeterminate = (): TemplateResult => {\n return html`\n <sp-checkbox emphasized disabled indeterminate>Checkbox</sp-checkbox>\n `;\n};\n\nexport const emphasizedDisabledChecked = (): TemplateResult => {\n return html`\n <sp-checkbox emphasized checked>Checkbox</sp-checkbox>\n `;\n};\n\nexport const tabIndexExample = (): TemplateResult => {\n return html`\n <sp-field-group horizontal>\n <sp-checkbox tabindex=\"0\">Checkbox 0</sp-checkbox>\n <sp-checkbox disabled tabindex=\"3\">Checkbox 3</sp-checkbox>\n <sp-checkbox tabindex=\"4\">Checkbox 4</sp-checkbox>\n <sp-checkbox tabindex=\"2\" autofocus>Checkbox 2</sp-checkbox>\n <sp-checkbox tabindex=\"1\">Checkbox 1</sp-checkbox>\n </sp-field-group>\n `;\n};\n\nexport const verticalTabIndexExample = (): TemplateResult => {\n return html`\n <sp-field-group vertical>\n <sp-checkbox tabindex=\"0\">Checkbox 0</sp-checkbox>\n <sp-checkbox disabled tabindex=\"3\">Checkbox 3</sp-checkbox>\n <sp-checkbox tabindex=\"4\">Checkbox 4</sp-checkbox>\n <sp-checkbox tabindex=\"2\" autofocus>Checkbox 2</sp-checkbox>\n <sp-checkbox tabindex=\"1\">Checkbox 1</sp-checkbox>\n </sp-field-group>\n `;\n};\n"],
5
+ "mappings": ";AAWA,OAAO;AACP,OAAO;AACP,SAAS,YAA4B;AAErC,eAAe;AAAA,EACX,WAAW;AAAA,EACX,OAAO;AACX;AAEO,aAAM,UAAU,MAAsB;AACzC,SAAO;AAAA;AAAA;AAGX;AAEO,aAAM,WAAW,MAAsB;AAC1C,SAAO;AAAA;AAAA;AAGX;AAEO,aAAM,gBAAgB,MAAsB;AAC/C,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASX;AAEO,aAAM,UAAU,MAAsB;AACzC,SAAO;AAAA;AAAA;AAGX;AAEO,aAAM,aAAa,MAAsB;AAC5C,SAAO;AAAA;AAAA;AAGX;AAEO,aAAM,0BAA0B,MAAsB;AACzD,SAAO;AAAA;AAAA;AAGX;AAEO,aAAM,oBAAoB,MAAsB;AACnD,SAAO;AAAA;AAAA;AAGX;AAEO,aAAM,oBAAoB,MAAsB;AACnD,SAAO;AAAA;AAAA;AAGX;AAEO,aAAM,iCAAiC,MAAsB;AAChE,SAAO;AAAA;AAAA;AAGX;AAEO,aAAM,2BAA2B,MAAsB;AAC1D,SAAO;AAAA;AAAA;AAGX;AAEO,aAAM,UAAU,MAAsB;AACzC,SAAO;AAAA;AAAA;AAGX;AAEO,aAAM,uBAAuB,MAAsB;AACtD,SAAO;AAAA;AAAA;AAGX;AAEO,aAAM,iBAAiB,MAAsB;AAChD,SAAO;AAAA;AAAA;AAGX;AAEO,aAAM,YAAY,MAAsB;AAC3C,SAAO;AAAA;AAAA;AAGX;AAEO,aAAM,WAAW,MAAsB;AAC1C,SAAO;AAAA;AAAA;AAGX;AAEO,aAAM,kBAAkB,MAAsB;AACjD,SAAO;AAAA;AAAA;AAGX;AAEO,aAAM,wBAAwB,MAAsB;AACvD,SAAO;AAAA;AAAA;AAGX;AAEO,aAAM,qBAAqB,MAAsB;AACpD,SAAO;AAAA;AAAA;AAGX;AAEO,aAAM,kCAAkC,MAAsB;AACjE,SAAO;AAAA;AAAA;AAGX;AAEO,aAAM,4BAA4B,MAAsB;AAC3D,SAAO;AAAA;AAAA;AAGX;AAEO,aAAM,kBAAkB,MAAsB;AACjD,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASX;AAEO,aAAM,0BAA0B,MAAsB;AACzD,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASX;",
6
6
  "names": []
7
7
  }
package/test/checkbox.test.js CHANGED
@@ -10,11 +10,21 @@ import {
10
10
  } from "@open-wc/testing";
11
11
  import "@spectrum-web-components/shared/src/focus-visible.js";
12
12
  import { testForLitDevWarnings } from "../../../test/testing-helpers.js";
13
+ import { a11ySnapshot, findAccessibilityNode } from "@web/test-runner-commands";
13
14
  function inputForCheckbox(checkbox) {
14
15
  if (!checkbox.shadowRoot)
15
16
  throw new Error("No shadowRoot");
16
17
  return checkbox.shadowRoot.querySelector("#input");
17
18
  }
19
+ function labelForCheckbox(checkbox) {
20
+ if (!checkbox.shadowRoot)
21
+ throw new Error("No shadowRoot");
22
+ const labelEl = checkbox.shadowRoot.querySelector("label");
23
+ if (!labelEl) {
24
+ throw new Error("Failed to find label in shadowRoot");
25
+ }
26
+ return labelEl;
27
+ }
18
28
  function labelNodeForCheckbox(checkbox) {
19
29
  if (!checkbox.shadowRoot)
20
30
  throw new Error("No shadowRoot");
@@ -76,6 +86,21 @@ describe("Checkbox", () => {
76
86
  );
77
87
  await elementUpdated(el);
78
88
  await expect(el).to.be.accessible();
89
+ const labelEl = labelForCheckbox(el);
90
+ const inputEl = inputForCheckbox(el);
91
+ expect(labelEl.getAttribute("for")).to.equal(inputEl.id);
92
+ expect(inputEl.checked).to.be.false;
93
+ expect(inputEl.indeterminate).to.be.false;
94
+ const snapshot = await a11ySnapshot(
95
+ {}
96
+ );
97
+ expect(
98
+ findAccessibilityNode(
99
+ snapshot,
100
+ (node) => node.role === "checkbox" && !node.checked && node.name === "Not Checked"
101
+ ),
102
+ 'Has a named and not checked "checkbox" element'
103
+ ).to.not.be.null;
79
104
  });
80
105
  it("loads `checked` checkbox accessibly", async () => {
81
106
  const el = await fixture(
@@ -85,15 +110,34 @@ describe("Checkbox", () => {
85
110
  );
86
111
  await elementUpdated(el);
87
112
  await expect(el).to.be.accessible();
113
+ const labelEl = labelForCheckbox(el);
114
+ const inputEl = inputForCheckbox(el);
115
+ expect(labelEl.getAttribute("for")).to.equal(inputEl.id);
116
+ expect(inputEl.checked).to.be.true;
117
+ expect(inputEl.indeterminate).to.be.false;
118
+ const snapshot = await a11ySnapshot(
119
+ {}
120
+ );
121
+ expect(
122
+ findAccessibilityNode(
123
+ snapshot,
124
+ (node) => node.role === "checkbox" && node.checked && node.name === "Checked"
125
+ ),
126
+ 'Has a named and checked "checkbox" element'
127
+ ).to.not.be.null;
88
128
  });
89
129
  it("is `invalid` checkbox accessibly", async () => {
90
130
  const el = await fixture(
91
131
  html`
92
- <sp-checkbox invalid>Invalid Checked</sp-checkbox>
132
+ <sp-checkbox invalid>Invalid Not Checked</sp-checkbox>
93
133
  `
94
134
  );
95
135
  await elementUpdated(el);
96
136
  await expect(el).to.be.accessible();
137
+ const labelEl = labelForCheckbox(el);
138
+ const inputEl = inputForCheckbox(el);
139
+ expect(labelEl.getAttribute("for")).to.equal(inputEl.id);
140
+ expect(inputEl).to.have.attribute("aria-invalid", "true");
97
141
  });
98
142
  it("autofocuses", async () => {
99
143
  const autoElement = testFixture.querySelector(
@@ -156,5 +200,41 @@ describe("Checkbox", () => {
156
200
  await elementUpdated(el);
157
201
  expect(el.checked).to.be.true;
158
202
  });
203
+ it("`indeterminate, checked` becomes `not checked` on click", async () => {
204
+ const el = await fixture(html`
205
+ <sp-checkbox checked .indeterminate=${true}>
206
+ indeterminate, checked
207
+ </sp-checkbox>
208
+ `);
209
+ expect(el.checked).to.be.true;
210
+ expect(el.indeterminate).to.be.true;
211
+ const inputEl = inputForCheckbox(el);
212
+ expect(inputEl.checked).to.be.true;
213
+ expect(inputEl.indeterminate).to.be.true;
214
+ el.click();
215
+ await elementUpdated(el);
216
+ expect(el.checked).to.be.false;
217
+ expect(el.indeterminate).to.be.false;
218
+ expect(inputEl.checked).to.be.false;
219
+ expect(inputEl.indeterminate).to.be.false;
220
+ });
221
+ it("`indeterminate, not checked` becomes `checked` on click", async () => {
222
+ const el = await fixture(html`
223
+ <sp-checkbox .indeterminate=${true}>
224
+ indeterminate, checked
225
+ </sp-checkbox>
226
+ `);
227
+ expect(el.checked).to.be.false;
228
+ expect(el.indeterminate).to.be.true;
229
+ const inputEl = inputForCheckbox(el);
230
+ expect(inputEl.checked).to.be.false;
231
+ expect(inputEl.indeterminate).to.be.true;
232
+ el.click();
233
+ await elementUpdated(el);
234
+ expect(el.checked).to.be.true;
235
+ expect(el.indeterminate).to.be.false;
236
+ expect(inputEl.checked).to.be.true;
237
+ expect(inputEl.indeterminate).to.be.false;
238
+ });
159
239
  });
160
240
  //# sourceMappingURL=checkbox.test.js.map
package/test/checkbox.test.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["checkbox.test.ts"],
4
- "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport '@spectrum-web-components/checkbox/sp-checkbox.js';\nimport { Checkbox } from '../';\nimport {\n elementUpdated,\n expect,\n fixture,\n html,\n triggerBlurFor,\n waitUntil,\n} from '@open-wc/testing';\nimport '@spectrum-web-components/shared/src/focus-visible.js';\nimport { testForLitDevWarnings } from '../../../test/testing-helpers.js';\n\nfunction inputForCheckbox(checkbox: Checkbox): HTMLInputElement {\n if (!checkbox.shadowRoot) throw new Error('No shadowRoot');\n return checkbox.shadowRoot.querySelector('#input') as HTMLInputElement;\n}\n\nfunction labelNodeForCheckbox(checkbox: Checkbox): Node {\n if (!checkbox.shadowRoot) throw new Error('No shadowRoot');\n const slotEl = checkbox.shadowRoot.querySelector('slot');\n if (!slotEl) {\n throw new Error('Failed to find slot in shadowRoot');\n }\n return slotEl.assignedNodes()[0];\n}\ndescribe('Checkbox', () => {\n let testFixture: HTMLDivElement;\n\n beforeEach(async () => {\n testFixture = await fixture<HTMLDivElement>(\n html`\n <div>\n <div id=\"test-checkbox\">\n <sp-checkbox id=\"checkbox0\" tabindex=\"5\">\n Component\n </sp-checkbox>\n <sp-checkbox id=\"checkbox1\" tabindex=\"2\" checked>\n Check 1\n </sp-checkbox>\n <sp-checkbox id=\"checkbox2\" tabindex=\"3\" disabled>\n Check 2\n </sp-checkbox>\n <sp-checkbox id=\"checkbox3\" tabindex=\"1\" autofocus>\n Check 3\n </sp-checkbox>\n <sp-checkbox id=\"checkbox4\" tabindex=\"0\">\n Check 4\n </sp-checkbox>\n <sp-checkbox id=\"checkbox5\" tabindex=\"-1\">\n Check 5\n </sp-checkbox>\n </div>\n </div>\n `\n );\n });\n\n it('loads', async () => {\n const el = testFixture.querySelector('sp-checkbox') as Checkbox;\n expect(el).to.not.equal(undefined);\n const textNode = labelNodeForCheckbox(el);\n const content = (textNode.textContent || '').trim();\n expect(content).to.equal('Component');\n });\n testForLitDevWarnings(\n async () =>\n await fixture<Checkbox>(\n html`\n <sp-checkbox>Not Checked</sp-checkbox>\n `\n )\n );\n\n it('loads default checkbox accessibly', async () => {\n const el = await fixture<Checkbox>(\n html`\n <sp-checkbox>Not Checked</sp-checkbox>\n `\n );\n\n await elementUpdated(el);\n\n await expect(el).to.be.accessible();\n });\n\n it('loads `checked` checkbox accessibly', async () => {\n const el = await fixture<Checkbox>(\n html`\n <sp-checkbox checked>Checked</sp-checkbox>\n `\n );\n\n await elementUpdated(el);\n\n await expect(el).to.be.accessible();\n });\n\n it('is `invalid` checkbox accessibly', async () => {\n const el = await fixture<Checkbox>(\n html`\n <sp-checkbox invalid>Invalid Checked</sp-checkbox>\n `\n );\n\n await elementUpdated(el);\n\n await expect(el).to.be.accessible();\n });\n\n it('autofocuses', async () => {\n const autoElement = testFixture.querySelector(\n 'sp-checkbox[autofocus]'\n ) as Checkbox;\n\n expect(autoElement).to.exist;\n await waitUntil(\n () => document.activeElement === autoElement,\n 'Autofocused'\n );\n\n await triggerBlurFor(autoElement);\n\n expect(document.activeElement).to.not.equal(autoElement);\n });\n\n it('`click()`ing host clicks `focusElement`', async () => {\n const el = await fixture<Checkbox>(\n html`\n <sp-checkbox checked autofocus>Checked</sp-checkbox>\n `\n );\n\n await elementUpdated(el);\n\n expect(el.checked, 'checked initially').to.be.true;\n\n el.click();\n await elementUpdated(el);\n\n expect(el.checked, 'unchecked').to.be.false;\n\n el.click();\n await elementUpdated(el);\n\n expect(el.checked, 'checked again').to.be.true;\n });\n\n it('respects checked attribute', () => {\n let el = testFixture.querySelector('#checkbox0') as Checkbox;\n expect(el.checked).to.be.false;\n\n el = testFixture.querySelector('#checkbox1') as Checkbox;\n expect(el.checked).to.be.true;\n });\n\n it('handles click events', async () => {\n const el = testFixture.querySelector('#checkbox1') as Checkbox;\n expect(el.checked).to.be.true;\n\n inputForCheckbox(el).click();\n await elementUpdated(el);\n\n expect(el.checked).to.be.false;\n });\n\n it('can have `change` events cancelled', async () => {\n const el = testFixture.querySelector('#checkbox0') as Checkbox;\n await elementUpdated(el);\n expect(el.checked).to.be.false;\n\n inputForCheckbox(el).click();\n await elementUpdated(el);\n\n expect(el.checked).to.be.true;\n\n el.addEventListener('change', (event: Event) => event.preventDefault());\n inputForCheckbox(el).click();\n await elementUpdated(el);\n\n expect(el.checked).to.be.true;\n });\n\n it('maintains its value when [readonly]', async () => {\n const el = await fixture<Checkbox>(html`\n <sp-checkbox id=\"checkbox0\" checked readonly>Component</sp-checkbox>\n `);\n expect(el.checked).to.be.true;\n\n inputForCheckbox(el).click();\n await elementUpdated(el);\n\n expect(el.checked).to.be.true;\n });\n});\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport '@spectrum-web-components/checkbox/sp-checkbox.js';\nimport { Checkbox } from '../';\nimport {\n elementUpdated,\n expect,\n fixture,\n html,\n triggerBlurFor,\n waitUntil,\n} from '@open-wc/testing';\nimport '@spectrum-web-components/shared/src/focus-visible.js';\nimport { testForLitDevWarnings } from '../../../test/testing-helpers.js';\nimport { a11ySnapshot, findAccessibilityNode } from '@web/test-runner-commands';\n\nfunction inputForCheckbox(checkbox: Checkbox): HTMLInputElement {\n if (!checkbox.shadowRoot) throw new Error('No shadowRoot');\n return checkbox.shadowRoot.querySelector('#input') as HTMLInputElement;\n}\n\nfunction labelForCheckbox(checkbox: Checkbox): HTMLLabelElement {\n if (!checkbox.shadowRoot) throw new Error('No shadowRoot');\n const labelEl = checkbox.shadowRoot.querySelector('label');\n if (!labelEl) {\n throw new Error('Failed to find label in shadowRoot');\n }\n return labelEl;\n}\n\nfunction labelNodeForCheckbox(checkbox: Checkbox): Node {\n if (!checkbox.shadowRoot) throw new Error('No shadowRoot');\n const slotEl = checkbox.shadowRoot.querySelector('slot');\n if (!slotEl) {\n throw new Error('Failed to find slot in shadowRoot');\n }\n return slotEl.assignedNodes()[0];\n}\ndescribe('Checkbox', () => {\n let testFixture: HTMLDivElement;\n\n beforeEach(async () => {\n testFixture = await fixture<HTMLDivElement>(\n html`\n <div>\n <div id=\"test-checkbox\">\n <sp-checkbox id=\"checkbox0\" tabindex=\"5\">\n Component\n </sp-checkbox>\n <sp-checkbox id=\"checkbox1\" tabindex=\"2\" checked>\n Check 1\n </sp-checkbox>\n <sp-checkbox id=\"checkbox2\" tabindex=\"3\" disabled>\n Check 2\n </sp-checkbox>\n <sp-checkbox id=\"checkbox3\" tabindex=\"1\" autofocus>\n Check 3\n </sp-checkbox>\n <sp-checkbox id=\"checkbox4\" tabindex=\"0\">\n Check 4\n </sp-checkbox>\n <sp-checkbox id=\"checkbox5\" tabindex=\"-1\">\n Check 5\n </sp-checkbox>\n </div>\n </div>\n `\n );\n });\n\n it('loads', async () => {\n const el = testFixture.querySelector('sp-checkbox') as Checkbox;\n expect(el).to.not.equal(undefined);\n const textNode = labelNodeForCheckbox(el);\n const content = (textNode.textContent || '').trim();\n expect(content).to.equal('Component');\n });\n testForLitDevWarnings(\n async () =>\n await fixture<Checkbox>(\n html`\n <sp-checkbox>Not Checked</sp-checkbox>\n `\n )\n );\n\n it('loads default checkbox accessibly', async () => {\n const el = await fixture<Checkbox>(\n html`\n <sp-checkbox>Not Checked</sp-checkbox>\n `\n );\n\n await elementUpdated(el);\n\n await expect(el).to.be.accessible();\n\n const labelEl = labelForCheckbox(el);\n const inputEl = inputForCheckbox(el);\n\n expect(labelEl.getAttribute('for')).to.equal(inputEl.id);\n expect(inputEl.checked).to.be.false;\n expect(inputEl.indeterminate).to.be.false;\n\n type NamedRoledAndCheckedNode = {\n name: string;\n role: string;\n checked: boolean;\n };\n const snapshot = (await a11ySnapshot(\n {}\n )) as unknown as NamedRoledAndCheckedNode & {\n children: NamedRoledAndCheckedNode[];\n };\n expect(\n findAccessibilityNode<NamedRoledAndCheckedNode>(\n snapshot,\n (node) =>\n node.role === 'checkbox' &&\n !node.checked &&\n node.name === 'Not Checked'\n ),\n 'Has a named and not checked \"checkbox\" element'\n ).to.not.be.null;\n });\n\n it('loads `checked` checkbox accessibly', async () => {\n const el = await fixture<Checkbox>(\n html`\n <sp-checkbox checked>Checked</sp-checkbox>\n `\n );\n\n await elementUpdated(el);\n\n await expect(el).to.be.accessible();\n\n const labelEl = labelForCheckbox(el);\n const inputEl = inputForCheckbox(el);\n\n expect(labelEl.getAttribute('for')).to.equal(inputEl.id);\n expect(inputEl.checked).to.be.true;\n expect(inputEl.indeterminate).to.be.false;\n\n type NamedRoledAndCheckedNode = {\n name: string;\n role: string;\n checked: boolean;\n };\n const snapshot = (await a11ySnapshot(\n {}\n )) as unknown as NamedRoledAndCheckedNode & {\n children: NamedRoledAndCheckedNode[];\n };\n expect(\n findAccessibilityNode<NamedRoledAndCheckedNode>(\n snapshot,\n (node) =>\n node.role === 'checkbox' &&\n node.checked &&\n node.name === 'Checked'\n ),\n 'Has a named and checked \"checkbox\" element'\n ).to.not.be.null;\n });\n\n it('is `invalid` checkbox accessibly', async () => {\n const el = await fixture<Checkbox>(\n html`\n <sp-checkbox invalid>Invalid Not Checked</sp-checkbox>\n `\n );\n\n await elementUpdated(el);\n\n await expect(el).to.be.accessible();\n\n const labelEl = labelForCheckbox(el);\n const inputEl = inputForCheckbox(el);\n\n expect(labelEl.getAttribute('for')).to.equal(inputEl.id);\n expect(inputEl).to.have.attribute('aria-invalid', 'true');\n });\n\n it('autofocuses', async () => {\n const autoElement = testFixture.querySelector(\n 'sp-checkbox[autofocus]'\n ) as Checkbox;\n\n expect(autoElement).to.exist;\n await waitUntil(\n () => document.activeElement === autoElement,\n 'Autofocused'\n );\n\n await triggerBlurFor(autoElement);\n\n expect(document.activeElement).to.not.equal(autoElement);\n });\n\n it('`click()`ing host clicks `focusElement`', async () => {\n const el = await fixture<Checkbox>(\n html`\n <sp-checkbox checked autofocus>Checked</sp-checkbox>\n `\n );\n\n await elementUpdated(el);\n\n expect(el.checked, 'checked initially').to.be.true;\n\n el.click();\n await elementUpdated(el);\n\n expect(el.checked, 'unchecked').to.be.false;\n\n el.click();\n await elementUpdated(el);\n\n expect(el.checked, 'checked again').to.be.true;\n });\n\n it('respects checked attribute', () => {\n let el = testFixture.querySelector('#checkbox0') as Checkbox;\n expect(el.checked).to.be.false;\n\n el = testFixture.querySelector('#checkbox1') as Checkbox;\n expect(el.checked).to.be.true;\n });\n\n it('handles click events', async () => {\n const el = testFixture.querySelector('#checkbox1') as Checkbox;\n expect(el.checked).to.be.true;\n\n inputForCheckbox(el).click();\n await elementUpdated(el);\n\n expect(el.checked).to.be.false;\n });\n\n it('can have `change` events cancelled', async () => {\n const el = testFixture.querySelector('#checkbox0') as Checkbox;\n await elementUpdated(el);\n expect(el.checked).to.be.false;\n\n inputForCheckbox(el).click();\n await elementUpdated(el);\n\n expect(el.checked).to.be.true;\n\n el.addEventListener('change', (event: Event) => event.preventDefault());\n inputForCheckbox(el).click();\n await elementUpdated(el);\n\n expect(el.checked).to.be.true;\n });\n\n it('maintains its value when [readonly]', async () => {\n const el = await fixture<Checkbox>(html`\n <sp-checkbox id=\"checkbox0\" checked readonly>Component</sp-checkbox>\n `);\n expect(el.checked).to.be.true;\n\n inputForCheckbox(el).click();\n await elementUpdated(el);\n\n expect(el.checked).to.be.true;\n });\n\n it('`indeterminate, checked` becomes `not checked` on click', async () => {\n const el = await fixture<Checkbox>(html`\n <sp-checkbox checked .indeterminate=${true}>\n indeterminate, checked\n </sp-checkbox>\n `);\n expect(el.checked).to.be.true;\n expect(el.indeterminate).to.be.true;\n\n const inputEl = inputForCheckbox(el);\n expect(inputEl.checked).to.be.true;\n expect(inputEl.indeterminate).to.be.true;\n\n el.click();\n await elementUpdated(el);\n\n expect(el.checked).to.be.false;\n expect(el.indeterminate).to.be.false;\n expect(inputEl.checked).to.be.false;\n expect(inputEl.indeterminate).to.be.false;\n\n });\n\n it('`indeterminate, not checked` becomes `checked` on click', async () => {\n const el = await fixture<Checkbox>(html`\n <sp-checkbox .indeterminate=${true}>\n indeterminate, checked\n </sp-checkbox>\n `);\n expect(el.checked).to.be.false;\n expect(el.indeterminate).to.be.true;\n\n const inputEl = inputForCheckbox(el);\n expect(inputEl.checked).to.be.false;\n expect(inputEl.indeterminate).to.be.true;\n\n el.click();\n await elementUpdated(el);\n\n expect(el.checked).to.be.true;\n expect(el.indeterminate).to.be.false;\n expect(inputEl.checked).to.be.true;\n expect(inputEl.indeterminate).to.be.false;\n });\n});\n"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }