@enact/limestone 1.3.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 (463) hide show
  1. package/.github/PULL_REQUEST_TEMPLATE.md +28 -0
  2. package/.github/workflows/update-copyright-years.yml +25 -0
  3. package/.travis.yml +40 -0
  4. package/ActionGuide/ActionGuide.d.ts +73 -0
  5. package/ActionGuide/ActionGuide.js +164 -0
  6. package/ActionGuide/ActionGuide.module.css +73 -0
  7. package/ActionGuide/package.json +3 -0
  8. package/ActionGuide/tests/ActionGuide-specs.js +51 -0
  9. package/Alert/Alert.d.ts +155 -0
  10. package/Alert/Alert.js +313 -0
  11. package/Alert/Alert.module.css +190 -0
  12. package/Alert/AlertImage.js +102 -0
  13. package/Alert/AlertImage.module.css +15 -0
  14. package/Alert/package.json +3 -0
  15. package/Alert/tests/Alert-specs.js +204 -0
  16. package/BodyText/BodyText.d.ts +74 -0
  17. package/BodyText/BodyText.js +170 -0
  18. package/BodyText/BodyText.module.css +95 -0
  19. package/BodyText/package.json +3 -0
  20. package/BodyText/tests/BodyText-specs.js +55 -0
  21. package/Button/Button.d.ts +131 -0
  22. package/Button/Button.js +351 -0
  23. package/Button/Button.module.css +2518 -0
  24. package/Button/package.json +3 -0
  25. package/Button/tests/Button-specs.js +252 -0
  26. package/CHANGELOG.md +170 -0
  27. package/Card/Card.d.ts +138 -0
  28. package/Card/Card.js +396 -0
  29. package/Card/Card.module.css +1296 -0
  30. package/Card/package.json +3 -0
  31. package/Card/tests/Card-specs.js +65 -0
  32. package/Checkbox/Checkbox.d.ts +99 -0
  33. package/Checkbox/Checkbox.js +222 -0
  34. package/Checkbox/Checkbox.module.css +1395 -0
  35. package/Checkbox/package.json +3 -0
  36. package/Checkbox/tests/Checkbox-specs.js +79 -0
  37. package/CheckboxItem/CheckboxItem.d.ts +99 -0
  38. package/CheckboxItem/CheckboxItem.js +210 -0
  39. package/CheckboxItem/CheckboxItem.module.css +50 -0
  40. package/CheckboxItem/package.json +3 -0
  41. package/CheckboxItem/tests/CheckboxItem-specs.js +52 -0
  42. package/Chips/Chip.js +252 -0
  43. package/Chips/Chip.module.css +30 -0
  44. package/Chips/Chips.js +215 -0
  45. package/Chips/Chips.module.css +8 -0
  46. package/Chips/index.js +86 -0
  47. package/Chips/tests/Chip-specs.js +186 -0
  48. package/Chips/tests/Chips-specs.js +312 -0
  49. package/ColorPicker/ColorPicker.js +416 -0
  50. package/ColorPicker/ColorPicker.module.css +78 -0
  51. package/ColorPicker/package.json +3 -0
  52. package/ColorPicker/tests/ColorPicker-specs.js +225 -0
  53. package/ColorPicker/utils.js +135 -0
  54. package/ContextualMenuDecorator/ContextualMenuDecorator.d.ts +106 -0
  55. package/ContextualMenuDecorator/ContextualMenuDecorator.js +264 -0
  56. package/ContextualMenuDecorator/ContextualMenuDecorator.module.css +42 -0
  57. package/ContextualMenuDecorator/package.json +3 -0
  58. package/ContextualMenuDecorator/tests/ContextualMenuDecorator-specs.js +136 -0
  59. package/ContextualPopupDecorator/ContextualPopup.js +200 -0
  60. package/ContextualPopupDecorator/ContextualPopup.module.css +270 -0
  61. package/ContextualPopupDecorator/ContextualPopupDecorator.d.ts +182 -0
  62. package/ContextualPopupDecorator/ContextualPopupDecorator.js +867 -0
  63. package/ContextualPopupDecorator/ContextualPopupDecorator.module.css +3 -0
  64. package/ContextualPopupDecorator/HolePunchScrim.js +69 -0
  65. package/ContextualPopupDecorator/HolePunchScrim.module.css +38 -0
  66. package/ContextualPopupDecorator/package.json +3 -0
  67. package/ContextualPopupDecorator/tests/ContextualPopupDecorator-specs.js +621 -0
  68. package/DatePicker/DatePicker.d.ts +173 -0
  69. package/DatePicker/DatePicker.js +175 -0
  70. package/DatePicker/DatePicker.module.css +5 -0
  71. package/DatePicker/DatePickerBase.js +348 -0
  72. package/DatePicker/package.json +3 -0
  73. package/DatePicker/tests/DatePicker-specs.js +247 -0
  74. package/DayPicker/DayPicker.d.ts +92 -0
  75. package/DayPicker/DayPicker.js +188 -0
  76. package/DayPicker/DayPicker.module.css +35 -0
  77. package/DayPicker/DaySelectorDecorator.js +301 -0
  78. package/DayPicker/package.json +3 -0
  79. package/DayPicker/tests/DayPicker-specs.js +138 -0
  80. package/Dropdown/Dropdown.d.ts +135 -0
  81. package/Dropdown/Dropdown.js +460 -0
  82. package/Dropdown/Dropdown.module.css +160 -0
  83. package/Dropdown/DropdownList.js +360 -0
  84. package/Dropdown/package.json +3 -0
  85. package/Dropdown/tests/Dropdown-specs.js +267 -0
  86. package/FixedPopupPanels/FixedPopupPanels.d.ts +72 -0
  87. package/FixedPopupPanels/FixedPopupPanels.js +170 -0
  88. package/FixedPopupPanels/FixedPopupPanels.module.css +146 -0
  89. package/FixedPopupPanels/package.json +3 -0
  90. package/FixedPopupPanels/tests/FixedPopupPanels-specs.js +142 -0
  91. package/FlexiblePopupPanels/FlexiblePopupPanels.js +177 -0
  92. package/FlexiblePopupPanels/FlexiblePopupPanels.module.css +291 -0
  93. package/FlexiblePopupPanels/Header.js +110 -0
  94. package/FlexiblePopupPanels/Panel.js +256 -0
  95. package/FlexiblePopupPanels/index.d.ts +145 -0
  96. package/FlexiblePopupPanels/index.js +68 -0
  97. package/FlexiblePopupPanels/package.json +3 -0
  98. package/FlexiblePopupPanels/tests/FlexiblePopupPanels-specs.js +305 -0
  99. package/FlexiblePopupPanels/useNavButtonFocus.js +65 -0
  100. package/FormCheckboxItem/FormCheckboxItem.d.ts +87 -0
  101. package/FormCheckboxItem/FormCheckboxItem.js +200 -0
  102. package/FormCheckboxItem/FormCheckboxItem.module.css +374 -0
  103. package/FormCheckboxItem/package.json +3 -0
  104. package/FormCheckboxItem/tests/FormCheckboxItem-specs.js +164 -0
  105. package/Heading/Heading.d.ts +104 -0
  106. package/Heading/Heading.js +203 -0
  107. package/Heading/Heading.module.css +217 -0
  108. package/Heading/package.json +3 -0
  109. package/Heading/tests/Heading-specs.js +57 -0
  110. package/Icon/Icon.d.ts +377 -0
  111. package/Icon/Icon.js +503 -0
  112. package/Icon/Icon.module.css +121 -0
  113. package/Icon/IconList.js +611 -0
  114. package/Icon/package.json +3 -0
  115. package/Icon/tests/Icon-specs.js +131 -0
  116. package/IconItem/IconItem.d.ts +137 -0
  117. package/IconItem/IconItem.js +360 -0
  118. package/IconItem/IconItem.module.css +414 -0
  119. package/IconItem/package.json +3 -0
  120. package/IconItem/tests/IconItem-specs.js +106 -0
  121. package/Image/Image.d.ts +60 -0
  122. package/Image/Image.js +165 -0
  123. package/Image/Image.module.css +5 -0
  124. package/Image/package.json +3 -0
  125. package/Image/tests/Image-specs.js +62 -0
  126. package/ImageItem/ImageItem.d.ts +134 -0
  127. package/ImageItem/ImageItem.js +377 -0
  128. package/ImageItem/ImageItem.module.css +1079 -0
  129. package/ImageItem/package.json +3 -0
  130. package/ImageItem/tests/ImageItem-specs.js +223 -0
  131. package/Input/Input.js +715 -0
  132. package/Input/Input.module.css +699 -0
  133. package/Input/InputField.js +487 -0
  134. package/Input/InputField.module.css +763 -0
  135. package/Input/InputFieldDecoratorIcon.js +66 -0
  136. package/Input/InputFieldSpotlightDecorator.js +380 -0
  137. package/Input/Keypad.js +111 -0
  138. package/Input/NumberField.js +311 -0
  139. package/Input/index.d.ts +423 -0
  140. package/Input/index.js +87 -0
  141. package/Input/package.json +3 -0
  142. package/Input/pointer.js +103 -0
  143. package/Input/tests/Input-specs.js +537 -0
  144. package/Input/tests/InputField-specs.js +292 -0
  145. package/Input/tests/InputPopup-specs.js +56 -0
  146. package/Input/util.js +130 -0
  147. package/Item/Item.d.ts +108 -0
  148. package/Item/Item.js +360 -0
  149. package/Item/Item.module.css +665 -0
  150. package/Item/package.json +3 -0
  151. package/Item/tests/Item-specs.js +108 -0
  152. package/KeyGuide/KeyGuide.d.ts +103 -0
  153. package/KeyGuide/KeyGuide.js +254 -0
  154. package/KeyGuide/KeyGuide.module.css +431 -0
  155. package/KeyGuide/package.json +3 -0
  156. package/KeyGuide/tests/KeyGuide-specs.js +168 -0
  157. package/LICENSE +201 -0
  158. package/Marquee/Marquee.d.ts +42 -0
  159. package/Marquee/Marquee.js +45 -0
  160. package/Marquee/package.json +3 -0
  161. package/MediaOverlay/MediaOverlay.d.ts +134 -0
  162. package/MediaOverlay/MediaOverlay.js +304 -0
  163. package/MediaOverlay/MediaOverlay.module.css +292 -0
  164. package/MediaOverlay/package.json +3 -0
  165. package/MediaOverlay/tests/MediaOverlay-specs.js +127 -0
  166. package/MediaPlayer/MediaControls.js +934 -0
  167. package/MediaPlayer/MediaControls.module.css +86 -0
  168. package/MediaPlayer/MediaKnob.js +61 -0
  169. package/MediaPlayer/MediaSlider.js +131 -0
  170. package/MediaPlayer/MediaSlider.module.css +319 -0
  171. package/MediaPlayer/MediaSliderDecorator.js +245 -0
  172. package/MediaPlayer/Times.js +152 -0
  173. package/MediaPlayer/Times.module.css +34 -0
  174. package/MediaPlayer/index.d.ts +223 -0
  175. package/MediaPlayer/index.js +34 -0
  176. package/MediaPlayer/package.json +3 -0
  177. package/MediaPlayer/tests/MediaSlider-specs.js +126 -0
  178. package/MediaPlayer/tests/util-specs.js +114 -0
  179. package/MediaPlayer/util.js +83 -0
  180. package/PageViews/Page.js +77 -0
  181. package/PageViews/Page.module.css +3 -0
  182. package/PageViews/PageViews.js +440 -0
  183. package/PageViews/PageViews.module.css +175 -0
  184. package/PageViews/PageViewsRouter.js +150 -0
  185. package/PageViews/index.js +45 -0
  186. package/PageViews/tests/PageViews-specs.js +192 -0
  187. package/Panels/Header.js +599 -0
  188. package/Panels/Header.module.css +243 -0
  189. package/Panels/Panel.js +347 -0
  190. package/Panels/Panel.module.css +33 -0
  191. package/Panels/Panels.js +258 -0
  192. package/Panels/Panels.module.css +12 -0
  193. package/Panels/index.d.ts +376 -0
  194. package/Panels/index.js +66 -0
  195. package/Panels/package.json +3 -0
  196. package/Panels/tests/Header-specs.js +146 -0
  197. package/Panels/tests/Panels-specs.js +257 -0
  198. package/Picker/Picker.d.ts +193 -0
  199. package/Picker/Picker.js +389 -0
  200. package/Picker/Picker.module.css +46 -0
  201. package/Picker/package.json +3 -0
  202. package/Picker/tests/Picker-specs.js +91 -0
  203. package/Popup/Popup.d.ts +169 -0
  204. package/Popup/Popup.js +690 -0
  205. package/Popup/Popup.module.css +180 -0
  206. package/Popup/package.json +3 -0
  207. package/Popup/tests/Popup-specs.js +475 -0
  208. package/PopupTabLayout/PopupTabLayout.d.ts +196 -0
  209. package/PopupTabLayout/PopupTabLayout.js +605 -0
  210. package/PopupTabLayout/PopupTabLayout.module.css +226 -0
  211. package/PopupTabLayout/package.json +3 -0
  212. package/PopupTabLayout/tests/PopupTabLayout-specs.js +285 -0
  213. package/ProgressBar/ProgressBar.d.ts +171 -0
  214. package/ProgressBar/ProgressBar.js +223 -0
  215. package/ProgressBar/ProgressBar.module.css +264 -0
  216. package/ProgressBar/ProgressBarTooltip.js +359 -0
  217. package/ProgressBar/ProgressBarTooltip.module.css +86 -0
  218. package/ProgressBar/package.json +3 -0
  219. package/ProgressBar/tests/ProgressBar-specs.js +400 -0
  220. package/ProgressButton/ProgressButton.d.ts +57 -0
  221. package/ProgressButton/ProgressButton.js +143 -0
  222. package/ProgressButton/ProgressButton.module.css +147 -0
  223. package/ProgressButton/package.json +3 -0
  224. package/ProgressButton/tests/ProgressButton-specs.js +71 -0
  225. package/QuickGuidePanels/Panel.js +90 -0
  226. package/QuickGuidePanels/QuickGuidePanels.js +463 -0
  227. package/QuickGuidePanels/QuickGuidePanels.module.css +26 -0
  228. package/QuickGuidePanels/index.js +52 -0
  229. package/QuickGuidePanels/tests/QuickGuidePanels-specs.js +250 -0
  230. package/README.md +59 -0
  231. package/RadioItem/RadioItem.d.ts +59 -0
  232. package/RadioItem/RadioItem.js +146 -0
  233. package/RadioItem/RadioItem.module.css +233 -0
  234. package/RadioItem/package.json +3 -0
  235. package/RadioItem/tests/RadioItem-specs.js +62 -0
  236. package/RangePicker/RangePicker.d.ts +174 -0
  237. package/RangePicker/RangePicker.js +372 -0
  238. package/RangePicker/RangePicker.module.css +55 -0
  239. package/RangePicker/package.json +3 -0
  240. package/RangePicker/tests/RangePicker-specs.js +122 -0
  241. package/Region/Region.d.ts +33 -0
  242. package/Region/Region.js +91 -0
  243. package/Region/package.json +3 -0
  244. package/Region/tests/Region-specs.js +28 -0
  245. package/Scroller/ContentContainerDecorator.js +24 -0
  246. package/Scroller/EditableWrapper.js +1036 -0
  247. package/Scroller/EditableWrapper.module.css +22 -0
  248. package/Scroller/Scroller.d.ts +270 -0
  249. package/Scroller/Scroller.js +470 -0
  250. package/Scroller/Scroller.module.css +41 -0
  251. package/Scroller/package.json +3 -0
  252. package/Scroller/tests/ContentContainerDecorator-specs.js +20 -0
  253. package/Scroller/tests/EditableWrapper-specs.js +133 -0
  254. package/Scroller/tests/Scroller-specs.js +159 -0
  255. package/Scroller/useEvent.js +39 -0
  256. package/Scroller/useThemeScroller.js +410 -0
  257. package/Skinnable/Skinnable.d.ts +27 -0
  258. package/Skinnable/Skinnable.js +65 -0
  259. package/Skinnable/package.json +3 -0
  260. package/Slider/Slider.d.ts +218 -0
  261. package/Slider/Slider.js +441 -0
  262. package/Slider/Slider.module.css +880 -0
  263. package/Slider/SliderBehaviorDecorator.js +184 -0
  264. package/Slider/package.json +3 -0
  265. package/Slider/tests/Slider-specs.js +573 -0
  266. package/Slider/utils.js +114 -0
  267. package/Spinner/Spinner.d.ts +64 -0
  268. package/Spinner/Spinner.js +254 -0
  269. package/Spinner/Spinner.module.css +368 -0
  270. package/Spinner/package.json +3 -0
  271. package/Spinner/tests/Spinner-specs.js +70 -0
  272. package/Sprite/Sprite.d.ts +100 -0
  273. package/Sprite/Sprite.js +345 -0
  274. package/Sprite/Sprite.module.css +32 -0
  275. package/Sprite/package.json +3 -0
  276. package/Sprite/tests/Sprite-specs.js +59 -0
  277. package/Steps/Steps.d.ts +119 -0
  278. package/Steps/Steps.js +303 -0
  279. package/Steps/Steps.module.css +130 -0
  280. package/Steps/package.json +3 -0
  281. package/Steps/tests/Steps-specs.js +175 -0
  282. package/Switch/Switch.d.ts +54 -0
  283. package/Switch/Switch.js +143 -0
  284. package/Switch/Switch.module.css +714 -0
  285. package/Switch/package.json +3 -0
  286. package/Switch/tests/Switch-specs.js +54 -0
  287. package/SwitchItem/SwitchItem.d.ts +56 -0
  288. package/SwitchItem/SwitchItem.js +144 -0
  289. package/SwitchItem/SwitchItem.module.css +31 -0
  290. package/SwitchItem/package.json +3 -0
  291. package/SwitchItem/tests/SwitchItem-specs.js +49 -0
  292. package/TabLayout/RefocusDecorator.js +142 -0
  293. package/TabLayout/Tab.js +84 -0
  294. package/TabLayout/TabGroup.js +377 -0
  295. package/TabLayout/TabGroup.module.css +280 -0
  296. package/TabLayout/TabLayout.d.ts +161 -0
  297. package/TabLayout/TabLayout.js +661 -0
  298. package/TabLayout/TabLayout.module.css +101 -0
  299. package/TabLayout/package.json +3 -0
  300. package/TabLayout/tests/TabGroup-specs.js +214 -0
  301. package/TabLayout/tests/TabLayout-specs.js +740 -0
  302. package/ThemeDecorator/AccessibilityDecorator.js +151 -0
  303. package/ThemeDecorator/I18nFontDecorator.js +33 -0
  304. package/ThemeDecorator/ThemeDecorator.d.ts +143 -0
  305. package/ThemeDecorator/ThemeDecorator.js +307 -0
  306. package/ThemeDecorator/ThemeDecorator.module.css +1250 -0
  307. package/ThemeDecorator/fontGenerator.js +76 -0
  308. package/ThemeDecorator/package.json +3 -0
  309. package/ThemeDecorator/screenTypes.json +10 -0
  310. package/ThemeDecorator/tests/ThemeDecorator-specs.js +151 -0
  311. package/TimePicker/TimePicker.d.ts +147 -0
  312. package/TimePicker/TimePicker.js +255 -0
  313. package/TimePicker/TimePicker.module.css +61 -0
  314. package/TimePicker/TimePickerBase.js +396 -0
  315. package/TimePicker/package.json +3 -0
  316. package/TimePicker/tests/TimePicker-specs.js +248 -0
  317. package/TooltipDecorator/Tooltip.js +252 -0
  318. package/TooltipDecorator/Tooltip.module.css +496 -0
  319. package/TooltipDecorator/TooltipDecorator.d.ts +229 -0
  320. package/TooltipDecorator/TooltipDecorator.js +260 -0
  321. package/TooltipDecorator/TooltipLabel.js +117 -0
  322. package/TooltipDecorator/package.json +3 -0
  323. package/TooltipDecorator/tests/TooltipDecorator-specs.js +224 -0
  324. package/TooltipDecorator/tests/useTooltip-specs.js +266 -0
  325. package/TooltipDecorator/useTooltip.js +278 -0
  326. package/TooltipDecorator/util.js +273 -0
  327. package/VideoPlayer/Feedback.js +110 -0
  328. package/VideoPlayer/Feedback.module.css +55 -0
  329. package/VideoPlayer/FeedbackContent.js +99 -0
  330. package/VideoPlayer/FeedbackIcon.js +67 -0
  331. package/VideoPlayer/FeedbackIcons.js +76 -0
  332. package/VideoPlayer/FeedbackTooltip.js +242 -0
  333. package/VideoPlayer/FeedbackTooltip.module.css +160 -0
  334. package/VideoPlayer/MediaTitle.js +143 -0
  335. package/VideoPlayer/MediaTitle.module.css +95 -0
  336. package/VideoPlayer/Overlay.js +51 -0
  337. package/VideoPlayer/Video.js +345 -0
  338. package/VideoPlayer/VideoPlayer.d.ts +582 -0
  339. package/VideoPlayer/VideoPlayer.js +2116 -0
  340. package/VideoPlayer/VideoPlayer.module.css +164 -0
  341. package/VideoPlayer/package.json +3 -0
  342. package/VideoPlayer/tests/Video-specs.js +235 -0
  343. package/VideoPlayer/tests/VideoPlayer-specs.js +180 -0
  344. package/VirtualList/VirtualList.d.ts +411 -0
  345. package/VirtualList/VirtualList.js +931 -0
  346. package/VirtualList/VirtualList.module.css +52 -0
  347. package/VirtualList/package.json +3 -0
  348. package/VirtualList/tests/VirtualGridList-specs.js +289 -0
  349. package/VirtualList/tests/VirtualGridList-translate-specs.js +711 -0
  350. package/VirtualList/tests/VirtualList-specs.js +288 -0
  351. package/VirtualList/tests/VirtualList-translate-specs.js +704 -0
  352. package/VirtualList/tests/useEvent-specs.js +172 -0
  353. package/VirtualList/tests/useEvent-translate-specs.js +309 -0
  354. package/VirtualList/useEvent.js +324 -0
  355. package/VirtualList/usePreventScroll.js +31 -0
  356. package/VirtualList/useSpotlight.js +157 -0
  357. package/VirtualList/useThemeVirtualList.js +471 -0
  358. package/VirtualList/useThemeVirtualList.module.css +34 -0
  359. package/WizardPanels/Panel.js +99 -0
  360. package/WizardPanels/WizardPanels.js +501 -0
  361. package/WizardPanels/WizardPanels.module.css +15 -0
  362. package/WizardPanels/index.d.ts +182 -0
  363. package/WizardPanels/index.js +50 -0
  364. package/WizardPanels/package.json +3 -0
  365. package/WizardPanels/tests/WizardPanels-specs.js +713 -0
  366. package/codecov.yml +13 -0
  367. package/fonts/Limestone_Icons.ttf +0 -0
  368. package/fonts/Miso/LICENSE.txt +75 -0
  369. package/fonts/Miso/Miso-Bold.ttf +0 -0
  370. package/fonts/Miso/Miso-Light.ttf +0 -0
  371. package/fonts/Miso/Miso-Regular.ttf +0 -0
  372. package/fonts/MuseoSans/LICENSE.txt +75 -0
  373. package/fonts/MuseoSans/MuseoSans-Black.ttf +0 -0
  374. package/fonts/MuseoSans/MuseoSans-BlackItalic.ttf +0 -0
  375. package/fonts/MuseoSans/MuseoSans-Bold.ttf +0 -0
  376. package/fonts/MuseoSans/MuseoSans-BoldItalic.ttf +0 -0
  377. package/fonts/MuseoSans/MuseoSans-Light.ttf +0 -0
  378. package/fonts/MuseoSans/MuseoSans-Medium.ttf +0 -0
  379. package/fonts/MuseoSans/MuseoSans-MediumItalic.ttf +0 -0
  380. package/fonts/MuseoSans/MuseoSans-Thin.ttf +0 -0
  381. package/index.js +2 -0
  382. package/internal/$L/$L.d.ts +21 -0
  383. package/internal/$L/$L.js +97 -0
  384. package/internal/$L/package.json +3 -0
  385. package/internal/AsyncRenderChildren/AsyncRenderChildren.js +74 -0
  386. package/internal/AsyncRenderChildren/package.json +3 -0
  387. package/internal/AsyncRenderChildren/tests/AsyncRenderChildren-specs.js +49 -0
  388. package/internal/DateComponentPicker/DateComponentPicker.js +165 -0
  389. package/internal/DateComponentPicker/DateComponentPicker.module.css +53 -0
  390. package/internal/DateComponentPicker/DateComponentRangePicker.js +132 -0
  391. package/internal/DateComponentPicker/index.js +31 -0
  392. package/internal/DateComponentPicker/package.json +3 -0
  393. package/internal/DateTime/DateTime.js +83 -0
  394. package/internal/DateTime/DateTime.module.css +51 -0
  395. package/internal/DateTime/DateTimeDecorator.js +268 -0
  396. package/internal/DateTime/index.js +37 -0
  397. package/internal/DateTime/package.json +3 -0
  398. package/internal/DateTime/tests/DateTimeDecorator-specs.js +33 -0
  399. package/internal/DebounceDecorator/DebounceDecorator.js +125 -0
  400. package/internal/DebounceDecorator/package.json +3 -0
  401. package/internal/DebounceDecorator/tests/DebounceDecorator-specs.js +151 -0
  402. package/internal/Panels/Arrangers.js +248 -0
  403. package/internal/Panels/CancelDecorator.js +43 -0
  404. package/internal/Panels/FloatingLayerIdProvider.js +27 -0
  405. package/internal/Panels/NavigationButton.js +64 -0
  406. package/internal/Panels/NavigationButton.module.css +69 -0
  407. package/internal/Panels/PanelsRouter.js +223 -0
  408. package/internal/Panels/PopupDecorator.js +287 -0
  409. package/internal/Panels/TransitionDecorator.js +99 -0
  410. package/internal/Panels/Viewport.js +313 -0
  411. package/internal/Panels/Viewport.module.css +25 -0
  412. package/internal/Panels/captureKeys.js +48 -0
  413. package/internal/Panels/index.js +101 -0
  414. package/internal/Panels/package.json +3 -0
  415. package/internal/Panels/useAutoFocus.js +95 -0
  416. package/internal/Panels/useFocusOnTransition.js +45 -0
  417. package/internal/Panels/useToggleRole.js +30 -0
  418. package/internal/Panels/util.js +64 -0
  419. package/internal/Picker/Picker.js +942 -0
  420. package/internal/Picker/Picker.module.css +1145 -0
  421. package/internal/Picker/PickerButton.js +97 -0
  422. package/internal/Picker/PickerItem.js +38 -0
  423. package/internal/Picker/SpottablePicker.js +63 -0
  424. package/internal/Picker/package.json +3 -0
  425. package/internal/Picker/tests/Picker-specs.js +968 -0
  426. package/internal/SharedStateDecorator/SharedStateDecorator.js +167 -0
  427. package/internal/SharedStateDecorator/package.json +3 -0
  428. package/internal/SharedStateDecorator/tests/SharedStateDecorator-specs.js +277 -0
  429. package/internal/WindowEventable/WindowEventable.js +114 -0
  430. package/internal/WindowEventable/package.json +3 -0
  431. package/internal/util/package.json +3 -0
  432. package/internal/util/util.js +79 -0
  433. package/internal/validators/package.json +4 -0
  434. package/internal/validators/tests/validators-specs.js +80 -0
  435. package/internal/validators/validators.js +136 -0
  436. package/package.json +69 -0
  437. package/resources/ilibmanifest.json +3 -0
  438. package/styles/color-mixins.less +230 -0
  439. package/styles/colors-game-green.less +25 -0
  440. package/styles/colors-game-orange.less +25 -0
  441. package/styles/colors-game.less +56 -0
  442. package/styles/colors-highcontrast.less +21 -0
  443. package/styles/colors.less +435 -0
  444. package/styles/mixins.less +337 -0
  445. package/styles/skin.less +54 -0
  446. package/styles/variables-base.less +32 -0
  447. package/styles/variables-game.less +25 -0
  448. package/styles/variables.less +1182 -0
  449. package/useScroll/HoverToScroll.js +265 -0
  450. package/useScroll/HoverToScroll.module.css +38 -0
  451. package/useScroll/OverscrollEffect.module.css +14 -0
  452. package/useScroll/Scrollbar.js +171 -0
  453. package/useScroll/Scrollbar.module.css +19 -0
  454. package/useScroll/ScrollbarPlaceholder.js +64 -0
  455. package/useScroll/ScrollbarTrack.js +209 -0
  456. package/useScroll/ScrollbarTrack.module.css +136 -0
  457. package/useScroll/package.json +3 -0
  458. package/useScroll/useEvent.js +693 -0
  459. package/useScroll/useOverscrollEffect.js +105 -0
  460. package/useScroll/useScroll.js +523 -0
  461. package/useScroll/useScroll.module.css +49 -0
  462. package/useScroll/useSpotlight.js +32 -0
  463. package/useScroll/useThemeScrollContentHandle.js +32 -0
package/Card/Card.module.css ADDED
@@ -0,0 +1,1296 @@
1
+ .card {
2
+ position: relative;
3
+ margin: 0 0.75rem 0.625rem 0.75rem;
4
+ }
5
+ .card .image {
6
+ position: relative;
7
+ }
8
+ .card .selectionContainer {
9
+ pointer-events: none;
10
+ position: absolute;
11
+ top: 0;
12
+ right: 0;
13
+ bottom: 0;
14
+ left: 0;
15
+ display: flex;
16
+ align-items: center;
17
+ justify-content: center;
18
+ border-width: 0.125rem;
19
+ border-style: solid;
20
+ }
21
+ .card .selectionContainer .selectionIcon {
22
+ width: 1.875rem;
23
+ height: 1.875rem;
24
+ border-radius: 50%;
25
+ margin: 0;
26
+ line-height: 1.875rem;
27
+ z-index: 3;
28
+ }
29
+ .card .primaryBadge,
30
+ .card .secondaryBadge {
31
+ position: absolute;
32
+ width: 2.25rem;
33
+ height: 2.25rem;
34
+ margin: 0;
35
+ top: 0.5rem;
36
+ }
37
+ .card .primaryBadge {
38
+ left: 0.5rem;
39
+ }
40
+ .card .secondaryBadge {
41
+ right: 0.5rem;
42
+ }
43
+ .card .caption {
44
+ height: 1.75rem;
45
+ font-size: var(--primitive-font-size-60);
46
+ line-height: 1.75rem;
47
+ font-weight: var(--primitive-font-weight-semibold);
48
+ }
49
+ .card .label {
50
+ height: 1.25rem;
51
+ font-size: var(--primitive-font-size-48);
52
+ line-height: 1.25rem;
53
+ font-weight: var(--primitive-font-weight-regular);
54
+ }
55
+ .card.selected .image::after {
56
+ content: '';
57
+ position: absolute;
58
+ top: 0;
59
+ right: 0;
60
+ bottom: 0;
61
+ left: 0;
62
+ z-index: 1;
63
+ }
64
+ .card.roundedImage {
65
+ border-radius: 0.75rem;
66
+ }
67
+ .card.roundedImage.selected::before {
68
+ border-radius: 0.75rem;
69
+ }
70
+ .card.roundedImage.selected .image::after {
71
+ border-radius: 0.75rem;
72
+ }
73
+ .card.roundedImage.selected.vertical.hasContainer .image::after {
74
+ border-bottom-left-radius: unset;
75
+ border-bottom-right-radius: unset;
76
+ }
77
+ .card.roundedImage.selected.horizontal .image::after {
78
+ border-radius: 0.75rem;
79
+ border-top-right-radius: unset;
80
+ border-bottom-right-radius: unset;
81
+ }
82
+ .card.roundedImage.vertical .selectionContainer,
83
+ .card.roundedImage.vertical .image {
84
+ border-radius: 0.75rem;
85
+ }
86
+ .card.roundedImage.vertical.hasContainer .image {
87
+ border-bottom-left-radius: unset;
88
+ border-bottom-right-radius: unset;
89
+ }
90
+ .card.roundedImage.horizontal .image {
91
+ border-top-left-radius: 0.75rem;
92
+ border-bottom-left-radius: 0.75rem;
93
+ }
94
+ .card.vertical {
95
+ width: var(--card-image-width);
96
+ height: auto;
97
+ }
98
+ .card.vertical .captions {
99
+ padding: 0.75rem 0;
100
+ display: flex;
101
+ align-items: center;
102
+ gap: 1rem;
103
+ align-self: stretch;
104
+ }
105
+ .card.vertical .image {
106
+ height: var(--card-image-height);
107
+ }
108
+ .card.vertical .imageIcon {
109
+ height: 3.75rem;
110
+ width: 3.75rem;
111
+ margin: 0;
112
+ }
113
+ .card.vertical.captionOverlay .captions {
114
+ padding: 1rem;
115
+ }
116
+ .card.vertical.captionOverlayOnFocus .captions {
117
+ visibility: hidden;
118
+ }
119
+ .card.vertical.hasContainer .captions {
120
+ padding: 0.75rem 1rem;
121
+ }
122
+ .card.vertical:not(.hasContainer) .image {
123
+ z-index: 1;
124
+ }
125
+ .card.vertical.selected:not(.hasContainer) .selectionContainer {
126
+ z-index: 3;
127
+ }
128
+ .card.horizontal {
129
+ width: 27.5rem;
130
+ height: 7rem;
131
+ }
132
+ .card.horizontal .captions {
133
+ padding: 1rem;
134
+ }
135
+ .card.horizontal .image {
136
+ width: var(--card-image-width);
137
+ }
138
+ :global(.spotlight-input-key) .card:global(.spottable):focus.hasContainer,
139
+ :global(.spotlight-input-mouse) .card:global(.spottable):focus.hasContainer {
140
+ transform: scale(1.1);
141
+ transition: transform 200ms ease-in-out;
142
+ }
143
+ :global(.spotlight-input-key) .card:global(.spottable):focus.hasContainer.roundedImage::before,
144
+ :global(.spotlight-input-mouse) .card:global(.spottable):focus.hasContainer.roundedImage::before {
145
+ border-radius: 0.75rem;
146
+ }
147
+ :global(.spotlight-input-key) .card:global(.spottable):focus.vertical:not(.captionOverlay):not(.hasContainer) .image,
148
+ :global(.spotlight-input-mouse) .card:global(.spottable):focus.vertical:not(.captionOverlay):not(.hasContainer) .image,
149
+ :global(.spotlight-input-key) .card:global(.spottable):focus.vertical.captionOverlay,
150
+ :global(.spotlight-input-mouse) .card:global(.spottable):focus.vertical.captionOverlay {
151
+ transform: scale(1.1);
152
+ transition: transform 200ms ease-in-out;
153
+ }
154
+ :global(.spotlight-input-key) .card:global(.spottable):focus.vertical.captionOverlayOnFocus .captions,
155
+ :global(.spotlight-input-mouse) .card:global(.spottable):focus.vertical.captionOverlayOnFocus .captions {
156
+ visibility: visible;
157
+ }
158
+ :global(.spotlight-input-key) .card:global(.spottable):focus.vertical:not(.hasContainer) .selectionContainer,
159
+ :global(.spotlight-input-mouse) .card:global(.spottable):focus.vertical:not(.hasContainer) .selectionContainer {
160
+ z-index: 5;
161
+ }
162
+ :global(.spotlight-input-touch) .card:global(.spottable):active.hasContainer {
163
+ transform: scale(1.1);
164
+ transition: transform 200ms ease-in-out;
165
+ }
166
+ :global(.spotlight-input-touch) .card:global(.spottable):active.hasContainer.roundedImage::before {
167
+ border-radius: 0.75rem;
168
+ }
169
+ :global(.spotlight-input-touch) .card:global(.spottable):active.vertical:not(.captionOverlay):not(.hasContainer) .image,
170
+ :global(.spotlight-input-touch) .card:global(.spottable):active.vertical.captionOverlay {
171
+ transform: scale(1.1);
172
+ transition: transform 200ms ease-in-out;
173
+ }
174
+ :global(.spotlight-input-touch) .card:global(.spottable):active.vertical.captionOverlayOnFocus .captions {
175
+ visibility: visible;
176
+ }
177
+ :global(.spotlight-input-touch) .card:global(.spottable):active.vertical:not(.hasContainer) .selectionContainer {
178
+ z-index: 5;
179
+ }
180
+ .card:global(.neutral) .selectionContainer {
181
+ border-color: transparent;
182
+ }
183
+ .card:global(.neutral) .selectionContainer .selectionIcon {
184
+ color: transparent;
185
+ }
186
+ .card:global(.neutral).selected .selectionIcon {
187
+ background-color: var(--semantic-color-surface-accent);
188
+ color: var(--semantic-color-on-surface-main-selected);
189
+ }
190
+ .card:global(.neutral).hasContainer {
191
+ background-color: color(from var(--semantic-color-surface-default-translucent) srgb r g b / 0.1);
192
+ }
193
+ .card:global(.neutral).hasContainer.selected::before {
194
+ content: '';
195
+ position: absolute;
196
+ top: 0;
197
+ right: 0;
198
+ bottom: 0;
199
+ left: 0;
200
+ border-width: 0.125rem;
201
+ border-style: solid;
202
+ border-color: var(--semantic-color-stroke-main-selected);
203
+ z-index: 5;
204
+ }
205
+ .card:global(.neutral).selected .image::after {
206
+ background: color(from var(--semantic-color-scrim-default) srgb r g b / 0.5);
207
+ }
208
+ .card:global(.neutral) .caption {
209
+ color: var(--semantic-color-on-background-main);
210
+ }
211
+ .card:global(.neutral) .label {
212
+ color: var(--semantic-color-on-background-sub);
213
+ }
214
+ .card:global(.neutral).vertical.captionOverlay .captions {
215
+ background: linear-gradient(180deg, transparent 0%, color(from var(--semantic-color-on-surface-black) srgb r g b / 0.7) 100%);
216
+ }
217
+ .card:global(.neutral).vertical.captionOverlay.selected:not(:focus)::before {
218
+ content: '';
219
+ position: absolute;
220
+ top: 0;
221
+ right: 0;
222
+ bottom: 0;
223
+ left: 0;
224
+ border-width: 0.125rem;
225
+ border-style: solid;
226
+ border-color: var(--semantic-color-stroke-main-selected);
227
+ z-index: 5;
228
+ }
229
+ .card:global(.neutral).vertical.captionOverlay:not(.selected)::before {
230
+ content: '';
231
+ position: absolute;
232
+ top: 0;
233
+ right: 0;
234
+ bottom: 0;
235
+ left: 0;
236
+ border: 1px solid var(--semantic-color-stroke-main);
237
+ border-radius: inherit;
238
+ z-index: 5;
239
+ }
240
+ :global(.spotlight-input-key) .card:global(.neutral).vertical:not(.hasContainer):global(.spottable):focus:global(.focusRing),
241
+ :global(.spotlight-input-mouse) .card:global(.neutral).vertical:not(.hasContainer):global(.spottable):focus:global(.focusRing) {
242
+ transform: none;
243
+ }
244
+ :global(.spotlight-input-key) .card:global(.neutral).vertical:not(.hasContainer):global(.spottable):focus:global(.focusRing) .image,
245
+ :global(.spotlight-input-mouse) .card:global(.neutral).vertical:not(.hasContainer):global(.spottable):focus:global(.focusRing) .image {
246
+ transform: none;
247
+ outline: 0.25rem solid #e6e6e6;
248
+ outline-offset: 0.1875rem;
249
+ }
250
+ :global(.spotlight-input-touch) .card:global(.neutral).vertical:not(.hasContainer):global(.spottable):active:global(.focusRing) {
251
+ transform: none;
252
+ }
253
+ :global(.spotlight-input-touch) .card:global(.neutral).vertical:not(.hasContainer):global(.spottable):active:global(.focusRing) .image {
254
+ transform: none;
255
+ outline: 0.25rem solid #e6e6e6;
256
+ outline-offset: 0.1875rem;
257
+ }
258
+ .card:global(.neutral).vertical:not(.hasContainer):not(.selected):not(:focus) .image::before {
259
+ content: '';
260
+ position: absolute;
261
+ top: 0;
262
+ right: 0;
263
+ bottom: 0;
264
+ left: 0;
265
+ border: 1px solid var(--semantic-color-stroke-main);
266
+ border-radius: inherit;
267
+ z-index: 5;
268
+ }
269
+ .card:global(.neutral).vertical.selected:not(.captionOverlay):not(.hasContainer) .selectionContainer {
270
+ border-color: var(--semantic-color-stroke-main-selected);
271
+ }
272
+ :global(.spotlight-input-key) .card:global(.neutral):global(.spottable):focus .selectionIcon,
273
+ :global(.spotlight-input-mouse) .card:global(.neutral):global(.spottable):focus .selectionIcon {
274
+ color: transparent;
275
+ }
276
+ :global(.spotlight-input-key) .card:global(.neutral):global(.spottable):focus.captionOverlay::before,
277
+ :global(.spotlight-input-mouse) .card:global(.neutral):global(.spottable):focus.captionOverlay::before {
278
+ content: '';
279
+ position: absolute;
280
+ top: 0;
281
+ right: 0;
282
+ bottom: 0;
283
+ left: 0;
284
+ border-width: 0.125rem;
285
+ border-style: solid;
286
+ border-color: var(--semantic-color-stroke-main-focused);
287
+ z-index: 5;
288
+ }
289
+ :global(.spotlight-input-key) .card:global(.neutral):global(.spottable):focus.selected .selectionIcon,
290
+ :global(.spotlight-input-mouse) .card:global(.neutral):global(.spottable):focus.selected .selectionIcon {
291
+ color: var(--semantic-color-on-surface-main-selected);
292
+ }
293
+ :global(.spotlight-input-key) .card:global(.neutral):global(.spottable):focus.hasContainer,
294
+ :global(.spotlight-input-mouse) .card:global(.neutral):global(.spottable):focus.hasContainer {
295
+ background-color: var(--semantic-color-surface-default-focused);
296
+ }
297
+ :global(.spotlight-input-key) .card:global(.neutral):global(.spottable):focus.hasContainer::before,
298
+ :global(.spotlight-input-mouse) .card:global(.neutral):global(.spottable):focus.hasContainer::before {
299
+ content: '';
300
+ position: absolute;
301
+ top: 0;
302
+ right: 0;
303
+ bottom: 0;
304
+ left: 0;
305
+ border-width: 0.125rem;
306
+ border-style: solid;
307
+ border-color: var(--semantic-color-stroke-main-focused);
308
+ z-index: 5;
309
+ }
310
+ :global(.spotlight-input-key) .card:global(.neutral):global(.spottable):focus.hasContainer .caption,
311
+ :global(.spotlight-input-mouse) .card:global(.neutral):global(.spottable):focus.hasContainer .caption {
312
+ color: var(--semantic-color-on-surface-main-focused);
313
+ }
314
+ :global(.spotlight-input-key) .card:global(.neutral):global(.spottable):focus.hasContainer .label,
315
+ :global(.spotlight-input-mouse) .card:global(.neutral):global(.spottable):focus.hasContainer .label {
316
+ color: var(--semantic-color-on-surface-sub-focused);
317
+ }
318
+ :global(.spotlight-input-key) .card:global(.neutral):global(.spottable):focus.vertical:not(.captionOverlay):not(.hasContainer):not(:global(.focusRing)) .selectionContainer,
319
+ :global(.spotlight-input-mouse) .card:global(.neutral):global(.spottable):focus.vertical:not(.captionOverlay):not(.hasContainer):not(:global(.focusRing)) .selectionContainer {
320
+ border-color: var(--semantic-color-stroke-main-focused);
321
+ }
322
+ :global(.spotlight-input-touch) .card:global(.neutral):global(.spottable):active .selectionIcon {
323
+ color: transparent;
324
+ }
325
+ :global(.spotlight-input-touch) .card:global(.neutral):global(.spottable):active.captionOverlay::before {
326
+ content: '';
327
+ position: absolute;
328
+ top: 0;
329
+ right: 0;
330
+ bottom: 0;
331
+ left: 0;
332
+ border-width: 0.125rem;
333
+ border-style: solid;
334
+ border-color: var(--semantic-color-stroke-main-focused);
335
+ z-index: 5;
336
+ }
337
+ :global(.spotlight-input-touch) .card:global(.neutral):global(.spottable):active.selected .selectionIcon {
338
+ color: var(--semantic-color-on-surface-main-selected);
339
+ }
340
+ :global(.spotlight-input-touch) .card:global(.neutral):global(.spottable):active.hasContainer {
341
+ background-color: var(--semantic-color-surface-default-focused);
342
+ }
343
+ :global(.spotlight-input-touch) .card:global(.neutral):global(.spottable):active.hasContainer::before {
344
+ content: '';
345
+ position: absolute;
346
+ top: 0;
347
+ right: 0;
348
+ bottom: 0;
349
+ left: 0;
350
+ border-width: 0.125rem;
351
+ border-style: solid;
352
+ border-color: var(--semantic-color-stroke-main-focused);
353
+ z-index: 5;
354
+ }
355
+ :global(.spotlight-input-touch) .card:global(.neutral):global(.spottable):active.hasContainer .caption {
356
+ color: var(--semantic-color-on-surface-main-focused);
357
+ }
358
+ :global(.spotlight-input-touch) .card:global(.neutral):global(.spottable):active.hasContainer .label {
359
+ color: var(--semantic-color-on-surface-sub-focused);
360
+ }
361
+ :global(.spotlight-input-touch) .card:global(.neutral):global(.spottable):active.vertical:not(.captionOverlay):not(.hasContainer):not(:global(.focusRing)) .selectionContainer {
362
+ border-color: var(--semantic-color-stroke-main-focused);
363
+ }
364
+ :global(.enact-a11y-high-contrast) .card:global(.neutral):global(.highContrast) .selectionContainer {
365
+ border-color: transparent;
366
+ }
367
+ :global(.enact-a11y-high-contrast) .card:global(.neutral):global(.highContrast) .selectionContainer .selectionIcon {
368
+ color: transparent;
369
+ }
370
+ :global(.enact-a11y-high-contrast) .card:global(.neutral):global(.highContrast).selected .selectionIcon {
371
+ background-color: var(--semantic-color-surface-accent);
372
+ color: var(--semantic-color-on-surface-main-selected);
373
+ }
374
+ :global(.enact-a11y-high-contrast) .card:global(.neutral):global(.highContrast).hasContainer {
375
+ background-color: color(from var(--semantic-color-surface-default-translucent) srgb r g b / 0.1);
376
+ }
377
+ :global(.enact-a11y-high-contrast) .card:global(.neutral):global(.highContrast).hasContainer.selected::before {
378
+ content: '';
379
+ position: absolute;
380
+ top: 0;
381
+ right: 0;
382
+ bottom: 0;
383
+ left: 0;
384
+ border-width: 0.125rem;
385
+ border-style: solid;
386
+ border-color: var(--semantic-color-stroke-main-selected);
387
+ z-index: 5;
388
+ }
389
+ :global(.enact-a11y-high-contrast) .card:global(.neutral):global(.highContrast).selected .image::after {
390
+ background: color(from var(--semantic-color-scrim-default) srgb r g b / 0.5);
391
+ }
392
+ :global(.enact-a11y-high-contrast) .card:global(.neutral):global(.highContrast) .caption {
393
+ color: var(--semantic-color-on-background-main);
394
+ }
395
+ :global(.enact-a11y-high-contrast) .card:global(.neutral):global(.highContrast) .label {
396
+ color: var(--semantic-color-on-background-sub);
397
+ }
398
+ :global(.enact-a11y-high-contrast) .card:global(.neutral):global(.highContrast).vertical.captionOverlay .captions {
399
+ background: linear-gradient(180deg, transparent 0%, color(from var(--semantic-color-on-surface-black) srgb r g b / 0.7) 100%);
400
+ }
401
+ :global(.enact-a11y-high-contrast) .card:global(.neutral):global(.highContrast).vertical.captionOverlay.selected:not(:focus)::before {
402
+ content: '';
403
+ position: absolute;
404
+ top: 0;
405
+ right: 0;
406
+ bottom: 0;
407
+ left: 0;
408
+ border-width: 0.125rem;
409
+ border-style: solid;
410
+ border-color: var(--semantic-color-stroke-main-selected);
411
+ z-index: 5;
412
+ }
413
+ :global(.enact-a11y-high-contrast) .card:global(.neutral):global(.highContrast).vertical.captionOverlay:not(.selected)::before {
414
+ content: '';
415
+ position: absolute;
416
+ top: 0;
417
+ right: 0;
418
+ bottom: 0;
419
+ left: 0;
420
+ border: 1px solid var(--semantic-color-stroke-main);
421
+ border-radius: inherit;
422
+ z-index: 5;
423
+ }
424
+ :global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .card:global(.neutral):global(.highContrast).vertical:not(.hasContainer):global(.spottable):focus:global(.focusRing),
425
+ :global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .card:global(.neutral):global(.highContrast).vertical:not(.hasContainer):global(.spottable):focus:global(.focusRing) {
426
+ transform: none;
427
+ }
428
+ :global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .card:global(.neutral):global(.highContrast).vertical:not(.hasContainer):global(.spottable):focus:global(.focusRing) .image,
429
+ :global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .card:global(.neutral):global(.highContrast).vertical:not(.hasContainer):global(.spottable):focus:global(.focusRing) .image {
430
+ transform: none;
431
+ outline: 0.25rem solid #e6e6e6;
432
+ outline-offset: 0.1875rem;
433
+ }
434
+ :global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .card:global(.neutral):global(.highContrast).vertical:not(.hasContainer):global(.spottable):active:global(.focusRing) {
435
+ transform: none;
436
+ }
437
+ :global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .card:global(.neutral):global(.highContrast).vertical:not(.hasContainer):global(.spottable):active:global(.focusRing) .image {
438
+ transform: none;
439
+ outline: 0.25rem solid #e6e6e6;
440
+ outline-offset: 0.1875rem;
441
+ }
442
+ :global(.enact-a11y-high-contrast) .card:global(.neutral):global(.highContrast).vertical:not(.hasContainer):not(.selected):not(:focus) .image::before {
443
+ content: '';
444
+ position: absolute;
445
+ top: 0;
446
+ right: 0;
447
+ bottom: 0;
448
+ left: 0;
449
+ border: 1px solid var(--semantic-color-stroke-main);
450
+ border-radius: inherit;
451
+ z-index: 5;
452
+ }
453
+ :global(.enact-a11y-high-contrast) .card:global(.neutral):global(.highContrast).vertical.selected:not(.captionOverlay):not(.hasContainer) .selectionContainer {
454
+ border-color: var(--semantic-color-stroke-main-selected);
455
+ }
456
+ :global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .card:global(.neutral):global(.highContrast):global(.spottable):focus .selectionIcon,
457
+ :global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .card:global(.neutral):global(.highContrast):global(.spottable):focus .selectionIcon {
458
+ color: transparent;
459
+ }
460
+ :global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .card:global(.neutral):global(.highContrast):global(.spottable):focus.captionOverlay::before,
461
+ :global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .card:global(.neutral):global(.highContrast):global(.spottable):focus.captionOverlay::before {
462
+ content: '';
463
+ position: absolute;
464
+ top: 0;
465
+ right: 0;
466
+ bottom: 0;
467
+ left: 0;
468
+ border-width: 0.125rem;
469
+ border-style: solid;
470
+ border-color: var(--semantic-color-stroke-main-focused);
471
+ z-index: 5;
472
+ }
473
+ :global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .card:global(.neutral):global(.highContrast):global(.spottable):focus.selected .selectionIcon,
474
+ :global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .card:global(.neutral):global(.highContrast):global(.spottable):focus.selected .selectionIcon {
475
+ color: var(--semantic-color-on-surface-main-selected);
476
+ }
477
+ :global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .card:global(.neutral):global(.highContrast):global(.spottable):focus.hasContainer,
478
+ :global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .card:global(.neutral):global(.highContrast):global(.spottable):focus.hasContainer {
479
+ background-color: var(--semantic-color-surface-default-focused);
480
+ }
481
+ :global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .card:global(.neutral):global(.highContrast):global(.spottable):focus.hasContainer::before,
482
+ :global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .card:global(.neutral):global(.highContrast):global(.spottable):focus.hasContainer::before {
483
+ content: '';
484
+ position: absolute;
485
+ top: 0;
486
+ right: 0;
487
+ bottom: 0;
488
+ left: 0;
489
+ border-width: 0.125rem;
490
+ border-style: solid;
491
+ border-color: var(--semantic-color-stroke-main-focused);
492
+ z-index: 5;
493
+ }
494
+ :global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .card:global(.neutral):global(.highContrast):global(.spottable):focus.hasContainer .caption,
495
+ :global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .card:global(.neutral):global(.highContrast):global(.spottable):focus.hasContainer .caption {
496
+ color: var(--semantic-color-on-surface-main-focused);
497
+ }
498
+ :global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .card:global(.neutral):global(.highContrast):global(.spottable):focus.hasContainer .label,
499
+ :global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .card:global(.neutral):global(.highContrast):global(.spottable):focus.hasContainer .label {
500
+ color: var(--semantic-color-on-surface-sub-focused);
501
+ }
502
+ :global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .card:global(.neutral):global(.highContrast):global(.spottable):focus.vertical:not(.captionOverlay):not(.hasContainer):not(:global(.focusRing)) .selectionContainer,
503
+ :global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .card:global(.neutral):global(.highContrast):global(.spottable):focus.vertical:not(.captionOverlay):not(.hasContainer):not(:global(.focusRing)) .selectionContainer {
504
+ border-color: var(--semantic-color-stroke-main-focused);
505
+ }
506
+ :global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .card:global(.neutral):global(.highContrast):global(.spottable):active .selectionIcon {
507
+ color: transparent;
508
+ }
509
+ :global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .card:global(.neutral):global(.highContrast):global(.spottable):active.captionOverlay::before {
510
+ content: '';
511
+ position: absolute;
512
+ top: 0;
513
+ right: 0;
514
+ bottom: 0;
515
+ left: 0;
516
+ border-width: 0.125rem;
517
+ border-style: solid;
518
+ border-color: var(--semantic-color-stroke-main-focused);
519
+ z-index: 5;
520
+ }
521
+ :global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .card:global(.neutral):global(.highContrast):global(.spottable):active.selected .selectionIcon {
522
+ color: var(--semantic-color-on-surface-main-selected);
523
+ }
524
+ :global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .card:global(.neutral):global(.highContrast):global(.spottable):active.hasContainer {
525
+ background-color: var(--semantic-color-surface-default-focused);
526
+ }
527
+ :global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .card:global(.neutral):global(.highContrast):global(.spottable):active.hasContainer::before {
528
+ content: '';
529
+ position: absolute;
530
+ top: 0;
531
+ right: 0;
532
+ bottom: 0;
533
+ left: 0;
534
+ border-width: 0.125rem;
535
+ border-style: solid;
536
+ border-color: var(--semantic-color-stroke-main-focused);
537
+ z-index: 5;
538
+ }
539
+ :global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .card:global(.neutral):global(.highContrast):global(.spottable):active.hasContainer .caption {
540
+ color: var(--semantic-color-on-surface-main-focused);
541
+ }
542
+ :global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .card:global(.neutral):global(.highContrast):global(.spottable):active.hasContainer .label {
543
+ color: var(--semantic-color-on-surface-sub-focused);
544
+ }
545
+ :global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .card:global(.neutral):global(.highContrast):global(.spottable):active.vertical:not(.captionOverlay):not(.hasContainer):not(:global(.focusRing)) .selectionContainer {
546
+ border-color: var(--semantic-color-stroke-main-focused);
547
+ }
548
+ .card:global(.light) .selectionContainer {
549
+ border-color: transparent;
550
+ }
551
+ .card:global(.light) .selectionContainer .selectionIcon {
552
+ color: transparent;
553
+ }
554
+ .card:global(.light).selected .selectionIcon {
555
+ background-color: var(--semantic-color-surface-accent);
556
+ color: var(--semantic-color-on-surface-main-selected);
557
+ }
558
+ .card:global(.light).hasContainer {
559
+ background-color: color(from var(--semantic-color-surface-default-translucent) srgb r g b / 0.1);
560
+ }
561
+ .card:global(.light).hasContainer.selected::before {
562
+ content: '';
563
+ position: absolute;
564
+ top: 0;
565
+ right: 0;
566
+ bottom: 0;
567
+ left: 0;
568
+ border-width: 0.125rem;
569
+ border-style: solid;
570
+ border-color: var(--semantic-color-stroke-main-selected);
571
+ z-index: 5;
572
+ }
573
+ .card:global(.light).selected .image::after {
574
+ background: color(from var(--semantic-color-scrim-default) srgb r g b / 0.5);
575
+ }
576
+ .card:global(.light) .caption {
577
+ color: var(--semantic-color-on-background-main);
578
+ }
579
+ .card:global(.light) .label {
580
+ color: var(--semantic-color-on-background-sub);
581
+ }
582
+ .card:global(.light).vertical.captionOverlay .captions {
583
+ background: linear-gradient(180deg, transparent 0%, color(from var(--semantic-color-on-surface-black) srgb r g b / 0.7) 100%);
584
+ }
585
+ .card:global(.light).vertical.captionOverlay.selected:not(:focus)::before {
586
+ content: '';
587
+ position: absolute;
588
+ top: 0;
589
+ right: 0;
590
+ bottom: 0;
591
+ left: 0;
592
+ border-width: 0.125rem;
593
+ border-style: solid;
594
+ border-color: var(--semantic-color-stroke-main-selected);
595
+ z-index: 5;
596
+ }
597
+ .card:global(.light).vertical.captionOverlay:not(.selected)::before {
598
+ content: '';
599
+ position: absolute;
600
+ top: 0;
601
+ right: 0;
602
+ bottom: 0;
603
+ left: 0;
604
+ border: 1px solid var(--semantic-color-stroke-main);
605
+ border-radius: inherit;
606
+ z-index: 5;
607
+ }
608
+ :global(.spotlight-input-key) .card:global(.light).vertical:not(.hasContainer):global(.spottable):focus:global(.focusRing),
609
+ :global(.spotlight-input-mouse) .card:global(.light).vertical:not(.hasContainer):global(.spottable):focus:global(.focusRing) {
610
+ transform: none;
611
+ }
612
+ :global(.spotlight-input-key) .card:global(.light).vertical:not(.hasContainer):global(.spottable):focus:global(.focusRing) .image,
613
+ :global(.spotlight-input-mouse) .card:global(.light).vertical:not(.hasContainer):global(.spottable):focus:global(.focusRing) .image {
614
+ transform: none;
615
+ outline: 0.25rem solid #e6e6e6;
616
+ outline-offset: 0.1875rem;
617
+ }
618
+ :global(.spotlight-input-touch) .card:global(.light).vertical:not(.hasContainer):global(.spottable):active:global(.focusRing) {
619
+ transform: none;
620
+ }
621
+ :global(.spotlight-input-touch) .card:global(.light).vertical:not(.hasContainer):global(.spottable):active:global(.focusRing) .image {
622
+ transform: none;
623
+ outline: 0.25rem solid #e6e6e6;
624
+ outline-offset: 0.1875rem;
625
+ }
626
+ .card:global(.light).vertical:not(.hasContainer):not(.selected):not(:focus) .image::before {
627
+ content: '';
628
+ position: absolute;
629
+ top: 0;
630
+ right: 0;
631
+ bottom: 0;
632
+ left: 0;
633
+ border: 1px solid var(--semantic-color-stroke-main);
634
+ border-radius: inherit;
635
+ z-index: 5;
636
+ }
637
+ .card:global(.light).vertical.selected:not(.captionOverlay):not(.hasContainer) .selectionContainer {
638
+ border-color: var(--semantic-color-stroke-main-selected);
639
+ }
640
+ :global(.spotlight-input-key) .card:global(.light):global(.spottable):focus .selectionIcon,
641
+ :global(.spotlight-input-mouse) .card:global(.light):global(.spottable):focus .selectionIcon {
642
+ color: transparent;
643
+ }
644
+ :global(.spotlight-input-key) .card:global(.light):global(.spottable):focus.captionOverlay::before,
645
+ :global(.spotlight-input-mouse) .card:global(.light):global(.spottable):focus.captionOverlay::before {
646
+ content: '';
647
+ position: absolute;
648
+ top: 0;
649
+ right: 0;
650
+ bottom: 0;
651
+ left: 0;
652
+ border-width: 0.125rem;
653
+ border-style: solid;
654
+ border-color: var(--semantic-color-stroke-main-focused);
655
+ z-index: 5;
656
+ }
657
+ :global(.spotlight-input-key) .card:global(.light):global(.spottable):focus.selected .selectionIcon,
658
+ :global(.spotlight-input-mouse) .card:global(.light):global(.spottable):focus.selected .selectionIcon {
659
+ color: var(--semantic-color-on-surface-main-selected);
660
+ }
661
+ :global(.spotlight-input-key) .card:global(.light):global(.spottable):focus.hasContainer,
662
+ :global(.spotlight-input-mouse) .card:global(.light):global(.spottable):focus.hasContainer {
663
+ background-color: var(--semantic-color-surface-default-focused);
664
+ }
665
+ :global(.spotlight-input-key) .card:global(.light):global(.spottable):focus.hasContainer::before,
666
+ :global(.spotlight-input-mouse) .card:global(.light):global(.spottable):focus.hasContainer::before {
667
+ content: '';
668
+ position: absolute;
669
+ top: 0;
670
+ right: 0;
671
+ bottom: 0;
672
+ left: 0;
673
+ border-width: 0.125rem;
674
+ border-style: solid;
675
+ border-color: var(--semantic-color-stroke-main-focused);
676
+ z-index: 5;
677
+ }
678
+ :global(.spotlight-input-key) .card:global(.light):global(.spottable):focus.hasContainer .caption,
679
+ :global(.spotlight-input-mouse) .card:global(.light):global(.spottable):focus.hasContainer .caption {
680
+ color: var(--semantic-color-on-surface-main-focused);
681
+ }
682
+ :global(.spotlight-input-key) .card:global(.light):global(.spottable):focus.hasContainer .label,
683
+ :global(.spotlight-input-mouse) .card:global(.light):global(.spottable):focus.hasContainer .label {
684
+ color: var(--semantic-color-on-surface-sub-focused);
685
+ }
686
+ :global(.spotlight-input-key) .card:global(.light):global(.spottable):focus.vertical:not(.captionOverlay):not(.hasContainer):not(:global(.focusRing)) .selectionContainer,
687
+ :global(.spotlight-input-mouse) .card:global(.light):global(.spottable):focus.vertical:not(.captionOverlay):not(.hasContainer):not(:global(.focusRing)) .selectionContainer {
688
+ border-color: var(--semantic-color-stroke-main-focused);
689
+ }
690
+ :global(.spotlight-input-touch) .card:global(.light):global(.spottable):active .selectionIcon {
691
+ color: transparent;
692
+ }
693
+ :global(.spotlight-input-touch) .card:global(.light):global(.spottable):active.captionOverlay::before {
694
+ content: '';
695
+ position: absolute;
696
+ top: 0;
697
+ right: 0;
698
+ bottom: 0;
699
+ left: 0;
700
+ border-width: 0.125rem;
701
+ border-style: solid;
702
+ border-color: var(--semantic-color-stroke-main-focused);
703
+ z-index: 5;
704
+ }
705
+ :global(.spotlight-input-touch) .card:global(.light):global(.spottable):active.selected .selectionIcon {
706
+ color: var(--semantic-color-on-surface-main-selected);
707
+ }
708
+ :global(.spotlight-input-touch) .card:global(.light):global(.spottable):active.hasContainer {
709
+ background-color: var(--semantic-color-surface-default-focused);
710
+ }
711
+ :global(.spotlight-input-touch) .card:global(.light):global(.spottable):active.hasContainer::before {
712
+ content: '';
713
+ position: absolute;
714
+ top: 0;
715
+ right: 0;
716
+ bottom: 0;
717
+ left: 0;
718
+ border-width: 0.125rem;
719
+ border-style: solid;
720
+ border-color: var(--semantic-color-stroke-main-focused);
721
+ z-index: 5;
722
+ }
723
+ :global(.spotlight-input-touch) .card:global(.light):global(.spottable):active.hasContainer .caption {
724
+ color: var(--semantic-color-on-surface-main-focused);
725
+ }
726
+ :global(.spotlight-input-touch) .card:global(.light):global(.spottable):active.hasContainer .label {
727
+ color: var(--semantic-color-on-surface-sub-focused);
728
+ }
729
+ :global(.spotlight-input-touch) .card:global(.light):global(.spottable):active.vertical:not(.captionOverlay):not(.hasContainer):not(:global(.focusRing)) .selectionContainer {
730
+ border-color: var(--semantic-color-stroke-main-focused);
731
+ }
732
+ .card:global(.game) {
733
+ --semantic-color-surface-default: #2d224c;
734
+ --semantic-color-surface-default-focused: #6d2fa1;
735
+ --semantic-color-on-surface-main-focused: #e6e6e6;
736
+ }
737
+ .card:global(.game) .selectionContainer {
738
+ border-color: transparent;
739
+ }
740
+ .card:global(.game) .selectionContainer .selectionIcon {
741
+ color: transparent;
742
+ }
743
+ .card:global(.game).selected .selectionIcon {
744
+ background-color: var(--semantic-color-surface-accent);
745
+ color: var(--semantic-color-on-surface-main-selected);
746
+ }
747
+ .card:global(.game).hasContainer {
748
+ background-color: color(from var(--semantic-color-surface-default-translucent) srgb r g b / 0.1);
749
+ }
750
+ .card:global(.game).hasContainer.selected::before {
751
+ content: '';
752
+ position: absolute;
753
+ top: 0;
754
+ right: 0;
755
+ bottom: 0;
756
+ left: 0;
757
+ border-width: 0.125rem;
758
+ border-style: solid;
759
+ border-color: var(--semantic-color-stroke-main-selected);
760
+ z-index: 5;
761
+ }
762
+ .card:global(.game).selected .image::after {
763
+ background: color(from var(--semantic-color-scrim-default) srgb r g b / 0.5);
764
+ }
765
+ .card:global(.game) .caption {
766
+ color: var(--semantic-color-on-background-main);
767
+ }
768
+ .card:global(.game) .label {
769
+ color: var(--semantic-color-on-background-sub);
770
+ }
771
+ .card:global(.game).vertical.captionOverlay .captions {
772
+ background: linear-gradient(180deg, transparent 0%, color(from var(--semantic-color-on-surface-black) srgb r g b / 0.7) 100%);
773
+ }
774
+ .card:global(.game).vertical.captionOverlay.selected:not(:focus)::before {
775
+ content: '';
776
+ position: absolute;
777
+ top: 0;
778
+ right: 0;
779
+ bottom: 0;
780
+ left: 0;
781
+ border-width: 0.125rem;
782
+ border-style: solid;
783
+ border-color: var(--semantic-color-stroke-main-selected);
784
+ z-index: 5;
785
+ }
786
+ .card:global(.game).vertical.captionOverlay:not(.selected)::before {
787
+ content: '';
788
+ position: absolute;
789
+ top: 0;
790
+ right: 0;
791
+ bottom: 0;
792
+ left: 0;
793
+ border: 1px solid var(--semantic-color-stroke-main);
794
+ border-radius: inherit;
795
+ z-index: 5;
796
+ }
797
+ :global(.spotlight-input-key) .card:global(.game).vertical:not(.hasContainer):global(.spottable):focus:global(.focusRing),
798
+ :global(.spotlight-input-mouse) .card:global(.game).vertical:not(.hasContainer):global(.spottable):focus:global(.focusRing) {
799
+ transform: none;
800
+ }
801
+ :global(.spotlight-input-key) .card:global(.game).vertical:not(.hasContainer):global(.spottable):focus:global(.focusRing) .image,
802
+ :global(.spotlight-input-mouse) .card:global(.game).vertical:not(.hasContainer):global(.spottable):focus:global(.focusRing) .image {
803
+ transform: none;
804
+ outline: 0.25rem solid #e6e6e6;
805
+ outline-offset: 0.1875rem;
806
+ }
807
+ :global(.spotlight-input-touch) .card:global(.game).vertical:not(.hasContainer):global(.spottable):active:global(.focusRing) {
808
+ transform: none;
809
+ }
810
+ :global(.spotlight-input-touch) .card:global(.game).vertical:not(.hasContainer):global(.spottable):active:global(.focusRing) .image {
811
+ transform: none;
812
+ outline: 0.25rem solid #e6e6e6;
813
+ outline-offset: 0.1875rem;
814
+ }
815
+ .card:global(.game).vertical:not(.hasContainer):not(.selected):not(:focus) .image::before {
816
+ content: '';
817
+ position: absolute;
818
+ top: 0;
819
+ right: 0;
820
+ bottom: 0;
821
+ left: 0;
822
+ border: 1px solid var(--semantic-color-stroke-main);
823
+ border-radius: inherit;
824
+ z-index: 5;
825
+ }
826
+ .card:global(.game).vertical.selected:not(.captionOverlay):not(.hasContainer) .selectionContainer {
827
+ border-color: var(--semantic-color-stroke-main-selected);
828
+ }
829
+ :global(.spotlight-input-key) .card:global(.game):global(.spottable):focus .selectionIcon,
830
+ :global(.spotlight-input-mouse) .card:global(.game):global(.spottable):focus .selectionIcon {
831
+ color: transparent;
832
+ }
833
+ :global(.spotlight-input-key) .card:global(.game):global(.spottable):focus.captionOverlay::before,
834
+ :global(.spotlight-input-mouse) .card:global(.game):global(.spottable):focus.captionOverlay::before {
835
+ content: '';
836
+ position: absolute;
837
+ top: 0;
838
+ right: 0;
839
+ bottom: 0;
840
+ left: 0;
841
+ border-width: 0.125rem;
842
+ border-style: solid;
843
+ border-color: var(--semantic-color-stroke-main-focused);
844
+ z-index: 5;
845
+ }
846
+ :global(.spotlight-input-key) .card:global(.game):global(.spottable):focus.selected .selectionIcon,
847
+ :global(.spotlight-input-mouse) .card:global(.game):global(.spottable):focus.selected .selectionIcon {
848
+ color: var(--semantic-color-on-surface-main-selected);
849
+ }
850
+ :global(.spotlight-input-key) .card:global(.game):global(.spottable):focus.hasContainer,
851
+ :global(.spotlight-input-mouse) .card:global(.game):global(.spottable):focus.hasContainer {
852
+ background-color: var(--semantic-color-surface-default-focused);
853
+ }
854
+ :global(.spotlight-input-key) .card:global(.game):global(.spottable):focus.hasContainer::before,
855
+ :global(.spotlight-input-mouse) .card:global(.game):global(.spottable):focus.hasContainer::before {
856
+ content: '';
857
+ position: absolute;
858
+ top: 0;
859
+ right: 0;
860
+ bottom: 0;
861
+ left: 0;
862
+ border-width: 0.125rem;
863
+ border-style: solid;
864
+ border-color: var(--semantic-color-stroke-main-focused);
865
+ z-index: 5;
866
+ }
867
+ :global(.spotlight-input-key) .card:global(.game):global(.spottable):focus.hasContainer .caption,
868
+ :global(.spotlight-input-mouse) .card:global(.game):global(.spottable):focus.hasContainer .caption {
869
+ color: var(--semantic-color-on-surface-main-focused);
870
+ }
871
+ :global(.spotlight-input-key) .card:global(.game):global(.spottable):focus.hasContainer .label,
872
+ :global(.spotlight-input-mouse) .card:global(.game):global(.spottable):focus.hasContainer .label {
873
+ color: var(--semantic-color-on-surface-sub-focused);
874
+ }
875
+ :global(.spotlight-input-key) .card:global(.game):global(.spottable):focus.vertical:not(.captionOverlay):not(.hasContainer):not(:global(.focusRing)) .selectionContainer,
876
+ :global(.spotlight-input-mouse) .card:global(.game):global(.spottable):focus.vertical:not(.captionOverlay):not(.hasContainer):not(:global(.focusRing)) .selectionContainer {
877
+ border-color: var(--semantic-color-stroke-main-focused);
878
+ }
879
+ :global(.spotlight-input-touch) .card:global(.game):global(.spottable):active .selectionIcon {
880
+ color: transparent;
881
+ }
882
+ :global(.spotlight-input-touch) .card:global(.game):global(.spottable):active.captionOverlay::before {
883
+ content: '';
884
+ position: absolute;
885
+ top: 0;
886
+ right: 0;
887
+ bottom: 0;
888
+ left: 0;
889
+ border-width: 0.125rem;
890
+ border-style: solid;
891
+ border-color: var(--semantic-color-stroke-main-focused);
892
+ z-index: 5;
893
+ }
894
+ :global(.spotlight-input-touch) .card:global(.game):global(.spottable):active.selected .selectionIcon {
895
+ color: var(--semantic-color-on-surface-main-selected);
896
+ }
897
+ :global(.spotlight-input-touch) .card:global(.game):global(.spottable):active.hasContainer {
898
+ background-color: var(--semantic-color-surface-default-focused);
899
+ }
900
+ :global(.spotlight-input-touch) .card:global(.game):global(.spottable):active.hasContainer::before {
901
+ content: '';
902
+ position: absolute;
903
+ top: 0;
904
+ right: 0;
905
+ bottom: 0;
906
+ left: 0;
907
+ border-width: 0.125rem;
908
+ border-style: solid;
909
+ border-color: var(--semantic-color-stroke-main-focused);
910
+ z-index: 5;
911
+ }
912
+ :global(.spotlight-input-touch) .card:global(.game):global(.spottable):active.hasContainer .caption {
913
+ color: var(--semantic-color-on-surface-main-focused);
914
+ }
915
+ :global(.spotlight-input-touch) .card:global(.game):global(.spottable):active.hasContainer .label {
916
+ color: var(--semantic-color-on-surface-sub-focused);
917
+ }
918
+ :global(.spotlight-input-touch) .card:global(.game):global(.spottable):active.vertical:not(.captionOverlay):not(.hasContainer):not(:global(.focusRing)) .selectionContainer {
919
+ border-color: var(--semantic-color-stroke-main-focused);
920
+ }
921
+ :global(.green) .card:global(.game) {
922
+ --semantic-color-surface-default: #1F2C24;
923
+ --semantic-color-surface-default-focused: #3ea07d;
924
+ }
925
+ :global(.green) .card:global(.game) .selectionContainer {
926
+ border-color: transparent;
927
+ }
928
+ :global(.green) .card:global(.game) .selectionContainer .selectionIcon {
929
+ color: transparent;
930
+ }
931
+ :global(.green) .card:global(.game).selected .selectionIcon {
932
+ background-color: var(--semantic-color-surface-accent);
933
+ color: var(--semantic-color-on-surface-main-selected);
934
+ }
935
+ :global(.green) .card:global(.game).hasContainer {
936
+ background-color: color(from var(--semantic-color-surface-default-translucent) srgb r g b / 0.1);
937
+ }
938
+ :global(.green) .card:global(.game).hasContainer.selected::before {
939
+ content: '';
940
+ position: absolute;
941
+ top: 0;
942
+ right: 0;
943
+ bottom: 0;
944
+ left: 0;
945
+ border-width: 0.125rem;
946
+ border-style: solid;
947
+ border-color: var(--semantic-color-stroke-main-selected);
948
+ z-index: 5;
949
+ }
950
+ :global(.green) .card:global(.game).selected .image::after {
951
+ background: color(from var(--semantic-color-scrim-default) srgb r g b / 0.5);
952
+ }
953
+ :global(.green) .card:global(.game) .caption {
954
+ color: var(--semantic-color-on-background-main);
955
+ }
956
+ :global(.green) .card:global(.game) .label {
957
+ color: var(--semantic-color-on-background-sub);
958
+ }
959
+ :global(.green) .card:global(.game).vertical.captionOverlay .captions {
960
+ background: linear-gradient(180deg, transparent 0%, color(from var(--semantic-color-on-surface-black) srgb r g b / 0.7) 100%);
961
+ }
962
+ :global(.green) .card:global(.game).vertical.captionOverlay.selected:not(:focus)::before {
963
+ content: '';
964
+ position: absolute;
965
+ top: 0;
966
+ right: 0;
967
+ bottom: 0;
968
+ left: 0;
969
+ border-width: 0.125rem;
970
+ border-style: solid;
971
+ border-color: var(--semantic-color-stroke-main-selected);
972
+ z-index: 5;
973
+ }
974
+ :global(.green) .card:global(.game).vertical.captionOverlay:not(.selected)::before {
975
+ content: '';
976
+ position: absolute;
977
+ top: 0;
978
+ right: 0;
979
+ bottom: 0;
980
+ left: 0;
981
+ border: 1px solid var(--semantic-color-stroke-main);
982
+ border-radius: inherit;
983
+ z-index: 5;
984
+ }
985
+ :global(.spotlight-input-key) :global(.green) .card:global(.game).vertical:not(.hasContainer):global(.spottable):focus:global(.focusRing),
986
+ :global(.spotlight-input-mouse) :global(.green) .card:global(.game).vertical:not(.hasContainer):global(.spottable):focus:global(.focusRing) {
987
+ transform: none;
988
+ }
989
+ :global(.spotlight-input-key) :global(.green) .card:global(.game).vertical:not(.hasContainer):global(.spottable):focus:global(.focusRing) .image,
990
+ :global(.spotlight-input-mouse) :global(.green) .card:global(.game).vertical:not(.hasContainer):global(.spottable):focus:global(.focusRing) .image {
991
+ transform: none;
992
+ outline: 0.25rem solid #e6e6e6;
993
+ outline-offset: 0.1875rem;
994
+ }
995
+ :global(.spotlight-input-touch) :global(.green) .card:global(.game).vertical:not(.hasContainer):global(.spottable):active:global(.focusRing) {
996
+ transform: none;
997
+ }
998
+ :global(.spotlight-input-touch) :global(.green) .card:global(.game).vertical:not(.hasContainer):global(.spottable):active:global(.focusRing) .image {
999
+ transform: none;
1000
+ outline: 0.25rem solid #e6e6e6;
1001
+ outline-offset: 0.1875rem;
1002
+ }
1003
+ :global(.green) .card:global(.game).vertical:not(.hasContainer):not(.selected):not(:focus) .image::before {
1004
+ content: '';
1005
+ position: absolute;
1006
+ top: 0;
1007
+ right: 0;
1008
+ bottom: 0;
1009
+ left: 0;
1010
+ border: 1px solid var(--semantic-color-stroke-main);
1011
+ border-radius: inherit;
1012
+ z-index: 5;
1013
+ }
1014
+ :global(.green) .card:global(.game).vertical.selected:not(.captionOverlay):not(.hasContainer) .selectionContainer {
1015
+ border-color: var(--semantic-color-stroke-main-selected);
1016
+ }
1017
+ :global(.spotlight-input-key) :global(.green) .card:global(.game):global(.spottable):focus .selectionIcon,
1018
+ :global(.spotlight-input-mouse) :global(.green) .card:global(.game):global(.spottable):focus .selectionIcon {
1019
+ color: transparent;
1020
+ }
1021
+ :global(.spotlight-input-key) :global(.green) .card:global(.game):global(.spottable):focus.captionOverlay::before,
1022
+ :global(.spotlight-input-mouse) :global(.green) .card:global(.game):global(.spottable):focus.captionOverlay::before {
1023
+ content: '';
1024
+ position: absolute;
1025
+ top: 0;
1026
+ right: 0;
1027
+ bottom: 0;
1028
+ left: 0;
1029
+ border-width: 0.125rem;
1030
+ border-style: solid;
1031
+ border-color: var(--semantic-color-stroke-main-focused);
1032
+ z-index: 5;
1033
+ }
1034
+ :global(.spotlight-input-key) :global(.green) .card:global(.game):global(.spottable):focus.selected .selectionIcon,
1035
+ :global(.spotlight-input-mouse) :global(.green) .card:global(.game):global(.spottable):focus.selected .selectionIcon {
1036
+ color: var(--semantic-color-on-surface-main-selected);
1037
+ }
1038
+ :global(.spotlight-input-key) :global(.green) .card:global(.game):global(.spottable):focus.hasContainer,
1039
+ :global(.spotlight-input-mouse) :global(.green) .card:global(.game):global(.spottable):focus.hasContainer {
1040
+ background-color: var(--semantic-color-surface-default-focused);
1041
+ }
1042
+ :global(.spotlight-input-key) :global(.green) .card:global(.game):global(.spottable):focus.hasContainer::before,
1043
+ :global(.spotlight-input-mouse) :global(.green) .card:global(.game):global(.spottable):focus.hasContainer::before {
1044
+ content: '';
1045
+ position: absolute;
1046
+ top: 0;
1047
+ right: 0;
1048
+ bottom: 0;
1049
+ left: 0;
1050
+ border-width: 0.125rem;
1051
+ border-style: solid;
1052
+ border-color: var(--semantic-color-stroke-main-focused);
1053
+ z-index: 5;
1054
+ }
1055
+ :global(.spotlight-input-key) :global(.green) .card:global(.game):global(.spottable):focus.hasContainer .caption,
1056
+ :global(.spotlight-input-mouse) :global(.green) .card:global(.game):global(.spottable):focus.hasContainer .caption {
1057
+ color: var(--semantic-color-on-surface-main-focused);
1058
+ }
1059
+ :global(.spotlight-input-key) :global(.green) .card:global(.game):global(.spottable):focus.hasContainer .label,
1060
+ :global(.spotlight-input-mouse) :global(.green) .card:global(.game):global(.spottable):focus.hasContainer .label {
1061
+ color: var(--semantic-color-on-surface-sub-focused);
1062
+ }
1063
+ :global(.spotlight-input-key) :global(.green) .card:global(.game):global(.spottable):focus.vertical:not(.captionOverlay):not(.hasContainer):not(:global(.focusRing)) .selectionContainer,
1064
+ :global(.spotlight-input-mouse) :global(.green) .card:global(.game):global(.spottable):focus.vertical:not(.captionOverlay):not(.hasContainer):not(:global(.focusRing)) .selectionContainer {
1065
+ border-color: var(--semantic-color-stroke-main-focused);
1066
+ }
1067
+ :global(.spotlight-input-touch) :global(.green) .card:global(.game):global(.spottable):active .selectionIcon {
1068
+ color: transparent;
1069
+ }
1070
+ :global(.spotlight-input-touch) :global(.green) .card:global(.game):global(.spottable):active.captionOverlay::before {
1071
+ content: '';
1072
+ position: absolute;
1073
+ top: 0;
1074
+ right: 0;
1075
+ bottom: 0;
1076
+ left: 0;
1077
+ border-width: 0.125rem;
1078
+ border-style: solid;
1079
+ border-color: var(--semantic-color-stroke-main-focused);
1080
+ z-index: 5;
1081
+ }
1082
+ :global(.spotlight-input-touch) :global(.green) .card:global(.game):global(.spottable):active.selected .selectionIcon {
1083
+ color: var(--semantic-color-on-surface-main-selected);
1084
+ }
1085
+ :global(.spotlight-input-touch) :global(.green) .card:global(.game):global(.spottable):active.hasContainer {
1086
+ background-color: var(--semantic-color-surface-default-focused);
1087
+ }
1088
+ :global(.spotlight-input-touch) :global(.green) .card:global(.game):global(.spottable):active.hasContainer::before {
1089
+ content: '';
1090
+ position: absolute;
1091
+ top: 0;
1092
+ right: 0;
1093
+ bottom: 0;
1094
+ left: 0;
1095
+ border-width: 0.125rem;
1096
+ border-style: solid;
1097
+ border-color: var(--semantic-color-stroke-main-focused);
1098
+ z-index: 5;
1099
+ }
1100
+ :global(.spotlight-input-touch) :global(.green) .card:global(.game):global(.spottable):active.hasContainer .caption {
1101
+ color: var(--semantic-color-on-surface-main-focused);
1102
+ }
1103
+ :global(.spotlight-input-touch) :global(.green) .card:global(.game):global(.spottable):active.hasContainer .label {
1104
+ color: var(--semantic-color-on-surface-sub-focused);
1105
+ }
1106
+ :global(.spotlight-input-touch) :global(.green) .card:global(.game):global(.spottable):active.vertical:not(.captionOverlay):not(.hasContainer):not(:global(.focusRing)) .selectionContainer {
1107
+ border-color: var(--semantic-color-stroke-main-focused);
1108
+ }
1109
+ :global(.orange) .card:global(.game) {
1110
+ --semantic-color-surface-default: #422923;
1111
+ --semantic-color-surface-default-focused: #b85f23;
1112
+ }
1113
+ :global(.orange) .card:global(.game) .selectionContainer {
1114
+ border-color: transparent;
1115
+ }
1116
+ :global(.orange) .card:global(.game) .selectionContainer .selectionIcon {
1117
+ color: transparent;
1118
+ }
1119
+ :global(.orange) .card:global(.game).selected .selectionIcon {
1120
+ background-color: var(--semantic-color-surface-accent);
1121
+ color: var(--semantic-color-on-surface-main-selected);
1122
+ }
1123
+ :global(.orange) .card:global(.game).hasContainer {
1124
+ background-color: color(from var(--semantic-color-surface-default-translucent) srgb r g b / 0.1);
1125
+ }
1126
+ :global(.orange) .card:global(.game).hasContainer.selected::before {
1127
+ content: '';
1128
+ position: absolute;
1129
+ top: 0;
1130
+ right: 0;
1131
+ bottom: 0;
1132
+ left: 0;
1133
+ border-width: 0.125rem;
1134
+ border-style: solid;
1135
+ border-color: var(--semantic-color-stroke-main-selected);
1136
+ z-index: 5;
1137
+ }
1138
+ :global(.orange) .card:global(.game).selected .image::after {
1139
+ background: color(from var(--semantic-color-scrim-default) srgb r g b / 0.5);
1140
+ }
1141
+ :global(.orange) .card:global(.game) .caption {
1142
+ color: var(--semantic-color-on-background-main);
1143
+ }
1144
+ :global(.orange) .card:global(.game) .label {
1145
+ color: var(--semantic-color-on-background-sub);
1146
+ }
1147
+ :global(.orange) .card:global(.game).vertical.captionOverlay .captions {
1148
+ background: linear-gradient(180deg, transparent 0%, color(from var(--semantic-color-on-surface-black) srgb r g b / 0.7) 100%);
1149
+ }
1150
+ :global(.orange) .card:global(.game).vertical.captionOverlay.selected:not(:focus)::before {
1151
+ content: '';
1152
+ position: absolute;
1153
+ top: 0;
1154
+ right: 0;
1155
+ bottom: 0;
1156
+ left: 0;
1157
+ border-width: 0.125rem;
1158
+ border-style: solid;
1159
+ border-color: var(--semantic-color-stroke-main-selected);
1160
+ z-index: 5;
1161
+ }
1162
+ :global(.orange) .card:global(.game).vertical.captionOverlay:not(.selected)::before {
1163
+ content: '';
1164
+ position: absolute;
1165
+ top: 0;
1166
+ right: 0;
1167
+ bottom: 0;
1168
+ left: 0;
1169
+ border: 1px solid var(--semantic-color-stroke-main);
1170
+ border-radius: inherit;
1171
+ z-index: 5;
1172
+ }
1173
+ :global(.spotlight-input-key) :global(.orange) .card:global(.game).vertical:not(.hasContainer):global(.spottable):focus:global(.focusRing),
1174
+ :global(.spotlight-input-mouse) :global(.orange) .card:global(.game).vertical:not(.hasContainer):global(.spottable):focus:global(.focusRing) {
1175
+ transform: none;
1176
+ }
1177
+ :global(.spotlight-input-key) :global(.orange) .card:global(.game).vertical:not(.hasContainer):global(.spottable):focus:global(.focusRing) .image,
1178
+ :global(.spotlight-input-mouse) :global(.orange) .card:global(.game).vertical:not(.hasContainer):global(.spottable):focus:global(.focusRing) .image {
1179
+ transform: none;
1180
+ outline: 0.25rem solid #e6e6e6;
1181
+ outline-offset: 0.1875rem;
1182
+ }
1183
+ :global(.spotlight-input-touch) :global(.orange) .card:global(.game).vertical:not(.hasContainer):global(.spottable):active:global(.focusRing) {
1184
+ transform: none;
1185
+ }
1186
+ :global(.spotlight-input-touch) :global(.orange) .card:global(.game).vertical:not(.hasContainer):global(.spottable):active:global(.focusRing) .image {
1187
+ transform: none;
1188
+ outline: 0.25rem solid #e6e6e6;
1189
+ outline-offset: 0.1875rem;
1190
+ }
1191
+ :global(.orange) .card:global(.game).vertical:not(.hasContainer):not(.selected):not(:focus) .image::before {
1192
+ content: '';
1193
+ position: absolute;
1194
+ top: 0;
1195
+ right: 0;
1196
+ bottom: 0;
1197
+ left: 0;
1198
+ border: 1px solid var(--semantic-color-stroke-main);
1199
+ border-radius: inherit;
1200
+ z-index: 5;
1201
+ }
1202
+ :global(.orange) .card:global(.game).vertical.selected:not(.captionOverlay):not(.hasContainer) .selectionContainer {
1203
+ border-color: var(--semantic-color-stroke-main-selected);
1204
+ }
1205
+ :global(.spotlight-input-key) :global(.orange) .card:global(.game):global(.spottable):focus .selectionIcon,
1206
+ :global(.spotlight-input-mouse) :global(.orange) .card:global(.game):global(.spottable):focus .selectionIcon {
1207
+ color: transparent;
1208
+ }
1209
+ :global(.spotlight-input-key) :global(.orange) .card:global(.game):global(.spottable):focus.captionOverlay::before,
1210
+ :global(.spotlight-input-mouse) :global(.orange) .card:global(.game):global(.spottable):focus.captionOverlay::before {
1211
+ content: '';
1212
+ position: absolute;
1213
+ top: 0;
1214
+ right: 0;
1215
+ bottom: 0;
1216
+ left: 0;
1217
+ border-width: 0.125rem;
1218
+ border-style: solid;
1219
+ border-color: var(--semantic-color-stroke-main-focused);
1220
+ z-index: 5;
1221
+ }
1222
+ :global(.spotlight-input-key) :global(.orange) .card:global(.game):global(.spottable):focus.selected .selectionIcon,
1223
+ :global(.spotlight-input-mouse) :global(.orange) .card:global(.game):global(.spottable):focus.selected .selectionIcon {
1224
+ color: var(--semantic-color-on-surface-main-selected);
1225
+ }
1226
+ :global(.spotlight-input-key) :global(.orange) .card:global(.game):global(.spottable):focus.hasContainer,
1227
+ :global(.spotlight-input-mouse) :global(.orange) .card:global(.game):global(.spottable):focus.hasContainer {
1228
+ background-color: var(--semantic-color-surface-default-focused);
1229
+ }
1230
+ :global(.spotlight-input-key) :global(.orange) .card:global(.game):global(.spottable):focus.hasContainer::before,
1231
+ :global(.spotlight-input-mouse) :global(.orange) .card:global(.game):global(.spottable):focus.hasContainer::before {
1232
+ content: '';
1233
+ position: absolute;
1234
+ top: 0;
1235
+ right: 0;
1236
+ bottom: 0;
1237
+ left: 0;
1238
+ border-width: 0.125rem;
1239
+ border-style: solid;
1240
+ border-color: var(--semantic-color-stroke-main-focused);
1241
+ z-index: 5;
1242
+ }
1243
+ :global(.spotlight-input-key) :global(.orange) .card:global(.game):global(.spottable):focus.hasContainer .caption,
1244
+ :global(.spotlight-input-mouse) :global(.orange) .card:global(.game):global(.spottable):focus.hasContainer .caption {
1245
+ color: var(--semantic-color-on-surface-main-focused);
1246
+ }
1247
+ :global(.spotlight-input-key) :global(.orange) .card:global(.game):global(.spottable):focus.hasContainer .label,
1248
+ :global(.spotlight-input-mouse) :global(.orange) .card:global(.game):global(.spottable):focus.hasContainer .label {
1249
+ color: var(--semantic-color-on-surface-sub-focused);
1250
+ }
1251
+ :global(.spotlight-input-key) :global(.orange) .card:global(.game):global(.spottable):focus.vertical:not(.captionOverlay):not(.hasContainer):not(:global(.focusRing)) .selectionContainer,
1252
+ :global(.spotlight-input-mouse) :global(.orange) .card:global(.game):global(.spottable):focus.vertical:not(.captionOverlay):not(.hasContainer):not(:global(.focusRing)) .selectionContainer {
1253
+ border-color: var(--semantic-color-stroke-main-focused);
1254
+ }
1255
+ :global(.spotlight-input-touch) :global(.orange) .card:global(.game):global(.spottable):active .selectionIcon {
1256
+ color: transparent;
1257
+ }
1258
+ :global(.spotlight-input-touch) :global(.orange) .card:global(.game):global(.spottable):active.captionOverlay::before {
1259
+ content: '';
1260
+ position: absolute;
1261
+ top: 0;
1262
+ right: 0;
1263
+ bottom: 0;
1264
+ left: 0;
1265
+ border-width: 0.125rem;
1266
+ border-style: solid;
1267
+ border-color: var(--semantic-color-stroke-main-focused);
1268
+ z-index: 5;
1269
+ }
1270
+ :global(.spotlight-input-touch) :global(.orange) .card:global(.game):global(.spottable):active.selected .selectionIcon {
1271
+ color: var(--semantic-color-on-surface-main-selected);
1272
+ }
1273
+ :global(.spotlight-input-touch) :global(.orange) .card:global(.game):global(.spottable):active.hasContainer {
1274
+ background-color: var(--semantic-color-surface-default-focused);
1275
+ }
1276
+ :global(.spotlight-input-touch) :global(.orange) .card:global(.game):global(.spottable):active.hasContainer::before {
1277
+ content: '';
1278
+ position: absolute;
1279
+ top: 0;
1280
+ right: 0;
1281
+ bottom: 0;
1282
+ left: 0;
1283
+ border-width: 0.125rem;
1284
+ border-style: solid;
1285
+ border-color: var(--semantic-color-stroke-main-focused);
1286
+ z-index: 5;
1287
+ }
1288
+ :global(.spotlight-input-touch) :global(.orange) .card:global(.game):global(.spottable):active.hasContainer .caption {
1289
+ color: var(--semantic-color-on-surface-main-focused);
1290
+ }
1291
+ :global(.spotlight-input-touch) :global(.orange) .card:global(.game):global(.spottable):active.hasContainer .label {
1292
+ color: var(--semantic-color-on-surface-sub-focused);
1293
+ }
1294
+ :global(.spotlight-input-touch) :global(.orange) .card:global(.game):global(.spottable):active.vertical:not(.captionOverlay):not(.hasContainer):not(:global(.focusRing)) .selectionContainer {
1295
+ border-color: var(--semantic-color-stroke-main-focused);
1296
+ }