@adobe/react-spectrum 3.47.1 → 3.47.2

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 (232) hide show
  1. package/dist/private/accordion_vars.css +66 -48
  2. package/dist/private/accordion_vars.css.map +1 -1
  3. package/dist/private/actionbar/ActionBar.cjs.map +1 -1
  4. package/dist/private/actionbar/ActionBar.js.map +1 -1
  5. package/dist/private/actionbar/ActionBar.mjs.map +1 -1
  6. package/dist/private/actionbar/actionbar.css +59 -57
  7. package/dist/private/actionbar/actionbar.css.map +1 -1
  8. package/dist/private/actiongroup/ActionGroup.cjs +1 -1
  9. package/dist/private/actiongroup/ActionGroup.cjs.map +1 -1
  10. package/dist/private/actiongroup/ActionGroup.js +1 -1
  11. package/dist/private/actiongroup/ActionGroup.js.map +1 -1
  12. package/dist/private/actiongroup/ActionGroup.mjs +1 -1
  13. package/dist/private/actiongroup/ActionGroup.mjs.map +1 -1
  14. package/dist/private/actiongroup_vars.css +124 -114
  15. package/dist/private/actiongroup_vars.css.map +1 -1
  16. package/dist/private/autocomplete/MobileSearchAutocomplete.cjs.map +1 -1
  17. package/dist/private/autocomplete/MobileSearchAutocomplete.js.map +1 -1
  18. package/dist/private/autocomplete/MobileSearchAutocomplete.mjs.map +1 -1
  19. package/dist/private/autocomplete/SearchAutocomplete.cjs.map +1 -1
  20. package/dist/private/autocomplete/SearchAutocomplete.js.map +1 -1
  21. package/dist/private/autocomplete/SearchAutocomplete.mjs.map +1 -1
  22. package/dist/private/autocomplete/searchautocomplete.css +6 -6
  23. package/dist/private/autocomplete/searchautocomplete.css.map +1 -1
  24. package/dist/private/avatar_vars.css +12 -7
  25. package/dist/private/avatar_vars.css.map +1 -1
  26. package/dist/private/badge_vars.css +76 -68
  27. package/dist/private/badge_vars.css.map +1 -1
  28. package/dist/private/barloader_vars.css +132 -112
  29. package/dist/private/barloader_vars.css.map +1 -1
  30. package/dist/private/breadcrumb_vars.css +182 -148
  31. package/dist/private/breadcrumb_vars.css.map +1 -1
  32. package/dist/private/button/Button.cjs.map +1 -1
  33. package/dist/private/button/Button.js.map +1 -1
  34. package/dist/private/button/Button.mjs.map +1 -1
  35. package/dist/private/button_vars.css +822 -785
  36. package/dist/private/button_vars.css.map +1 -1
  37. package/dist/private/buttongroup_vars.css +25 -24
  38. package/dist/private/buttongroup_vars.css.map +1 -1
  39. package/dist/private/buttongroup_vars_css.cjs +5 -5
  40. package/dist/private/buttongroup_vars_css.mjs +5 -5
  41. package/dist/private/calendar/CalendarBase.cjs.map +1 -1
  42. package/dist/private/calendar/CalendarBase.js.map +1 -1
  43. package/dist/private/calendar/CalendarBase.mjs.map +1 -1
  44. package/dist/private/calendar_vars.css +280 -256
  45. package/dist/private/calendar_vars.css.map +1 -1
  46. package/dist/private/card/BaseLayout.cjs +2 -2
  47. package/dist/private/card/BaseLayout.cjs.map +1 -1
  48. package/dist/private/card/BaseLayout.js +2 -2
  49. package/dist/private/card/BaseLayout.js.map +1 -1
  50. package/dist/private/card/BaseLayout.mjs +2 -2
  51. package/dist/private/card/BaseLayout.mjs.map +1 -1
  52. package/dist/private/card/CardView.cjs.map +1 -1
  53. package/dist/private/card/CardView.js.map +1 -1
  54. package/dist/private/card/CardView.mjs.map +1 -1
  55. package/dist/private/card_vars.css +995 -907
  56. package/dist/private/card_vars.css.map +1 -1
  57. package/dist/private/checkbox_vars.css +318 -219
  58. package/dist/private/checkbox_vars.css.map +1 -1
  59. package/dist/private/circleloader_vars.css +99 -85
  60. package/dist/private/circleloader_vars.css.map +1 -1
  61. package/dist/private/color/ColorEditor.cjs.map +1 -1
  62. package/dist/private/color/ColorEditor.js.map +1 -1
  63. package/dist/private/color/ColorEditor.mjs.map +1 -1
  64. package/dist/private/color/ColorPicker.css +28 -14
  65. package/dist/private/color/ColorPicker.css.map +1 -1
  66. package/dist/private/color/colorfield.css +3 -3
  67. package/dist/private/color/colorfield.css.map +1 -1
  68. package/dist/private/colorarea_vars.css +36 -29
  69. package/dist/private/colorarea_vars.css.map +1 -1
  70. package/dist/private/colorhandle_vars.css +23 -23
  71. package/dist/private/colorloupe_vars.css +5 -5
  72. package/dist/private/colorloupe_vars.css.map +1 -1
  73. package/dist/private/colorslider_vars.css +34 -34
  74. package/dist/private/colorslider_vars.css.map +1 -1
  75. package/dist/private/colorwheel_vars.css +44 -38
  76. package/dist/private/colorwheel_vars.css.map +1 -1
  77. package/dist/private/combobox/ComboBox.cjs.map +1 -1
  78. package/dist/private/combobox/ComboBox.js.map +1 -1
  79. package/dist/private/combobox/ComboBox.mjs.map +1 -1
  80. package/dist/private/combobox/MobileComboBox.cjs.map +1 -1
  81. package/dist/private/combobox/MobileComboBox.js.map +1 -1
  82. package/dist/private/combobox/MobileComboBox.mjs.map +1 -1
  83. package/dist/private/combobox/combobox.css +6 -6
  84. package/dist/private/combobox/combobox.css.map +1 -1
  85. package/dist/private/contextualhelp/ContextualHelp.cjs.map +1 -1
  86. package/dist/private/contextualhelp/ContextualHelp.js.map +1 -1
  87. package/dist/private/contextualhelp/ContextualHelp.mjs.map +1 -1
  88. package/dist/private/contextualhelp_vars.css +13 -13
  89. package/dist/private/contextualhelp_vars.css.map +1 -1
  90. package/dist/private/datepicker/DatePicker.cjs.map +1 -1
  91. package/dist/private/datepicker/DatePicker.js.map +1 -1
  92. package/dist/private/datepicker/DatePicker.mjs.map +1 -1
  93. package/dist/private/datepicker/DateRangePicker.cjs.map +1 -1
  94. package/dist/private/datepicker/DateRangePicker.js.map +1 -1
  95. package/dist/private/datepicker/DateRangePicker.mjs.map +1 -1
  96. package/dist/private/datepicker/styles.css +33 -31
  97. package/dist/private/datepicker/styles.css.map +1 -1
  98. package/dist/private/dialog/AlertDialog.cjs.map +1 -1
  99. package/dist/private/dialog/AlertDialog.js.map +1 -1
  100. package/dist/private/dialog/AlertDialog.mjs.map +1 -1
  101. package/dist/private/dialog/Dialog.cjs.map +1 -1
  102. package/dist/private/dialog/Dialog.js.map +1 -1
  103. package/dist/private/dialog/Dialog.mjs.map +1 -1
  104. package/dist/private/dialog_vars.css +216 -180
  105. package/dist/private/dialog_vars.css.map +1 -1
  106. package/dist/private/dropdown_vars.css +150 -114
  107. package/dist/private/dropdown_vars.css.map +1 -1
  108. package/dist/private/dropzone/DropZone.cjs.map +1 -1
  109. package/dist/private/dropzone/DropZone.js.map +1 -1
  110. package/dist/private/dropzone/DropZone.mjs.map +1 -1
  111. package/dist/private/dropzone_vars.css +114 -85
  112. package/dist/private/dropzone_vars.css.map +1 -1
  113. package/dist/private/fieldgroup_vars.css +54 -46
  114. package/dist/private/fieldgroup_vars.css.map +1 -1
  115. package/dist/private/fieldlabel_vars.css +183 -169
  116. package/dist/private/fieldlabel_vars.css.map +1 -1
  117. package/dist/private/helptext_vars.css +83 -69
  118. package/dist/private/helptext_vars.css.map +1 -1
  119. package/dist/private/icon_vars.css +52 -36
  120. package/dist/private/icon_vars.css.map +1 -1
  121. package/dist/private/illustratedmessage_vars.css +33 -31
  122. package/dist/private/illustratedmessage_vars.css.map +1 -1
  123. package/dist/private/inlinealert/InlineAlert.cjs.map +1 -1
  124. package/dist/private/inlinealert/InlineAlert.js.map +1 -1
  125. package/dist/private/inlinealert/InlineAlert.mjs.map +1 -1
  126. package/dist/private/inlinealert_vars.css +54 -46
  127. package/dist/private/inlinealert_vars.css.map +1 -1
  128. package/dist/private/inputgroup_vars.css +499 -319
  129. package/dist/private/inputgroup_vars.css.map +1 -1
  130. package/dist/private/label/Label.cjs.map +1 -1
  131. package/dist/private/label/Label.js.map +1 -1
  132. package/dist/private/label/Label.mjs.map +1 -1
  133. package/dist/private/link_vars.css +101 -85
  134. package/dist/private/link_vars.css.map +1 -1
  135. package/dist/private/list/ListView.cjs.map +1 -1
  136. package/dist/private/list/ListView.js.map +1 -1
  137. package/dist/private/list/ListView.mjs.map +1 -1
  138. package/dist/private/list/styles.css +425 -333
  139. package/dist/private/list/styles.css.map +1 -1
  140. package/dist/private/listbox/ListBoxBase.cjs.map +1 -1
  141. package/dist/private/listbox/ListBoxBase.js.map +1 -1
  142. package/dist/private/listbox/ListBoxBase.mjs.map +1 -1
  143. package/dist/private/menu/ActionMenu.cjs.map +1 -1
  144. package/dist/private/menu/ActionMenu.js.map +1 -1
  145. package/dist/private/menu/ActionMenu.mjs.map +1 -1
  146. package/dist/private/menu/Menu.cjs.map +1 -1
  147. package/dist/private/menu/Menu.js.map +1 -1
  148. package/dist/private/menu/Menu.mjs.map +1 -1
  149. package/dist/private/menu/MenuItem.cjs.map +1 -1
  150. package/dist/private/menu/MenuItem.js.map +1 -1
  151. package/dist/private/menu/MenuItem.mjs.map +1 -1
  152. package/dist/private/menu_vars.css +178 -160
  153. package/dist/private/menu_vars.css.map +1 -1
  154. package/dist/private/modal_vars.css +64 -54
  155. package/dist/private/modal_vars.css.map +1 -1
  156. package/dist/private/overlays/overlays.css +7 -5
  157. package/dist/private/overlays/overlays.css.map +1 -1
  158. package/dist/private/package.cjs +1 -1
  159. package/dist/private/package.cjs.map +1 -1
  160. package/dist/private/package.js +1 -1
  161. package/dist/private/package.js.map +1 -1
  162. package/dist/private/package.mjs +1 -1
  163. package/dist/private/package.mjs.map +1 -1
  164. package/dist/private/page_vars.css +54 -46
  165. package/dist/private/page_vars.css.map +1 -1
  166. package/dist/private/picker/Picker.cjs.map +1 -1
  167. package/dist/private/picker/Picker.js.map +1 -1
  168. package/dist/private/picker/Picker.mjs.map +1 -1
  169. package/dist/private/popover_vars.css +105 -83
  170. package/dist/private/popover_vars.css.map +1 -1
  171. package/dist/private/radio_vars.css +257 -163
  172. package/dist/private/radio_vars.css.map +1 -1
  173. package/dist/private/rule_vars.css +73 -63
  174. package/dist/private/rule_vars.css.map +1 -1
  175. package/dist/private/search_vars.css +95 -87
  176. package/dist/private/search_vars.css.map +1 -1
  177. package/dist/private/slider/RangeSlider.cjs.map +1 -1
  178. package/dist/private/slider/RangeSlider.js.map +1 -1
  179. package/dist/private/slider/RangeSlider.mjs.map +1 -1
  180. package/dist/private/slider_vars.css +516 -402
  181. package/dist/private/slider_vars.css.map +1 -1
  182. package/dist/private/statuslight_vars.css +76 -68
  183. package/dist/private/statuslight_vars.css.map +1 -1
  184. package/dist/private/steplist/StepListItem.cjs.map +1 -1
  185. package/dist/private/steplist/StepListItem.js.map +1 -1
  186. package/dist/private/steplist/StepListItem.mjs.map +1 -1
  187. package/dist/private/steplist_vars.css +371 -297
  188. package/dist/private/steplist_vars.css.map +1 -1
  189. package/dist/private/stepper_vars.css +557 -438
  190. package/dist/private/stepper_vars.css.map +1 -1
  191. package/dist/private/table/Resizer.cjs.map +1 -1
  192. package/dist/private/table/Resizer.js.map +1 -1
  193. package/dist/private/table/Resizer.mjs.map +1 -1
  194. package/dist/private/table/TableViewBase.cjs.map +1 -1
  195. package/dist/private/table/TableViewBase.js.map +1 -1
  196. package/dist/private/table/TableViewBase.mjs.map +1 -1
  197. package/dist/private/table/table.css +103 -95
  198. package/dist/private/table/table.css.map +1 -1
  199. package/dist/private/table_vars.css +458 -350
  200. package/dist/private/table_vars.css.map +1 -1
  201. package/dist/private/tabs_vars.css +319 -281
  202. package/dist/private/tabs_vars.css.map +1 -1
  203. package/dist/private/tag/TagGroup.cjs.map +1 -1
  204. package/dist/private/tag/TagGroup.js.map +1 -1
  205. package/dist/private/tag/TagGroup.mjs.map +1 -1
  206. package/dist/private/tags_vars.css +167 -149
  207. package/dist/private/tags_vars.css.map +1 -1
  208. package/dist/private/textfield/TextFieldBase.cjs.map +1 -1
  209. package/dist/private/textfield/TextFieldBase.js.map +1 -1
  210. package/dist/private/textfield/TextFieldBase.mjs.map +1 -1
  211. package/dist/private/textfield_vars.css +278 -250
  212. package/dist/private/textfield_vars.css.map +1 -1
  213. package/dist/private/toast/Toast.cjs.map +1 -1
  214. package/dist/private/toast/Toast.js.map +1 -1
  215. package/dist/private/toast/Toast.mjs.map +1 -1
  216. package/dist/private/toast/toastContainer.css +64 -56
  217. package/dist/private/toast/toastContainer.css.map +1 -1
  218. package/dist/private/toast_vars.css +5 -3
  219. package/dist/private/toast_vars.css.map +1 -1
  220. package/dist/private/toggle_vars.css +287 -211
  221. package/dist/private/toggle_vars.css.map +1 -1
  222. package/dist/private/tooltip_vars.css +150 -127
  223. package/dist/private/tooltip_vars.css.map +1 -1
  224. package/dist/private/tray_vars.css +54 -46
  225. package/dist/private/tray_vars.css.map +1 -1
  226. package/dist/private/typography_index.css +54 -46
  227. package/dist/private/typography_index.css.map +1 -1
  228. package/dist/private/underlay_vars.css +58 -50
  229. package/dist/private/underlay_vars.css.map +1 -1
  230. package/dist/private/well_vars.css +54 -46
  231. package/dist/private/well_vars.css.map +1 -1
  232. package/package.json +6 -6
@@ -1,38 +1,38 @@
1
1
  ._0KxFhq_i18nFontFamily {
2
2
  font-synthesis: weight;
3
3
  font-family: adobe-clean, Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu, Trebuchet MS, Lucida Grande, sans-serif;
4
- }
5
4
 
6
- ._0KxFhq_i18nFontFamily:lang(ar) {
7
- font-family: myriad-arabic, adobe-clean, Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu, Trebuchet MS, Lucida Grande, sans-serif;
8
- }
5
+ &:lang(ar) {
6
+ font-family: myriad-arabic, adobe-clean, Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu, Trebuchet MS, Lucida Grande, sans-serif;
7
+ }
9
8
 
10
- ._0KxFhq_i18nFontFamily:lang(he) {
11
- font-family: myriad-hebrew, adobe-clean, Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu, Trebuchet MS, Lucida Grande, sans-serif;
12
- }
9
+ &:lang(he) {
10
+ font-family: myriad-hebrew, adobe-clean, Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu, Trebuchet MS, Lucida Grande, sans-serif;
11
+ }
13
12
 
14
- ._0KxFhq_i18nFontFamily:lang(zh) {
15
- font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Heiti TC Light, sans-serif;
16
- }
13
+ &:lang(zh) {
14
+ font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Heiti TC Light, sans-serif;
15
+ }
17
16
 
18
- ._0KxFhq_i18nFontFamily:lang(zh-Hans) {
19
- font-family: adobe-clean-han-simplified-c, source-han-simplified-c, SimSun, Heiti SC Light, sans-serif;
20
- }
17
+ &:lang(zh-Hans) {
18
+ font-family: adobe-clean-han-simplified-c, source-han-simplified-c, SimSun, Heiti SC Light, sans-serif;
19
+ }
21
20
 
22
- ._0KxFhq_i18nFontFamily:lang(zh-Hant) {
23
- font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Microsoft JhengHei UI, Microsoft JhengHei, Heiti TC Light, sans-serif;
24
- }
21
+ &:lang(zh-Hant) {
22
+ font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Microsoft JhengHei UI, Microsoft JhengHei, Heiti TC Light, sans-serif;
23
+ }
25
24
 
26
- ._0KxFhq_i18nFontFamily:lang(zh-SG), ._0KxFhq_i18nFontFamily:lang(zh-CN) {
27
- font-family: adobe-clean-han-simplified-c, source-han-simplified-c, SimSun, Heiti SC Light, sans-serif;
28
- }
25
+ &:lang(zh-SG), &:lang(zh-CN) {
26
+ font-family: adobe-clean-han-simplified-c, source-han-simplified-c, SimSun, Heiti SC Light, sans-serif;
27
+ }
29
28
 
30
- ._0KxFhq_i18nFontFamily:lang(ko) {
31
- font-family: adobe-clean-han-korean, source-han-korean, Malgun Gothic, Apple Gothic, sans-serif;
32
- }
29
+ &:lang(ko) {
30
+ font-family: adobe-clean-han-korean, source-han-korean, Malgun Gothic, Apple Gothic, sans-serif;
31
+ }
33
32
 
34
- ._0KxFhq_i18nFontFamily:lang(ja) {
35
- font-family: adobe-clean-han-japanese, Hiragino Kaku Gothic ProN, ヒラギノ角ゴ ProN W3, Osaka, YuGothic, Yu Gothic, メイリオ, Meiryo, MS Pゴシック, MS PGothic, sans-serif;
33
+ &:lang(ja) {
34
+ font-family: adobe-clean-han-japanese, Hiragino Kaku Gothic ProN, ヒラギノ角ゴ ProN W3, Osaka, YuGothic, Yu Gothic, メイリオ, Meiryo, MS Pゴシック, MS PGothic, sans-serif;
35
+ }
36
36
  }
37
37
 
38
38
  ._0KxFhq_spectrum-FocusRing-ring {
@@ -41,42 +41,50 @@
41
41
  --spectrum-focus-ring-size: var(--spectrum-alias-input-focusring-size);
42
42
  --spectrum-focus-ring-border-size: 0px;
43
43
  --spectrum-focus-ring-color: var(--spectrum-high-contrast-focus-ring-color, var(--spectrum-alias-focus-ring-color, var(--spectrum-alias-focus-color)));
44
- }
45
44
 
46
- ._0KxFhq_spectrum-FocusRing-ring:after {
47
- border-radius: calc(var(--spectrum-focus-ring-border-radius) + var(--spectrum-focus-ring-gap));
48
- content: "";
49
- margin: calc(-1 * var(--spectrum-focus-ring-border-size));
50
- pointer-events: none;
51
- transition: box-shadow var(--spectrum-global-animation-duration-100, .13s) ease-out,
45
+ &:after {
46
+ border-radius: calc(var(--spectrum-focus-ring-border-radius) + var(--spectrum-focus-ring-gap));
47
+ content: "";
48
+ margin: calc(-1 * var(--spectrum-focus-ring-border-size));
49
+ pointer-events: none;
50
+ transition: box-shadow var(--spectrum-global-animation-duration-100, .13s) ease-out,
52
51
  margin var(--spectrum-global-animation-duration-100, .13s) ease-out;
53
- display: block;
54
- position: absolute;
55
- inset: 0;
52
+ display: block;
53
+ position: absolute;
54
+ inset: 0;
55
+ }
56
56
  }
57
57
 
58
- ._0KxFhq_spectrum-FocusRing._0KxFhq_focus-ring:after {
59
- margin: calc(var(--spectrum-focus-ring-gap) * -1 - var(--spectrum-focus-ring-border-size));
60
- box-shadow: 0 0 0 var(--spectrum-focus-ring-size) var(--spectrum-focus-ring-color);
58
+ ._0KxFhq_spectrum-FocusRing {
59
+ &._0KxFhq_focus-ring {
60
+ &:after {
61
+ margin: calc(var(--spectrum-focus-ring-gap) * -1 - var(--spectrum-focus-ring-border-size));
62
+ box-shadow: 0 0 0 var(--spectrum-focus-ring-size) var(--spectrum-focus-ring-color);
63
+ }
64
+ }
61
65
  }
62
66
 
63
- ._0KxFhq_spectrum-FocusRing--quiet:after {
64
- border-radius: 0;
65
- }
67
+ ._0KxFhq_spectrum-FocusRing--quiet {
68
+ &:after {
69
+ border-radius: 0;
70
+ }
66
71
 
67
- ._0KxFhq_spectrum-FocusRing--quiet._0KxFhq_focus-ring:after {
68
- margin: 0 0 calc(var(--spectrum-focus-ring-gap) * -1 - var(--spectrum-focus-ring-border-size))
72
+ &._0KxFhq_focus-ring {
73
+ &:after {
74
+ margin: 0 0 calc(var(--spectrum-focus-ring-gap) * -1 - var(--spectrum-focus-ring-border-size))
69
75
  0;
70
- box-shadow: 0 var(--spectrum-focus-ring-size) 0 var(--spectrum-focus-ring-color);
76
+ box-shadow: 0 var(--spectrum-focus-ring-size) 0 var(--spectrum-focus-ring-color);
77
+ }
78
+ }
71
79
  }
72
80
 
73
81
  @media (forced-colors: active) {
74
82
  ._0KxFhq_spectrum-FocusRing, ._0KxFhq_spectrum-FocusRing-ring, ._0KxFhq_spectrum-FocusRing--quiet {
75
83
  --spectrum-high-contrast-focus-ring-color: Highlight;
76
- }
77
84
 
78
- :is(._0KxFhq_spectrum-FocusRing, ._0KxFhq_spectrum-FocusRing-ring, ._0KxFhq_spectrum-FocusRing--quiet):after {
79
- forced-color-adjust: none;
85
+ &:after {
86
+ forced-color-adjust: none;
87
+ }
80
88
  }
81
89
  }
82
90
 
@@ -104,22 +112,28 @@
104
112
  position: absolute;
105
113
  inset-block-start: 0;
106
114
  inset-inline-start: 0;
107
- }
108
115
 
109
- [dir="ltr"] :is(._0KxFhq_spectrum-ToggleSwitch-input:checked + ._0KxFhq_spectrum-ToggleSwitch-switch):before {
110
- transform: translateX(calc(var(--spectrum-switch-track-width) - 100%));
111
- }
116
+ &:checked + ._0KxFhq_spectrum-ToggleSwitch-switch {
117
+ [dir="ltr"] &:before {
118
+ transform: translateX(calc(var(--spectrum-switch-track-width) - 100%));
119
+ }
112
120
 
113
- [dir="rtl"] :is(._0KxFhq_spectrum-ToggleSwitch-input:checked + ._0KxFhq_spectrum-ToggleSwitch-switch):before {
114
- transform: translateX(calc(100% - var(--spectrum-switch-track-width)));
115
- }
121
+ [dir="rtl"] &:before {
122
+ transform: translateX(calc(100% - var(--spectrum-switch-track-width)));
123
+ }
124
+ }
116
125
 
117
- ._0KxFhq_spectrum-ToggleSwitch-input:disabled, ._0KxFhq_spectrum-ToggleSwitch-input[disabled] {
118
- cursor: default;
119
- }
126
+ &:disabled, &[disabled] {
127
+ cursor: default;
128
+ }
120
129
 
121
- ._0KxFhq_spectrum-ToggleSwitch-input._0KxFhq_focus-ring + ._0KxFhq_spectrum-ToggleSwitch-switch:after {
122
- margin: calc(var(--spectrum-alias-focus-ring-gap, var(--spectrum-global-dimension-static-size-25)) * -1);
130
+ &._0KxFhq_focus-ring {
131
+ & + ._0KxFhq_spectrum-ToggleSwitch-switch {
132
+ &:after {
133
+ margin: calc(var(--spectrum-alias-focus-ring-gap, var(--spectrum-global-dimension-static-size-25)) * -1);
134
+ }
135
+ }
136
+ }
123
137
  }
124
138
 
125
139
  ._0KxFhq_spectrum-ToggleSwitch-label {
@@ -146,36 +160,36 @@
146
160
  display: inline-block;
147
161
  position: relative;
148
162
  inset-inline: 0;
149
- }
150
163
 
151
- ._0KxFhq_spectrum-ToggleSwitch-switch:before {
152
- content: "";
153
- box-sizing: border-box;
154
- transition: background var(--spectrum-global-animation-duration-100, .13s) ease-in-out,
164
+ &:before {
165
+ content: "";
166
+ box-sizing: border-box;
167
+ transition: background var(--spectrum-global-animation-duration-100, .13s) ease-in-out,
155
168
  border var(--spectrum-global-animation-duration-100, .13s) ease-in-out,
156
169
  transform var(--spectrum-global-animation-duration-100, .13s) ease-in-out,
157
170
  box-shadow var(--spectrum-global-animation-duration-100, .13s) ease-in-out;
158
- inline-size: var(--spectrum-switch-handle-size, var(--spectrum-global-dimension-size-175));
159
- block-size: var(--spectrum-switch-handle-size, var(--spectrum-global-dimension-size-175));
160
- border-width: var(--spectrum-switch-handle-border-size, var(--spectrum-alias-border-size-thick));
161
- border-radius: calc(var(--spectrum-switch-handle-size, var(--spectrum-global-dimension-size-175)) / 2);
162
- border-style: solid;
163
- display: block;
164
- position: absolute;
165
- inset-block-start: 0;
166
- inset-inline-start: 0;
167
- }
171
+ inline-size: var(--spectrum-switch-handle-size, var(--spectrum-global-dimension-size-175));
172
+ block-size: var(--spectrum-switch-handle-size, var(--spectrum-global-dimension-size-175));
173
+ border-width: var(--spectrum-switch-handle-border-size, var(--spectrum-alias-border-size-thick));
174
+ border-radius: calc(var(--spectrum-switch-handle-size, var(--spectrum-global-dimension-size-175)) / 2);
175
+ border-style: solid;
176
+ display: block;
177
+ position: absolute;
178
+ inset-block-start: 0;
179
+ inset-inline-start: 0;
180
+ }
168
181
 
169
- ._0KxFhq_spectrum-ToggleSwitch-switch:after {
170
- border-radius: calc(calc(var(--spectrum-switch-track-height, var(--spectrum-global-dimension-size-175)) / 2) + var(--spectrum-alias-focus-ring-gap, var(--spectrum-global-dimension-static-size-25)) * 2);
171
- content: "";
172
- transition: box-shadow var(--spectrum-global-animation-duration-100, .13s) ease-out,
182
+ &:after {
183
+ border-radius: calc(calc(var(--spectrum-switch-track-height, var(--spectrum-global-dimension-size-175)) / 2) + var(--spectrum-alias-focus-ring-gap, var(--spectrum-global-dimension-static-size-25)) * 2);
184
+ content: "";
185
+ transition: box-shadow var(--spectrum-global-animation-duration-100, .13s) ease-out,
173
186
  margin var(--spectrum-global-animation-duration-100, .13s) ease-out;
174
- margin: 0;
175
- display: block;
176
- position: absolute;
177
- inset: 0;
178
- transform: translateX(0);
187
+ margin: 0;
188
+ display: block;
189
+ position: absolute;
190
+ inset: 0;
191
+ transform: translateX(0);
192
+ }
179
193
  }
180
194
 
181
195
  ._0KxFhq_spectrum-ToggleSwitch {
@@ -200,169 +214,229 @@
200
214
 
201
215
  ._0KxFhq_spectrum-ToggleSwitch-switch {
202
216
  background-color: var(--spectrum-switch-emphasized-track-color, var(--spectrum-global-color-gray-300));
203
- }
204
217
 
205
- ._0KxFhq_spectrum-ToggleSwitch-switch:before {
206
- background-color: var(--spectrum-switch-emphasized-handle-background-color, var(--spectrum-global-color-gray-75));
207
- border-color: var(--spectrum-switch-emphasized-handle-border-color, var(--spectrum-global-color-gray-600));
218
+ &:before {
219
+ background-color: var(--spectrum-switch-emphasized-handle-background-color, var(--spectrum-global-color-gray-75));
220
+ border-color: var(--spectrum-switch-emphasized-handle-border-color, var(--spectrum-global-color-gray-600));
221
+ }
208
222
  }
209
223
 
210
224
  ._0KxFhq_spectrum-ToggleSwitch-input ~ ._0KxFhq_spectrum-ToggleSwitch-label {
211
225
  color: var(--spectrum-switch-emphasized-text-color, var(--spectrum-alias-text-color));
212
226
  }
213
227
 
214
- ._0KxFhq_spectrum-ToggleSwitch-input:checked + ._0KxFhq_spectrum-ToggleSwitch-switch {
215
- background-color: var(--spectrum-switch-emphasized-track-color-selected, var(--spectrum-global-color-blue-500));
216
- }
228
+ ._0KxFhq_spectrum-ToggleSwitch-input {
229
+ &:checked + ._0KxFhq_spectrum-ToggleSwitch-switch {
230
+ background-color: var(--spectrum-switch-emphasized-track-color-selected, var(--spectrum-global-color-blue-500));
217
231
 
218
- ._0KxFhq_spectrum-ToggleSwitch-input:checked + ._0KxFhq_spectrum-ToggleSwitch-switch:before {
219
- border-color: var(--spectrum-switch-emphasized-handle-border-color-selected, var(--spectrum-global-color-blue-500));
232
+ &:before {
233
+ border-color: var(--spectrum-switch-emphasized-handle-border-color-selected, var(--spectrum-global-color-blue-500));
234
+ }
235
+ }
220
236
  }
221
237
 
222
- ._0KxFhq_spectrum-ToggleSwitch._0KxFhq_is-hovered ._0KxFhq_spectrum-ToggleSwitch-input + ._0KxFhq_spectrum-ToggleSwitch-switch:before {
223
- border-color: var(--spectrum-switch-emphasized-handle-border-color-hover, var(--spectrum-global-color-gray-700));
224
- box-shadow: none;
225
- }
238
+ ._0KxFhq_spectrum-ToggleSwitch._0KxFhq_is-hovered {
239
+ & ._0KxFhq_spectrum-ToggleSwitch-input {
240
+ & + ._0KxFhq_spectrum-ToggleSwitch-switch {
241
+ &:before {
242
+ border-color: var(--spectrum-switch-emphasized-handle-border-color-hover, var(--spectrum-global-color-gray-700));
243
+ box-shadow: none;
244
+ }
245
+ }
226
246
 
227
- ._0KxFhq_spectrum-ToggleSwitch._0KxFhq_is-hovered ._0KxFhq_spectrum-ToggleSwitch-input ~ ._0KxFhq_spectrum-ToggleSwitch-label {
228
- color: var(--spectrum-switch-emphasized-text-color-hover, var(--spectrum-alias-text-color-hover));
229
- }
247
+ & ~ ._0KxFhq_spectrum-ToggleSwitch-label {
248
+ color: var(--spectrum-switch-emphasized-text-color-hover, var(--spectrum-alias-text-color-hover));
249
+ }
230
250
 
231
- ._0KxFhq_spectrum-ToggleSwitch._0KxFhq_is-hovered ._0KxFhq_spectrum-ToggleSwitch-input:checked:enabled + ._0KxFhq_spectrum-ToggleSwitch-switch {
232
- background-color: var(--spectrum-switch-emphasized-track-color-selected-hover, var(--spectrum-global-color-blue-600));
233
- }
251
+ &:checked:enabled + ._0KxFhq_spectrum-ToggleSwitch-switch {
252
+ background-color: var(--spectrum-switch-emphasized-track-color-selected-hover, var(--spectrum-global-color-blue-600));
234
253
 
235
- ._0KxFhq_spectrum-ToggleSwitch._0KxFhq_is-hovered ._0KxFhq_spectrum-ToggleSwitch-input:checked:enabled + ._0KxFhq_spectrum-ToggleSwitch-switch:before {
236
- border-color: var(--spectrum-switch-emphasized-handle-border-color-selected-hover, var(--spectrum-global-color-blue-600));
254
+ &:before {
255
+ border-color: var(--spectrum-switch-emphasized-handle-border-color-selected-hover, var(--spectrum-global-color-blue-600));
256
+ }
257
+ }
258
+ }
237
259
  }
238
260
 
239
- ._0KxFhq_spectrum-ToggleSwitch:active ._0KxFhq_spectrum-ToggleSwitch-input + ._0KxFhq_spectrum-ToggleSwitch-switch:before {
240
- border-color: var(--spectrum-switch-emphasized-handle-border-color-down, var(--spectrum-global-color-gray-800));
241
- }
261
+ ._0KxFhq_spectrum-ToggleSwitch:active {
262
+ & ._0KxFhq_spectrum-ToggleSwitch-input {
263
+ & + ._0KxFhq_spectrum-ToggleSwitch-switch {
264
+ &:before {
265
+ border-color: var(--spectrum-switch-emphasized-handle-border-color-down, var(--spectrum-global-color-gray-800));
266
+ }
267
+ }
242
268
 
243
- ._0KxFhq_spectrum-ToggleSwitch:active ._0KxFhq_spectrum-ToggleSwitch-input ~ ._0KxFhq_spectrum-ToggleSwitch-label {
244
- color: var(--spectrum-switch-emphasized-text-color-down, var(--spectrum-alias-text-color-down));
245
- }
269
+ & ~ ._0KxFhq_spectrum-ToggleSwitch-label {
270
+ color: var(--spectrum-switch-emphasized-text-color-down, var(--spectrum-alias-text-color-down));
271
+ }
246
272
 
247
- ._0KxFhq_spectrum-ToggleSwitch:active ._0KxFhq_spectrum-ToggleSwitch-input:checked:enabled + ._0KxFhq_spectrum-ToggleSwitch-switch {
248
- background-color: var(--spectrum-switch-emphasized-track-color-selected-down, var(--spectrum-global-color-blue-700));
249
- }
273
+ &:checked:enabled + ._0KxFhq_spectrum-ToggleSwitch-switch {
274
+ background-color: var(--spectrum-switch-emphasized-track-color-selected-down, var(--spectrum-global-color-blue-700));
250
275
 
251
- ._0KxFhq_spectrum-ToggleSwitch:active ._0KxFhq_spectrum-ToggleSwitch-input:checked:enabled + ._0KxFhq_spectrum-ToggleSwitch-switch:before {
252
- border-color: var(--spectrum-switch-emphasized-handle-border-color-selected-down, var(--spectrum-global-color-blue-700));
276
+ &:before {
277
+ border-color: var(--spectrum-switch-emphasized-handle-border-color-selected-down, var(--spectrum-global-color-blue-700));
278
+ }
279
+ }
280
+ }
253
281
  }
254
282
 
255
- ._0KxFhq_spectrum-ToggleSwitch ._0KxFhq_spectrum-ToggleSwitch-input:disabled + ._0KxFhq_spectrum-ToggleSwitch-switch {
256
- background-color: var(--spectrum-switch-emphasized-track-color-disabled, var(--spectrum-global-color-gray-300));
257
- }
283
+ ._0KxFhq_spectrum-ToggleSwitch ._0KxFhq_spectrum-ToggleSwitch-input:disabled {
284
+ & + ._0KxFhq_spectrum-ToggleSwitch-switch {
285
+ background-color: var(--spectrum-switch-emphasized-track-color-disabled, var(--spectrum-global-color-gray-300));
258
286
 
259
- ._0KxFhq_spectrum-ToggleSwitch ._0KxFhq_spectrum-ToggleSwitch-input:disabled + ._0KxFhq_spectrum-ToggleSwitch-switch:before {
260
- border-color: var(--spectrum-switch-emphasized-handle-border-color-disabled, var(--spectrum-global-color-gray-400));
261
- }
287
+ &:before {
288
+ border-color: var(--spectrum-switch-emphasized-handle-border-color-disabled, var(--spectrum-global-color-gray-400));
289
+ }
290
+ }
262
291
 
263
- ._0KxFhq_spectrum-ToggleSwitch ._0KxFhq_spectrum-ToggleSwitch-input:disabled ~ ._0KxFhq_spectrum-ToggleSwitch-label {
264
- color: var(--spectrum-switch-emphasized-text-color-disabled, var(--spectrum-alias-text-color-disabled));
265
- }
292
+ & ~ ._0KxFhq_spectrum-ToggleSwitch-label {
293
+ color: var(--spectrum-switch-emphasized-text-color-disabled, var(--spectrum-alias-text-color-disabled));
294
+ }
266
295
 
267
- ._0KxFhq_spectrum-ToggleSwitch ._0KxFhq_spectrum-ToggleSwitch-input:disabled:checked + ._0KxFhq_spectrum-ToggleSwitch-switch {
268
- background-color: var(--spectrum-switch-emphasized-track-color-selected-disabled, var(--spectrum-global-color-gray-400));
269
- }
296
+ &:checked {
297
+ & + ._0KxFhq_spectrum-ToggleSwitch-switch {
298
+ background-color: var(--spectrum-switch-emphasized-track-color-selected-disabled, var(--spectrum-global-color-gray-400));
270
299
 
271
- ._0KxFhq_spectrum-ToggleSwitch ._0KxFhq_spectrum-ToggleSwitch-input:disabled:checked + ._0KxFhq_spectrum-ToggleSwitch-switch:before {
272
- border-color: var(--spectrum-switch-emphasized-handle-border-color-selected-disabled, var(--spectrum-global-color-gray-400));
273
- }
300
+ &:before {
301
+ border-color: var(--spectrum-switch-emphasized-handle-border-color-selected-disabled, var(--spectrum-global-color-gray-400));
302
+ }
303
+ }
274
304
 
275
- ._0KxFhq_spectrum-ToggleSwitch ._0KxFhq_spectrum-ToggleSwitch-input:disabled:checked ~ ._0KxFhq_spectrum-ToggleSwitch-label {
276
- color: var(--spectrum-switch-emphasized-text-color-selected-disabled, var(--spectrum-alias-text-color-disabled));
305
+ & ~ ._0KxFhq_spectrum-ToggleSwitch-label {
306
+ color: var(--spectrum-switch-emphasized-text-color-selected-disabled, var(--spectrum-alias-text-color-disabled));
307
+ }
308
+ }
277
309
  }
278
310
 
279
- ._0KxFhq_spectrum-ToggleSwitch--quiet ._0KxFhq_spectrum-ToggleSwitch-input:checked + ._0KxFhq_spectrum-ToggleSwitch-switch {
280
- background-color: var(--spectrum-switch-quiet-track-color-selected, var(--spectrum-global-color-gray-700));
281
- }
311
+ ._0KxFhq_spectrum-ToggleSwitch--quiet {
312
+ & ._0KxFhq_spectrum-ToggleSwitch-input:checked + ._0KxFhq_spectrum-ToggleSwitch-switch {
313
+ background-color: var(--spectrum-switch-quiet-track-color-selected, var(--spectrum-global-color-gray-700));
282
314
 
283
- ._0KxFhq_spectrum-ToggleSwitch--quiet ._0KxFhq_spectrum-ToggleSwitch-input:checked + ._0KxFhq_spectrum-ToggleSwitch-switch:before {
284
- border-color: var(--spectrum-switch-quiet-handle-border-color-selected, var(--spectrum-global-color-gray-700));
315
+ &:before {
316
+ border-color: var(--spectrum-switch-quiet-handle-border-color-selected, var(--spectrum-global-color-gray-700));
317
+ }
318
+ }
285
319
  }
286
320
 
287
- ._0KxFhq_spectrum-ToggleSwitch--quiet._0KxFhq_is-hovered ._0KxFhq_spectrum-ToggleSwitch-input:checked:enabled + ._0KxFhq_spectrum-ToggleSwitch-switch {
288
- background-color: var(--spectrum-switch-quiet-track-color-selected-hover, var(--spectrum-global-color-gray-800));
289
- }
321
+ ._0KxFhq_spectrum-ToggleSwitch--quiet._0KxFhq_is-hovered {
322
+ & ._0KxFhq_spectrum-ToggleSwitch-input:checked:enabled + ._0KxFhq_spectrum-ToggleSwitch-switch {
323
+ background-color: var(--spectrum-switch-quiet-track-color-selected-hover, var(--spectrum-global-color-gray-800));
290
324
 
291
- ._0KxFhq_spectrum-ToggleSwitch--quiet._0KxFhq_is-hovered ._0KxFhq_spectrum-ToggleSwitch-input:checked:enabled + ._0KxFhq_spectrum-ToggleSwitch-switch:before {
292
- border-color: var(--spectrum-switch-quiet-handle-border-color-selected-hover, var(--spectrum-global-color-gray-800));
325
+ &:before {
326
+ border-color: var(--spectrum-switch-quiet-handle-border-color-selected-hover, var(--spectrum-global-color-gray-800));
327
+ }
328
+ }
293
329
  }
294
330
 
295
- ._0KxFhq_spectrum-ToggleSwitch._0KxFhq_spectrum-ToggleSwitch--quiet:active ._0KxFhq_spectrum-ToggleSwitch-input:checked:enabled + ._0KxFhq_spectrum-ToggleSwitch-switch {
296
- background-color: var(--spectrum-switch-quiet-track-color-selected-down, var(--spectrum-global-color-gray-900));
297
- }
331
+ ._0KxFhq_spectrum-ToggleSwitch._0KxFhq_spectrum-ToggleSwitch--quiet:active {
332
+ & ._0KxFhq_spectrum-ToggleSwitch-input:checked:enabled + ._0KxFhq_spectrum-ToggleSwitch-switch {
333
+ background-color: var(--spectrum-switch-quiet-track-color-selected-down, var(--spectrum-global-color-gray-900));
298
334
 
299
- ._0KxFhq_spectrum-ToggleSwitch._0KxFhq_spectrum-ToggleSwitch--quiet:active ._0KxFhq_spectrum-ToggleSwitch-input:checked:enabled + ._0KxFhq_spectrum-ToggleSwitch-switch:before {
300
- border-color: var(--spectrum-switch-quiet-handle-border-color-selected-down, var(--spectrum-global-color-gray-900));
335
+ &:before {
336
+ border-color: var(--spectrum-switch-quiet-handle-border-color-selected-down, var(--spectrum-global-color-gray-900));
337
+ }
338
+ }
301
339
  }
302
340
 
303
- :is(._0KxFhq_spectrum-ToggleSwitch, ._0KxFhq_spectrum-ToggleSwitch._0KxFhq_is-hovered) ._0KxFhq_spectrum-ToggleSwitch-input._0KxFhq_focus-ring + ._0KxFhq_spectrum-ToggleSwitch-switch:after {
304
- box-shadow: 0 0 0 var(--spectrum-switch-focus-ring-size-key-focus, var(--spectrum-alias-focus-ring-size))
341
+ ._0KxFhq_spectrum-ToggleSwitch, ._0KxFhq_spectrum-ToggleSwitch._0KxFhq_is-hovered {
342
+ & ._0KxFhq_spectrum-ToggleSwitch-input._0KxFhq_focus-ring {
343
+ & + ._0KxFhq_spectrum-ToggleSwitch-switch {
344
+ &:after {
345
+ box-shadow: 0 0 0 var(--spectrum-switch-focus-ring-size-key-focus, var(--spectrum-alias-focus-ring-size))
305
346
  var(--spectrum-switch-focus-ring-color-key-focus, var(--spectrum-alias-focus-ring-color));
347
+ }
348
+
349
+ &:before {
350
+ border-color: var(--spectrum-switch-emphasized-handle-border-color-key-focus, var(--spectrum-global-color-gray-700));
351
+ }
352
+ }
353
+
354
+ &:checked {
355
+ & + ._0KxFhq_spectrum-ToggleSwitch-switch {
356
+ background-color: var(--spectrum-switch-emphasized-track-color-selected-key-focus, var(--spectrum-global-color-blue-600));
357
+
358
+ &:before {
359
+ border-color: var(--spectrum-switch-emphasized-handle-border-color-selected-key-focus, var(--spectrum-global-color-blue-600));
360
+ }
361
+ }
362
+ }
363
+ }
306
364
  }
307
365
 
308
- :is(._0KxFhq_spectrum-ToggleSwitch, ._0KxFhq_spectrum-ToggleSwitch._0KxFhq_is-hovered) ._0KxFhq_spectrum-ToggleSwitch-input._0KxFhq_focus-ring + ._0KxFhq_spectrum-ToggleSwitch-switch:before {
309
- border-color: var(--spectrum-switch-emphasized-handle-border-color-key-focus, var(--spectrum-global-color-gray-700));
310
- }
311
-
312
- :is(._0KxFhq_spectrum-ToggleSwitch, ._0KxFhq_spectrum-ToggleSwitch._0KxFhq_is-hovered) ._0KxFhq_spectrum-ToggleSwitch-input._0KxFhq_focus-ring:checked + ._0KxFhq_spectrum-ToggleSwitch-switch {
313
- background-color: var(--spectrum-switch-emphasized-track-color-selected-key-focus, var(--spectrum-global-color-blue-600));
314
- }
315
-
316
- :is(._0KxFhq_spectrum-ToggleSwitch, ._0KxFhq_spectrum-ToggleSwitch._0KxFhq_is-hovered) ._0KxFhq_spectrum-ToggleSwitch-input._0KxFhq_focus-ring:checked + ._0KxFhq_spectrum-ToggleSwitch-switch:before {
317
- border-color: var(--spectrum-switch-emphasized-handle-border-color-selected-key-focus, var(--spectrum-global-color-blue-600));
318
- }
319
-
320
- :is(._0KxFhq_spectrum-ToggleSwitch--quiet, ._0KxFhq_spectrum-ToggleSwitch--quiet._0KxFhq_is-hovered) ._0KxFhq_spectrum-ToggleSwitch-input._0KxFhq_focus-ring:checked + ._0KxFhq_spectrum-ToggleSwitch-switch {
321
- background-color: var(--spectrum-switch-quiet-track-color-selected-key-focus, var(--spectrum-global-color-gray-800));
322
- }
323
-
324
- :is(._0KxFhq_spectrum-ToggleSwitch--quiet, ._0KxFhq_spectrum-ToggleSwitch--quiet._0KxFhq_is-hovered) ._0KxFhq_spectrum-ToggleSwitch-input._0KxFhq_focus-ring:checked + ._0KxFhq_spectrum-ToggleSwitch-switch:before {
325
- border-color: var(--spectrum-switch-quiet-handle-border-color-selected-key-focus, var(--spectrum-global-color-gray-800));
326
- }
327
-
328
- ._0KxFhq_spectrum-ToggleSwitch--ab ._0KxFhq_spectrum-ToggleSwitch-input:checked + ._0KxFhq_spectrum-ToggleSwitch-switch {
329
- background-color: var(--spectrum-switch-track-color, var(--spectrum-global-color-gray-300));
330
- }
331
-
332
- ._0KxFhq_spectrum-ToggleSwitch--ab ._0KxFhq_spectrum-ToggleSwitch-input:checked + ._0KxFhq_spectrum-ToggleSwitch-switch:before {
333
- border-color: var(--spectrum-switch-handle-border-color, var(--spectrum-global-color-gray-600));
334
- }
335
-
336
- ._0KxFhq_spectrum-ToggleSwitch--ab ._0KxFhq_spectrum-ToggleSwitch-input._0KxFhq_focus-ring:checked + ._0KxFhq_spectrum-ToggleSwitch-switch {
337
- background-color: var(--spectrum-switch-track-color, var(--spectrum-global-color-gray-300));
338
- }
339
-
340
- ._0KxFhq_spectrum-ToggleSwitch--ab ._0KxFhq_spectrum-ToggleSwitch-input._0KxFhq_focus-ring:checked + ._0KxFhq_spectrum-ToggleSwitch-switch:before {
341
- border-color: var(--spectrum-switch-handle-border-color-selected, var(--spectrum-global-color-gray-700));
342
- }
366
+ ._0KxFhq_spectrum-ToggleSwitch--quiet, ._0KxFhq_spectrum-ToggleSwitch--quiet._0KxFhq_is-hovered {
367
+ & ._0KxFhq_spectrum-ToggleSwitch-input._0KxFhq_focus-ring {
368
+ &:checked {
369
+ & + ._0KxFhq_spectrum-ToggleSwitch-switch {
370
+ background-color: var(--spectrum-switch-quiet-track-color-selected-key-focus, var(--spectrum-global-color-gray-800));
343
371
 
344
- ._0KxFhq_spectrum-ToggleSwitch--ab ._0KxFhq_spectrum-ToggleSwitch-input:disabled:checked + ._0KxFhq_spectrum-ToggleSwitch-switch, ._0KxFhq_spectrum-ToggleSwitch--ab ._0KxFhq_spectrum-ToggleSwitch-input:disabled + ._0KxFhq_spectrum-ToggleSwitch-switch {
345
- background-color: var(--spectrum-switch-emphasized-track-color-disabled, var(--spectrum-global-color-gray-300));
372
+ &:before {
373
+ border-color: var(--spectrum-switch-quiet-handle-border-color-selected-key-focus, var(--spectrum-global-color-gray-800));
374
+ }
375
+ }
376
+ }
377
+ }
346
378
  }
347
379
 
348
- ._0KxFhq_spectrum-ToggleSwitch--ab ._0KxFhq_spectrum-ToggleSwitch-input:disabled + ._0KxFhq_spectrum-ToggleSwitch-switch:before {
349
- border-color: var(--spectrum-switch-emphasized-handle-border-color-disabled, var(--spectrum-global-color-gray-400));
350
- }
380
+ ._0KxFhq_spectrum-ToggleSwitch--ab {
381
+ & ._0KxFhq_spectrum-ToggleSwitch-input {
382
+ &:checked + ._0KxFhq_spectrum-ToggleSwitch-switch {
383
+ background-color: var(--spectrum-switch-track-color, var(--spectrum-global-color-gray-300));
384
+ }
385
+
386
+ &:checked + ._0KxFhq_spectrum-ToggleSwitch-switch {
387
+ &:before {
388
+ border-color: var(--spectrum-switch-handle-border-color, var(--spectrum-global-color-gray-600));
389
+ }
390
+ }
391
+
392
+ &._0KxFhq_focus-ring {
393
+ &:checked + ._0KxFhq_spectrum-ToggleSwitch-switch {
394
+ background-color: var(--spectrum-switch-track-color, var(--spectrum-global-color-gray-300));
395
+
396
+ &:before {
397
+ border-color: var(--spectrum-switch-handle-border-color-selected, var(--spectrum-global-color-gray-700));
398
+ }
399
+ }
400
+ }
401
+
402
+ &:disabled {
403
+ &:checked + ._0KxFhq_spectrum-ToggleSwitch-switch {
404
+ background-color: var(--spectrum-switch-emphasized-track-color-disabled, var(--spectrum-global-color-gray-300));
405
+ }
406
+
407
+ & + ._0KxFhq_spectrum-ToggleSwitch-switch {
408
+ background-color: var(--spectrum-switch-emphasized-track-color-disabled, var(--spectrum-global-color-gray-300));
409
+
410
+ &:before {
411
+ border-color: var(--spectrum-switch-emphasized-handle-border-color-disabled, var(--spectrum-global-color-gray-400));
412
+ }
413
+ }
414
+ }
415
+ }
351
416
 
352
- ._0KxFhq_spectrum-ToggleSwitch--ab._0KxFhq_is-hovered ._0KxFhq_spectrum-ToggleSwitch-input:checked:enabled + ._0KxFhq_spectrum-ToggleSwitch-switch {
353
- background-color: var(--spectrum-switch-emphasized-track-color, var(--spectrum-global-color-gray-300));
354
- }
417
+ &._0KxFhq_is-hovered {
418
+ & ._0KxFhq_spectrum-ToggleSwitch-input {
419
+ &:checked:enabled + ._0KxFhq_spectrum-ToggleSwitch-switch {
420
+ background-color: var(--spectrum-switch-emphasized-track-color, var(--spectrum-global-color-gray-300));
355
421
 
356
- ._0KxFhq_spectrum-ToggleSwitch--ab._0KxFhq_is-hovered ._0KxFhq_spectrum-ToggleSwitch-input:checked:enabled + ._0KxFhq_spectrum-ToggleSwitch-switch:before {
357
- border-color: var(--spectrum-switch-emphasized-handle-border-color-hover, var(--spectrum-global-color-gray-700));
358
- }
422
+ &:before {
423
+ border-color: var(--spectrum-switch-emphasized-handle-border-color-hover, var(--spectrum-global-color-gray-700));
424
+ }
425
+ }
426
+ }
427
+ }
359
428
 
360
- ._0KxFhq_spectrum-ToggleSwitch--ab:active ._0KxFhq_spectrum-ToggleSwitch-input:checked:enabled + ._0KxFhq_spectrum-ToggleSwitch-switch {
361
- background-color: var(--spectrum-switch-emphasized-track-color, var(--spectrum-global-color-gray-300));
362
- }
429
+ &:active {
430
+ & ._0KxFhq_spectrum-ToggleSwitch-input {
431
+ &:checked:enabled + ._0KxFhq_spectrum-ToggleSwitch-switch {
432
+ background-color: var(--spectrum-switch-emphasized-track-color, var(--spectrum-global-color-gray-300));
363
433
 
364
- ._0KxFhq_spectrum-ToggleSwitch--ab:active ._0KxFhq_spectrum-ToggleSwitch-input:checked:enabled + ._0KxFhq_spectrum-ToggleSwitch-switch:before {
365
- border-color: var(--spectrum-switch-emphasized-handle-border-color-down, var(--spectrum-global-color-gray-800));
434
+ &:before {
435
+ border-color: var(--spectrum-switch-emphasized-handle-border-color-down, var(--spectrum-global-color-gray-800));
436
+ }
437
+ }
438
+ }
439
+ }
366
440
  }
367
441
 
368
442
  @media (forced-colors: active) {
@@ -404,22 +478,24 @@
404
478
  --spectrum-switch-quiet-track-color-selected-key-focus: Highlight;
405
479
  --spectrum-switch-track-color: ButtonFace;
406
480
  --spectrum-switch-track-color-disabled: ButtonFace;
407
- }
408
481
 
409
- ._0KxFhq_spectrum-ToggleSwitch ._0KxFhq_spectrum-ToggleSwitch-input:not(:checked) + ._0KxFhq_spectrum-ToggleSwitch-switch {
410
- box-shadow: inset 0 0 0 1px var(--spectrum-switch-handle-border-color, var(--spectrum-global-color-gray-600));
411
- }
482
+ & ._0KxFhq_spectrum-ToggleSwitch-input:not(:checked) + ._0KxFhq_spectrum-ToggleSwitch-switch {
483
+ box-shadow: inset 0 0 0 1px var(--spectrum-switch-handle-border-color, var(--spectrum-global-color-gray-600));
484
+ }
412
485
 
413
- ._0KxFhq_spectrum-ToggleSwitch._0KxFhq_is-hovered ._0KxFhq_spectrum-ToggleSwitch-input:not(:checked) + ._0KxFhq_spectrum-ToggleSwitch-switch {
414
- box-shadow: inset 0 0 0 1px var(--spectrum-switch-emphasized-handle-border-color-hover, var(--spectrum-global-color-gray-700));
415
- }
486
+ &._0KxFhq_is-hovered {
487
+ & ._0KxFhq_spectrum-ToggleSwitch-input:not(:checked) + ._0KxFhq_spectrum-ToggleSwitch-switch {
488
+ box-shadow: inset 0 0 0 1px var(--spectrum-switch-emphasized-handle-border-color-hover, var(--spectrum-global-color-gray-700));
489
+ }
490
+ }
416
491
 
417
- ._0KxFhq_spectrum-ToggleSwitch ._0KxFhq_spectrum-ToggleSwitch-input:not(:checked):focus + ._0KxFhq_spectrum-ToggleSwitch-switch {
418
- box-shadow: inset 0 0 0 1px var(--spectrum-switch-emphasized-handle-border-color-key-focus, var(--spectrum-global-color-gray-700));
419
- }
492
+ & ._0KxFhq_spectrum-ToggleSwitch-input:not(:checked):focus + ._0KxFhq_spectrum-ToggleSwitch-switch {
493
+ box-shadow: inset 0 0 0 1px var(--spectrum-switch-emphasized-handle-border-color-key-focus, var(--spectrum-global-color-gray-700));
494
+ }
420
495
 
421
- ._0KxFhq_spectrum-ToggleSwitch ._0KxFhq_spectrum-ToggleSwitch-input:disabled + ._0KxFhq_spectrum-ToggleSwitch-switch {
422
- box-shadow: inset 0 0 0 1px var(--spectrum-switch-emphasized-handle-border-color-disabled, var(--spectrum-global-color-gray-400));
496
+ & ._0KxFhq_spectrum-ToggleSwitch-input:disabled + ._0KxFhq_spectrum-ToggleSwitch-switch {
497
+ box-shadow: inset 0 0 0 1px var(--spectrum-switch-emphasized-handle-border-color-disabled, var(--spectrum-global-color-gray-400));
498
+ }
423
499
  }
424
500
  }
425
501
  /*# sourceMappingURL=toggle_vars.css.map */
@@ -1 +1 @@
1
- {"mappings":"AA4DA;;;;;AAKE;;;;AAKA;;;;AAKA;;;;AAIA;;;;AAIA;;;;AAKA;;;;AAQA;;;;AAIA;;;;AAMF;;;;;;;;AAUE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgZM;;;;AAaF;;;;AAEE;;;;AAUJ;;;;AAKE;;;;AAOA;;;;AAGE;;;;AAOF;;;;AAIA;;;;AAGE;;;;AAWA;;;;AASF;;;;AAEE;;;;AAQR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiDI;;;;EAIA","sources":["packages/@adobe/spectrum-css-temp/components/toggle/vars.css"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n@import './index.css';\n@import './skin.css';\n"],"names":[],"version":3,"file":"toggle_vars.css.map"}
1
+ {"mappings":"AA4DA;;;;EAKE;;;;EAKA;;;;EAKA;;;;EAIA;;;;EAIA;;;;EAKA;;;;EAQA;;;;EAIA;;;;;AAMF;;;;;;;EAUE;;;;;;;;;;;;;EAsBE;;;;;;;;AAQF;;;;;EAKE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAyEE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA2KJ;;;;;;;;IAOE;;;;;;;IAME;;;;;;;MASN;;;;;;;;EAOI;;;;;;;IAME;;;;;;;MASN;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA6BE;;;;;;;;;;IAWA;;;;;;;;;;IAWA;;;;;;;;;;IAYA;;;;;;AAMI;;;;;;;;;;;;;;;;QAgBN;;;;;;;;;;;;;;QAeA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA+BQ;;;;;;;;QAQJ;;;;;;;;;;;;QAWA;;;;;;;;;;;;QAWJ","sources":["packages/@adobe/spectrum-css-temp/components/toggle/vars.css"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n@import './index.css';\n@import './skin.css';\n"],"names":[],"version":3,"file":"toggle_vars.css.map"}