@spectrum-web-components/checkbox 0.12.5 → 0.12.6
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.
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spectrum-web-components/checkbox",
|
|
3
|
-
"version": "0.12.
|
|
3
|
+
"version": "0.12.6",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -44,10 +44,10 @@
|
|
|
44
44
|
"lit-html"
|
|
45
45
|
],
|
|
46
46
|
"dependencies": {
|
|
47
|
-
"@spectrum-web-components/base": "^0.5.
|
|
48
|
-
"@spectrum-web-components/icon": "^0.11.
|
|
49
|
-
"@spectrum-web-components/icons-ui": "^0.8.
|
|
50
|
-
"@spectrum-web-components/shared": "^0.13.
|
|
47
|
+
"@spectrum-web-components/base": "^0.5.4",
|
|
48
|
+
"@spectrum-web-components/icon": "^0.11.5",
|
|
49
|
+
"@spectrum-web-components/icons-ui": "^0.8.5",
|
|
50
|
+
"@spectrum-web-components/shared": "^0.13.6",
|
|
51
51
|
"tslib": "^2.0.0"
|
|
52
52
|
},
|
|
53
53
|
"devDependencies": {
|
|
@@ -58,5 +58,5 @@
|
|
|
58
58
|
"sideEffects": [
|
|
59
59
|
"./sp-*.js"
|
|
60
60
|
],
|
|
61
|
-
"gitHead": "
|
|
61
|
+
"gitHead": "caf12727e7f91dcf961e1fadacc727eea9ece27b"
|
|
62
62
|
}
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
/*
|
|
2
|
+
Copyright 2020 Adobe. All rights reserved.
|
|
3
|
+
This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
4
|
+
you may not use this file except in compliance with the License. You may obtain a copy
|
|
5
|
+
of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
6
|
+
|
|
7
|
+
Unless required by applicable law or agreed to in writing, software distributed under
|
|
8
|
+
the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
9
|
+
OF ANY KIND, either express or implied. See the License for the specific language
|
|
10
|
+
governing permissions and limitations under the License.
|
|
11
|
+
*/
|
|
12
|
+
import { html } from '@spectrum-web-components/base';
|
|
13
|
+
import '../sp-checkbox.js';
|
|
14
|
+
export default {
|
|
15
|
+
component: 'sp-checkbox',
|
|
16
|
+
title: 'Checkbox/Sizes',
|
|
17
|
+
argTypes: {
|
|
18
|
+
onClick: { action: 'click' },
|
|
19
|
+
onChange: { action: 'change' },
|
|
20
|
+
},
|
|
21
|
+
};
|
|
22
|
+
const checkbox = ({ size, checked, indeterminate, onClick, onChange, }) => {
|
|
23
|
+
return html `
|
|
24
|
+
<sp-checkbox
|
|
25
|
+
size=${size}
|
|
26
|
+
?checked=${checked}
|
|
27
|
+
?indeterminate=${indeterminate}
|
|
28
|
+
@click="${onClick}"
|
|
29
|
+
@change="${onChange}"
|
|
30
|
+
>
|
|
31
|
+
Checkbox
|
|
32
|
+
</sp-checkbox>
|
|
33
|
+
`;
|
|
34
|
+
};
|
|
35
|
+
export const s = (args) => checkbox(Object.assign(Object.assign({}, args), { size: 's' }));
|
|
36
|
+
export const sChecked = (args) => checkbox(Object.assign(Object.assign({}, args), { size: 's', checked: true }));
|
|
37
|
+
export const sIndeterminate = (args) => checkbox(Object.assign(Object.assign({}, args), { size: 's', indeterminate: true }));
|
|
38
|
+
export const m = (args) => checkbox(Object.assign(Object.assign({}, args), { size: 'm' }));
|
|
39
|
+
export const mChecked = (args) => checkbox(Object.assign(Object.assign({}, args), { size: 'm', checked: true }));
|
|
40
|
+
export const mIndeterminate = (args) => checkbox(Object.assign(Object.assign({}, args), { size: 'm', indeterminate: true }));
|
|
41
|
+
export const l = (args) => checkbox(Object.assign(Object.assign({}, args), { size: 'l' }));
|
|
42
|
+
export const lChecked = (args) => checkbox(Object.assign(Object.assign({}, args), { size: 'l', checked: true }));
|
|
43
|
+
export const lIndeterminate = (args) => checkbox(Object.assign(Object.assign({}, args), { size: 'l', indeterminate: true }));
|
|
44
|
+
export const XL = (args) => checkbox(Object.assign(Object.assign({}, args), { size: 'xl' }));
|
|
45
|
+
export const XLChecked = (args) => checkbox(Object.assign(Object.assign({}, args), { size: 'xl', checked: true }));
|
|
46
|
+
export const XLIndeterminate = (args) => checkbox(Object.assign(Object.assign({}, args), { size: 'xl', indeterminate: true }));
|
|
47
|
+
//# sourceMappingURL=checkbox-sizes.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"checkbox-sizes.stories.js","sourceRoot":"","sources":["checkbox-sizes.stories.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,IAAI,EAAkB,MAAM,+BAA+B,CAAC;AAErE,OAAO,mBAAmB,CAAC;AAE3B,eAAe;IACX,SAAS,EAAE,aAAa;IACxB,KAAK,EAAE,gBAAgB;IACvB,QAAQ,EAAE;QACN,OAAO,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE;QAC5B,QAAQ,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE;KACjC;CACJ,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EACd,IAAI,EACJ,OAAO,EACP,aAAa,EACb,OAAO,EACP,QAAQ,GAOX,EAAkB,EAAE;IACjB,OAAO,IAAI,CAAA;;mBAEI,IAAI;uBACA,OAAO;6BACD,aAAa;sBACpB,OAAO;uBACN,QAAQ;;;;KAI1B,CAAC;AACN,CAAC,CAAC;AAOF,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,IAAe,EAAkB,EAAE,CACjD,QAAQ,iCAAM,IAAI,KAAE,IAAI,EAAE,GAAG,IAAG,CAAC;AAErC,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,IAAe,EAAkB,EAAE,CACxD,QAAQ,iCAAM,IAAI,KAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,IAAG,CAAC;AAEpD,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,IAAe,EAAkB,EAAE,CAC9D,QAAQ,iCAAM,IAAI,KAAE,IAAI,EAAE,GAAG,EAAE,aAAa,EAAE,IAAI,IAAG,CAAC;AAE1D,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,IAAe,EAAkB,EAAE,CACjD,QAAQ,iCAAM,IAAI,KAAE,IAAI,EAAE,GAAG,IAAG,CAAC;AAErC,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,IAAe,EAAkB,EAAE,CACxD,QAAQ,iCAAM,IAAI,KAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,IAAG,CAAC;AAEpD,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,IAAe,EAAkB,EAAE,CAC9D,QAAQ,iCAAM,IAAI,KAAE,IAAI,EAAE,GAAG,EAAE,aAAa,EAAE,IAAI,IAAG,CAAC;AAE1D,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,IAAe,EAAkB,EAAE,CACjD,QAAQ,iCAAM,IAAI,KAAE,IAAI,EAAE,GAAG,IAAG,CAAC;AAErC,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,IAAe,EAAkB,EAAE,CACxD,QAAQ,iCAAM,IAAI,KAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,IAAG,CAAC;AAEpD,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,IAAe,EAAkB,EAAE,CAC9D,QAAQ,iCAAM,IAAI,KAAE,IAAI,EAAE,GAAG,EAAE,aAAa,EAAE,IAAI,IAAG,CAAC;AAE1D,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,IAAe,EAAkB,EAAE,CAClD,QAAQ,iCAAM,IAAI,KAAE,IAAI,EAAE,IAAI,IAAG,CAAC;AAEtC,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,IAAe,EAAkB,EAAE,CACzD,QAAQ,iCAAM,IAAI,KAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,IAAG,CAAC;AAErD,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,IAAe,EAAkB,EAAE,CAC/D,QAAQ,iCAAM,IAAI,KAAE,IAAI,EAAE,IAAI,EAAE,aAAa,EAAE,IAAI,IAAG,CAAC","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 { html, TemplateResult } from '@spectrum-web-components/base';\n\nimport '../sp-checkbox.js';\n\nexport default {\n component: 'sp-checkbox',\n title: 'Checkbox/Sizes',\n argTypes: {\n onClick: { action: 'click' },\n onChange: { action: 'change' },\n },\n};\n\nconst checkbox = ({\n size,\n checked,\n indeterminate,\n onClick,\n onChange,\n}: {\n size: 's' | 'm' | 'l' | 'xl';\n checked?: boolean;\n indeterminate?: boolean;\n onClick: () => void;\n onChange: () => void;\n}): TemplateResult => {\n return html`\n <sp-checkbox\n size=${size}\n ?checked=${checked}\n ?indeterminate=${indeterminate}\n @click=\"${onClick}\"\n @change=\"${onChange}\"\n >\n Checkbox\n </sp-checkbox>\n `;\n};\n\ntype StoryArgs = {\n onClick: () => void;\n onChange: () => void;\n};\n\nexport const s = (args: StoryArgs): TemplateResult =>\n checkbox({ ...args, size: 's' });\n\nexport const sChecked = (args: StoryArgs): TemplateResult =>\n checkbox({ ...args, size: 's', checked: true });\n\nexport const sIndeterminate = (args: StoryArgs): TemplateResult =>\n checkbox({ ...args, size: 's', indeterminate: true });\n\nexport const m = (args: StoryArgs): TemplateResult =>\n checkbox({ ...args, size: 'm' });\n\nexport const mChecked = (args: StoryArgs): TemplateResult =>\n checkbox({ ...args, size: 'm', checked: true });\n\nexport const mIndeterminate = (args: StoryArgs): TemplateResult =>\n checkbox({ ...args, size: 'm', indeterminate: true });\n\nexport const l = (args: StoryArgs): TemplateResult =>\n checkbox({ ...args, size: 'l' });\n\nexport const lChecked = (args: StoryArgs): TemplateResult =>\n checkbox({ ...args, size: 'l', checked: true });\n\nexport const lIndeterminate = (args: StoryArgs): TemplateResult =>\n checkbox({ ...args, size: 'l', indeterminate: true });\n\nexport const XL = (args: StoryArgs): TemplateResult =>\n checkbox({ ...args, size: 'xl' });\n\nexport const XLChecked = (args: StoryArgs): TemplateResult =>\n checkbox({ ...args, size: 'xl', checked: true });\n\nexport const XLIndeterminate = (args: StoryArgs): TemplateResult =>\n checkbox({ ...args, size: 'xl', indeterminate: true });\n"]}
|
|
@@ -0,0 +1,141 @@
|
|
|
1
|
+
/*
|
|
2
|
+
Copyright 2020 Adobe. All rights reserved.
|
|
3
|
+
This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
4
|
+
you may not use this file except in compliance with the License. You may obtain a copy
|
|
5
|
+
of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
6
|
+
|
|
7
|
+
Unless required by applicable law or agreed to in writing, software distributed under
|
|
8
|
+
the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
9
|
+
OF ANY KIND, either express or implied. See the License for the specific language
|
|
10
|
+
governing permissions and limitations under the License.
|
|
11
|
+
*/
|
|
12
|
+
import '../sp-checkbox.js';
|
|
13
|
+
import '@spectrum-web-components/field-group/sp-field-group.js';
|
|
14
|
+
import { html } from '@spectrum-web-components/base';
|
|
15
|
+
export default {
|
|
16
|
+
component: 'sp-checkbox',
|
|
17
|
+
title: 'Checkbox',
|
|
18
|
+
};
|
|
19
|
+
export const Default = () => {
|
|
20
|
+
return html `
|
|
21
|
+
<sp-checkbox>Checkbox</sp-checkbox>
|
|
22
|
+
`;
|
|
23
|
+
};
|
|
24
|
+
export const readonly = () => {
|
|
25
|
+
return html `
|
|
26
|
+
<sp-checkbox checked readonly>Checkbox</sp-checkbox>
|
|
27
|
+
`;
|
|
28
|
+
};
|
|
29
|
+
export const Indeterminate = () => {
|
|
30
|
+
return html `
|
|
31
|
+
<sp-checkbox indeterminate>Checkbox</sp-checkbox>
|
|
32
|
+
`;
|
|
33
|
+
};
|
|
34
|
+
export const Checked = () => {
|
|
35
|
+
return html `
|
|
36
|
+
<sp-checkbox checked>Checkbox</sp-checkbox>
|
|
37
|
+
`;
|
|
38
|
+
};
|
|
39
|
+
export const emphasized = () => {
|
|
40
|
+
return html `
|
|
41
|
+
<sp-checkbox emphasized>Checkbox</sp-checkbox>
|
|
42
|
+
`;
|
|
43
|
+
};
|
|
44
|
+
export const emphasizedIndeterminate = () => {
|
|
45
|
+
return html `
|
|
46
|
+
<sp-checkbox emphasized indeterminate>Checkbox</sp-checkbox>
|
|
47
|
+
`;
|
|
48
|
+
};
|
|
49
|
+
export const emphasizedChecked = () => {
|
|
50
|
+
return html `
|
|
51
|
+
<sp-checkbox emphasized checked>Checkbox</sp-checkbox>
|
|
52
|
+
`;
|
|
53
|
+
};
|
|
54
|
+
export const emphasizedInvalid = () => {
|
|
55
|
+
return html `
|
|
56
|
+
<sp-checkbox emphasized invalid>Checkbox</sp-checkbox>
|
|
57
|
+
`;
|
|
58
|
+
};
|
|
59
|
+
export const emphasizedInvalidIndeterminate = () => {
|
|
60
|
+
return html `
|
|
61
|
+
<sp-checkbox emphasized invalid indeterminate>Checkbox</sp-checkbox>
|
|
62
|
+
`;
|
|
63
|
+
};
|
|
64
|
+
export const emphasizedInvalidChecked = () => {
|
|
65
|
+
return html `
|
|
66
|
+
<sp-checkbox emphasized invalid checked>Checkbox</sp-checkbox>
|
|
67
|
+
`;
|
|
68
|
+
};
|
|
69
|
+
export const Invalid = () => {
|
|
70
|
+
return html `
|
|
71
|
+
<sp-checkbox invalid>Checkbox</sp-checkbox>
|
|
72
|
+
`;
|
|
73
|
+
};
|
|
74
|
+
export const invalidIndeterminate = () => {
|
|
75
|
+
return html `
|
|
76
|
+
<sp-checkbox invalid indeterminate>Checkbox</sp-checkbox>
|
|
77
|
+
`;
|
|
78
|
+
};
|
|
79
|
+
export const invalidChecked = () => {
|
|
80
|
+
return html `
|
|
81
|
+
<sp-checkbox invalid checked>Checkbox</sp-checkbox>
|
|
82
|
+
`;
|
|
83
|
+
};
|
|
84
|
+
export const Autofocus = () => {
|
|
85
|
+
return html `
|
|
86
|
+
<sp-checkbox autofocus>Checkbox</sp-checkbox>
|
|
87
|
+
`;
|
|
88
|
+
};
|
|
89
|
+
export const Disabled = () => {
|
|
90
|
+
return html `
|
|
91
|
+
<sp-checkbox disabled>Checkbox</sp-checkbox>
|
|
92
|
+
`;
|
|
93
|
+
};
|
|
94
|
+
export const disabledChecked = () => {
|
|
95
|
+
return html `
|
|
96
|
+
<sp-checkbox disabled checked>Checkbox</sp-checkbox>
|
|
97
|
+
`;
|
|
98
|
+
};
|
|
99
|
+
export const disabledIndeterminate = () => {
|
|
100
|
+
return html `
|
|
101
|
+
<sp-checkbox disabled indeterminate>Checkbox</sp-checkbox>
|
|
102
|
+
`;
|
|
103
|
+
};
|
|
104
|
+
export const emphasizedDisabled = () => {
|
|
105
|
+
return html `
|
|
106
|
+
<sp-checkbox emphasized disabled>Checkbox</sp-checkbox>
|
|
107
|
+
`;
|
|
108
|
+
};
|
|
109
|
+
export const emphasizedDisabledIndeterminate = () => {
|
|
110
|
+
return html `
|
|
111
|
+
<sp-checkbox emphasized disabled indeterminate>Checkbox</sp-checkbox>
|
|
112
|
+
`;
|
|
113
|
+
};
|
|
114
|
+
export const emphasizedDisabledChecked = () => {
|
|
115
|
+
return html `
|
|
116
|
+
<sp-checkbox emphasized checked>Checkbox</sp-checkbox>
|
|
117
|
+
`;
|
|
118
|
+
};
|
|
119
|
+
export const tabIndexExample = () => {
|
|
120
|
+
return html `
|
|
121
|
+
<sp-field-group horizontal>
|
|
122
|
+
<sp-checkbox tabindex="0">Checkbox 0</sp-checkbox>
|
|
123
|
+
<sp-checkbox disabled tabindex="3">Checkbox 3</sp-checkbox>
|
|
124
|
+
<sp-checkbox tabindex="4">Checkbox 4</sp-checkbox>
|
|
125
|
+
<sp-checkbox tabindex="2" autofocus>Checkbox 2</sp-checkbox>
|
|
126
|
+
<sp-checkbox tabindex="1">Checkbox 1</sp-checkbox>
|
|
127
|
+
</sp-field-group>
|
|
128
|
+
`;
|
|
129
|
+
};
|
|
130
|
+
export const verticalTabIndexExample = () => {
|
|
131
|
+
return html `
|
|
132
|
+
<sp-field-group vertical>
|
|
133
|
+
<sp-checkbox tabindex="0">Checkbox 0</sp-checkbox>
|
|
134
|
+
<sp-checkbox disabled tabindex="3">Checkbox 3</sp-checkbox>
|
|
135
|
+
<sp-checkbox tabindex="4">Checkbox 4</sp-checkbox>
|
|
136
|
+
<sp-checkbox tabindex="2" autofocus>Checkbox 2</sp-checkbox>
|
|
137
|
+
<sp-checkbox tabindex="1">Checkbox 1</sp-checkbox>
|
|
138
|
+
</sp-field-group>
|
|
139
|
+
`;
|
|
140
|
+
};
|
|
141
|
+
//# sourceMappingURL=checkbox.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"checkbox.stories.js","sourceRoot":"","sources":["checkbox.stories.ts"],"names":[],"mappings":"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","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 '../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"]}
|