@spectrum-web-components/checkbox 0.13.3 → 0.13.6-devmode.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 (39) hide show
  1. package/custom-elements.json +1 -17
  2. package/package.json +28 -11
  3. package/sp-checkbox.dev.js +3 -0
  4. package/sp-checkbox.dev.js.map +7 -0
  5. package/sp-checkbox.js +3 -14
  6. package/sp-checkbox.js.map +7 -1
  7. package/src/Checkbox.dev.js +128 -0
  8. package/src/Checkbox.dev.js.map +7 -0
  9. package/src/Checkbox.js +75 -79
  10. package/src/Checkbox.js.map +7 -1
  11. package/src/CheckboxBase.d.ts +1 -1
  12. package/src/CheckboxBase.dev.js +65 -0
  13. package/src/CheckboxBase.dev.js.map +7 -0
  14. package/src/CheckboxBase.js +53 -51
  15. package/src/CheckboxBase.js.map +7 -1
  16. package/src/checkbox.css.dev.js +233 -0
  17. package/src/checkbox.css.dev.js.map +7 -0
  18. package/src/checkbox.css.js +3 -14
  19. package/src/checkbox.css.js.map +7 -1
  20. package/src/index.dev.js +2 -0
  21. package/src/index.dev.js.map +7 -0
  22. package/src/index.js +2 -13
  23. package/src/index.js.map +7 -1
  24. package/src/spectrum-checkbox.css.dev.js +233 -0
  25. package/src/spectrum-checkbox.css.dev.js.map +7 -0
  26. package/src/spectrum-checkbox.css.js +3 -14
  27. package/src/spectrum-checkbox.css.js.map +7 -1
  28. package/stories/checkbox-sizes.stories.js +29 -34
  29. package/stories/checkbox-sizes.stories.js.map +7 -1
  30. package/stories/checkbox.stories.js +28 -39
  31. package/stories/checkbox.stories.js.map +7 -1
  32. package/test/benchmark/test-basic.js +5 -16
  33. package/test/benchmark/test-basic.js.map +7 -1
  34. package/test/checkbox-sizes.test-vrt.js +4 -15
  35. package/test/checkbox-sizes.test-vrt.js.map +7 -1
  36. package/test/checkbox.test-vrt.js +4 -15
  37. package/test/checkbox.test-vrt.js.map +7 -1
  38. package/test/checkbox.test.js +98 -90
  39. package/test/checkbox.test.js.map +7 -1
package/src/spectrum-checkbox.css.dev.js ADDED
@@ -0,0 +1,233 @@
1
+ import { css } from "@spectrum-web-components/base";
2
+ const styles = css`
3
+ :host{align-items:flex-start;display:inline-flex;max-width:100%;min-height:var(--spectrum-checkbox-height);position:relative;vertical-align:top}#input{box-sizing:border-box;cursor:pointer;font-family:inherit;font-size:100%;height:100%;line-height:1.15;margin:0;opacity:.0001;overflow:visible;padding:0;position:absolute;width:100%;z-index:1}#input:disabled{cursor:default}#input:checked+#box:before{border-width:calc(var(--spectrum-checkbox-box-size)/2)}#input:checked+#box #checkmark{opacity:1;transform:scale(1)}#input.focus-visible+#box:after{margin:calc(var(
4
+ --spectrum-alias-focus-ring-gap,
5
+ var(--spectrum-global-dimension-static-size-25)
6
+ )*-1)}#input:focus-visible+#box:after{margin:calc(var(
7
+ --spectrum-alias-focus-ring-gap,
8
+ var(--spectrum-global-dimension-static-size-25)
9
+ )*-1)}:host([size=s]){--spectrum-checkbox-box-border-radius:var(
10
+ --spectrum-checkbox-s-box-border-radius,var(--spectrum-alias-border-radius-small)
11
+ );--spectrum-checkbox-box-border-size:var(
12
+ --spectrum-checkbox-s-box-border-size,var(--spectrum-alias-border-size-thick)
13
+ );--spectrum-checkbox-box-size:var(
14
+ --spectrum-checkbox-s-box-size,var(--spectrum-alias-control-two-size-s)
15
+ );--spectrum-checkbox-text-size:var(
16
+ --spectrum-checkbox-s-text-size,var(--spectrum-global-dimension-font-size-75)
17
+ );--spectrum-checkbox-text-gap:var(
18
+ --spectrum-checkbox-s-text-gap,var(--spectrum-global-dimension-size-115)
19
+ );--spectrum-checkbox-text-padding-top:var(
20
+ --spectrum-checkbox-s-text-padding-top,var(--spectrum-global-dimension-static-size-50)
21
+ );--spectrum-checkbox-text-font-style:var(
22
+ --spectrum-checkbox-s-text-font-style,var(--spectrum-global-font-style-regular)
23
+ );--spectrum-checkbox-text-font-weight:var(
24
+ --spectrum-checkbox-s-text-font-weight,var(--spectrum-alias-body-text-font-weight)
25
+ );--spectrum-checkbox-text-line-height:var(
26
+ --spectrum-checkbox-s-text-line-height,var(--spectrum-alias-component-text-line-height)
27
+ );--spectrum-checkbox-checkmark-size:var(
28
+ --spectrum-checkbox-s-checkmark-size,var(--spectrum-alias-ui-icon-checkmark-size-75)
29
+ );--spectrum-checkbox-height:var(
30
+ --spectrum-checkbox-s-height,var(--spectrum-global-dimension-size-300)
31
+ )}:host([size=m]){--spectrum-checkbox-box-border-radius:var(
32
+ --spectrum-checkbox-m-box-border-radius,var(--spectrum-alias-border-radius-small)
33
+ );--spectrum-checkbox-box-border-size:var(
34
+ --spectrum-checkbox-m-box-border-size,var(--spectrum-alias-border-size-thick)
35
+ );--spectrum-checkbox-box-size:var(
36
+ --spectrum-checkbox-m-box-size,var(--spectrum-alias-control-two-size-m)
37
+ );--spectrum-checkbox-text-size:var(
38
+ --spectrum-checkbox-m-text-size,var(--spectrum-global-dimension-font-size-100)
39
+ );--spectrum-checkbox-text-gap:var(
40
+ --spectrum-checkbox-m-text-gap,var(--spectrum-global-dimension-size-125)
41
+ );--spectrum-checkbox-text-padding-top:var(
42
+ --spectrum-checkbox-m-text-padding-top,var(--spectrum-global-dimension-size-75)
43
+ );--spectrum-checkbox-text-font-style:var(
44
+ --spectrum-checkbox-m-text-font-style,var(--spectrum-global-font-style-regular)
45
+ );--spectrum-checkbox-text-font-weight:var(
46
+ --spectrum-checkbox-m-text-font-weight,var(--spectrum-alias-body-text-font-weight)
47
+ );--spectrum-checkbox-text-line-height:var(
48
+ --spectrum-checkbox-m-text-line-height,var(--spectrum-alias-component-text-line-height)
49
+ );--spectrum-checkbox-checkmark-size:var(
50
+ --spectrum-checkbox-m-checkmark-size,var(--spectrum-alias-ui-icon-checkmark-size-100)
51
+ );--spectrum-checkbox-height:var(
52
+ --spectrum-checkbox-m-height,var(--spectrum-global-dimension-size-400)
53
+ )}:host([size=l]){--spectrum-checkbox-text-padding-top:var(
54
+ --spectrum-checkbox-l-text-padding-top
55
+ );--spectrum-checkbox-box-border-radius:var(
56
+ --spectrum-checkbox-l-box-border-radius,var(--spectrum-alias-border-radius-small)
57
+ );--spectrum-checkbox-box-border-size:var(
58
+ --spectrum-checkbox-l-box-border-size,var(--spectrum-alias-border-size-thick)
59
+ );--spectrum-checkbox-box-size:var(
60
+ --spectrum-checkbox-l-box-size,var(--spectrum-alias-control-two-size-l)
61
+ );--spectrum-checkbox-text-size:var(
62
+ --spectrum-checkbox-l-text-size,var(--spectrum-global-dimension-font-size-200)
63
+ );--spectrum-checkbox-text-gap:var(
64
+ --spectrum-checkbox-l-text-gap,var(--spectrum-global-dimension-size-130)
65
+ );--spectrum-checkbox-text-font-style:var(
66
+ --spectrum-checkbox-l-text-font-style,var(--spectrum-global-font-style-regular)
67
+ );--spectrum-checkbox-text-font-weight:var(
68
+ --spectrum-checkbox-l-text-font-weight,var(--spectrum-alias-body-text-font-weight)
69
+ );--spectrum-checkbox-text-line-height:var(
70
+ --spectrum-checkbox-l-text-line-height,var(--spectrum-alias-component-text-line-height)
71
+ );--spectrum-checkbox-checkmark-size:var(
72
+ --spectrum-checkbox-l-checkmark-size,var(--spectrum-alias-ui-icon-checkmark-size-200)
73
+ );--spectrum-checkbox-height:var(
74
+ --spectrum-checkbox-l-height,var(--spectrum-global-dimension-size-500)
75
+ )}:host([size=xl]){--spectrum-checkbox-box-border-radius:var(
76
+ --spectrum-checkbox-xl-box-border-radius,var(--spectrum-alias-border-radius-small)
77
+ );--spectrum-checkbox-box-border-size:var(
78
+ --spectrum-checkbox-xl-box-border-size,var(--spectrum-alias-border-size-thick)
79
+ );--spectrum-checkbox-box-size:var(
80
+ --spectrum-checkbox-xl-box-size,var(--spectrum-alias-control-two-size-xl)
81
+ );--spectrum-checkbox-text-size:var(
82
+ --spectrum-checkbox-xl-text-size,var(--spectrum-global-dimension-font-size-300)
83
+ );--spectrum-checkbox-text-gap:var(
84
+ --spectrum-checkbox-xl-text-gap,var(--spectrum-global-dimension-size-160)
85
+ );--spectrum-checkbox-text-padding-top:var(
86
+ --spectrum-checkbox-xl-text-padding-top,var(--spectrum-global-dimension-size-150)
87
+ );--spectrum-checkbox-text-font-style:var(
88
+ --spectrum-checkbox-xl-text-font-style,var(--spectrum-global-font-style-regular)
89
+ );--spectrum-checkbox-text-font-weight:var(
90
+ --spectrum-checkbox-xl-text-font-weight,var(--spectrum-alias-body-text-font-weight)
91
+ );--spectrum-checkbox-text-line-height:var(
92
+ --spectrum-checkbox-xl-text-line-height,var(--spectrum-alias-component-text-line-height)
93
+ );--spectrum-checkbox-checkmark-size:var(
94
+ --spectrum-checkbox-xl-checkmark-size,var(--spectrum-alias-ui-icon-checkmark-size-300)
95
+ );--spectrum-checkbox-height:var(
96
+ --spectrum-checkbox-xl-height,var(--spectrum-global-dimension-size-600)
97
+ )}:host([indeterminate]) #box:before,:host([indeterminate]) #input:checked+#box:before{border-width:calc(var(--spectrum-checkbox-box-size)/2)}:host([indeterminate]) #box #checkmark,:host([indeterminate]) #input:checked+#box #checkmark{display:none}:host([indeterminate]) #box #partialCheckmark,:host([indeterminate]) #input:checked+#box #partialCheckmark{display:block;opacity:1;transform:scale(1)}:host([dir=ltr]) #label{text-align:left}:host([dir=rtl]) #label{text-align:right}:host([dir=ltr]) #label{margin-left:var(
98
+ --spectrum-checkbox-text-gap
99
+ )}:host([dir=rtl]) #label{margin-right:var(
100
+ --spectrum-checkbox-text-gap
101
+ )}#label{font-size:var(--spectrum-checkbox-text-size);font-style:var(--spectrum-checkbox-text-font-style);font-weight:var(--spectrum-checkbox-text-font-weight);line-height:var(--spectrum-checkbox-text-line-height);margin-top:var(
102
+ --spectrum-checkbox-text-padding-top
103
+ );transition:color var(--spectrum-global-animation-duration-100,.13s) ease-in-out}#box{box-sizing:border-box;flex-grow:0;flex-shrink:0;height:var(--spectrum-checkbox-box-size);margin:calc((var(--spectrum-checkbox-height) - var(--spectrum-checkbox-box-size))/2) 0;position:relative;width:var(--spectrum-checkbox-box-size)}#box:before{border-radius:var(--spectrum-checkbox-box-border-radius);border-style:solid;border-width:var(--spectrum-checkbox-box-border-size);box-sizing:border-box;content:"";display:block;height:var(--spectrum-checkbox-box-size);position:absolute;transition:border var(--spectrum-global-animation-duration-100,.13s) ease-in-out,box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out;width:var(--spectrum-checkbox-box-size);z-index:0}#box:after{border-radius:calc(var(--spectrum-checkbox-box-border-radius) + var(
104
+ --spectrum-alias-focus-ring-gap,
105
+ var(--spectrum-global-dimension-static-size-25)
106
+ ));bottom:0;content:"";display:block;left:0;margin:var(
107
+ --spectrum-alias-focus-ring-gap,var(--spectrum-global-dimension-static-size-25)
108
+ );position:absolute;right:0;top:0;transform:translate(0);transition:box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-out,margin var(--spectrum-global-animation-duration-100,.13s) ease-out}:host([dir=ltr]) #checkmark,:host([dir=ltr]) #partialCheckmark{left:50%}:host([dir=rtl]) #checkmark,:host([dir=rtl]) #partialCheckmark{right:50%}#checkmark,#partialCheckmark{opacity:0;position:absolute;top:50%;transform:scale(0);transition:opacity var(--spectrum-global-animation-duration-100,.13s) ease-in-out,transform var(--spectrum-global-animation-duration-100,.13s) ease-in-out}:host([dir=ltr]) #checkmark{margin-left:calc(var(--spectrum-checkbox-checkmark-size)/-2)}:host([dir=rtl]) #checkmark{margin-right:calc(var(--spectrum-checkbox-checkmark-size)/-2)}#checkmark{margin-top:calc(var(--spectrum-checkbox-checkmark-size)/-2)}:host([dir=ltr]) #partialCheckmark{margin-left:calc(var(--spectrum-checkbox-checkmark-size)/-2)}:host([dir=rtl]) #partialCheckmark{margin-right:calc(var(--spectrum-checkbox-checkmark-size)/-2)}#partialCheckmark{display:none;margin-top:calc(var(--spectrum-checkbox-checkmark-size)/-2)}:host{color:var(
109
+ --spectrum-checkbox-m-text-color,var(--spectrum-alias-component-text-color-default)
110
+ )}#checkmark,#partialCheckmark{color:var(
111
+ --spectrum-checkbox-m-checkmark-color,var(--spectrum-alias-toggle-icon-color-selected)
112
+ )}#box:before{background-color:var(
113
+ --spectrum-checkbox-m-box-background-color,var(--spectrum-global-color-gray-75)
114
+ );border-color:var(
115
+ --spectrum-checkbox-m-box-border-color,var(--spectrum-alias-toggle-border-color-default)
116
+ );forced-color-adjust:none}#label{color:var(
117
+ --spectrum-checkbox-m-text-color,var(--spectrum-alias-component-text-color-default)
118
+ )}#input:checked+#box:before,:host([indeterminate]) #box:before{border-color:var(
119
+ --spectrum-checkbox-m-box-border-color-selected,var(--spectrum-alias-toggle-background-color-default)
120
+ )}:host(:hover) #input:checked+#box:before,:host(:hover[indeterminate]) #box:before{border-color:var(
121
+ --spectrum-checkbox-m-box-border-color-selected-hover,var(--spectrum-alias-toggle-background-color-hover)
122
+ )}:host(:active) #input:checked+#box:before,:host(:active[indeterminate]) #box:before{border-color:var(
123
+ --spectrum-checkbox-m-box-border-color-selected-down,var(--spectrum-alias-toggle-background-color-down)
124
+ )}:host{border-color:var(
125
+ --spectrum-checkbox-m-box-border-color,var(--spectrum-alias-toggle-border-color-default)
126
+ )}:host(:hover) #box:before{border-color:var(
127
+ --spectrum-checkbox-m-box-border-color-hover,var(--spectrum-alias-toggle-border-color-hover)
128
+ )}:host(:hover) #label{color:var(
129
+ --spectrum-checkbox-m-text-color-hover,var(--spectrum-alias-component-text-color-hover)
130
+ )}:host(:active) #box:before{border-color:var(
131
+ --spectrum-checkbox-m-box-border-color-down,var(--spectrum-alias-toggle-border-color-down)
132
+ )}:host(:active) #label{color:var(
133
+ --spectrum-checkbox-m-text-color-down,var(--spectrum-alias-component-text-color-down)
134
+ )}:host([readonly]){border-color:var(
135
+ --spectrum-checkbox-m-box-border-color,var(--spectrum-alias-toggle-border-color-default)
136
+ )}:host([readonly]:hover) #box:before{border-color:var(
137
+ --spectrum-checkbox-m-box-border-color-hover,var(--spectrum-alias-toggle-border-color-hover)
138
+ )}:host([readonly]:hover) #label{color:var(
139
+ --spectrum-checkbox-m-text-color-hover,var(--spectrum-alias-component-text-color-hover)
140
+ )}:host([readonly]:active) #box:before{border-color:var(
141
+ --spectrum-checkbox-m-box-border-color-down,var(--spectrum-alias-toggle-border-color-down)
142
+ )}:host([readonly]:active) #label{color:var(
143
+ --spectrum-checkbox-m-text-color-down,var(--spectrum-alias-component-text-color-down)
144
+ )}:host([readonly]) #input:checked:disabled+#box:before,:host([readonly]) #input:disabled+#box:before{background-color:var(
145
+ --spectrum-checkbox-m-box-background-color,var(--spectrum-global-color-gray-75)
146
+ );border-color:var(
147
+ --spectrum-checkbox-m-box-border-color,var(--spectrum-alias-toggle-border-color-default)
148
+ )}:host([readonly]) #input:checked:disabled~#label,:host([readonly]) #input:disabled~#label{color:var(
149
+ --spectrum-checkbox-m-text-color,var(--spectrum-alias-component-text-color-default)
150
+ );forced-color-adjust:none}#input:disabled+#box:before,:host([dir]) #input:checked:disabled+#box:before{background-color:var(
151
+ --spectrum-checkbox-m-box-background-color-disabled,var(--spectrum-global-color-gray-75)
152
+ );border-color:var(
153
+ --spectrum-checkbox-m-box-border-color-disabled,var(--spectrum-global-color-gray-400)
154
+ )}#input:checked:disabled~#label,#input:disabled~#label{color:var(
155
+ --spectrum-checkbox-m-text-color-disabled,var(--spectrum-alias-component-text-color-disabled)
156
+ );forced-color-adjust:none}#input.focus-visible+#box:before{border-color:var(
157
+ --spectrum-checkbox-m-box-border-color-key-focus,var(--spectrum-alias-toggle-border-color-key-focus)
158
+ )}#input:focus-visible+#box:before{border-color:var(
159
+ --spectrum-checkbox-m-box-border-color-key-focus,var(--spectrum-alias-toggle-border-color-key-focus)
160
+ )}#input.focus-visible+#box:after{box-shadow:0 0 0 var(
161
+ --spectrum-checkbox-m-focus-ring-size,var(--spectrum-alias-focus-ring-size)
162
+ ) var(
163
+ --spectrum-checkbox-m-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color)
164
+ );forced-color-adjust:none}#input:focus-visible+#box:after{box-shadow:0 0 0 var(
165
+ --spectrum-checkbox-m-focus-ring-size,var(--spectrum-alias-focus-ring-size)
166
+ ) var(
167
+ --spectrum-checkbox-m-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color)
168
+ );forced-color-adjust:none}#input:checked.focus-visible+#box:before,:host([indeterminate]) #input.focus-visible+#box:before{border-color:var(
169
+ --spectrum-checkbox-m-box-border-color-selected-key-focus,var(--spectrum-alias-toggle-background-color-key-focus)
170
+ )}#input:checked:focus-visible+#box:before,:host([indeterminate]) #input:focus-visible+#box:before{border-color:var(
171
+ --spectrum-checkbox-m-box-border-color-selected-key-focus,var(--spectrum-alias-toggle-background-color-key-focus)
172
+ )}#input.focus-visible~#label{color:var(
173
+ --spectrum-checkbox-m-text-color-key-focus,var(--spectrum-alias-component-text-color-key-focus)
174
+ )}#input:focus-visible~#label{color:var(
175
+ --spectrum-checkbox-m-text-color-key-focus,var(--spectrum-alias-component-text-color-key-focus)
176
+ )}:host([emphasized]) #input:checked+#box:before,:host([emphasized][indeterminate]) #box:before,:host([emphasized][indeterminate]) #input.focus-visible+#box:before{border-color:var(
177
+ --spectrum-checkbox-m-emphasized-box-border-color-selected,var(
178
+ --spectrum-alias-toggle-background-color-emphasized-selected-default
179
+ )
180
+ )}:host([emphasized]) #input:checked+#box:before,:host([emphasized][indeterminate]) #box:before,:host([emphasized][indeterminate]) #input:focus-visible+#box:before{border-color:var(
181
+ --spectrum-checkbox-m-emphasized-box-border-color-selected,var(
182
+ --spectrum-alias-toggle-background-color-emphasized-selected-default
183
+ )
184
+ )}:host([emphasized]:hover) #input:checked+#box:before,:host([emphasized][indeterminate]:hover) #box:before{border-color:var(
185
+ --spectrum-checkbox-m-emphasized-box-border-color-selected-hover,var(--spectrum-alias-toggle-background-color-emphasized-selected-hover)
186
+ )}:host([emphasized]:active) #input:checked+#box:before,:host([emphasized][indeterminate]:active) #box:before{border-color:var(
187
+ --spectrum-checkbox-m-emphasized-box-border-color-selected-down,var(--spectrum-alias-toggle-background-color-emphasized-selected-down)
188
+ )}:host([invalid][dir]) #box:before,:host([invalid][dir]) #input:checked+#box:before{border-color:var(
189
+ --spectrum-checkbox-m-box-border-color-error,var(--spectrum-global-color-red-500)
190
+ )}:host([invalid]) #label{color:var(
191
+ --spectrum-checkbox-m-text-color-error,var(--spectrum-alias-component-text-color-error-default)
192
+ )}:host([invalid]) #input.focus-visible+#box:before,:host([invalid][indeterminate]) #input.focus-visible+#box:before{border-color:var(
193
+ --spectrum-checkbox-m-box-border-color-error-hover,var(--spectrum-global-color-red-600)
194
+ )}:host([invalid]) #input:focus-visible+#box:before,:host([invalid][indeterminate]) #input:focus-visible+#box:before{border-color:var(
195
+ --spectrum-checkbox-m-box-border-color-error-hover,var(--spectrum-global-color-red-600)
196
+ )}:host([invalid]) #input.focus-visible~#label,:host([invalid][indeterminate]) #input.focus-visible~#label{color:var(
197
+ --spectrum-checkbox-m-text-color-error-hover,var(--spectrum-alias-component-text-color-error-hover)
198
+ )}:host([invalid]) #input:focus-visible~#label,:host([invalid][indeterminate]) #input:focus-visible~#label{color:var(
199
+ --spectrum-checkbox-m-text-color-error-hover,var(--spectrum-alias-component-text-color-error-hover)
200
+ )}:host([invalid]:hover) #box:before,:host([invalid][dir]:hover) #input:checked+#box:before{border-color:var(
201
+ --spectrum-checkbox-m-box-border-color-error-hover,var(--spectrum-global-color-red-600)
202
+ )}:host([invalid]:hover) #label{color:var(
203
+ --spectrum-checkbox-m-text-color-error-hover,var(--spectrum-alias-component-text-color-error-hover)
204
+ )}:host([invalid]:active) #box:before,:host([invalid]:active) #input:checked+#box:before{border-color:var(
205
+ --spectrum-checkbox-m-box-border-color-error-down,var(--spectrum-global-color-red-700)
206
+ )}:host([invalid]:active) #label{color:var(
207
+ --spectrum-checkbox-m-text-color-error-down,var(--spectrum-alias-component-text-color-error-down)
208
+ )}@media (forced-colors:active){#input.focus-visible+#box{forced-color-adjust:none;outline-color:var(
209
+ --spectrum-checkbox-m-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color)
210
+ );outline-offset:var(
211
+ --spectrum-checkbox-m-focus-ring-gap-key-focus,var(--spectrum-alias-focus-ring-gap)
212
+ );outline-style:auto;outline-width:var(
213
+ --spectrum-checkbox-m-focus-ring-size,var(--spectrum-alias-focus-ring-size)
214
+ )}#input:focus-visible+#box{forced-color-adjust:none;outline-color:var(
215
+ --spectrum-checkbox-m-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color)
216
+ );outline-offset:var(
217
+ --spectrum-checkbox-m-focus-ring-gap-key-focus,var(--spectrum-alias-focus-ring-gap)
218
+ );outline-style:auto;outline-width:var(
219
+ --spectrum-checkbox-m-focus-ring-size,var(--spectrum-alias-focus-ring-size)
220
+ )}:host{--spectrum-checkbox-m-box-background-color-disabled:ButtonFace;--spectrum-checkbox-m-box-background-color:ButtonFace;--spectrum-checkbox-m-box-border-color-disabled:GrayText;--spectrum-checkbox-m-box-border-color-down:Highlight;--spectrum-checkbox-m-box-border-color-error-down:Highlight;--spectrum-checkbox-m-box-border-color-hover:Highlight;--spectrum-checkbox-m-box-border-color-key-focus:Highlight;--spectrum-checkbox-m-box-border-color-selected-down:Highlight;--spectrum-checkbox-m-box-border-color-selected-hover:Highlight;--spectrum-checkbox-m-box-border-color-selected-key-focus:Highlight;--spectrum-checkbox-m-box-border-color-selected:Highlight;--spectrum-checkbox-m-box-border-color:ButtonText;--spectrum-checkbox-m-emphasized-box-border-color-selected-down:Highlight;--spectrum-checkbox-m-emphasized-box-border-color-selected-hover:Highlight;--spectrum-checkbox-m-emphasized-box-border-color-selected:Highlight;--spectrum-checkbox-m-focus-ring-color-key-focus:FieldText;--spectrum-checkbox-m-text-color-disabled:GrayText;--spectrum-checkbox-m-text-color-down:FieldText;--spectrum-checkbox-m-text-color-error-down:FieldText;--spectrum-checkbox-m-text-color-error-hover:FieldText;--spectrum-checkbox-m-checkmark-color:HighlightText;--spectrum-checkbox-m-focus-ring-gap-key-focus:var(
221
+ --spectrum-global-dimension-static-size-25,2px
222
+ );--spectrum-checkbox-m-focus-ring-size:var(
223
+ --spectrum-global-dimension-static-size-40,3px
224
+ );--spectrum-checkbox-m-box-border-color-error:FieldText;--spectrum-checkbox-m-box-border-color-error-hover:FieldText;--spectrum-checkbox-m-text-color-error:FieldText;--spectrum-checkbox-m-text-color-hover:FieldText;--spectrum-checkbox-m-text-color-key-focus:FieldText;--spectrum-checkbox-m-text-color:FieldText}:host([invalid][dir]) #box:before{border-color:var(
225
+ --spectrum-checkbox-m-box-border-color,var(--spectrum-alias-toggle-border-color-default)
226
+ )}:host([invalid][indeterminate]) #box:before{border-color:var(
227
+ --spectrum-checkbox-m-box-border-color-error,var(--spectrum-global-color-red-500)
228
+ )}:host([invalid][dir]) #input:checked+#box:before{border-color:var(
229
+ --spectrum-checkbox-m-box-border-color-error,var(--spectrum-global-color-red-500)
230
+ )}}
231
+ `;
232
+ export default styles;
233
+ //# sourceMappingURL=spectrum-checkbox.css.dev.js.map
package/src/spectrum-checkbox.css.dev.js.map ADDED
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["spectrum-checkbox.css.ts"],
4
+ "sourcesContent": ["/*\nCopyright 2022 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 { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{align-items:flex-start;display:inline-flex;max-width:100%;min-height:var(--spectrum-checkbox-height);position:relative;vertical-align:top}#input{box-sizing:border-box;cursor:pointer;font-family:inherit;font-size:100%;height:100%;line-height:1.15;margin:0;opacity:.0001;overflow:visible;padding:0;position:absolute;width:100%;z-index:1}#input:disabled{cursor:default}#input:checked+#box:before{border-width:calc(var(--spectrum-checkbox-box-size)/2)}#input:checked+#box #checkmark{opacity:1;transform:scale(1)}#input.focus-visible+#box:after{margin:calc(var(\n--spectrum-alias-focus-ring-gap,\nvar(--spectrum-global-dimension-static-size-25)\n)*-1)}#input:focus-visible+#box:after{margin:calc(var(\n--spectrum-alias-focus-ring-gap,\nvar(--spectrum-global-dimension-static-size-25)\n)*-1)}:host([size=s]){--spectrum-checkbox-box-border-radius:var(\n--spectrum-checkbox-s-box-border-radius,var(--spectrum-alias-border-radius-small)\n);--spectrum-checkbox-box-border-size:var(\n--spectrum-checkbox-s-box-border-size,var(--spectrum-alias-border-size-thick)\n);--spectrum-checkbox-box-size:var(\n--spectrum-checkbox-s-box-size,var(--spectrum-alias-control-two-size-s)\n);--spectrum-checkbox-text-size:var(\n--spectrum-checkbox-s-text-size,var(--spectrum-global-dimension-font-size-75)\n);--spectrum-checkbox-text-gap:var(\n--spectrum-checkbox-s-text-gap,var(--spectrum-global-dimension-size-115)\n);--spectrum-checkbox-text-padding-top:var(\n--spectrum-checkbox-s-text-padding-top,var(--spectrum-global-dimension-static-size-50)\n);--spectrum-checkbox-text-font-style:var(\n--spectrum-checkbox-s-text-font-style,var(--spectrum-global-font-style-regular)\n);--spectrum-checkbox-text-font-weight:var(\n--spectrum-checkbox-s-text-font-weight,var(--spectrum-alias-body-text-font-weight)\n);--spectrum-checkbox-text-line-height:var(\n--spectrum-checkbox-s-text-line-height,var(--spectrum-alias-component-text-line-height)\n);--spectrum-checkbox-checkmark-size:var(\n--spectrum-checkbox-s-checkmark-size,var(--spectrum-alias-ui-icon-checkmark-size-75)\n);--spectrum-checkbox-height:var(\n--spectrum-checkbox-s-height,var(--spectrum-global-dimension-size-300)\n)}:host([size=m]){--spectrum-checkbox-box-border-radius:var(\n--spectrum-checkbox-m-box-border-radius,var(--spectrum-alias-border-radius-small)\n);--spectrum-checkbox-box-border-size:var(\n--spectrum-checkbox-m-box-border-size,var(--spectrum-alias-border-size-thick)\n);--spectrum-checkbox-box-size:var(\n--spectrum-checkbox-m-box-size,var(--spectrum-alias-control-two-size-m)\n);--spectrum-checkbox-text-size:var(\n--spectrum-checkbox-m-text-size,var(--spectrum-global-dimension-font-size-100)\n);--spectrum-checkbox-text-gap:var(\n--spectrum-checkbox-m-text-gap,var(--spectrum-global-dimension-size-125)\n);--spectrum-checkbox-text-padding-top:var(\n--spectrum-checkbox-m-text-padding-top,var(--spectrum-global-dimension-size-75)\n);--spectrum-checkbox-text-font-style:var(\n--spectrum-checkbox-m-text-font-style,var(--spectrum-global-font-style-regular)\n);--spectrum-checkbox-text-font-weight:var(\n--spectrum-checkbox-m-text-font-weight,var(--spectrum-alias-body-text-font-weight)\n);--spectrum-checkbox-text-line-height:var(\n--spectrum-checkbox-m-text-line-height,var(--spectrum-alias-component-text-line-height)\n);--spectrum-checkbox-checkmark-size:var(\n--spectrum-checkbox-m-checkmark-size,var(--spectrum-alias-ui-icon-checkmark-size-100)\n);--spectrum-checkbox-height:var(\n--spectrum-checkbox-m-height,var(--spectrum-global-dimension-size-400)\n)}:host([size=l]){--spectrum-checkbox-text-padding-top:var(\n--spectrum-checkbox-l-text-padding-top\n);--spectrum-checkbox-box-border-radius:var(\n--spectrum-checkbox-l-box-border-radius,var(--spectrum-alias-border-radius-small)\n);--spectrum-checkbox-box-border-size:var(\n--spectrum-checkbox-l-box-border-size,var(--spectrum-alias-border-size-thick)\n);--spectrum-checkbox-box-size:var(\n--spectrum-checkbox-l-box-size,var(--spectrum-alias-control-two-size-l)\n);--spectrum-checkbox-text-size:var(\n--spectrum-checkbox-l-text-size,var(--spectrum-global-dimension-font-size-200)\n);--spectrum-checkbox-text-gap:var(\n--spectrum-checkbox-l-text-gap,var(--spectrum-global-dimension-size-130)\n);--spectrum-checkbox-text-font-style:var(\n--spectrum-checkbox-l-text-font-style,var(--spectrum-global-font-style-regular)\n);--spectrum-checkbox-text-font-weight:var(\n--spectrum-checkbox-l-text-font-weight,var(--spectrum-alias-body-text-font-weight)\n);--spectrum-checkbox-text-line-height:var(\n--spectrum-checkbox-l-text-line-height,var(--spectrum-alias-component-text-line-height)\n);--spectrum-checkbox-checkmark-size:var(\n--spectrum-checkbox-l-checkmark-size,var(--spectrum-alias-ui-icon-checkmark-size-200)\n);--spectrum-checkbox-height:var(\n--spectrum-checkbox-l-height,var(--spectrum-global-dimension-size-500)\n)}:host([size=xl]){--spectrum-checkbox-box-border-radius:var(\n--spectrum-checkbox-xl-box-border-radius,var(--spectrum-alias-border-radius-small)\n);--spectrum-checkbox-box-border-size:var(\n--spectrum-checkbox-xl-box-border-size,var(--spectrum-alias-border-size-thick)\n);--spectrum-checkbox-box-size:var(\n--spectrum-checkbox-xl-box-size,var(--spectrum-alias-control-two-size-xl)\n);--spectrum-checkbox-text-size:var(\n--spectrum-checkbox-xl-text-size,var(--spectrum-global-dimension-font-size-300)\n);--spectrum-checkbox-text-gap:var(\n--spectrum-checkbox-xl-text-gap,var(--spectrum-global-dimension-size-160)\n);--spectrum-checkbox-text-padding-top:var(\n--spectrum-checkbox-xl-text-padding-top,var(--spectrum-global-dimension-size-150)\n);--spectrum-checkbox-text-font-style:var(\n--spectrum-checkbox-xl-text-font-style,var(--spectrum-global-font-style-regular)\n);--spectrum-checkbox-text-font-weight:var(\n--spectrum-checkbox-xl-text-font-weight,var(--spectrum-alias-body-text-font-weight)\n);--spectrum-checkbox-text-line-height:var(\n--spectrum-checkbox-xl-text-line-height,var(--spectrum-alias-component-text-line-height)\n);--spectrum-checkbox-checkmark-size:var(\n--spectrum-checkbox-xl-checkmark-size,var(--spectrum-alias-ui-icon-checkmark-size-300)\n);--spectrum-checkbox-height:var(\n--spectrum-checkbox-xl-height,var(--spectrum-global-dimension-size-600)\n)}:host([indeterminate]) #box:before,:host([indeterminate]) #input:checked+#box:before{border-width:calc(var(--spectrum-checkbox-box-size)/2)}:host([indeterminate]) #box #checkmark,:host([indeterminate]) #input:checked+#box #checkmark{display:none}:host([indeterminate]) #box #partialCheckmark,:host([indeterminate]) #input:checked+#box #partialCheckmark{display:block;opacity:1;transform:scale(1)}:host([dir=ltr]) #label{text-align:left}:host([dir=rtl]) #label{text-align:right}:host([dir=ltr]) #label{margin-left:var(\n--spectrum-checkbox-text-gap\n)}:host([dir=rtl]) #label{margin-right:var(\n--spectrum-checkbox-text-gap\n)}#label{font-size:var(--spectrum-checkbox-text-size);font-style:var(--spectrum-checkbox-text-font-style);font-weight:var(--spectrum-checkbox-text-font-weight);line-height:var(--spectrum-checkbox-text-line-height);margin-top:var(\n--spectrum-checkbox-text-padding-top\n);transition:color var(--spectrum-global-animation-duration-100,.13s) ease-in-out}#box{box-sizing:border-box;flex-grow:0;flex-shrink:0;height:var(--spectrum-checkbox-box-size);margin:calc((var(--spectrum-checkbox-height) - var(--spectrum-checkbox-box-size))/2) 0;position:relative;width:var(--spectrum-checkbox-box-size)}#box:before{border-radius:var(--spectrum-checkbox-box-border-radius);border-style:solid;border-width:var(--spectrum-checkbox-box-border-size);box-sizing:border-box;content:\"\";display:block;height:var(--spectrum-checkbox-box-size);position:absolute;transition:border var(--spectrum-global-animation-duration-100,.13s) ease-in-out,box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out;width:var(--spectrum-checkbox-box-size);z-index:0}#box:after{border-radius:calc(var(--spectrum-checkbox-box-border-radius) + var(\n--spectrum-alias-focus-ring-gap,\nvar(--spectrum-global-dimension-static-size-25)\n));bottom:0;content:\"\";display:block;left:0;margin:var(\n--spectrum-alias-focus-ring-gap,var(--spectrum-global-dimension-static-size-25)\n);position:absolute;right:0;top:0;transform:translate(0);transition:box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-out,margin var(--spectrum-global-animation-duration-100,.13s) ease-out}:host([dir=ltr]) #checkmark,:host([dir=ltr]) #partialCheckmark{left:50%}:host([dir=rtl]) #checkmark,:host([dir=rtl]) #partialCheckmark{right:50%}#checkmark,#partialCheckmark{opacity:0;position:absolute;top:50%;transform:scale(0);transition:opacity var(--spectrum-global-animation-duration-100,.13s) ease-in-out,transform var(--spectrum-global-animation-duration-100,.13s) ease-in-out}:host([dir=ltr]) #checkmark{margin-left:calc(var(--spectrum-checkbox-checkmark-size)/-2)}:host([dir=rtl]) #checkmark{margin-right:calc(var(--spectrum-checkbox-checkmark-size)/-2)}#checkmark{margin-top:calc(var(--spectrum-checkbox-checkmark-size)/-2)}:host([dir=ltr]) #partialCheckmark{margin-left:calc(var(--spectrum-checkbox-checkmark-size)/-2)}:host([dir=rtl]) #partialCheckmark{margin-right:calc(var(--spectrum-checkbox-checkmark-size)/-2)}#partialCheckmark{display:none;margin-top:calc(var(--spectrum-checkbox-checkmark-size)/-2)}:host{color:var(\n--spectrum-checkbox-m-text-color,var(--spectrum-alias-component-text-color-default)\n)}#checkmark,#partialCheckmark{color:var(\n--spectrum-checkbox-m-checkmark-color,var(--spectrum-alias-toggle-icon-color-selected)\n)}#box:before{background-color:var(\n--spectrum-checkbox-m-box-background-color,var(--spectrum-global-color-gray-75)\n);border-color:var(\n--spectrum-checkbox-m-box-border-color,var(--spectrum-alias-toggle-border-color-default)\n);forced-color-adjust:none}#label{color:var(\n--spectrum-checkbox-m-text-color,var(--spectrum-alias-component-text-color-default)\n)}#input:checked+#box:before,:host([indeterminate]) #box:before{border-color:var(\n--spectrum-checkbox-m-box-border-color-selected,var(--spectrum-alias-toggle-background-color-default)\n)}:host(:hover) #input:checked+#box:before,:host(:hover[indeterminate]) #box:before{border-color:var(\n--spectrum-checkbox-m-box-border-color-selected-hover,var(--spectrum-alias-toggle-background-color-hover)\n)}:host(:active) #input:checked+#box:before,:host(:active[indeterminate]) #box:before{border-color:var(\n--spectrum-checkbox-m-box-border-color-selected-down,var(--spectrum-alias-toggle-background-color-down)\n)}:host{border-color:var(\n--spectrum-checkbox-m-box-border-color,var(--spectrum-alias-toggle-border-color-default)\n)}:host(:hover) #box:before{border-color:var(\n--spectrum-checkbox-m-box-border-color-hover,var(--spectrum-alias-toggle-border-color-hover)\n)}:host(:hover) #label{color:var(\n--spectrum-checkbox-m-text-color-hover,var(--spectrum-alias-component-text-color-hover)\n)}:host(:active) #box:before{border-color:var(\n--spectrum-checkbox-m-box-border-color-down,var(--spectrum-alias-toggle-border-color-down)\n)}:host(:active) #label{color:var(\n--spectrum-checkbox-m-text-color-down,var(--spectrum-alias-component-text-color-down)\n)}:host([readonly]){border-color:var(\n--spectrum-checkbox-m-box-border-color,var(--spectrum-alias-toggle-border-color-default)\n)}:host([readonly]:hover) #box:before{border-color:var(\n--spectrum-checkbox-m-box-border-color-hover,var(--spectrum-alias-toggle-border-color-hover)\n)}:host([readonly]:hover) #label{color:var(\n--spectrum-checkbox-m-text-color-hover,var(--spectrum-alias-component-text-color-hover)\n)}:host([readonly]:active) #box:before{border-color:var(\n--spectrum-checkbox-m-box-border-color-down,var(--spectrum-alias-toggle-border-color-down)\n)}:host([readonly]:active) #label{color:var(\n--spectrum-checkbox-m-text-color-down,var(--spectrum-alias-component-text-color-down)\n)}:host([readonly]) #input:checked:disabled+#box:before,:host([readonly]) #input:disabled+#box:before{background-color:var(\n--spectrum-checkbox-m-box-background-color,var(--spectrum-global-color-gray-75)\n);border-color:var(\n--spectrum-checkbox-m-box-border-color,var(--spectrum-alias-toggle-border-color-default)\n)}:host([readonly]) #input:checked:disabled~#label,:host([readonly]) #input:disabled~#label{color:var(\n--spectrum-checkbox-m-text-color,var(--spectrum-alias-component-text-color-default)\n);forced-color-adjust:none}#input:disabled+#box:before,:host([dir]) #input:checked:disabled+#box:before{background-color:var(\n--spectrum-checkbox-m-box-background-color-disabled,var(--spectrum-global-color-gray-75)\n);border-color:var(\n--spectrum-checkbox-m-box-border-color-disabled,var(--spectrum-global-color-gray-400)\n)}#input:checked:disabled~#label,#input:disabled~#label{color:var(\n--spectrum-checkbox-m-text-color-disabled,var(--spectrum-alias-component-text-color-disabled)\n);forced-color-adjust:none}#input.focus-visible+#box:before{border-color:var(\n--spectrum-checkbox-m-box-border-color-key-focus,var(--spectrum-alias-toggle-border-color-key-focus)\n)}#input:focus-visible+#box:before{border-color:var(\n--spectrum-checkbox-m-box-border-color-key-focus,var(--spectrum-alias-toggle-border-color-key-focus)\n)}#input.focus-visible+#box:after{box-shadow:0 0 0 var(\n--spectrum-checkbox-m-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n) var(\n--spectrum-checkbox-m-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color)\n);forced-color-adjust:none}#input:focus-visible+#box:after{box-shadow:0 0 0 var(\n--spectrum-checkbox-m-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n) var(\n--spectrum-checkbox-m-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color)\n);forced-color-adjust:none}#input:checked.focus-visible+#box:before,:host([indeterminate]) #input.focus-visible+#box:before{border-color:var(\n--spectrum-checkbox-m-box-border-color-selected-key-focus,var(--spectrum-alias-toggle-background-color-key-focus)\n)}#input:checked:focus-visible+#box:before,:host([indeterminate]) #input:focus-visible+#box:before{border-color:var(\n--spectrum-checkbox-m-box-border-color-selected-key-focus,var(--spectrum-alias-toggle-background-color-key-focus)\n)}#input.focus-visible~#label{color:var(\n--spectrum-checkbox-m-text-color-key-focus,var(--spectrum-alias-component-text-color-key-focus)\n)}#input:focus-visible~#label{color:var(\n--spectrum-checkbox-m-text-color-key-focus,var(--spectrum-alias-component-text-color-key-focus)\n)}:host([emphasized]) #input:checked+#box:before,:host([emphasized][indeterminate]) #box:before,:host([emphasized][indeterminate]) #input.focus-visible+#box:before{border-color:var(\n--spectrum-checkbox-m-emphasized-box-border-color-selected,var(\n--spectrum-alias-toggle-background-color-emphasized-selected-default\n)\n)}:host([emphasized]) #input:checked+#box:before,:host([emphasized][indeterminate]) #box:before,:host([emphasized][indeterminate]) #input:focus-visible+#box:before{border-color:var(\n--spectrum-checkbox-m-emphasized-box-border-color-selected,var(\n--spectrum-alias-toggle-background-color-emphasized-selected-default\n)\n)}:host([emphasized]:hover) #input:checked+#box:before,:host([emphasized][indeterminate]:hover) #box:before{border-color:var(\n--spectrum-checkbox-m-emphasized-box-border-color-selected-hover,var(--spectrum-alias-toggle-background-color-emphasized-selected-hover)\n)}:host([emphasized]:active) #input:checked+#box:before,:host([emphasized][indeterminate]:active) #box:before{border-color:var(\n--spectrum-checkbox-m-emphasized-box-border-color-selected-down,var(--spectrum-alias-toggle-background-color-emphasized-selected-down)\n)}:host([invalid][dir]) #box:before,:host([invalid][dir]) #input:checked+#box:before{border-color:var(\n--spectrum-checkbox-m-box-border-color-error,var(--spectrum-global-color-red-500)\n)}:host([invalid]) #label{color:var(\n--spectrum-checkbox-m-text-color-error,var(--spectrum-alias-component-text-color-error-default)\n)}:host([invalid]) #input.focus-visible+#box:before,:host([invalid][indeterminate]) #input.focus-visible+#box:before{border-color:var(\n--spectrum-checkbox-m-box-border-color-error-hover,var(--spectrum-global-color-red-600)\n)}:host([invalid]) #input:focus-visible+#box:before,:host([invalid][indeterminate]) #input:focus-visible+#box:before{border-color:var(\n--spectrum-checkbox-m-box-border-color-error-hover,var(--spectrum-global-color-red-600)\n)}:host([invalid]) #input.focus-visible~#label,:host([invalid][indeterminate]) #input.focus-visible~#label{color:var(\n--spectrum-checkbox-m-text-color-error-hover,var(--spectrum-alias-component-text-color-error-hover)\n)}:host([invalid]) #input:focus-visible~#label,:host([invalid][indeterminate]) #input:focus-visible~#label{color:var(\n--spectrum-checkbox-m-text-color-error-hover,var(--spectrum-alias-component-text-color-error-hover)\n)}:host([invalid]:hover) #box:before,:host([invalid][dir]:hover) #input:checked+#box:before{border-color:var(\n--spectrum-checkbox-m-box-border-color-error-hover,var(--spectrum-global-color-red-600)\n)}:host([invalid]:hover) #label{color:var(\n--spectrum-checkbox-m-text-color-error-hover,var(--spectrum-alias-component-text-color-error-hover)\n)}:host([invalid]:active) #box:before,:host([invalid]:active) #input:checked+#box:before{border-color:var(\n--spectrum-checkbox-m-box-border-color-error-down,var(--spectrum-global-color-red-700)\n)}:host([invalid]:active) #label{color:var(\n--spectrum-checkbox-m-text-color-error-down,var(--spectrum-alias-component-text-color-error-down)\n)}@media (forced-colors:active){#input.focus-visible+#box{forced-color-adjust:none;outline-color:var(\n--spectrum-checkbox-m-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color)\n);outline-offset:var(\n--spectrum-checkbox-m-focus-ring-gap-key-focus,var(--spectrum-alias-focus-ring-gap)\n);outline-style:auto;outline-width:var(\n--spectrum-checkbox-m-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n)}#input:focus-visible+#box{forced-color-adjust:none;outline-color:var(\n--spectrum-checkbox-m-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color)\n);outline-offset:var(\n--spectrum-checkbox-m-focus-ring-gap-key-focus,var(--spectrum-alias-focus-ring-gap)\n);outline-style:auto;outline-width:var(\n--spectrum-checkbox-m-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n)}:host{--spectrum-checkbox-m-box-background-color-disabled:ButtonFace;--spectrum-checkbox-m-box-background-color:ButtonFace;--spectrum-checkbox-m-box-border-color-disabled:GrayText;--spectrum-checkbox-m-box-border-color-down:Highlight;--spectrum-checkbox-m-box-border-color-error-down:Highlight;--spectrum-checkbox-m-box-border-color-hover:Highlight;--spectrum-checkbox-m-box-border-color-key-focus:Highlight;--spectrum-checkbox-m-box-border-color-selected-down:Highlight;--spectrum-checkbox-m-box-border-color-selected-hover:Highlight;--spectrum-checkbox-m-box-border-color-selected-key-focus:Highlight;--spectrum-checkbox-m-box-border-color-selected:Highlight;--spectrum-checkbox-m-box-border-color:ButtonText;--spectrum-checkbox-m-emphasized-box-border-color-selected-down:Highlight;--spectrum-checkbox-m-emphasized-box-border-color-selected-hover:Highlight;--spectrum-checkbox-m-emphasized-box-border-color-selected:Highlight;--spectrum-checkbox-m-focus-ring-color-key-focus:FieldText;--spectrum-checkbox-m-text-color-disabled:GrayText;--spectrum-checkbox-m-text-color-down:FieldText;--spectrum-checkbox-m-text-color-error-down:FieldText;--spectrum-checkbox-m-text-color-error-hover:FieldText;--spectrum-checkbox-m-checkmark-color:HighlightText;--spectrum-checkbox-m-focus-ring-gap-key-focus:var(\n--spectrum-global-dimension-static-size-25,2px\n);--spectrum-checkbox-m-focus-ring-size:var(\n--spectrum-global-dimension-static-size-40,3px\n);--spectrum-checkbox-m-box-border-color-error:FieldText;--spectrum-checkbox-m-box-border-color-error-hover:FieldText;--spectrum-checkbox-m-text-color-error:FieldText;--spectrum-checkbox-m-text-color-hover:FieldText;--spectrum-checkbox-m-text-color-key-focus:FieldText;--spectrum-checkbox-m-text-color:FieldText}:host([invalid][dir]) #box:before{border-color:var(\n--spectrum-checkbox-m-box-border-color,var(--spectrum-alias-toggle-border-color-default)\n)}:host([invalid][indeterminate]) #box:before{border-color:var(\n--spectrum-checkbox-m-box-border-color-error,var(--spectrum-global-color-red-500)\n)}:host([invalid][dir]) #input:checked+#box:before{border-color:var(\n--spectrum-checkbox-m-box-border-color-error,var(--spectrum-global-color-red-500)\n)}}\n`;\nexport default styles;"],
5
+ "mappings": "AAWA;AACA,MAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAsOf,eAAe;",
6
+ "names": []
7
+ }
package/src/spectrum-checkbox.css.js CHANGED
@@ -1,16 +1,5 @@
1
- /*
2
- Copyright 2022 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 { css } from '@spectrum-web-components/base';
13
- const styles = css `
1
+ import { css } from "@spectrum-web-components/base";
2
+ const styles = css`
14
3
  :host{align-items:flex-start;display:inline-flex;max-width:100%;min-height:var(--spectrum-checkbox-height);position:relative;vertical-align:top}#input{box-sizing:border-box;cursor:pointer;font-family:inherit;font-size:100%;height:100%;line-height:1.15;margin:0;opacity:.0001;overflow:visible;padding:0;position:absolute;width:100%;z-index:1}#input:disabled{cursor:default}#input:checked+#box:before{border-width:calc(var(--spectrum-checkbox-box-size)/2)}#input:checked+#box #checkmark{opacity:1;transform:scale(1)}#input.focus-visible+#box:after{margin:calc(var(
15
4
  --spectrum-alias-focus-ring-gap,
16
5
  var(--spectrum-global-dimension-static-size-25)
@@ -241,4 +230,4 @@ var(--spectrum-global-dimension-static-size-25)
241
230
  )}}
242
231
  `;
243
232
  export default styles;
244
- //# sourceMappingURL=spectrum-checkbox.css.js.map
233
+ //# sourceMappingURL=spectrum-checkbox.css.js.map
package/src/spectrum-checkbox.css.js.map CHANGED
@@ -1 +1,7 @@
1
- {"version":3,"file":"spectrum-checkbox.css.js","sourceRoot":"","sources":["spectrum-checkbox.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqOjB,CAAC;AACF,eAAe,MAAM,CAAC","sourcesContent":["/*\nCopyright 2022 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 { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{align-items:flex-start;display:inline-flex;max-width:100%;min-height:var(--spectrum-checkbox-height);position:relative;vertical-align:top}#input{box-sizing:border-box;cursor:pointer;font-family:inherit;font-size:100%;height:100%;line-height:1.15;margin:0;opacity:.0001;overflow:visible;padding:0;position:absolute;width:100%;z-index:1}#input:disabled{cursor:default}#input:checked+#box:before{border-width:calc(var(--spectrum-checkbox-box-size)/2)}#input:checked+#box #checkmark{opacity:1;transform:scale(1)}#input.focus-visible+#box:after{margin:calc(var(\n--spectrum-alias-focus-ring-gap,\nvar(--spectrum-global-dimension-static-size-25)\n)*-1)}#input:focus-visible+#box:after{margin:calc(var(\n--spectrum-alias-focus-ring-gap,\nvar(--spectrum-global-dimension-static-size-25)\n)*-1)}:host([size=s]){--spectrum-checkbox-box-border-radius:var(\n--spectrum-checkbox-s-box-border-radius,var(--spectrum-alias-border-radius-small)\n);--spectrum-checkbox-box-border-size:var(\n--spectrum-checkbox-s-box-border-size,var(--spectrum-alias-border-size-thick)\n);--spectrum-checkbox-box-size:var(\n--spectrum-checkbox-s-box-size,var(--spectrum-alias-control-two-size-s)\n);--spectrum-checkbox-text-size:var(\n--spectrum-checkbox-s-text-size,var(--spectrum-global-dimension-font-size-75)\n);--spectrum-checkbox-text-gap:var(\n--spectrum-checkbox-s-text-gap,var(--spectrum-global-dimension-size-115)\n);--spectrum-checkbox-text-padding-top:var(\n--spectrum-checkbox-s-text-padding-top,var(--spectrum-global-dimension-static-size-50)\n);--spectrum-checkbox-text-font-style:var(\n--spectrum-checkbox-s-text-font-style,var(--spectrum-global-font-style-regular)\n);--spectrum-checkbox-text-font-weight:var(\n--spectrum-checkbox-s-text-font-weight,var(--spectrum-alias-body-text-font-weight)\n);--spectrum-checkbox-text-line-height:var(\n--spectrum-checkbox-s-text-line-height,var(--spectrum-alias-component-text-line-height)\n);--spectrum-checkbox-checkmark-size:var(\n--spectrum-checkbox-s-checkmark-size,var(--spectrum-alias-ui-icon-checkmark-size-75)\n);--spectrum-checkbox-height:var(\n--spectrum-checkbox-s-height,var(--spectrum-global-dimension-size-300)\n)}:host([size=m]){--spectrum-checkbox-box-border-radius:var(\n--spectrum-checkbox-m-box-border-radius,var(--spectrum-alias-border-radius-small)\n);--spectrum-checkbox-box-border-size:var(\n--spectrum-checkbox-m-box-border-size,var(--spectrum-alias-border-size-thick)\n);--spectrum-checkbox-box-size:var(\n--spectrum-checkbox-m-box-size,var(--spectrum-alias-control-two-size-m)\n);--spectrum-checkbox-text-size:var(\n--spectrum-checkbox-m-text-size,var(--spectrum-global-dimension-font-size-100)\n);--spectrum-checkbox-text-gap:var(\n--spectrum-checkbox-m-text-gap,var(--spectrum-global-dimension-size-125)\n);--spectrum-checkbox-text-padding-top:var(\n--spectrum-checkbox-m-text-padding-top,var(--spectrum-global-dimension-size-75)\n);--spectrum-checkbox-text-font-style:var(\n--spectrum-checkbox-m-text-font-style,var(--spectrum-global-font-style-regular)\n);--spectrum-checkbox-text-font-weight:var(\n--spectrum-checkbox-m-text-font-weight,var(--spectrum-alias-body-text-font-weight)\n);--spectrum-checkbox-text-line-height:var(\n--spectrum-checkbox-m-text-line-height,var(--spectrum-alias-component-text-line-height)\n);--spectrum-checkbox-checkmark-size:var(\n--spectrum-checkbox-m-checkmark-size,var(--spectrum-alias-ui-icon-checkmark-size-100)\n);--spectrum-checkbox-height:var(\n--spectrum-checkbox-m-height,var(--spectrum-global-dimension-size-400)\n)}:host([size=l]){--spectrum-checkbox-text-padding-top:var(\n--spectrum-checkbox-l-text-padding-top\n);--spectrum-checkbox-box-border-radius:var(\n--spectrum-checkbox-l-box-border-radius,var(--spectrum-alias-border-radius-small)\n);--spectrum-checkbox-box-border-size:var(\n--spectrum-checkbox-l-box-border-size,var(--spectrum-alias-border-size-thick)\n);--spectrum-checkbox-box-size:var(\n--spectrum-checkbox-l-box-size,var(--spectrum-alias-control-two-size-l)\n);--spectrum-checkbox-text-size:var(\n--spectrum-checkbox-l-text-size,var(--spectrum-global-dimension-font-size-200)\n);--spectrum-checkbox-text-gap:var(\n--spectrum-checkbox-l-text-gap,var(--spectrum-global-dimension-size-130)\n);--spectrum-checkbox-text-font-style:var(\n--spectrum-checkbox-l-text-font-style,var(--spectrum-global-font-style-regular)\n);--spectrum-checkbox-text-font-weight:var(\n--spectrum-checkbox-l-text-font-weight,var(--spectrum-alias-body-text-font-weight)\n);--spectrum-checkbox-text-line-height:var(\n--spectrum-checkbox-l-text-line-height,var(--spectrum-alias-component-text-line-height)\n);--spectrum-checkbox-checkmark-size:var(\n--spectrum-checkbox-l-checkmark-size,var(--spectrum-alias-ui-icon-checkmark-size-200)\n);--spectrum-checkbox-height:var(\n--spectrum-checkbox-l-height,var(--spectrum-global-dimension-size-500)\n)}:host([size=xl]){--spectrum-checkbox-box-border-radius:var(\n--spectrum-checkbox-xl-box-border-radius,var(--spectrum-alias-border-radius-small)\n);--spectrum-checkbox-box-border-size:var(\n--spectrum-checkbox-xl-box-border-size,var(--spectrum-alias-border-size-thick)\n);--spectrum-checkbox-box-size:var(\n--spectrum-checkbox-xl-box-size,var(--spectrum-alias-control-two-size-xl)\n);--spectrum-checkbox-text-size:var(\n--spectrum-checkbox-xl-text-size,var(--spectrum-global-dimension-font-size-300)\n);--spectrum-checkbox-text-gap:var(\n--spectrum-checkbox-xl-text-gap,var(--spectrum-global-dimension-size-160)\n);--spectrum-checkbox-text-padding-top:var(\n--spectrum-checkbox-xl-text-padding-top,var(--spectrum-global-dimension-size-150)\n);--spectrum-checkbox-text-font-style:var(\n--spectrum-checkbox-xl-text-font-style,var(--spectrum-global-font-style-regular)\n);--spectrum-checkbox-text-font-weight:var(\n--spectrum-checkbox-xl-text-font-weight,var(--spectrum-alias-body-text-font-weight)\n);--spectrum-checkbox-text-line-height:var(\n--spectrum-checkbox-xl-text-line-height,var(--spectrum-alias-component-text-line-height)\n);--spectrum-checkbox-checkmark-size:var(\n--spectrum-checkbox-xl-checkmark-size,var(--spectrum-alias-ui-icon-checkmark-size-300)\n);--spectrum-checkbox-height:var(\n--spectrum-checkbox-xl-height,var(--spectrum-global-dimension-size-600)\n)}:host([indeterminate]) #box:before,:host([indeterminate]) #input:checked+#box:before{border-width:calc(var(--spectrum-checkbox-box-size)/2)}:host([indeterminate]) #box #checkmark,:host([indeterminate]) #input:checked+#box #checkmark{display:none}:host([indeterminate]) #box #partialCheckmark,:host([indeterminate]) #input:checked+#box #partialCheckmark{display:block;opacity:1;transform:scale(1)}:host([dir=ltr]) #label{text-align:left}:host([dir=rtl]) #label{text-align:right}:host([dir=ltr]) #label{margin-left:var(\n--spectrum-checkbox-text-gap\n)}:host([dir=rtl]) #label{margin-right:var(\n--spectrum-checkbox-text-gap\n)}#label{font-size:var(--spectrum-checkbox-text-size);font-style:var(--spectrum-checkbox-text-font-style);font-weight:var(--spectrum-checkbox-text-font-weight);line-height:var(--spectrum-checkbox-text-line-height);margin-top:var(\n--spectrum-checkbox-text-padding-top\n);transition:color var(--spectrum-global-animation-duration-100,.13s) ease-in-out}#box{box-sizing:border-box;flex-grow:0;flex-shrink:0;height:var(--spectrum-checkbox-box-size);margin:calc((var(--spectrum-checkbox-height) - var(--spectrum-checkbox-box-size))/2) 0;position:relative;width:var(--spectrum-checkbox-box-size)}#box:before{border-radius:var(--spectrum-checkbox-box-border-radius);border-style:solid;border-width:var(--spectrum-checkbox-box-border-size);box-sizing:border-box;content:\"\";display:block;height:var(--spectrum-checkbox-box-size);position:absolute;transition:border var(--spectrum-global-animation-duration-100,.13s) ease-in-out,box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out;width:var(--spectrum-checkbox-box-size);z-index:0}#box:after{border-radius:calc(var(--spectrum-checkbox-box-border-radius) + var(\n--spectrum-alias-focus-ring-gap,\nvar(--spectrum-global-dimension-static-size-25)\n));bottom:0;content:\"\";display:block;left:0;margin:var(\n--spectrum-alias-focus-ring-gap,var(--spectrum-global-dimension-static-size-25)\n);position:absolute;right:0;top:0;transform:translate(0);transition:box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-out,margin var(--spectrum-global-animation-duration-100,.13s) ease-out}:host([dir=ltr]) #checkmark,:host([dir=ltr]) #partialCheckmark{left:50%}:host([dir=rtl]) #checkmark,:host([dir=rtl]) #partialCheckmark{right:50%}#checkmark,#partialCheckmark{opacity:0;position:absolute;top:50%;transform:scale(0);transition:opacity var(--spectrum-global-animation-duration-100,.13s) ease-in-out,transform var(--spectrum-global-animation-duration-100,.13s) ease-in-out}:host([dir=ltr]) #checkmark{margin-left:calc(var(--spectrum-checkbox-checkmark-size)/-2)}:host([dir=rtl]) #checkmark{margin-right:calc(var(--spectrum-checkbox-checkmark-size)/-2)}#checkmark{margin-top:calc(var(--spectrum-checkbox-checkmark-size)/-2)}:host([dir=ltr]) #partialCheckmark{margin-left:calc(var(--spectrum-checkbox-checkmark-size)/-2)}:host([dir=rtl]) #partialCheckmark{margin-right:calc(var(--spectrum-checkbox-checkmark-size)/-2)}#partialCheckmark{display:none;margin-top:calc(var(--spectrum-checkbox-checkmark-size)/-2)}:host{color:var(\n--spectrum-checkbox-m-text-color,var(--spectrum-alias-component-text-color-default)\n)}#checkmark,#partialCheckmark{color:var(\n--spectrum-checkbox-m-checkmark-color,var(--spectrum-alias-toggle-icon-color-selected)\n)}#box:before{background-color:var(\n--spectrum-checkbox-m-box-background-color,var(--spectrum-global-color-gray-75)\n);border-color:var(\n--spectrum-checkbox-m-box-border-color,var(--spectrum-alias-toggle-border-color-default)\n);forced-color-adjust:none}#label{color:var(\n--spectrum-checkbox-m-text-color,var(--spectrum-alias-component-text-color-default)\n)}#input:checked+#box:before,:host([indeterminate]) #box:before{border-color:var(\n--spectrum-checkbox-m-box-border-color-selected,var(--spectrum-alias-toggle-background-color-default)\n)}:host(:hover) #input:checked+#box:before,:host(:hover[indeterminate]) #box:before{border-color:var(\n--spectrum-checkbox-m-box-border-color-selected-hover,var(--spectrum-alias-toggle-background-color-hover)\n)}:host(:active) #input:checked+#box:before,:host(:active[indeterminate]) #box:before{border-color:var(\n--spectrum-checkbox-m-box-border-color-selected-down,var(--spectrum-alias-toggle-background-color-down)\n)}:host{border-color:var(\n--spectrum-checkbox-m-box-border-color,var(--spectrum-alias-toggle-border-color-default)\n)}:host(:hover) #box:before{border-color:var(\n--spectrum-checkbox-m-box-border-color-hover,var(--spectrum-alias-toggle-border-color-hover)\n)}:host(:hover) #label{color:var(\n--spectrum-checkbox-m-text-color-hover,var(--spectrum-alias-component-text-color-hover)\n)}:host(:active) #box:before{border-color:var(\n--spectrum-checkbox-m-box-border-color-down,var(--spectrum-alias-toggle-border-color-down)\n)}:host(:active) #label{color:var(\n--spectrum-checkbox-m-text-color-down,var(--spectrum-alias-component-text-color-down)\n)}:host([readonly]){border-color:var(\n--spectrum-checkbox-m-box-border-color,var(--spectrum-alias-toggle-border-color-default)\n)}:host([readonly]:hover) #box:before{border-color:var(\n--spectrum-checkbox-m-box-border-color-hover,var(--spectrum-alias-toggle-border-color-hover)\n)}:host([readonly]:hover) #label{color:var(\n--spectrum-checkbox-m-text-color-hover,var(--spectrum-alias-component-text-color-hover)\n)}:host([readonly]:active) #box:before{border-color:var(\n--spectrum-checkbox-m-box-border-color-down,var(--spectrum-alias-toggle-border-color-down)\n)}:host([readonly]:active) #label{color:var(\n--spectrum-checkbox-m-text-color-down,var(--spectrum-alias-component-text-color-down)\n)}:host([readonly]) #input:checked:disabled+#box:before,:host([readonly]) #input:disabled+#box:before{background-color:var(\n--spectrum-checkbox-m-box-background-color,var(--spectrum-global-color-gray-75)\n);border-color:var(\n--spectrum-checkbox-m-box-border-color,var(--spectrum-alias-toggle-border-color-default)\n)}:host([readonly]) #input:checked:disabled~#label,:host([readonly]) #input:disabled~#label{color:var(\n--spectrum-checkbox-m-text-color,var(--spectrum-alias-component-text-color-default)\n);forced-color-adjust:none}#input:disabled+#box:before,:host([dir]) #input:checked:disabled+#box:before{background-color:var(\n--spectrum-checkbox-m-box-background-color-disabled,var(--spectrum-global-color-gray-75)\n);border-color:var(\n--spectrum-checkbox-m-box-border-color-disabled,var(--spectrum-global-color-gray-400)\n)}#input:checked:disabled~#label,#input:disabled~#label{color:var(\n--spectrum-checkbox-m-text-color-disabled,var(--spectrum-alias-component-text-color-disabled)\n);forced-color-adjust:none}#input.focus-visible+#box:before{border-color:var(\n--spectrum-checkbox-m-box-border-color-key-focus,var(--spectrum-alias-toggle-border-color-key-focus)\n)}#input:focus-visible+#box:before{border-color:var(\n--spectrum-checkbox-m-box-border-color-key-focus,var(--spectrum-alias-toggle-border-color-key-focus)\n)}#input.focus-visible+#box:after{box-shadow:0 0 0 var(\n--spectrum-checkbox-m-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n) var(\n--spectrum-checkbox-m-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color)\n);forced-color-adjust:none}#input:focus-visible+#box:after{box-shadow:0 0 0 var(\n--spectrum-checkbox-m-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n) var(\n--spectrum-checkbox-m-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color)\n);forced-color-adjust:none}#input:checked.focus-visible+#box:before,:host([indeterminate]) #input.focus-visible+#box:before{border-color:var(\n--spectrum-checkbox-m-box-border-color-selected-key-focus,var(--spectrum-alias-toggle-background-color-key-focus)\n)}#input:checked:focus-visible+#box:before,:host([indeterminate]) #input:focus-visible+#box:before{border-color:var(\n--spectrum-checkbox-m-box-border-color-selected-key-focus,var(--spectrum-alias-toggle-background-color-key-focus)\n)}#input.focus-visible~#label{color:var(\n--spectrum-checkbox-m-text-color-key-focus,var(--spectrum-alias-component-text-color-key-focus)\n)}#input:focus-visible~#label{color:var(\n--spectrum-checkbox-m-text-color-key-focus,var(--spectrum-alias-component-text-color-key-focus)\n)}:host([emphasized]) #input:checked+#box:before,:host([emphasized][indeterminate]) #box:before,:host([emphasized][indeterminate]) #input.focus-visible+#box:before{border-color:var(\n--spectrum-checkbox-m-emphasized-box-border-color-selected,var(\n--spectrum-alias-toggle-background-color-emphasized-selected-default\n)\n)}:host([emphasized]) #input:checked+#box:before,:host([emphasized][indeterminate]) #box:before,:host([emphasized][indeterminate]) #input:focus-visible+#box:before{border-color:var(\n--spectrum-checkbox-m-emphasized-box-border-color-selected,var(\n--spectrum-alias-toggle-background-color-emphasized-selected-default\n)\n)}:host([emphasized]:hover) #input:checked+#box:before,:host([emphasized][indeterminate]:hover) #box:before{border-color:var(\n--spectrum-checkbox-m-emphasized-box-border-color-selected-hover,var(--spectrum-alias-toggle-background-color-emphasized-selected-hover)\n)}:host([emphasized]:active) #input:checked+#box:before,:host([emphasized][indeterminate]:active) #box:before{border-color:var(\n--spectrum-checkbox-m-emphasized-box-border-color-selected-down,var(--spectrum-alias-toggle-background-color-emphasized-selected-down)\n)}:host([invalid][dir]) #box:before,:host([invalid][dir]) #input:checked+#box:before{border-color:var(\n--spectrum-checkbox-m-box-border-color-error,var(--spectrum-global-color-red-500)\n)}:host([invalid]) #label{color:var(\n--spectrum-checkbox-m-text-color-error,var(--spectrum-alias-component-text-color-error-default)\n)}:host([invalid]) #input.focus-visible+#box:before,:host([invalid][indeterminate]) #input.focus-visible+#box:before{border-color:var(\n--spectrum-checkbox-m-box-border-color-error-hover,var(--spectrum-global-color-red-600)\n)}:host([invalid]) #input:focus-visible+#box:before,:host([invalid][indeterminate]) #input:focus-visible+#box:before{border-color:var(\n--spectrum-checkbox-m-box-border-color-error-hover,var(--spectrum-global-color-red-600)\n)}:host([invalid]) #input.focus-visible~#label,:host([invalid][indeterminate]) #input.focus-visible~#label{color:var(\n--spectrum-checkbox-m-text-color-error-hover,var(--spectrum-alias-component-text-color-error-hover)\n)}:host([invalid]) #input:focus-visible~#label,:host([invalid][indeterminate]) #input:focus-visible~#label{color:var(\n--spectrum-checkbox-m-text-color-error-hover,var(--spectrum-alias-component-text-color-error-hover)\n)}:host([invalid]:hover) #box:before,:host([invalid][dir]:hover) #input:checked+#box:before{border-color:var(\n--spectrum-checkbox-m-box-border-color-error-hover,var(--spectrum-global-color-red-600)\n)}:host([invalid]:hover) #label{color:var(\n--spectrum-checkbox-m-text-color-error-hover,var(--spectrum-alias-component-text-color-error-hover)\n)}:host([invalid]:active) #box:before,:host([invalid]:active) #input:checked+#box:before{border-color:var(\n--spectrum-checkbox-m-box-border-color-error-down,var(--spectrum-global-color-red-700)\n)}:host([invalid]:active) #label{color:var(\n--spectrum-checkbox-m-text-color-error-down,var(--spectrum-alias-component-text-color-error-down)\n)}@media (forced-colors:active){#input.focus-visible+#box{forced-color-adjust:none;outline-color:var(\n--spectrum-checkbox-m-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color)\n);outline-offset:var(\n--spectrum-checkbox-m-focus-ring-gap-key-focus,var(--spectrum-alias-focus-ring-gap)\n);outline-style:auto;outline-width:var(\n--spectrum-checkbox-m-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n)}#input:focus-visible+#box{forced-color-adjust:none;outline-color:var(\n--spectrum-checkbox-m-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color)\n);outline-offset:var(\n--spectrum-checkbox-m-focus-ring-gap-key-focus,var(--spectrum-alias-focus-ring-gap)\n);outline-style:auto;outline-width:var(\n--spectrum-checkbox-m-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n)}:host{--spectrum-checkbox-m-box-background-color-disabled:ButtonFace;--spectrum-checkbox-m-box-background-color:ButtonFace;--spectrum-checkbox-m-box-border-color-disabled:GrayText;--spectrum-checkbox-m-box-border-color-down:Highlight;--spectrum-checkbox-m-box-border-color-error-down:Highlight;--spectrum-checkbox-m-box-border-color-hover:Highlight;--spectrum-checkbox-m-box-border-color-key-focus:Highlight;--spectrum-checkbox-m-box-border-color-selected-down:Highlight;--spectrum-checkbox-m-box-border-color-selected-hover:Highlight;--spectrum-checkbox-m-box-border-color-selected-key-focus:Highlight;--spectrum-checkbox-m-box-border-color-selected:Highlight;--spectrum-checkbox-m-box-border-color:ButtonText;--spectrum-checkbox-m-emphasized-box-border-color-selected-down:Highlight;--spectrum-checkbox-m-emphasized-box-border-color-selected-hover:Highlight;--spectrum-checkbox-m-emphasized-box-border-color-selected:Highlight;--spectrum-checkbox-m-focus-ring-color-key-focus:FieldText;--spectrum-checkbox-m-text-color-disabled:GrayText;--spectrum-checkbox-m-text-color-down:FieldText;--spectrum-checkbox-m-text-color-error-down:FieldText;--spectrum-checkbox-m-text-color-error-hover:FieldText;--spectrum-checkbox-m-checkmark-color:HighlightText;--spectrum-checkbox-m-focus-ring-gap-key-focus:var(\n--spectrum-global-dimension-static-size-25,2px\n);--spectrum-checkbox-m-focus-ring-size:var(\n--spectrum-global-dimension-static-size-40,3px\n);--spectrum-checkbox-m-box-border-color-error:FieldText;--spectrum-checkbox-m-box-border-color-error-hover:FieldText;--spectrum-checkbox-m-text-color-error:FieldText;--spectrum-checkbox-m-text-color-hover:FieldText;--spectrum-checkbox-m-text-color-key-focus:FieldText;--spectrum-checkbox-m-text-color:FieldText}:host([invalid][dir]) #box:before{border-color:var(\n--spectrum-checkbox-m-box-border-color,var(--spectrum-alias-toggle-border-color-default)\n)}:host([invalid][indeterminate]) #box:before{border-color:var(\n--spectrum-checkbox-m-box-border-color-error,var(--spectrum-global-color-red-500)\n)}:host([invalid][dir]) #input:checked+#box:before{border-color:var(\n--spectrum-checkbox-m-box-border-color-error,var(--spectrum-global-color-red-500)\n)}}\n`;\nexport default styles;"]}
1
+ {
2
+ "version": 3,
3
+ "sources": ["spectrum-checkbox.css.ts"],
4
+ "sourcesContent": ["/*\nCopyright 2022 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 { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{align-items:flex-start;display:inline-flex;max-width:100%;min-height:var(--spectrum-checkbox-height);position:relative;vertical-align:top}#input{box-sizing:border-box;cursor:pointer;font-family:inherit;font-size:100%;height:100%;line-height:1.15;margin:0;opacity:.0001;overflow:visible;padding:0;position:absolute;width:100%;z-index:1}#input:disabled{cursor:default}#input:checked+#box:before{border-width:calc(var(--spectrum-checkbox-box-size)/2)}#input:checked+#box #checkmark{opacity:1;transform:scale(1)}#input.focus-visible+#box:after{margin:calc(var(\n--spectrum-alias-focus-ring-gap,\nvar(--spectrum-global-dimension-static-size-25)\n)*-1)}#input:focus-visible+#box:after{margin:calc(var(\n--spectrum-alias-focus-ring-gap,\nvar(--spectrum-global-dimension-static-size-25)\n)*-1)}:host([size=s]){--spectrum-checkbox-box-border-radius:var(\n--spectrum-checkbox-s-box-border-radius,var(--spectrum-alias-border-radius-small)\n);--spectrum-checkbox-box-border-size:var(\n--spectrum-checkbox-s-box-border-size,var(--spectrum-alias-border-size-thick)\n);--spectrum-checkbox-box-size:var(\n--spectrum-checkbox-s-box-size,var(--spectrum-alias-control-two-size-s)\n);--spectrum-checkbox-text-size:var(\n--spectrum-checkbox-s-text-size,var(--spectrum-global-dimension-font-size-75)\n);--spectrum-checkbox-text-gap:var(\n--spectrum-checkbox-s-text-gap,var(--spectrum-global-dimension-size-115)\n);--spectrum-checkbox-text-padding-top:var(\n--spectrum-checkbox-s-text-padding-top,var(--spectrum-global-dimension-static-size-50)\n);--spectrum-checkbox-text-font-style:var(\n--spectrum-checkbox-s-text-font-style,var(--spectrum-global-font-style-regular)\n);--spectrum-checkbox-text-font-weight:var(\n--spectrum-checkbox-s-text-font-weight,var(--spectrum-alias-body-text-font-weight)\n);--spectrum-checkbox-text-line-height:var(\n--spectrum-checkbox-s-text-line-height,var(--spectrum-alias-component-text-line-height)\n);--spectrum-checkbox-checkmark-size:var(\n--spectrum-checkbox-s-checkmark-size,var(--spectrum-alias-ui-icon-checkmark-size-75)\n);--spectrum-checkbox-height:var(\n--spectrum-checkbox-s-height,var(--spectrum-global-dimension-size-300)\n)}:host([size=m]){--spectrum-checkbox-box-border-radius:var(\n--spectrum-checkbox-m-box-border-radius,var(--spectrum-alias-border-radius-small)\n);--spectrum-checkbox-box-border-size:var(\n--spectrum-checkbox-m-box-border-size,var(--spectrum-alias-border-size-thick)\n);--spectrum-checkbox-box-size:var(\n--spectrum-checkbox-m-box-size,var(--spectrum-alias-control-two-size-m)\n);--spectrum-checkbox-text-size:var(\n--spectrum-checkbox-m-text-size,var(--spectrum-global-dimension-font-size-100)\n);--spectrum-checkbox-text-gap:var(\n--spectrum-checkbox-m-text-gap,var(--spectrum-global-dimension-size-125)\n);--spectrum-checkbox-text-padding-top:var(\n--spectrum-checkbox-m-text-padding-top,var(--spectrum-global-dimension-size-75)\n);--spectrum-checkbox-text-font-style:var(\n--spectrum-checkbox-m-text-font-style,var(--spectrum-global-font-style-regular)\n);--spectrum-checkbox-text-font-weight:var(\n--spectrum-checkbox-m-text-font-weight,var(--spectrum-alias-body-text-font-weight)\n);--spectrum-checkbox-text-line-height:var(\n--spectrum-checkbox-m-text-line-height,var(--spectrum-alias-component-text-line-height)\n);--spectrum-checkbox-checkmark-size:var(\n--spectrum-checkbox-m-checkmark-size,var(--spectrum-alias-ui-icon-checkmark-size-100)\n);--spectrum-checkbox-height:var(\n--spectrum-checkbox-m-height,var(--spectrum-global-dimension-size-400)\n)}:host([size=l]){--spectrum-checkbox-text-padding-top:var(\n--spectrum-checkbox-l-text-padding-top\n);--spectrum-checkbox-box-border-radius:var(\n--spectrum-checkbox-l-box-border-radius,var(--spectrum-alias-border-radius-small)\n);--spectrum-checkbox-box-border-size:var(\n--spectrum-checkbox-l-box-border-size,var(--spectrum-alias-border-size-thick)\n);--spectrum-checkbox-box-size:var(\n--spectrum-checkbox-l-box-size,var(--spectrum-alias-control-two-size-l)\n);--spectrum-checkbox-text-size:var(\n--spectrum-checkbox-l-text-size,var(--spectrum-global-dimension-font-size-200)\n);--spectrum-checkbox-text-gap:var(\n--spectrum-checkbox-l-text-gap,var(--spectrum-global-dimension-size-130)\n);--spectrum-checkbox-text-font-style:var(\n--spectrum-checkbox-l-text-font-style,var(--spectrum-global-font-style-regular)\n);--spectrum-checkbox-text-font-weight:var(\n--spectrum-checkbox-l-text-font-weight,var(--spectrum-alias-body-text-font-weight)\n);--spectrum-checkbox-text-line-height:var(\n--spectrum-checkbox-l-text-line-height,var(--spectrum-alias-component-text-line-height)\n);--spectrum-checkbox-checkmark-size:var(\n--spectrum-checkbox-l-checkmark-size,var(--spectrum-alias-ui-icon-checkmark-size-200)\n);--spectrum-checkbox-height:var(\n--spectrum-checkbox-l-height,var(--spectrum-global-dimension-size-500)\n)}:host([size=xl]){--spectrum-checkbox-box-border-radius:var(\n--spectrum-checkbox-xl-box-border-radius,var(--spectrum-alias-border-radius-small)\n);--spectrum-checkbox-box-border-size:var(\n--spectrum-checkbox-xl-box-border-size,var(--spectrum-alias-border-size-thick)\n);--spectrum-checkbox-box-size:var(\n--spectrum-checkbox-xl-box-size,var(--spectrum-alias-control-two-size-xl)\n);--spectrum-checkbox-text-size:var(\n--spectrum-checkbox-xl-text-size,var(--spectrum-global-dimension-font-size-300)\n);--spectrum-checkbox-text-gap:var(\n--spectrum-checkbox-xl-text-gap,var(--spectrum-global-dimension-size-160)\n);--spectrum-checkbox-text-padding-top:var(\n--spectrum-checkbox-xl-text-padding-top,var(--spectrum-global-dimension-size-150)\n);--spectrum-checkbox-text-font-style:var(\n--spectrum-checkbox-xl-text-font-style,var(--spectrum-global-font-style-regular)\n);--spectrum-checkbox-text-font-weight:var(\n--spectrum-checkbox-xl-text-font-weight,var(--spectrum-alias-body-text-font-weight)\n);--spectrum-checkbox-text-line-height:var(\n--spectrum-checkbox-xl-text-line-height,var(--spectrum-alias-component-text-line-height)\n);--spectrum-checkbox-checkmark-size:var(\n--spectrum-checkbox-xl-checkmark-size,var(--spectrum-alias-ui-icon-checkmark-size-300)\n);--spectrum-checkbox-height:var(\n--spectrum-checkbox-xl-height,var(--spectrum-global-dimension-size-600)\n)}:host([indeterminate]) #box:before,:host([indeterminate]) #input:checked+#box:before{border-width:calc(var(--spectrum-checkbox-box-size)/2)}:host([indeterminate]) #box #checkmark,:host([indeterminate]) #input:checked+#box #checkmark{display:none}:host([indeterminate]) #box #partialCheckmark,:host([indeterminate]) #input:checked+#box #partialCheckmark{display:block;opacity:1;transform:scale(1)}:host([dir=ltr]) #label{text-align:left}:host([dir=rtl]) #label{text-align:right}:host([dir=ltr]) #label{margin-left:var(\n--spectrum-checkbox-text-gap\n)}:host([dir=rtl]) #label{margin-right:var(\n--spectrum-checkbox-text-gap\n)}#label{font-size:var(--spectrum-checkbox-text-size);font-style:var(--spectrum-checkbox-text-font-style);font-weight:var(--spectrum-checkbox-text-font-weight);line-height:var(--spectrum-checkbox-text-line-height);margin-top:var(\n--spectrum-checkbox-text-padding-top\n);transition:color var(--spectrum-global-animation-duration-100,.13s) ease-in-out}#box{box-sizing:border-box;flex-grow:0;flex-shrink:0;height:var(--spectrum-checkbox-box-size);margin:calc((var(--spectrum-checkbox-height) - var(--spectrum-checkbox-box-size))/2) 0;position:relative;width:var(--spectrum-checkbox-box-size)}#box:before{border-radius:var(--spectrum-checkbox-box-border-radius);border-style:solid;border-width:var(--spectrum-checkbox-box-border-size);box-sizing:border-box;content:\"\";display:block;height:var(--spectrum-checkbox-box-size);position:absolute;transition:border var(--spectrum-global-animation-duration-100,.13s) ease-in-out,box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out;width:var(--spectrum-checkbox-box-size);z-index:0}#box:after{border-radius:calc(var(--spectrum-checkbox-box-border-radius) + var(\n--spectrum-alias-focus-ring-gap,\nvar(--spectrum-global-dimension-static-size-25)\n));bottom:0;content:\"\";display:block;left:0;margin:var(\n--spectrum-alias-focus-ring-gap,var(--spectrum-global-dimension-static-size-25)\n);position:absolute;right:0;top:0;transform:translate(0);transition:box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-out,margin var(--spectrum-global-animation-duration-100,.13s) ease-out}:host([dir=ltr]) #checkmark,:host([dir=ltr]) #partialCheckmark{left:50%}:host([dir=rtl]) #checkmark,:host([dir=rtl]) #partialCheckmark{right:50%}#checkmark,#partialCheckmark{opacity:0;position:absolute;top:50%;transform:scale(0);transition:opacity var(--spectrum-global-animation-duration-100,.13s) ease-in-out,transform var(--spectrum-global-animation-duration-100,.13s) ease-in-out}:host([dir=ltr]) #checkmark{margin-left:calc(var(--spectrum-checkbox-checkmark-size)/-2)}:host([dir=rtl]) #checkmark{margin-right:calc(var(--spectrum-checkbox-checkmark-size)/-2)}#checkmark{margin-top:calc(var(--spectrum-checkbox-checkmark-size)/-2)}:host([dir=ltr]) #partialCheckmark{margin-left:calc(var(--spectrum-checkbox-checkmark-size)/-2)}:host([dir=rtl]) #partialCheckmark{margin-right:calc(var(--spectrum-checkbox-checkmark-size)/-2)}#partialCheckmark{display:none;margin-top:calc(var(--spectrum-checkbox-checkmark-size)/-2)}:host{color:var(\n--spectrum-checkbox-m-text-color,var(--spectrum-alias-component-text-color-default)\n)}#checkmark,#partialCheckmark{color:var(\n--spectrum-checkbox-m-checkmark-color,var(--spectrum-alias-toggle-icon-color-selected)\n)}#box:before{background-color:var(\n--spectrum-checkbox-m-box-background-color,var(--spectrum-global-color-gray-75)\n);border-color:var(\n--spectrum-checkbox-m-box-border-color,var(--spectrum-alias-toggle-border-color-default)\n);forced-color-adjust:none}#label{color:var(\n--spectrum-checkbox-m-text-color,var(--spectrum-alias-component-text-color-default)\n)}#input:checked+#box:before,:host([indeterminate]) #box:before{border-color:var(\n--spectrum-checkbox-m-box-border-color-selected,var(--spectrum-alias-toggle-background-color-default)\n)}:host(:hover) #input:checked+#box:before,:host(:hover[indeterminate]) #box:before{border-color:var(\n--spectrum-checkbox-m-box-border-color-selected-hover,var(--spectrum-alias-toggle-background-color-hover)\n)}:host(:active) #input:checked+#box:before,:host(:active[indeterminate]) #box:before{border-color:var(\n--spectrum-checkbox-m-box-border-color-selected-down,var(--spectrum-alias-toggle-background-color-down)\n)}:host{border-color:var(\n--spectrum-checkbox-m-box-border-color,var(--spectrum-alias-toggle-border-color-default)\n)}:host(:hover) #box:before{border-color:var(\n--spectrum-checkbox-m-box-border-color-hover,var(--spectrum-alias-toggle-border-color-hover)\n)}:host(:hover) #label{color:var(\n--spectrum-checkbox-m-text-color-hover,var(--spectrum-alias-component-text-color-hover)\n)}:host(:active) #box:before{border-color:var(\n--spectrum-checkbox-m-box-border-color-down,var(--spectrum-alias-toggle-border-color-down)\n)}:host(:active) #label{color:var(\n--spectrum-checkbox-m-text-color-down,var(--spectrum-alias-component-text-color-down)\n)}:host([readonly]){border-color:var(\n--spectrum-checkbox-m-box-border-color,var(--spectrum-alias-toggle-border-color-default)\n)}:host([readonly]:hover) #box:before{border-color:var(\n--spectrum-checkbox-m-box-border-color-hover,var(--spectrum-alias-toggle-border-color-hover)\n)}:host([readonly]:hover) #label{color:var(\n--spectrum-checkbox-m-text-color-hover,var(--spectrum-alias-component-text-color-hover)\n)}:host([readonly]:active) #box:before{border-color:var(\n--spectrum-checkbox-m-box-border-color-down,var(--spectrum-alias-toggle-border-color-down)\n)}:host([readonly]:active) #label{color:var(\n--spectrum-checkbox-m-text-color-down,var(--spectrum-alias-component-text-color-down)\n)}:host([readonly]) #input:checked:disabled+#box:before,:host([readonly]) #input:disabled+#box:before{background-color:var(\n--spectrum-checkbox-m-box-background-color,var(--spectrum-global-color-gray-75)\n);border-color:var(\n--spectrum-checkbox-m-box-border-color,var(--spectrum-alias-toggle-border-color-default)\n)}:host([readonly]) #input:checked:disabled~#label,:host([readonly]) #input:disabled~#label{color:var(\n--spectrum-checkbox-m-text-color,var(--spectrum-alias-component-text-color-default)\n);forced-color-adjust:none}#input:disabled+#box:before,:host([dir]) #input:checked:disabled+#box:before{background-color:var(\n--spectrum-checkbox-m-box-background-color-disabled,var(--spectrum-global-color-gray-75)\n);border-color:var(\n--spectrum-checkbox-m-box-border-color-disabled,var(--spectrum-global-color-gray-400)\n)}#input:checked:disabled~#label,#input:disabled~#label{color:var(\n--spectrum-checkbox-m-text-color-disabled,var(--spectrum-alias-component-text-color-disabled)\n);forced-color-adjust:none}#input.focus-visible+#box:before{border-color:var(\n--spectrum-checkbox-m-box-border-color-key-focus,var(--spectrum-alias-toggle-border-color-key-focus)\n)}#input:focus-visible+#box:before{border-color:var(\n--spectrum-checkbox-m-box-border-color-key-focus,var(--spectrum-alias-toggle-border-color-key-focus)\n)}#input.focus-visible+#box:after{box-shadow:0 0 0 var(\n--spectrum-checkbox-m-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n) var(\n--spectrum-checkbox-m-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color)\n);forced-color-adjust:none}#input:focus-visible+#box:after{box-shadow:0 0 0 var(\n--spectrum-checkbox-m-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n) var(\n--spectrum-checkbox-m-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color)\n);forced-color-adjust:none}#input:checked.focus-visible+#box:before,:host([indeterminate]) #input.focus-visible+#box:before{border-color:var(\n--spectrum-checkbox-m-box-border-color-selected-key-focus,var(--spectrum-alias-toggle-background-color-key-focus)\n)}#input:checked:focus-visible+#box:before,:host([indeterminate]) #input:focus-visible+#box:before{border-color:var(\n--spectrum-checkbox-m-box-border-color-selected-key-focus,var(--spectrum-alias-toggle-background-color-key-focus)\n)}#input.focus-visible~#label{color:var(\n--spectrum-checkbox-m-text-color-key-focus,var(--spectrum-alias-component-text-color-key-focus)\n)}#input:focus-visible~#label{color:var(\n--spectrum-checkbox-m-text-color-key-focus,var(--spectrum-alias-component-text-color-key-focus)\n)}:host([emphasized]) #input:checked+#box:before,:host([emphasized][indeterminate]) #box:before,:host([emphasized][indeterminate]) #input.focus-visible+#box:before{border-color:var(\n--spectrum-checkbox-m-emphasized-box-border-color-selected,var(\n--spectrum-alias-toggle-background-color-emphasized-selected-default\n)\n)}:host([emphasized]) #input:checked+#box:before,:host([emphasized][indeterminate]) #box:before,:host([emphasized][indeterminate]) #input:focus-visible+#box:before{border-color:var(\n--spectrum-checkbox-m-emphasized-box-border-color-selected,var(\n--spectrum-alias-toggle-background-color-emphasized-selected-default\n)\n)}:host([emphasized]:hover) #input:checked+#box:before,:host([emphasized][indeterminate]:hover) #box:before{border-color:var(\n--spectrum-checkbox-m-emphasized-box-border-color-selected-hover,var(--spectrum-alias-toggle-background-color-emphasized-selected-hover)\n)}:host([emphasized]:active) #input:checked+#box:before,:host([emphasized][indeterminate]:active) #box:before{border-color:var(\n--spectrum-checkbox-m-emphasized-box-border-color-selected-down,var(--spectrum-alias-toggle-background-color-emphasized-selected-down)\n)}:host([invalid][dir]) #box:before,:host([invalid][dir]) #input:checked+#box:before{border-color:var(\n--spectrum-checkbox-m-box-border-color-error,var(--spectrum-global-color-red-500)\n)}:host([invalid]) #label{color:var(\n--spectrum-checkbox-m-text-color-error,var(--spectrum-alias-component-text-color-error-default)\n)}:host([invalid]) #input.focus-visible+#box:before,:host([invalid][indeterminate]) #input.focus-visible+#box:before{border-color:var(\n--spectrum-checkbox-m-box-border-color-error-hover,var(--spectrum-global-color-red-600)\n)}:host([invalid]) #input:focus-visible+#box:before,:host([invalid][indeterminate]) #input:focus-visible+#box:before{border-color:var(\n--spectrum-checkbox-m-box-border-color-error-hover,var(--spectrum-global-color-red-600)\n)}:host([invalid]) #input.focus-visible~#label,:host([invalid][indeterminate]) #input.focus-visible~#label{color:var(\n--spectrum-checkbox-m-text-color-error-hover,var(--spectrum-alias-component-text-color-error-hover)\n)}:host([invalid]) #input:focus-visible~#label,:host([invalid][indeterminate]) #input:focus-visible~#label{color:var(\n--spectrum-checkbox-m-text-color-error-hover,var(--spectrum-alias-component-text-color-error-hover)\n)}:host([invalid]:hover) #box:before,:host([invalid][dir]:hover) #input:checked+#box:before{border-color:var(\n--spectrum-checkbox-m-box-border-color-error-hover,var(--spectrum-global-color-red-600)\n)}:host([invalid]:hover) #label{color:var(\n--spectrum-checkbox-m-text-color-error-hover,var(--spectrum-alias-component-text-color-error-hover)\n)}:host([invalid]:active) #box:before,:host([invalid]:active) #input:checked+#box:before{border-color:var(\n--spectrum-checkbox-m-box-border-color-error-down,var(--spectrum-global-color-red-700)\n)}:host([invalid]:active) #label{color:var(\n--spectrum-checkbox-m-text-color-error-down,var(--spectrum-alias-component-text-color-error-down)\n)}@media (forced-colors:active){#input.focus-visible+#box{forced-color-adjust:none;outline-color:var(\n--spectrum-checkbox-m-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color)\n);outline-offset:var(\n--spectrum-checkbox-m-focus-ring-gap-key-focus,var(--spectrum-alias-focus-ring-gap)\n);outline-style:auto;outline-width:var(\n--spectrum-checkbox-m-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n)}#input:focus-visible+#box{forced-color-adjust:none;outline-color:var(\n--spectrum-checkbox-m-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color)\n);outline-offset:var(\n--spectrum-checkbox-m-focus-ring-gap-key-focus,var(--spectrum-alias-focus-ring-gap)\n);outline-style:auto;outline-width:var(\n--spectrum-checkbox-m-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n)}:host{--spectrum-checkbox-m-box-background-color-disabled:ButtonFace;--spectrum-checkbox-m-box-background-color:ButtonFace;--spectrum-checkbox-m-box-border-color-disabled:GrayText;--spectrum-checkbox-m-box-border-color-down:Highlight;--spectrum-checkbox-m-box-border-color-error-down:Highlight;--spectrum-checkbox-m-box-border-color-hover:Highlight;--spectrum-checkbox-m-box-border-color-key-focus:Highlight;--spectrum-checkbox-m-box-border-color-selected-down:Highlight;--spectrum-checkbox-m-box-border-color-selected-hover:Highlight;--spectrum-checkbox-m-box-border-color-selected-key-focus:Highlight;--spectrum-checkbox-m-box-border-color-selected:Highlight;--spectrum-checkbox-m-box-border-color:ButtonText;--spectrum-checkbox-m-emphasized-box-border-color-selected-down:Highlight;--spectrum-checkbox-m-emphasized-box-border-color-selected-hover:Highlight;--spectrum-checkbox-m-emphasized-box-border-color-selected:Highlight;--spectrum-checkbox-m-focus-ring-color-key-focus:FieldText;--spectrum-checkbox-m-text-color-disabled:GrayText;--spectrum-checkbox-m-text-color-down:FieldText;--spectrum-checkbox-m-text-color-error-down:FieldText;--spectrum-checkbox-m-text-color-error-hover:FieldText;--spectrum-checkbox-m-checkmark-color:HighlightText;--spectrum-checkbox-m-focus-ring-gap-key-focus:var(\n--spectrum-global-dimension-static-size-25,2px\n);--spectrum-checkbox-m-focus-ring-size:var(\n--spectrum-global-dimension-static-size-40,3px\n);--spectrum-checkbox-m-box-border-color-error:FieldText;--spectrum-checkbox-m-box-border-color-error-hover:FieldText;--spectrum-checkbox-m-text-color-error:FieldText;--spectrum-checkbox-m-text-color-hover:FieldText;--spectrum-checkbox-m-text-color-key-focus:FieldText;--spectrum-checkbox-m-text-color:FieldText}:host([invalid][dir]) #box:before{border-color:var(\n--spectrum-checkbox-m-box-border-color,var(--spectrum-alias-toggle-border-color-default)\n)}:host([invalid][indeterminate]) #box:before{border-color:var(\n--spectrum-checkbox-m-box-border-color-error,var(--spectrum-global-color-red-500)\n)}:host([invalid][dir]) #input:checked+#box:before{border-color:var(\n--spectrum-checkbox-m-box-border-color-error,var(--spectrum-global-color-red-500)\n)}}\n`;\nexport default styles;"],
5
+ "mappings": "AAWA;AACA,MAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAsOf,eAAe;",
6
+ "names": []
7
+ }
package/stories/checkbox-sizes.stories.js CHANGED
@@ -1,26 +1,21 @@
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';
1
+ import { html } from "@spectrum-web-components/base";
2
+ import "@spectrum-web-components/checkbox/sp-checkbox.js";
14
3
  export default {
15
- component: 'sp-checkbox',
16
- title: 'Checkbox/Sizes',
17
- argTypes: {
18
- onClick: { action: 'click' },
19
- onChange: { action: 'change' },
20
- },
4
+ component: "sp-checkbox",
5
+ title: "Checkbox/Sizes",
6
+ argTypes: {
7
+ onClick: { action: "click" },
8
+ onChange: { action: "change" }
9
+ }
21
10
  };
22
- const checkbox = ({ size, checked, indeterminate, onClick, onChange, }) => {
23
- return html `
11
+ const checkbox = ({
12
+ size,
13
+ checked,
14
+ indeterminate,
15
+ onClick,
16
+ onChange
17
+ }) => {
18
+ return html`
24
19
  <sp-checkbox
25
20
  size=${size}
26
21
  ?checked=${checked}
@@ -32,16 +27,16 @@ const checkbox = ({ size, checked, indeterminate, onClick, onChange, }) => {
32
27
  </sp-checkbox>
33
28
  `;
34
29
  };
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
30
+ export const s = (args) => checkbox({ ...args, size: "s" });
31
+ export const sChecked = (args) => checkbox({ ...args, size: "s", checked: true });
32
+ export const sIndeterminate = (args) => checkbox({ ...args, size: "s", indeterminate: true });
33
+ export const m = (args) => checkbox({ ...args, size: "m" });
34
+ export const mChecked = (args) => checkbox({ ...args, size: "m", checked: true });
35
+ export const mIndeterminate = (args) => checkbox({ ...args, size: "m", indeterminate: true });
36
+ export const l = (args) => checkbox({ ...args, size: "l" });
37
+ export const lChecked = (args) => checkbox({ ...args, size: "l", checked: true });
38
+ export const lIndeterminate = (args) => checkbox({ ...args, size: "l", indeterminate: true });
39
+ export const XL = (args) => checkbox({ ...args, size: "xl" });
40
+ export const XLChecked = (args) => checkbox({ ...args, size: "xl", checked: true });
41
+ export const XLIndeterminate = (args) => checkbox({ ...args, size: "xl", indeterminate: true });
42
+ //# sourceMappingURL=checkbox-sizes.stories.js.map
package/stories/checkbox-sizes.stories.js.map CHANGED
@@ -1 +1,7 @@
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"]}
1
+ {
2
+ "version": 3,
3
+ "sources": ["checkbox-sizes.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 { html, TemplateResult } from '@spectrum-web-components/base';\n\nimport '@spectrum-web-components/checkbox/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"],
5
+ "mappings": "AAWA;AAEA;AAEA,eAAe;AAAA,EACX,WAAW;AAAA,EACX,OAAO;AAAA,EACP,UAAU;AAAA,IACN,SAAS,EAAE,QAAQ,QAAQ;AAAA,IAC3B,UAAU,EAAE,QAAQ,SAAS;AAAA,EACjC;AACJ;AAEA,MAAM,WAAW,CAAC;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MAOkB;AAClB,SAAO;AAAA;AAAA,mBAEQ;AAAA,uBACI;AAAA,6BACM;AAAA,sBACP;AAAA,uBACC;AAAA;AAAA;AAAA;AAAA;AAKvB;AAOO,aAAM,IAAI,CAAC,SACd,SAAS,KAAK,MAAM,MAAM,IAAI,CAAC;AAE5B,aAAM,WAAW,CAAC,SACrB,SAAS,KAAK,MAAM,MAAM,KAAK,SAAS,KAAK,CAAC;AAE3C,aAAM,iBAAiB,CAAC,SAC3B,SAAS,KAAK,MAAM,MAAM,KAAK,eAAe,KAAK,CAAC;AAEjD,aAAM,IAAI,CAAC,SACd,SAAS,KAAK,MAAM,MAAM,IAAI,CAAC;AAE5B,aAAM,WAAW,CAAC,SACrB,SAAS,KAAK,MAAM,MAAM,KAAK,SAAS,KAAK,CAAC;AAE3C,aAAM,iBAAiB,CAAC,SAC3B,SAAS,KAAK,MAAM,MAAM,KAAK,eAAe,KAAK,CAAC;AAEjD,aAAM,IAAI,CAAC,SACd,SAAS,KAAK,MAAM,MAAM,IAAI,CAAC;AAE5B,aAAM,WAAW,CAAC,SACrB,SAAS,KAAK,MAAM,MAAM,KAAK,SAAS,KAAK,CAAC;AAE3C,aAAM,iBAAiB,CAAC,SAC3B,SAAS,KAAK,MAAM,MAAM,KAAK,eAAe,KAAK,CAAC;AAEjD,aAAM,KAAK,CAAC,SACf,SAAS,KAAK,MAAM,MAAM,KAAK,CAAC;AAE7B,aAAM,YAAY,CAAC,SACtB,SAAS,KAAK,MAAM,MAAM,MAAM,SAAS,KAAK,CAAC;AAE5C,aAAM,kBAAkB,CAAC,SAC5B,SAAS,KAAK,MAAM,MAAM,MAAM,eAAe,KAAK,CAAC;",
6
+ "names": []
7
+ }