@spectrum-web-components/switch 0.10.0-devmode.0 → 0.11.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 (41) hide show
  1. package/README.md +38 -1
  2. package/custom-elements.json +6 -0
  3. package/package.json +5 -5
  4. package/sp-switch.dev.js +1 -0
  5. package/sp-switch.dev.js.map +1 -1
  6. package/sp-switch.js +1 -2
  7. package/sp-switch.js.map +2 -2
  8. package/src/Switch.d.ts +6 -1
  9. package/src/Switch.dev.js +8 -3
  10. package/src/Switch.dev.js.map +2 -2
  11. package/src/Switch.js +2 -46
  12. package/src/Switch.js.map +3 -3
  13. package/src/index.dev.js +1 -0
  14. package/src/index.dev.js.map +1 -1
  15. package/src/index.js +1 -1
  16. package/src/index.js.map +1 -1
  17. package/src/spectrum-config.js +23 -0
  18. package/src/spectrum-switch.css.dev.js +270 -110
  19. package/src/spectrum-switch.css.dev.js.map +2 -2
  20. package/src/spectrum-switch.css.js +271 -114
  21. package/src/spectrum-switch.css.js.map +3 -3
  22. package/src/switch-legacy.css.dev.js +1 -0
  23. package/src/switch-legacy.css.dev.js.map +1 -1
  24. package/src/switch-legacy.css.js +2 -4
  25. package/src/switch-legacy.css.js.map +2 -2
  26. package/src/switch.css.dev.js +270 -112
  27. package/src/switch.css.dev.js.map +2 -2
  28. package/src/switch.css.js +271 -116
  29. package/src/switch.css.js.map +3 -3
  30. package/stories/switch-sizes.stories.js +23 -0
  31. package/stories/switch-sizes.stories.js.map +7 -0
  32. package/stories/switch.stories.js +34 -4
  33. package/stories/switch.stories.js.map +2 -2
  34. package/test/benchmark/test-basic.js +1 -0
  35. package/test/benchmark/test-basic.js.map +1 -1
  36. package/test/switch-sizes.test-vrt.js +5 -0
  37. package/test/switch-sizes.test-vrt.js.map +7 -0
  38. package/test/switch.test-vrt.js +1 -0
  39. package/test/switch.test-vrt.js.map +1 -1
  40. package/test/switch.test.js +15 -6
  41. package/test/switch.test.js.map +1 -1
package/src/spectrum-switch.css.js CHANGED
@@ -1,135 +1,292 @@
1
- import { css } from "@spectrum-web-components/base";
2
- const styles = css`
3
- :host{--spectrum-switch-handle-size:var(
4
- --spectrum-switch-m-handle-size,var(--spectrum-alias-control-two-size-m)
5
- );--spectrum-switch-handle-border-size:var(
6
- --spectrum-switch-m-handle-border-size,var(--spectrum-alias-border-size-thick)
7
- );--spectrum-switch-handle-border-radius:var(
8
- --spectrum-switch-m-handle-border-radius,var(--spectrum-alias-control-two-border-radius-m)
9
- );--spectrum-switch-text-gap:var(
10
- --spectrum-switch-m-text-gap,var(--spectrum-global-dimension-size-125)
11
- );--spectrum-switch-text-size:var(
12
- --spectrum-switch-m-text-size,var(--spectrum-global-dimension-font-size-100)
13
- );--spectrum-switch-track-height:var(
14
- --spectrum-switch-m-track-height,var(--spectrum-alias-control-three-height-m)
15
- );--spectrum-switch-track-width:var(
16
- --spectrum-switch-m-track-width,var(--spectrum-alias-control-three-width-m)
17
- );--spectrum-switch-cursor-hit-x:var(
18
- --spectrum-switch-m-cursor-hit-x,var(--spectrum-global-dimension-size-100)
19
- );--spectrum-switch-height:var(
20
- --spectrum-switch-m-height,var(--spectrum-global-dimension-size-400)
21
- );--spectrum-switch-label-margin-top:var(
22
- --spectrum-global-dimension-size-65
23
- );--spectrum-switch-label-line-height:1.49}:host([dir=ltr]){margin-right:calc(var(--spectrum-switch-cursor-hit-x)*2)}:host([dir=rtl]){margin-left:calc(var(--spectrum-switch-cursor-hit-x)*2)}:host{align-items:flex-start;display:inline-flex;max-width:100%;min-height:var(--spectrum-switch-height);position:relative;vertical-align:top}:host([dir=ltr]) #input{left:0}:host([dir=rtl]) #input{right:0}#input{box-sizing:border-box;cursor:pointer;height:100%;margin:0;opacity:0;padding:0;position:absolute;top:0;width:100%;z-index:1}:host([dir=ltr][checked]) #input+#switch:before{transform:translateX(calc(var(--spectrum-switch-track-width) - 100%))}:host([dir=rtl][checked]) #input+#switch:before{transform:translateX(calc((var(--spectrum-switch-track-width) - 100%)*-1))}#input[disabled],:host([disabled]) #input{cursor:default}#input.focus-visible+#switch:after{margin:calc(var(
24
- --spectrum-alias-focus-ring-gap,
25
- var(--spectrum-global-dimension-static-size-25)
26
- )*-1)}#input:focus-visible+#switch:after{margin:calc(var(
27
- --spectrum-alias-focus-ring-gap,
28
- var(--spectrum-global-dimension-static-size-25)
29
- )*-1)}#label{font-size:var(--spectrum-switch-text-size);line-height:var(--spectrum-switch-label-line-height);margin-bottom:0;margin-left:var(--spectrum-switch-text-gap);margin-right:var(--spectrum-switch-text-gap);margin-top:var(--spectrum-switch-label-margin-top);transition:color var(--spectrum-global-animation-duration-200,.16s) ease-in-out}:host([dir=ltr]) #switch{left:0}:host([dir=rtl]) #switch{right:0}:host([dir=ltr]) #switch{right:0}:host([dir=rtl]) #switch{left:0}#switch{border-radius:calc(var(--spectrum-switch-track-height)/2);box-sizing:border-box;display:inline-block;flex-grow:0;flex-shrink:0;height:var(--spectrum-switch-track-height);margin-bottom:calc((var(--spectrum-switch-height) - var(--spectrum-switch-track-height))/2);margin-left:0;margin-right:0;margin-top:calc((var(--spectrum-switch-height) - var(--spectrum-switch-track-height))/2);position:relative;transition:background var(--spectrum-global-animation-duration-100,.13s) ease-in-out,border var(--spectrum-global-animation-duration-100,.13s) ease-in-out;vertical-align:middle;width:var(--spectrum-switch-track-width)}#switch:before{box-sizing:border-box;content:"";display:block;position:absolute}:host([dir=ltr]) #switch:before{left:0}:host([dir=rtl]) #switch:before{right:0}#switch:before{border-radius:var(--spectrum-switch-handle-border-radius);border-style:solid;border-width:var(--spectrum-switch-handle-border-size);height:var(--spectrum-switch-handle-size);top:0;transition:background var(--spectrum-global-animation-duration-100,.13s) ease-in-out,border var(--spectrum-global-animation-duration-100,.13s) ease-in-out,transform 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-switch-handle-size)}:host([dir=ltr]) #switch:after{left:0}:host([dir=rtl]) #switch:after{right:0}:host([dir=ltr]) #switch:after{right:0}:host([dir=rtl]) #switch:after{left:0}#switch:after{border-radius:calc(var(--spectrum-switch-track-height) + var(
30
- --spectrum-alias-focus-ring-gap,
31
- var(--spectrum-global-dimension-static-size-25)
32
- ));bottom:0;content:"";display:block;margin:0;position:absolute;top:0;transition:opacity var(--spectrum-global-animation-duration-100,.13s) ease-out,margin var(--spectrum-global-animation-duration-100,.13s) ease-out}#switch{background-color:var(
33
- --spectrum-switch-m-track-color,var(--spectrum-global-color-gray-300)
1
+ "use strict";import{css as o}from"@spectrum-web-components/base";const t=o`
2
+ :host{--spectrum-switch-label-color-default:var(
3
+ --spectrum-neutral-content-color-default
4
+ );--spectrum-switch-label-color-hover:var(
5
+ --spectrum-neutral-content-color-hover
6
+ );--spectrum-switch-label-color-down:var(
7
+ --spectrum-neutral-content-color-down
8
+ );--spectrum-switch-label-color-focus:var(
9
+ --spectrum-neutral-content-color-key-focus
10
+ );--spectrum-switch-label-color-disabled:var(
11
+ --spectrum-disabled-content-color
12
+ );--spectrum-switch-background-color:var(--spectrum-gray-300);--spectrum-switch-background-color-disabled:var(--spectrum-gray-300);--spectrum-switch-background-color-selected-disabled:var(
13
+ --spectrum-gray-400
14
+ );--spectrum-switch-focus-ring-thickness:var(
15
+ --mod-focus-ring-thickness,var(--spectrum-focus-ring-thickness)
16
+ );--spectrum-switch-focus-ring-color:var(--spectrum-focus-ring-color);--spectrum-switch-handle-background-color:var(--spectrum-gray-75);--spectrum-switch-handle-border-color-disabled:var(--spectrum-gray-400)}.spectrum-Switch--disabled{--spectrum-switch-label-color-default:var(
17
+ --spectrum-disabled-content-color
18
+ )}:host([emphasized]){--spectrum-switch-background-color-selected-default:var(
19
+ --spectrum-accent-color-900
20
+ );--spectrum-switch-background-color-selected-hover:var(
21
+ --spectrum-accent-color-1000
22
+ );--spectrum-switch-background-color-selected-down:var(
23
+ --spectrum-accent-color-1100
24
+ );--spectrum-switch-background-color-selected-focus:var(
25
+ --spectrum-accent-color-1000
26
+ );--spectrum-switch-handle-border-color-selected-default:var(
27
+ --spectrum-accent-color-900
28
+ );--spectrum-switch-handle-border-color-selected-hover:var(
29
+ --spectrum-accent-color-1000
30
+ );--spectrum-switch-handle-border-color-selected-down:var(
31
+ --spectrum-accent-color-1100
32
+ );--spectrum-switch-handle-border-color-selected-focus:var(
33
+ --spectrum-accent-color-1000
34
+ )}:host([size=s]){--spectrum-switch-min-height:var(
35
+ --spectrum-component-height-75
36
+ );--spectrum-switch-control-width:var(--spectrum-switch-control-width-small);--spectrum-switch-control-height:var(
37
+ --spectrum-switch-control-height-small
38
+ );--spectrum-switch-control-label-spacing:var(--spectrum-text-to-control-75);--spectrum-switch-spacing-top-to-control:var(
39
+ --spectrum-switch-top-to-control-small
40
+ );--spectrum-switch-spacing-top-to-label:var(
41
+ --spectrum-component-top-to-text-75
42
+ );--spectrum-switch-font-size:var(--spectrum-font-size-75)}:host([size=m]){--spectrum-switch-min-height:var(
43
+ --spectrum-component-height-100
44
+ );--spectrum-switch-control-width:var(
45
+ --spectrum-switch-control-width-medium
46
+ );--spectrum-switch-control-height:var(
47
+ --spectrum-switch-control-height-medium
48
+ );--spectrum-switch-control-label-spacing:var(
49
+ --spectrum-text-to-control-100
50
+ );--spectrum-switch-spacing-top-to-control:var(
51
+ --spectrum-switch-top-to-control-medium
52
+ );--spectrum-switch-spacing-top-to-label:var(
53
+ --spectrum-component-top-to-text-100
54
+ );--spectrum-switch-font-size:var(--spectrum-font-size-100)}:host([size=l]){--spectrum-switch-min-height:var(
55
+ --spectrum-component-height-200
56
+ );--spectrum-switch-control-width:var(--spectrum-switch-control-width-large);--spectrum-switch-control-height:var(
57
+ --spectrum-switch-control-height-large
58
+ );--spectrum-switch-control-label-spacing:var(
59
+ --spectrum-text-to-control-200
60
+ );--spectrum-switch-spacing-top-to-control:var(
61
+ --spectrum-switch-top-to-control-large
62
+ );--spectrum-switch-spacing-top-to-label:var(
63
+ --spectrum-component-top-to-text-200
64
+ );--spectrum-switch-font-size:var(--spectrum-font-size-200)}:host([size=xl]){--spectrum-switch-min-height:var(
65
+ --spectrum-component-height-300
66
+ );--spectrum-switch-control-width:var(
67
+ --spectrum-switch-control-width-extra-large
68
+ );--spectrum-switch-control-height:var(
69
+ --spectrum-switch-control-height-extra-large
70
+ );--spectrum-switch-control-label-spacing:var(
71
+ --spectrum-text-to-control-300
72
+ );--spectrum-switch-spacing-top-to-control:var(
73
+ --spectrum-switch-top-to-control-extra-large
74
+ );--spectrum-switch-spacing-top-to-label:var(
75
+ --spectrum-component-top-to-text-300
76
+ );--spectrum-switch-font-size:var(--spectrum-font-size-300)}:host{align-items:flex-start;display:inline-flex;max-inline-size:100%;min-block-size:var(--mod-switch-height,var(--spectrum-switch-min-height));position:relative;vertical-align:top}#input{block-size:100%;box-sizing:border-box;cursor:pointer;inline-size:100%;inset-block-start:0;inset-inline-start:0;margin:0;opacity:0;padding:0;position:absolute;z-index:1}:host([dir=ltr][checked]) #input+#switch:before{transform:translateX(calc(var(
77
+ --mod-switch-control-width,
78
+ var(--spectrum-switch-control-width)
79
+ ) - 100%))}:host([dir=rtl][checked]) #input+#switch:before{transform:translateX(calc((var(
80
+ --mod-switch-control-width,
81
+ var(--spectrum-switch-control-width)
82
+ ) - 100%)*-1))}#input[disabled],:host([disabled]) #input{cursor:default}#input.focus-visible+#switch:after{margin:calc(var(--mod-focus-ring-gap, var(--spectrum-focus-ring-gap))*-1)}#input:focus-visible+#switch:after{margin:calc(var(--mod-focus-ring-gap, var(--spectrum-focus-ring-gap))*-1)}#label{color:var(
83
+ --highcontrast-switch-label-color-default,var(
84
+ --mod-switch-label-color-default,var(--spectrum-switch-label-color-default)
85
+ )
86
+ );font-size:var(--mod-switch-font-size,var(--spectrum-switch-font-size));line-height:var(--mod-line-height-100,var(--spectrum-line-height-100));margin-block-end:0;margin-block-start:var(
87
+ --mod-switch-spacing-top-to-label,var(--spectrum-switch-spacing-top-to-label)
88
+ );margin-inline:var(
89
+ --mod-switch-control-label-spacing,var(--spectrum-switch-control-label-spacing)
90
+ );transition:color var(
91
+ --mod-animation-duration-200,var(--spectrum-animation-duration-200)
92
+ ) ease-in-out}#switch{block-size:var(
93
+ --mod-switch-control-height,var(--spectrum-switch-control-height)
94
+ );border-radius:calc(var(--mod-switch-control-height, var(--spectrum-switch-control-height))/2);box-sizing:border-box;display:inline-block;flex-grow:0;flex-shrink:0;inline-size:var(
95
+ --mod-switch-control-width,var(--spectrum-switch-control-width)
96
+ );inset-inline-end:0;inset-inline-start:0;margin-block:calc(var(--mod-switch-height, var(--spectrum-switch-min-height)) - var(
97
+ --mod-switch-control-height,
98
+ var(--spectrum-switch-control-height)
99
+ ) - var(
100
+ --mod-switch-spacing-top-to-control,
101
+ var(--spectrum-switch-spacing-top-to-control)
102
+ ));margin-inline:0;position:relative;transition:background var(
103
+ --mod-animation-duration-100,var(--spectrum-animation-duration-100)
104
+ ) ease-in-out,border var(
105
+ --mod-animation-duration-100,var(--spectrum-animation-duration-100)
106
+ ) ease-in-out;vertical-align:middle}#switch:before{box-sizing:border-box;content:"";display:block;position:absolute}#switch:before{block-size:var(
107
+ --mod-switch-control-height,var(--spectrum-switch-control-height)
108
+ );border-radius:calc(var(--mod-switch-control-height, var(--spectrum-switch-control-height))/2);border-style:solid;border-width:var(--mod-border-width-200,var(--spectrum-border-width-200));inline-size:var(
109
+ --mod-switch-control-height,var(--spectrum-switch-control-height)
110
+ );inset-block-start:0;inset-inline-start:0;transition:background var(
111
+ --mod-animation-duration-100,var(--spectrum-animation-duration-100)
112
+ ) ease-in-out,border var(
113
+ --mod-animation-duration-100,var(--spectrum-animation-duration-100)
114
+ ) ease-in-out,transform var(
115
+ --mod-animation-duration-100,var(--spectrum-animation-duration-100)
116
+ ) ease-in-out,box-shadow var(
117
+ --mod-animation-duration-100,var(--spectrum-animation-duration-100)
118
+ ) ease-in-out}#switch:after{border-radius:calc(var(--mod-switch-control-height, var(--spectrum-switch-control-height)) + var(--mod-focus-ring-gap, var(--spectrum-focus-ring-gap)));content:"";display:block;inset-block-end:0;inset-block-start:0;inset-inline-end:0;inset-inline-start:0;margin:0;position:absolute;transition:opacity var(
119
+ --mod-animation-duration-100,var(--spectrum-animation-duration-100)
120
+ ) ease-out,margin var(
121
+ --spectrum-animation-duration-100,var(--spectrum-animation-duration-100)
122
+ ) ease-out}#switch{background-color:var(
123
+ --highcontrast-switch-background-color,var(
124
+ --mod-switch-background-color,var(--spectrum-switch-background-color)
125
+ )
34
126
  )}#switch:before{background-color:var(
35
- --spectrum-switch-m-handle-background-color,var(--spectrum-global-color-gray-75)
127
+ --highcontrast-switch-handle-background-color,var(
128
+ --mod-switch-handle-background-color,var(--spectrum-switch-handle-background-color)
129
+ )
36
130
  );border-color:var(
37
- --spectrum-switch-m-handle-border-color,var(--spectrum-alias-toggle-border-color-default)
38
- )}#input~#label{color:var(
39
- --spectrum-switch-m-text-color,var(--spectrum-alias-component-text-color-default)
40
- )}:host([checked]) #input+#switch{background-color:var(
41
- --spectrum-switch-m-track-color-selected,var(--spectrum-alias-toggle-background-color-default)
42
- )}:host([checked]) #input+#switch:before{border-color:var(
43
- --spectrum-switch-m-handle-border-color-selected,var(--spectrum-alias-toggle-background-color-default)
131
+ --highcontrast-switch-handle-border-color-default,var(
132
+ --mod-switch-handle-border-color-default,var(--spectrum-switch-handle-border-color-default)
133
+ )
44
134
  )}:host(:hover) #input+#switch:before{border-color:var(
45
- --spectrum-switch-m-handle-border-color-hover,var(--spectrum-alias-toggle-border-color-hover)
135
+ --highcontrast-switch-handle-border-color-hover,var(
136
+ --mod-switch-handle-border-color-hover,var(--spectrum-switch-handle-border-color-hover)
137
+ )
46
138
  );box-shadow:none}:host(:hover) #input~#label{color:var(
47
- --spectrum-switch-m-text-color-hover,var(--spectrum-alias-component-text-color-hover)
139
+ --highcontrast-switch-label-color-hover,var(
140
+ --mod-switch-label-color-hover,var(--spectrum-switch-label-color-hover)
141
+ )
48
142
  )}:host(:hover[checked]) #input:enabled+#switch{background-color:var(
49
- --spectrum-switch-m-track-color-selected-hover,var(--spectrum-alias-toggle-background-color-hover)
143
+ --highcontrast-switch-background-color-selected-hover,var(
144
+ --mod-switch-background-color-selected-hover,var(--spectrum-switch-background-color-selected-hover)
145
+ )
50
146
  )}:host(:hover[checked]) #input:enabled+#switch:before{border-color:var(
51
- --spectrum-switch-m-handle-border-color-selected-hover,var(--spectrum-alias-toggle-background-color-hover)
147
+ --highcontrast-switch-handle-border-color-selected-hover,var(
148
+ --mod-switch-handle-border-color-selected-hover,var(--spectrum-switch-handle-border-color-selected-hover)
149
+ )
150
+ )}:host(:hover) #input[disabled]+#switch,:host(:hover[disabled]) #input+#switch{background-color:var(
151
+ --highcontrast-switch-background-color-disabled,var(
152
+ --mod-switch-background-color-disabled,var(--spectrum-switch-background-color-disabled)
153
+ )
154
+ )}:host(:hover) #input[disabled]+#switch:before,:host(:hover[disabled]) #input+#switch:before{border-color:var(
155
+ --highcontrast-switch-handle-border-color-disabled,var(
156
+ --mod-switch-handle-border-color-disabled,var(--spectrum-switch-handle-border-color-disabled)
157
+ )
158
+ )}:host(:hover) #input[disabled]~#label,:host(:hover[disabled]) #input~#label{color:var(
159
+ --highcontrast-switch-label-color-disabled,var(
160
+ --mod-switch-label-color-disabled,var(--spectrum-switch-label-color-disabled)
161
+ )
162
+ )}:host(:hover[checked]) #input[disabled]+#switch,:host(:hover[disabled][checked]) #input+#switch{background-color:var(
163
+ --highcontrast-switch-background-color-selected-disabled,var(
164
+ --mod-switch-background-color-selected-disabled,var(--spectrum-switch-background-color-selected-disabled)
165
+ )
166
+ )}:host(:hover[checked]) #input[disabled]+#switch:before,:host(:hover[disabled][checked]) #input+#switch:before{border-color:var(
167
+ --highcontrast-switch-handle-border-color-disabled,var(
168
+ --mod-switch-handle-border-color-disabled,var(--spectrum-switch-handle-border-color-disabled)
169
+ )
170
+ )}:host(:hover[checked]) #input[disabled]~#label,:host(:hover[disabled][checked]) #input~#label{color:var(
171
+ --highcontrast-switch-label-color-disabled,var(
172
+ --mod-switch-label-color-disabled,var(--spectrum-switch-label-color-disabled)
173
+ )
52
174
  )}:host(:active) #input+#switch:before{border-color:var(
53
- --spectrum-switch-m-handle-border-color-down,var(--spectrum-alias-toggle-border-color-down)
175
+ --highcontrast-switch-handle-border-color-down,var(
176
+ --mod-switch-handle-border-color-down,var(--spectrum-switch-handle-border-color-down)
177
+ )
54
178
  )}:host(:active) #input~#label{color:var(
55
- --spectrum-switch-m-text-color-down,var(--spectrum-alias-component-text-color-down)
179
+ --highcontrast-switch-label-color-down,var(
180
+ --mod-switch-label-color-down,var(--spectrum-switch-label-color-down)
181
+ )
56
182
  )}:host(:active[checked]) #input:enabled+#switch{background-color:var(
57
- --spectrum-switch-m-track-color-selected-down,var(--spectrum-alias-toggle-background-color-down)
183
+ --highcontrast-switch-background-color-selected-down,var(
184
+ --mod-switch-background-color-selected-down,var(--spectrum-switch-background-color-selected-down)
185
+ )
58
186
  )}:host(:active[checked]) #input:enabled+#switch:before{border-color:var(
59
- --spectrum-switch-m-handle-border-color-selected-down,var(--spectrum-alias-toggle-background-color-down)
60
- )}:host([disabled]) #input+#switch{background-color:var(
61
- --spectrum-switch-m-track-color-disabled,var(--spectrum-global-color-gray-300)
62
- )}:host([disabled]) #input+#switch:before{border-color:var(
63
- --spectrum-switch-m-handle-border-color-disabled,var(--spectrum-global-color-gray-400)
64
- )}:host([disabled]) #input~#label{color:var(
65
- --spectrum-switch-m-text-color-disabled,var(--spectrum-alias-component-text-color-disabled)
66
- )}:host([disabled][checked][dir]) #input+#switch{background-color:var(
67
- --spectrum-switch-m-track-color-selected-disabled,var(--spectrum-global-color-gray-400)
68
- )}:host([disabled][checked][dir]) #input+#switch:before{border-color:var(
69
- --spectrum-switch-m-handle-border-color-selected-disabled,var(--spectrum-global-color-gray-400)
70
- )}:host([disabled][checked][dir]) #input~#label{color:var(
71
- --spectrum-switch-m-text-color-selected-disabled,var(--spectrum-alias-component-text-color-disabled)
72
- )}:host([emphasized][checked]) #input+#switch{background-color:var(
73
- --spectrum-switch-m-emphasized-track-color-selected,var(
74
- --spectrum-alias-toggle-background-color-emphasized-selected-default
75
- )
76
- )}:host([emphasized][checked]) #input+#switch:before{border-color:var(
77
- --spectrum-switch-m-emphasized-handle-border-color-selected,var(
78
- --spectrum-alias-toggle-background-color-emphasized-selected-default
79
- )
80
- )}:host([emphasized][checked]:hover) #input:enabled+#switch{background-color:var(
81
- --spectrum-switch-m-emphasized-track-color-selected-hover,var(--spectrum-alias-toggle-background-color-emphasized-selected-hover)
82
- )}:host([emphasized][checked]:hover) #input:enabled+#switch:before{border-color:var(
83
- --spectrum-switch-m-emphasized-handle-border-color-selected-hover,var(--spectrum-alias-toggle-background-color-emphasized-selected-hover)
84
- )}:host([emphasized]:active[checked]) #input:enabled+#switch{background-color:var(
85
- --spectrum-switch-m-emphasized-track-color-selected-down,var(--spectrum-alias-toggle-background-color-emphasized-selected-down)
86
- )}:host([emphasized]:active[checked]) #input:enabled+#switch:before{border-color:var(
87
- --spectrum-switch-m-emphasized-handle-border-color-selected-down,var(--spectrum-alias-toggle-background-color-emphasized-selected-down)
187
+ --highcontrast-switch-handle-border-color-selected-down,var(
188
+ --mod-switch-handle-border-color-selected-down,var(--spectrum-switch-handle-border-color-selected-down)
189
+ )
88
190
  )}#input.focus-visible+#switch:after,:host(:hover) #input.focus-visible+#switch:after{box-shadow:0 0 0 var(
89
- --spectrum-switch-m-focus-ring-size,var(--spectrum-alias-focus-ring-size)
191
+ --mod-switch-focus-ring-thickness,var(--spectrum-switch-focus-ring-thickness)
90
192
  ) var(
91
- --spectrum-switch-m-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color)
193
+ --highcontrast-switch-focus-ring-color,var(
194
+ --mod-switch-focus-ring-color,var(--spectrum-switch-focus-ring-color)
195
+ )
92
196
  )}#input:focus-visible+#switch:after,:host(:hover) #input:focus-visible+#switch:after{box-shadow:0 0 0 var(
93
- --spectrum-switch-m-focus-ring-size,var(--spectrum-alias-focus-ring-size)
197
+ --mod-switch-focus-ring-thickness,var(--spectrum-switch-focus-ring-thickness)
94
198
  ) var(
95
- --spectrum-switch-m-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color)
199
+ --highcontrast-switch-focus-ring-color,var(
200
+ --mod-switch-focus-ring-color,var(--spectrum-switch-focus-ring-color)
201
+ )
96
202
  )}#input.focus-visible+#switch:before,:host(:hover) #input.focus-visible+#switch:before{border-color:var(
97
- --spectrum-switch-m-handle-border-color-key-focus,var(--spectrum-alias-toggle-border-color-key-focus)
203
+ --highcontrast-switch-handle-border-color-focus,var(
204
+ --mod-switch-handle-border-color-focus,var(--spectrum-switch-handle-border-color-focus)
205
+ )
98
206
  )}#input:focus-visible+#switch:before,:host(:hover) #input:focus-visible+#switch:before{border-color:var(
99
- --spectrum-switch-m-handle-border-color-key-focus,var(--spectrum-alias-toggle-border-color-key-focus)
207
+ --highcontrast-switch-handle-border-color-focus,var(
208
+ --mod-switch-handle-border-color-focus,var(--spectrum-switch-handle-border-color-focus)
209
+ )
100
210
  )}:host(:hover[checked]) #input.focus-visible+#switch,:host([checked]) #input.focus-visible+#switch{background-color:var(
101
- --spectrum-switch-m-track-color-selected-key-focus,var(--spectrum-alias-toggle-background-color-key-focus)
211
+ --highcontrast-switch-background-color-selected-focus,var(
212
+ --mod-switch-background-color-selected-focus,var(--spectrum-switch-background-color-selected-focus)
213
+ )
102
214
  )}:host(:hover[checked]) #input:focus-visible+#switch,:host([checked]) #input:focus-visible+#switch{background-color:var(
103
- --spectrum-switch-m-track-color-selected-key-focus,var(--spectrum-alias-toggle-background-color-key-focus)
215
+ --highcontrast-switch-background-color-selected-focus,var(
216
+ --mod-switch-background-color-selected-focus,var(--spectrum-switch-background-color-selected-focus)
217
+ )
104
218
  )}:host(:hover[checked]) #input.focus-visible+#switch:before,:host([checked]) #input.focus-visible+#switch:before{border-color:var(
105
- --spectrum-switch-m-handle-border-color-selected-key-focus,var(--spectrum-alias-toggle-background-color-key-focus)
219
+ --highcontrast-switch-handle-border-color-selected-focus,var(
220
+ --mod-switch-handle-border-color-selected-focus,var(--spectrum-switch-handle-border-color-selected-focus)
221
+ )
106
222
  )}:host(:hover[checked]) #input:focus-visible+#switch:before,:host([checked]) #input:focus-visible+#switch:before{border-color:var(
107
- --spectrum-switch-m-handle-border-color-selected-key-focus,var(--spectrum-alias-toggle-background-color-key-focus)
108
- )}:host([emphasized][checked]) #input.focus-visible+#switch,:host([emphasized][checked]:hover) #input.focus-visible+#switch{background-color:var(
109
- --spectrum-switch-m-emphasized-track-color-selected-key-focus,var(
110
- --spectrum-alias-toggle-background-color-emphasized-selected-key-focus
111
- )
112
- )}:host([emphasized][checked]) #input:focus-visible+#switch,:host([emphasized][checked]:hover) #input:focus-visible+#switch{background-color:var(
113
- --spectrum-switch-m-emphasized-track-color-selected-key-focus,var(
114
- --spectrum-alias-toggle-background-color-emphasized-selected-key-focus
115
- )
116
- )}:host([emphasized][checked]) #input.focus-visible+#switch:before,:host([emphasized][checked]:hover) #input.focus-visible+#switch:before{border-color:var(
117
- --spectrum-switch-m-emphasized-handle-border-color-selected-key-focus,var(
118
- --spectrum-alias-toggle-background-color-emphasized-selected-key-focus
119
- )
120
- )}:host([emphasized][checked]) #input:focus-visible+#switch:before,:host([emphasized][checked]:hover) #input:focus-visible+#switch:before{border-color:var(
121
- --spectrum-switch-m-emphasized-handle-border-color-selected-key-focus,var(
122
- --spectrum-alias-toggle-background-color-emphasized-selected-key-focus
123
- )
124
- )}@media (forced-colors:active){:host{--spectrum-switch-m-emphasized-handle-border-color-selected:Highlight;--spectrum-switch-m-emphasized-handle-border-color-selected-down:Highlight;--spectrum-switch-m-emphasized-handle-border-color-selected-hover:Highlight;--spectrum-switch-m-emphasized-handle-border-color-selected-key-focus:Highlight;--spectrum-switch-m-emphasized-track-color-selected:Highlight;--spectrum-switch-m-emphasized-track-color-selected-down:Highlight;--spectrum-switch-m-emphasized-track-color-selected-hover:Highlight;--spectrum-switch-m-emphasized-track-color-selected-key-focus:Highlight;--spectrum-switch-m-focus-ring-color-key-focus:ButtonText;--spectrum-switch-m-handle-background-color:ButtonFace;--spectrum-switch-m-handle-border-color:ButtonText;--spectrum-switch-m-handle-border-color-disabled:GrayText;--spectrum-switch-m-handle-border-color-down:Highlight;--spectrum-switch-m-handle-border-color-hover:Highlight;--spectrum-switch-m-handle-border-color-key-focus:ButtonText;--spectrum-switch-m-handle-border-color-selected:Highlight;--spectrum-switch-m-handle-border-color-selected-disabled:GrayText;--spectrum-switch-m-handle-border-color-selected-down:Highlight;--spectrum-switch-m-handle-border-color-selected-hover:Highlight;--spectrum-switch-m-handle-border-color-selected-key-focus:Highlight;--spectrum-switch-m-text-color:CanvasText;--spectrum-switch-m-text-color-disabled:GrayText;--spectrum-switch-m-text-color-down:CanvasText;--spectrum-switch-m-text-color-hover:CanvasText;--spectrum-switch-m-text-color-selected-disabled:GrayText;--spectrum-switch-m-track-color:ButtonFace;--spectrum-switch-m-track-color-disabled:ButtonFace;--spectrum-switch-m-track-color-selected:Highlight;--spectrum-switch-m-track-color-selected-disabled:GrayText;--spectrum-switch-m-track-color-selected-down:Highlight;--spectrum-switch-m-track-color-selected-hover:Highlight;--spectrum-switch-m-track-color-selected-key-focus:Highlight;forced-color-adjust:none}#input:not([checked])+#switch{box-shadow:inset 0 0 0 1px var(
125
- --spectrum-switch-m-handle-border-color,var(--spectrum-alias-toggle-border-color-default)
126
- )}:host(:hover) #input:not([checked])+#switch{box-shadow:inset 0 0 0 1px var(
127
- --spectrum-switch-m-handle-border-color-hover,var(--spectrum-alias-toggle-border-color-hover)
128
- )}:host([disabled]) #input+#switch{box-shadow:inset 0 0 0 1px var(
129
- --spectrum-switch-m-handle-border-color-disabled,var(--spectrum-global-color-gray-400)
130
- )}:host(:hover[disabled]) #input+#switch{box-shadow:inset 0 0 0 1px var(
131
- --spectrum-switch-m-handle-border-color-disabled,var(--spectrum-global-color-gray-400)
132
- )}}
133
- `;
134
- export default styles;
223
+ --highcontrast-switch-handle-border-color-selected-focus,var(
224
+ --mod-switch-handle-border-color-selected-focus,var(--spectrum-switch-handle-border-color-selected-focus)
225
+ )
226
+ )}#input.focus-visible~#label,:host(:hover) #input.focus-visible~#label{color:var(
227
+ --highcontrast-switch-label-color-focus,var(
228
+ --mod-switch-label-color-focus,var(--spectrum-switch-label-color-focus)
229
+ )
230
+ )}#input:focus-visible~#label,:host(:hover) #input:focus-visible~#label{color:var(
231
+ --highcontrast-switch-label-color-focus,var(
232
+ --mod-switch-label-color-focus,var(--spectrum-switch-label-color-focus)
233
+ )
234
+ )}:host([checked]) #input+#switch{background-color:var(
235
+ --highcontrast-switch-background-color-selected-default,var(
236
+ --mod-switch-background-color-selected-default,var(--spectrum-switch-background-color-selected-default)
237
+ )
238
+ )}:host([checked]) #input+#switch:before{border-color:var(
239
+ --highcontrast-switch-handle-border-color-selected-default,var(
240
+ --mod-switch-handle-border-color-selected-default,var(--spectrum-switch-handle-border-color-selected-default)
241
+ )
242
+ )}#input[disabled]+#switch,:host([disabled]) #input+#switch{background-color:var(
243
+ --highcontrast-switch-background-color-disabled,var(
244
+ --mod-switch-background-color-disabled,var(--spectrum-switch-background-color-disabled)
245
+ )
246
+ )}#input[disabled]+#switch:before,:host([disabled]) #input+#switch:before{border-color:var(
247
+ --highcontrast-switch-handle-border-color-disabled,var(
248
+ --mod-switch-handle-border-color-disabled,var(--spectrum-switch-handle-border-color-disabled)
249
+ )
250
+ )}#input[disabled]~#label,:host([disabled]) #input~#label{color:var(
251
+ --highcontrast-switch-label-color-disabled,var(
252
+ --mod-switch-label-color-disabled,var(--spectrum-switch-label-color-disabled)
253
+ )
254
+ )}:host([checked]) #input[disabled]+#switch,:host([disabled][checked]) #input+#switch{background-color:var(
255
+ --highcontrast-switch-background-color-selected-disabled,var(
256
+ --mod-switch-background-color-selected-disabled,var(--spectrum-switch-background-color-selected-disabled)
257
+ )
258
+ )}:host([checked]) #input[disabled]+#switch:before,:host([disabled][checked]) #input+#switch:before{border-color:var(
259
+ --highcontrast-switch-handle-border-color-disabled,var(
260
+ --mod-switch-handle-border-color-disabled,var(--spectrum-switch-handle-border-color-disabled)
261
+ )
262
+ )}:host([checked]) #input[disabled]~#label,:host([disabled][checked]) #input~#label{color:var(
263
+ --highcontrast-switch-label-color-disabled,var(
264
+ --mod-switch-label-color-disabled,var(--spectrum-switch-label-color-disabled)
265
+ )
266
+ )}@media (forced-colors:active){:host{--highcontrast-switch-label-color-default:ButtonText;--highcontrast-switch-label-color-hover:ButtonText;--highcontrast-switch-label-color-down:ButtonText;--highcontrast-switch-label-color-focus:ButtonText;--highcontrast-switch-label-color-disabled:GrayText;--highcontrast-switch-handle-background-color:ButtonFace;--highcontrast-switch-handle-border-color-default:ButtonText;--highcontrast-switch-handle-border-color-focus:Highlight;--highcontrast-switch-handle-border-color-disabled:Highlight;--highcontrast-switch-handle-border-color-selected-default:Highlight;--highcontrast-switch-handle-border-color-selected-hover:Highlight;--highcontrast-switch-handle-border-color-selected-down:Highlight;--highcontrast-switch-handle-border-color-selected-focus:Highlight;--highcontrast-switch-background-color:ButtonFace;--highcontrast-switch-background-color-selected-default:Highlight;--highcontrast-switch-background-color-selected-hover:Highlight;--highcontrast-switch-background-color-selected-down:Highlight;--highcontrast-switch-background-color-selected-focus:Highlight;--highcontrast-switch-background-color-selected-disabled:Highlight;--highcontrast-switch-handle-border-color-hover:Highlight;--highcontrast-switch-handle-border-color-down:Highlight;--highcontrast-switch-focus-ring-color:ButtonText;forced-color-adjust:none}#input:not([checked])+#switch{box-shadow:inset 0 0 0 1px ButtonText}:host(:hover) #input:not([checked])+#switch{box-shadow:inset 0 0 0 1px Highlight}:host(:hover[checked]) #input[disabled]+#switch,:host(:hover[disabled][checked]) #input+#switch{background-color:GrayText;box-shadow:inset 0 0 0 1px GrayText}:host(:hover[checked]) #input[disabled]+#switch:before,:host(:hover[disabled][checked]) #input+#switch:before{background-color:ButtonFace;border-color:GrayText}#input[disabled]:not([checked])+#switch,:host([disabled]) #input:not([checked])+#switch{background-color:ButtonFace;box-shadow:inset 0 0 0 1px GrayText}#input[disabled]:not([checked])+#switch:before,:host([disabled]) #input:not([checked])+#switch:before{background-color:ButtonFace;border-color:GrayText}:host([checked]) #input[disabled]+#switch,:host([disabled][checked][dir]) #input+#switch{background-color:GrayText;box-shadow:inset 0 0 0 1px GrayText}:host([checked]) #input[disabled]+#switch:before,:host([disabled][checked][dir]) #input+#switch:before{background-color:ButtonFace;border-color:GrayText}#input[disabled]~#label,:host([disabled]) #input~#label{color:GrayText}}:host{--spectrum-switch-background-color-selected-default:var(
267
+ --system-spectrum-switch-background-color-selected-default
268
+ );--spectrum-switch-background-color-selected-hover:var(
269
+ --system-spectrum-switch-background-color-selected-hover
270
+ );--spectrum-switch-background-color-selected-down:var(
271
+ --system-spectrum-switch-background-color-selected-down
272
+ );--spectrum-switch-background-color-selected-focus:var(
273
+ --system-spectrum-switch-background-color-selected-focus
274
+ );--spectrum-switch-handle-border-color-default:var(
275
+ --system-spectrum-switch-handle-border-color-default
276
+ );--spectrum-switch-handle-border-color-hover:var(
277
+ --system-spectrum-switch-handle-border-color-hover
278
+ );--spectrum-switch-handle-border-color-down:var(
279
+ --system-spectrum-switch-handle-border-color-down
280
+ );--spectrum-switch-handle-border-color-focus:var(
281
+ --system-spectrum-switch-handle-border-color-focus
282
+ );--spectrum-switch-handle-border-color-selected-default:var(
283
+ --system-spectrum-switch-handle-border-color-selected-default
284
+ );--spectrum-switch-handle-border-color-selected-hover:var(
285
+ --system-spectrum-switch-handle-border-color-selected-hover
286
+ );--spectrum-switch-handle-border-color-selected-down:var(
287
+ --system-spectrum-switch-handle-border-color-selected-down
288
+ );--spectrum-switch-handle-border-color-selected-focus:var(
289
+ --system-spectrum-switch-handle-border-color-selected-focus
290
+ )}
291
+ `;export default t;
135
292
  //# sourceMappingURL=spectrum-switch.css.js.map
package/src/spectrum-switch.css.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["spectrum-switch.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{--spectrum-switch-handle-size:var(\n--spectrum-switch-m-handle-size,var(--spectrum-alias-control-two-size-m)\n);--spectrum-switch-handle-border-size:var(\n--spectrum-switch-m-handle-border-size,var(--spectrum-alias-border-size-thick)\n);--spectrum-switch-handle-border-radius:var(\n--spectrum-switch-m-handle-border-radius,var(--spectrum-alias-control-two-border-radius-m)\n);--spectrum-switch-text-gap:var(\n--spectrum-switch-m-text-gap,var(--spectrum-global-dimension-size-125)\n);--spectrum-switch-text-size:var(\n--spectrum-switch-m-text-size,var(--spectrum-global-dimension-font-size-100)\n);--spectrum-switch-track-height:var(\n--spectrum-switch-m-track-height,var(--spectrum-alias-control-three-height-m)\n);--spectrum-switch-track-width:var(\n--spectrum-switch-m-track-width,var(--spectrum-alias-control-three-width-m)\n);--spectrum-switch-cursor-hit-x:var(\n--spectrum-switch-m-cursor-hit-x,var(--spectrum-global-dimension-size-100)\n);--spectrum-switch-height:var(\n--spectrum-switch-m-height,var(--spectrum-global-dimension-size-400)\n);--spectrum-switch-label-margin-top:var(\n--spectrum-global-dimension-size-65\n);--spectrum-switch-label-line-height:1.49}:host([dir=ltr]){margin-right:calc(var(--spectrum-switch-cursor-hit-x)*2)}:host([dir=rtl]){margin-left:calc(var(--spectrum-switch-cursor-hit-x)*2)}:host{align-items:flex-start;display:inline-flex;max-width:100%;min-height:var(--spectrum-switch-height);position:relative;vertical-align:top}:host([dir=ltr]) #input{left:0}:host([dir=rtl]) #input{right:0}#input{box-sizing:border-box;cursor:pointer;height:100%;margin:0;opacity:0;padding:0;position:absolute;top:0;width:100%;z-index:1}:host([dir=ltr][checked]) #input+#switch:before{transform:translateX(calc(var(--spectrum-switch-track-width) - 100%))}:host([dir=rtl][checked]) #input+#switch:before{transform:translateX(calc((var(--spectrum-switch-track-width) - 100%)*-1))}#input[disabled],:host([disabled]) #input{cursor:default}#input.focus-visible+#switch:after{margin:calc(var(\n--spectrum-alias-focus-ring-gap,\nvar(--spectrum-global-dimension-static-size-25)\n)*-1)}#input:focus-visible+#switch:after{margin:calc(var(\n--spectrum-alias-focus-ring-gap,\nvar(--spectrum-global-dimension-static-size-25)\n)*-1)}#label{font-size:var(--spectrum-switch-text-size);line-height:var(--spectrum-switch-label-line-height);margin-bottom:0;margin-left:var(--spectrum-switch-text-gap);margin-right:var(--spectrum-switch-text-gap);margin-top:var(--spectrum-switch-label-margin-top);transition:color var(--spectrum-global-animation-duration-200,.16s) ease-in-out}:host([dir=ltr]) #switch{left:0}:host([dir=rtl]) #switch{right:0}:host([dir=ltr]) #switch{right:0}:host([dir=rtl]) #switch{left:0}#switch{border-radius:calc(var(--spectrum-switch-track-height)/2);box-sizing:border-box;display:inline-block;flex-grow:0;flex-shrink:0;height:var(--spectrum-switch-track-height);margin-bottom:calc((var(--spectrum-switch-height) - var(--spectrum-switch-track-height))/2);margin-left:0;margin-right:0;margin-top:calc((var(--spectrum-switch-height) - var(--spectrum-switch-track-height))/2);position:relative;transition:background var(--spectrum-global-animation-duration-100,.13s) ease-in-out,border var(--spectrum-global-animation-duration-100,.13s) ease-in-out;vertical-align:middle;width:var(--spectrum-switch-track-width)}#switch:before{box-sizing:border-box;content:\"\";display:block;position:absolute}:host([dir=ltr]) #switch:before{left:0}:host([dir=rtl]) #switch:before{right:0}#switch:before{border-radius:var(--spectrum-switch-handle-border-radius);border-style:solid;border-width:var(--spectrum-switch-handle-border-size);height:var(--spectrum-switch-handle-size);top:0;transition:background var(--spectrum-global-animation-duration-100,.13s) ease-in-out,border var(--spectrum-global-animation-duration-100,.13s) ease-in-out,transform 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-switch-handle-size)}:host([dir=ltr]) #switch:after{left:0}:host([dir=rtl]) #switch:after{right:0}:host([dir=ltr]) #switch:after{right:0}:host([dir=rtl]) #switch:after{left:0}#switch:after{border-radius:calc(var(--spectrum-switch-track-height) + var(\n--spectrum-alias-focus-ring-gap,\nvar(--spectrum-global-dimension-static-size-25)\n));bottom:0;content:\"\";display:block;margin:0;position:absolute;top:0;transition:opacity var(--spectrum-global-animation-duration-100,.13s) ease-out,margin var(--spectrum-global-animation-duration-100,.13s) ease-out}#switch{background-color:var(\n--spectrum-switch-m-track-color,var(--spectrum-global-color-gray-300)\n)}#switch:before{background-color:var(\n--spectrum-switch-m-handle-background-color,var(--spectrum-global-color-gray-75)\n);border-color:var(\n--spectrum-switch-m-handle-border-color,var(--spectrum-alias-toggle-border-color-default)\n)}#input~#label{color:var(\n--spectrum-switch-m-text-color,var(--spectrum-alias-component-text-color-default)\n)}:host([checked]) #input+#switch{background-color:var(\n--spectrum-switch-m-track-color-selected,var(--spectrum-alias-toggle-background-color-default)\n)}:host([checked]) #input+#switch:before{border-color:var(\n--spectrum-switch-m-handle-border-color-selected,var(--spectrum-alias-toggle-background-color-default)\n)}:host(:hover) #input+#switch:before{border-color:var(\n--spectrum-switch-m-handle-border-color-hover,var(--spectrum-alias-toggle-border-color-hover)\n);box-shadow:none}:host(:hover) #input~#label{color:var(\n--spectrum-switch-m-text-color-hover,var(--spectrum-alias-component-text-color-hover)\n)}:host(:hover[checked]) #input:enabled+#switch{background-color:var(\n--spectrum-switch-m-track-color-selected-hover,var(--spectrum-alias-toggle-background-color-hover)\n)}:host(:hover[checked]) #input:enabled+#switch:before{border-color:var(\n--spectrum-switch-m-handle-border-color-selected-hover,var(--spectrum-alias-toggle-background-color-hover)\n)}:host(:active) #input+#switch:before{border-color:var(\n--spectrum-switch-m-handle-border-color-down,var(--spectrum-alias-toggle-border-color-down)\n)}:host(:active) #input~#label{color:var(\n--spectrum-switch-m-text-color-down,var(--spectrum-alias-component-text-color-down)\n)}:host(:active[checked]) #input:enabled+#switch{background-color:var(\n--spectrum-switch-m-track-color-selected-down,var(--spectrum-alias-toggle-background-color-down)\n)}:host(:active[checked]) #input:enabled+#switch:before{border-color:var(\n--spectrum-switch-m-handle-border-color-selected-down,var(--spectrum-alias-toggle-background-color-down)\n)}:host([disabled]) #input+#switch{background-color:var(\n--spectrum-switch-m-track-color-disabled,var(--spectrum-global-color-gray-300)\n)}:host([disabled]) #input+#switch:before{border-color:var(\n--spectrum-switch-m-handle-border-color-disabled,var(--spectrum-global-color-gray-400)\n)}:host([disabled]) #input~#label{color:var(\n--spectrum-switch-m-text-color-disabled,var(--spectrum-alias-component-text-color-disabled)\n)}:host([disabled][checked][dir]) #input+#switch{background-color:var(\n--spectrum-switch-m-track-color-selected-disabled,var(--spectrum-global-color-gray-400)\n)}:host([disabled][checked][dir]) #input+#switch:before{border-color:var(\n--spectrum-switch-m-handle-border-color-selected-disabled,var(--spectrum-global-color-gray-400)\n)}:host([disabled][checked][dir]) #input~#label{color:var(\n--spectrum-switch-m-text-color-selected-disabled,var(--spectrum-alias-component-text-color-disabled)\n)}:host([emphasized][checked]) #input+#switch{background-color:var(\n--spectrum-switch-m-emphasized-track-color-selected,var(\n--spectrum-alias-toggle-background-color-emphasized-selected-default\n)\n)}:host([emphasized][checked]) #input+#switch:before{border-color:var(\n--spectrum-switch-m-emphasized-handle-border-color-selected,var(\n--spectrum-alias-toggle-background-color-emphasized-selected-default\n)\n)}:host([emphasized][checked]:hover) #input:enabled+#switch{background-color:var(\n--spectrum-switch-m-emphasized-track-color-selected-hover,var(--spectrum-alias-toggle-background-color-emphasized-selected-hover)\n)}:host([emphasized][checked]:hover) #input:enabled+#switch:before{border-color:var(\n--spectrum-switch-m-emphasized-handle-border-color-selected-hover,var(--spectrum-alias-toggle-background-color-emphasized-selected-hover)\n)}:host([emphasized]:active[checked]) #input:enabled+#switch{background-color:var(\n--spectrum-switch-m-emphasized-track-color-selected-down,var(--spectrum-alias-toggle-background-color-emphasized-selected-down)\n)}:host([emphasized]:active[checked]) #input:enabled+#switch:before{border-color:var(\n--spectrum-switch-m-emphasized-handle-border-color-selected-down,var(--spectrum-alias-toggle-background-color-emphasized-selected-down)\n)}#input.focus-visible+#switch:after,:host(:hover) #input.focus-visible+#switch:after{box-shadow:0 0 0 var(\n--spectrum-switch-m-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n) var(\n--spectrum-switch-m-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color)\n)}#input:focus-visible+#switch:after,:host(:hover) #input:focus-visible+#switch:after{box-shadow:0 0 0 var(\n--spectrum-switch-m-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n) var(\n--spectrum-switch-m-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color)\n)}#input.focus-visible+#switch:before,:host(:hover) #input.focus-visible+#switch:before{border-color:var(\n--spectrum-switch-m-handle-border-color-key-focus,var(--spectrum-alias-toggle-border-color-key-focus)\n)}#input:focus-visible+#switch:before,:host(:hover) #input:focus-visible+#switch:before{border-color:var(\n--spectrum-switch-m-handle-border-color-key-focus,var(--spectrum-alias-toggle-border-color-key-focus)\n)}:host(:hover[checked]) #input.focus-visible+#switch,:host([checked]) #input.focus-visible+#switch{background-color:var(\n--spectrum-switch-m-track-color-selected-key-focus,var(--spectrum-alias-toggle-background-color-key-focus)\n)}:host(:hover[checked]) #input:focus-visible+#switch,:host([checked]) #input:focus-visible+#switch{background-color:var(\n--spectrum-switch-m-track-color-selected-key-focus,var(--spectrum-alias-toggle-background-color-key-focus)\n)}:host(:hover[checked]) #input.focus-visible+#switch:before,:host([checked]) #input.focus-visible+#switch:before{border-color:var(\n--spectrum-switch-m-handle-border-color-selected-key-focus,var(--spectrum-alias-toggle-background-color-key-focus)\n)}:host(:hover[checked]) #input:focus-visible+#switch:before,:host([checked]) #input:focus-visible+#switch:before{border-color:var(\n--spectrum-switch-m-handle-border-color-selected-key-focus,var(--spectrum-alias-toggle-background-color-key-focus)\n)}:host([emphasized][checked]) #input.focus-visible+#switch,:host([emphasized][checked]:hover) #input.focus-visible+#switch{background-color:var(\n--spectrum-switch-m-emphasized-track-color-selected-key-focus,var(\n--spectrum-alias-toggle-background-color-emphasized-selected-key-focus\n)\n)}:host([emphasized][checked]) #input:focus-visible+#switch,:host([emphasized][checked]:hover) #input:focus-visible+#switch{background-color:var(\n--spectrum-switch-m-emphasized-track-color-selected-key-focus,var(\n--spectrum-alias-toggle-background-color-emphasized-selected-key-focus\n)\n)}:host([emphasized][checked]) #input.focus-visible+#switch:before,:host([emphasized][checked]:hover) #input.focus-visible+#switch:before{border-color:var(\n--spectrum-switch-m-emphasized-handle-border-color-selected-key-focus,var(\n--spectrum-alias-toggle-background-color-emphasized-selected-key-focus\n)\n)}:host([emphasized][checked]) #input:focus-visible+#switch:before,:host([emphasized][checked]:hover) #input:focus-visible+#switch:before{border-color:var(\n--spectrum-switch-m-emphasized-handle-border-color-selected-key-focus,var(\n--spectrum-alias-toggle-background-color-emphasized-selected-key-focus\n)\n)}@media (forced-colors:active){:host{--spectrum-switch-m-emphasized-handle-border-color-selected:Highlight;--spectrum-switch-m-emphasized-handle-border-color-selected-down:Highlight;--spectrum-switch-m-emphasized-handle-border-color-selected-hover:Highlight;--spectrum-switch-m-emphasized-handle-border-color-selected-key-focus:Highlight;--spectrum-switch-m-emphasized-track-color-selected:Highlight;--spectrum-switch-m-emphasized-track-color-selected-down:Highlight;--spectrum-switch-m-emphasized-track-color-selected-hover:Highlight;--spectrum-switch-m-emphasized-track-color-selected-key-focus:Highlight;--spectrum-switch-m-focus-ring-color-key-focus:ButtonText;--spectrum-switch-m-handle-background-color:ButtonFace;--spectrum-switch-m-handle-border-color:ButtonText;--spectrum-switch-m-handle-border-color-disabled:GrayText;--spectrum-switch-m-handle-border-color-down:Highlight;--spectrum-switch-m-handle-border-color-hover:Highlight;--spectrum-switch-m-handle-border-color-key-focus:ButtonText;--spectrum-switch-m-handle-border-color-selected:Highlight;--spectrum-switch-m-handle-border-color-selected-disabled:GrayText;--spectrum-switch-m-handle-border-color-selected-down:Highlight;--spectrum-switch-m-handle-border-color-selected-hover:Highlight;--spectrum-switch-m-handle-border-color-selected-key-focus:Highlight;--spectrum-switch-m-text-color:CanvasText;--spectrum-switch-m-text-color-disabled:GrayText;--spectrum-switch-m-text-color-down:CanvasText;--spectrum-switch-m-text-color-hover:CanvasText;--spectrum-switch-m-text-color-selected-disabled:GrayText;--spectrum-switch-m-track-color:ButtonFace;--spectrum-switch-m-track-color-disabled:ButtonFace;--spectrum-switch-m-track-color-selected:Highlight;--spectrum-switch-m-track-color-selected-disabled:GrayText;--spectrum-switch-m-track-color-selected-down:Highlight;--spectrum-switch-m-track-color-selected-hover:Highlight;--spectrum-switch-m-track-color-selected-key-focus:Highlight;forced-color-adjust:none}#input:not([checked])+#switch{box-shadow:inset 0 0 0 1px var(\n--spectrum-switch-m-handle-border-color,var(--spectrum-alias-toggle-border-color-default)\n)}:host(:hover) #input:not([checked])+#switch{box-shadow:inset 0 0 0 1px var(\n--spectrum-switch-m-handle-border-color-hover,var(--spectrum-alias-toggle-border-color-hover)\n)}:host([disabled]) #input+#switch{box-shadow:inset 0 0 0 1px var(\n--spectrum-switch-m-handle-border-color-disabled,var(--spectrum-global-color-gray-400)\n)}:host(:hover[disabled]) #input+#switch{box-shadow:inset 0 0 0 1px var(\n--spectrum-switch-m-handle-border-color-disabled,var(--spectrum-global-color-gray-400)\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;AAoIf,eAAe;",
6
- "names": []
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{--spectrum-switch-label-color-default:var(\n--spectrum-neutral-content-color-default\n);--spectrum-switch-label-color-hover:var(\n--spectrum-neutral-content-color-hover\n);--spectrum-switch-label-color-down:var(\n--spectrum-neutral-content-color-down\n);--spectrum-switch-label-color-focus:var(\n--spectrum-neutral-content-color-key-focus\n);--spectrum-switch-label-color-disabled:var(\n--spectrum-disabled-content-color\n);--spectrum-switch-background-color:var(--spectrum-gray-300);--spectrum-switch-background-color-disabled:var(--spectrum-gray-300);--spectrum-switch-background-color-selected-disabled:var(\n--spectrum-gray-400\n);--spectrum-switch-focus-ring-thickness:var(\n--mod-focus-ring-thickness,var(--spectrum-focus-ring-thickness)\n);--spectrum-switch-focus-ring-color:var(--spectrum-focus-ring-color);--spectrum-switch-handle-background-color:var(--spectrum-gray-75);--spectrum-switch-handle-border-color-disabled:var(--spectrum-gray-400)}.spectrum-Switch--disabled{--spectrum-switch-label-color-default:var(\n--spectrum-disabled-content-color\n)}:host([emphasized]){--spectrum-switch-background-color-selected-default:var(\n--spectrum-accent-color-900\n);--spectrum-switch-background-color-selected-hover:var(\n--spectrum-accent-color-1000\n);--spectrum-switch-background-color-selected-down:var(\n--spectrum-accent-color-1100\n);--spectrum-switch-background-color-selected-focus:var(\n--spectrum-accent-color-1000\n);--spectrum-switch-handle-border-color-selected-default:var(\n--spectrum-accent-color-900\n);--spectrum-switch-handle-border-color-selected-hover:var(\n--spectrum-accent-color-1000\n);--spectrum-switch-handle-border-color-selected-down:var(\n--spectrum-accent-color-1100\n);--spectrum-switch-handle-border-color-selected-focus:var(\n--spectrum-accent-color-1000\n)}:host([size=s]){--spectrum-switch-min-height:var(\n--spectrum-component-height-75\n);--spectrum-switch-control-width:var(--spectrum-switch-control-width-small);--spectrum-switch-control-height:var(\n--spectrum-switch-control-height-small\n);--spectrum-switch-control-label-spacing:var(--spectrum-text-to-control-75);--spectrum-switch-spacing-top-to-control:var(\n--spectrum-switch-top-to-control-small\n);--spectrum-switch-spacing-top-to-label:var(\n--spectrum-component-top-to-text-75\n);--spectrum-switch-font-size:var(--spectrum-font-size-75)}:host([size=m]){--spectrum-switch-min-height:var(\n--spectrum-component-height-100\n);--spectrum-switch-control-width:var(\n--spectrum-switch-control-width-medium\n);--spectrum-switch-control-height:var(\n--spectrum-switch-control-height-medium\n);--spectrum-switch-control-label-spacing:var(\n--spectrum-text-to-control-100\n);--spectrum-switch-spacing-top-to-control:var(\n--spectrum-switch-top-to-control-medium\n);--spectrum-switch-spacing-top-to-label:var(\n--spectrum-component-top-to-text-100\n);--spectrum-switch-font-size:var(--spectrum-font-size-100)}:host([size=l]){--spectrum-switch-min-height:var(\n--spectrum-component-height-200\n);--spectrum-switch-control-width:var(--spectrum-switch-control-width-large);--spectrum-switch-control-height:var(\n--spectrum-switch-control-height-large\n);--spectrum-switch-control-label-spacing:var(\n--spectrum-text-to-control-200\n);--spectrum-switch-spacing-top-to-control:var(\n--spectrum-switch-top-to-control-large\n);--spectrum-switch-spacing-top-to-label:var(\n--spectrum-component-top-to-text-200\n);--spectrum-switch-font-size:var(--spectrum-font-size-200)}:host([size=xl]){--spectrum-switch-min-height:var(\n--spectrum-component-height-300\n);--spectrum-switch-control-width:var(\n--spectrum-switch-control-width-extra-large\n);--spectrum-switch-control-height:var(\n--spectrum-switch-control-height-extra-large\n);--spectrum-switch-control-label-spacing:var(\n--spectrum-text-to-control-300\n);--spectrum-switch-spacing-top-to-control:var(\n--spectrum-switch-top-to-control-extra-large\n);--spectrum-switch-spacing-top-to-label:var(\n--spectrum-component-top-to-text-300\n);--spectrum-switch-font-size:var(--spectrum-font-size-300)}:host{align-items:flex-start;display:inline-flex;max-inline-size:100%;min-block-size:var(--mod-switch-height,var(--spectrum-switch-min-height));position:relative;vertical-align:top}#input{block-size:100%;box-sizing:border-box;cursor:pointer;inline-size:100%;inset-block-start:0;inset-inline-start:0;margin:0;opacity:0;padding:0;position:absolute;z-index:1}:host([dir=ltr][checked]) #input+#switch:before{transform:translateX(calc(var(\n--mod-switch-control-width,\nvar(--spectrum-switch-control-width)\n) - 100%))}:host([dir=rtl][checked]) #input+#switch:before{transform:translateX(calc((var(\n--mod-switch-control-width,\nvar(--spectrum-switch-control-width)\n) - 100%)*-1))}#input[disabled],:host([disabled]) #input{cursor:default}#input.focus-visible+#switch:after{margin:calc(var(--mod-focus-ring-gap, var(--spectrum-focus-ring-gap))*-1)}#input:focus-visible+#switch:after{margin:calc(var(--mod-focus-ring-gap, var(--spectrum-focus-ring-gap))*-1)}#label{color:var(\n--highcontrast-switch-label-color-default,var(\n--mod-switch-label-color-default,var(--spectrum-switch-label-color-default)\n)\n);font-size:var(--mod-switch-font-size,var(--spectrum-switch-font-size));line-height:var(--mod-line-height-100,var(--spectrum-line-height-100));margin-block-end:0;margin-block-start:var(\n--mod-switch-spacing-top-to-label,var(--spectrum-switch-spacing-top-to-label)\n);margin-inline:var(\n--mod-switch-control-label-spacing,var(--spectrum-switch-control-label-spacing)\n);transition:color var(\n--mod-animation-duration-200,var(--spectrum-animation-duration-200)\n) ease-in-out}#switch{block-size:var(\n--mod-switch-control-height,var(--spectrum-switch-control-height)\n);border-radius:calc(var(--mod-switch-control-height, var(--spectrum-switch-control-height))/2);box-sizing:border-box;display:inline-block;flex-grow:0;flex-shrink:0;inline-size:var(\n--mod-switch-control-width,var(--spectrum-switch-control-width)\n);inset-inline-end:0;inset-inline-start:0;margin-block:calc(var(--mod-switch-height, var(--spectrum-switch-min-height)) - var(\n--mod-switch-control-height,\nvar(--spectrum-switch-control-height)\n) - var(\n--mod-switch-spacing-top-to-control,\nvar(--spectrum-switch-spacing-top-to-control)\n));margin-inline:0;position:relative;transition:background var(\n--mod-animation-duration-100,var(--spectrum-animation-duration-100)\n) ease-in-out,border var(\n--mod-animation-duration-100,var(--spectrum-animation-duration-100)\n) ease-in-out;vertical-align:middle}#switch:before{box-sizing:border-box;content:\"\";display:block;position:absolute}#switch:before{block-size:var(\n--mod-switch-control-height,var(--spectrum-switch-control-height)\n);border-radius:calc(var(--mod-switch-control-height, var(--spectrum-switch-control-height))/2);border-style:solid;border-width:var(--mod-border-width-200,var(--spectrum-border-width-200));inline-size:var(\n--mod-switch-control-height,var(--spectrum-switch-control-height)\n);inset-block-start:0;inset-inline-start:0;transition:background var(\n--mod-animation-duration-100,var(--spectrum-animation-duration-100)\n) ease-in-out,border var(\n--mod-animation-duration-100,var(--spectrum-animation-duration-100)\n) ease-in-out,transform var(\n--mod-animation-duration-100,var(--spectrum-animation-duration-100)\n) ease-in-out,box-shadow var(\n--mod-animation-duration-100,var(--spectrum-animation-duration-100)\n) ease-in-out}#switch:after{border-radius:calc(var(--mod-switch-control-height, var(--spectrum-switch-control-height)) + var(--mod-focus-ring-gap, var(--spectrum-focus-ring-gap)));content:\"\";display:block;inset-block-end:0;inset-block-start:0;inset-inline-end:0;inset-inline-start:0;margin:0;position:absolute;transition:opacity var(\n--mod-animation-duration-100,var(--spectrum-animation-duration-100)\n) ease-out,margin var(\n--spectrum-animation-duration-100,var(--spectrum-animation-duration-100)\n) ease-out}#switch{background-color:var(\n--highcontrast-switch-background-color,var(\n--mod-switch-background-color,var(--spectrum-switch-background-color)\n)\n)}#switch:before{background-color:var(\n--highcontrast-switch-handle-background-color,var(\n--mod-switch-handle-background-color,var(--spectrum-switch-handle-background-color)\n)\n);border-color:var(\n--highcontrast-switch-handle-border-color-default,var(\n--mod-switch-handle-border-color-default,var(--spectrum-switch-handle-border-color-default)\n)\n)}:host(:hover) #input+#switch:before{border-color:var(\n--highcontrast-switch-handle-border-color-hover,var(\n--mod-switch-handle-border-color-hover,var(--spectrum-switch-handle-border-color-hover)\n)\n);box-shadow:none}:host(:hover) #input~#label{color:var(\n--highcontrast-switch-label-color-hover,var(\n--mod-switch-label-color-hover,var(--spectrum-switch-label-color-hover)\n)\n)}:host(:hover[checked]) #input:enabled+#switch{background-color:var(\n--highcontrast-switch-background-color-selected-hover,var(\n--mod-switch-background-color-selected-hover,var(--spectrum-switch-background-color-selected-hover)\n)\n)}:host(:hover[checked]) #input:enabled+#switch:before{border-color:var(\n--highcontrast-switch-handle-border-color-selected-hover,var(\n--mod-switch-handle-border-color-selected-hover,var(--spectrum-switch-handle-border-color-selected-hover)\n)\n)}:host(:hover) #input[disabled]+#switch,:host(:hover[disabled]) #input+#switch{background-color:var(\n--highcontrast-switch-background-color-disabled,var(\n--mod-switch-background-color-disabled,var(--spectrum-switch-background-color-disabled)\n)\n)}:host(:hover) #input[disabled]+#switch:before,:host(:hover[disabled]) #input+#switch:before{border-color:var(\n--highcontrast-switch-handle-border-color-disabled,var(\n--mod-switch-handle-border-color-disabled,var(--spectrum-switch-handle-border-color-disabled)\n)\n)}:host(:hover) #input[disabled]~#label,:host(:hover[disabled]) #input~#label{color:var(\n--highcontrast-switch-label-color-disabled,var(\n--mod-switch-label-color-disabled,var(--spectrum-switch-label-color-disabled)\n)\n)}:host(:hover[checked]) #input[disabled]+#switch,:host(:hover[disabled][checked]) #input+#switch{background-color:var(\n--highcontrast-switch-background-color-selected-disabled,var(\n--mod-switch-background-color-selected-disabled,var(--spectrum-switch-background-color-selected-disabled)\n)\n)}:host(:hover[checked]) #input[disabled]+#switch:before,:host(:hover[disabled][checked]) #input+#switch:before{border-color:var(\n--highcontrast-switch-handle-border-color-disabled,var(\n--mod-switch-handle-border-color-disabled,var(--spectrum-switch-handle-border-color-disabled)\n)\n)}:host(:hover[checked]) #input[disabled]~#label,:host(:hover[disabled][checked]) #input~#label{color:var(\n--highcontrast-switch-label-color-disabled,var(\n--mod-switch-label-color-disabled,var(--spectrum-switch-label-color-disabled)\n)\n)}:host(:active) #input+#switch:before{border-color:var(\n--highcontrast-switch-handle-border-color-down,var(\n--mod-switch-handle-border-color-down,var(--spectrum-switch-handle-border-color-down)\n)\n)}:host(:active) #input~#label{color:var(\n--highcontrast-switch-label-color-down,var(\n--mod-switch-label-color-down,var(--spectrum-switch-label-color-down)\n)\n)}:host(:active[checked]) #input:enabled+#switch{background-color:var(\n--highcontrast-switch-background-color-selected-down,var(\n--mod-switch-background-color-selected-down,var(--spectrum-switch-background-color-selected-down)\n)\n)}:host(:active[checked]) #input:enabled+#switch:before{border-color:var(\n--highcontrast-switch-handle-border-color-selected-down,var(\n--mod-switch-handle-border-color-selected-down,var(--spectrum-switch-handle-border-color-selected-down)\n)\n)}#input.focus-visible+#switch:after,:host(:hover) #input.focus-visible+#switch:after{box-shadow:0 0 0 var(\n--mod-switch-focus-ring-thickness,var(--spectrum-switch-focus-ring-thickness)\n) var(\n--highcontrast-switch-focus-ring-color,var(\n--mod-switch-focus-ring-color,var(--spectrum-switch-focus-ring-color)\n)\n)}#input:focus-visible+#switch:after,:host(:hover) #input:focus-visible+#switch:after{box-shadow:0 0 0 var(\n--mod-switch-focus-ring-thickness,var(--spectrum-switch-focus-ring-thickness)\n) var(\n--highcontrast-switch-focus-ring-color,var(\n--mod-switch-focus-ring-color,var(--spectrum-switch-focus-ring-color)\n)\n)}#input.focus-visible+#switch:before,:host(:hover) #input.focus-visible+#switch:before{border-color:var(\n--highcontrast-switch-handle-border-color-focus,var(\n--mod-switch-handle-border-color-focus,var(--spectrum-switch-handle-border-color-focus)\n)\n)}#input:focus-visible+#switch:before,:host(:hover) #input:focus-visible+#switch:before{border-color:var(\n--highcontrast-switch-handle-border-color-focus,var(\n--mod-switch-handle-border-color-focus,var(--spectrum-switch-handle-border-color-focus)\n)\n)}:host(:hover[checked]) #input.focus-visible+#switch,:host([checked]) #input.focus-visible+#switch{background-color:var(\n--highcontrast-switch-background-color-selected-focus,var(\n--mod-switch-background-color-selected-focus,var(--spectrum-switch-background-color-selected-focus)\n)\n)}:host(:hover[checked]) #input:focus-visible+#switch,:host([checked]) #input:focus-visible+#switch{background-color:var(\n--highcontrast-switch-background-color-selected-focus,var(\n--mod-switch-background-color-selected-focus,var(--spectrum-switch-background-color-selected-focus)\n)\n)}:host(:hover[checked]) #input.focus-visible+#switch:before,:host([checked]) #input.focus-visible+#switch:before{border-color:var(\n--highcontrast-switch-handle-border-color-selected-focus,var(\n--mod-switch-handle-border-color-selected-focus,var(--spectrum-switch-handle-border-color-selected-focus)\n)\n)}:host(:hover[checked]) #input:focus-visible+#switch:before,:host([checked]) #input:focus-visible+#switch:before{border-color:var(\n--highcontrast-switch-handle-border-color-selected-focus,var(\n--mod-switch-handle-border-color-selected-focus,var(--spectrum-switch-handle-border-color-selected-focus)\n)\n)}#input.focus-visible~#label,:host(:hover) #input.focus-visible~#label{color:var(\n--highcontrast-switch-label-color-focus,var(\n--mod-switch-label-color-focus,var(--spectrum-switch-label-color-focus)\n)\n)}#input:focus-visible~#label,:host(:hover) #input:focus-visible~#label{color:var(\n--highcontrast-switch-label-color-focus,var(\n--mod-switch-label-color-focus,var(--spectrum-switch-label-color-focus)\n)\n)}:host([checked]) #input+#switch{background-color:var(\n--highcontrast-switch-background-color-selected-default,var(\n--mod-switch-background-color-selected-default,var(--spectrum-switch-background-color-selected-default)\n)\n)}:host([checked]) #input+#switch:before{border-color:var(\n--highcontrast-switch-handle-border-color-selected-default,var(\n--mod-switch-handle-border-color-selected-default,var(--spectrum-switch-handle-border-color-selected-default)\n)\n)}#input[disabled]+#switch,:host([disabled]) #input+#switch{background-color:var(\n--highcontrast-switch-background-color-disabled,var(\n--mod-switch-background-color-disabled,var(--spectrum-switch-background-color-disabled)\n)\n)}#input[disabled]+#switch:before,:host([disabled]) #input+#switch:before{border-color:var(\n--highcontrast-switch-handle-border-color-disabled,var(\n--mod-switch-handle-border-color-disabled,var(--spectrum-switch-handle-border-color-disabled)\n)\n)}#input[disabled]~#label,:host([disabled]) #input~#label{color:var(\n--highcontrast-switch-label-color-disabled,var(\n--mod-switch-label-color-disabled,var(--spectrum-switch-label-color-disabled)\n)\n)}:host([checked]) #input[disabled]+#switch,:host([disabled][checked]) #input+#switch{background-color:var(\n--highcontrast-switch-background-color-selected-disabled,var(\n--mod-switch-background-color-selected-disabled,var(--spectrum-switch-background-color-selected-disabled)\n)\n)}:host([checked]) #input[disabled]+#switch:before,:host([disabled][checked]) #input+#switch:before{border-color:var(\n--highcontrast-switch-handle-border-color-disabled,var(\n--mod-switch-handle-border-color-disabled,var(--spectrum-switch-handle-border-color-disabled)\n)\n)}:host([checked]) #input[disabled]~#label,:host([disabled][checked]) #input~#label{color:var(\n--highcontrast-switch-label-color-disabled,var(\n--mod-switch-label-color-disabled,var(--spectrum-switch-label-color-disabled)\n)\n)}@media (forced-colors:active){:host{--highcontrast-switch-label-color-default:ButtonText;--highcontrast-switch-label-color-hover:ButtonText;--highcontrast-switch-label-color-down:ButtonText;--highcontrast-switch-label-color-focus:ButtonText;--highcontrast-switch-label-color-disabled:GrayText;--highcontrast-switch-handle-background-color:ButtonFace;--highcontrast-switch-handle-border-color-default:ButtonText;--highcontrast-switch-handle-border-color-focus:Highlight;--highcontrast-switch-handle-border-color-disabled:Highlight;--highcontrast-switch-handle-border-color-selected-default:Highlight;--highcontrast-switch-handle-border-color-selected-hover:Highlight;--highcontrast-switch-handle-border-color-selected-down:Highlight;--highcontrast-switch-handle-border-color-selected-focus:Highlight;--highcontrast-switch-background-color:ButtonFace;--highcontrast-switch-background-color-selected-default:Highlight;--highcontrast-switch-background-color-selected-hover:Highlight;--highcontrast-switch-background-color-selected-down:Highlight;--highcontrast-switch-background-color-selected-focus:Highlight;--highcontrast-switch-background-color-selected-disabled:Highlight;--highcontrast-switch-handle-border-color-hover:Highlight;--highcontrast-switch-handle-border-color-down:Highlight;--highcontrast-switch-focus-ring-color:ButtonText;forced-color-adjust:none}#input:not([checked])+#switch{box-shadow:inset 0 0 0 1px ButtonText}:host(:hover) #input:not([checked])+#switch{box-shadow:inset 0 0 0 1px Highlight}:host(:hover[checked]) #input[disabled]+#switch,:host(:hover[disabled][checked]) #input+#switch{background-color:GrayText;box-shadow:inset 0 0 0 1px GrayText}:host(:hover[checked]) #input[disabled]+#switch:before,:host(:hover[disabled][checked]) #input+#switch:before{background-color:ButtonFace;border-color:GrayText}#input[disabled]:not([checked])+#switch,:host([disabled]) #input:not([checked])+#switch{background-color:ButtonFace;box-shadow:inset 0 0 0 1px GrayText}#input[disabled]:not([checked])+#switch:before,:host([disabled]) #input:not([checked])+#switch:before{background-color:ButtonFace;border-color:GrayText}:host([checked]) #input[disabled]+#switch,:host([disabled][checked][dir]) #input+#switch{background-color:GrayText;box-shadow:inset 0 0 0 1px GrayText}:host([checked]) #input[disabled]+#switch:before,:host([disabled][checked][dir]) #input+#switch:before{background-color:ButtonFace;border-color:GrayText}#input[disabled]~#label,:host([disabled]) #input~#label{color:GrayText}}:host{--spectrum-switch-background-color-selected-default:var(\n--system-spectrum-switch-background-color-selected-default\n);--spectrum-switch-background-color-selected-hover:var(\n--system-spectrum-switch-background-color-selected-hover\n);--spectrum-switch-background-color-selected-down:var(\n--system-spectrum-switch-background-color-selected-down\n);--spectrum-switch-background-color-selected-focus:var(\n--system-spectrum-switch-background-color-selected-focus\n);--spectrum-switch-handle-border-color-default:var(\n--system-spectrum-switch-handle-border-color-default\n);--spectrum-switch-handle-border-color-hover:var(\n--system-spectrum-switch-handle-border-color-hover\n);--spectrum-switch-handle-border-color-down:var(\n--system-spectrum-switch-handle-border-color-down\n);--spectrum-switch-handle-border-color-focus:var(\n--system-spectrum-switch-handle-border-color-focus\n);--spectrum-switch-handle-border-color-selected-default:var(\n--system-spectrum-switch-handle-border-color-selected-default\n);--spectrum-switch-handle-border-color-selected-hover:var(\n--system-spectrum-switch-handle-border-color-selected-hover\n);--spectrum-switch-handle-border-color-selected-down:var(\n--system-spectrum-switch-handle-border-color-selected-down\n);--spectrum-switch-handle-border-color-selected-focus:var(\n--system-spectrum-switch-handle-border-color-selected-focus\n)}\n`;\nexport default styles;"],
5
+ "mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAmSf,eAAeC",
6
+ "names": ["css", "styles"]
7
7
  }
package/src/switch-legacy.css.dev.js CHANGED
@@ -1,3 +1,4 @@
1
+ "use strict";
1
2
  import { css } from "@spectrum-web-components/base";
2
3
  const styles = css`
3
4
  #switch:before{transition:background var(--spectrum-global-animation-duration-100,.13s) ease-in-out,border var(--spectrum-global-animation-duration-100,.13s) ease-in-out,box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out}
package/src/switch-legacy.css.dev.js.map CHANGED
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["switch-legacy.css.ts"],
4
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#switch:before{transition:background var(--spectrum-global-animation-duration-100,.13s) ease-in-out,border var(--spectrum-global-animation-duration-100,.13s) ease-in-out,box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out}\n`;\nexport default styles;"],
5
- "mappings": "AAWA;AACA,MAAM,SAAS;AAAA;AAAA;AAGf,eAAe;",
5
+ "mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAGf,eAAe;",
6
6
  "names": []
7
7
  }
package/src/switch-legacy.css.js CHANGED
@@ -1,6 +1,4 @@
1
- import { css } from "@spectrum-web-components/base";
2
- const styles = css`
1
+ "use strict";import{css as a}from"@spectrum-web-components/base";const o=a`
3
2
  #switch:before{transition:background var(--spectrum-global-animation-duration-100,.13s) ease-in-out,border var(--spectrum-global-animation-duration-100,.13s) ease-in-out,box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out}
4
- `;
5
- export default styles;
3
+ `;export default o;
6
4
  //# sourceMappingURL=switch-legacy.css.js.map
package/src/switch-legacy.css.js.map CHANGED
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["switch-legacy.css.ts"],
4
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#switch:before{transition:background var(--spectrum-global-animation-duration-100,.13s) ease-in-out,border var(--spectrum-global-animation-duration-100,.13s) ease-in-out,box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out}\n`;\nexport default styles;"],
5
- "mappings": "AAWA;AACA,MAAM,SAAS;AAAA;AAAA;AAGf,eAAe;",
6
- "names": []
5
+ "mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA,EAGf,eAAeC",
6
+ "names": ["css", "styles"]
7
7
  }