@material/web 1.0.0-pre.15 → 1.0.0-pre.17

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 (381) hide show
  1. package/README.md +26 -21
  2. package/all.d.ts +4 -2
  3. package/all.js +4 -2
  4. package/all.js.map +1 -1
  5. package/button/internal/_elevation.scss +4 -0
  6. package/button/internal/_filled-button.scss +0 -1
  7. package/button/internal/_outlined-button.scss +6 -0
  8. package/button/internal/_shared.scss +12 -2
  9. package/button/internal/button.d.ts +15 -14
  10. package/button/internal/button.js +41 -39
  11. package/button/internal/button.js.map +1 -1
  12. package/button/internal/elevated-styles.css.js +1 -1
  13. package/button/internal/elevated-styles.css.js.map +1 -1
  14. package/button/internal/filled-styles.css.js +1 -1
  15. package/button/internal/filled-styles.css.js.map +1 -1
  16. package/button/internal/filled-tonal-styles.css.js +1 -1
  17. package/button/internal/filled-tonal-styles.css.js.map +1 -1
  18. package/button/internal/outlined-styles.css.js +1 -1
  19. package/button/internal/outlined-styles.css.js.map +1 -1
  20. package/button/internal/shared-elevation-styles.css.js +1 -1
  21. package/button/internal/shared-elevation-styles.css.js.map +1 -1
  22. package/button/internal/shared-styles.css.js +1 -1
  23. package/button/internal/shared-styles.css.js.map +1 -1
  24. package/button/internal/text-styles.css.js +1 -1
  25. package/button/internal/text-styles.css.js.map +1 -1
  26. package/checkbox/internal/_checkbox.scss +2 -1
  27. package/checkbox/internal/checkbox-styles.css.js +1 -1
  28. package/checkbox/internal/checkbox-styles.css.js.map +1 -1
  29. package/checkbox/internal/checkbox.d.ts +2 -2
  30. package/checkbox/internal/checkbox.js +18 -14
  31. package/checkbox/internal/checkbox.js.map +1 -1
  32. package/chips/assist-chip.js +1 -2
  33. package/chips/assist-chip.js.map +1 -1
  34. package/chips/filter-chip.js +1 -3
  35. package/chips/filter-chip.js.map +1 -1
  36. package/chips/input-chip.js +1 -5
  37. package/chips/input-chip.js.map +1 -1
  38. package/chips/internal/_assist-chip.scss +6 -0
  39. package/chips/internal/_elevated.scss +1 -5
  40. package/chips/internal/_filter-chip.scss +6 -0
  41. package/chips/internal/_input-chip.scss +32 -0
  42. package/chips/internal/_selectable.scss +17 -13
  43. package/chips/internal/_shared.scss +27 -11
  44. package/chips/internal/_suggestion-chip.scss +6 -0
  45. package/chips/internal/_trailing-icon.scss +24 -24
  46. package/chips/internal/assist-chip.d.ts +3 -1
  47. package/chips/internal/assist-chip.js +11 -8
  48. package/chips/internal/assist-chip.js.map +1 -1
  49. package/chips/internal/assist-styles.css.js +1 -1
  50. package/chips/internal/assist-styles.css.js.map +1 -1
  51. package/chips/internal/chip.d.ts +18 -10
  52. package/chips/internal/chip.js +38 -33
  53. package/chips/internal/chip.js.map +1 -1
  54. package/chips/internal/elevated-styles.css.js +1 -1
  55. package/chips/internal/elevated-styles.css.js.map +1 -1
  56. package/chips/internal/filter-chip.d.ts +6 -7
  57. package/chips/internal/filter-chip.js +13 -14
  58. package/chips/internal/filter-chip.js.map +1 -1
  59. package/chips/internal/filter-styles.css.js +1 -1
  60. package/chips/internal/filter-styles.css.js.map +1 -1
  61. package/chips/internal/input-chip.d.ts +4 -2
  62. package/chips/internal/input-chip.js +16 -12
  63. package/chips/internal/input-chip.js.map +1 -1
  64. package/chips/internal/input-styles.css.js +1 -1
  65. package/chips/internal/input-styles.css.js.map +1 -1
  66. package/chips/internal/multi-action-chip.d.ts +2 -3
  67. package/chips/internal/multi-action-chip.js +3 -3
  68. package/chips/internal/multi-action-chip.js.map +1 -1
  69. package/chips/internal/selectable-styles.css.js +1 -1
  70. package/chips/internal/selectable-styles.css.js.map +1 -1
  71. package/chips/internal/shared-styles.css.js +1 -1
  72. package/chips/internal/shared-styles.css.js.map +1 -1
  73. package/chips/internal/suggestion-styles.css.js +1 -1
  74. package/chips/internal/suggestion-styles.css.js.map +1 -1
  75. package/chips/internal/trailing-icon-styles.css.js +1 -1
  76. package/chips/internal/trailing-icon-styles.css.js.map +1 -1
  77. package/chips/suggestion-chip.js +1 -2
  78. package/chips/suggestion-chip.js.map +1 -1
  79. package/color/_color.scss +193 -0
  80. package/common.d.ts +2 -2
  81. package/common.js +2 -2
  82. package/common.js.map +1 -1
  83. package/dialog/internal/_dialog.scss +19 -4
  84. package/dialog/internal/dialog-styles.css.js +1 -1
  85. package/dialog/internal/dialog-styles.css.js.map +1 -1
  86. package/dialog/internal/dialog.d.ts +6 -0
  87. package/dialog/internal/dialog.js +36 -4
  88. package/dialog/internal/dialog.js.map +1 -1
  89. package/elevation/internal/_elevation.scss +14 -7
  90. package/elevation/internal/elevation-styles.css.js +1 -1
  91. package/elevation/internal/elevation-styles.css.js.map +1 -1
  92. package/elevation/internal/elevation.d.ts +1 -0
  93. package/elevation/internal/elevation.js +6 -0
  94. package/elevation/internal/elevation.js.map +1 -1
  95. package/fab/branded-fab.d.ts +0 -1
  96. package/fab/internal/_fab.scss +11 -10
  97. package/fab/internal/_shared.scss +8 -2
  98. package/fab/internal/fab-branded-styles.css.js +1 -1
  99. package/fab/internal/fab-branded-styles.css.js.map +1 -1
  100. package/fab/internal/fab-styles.css.js +1 -1
  101. package/fab/internal/fab-styles.css.js.map +1 -1
  102. package/fab/internal/fab.d.ts +0 -1
  103. package/fab/internal/shared-styles.css.js +1 -1
  104. package/fab/internal/shared-styles.css.js.map +1 -1
  105. package/fab/internal/shared.d.ts +0 -9
  106. package/fab/internal/shared.js +2 -18
  107. package/fab/internal/shared.js.map +1 -1
  108. package/field/internal/_content.scss +9 -1
  109. package/field/internal/_filled-field.scss +12 -0
  110. package/field/internal/_label.scss +4 -1
  111. package/field/internal/_outlined-field.scss +33 -0
  112. package/field/internal/_shared.scss +14 -6
  113. package/field/internal/_supporting-text.scss +4 -1
  114. package/field/internal/field.d.ts +2 -0
  115. package/field/internal/field.js +19 -0
  116. package/field/internal/field.js.map +1 -1
  117. package/field/internal/filled-styles.css.js +1 -1
  118. package/field/internal/filled-styles.css.js.map +1 -1
  119. package/field/internal/outlined-styles.css.js +1 -1
  120. package/field/internal/outlined-styles.css.js.map +1 -1
  121. package/field/internal/shared-styles.css.js +1 -1
  122. package/field/internal/shared-styles.css.js.map +1 -1
  123. package/focus/internal/focus-ring.d.ts +3 -1
  124. package/focus/internal/focus-ring.js +9 -0
  125. package/focus/internal/focus-ring.js.map +1 -1
  126. package/icon/internal/_icon.scss +10 -5
  127. package/icon/internal/icon-styles.css.js +1 -1
  128. package/icon/internal/icon-styles.css.js.map +1 -1
  129. package/icon/internal/icon.js +4 -0
  130. package/icon/internal/icon.js.map +1 -1
  131. package/iconbutton/internal/_icon-button.scss +12 -0
  132. package/iconbutton/internal/_shared.scss +9 -0
  133. package/iconbutton/internal/icon-button.d.ts +19 -6
  134. package/iconbutton/internal/icon-button.js +35 -11
  135. package/iconbutton/internal/icon-button.js.map +1 -1
  136. package/iconbutton/internal/shared-styles.css.js +1 -1
  137. package/iconbutton/internal/shared-styles.css.js.map +1 -1
  138. package/iconbutton/internal/standard-styles.css.js +1 -1
  139. package/iconbutton/internal/standard-styles.css.js.map +1 -1
  140. package/internal/aria/aria.d.ts +52 -1
  141. package/internal/aria/aria.js +146 -0
  142. package/internal/aria/aria.js.map +1 -1
  143. package/internal/controller/attachable-controller.d.ts +5 -4
  144. package/internal/controller/attachable-controller.js +8 -0
  145. package/internal/controller/attachable-controller.js.map +1 -1
  146. package/internal/controller/form-submitter.d.ts +12 -0
  147. package/internal/controller/form-submitter.js +3 -1
  148. package/internal/controller/form-submitter.js.map +1 -1
  149. package/labs/badge/internal/_badge.scss +16 -9
  150. package/labs/badge/internal/badge-styles.css.js +1 -1
  151. package/labs/badge/internal/badge-styles.css.js.map +1 -1
  152. package/labs/navigationbar/internal/_navigation-bar.scss +11 -9
  153. package/labs/navigationbar/internal/navigation-bar-styles.css.js +1 -1
  154. package/labs/navigationbar/internal/navigation-bar-styles.css.js.map +1 -1
  155. package/labs/navigationdrawer/internal/_navigation-drawer-modal.scss +11 -8
  156. package/labs/navigationdrawer/internal/_navigation-drawer.scss +11 -8
  157. package/labs/navigationdrawer/internal/navigation-drawer-modal-styles.css.js +1 -1
  158. package/labs/navigationdrawer/internal/navigation-drawer-modal-styles.css.js.map +1 -1
  159. package/labs/navigationdrawer/internal/navigation-drawer-styles.css.js +1 -1
  160. package/labs/navigationdrawer/internal/navigation-drawer-styles.css.js.map +1 -1
  161. package/labs/navigationtab/internal/_navigation-tab.scss +14 -11
  162. package/labs/navigationtab/internal/navigation-tab-styles.css.js +1 -1
  163. package/labs/navigationtab/internal/navigation-tab-styles.css.js.map +1 -1
  164. package/labs/segmentedbutton/internal/_outlined-segmented-button.scss +1 -3
  165. package/labs/segmentedbutton/internal/_shared.scss +4 -1
  166. package/labs/segmentedbutton/internal/outlined-styles.css.js +1 -1
  167. package/labs/segmentedbutton/internal/outlined-styles.css.js.map +1 -1
  168. package/labs/segmentedbutton/internal/shared-styles.css.js +1 -1
  169. package/labs/segmentedbutton/internal/shared-styles.css.js.map +1 -1
  170. package/labs/segmentedbuttonset/internal/outlined-styles.css.js +1 -1
  171. package/labs/segmentedbuttonset/internal/outlined-styles.css.js.map +1 -1
  172. package/list/harness.js +1 -1
  173. package/list/harness.js.map +1 -1
  174. package/list/internal/_list.scss +7 -6
  175. package/list/internal/list-styles.css.js +1 -1
  176. package/list/internal/list-styles.css.js.map +1 -1
  177. package/list/internal/list.d.ts +1 -2
  178. package/list/internal/list.js +4 -6
  179. package/list/internal/list.js.map +1 -1
  180. package/list/internal/listitem/_list-item.scss +96 -94
  181. package/list/internal/listitem/forced-colors-styles.css.js +1 -1
  182. package/list/internal/listitem/forced-colors-styles.css.js.map +1 -1
  183. package/list/internal/listitem/forced-colors-styles.scss +6 -6
  184. package/list/internal/listitem/list-item-styles.css.js +1 -1
  185. package/list/internal/listitem/list-item-styles.css.js.map +1 -1
  186. package/menu/harness.d.ts +1 -1
  187. package/menu/harness.js +3 -4
  188. package/menu/harness.js.map +1 -1
  189. package/menu/internal/_menu.scss +37 -28
  190. package/menu/internal/menu-styles.css.js +1 -1
  191. package/menu/internal/menu-styles.css.js.map +1 -1
  192. package/menu/internal/menu.d.ts +15 -4
  193. package/menu/internal/menu.js +33 -10
  194. package/menu/internal/menu.js.map +1 -1
  195. package/menu/internal/menuitem/_menu-item.scss +7 -4
  196. package/menu/internal/menuitem/menu-item-styles.css.js +1 -1
  197. package/menu/internal/menuitem/menu-item-styles.css.js.map +1 -1
  198. package/menu/internal/menuitem/menu-item.js +1 -1
  199. package/menu/internal/menuitem/menu-item.js.map +1 -1
  200. package/menu/internal/submenuitem/sub-menu-item.d.ts +3 -0
  201. package/menu/internal/submenuitem/sub-menu-item.js +42 -12
  202. package/menu/internal/submenuitem/sub-menu-item.js.map +1 -1
  203. package/menu/internal/typeaheadController.js +2 -1
  204. package/menu/internal/typeaheadController.js.map +1 -1
  205. package/menu/menu.d.ts +12 -5
  206. package/menu/menu.js +12 -5
  207. package/menu/menu.js.map +1 -1
  208. package/menu/sub-menu-item.d.ts +3 -4
  209. package/menu/sub-menu-item.js +3 -4
  210. package/menu/sub-menu-item.js.map +1 -1
  211. package/package.json +10 -2
  212. package/progress/harness.js +2 -4
  213. package/progress/harness.js.map +1 -1
  214. package/progress/internal/_circular-progress.scss +8 -6
  215. package/progress/internal/_linear-progress.scss +95 -134
  216. package/progress/internal/circular-progress-styles.css.js +1 -1
  217. package/progress/internal/circular-progress-styles.css.js.map +1 -1
  218. package/progress/internal/circular-progress.js +1 -1
  219. package/progress/internal/circular-progress.js.map +1 -1
  220. package/progress/internal/linear-progress-styles.css.js +1 -1
  221. package/progress/internal/linear-progress-styles.css.js.map +1 -1
  222. package/progress/internal/linear-progress.d.ts +0 -11
  223. package/progress/internal/linear-progress.js +4 -48
  224. package/progress/internal/linear-progress.js.map +1 -1
  225. package/radio/harness.d.ts +1 -1
  226. package/radio/harness.js +1 -1
  227. package/radio/harness.js.map +1 -1
  228. package/radio/internal/_radio.scss +4 -4
  229. package/radio/internal/radio-styles.css.js +1 -1
  230. package/radio/internal/radio-styles.css.js.map +1 -1
  231. package/radio/internal/radio.d.ts +4 -6
  232. package/radio/internal/radio.js +37 -32
  233. package/radio/internal/radio.js.map +1 -1
  234. package/radio/internal/single-selection-controller.js +4 -3
  235. package/radio/internal/single-selection-controller.js.map +1 -1
  236. package/ripple/internal/_ripple.scss +1 -1
  237. package/ripple/internal/ripple-styles.css.js +1 -1
  238. package/ripple/internal/ripple-styles.css.js.map +1 -1
  239. package/ripple/internal/ripple.d.ts +3 -1
  240. package/ripple/internal/ripple.js +9 -0
  241. package/ripple/internal/ripple.js.map +1 -1
  242. package/select/harness.d.ts +1 -1
  243. package/select/harness.js +1 -3
  244. package/select/harness.js.map +1 -1
  245. package/select/internal/_filled-select.scss +13 -4
  246. package/select/internal/_outlined-select.scss +13 -4
  247. package/select/internal/_shared.scss +0 -1
  248. package/select/internal/filled-select-styles.css.js +1 -1
  249. package/select/internal/filled-select-styles.css.js.map +1 -1
  250. package/select/internal/outlined-select-styles.css.js +1 -1
  251. package/select/internal/outlined-select-styles.css.js.map +1 -1
  252. package/select/internal/select.d.ts +8 -2
  253. package/select/internal/select.js +21 -8
  254. package/select/internal/select.js.map +1 -1
  255. package/slider/internal/_slider.scss +42 -32
  256. package/slider/internal/forced-colors-styles.css.js +1 -1
  257. package/slider/internal/forced-colors-styles.css.js.map +1 -1
  258. package/slider/internal/forced-colors-styles.scss +31 -4
  259. package/slider/internal/slider-styles.css.js +1 -1
  260. package/slider/internal/slider-styles.css.js.map +1 -1
  261. package/slider/internal/slider.d.ts +22 -8
  262. package/slider/internal/slider.js +113 -22
  263. package/slider/internal/slider.js.map +1 -1
  264. package/switch/harness.d.ts +1 -1
  265. package/switch/harness.js +1 -1
  266. package/switch/harness.js.map +1 -1
  267. package/switch/internal/_handle.scss +22 -21
  268. package/switch/internal/_icon.scss +12 -12
  269. package/switch/internal/_switch.scss +17 -17
  270. package/switch/internal/_track.scss +12 -12
  271. package/switch/internal/forced-colors-styles.css.js +1 -1
  272. package/switch/internal/forced-colors-styles.css.js.map +1 -1
  273. package/switch/internal/forced-colors-styles.scss +1 -0
  274. package/switch/internal/switch-styles.css.js +1 -1
  275. package/switch/internal/switch-styles.css.js.map +1 -1
  276. package/switch/internal/switch.d.ts +73 -3
  277. package/switch/internal/switch.js +146 -32
  278. package/switch/internal/switch.js.map +1 -1
  279. package/tabs/{_tab.scss → _primary-tab.scss} +1 -1
  280. package/tabs/_secondary-tab.scss +6 -0
  281. package/tabs/harness.d.ts +2 -2
  282. package/tabs/harness.js +1 -2
  283. package/tabs/harness.js.map +1 -1
  284. package/tabs/internal/_primary-tab.scss +70 -0
  285. package/tabs/internal/_secondary-tab.scss +61 -0
  286. package/tabs/internal/_tab.scss +21 -114
  287. package/tabs/internal/_tabs.scss +9 -10
  288. package/tabs/internal/primary-tab-styles.css.js +9 -0
  289. package/tabs/internal/primary-tab-styles.css.js.map +1 -0
  290. package/tabs/internal/primary-tab-styles.scss +10 -0
  291. package/tabs/internal/primary-tab.d.ts +20 -0
  292. package/tabs/internal/primary-tab.js +30 -0
  293. package/tabs/internal/primary-tab.js.map +1 -0
  294. package/tabs/internal/secondary-tab-styles.css.js +9 -0
  295. package/tabs/internal/secondary-tab-styles.css.js.map +1 -0
  296. package/tabs/internal/secondary-tab-styles.scss +10 -0
  297. package/tabs/internal/secondary-tab.d.ts +12 -0
  298. package/tabs/internal/secondary-tab.js +16 -0
  299. package/tabs/internal/secondary-tab.js.map +1 -0
  300. package/tabs/internal/tab-styles.css.js +1 -1
  301. package/tabs/internal/tab-styles.css.js.map +1 -1
  302. package/tabs/internal/tab.d.ts +16 -34
  303. package/tabs/internal/tab.js +81 -81
  304. package/tabs/internal/tab.js.map +1 -1
  305. package/tabs/internal/tabs-styles.css.js +1 -1
  306. package/tabs/internal/tabs-styles.css.js.map +1 -1
  307. package/tabs/internal/tabs.d.ts +6 -20
  308. package/tabs/internal/tabs.js +33 -66
  309. package/tabs/internal/tabs.js.map +1 -1
  310. package/tabs/{tab.d.ts → primary-tab.d.ts} +3 -4
  311. package/tabs/primary-tab.js +23 -0
  312. package/tabs/primary-tab.js.map +1 -0
  313. package/tabs/secondary-tab.d.ts +18 -0
  314. package/tabs/secondary-tab.js +23 -0
  315. package/tabs/secondary-tab.js.map +1 -0
  316. package/tabs/tabs.d.ts +0 -2
  317. package/tabs/tabs.js +0 -2
  318. package/tabs/tabs.js.map +1 -1
  319. package/textfield/internal/_filled-text-field.scss +12 -3
  320. package/textfield/internal/_outlined-text-field.scss +12 -3
  321. package/textfield/internal/filled-styles.css.js +1 -1
  322. package/textfield/internal/filled-styles.css.js.map +1 -1
  323. package/textfield/internal/outlined-styles.css.js +1 -1
  324. package/textfield/internal/outlined-styles.css.js.map +1 -1
  325. package/textfield/internal/text-field.d.ts +30 -10
  326. package/textfield/internal/text-field.js +80 -32
  327. package/textfield/internal/text-field.js.map +1 -1
  328. package/tokens/_index.scss +5 -6
  329. package/tokens/_md-comp-assist-chip.scss +6 -14
  330. package/tokens/_md-comp-badge.scss +1 -14
  331. package/tokens/{_md-comp-circular-progress-indicator.scss → _md-comp-circular-progress.scss} +3 -1
  332. package/tokens/_md-comp-dialog.scss +10 -17
  333. package/tokens/_md-comp-elevated-button.scss +5 -13
  334. package/tokens/_md-comp-fab-branded.scss +9 -10
  335. package/tokens/_md-comp-fab.scss +9 -10
  336. package/tokens/_md-comp-filled-button.scss +5 -13
  337. package/tokens/_md-comp-filled-field.scss +27 -8
  338. package/tokens/_md-comp-filled-select.scss +18 -15
  339. package/tokens/_md-comp-filled-text-field.scss +17 -19
  340. package/tokens/_md-comp-filled-tonal-button.scss +5 -13
  341. package/tokens/_md-comp-filter-chip.scss +5 -13
  342. package/tokens/_md-comp-input-chip.scss +5 -13
  343. package/tokens/_md-comp-list-item.scss +117 -122
  344. package/tokens/_md-comp-menu-item.scss +3 -3
  345. package/tokens/_md-comp-outlined-button.scss +5 -13
  346. package/tokens/_md-comp-outlined-field.scss +27 -7
  347. package/tokens/_md-comp-outlined-segmented-button.scss +5 -13
  348. package/tokens/_md-comp-outlined-select.scss +23 -15
  349. package/tokens/_md-comp-outlined-text-field.scss +17 -19
  350. package/tokens/_md-comp-primary-tab.scss +132 -0
  351. package/tokens/_md-comp-secondary-tab.scss +139 -0
  352. package/tokens/_md-comp-slider.scss +16 -16
  353. package/tokens/_md-comp-suggestion-chip.scss +5 -13
  354. package/tokens/_md-comp-test-table.scss +13 -2
  355. package/tokens/_md-comp-text-button.scss +5 -13
  356. package/tokens/_md-ref-palette.scss +101 -1
  357. package/tokens/_md-ref-typeface.scss +3 -0
  358. package/tokens/_md-sys-color.scss +57 -2
  359. package/tokens/_md-sys-typescale.scss +66 -5
  360. package/chips/internal/assist-forced-colors-styles.css.js +0 -9
  361. package/chips/internal/assist-forced-colors-styles.css.js.map +0 -1
  362. package/chips/internal/assist-forced-colors-styles.scss +0 -27
  363. package/chips/internal/filter-forced-colors-styles.css.js +0 -9
  364. package/chips/internal/filter-forced-colors-styles.css.js.map +0 -1
  365. package/chips/internal/filter-forced-colors-styles.scss +0 -34
  366. package/chips/internal/input-forced-colors-styles.css.d.ts +0 -1
  367. package/chips/internal/input-forced-colors-styles.css.js +0 -9
  368. package/chips/internal/input-forced-colors-styles.css.js.map +0 -1
  369. package/chips/internal/input-forced-colors-styles.scss +0 -39
  370. package/chips/internal/suggestion-forced-colors-styles.css.d.ts +0 -1
  371. package/chips/internal/suggestion-forced-colors-styles.css.js +0 -9
  372. package/chips/internal/suggestion-forced-colors-styles.css.js.map +0 -1
  373. package/chips/internal/suggestion-forced-colors-styles.scss +0 -27
  374. package/internal/sass/_theme.scss +0 -249
  375. package/tabs/tab.js +0 -22
  376. package/tabs/tab.js.map +0 -1
  377. package/tokens/_md-comp-tab.scss +0 -285
  378. /package/{chips/internal/assist-forced-colors-styles.css.d.ts → tabs/internal/primary-tab-styles.css.d.ts} +0 -0
  379. /package/{chips/internal/filter-forced-colors-styles.css.d.ts → tabs/internal/secondary-tab-styles.css.d.ts} +0 -0
  380. /package/tokens/{_md-comp-linear-progress-indicator.scss → _md-comp-linear-progress.scss} +0 -0
  381. /package/tokens/{_md-comp-radio-button.scss → _md-comp-radio.scss} +0 -0
package/button/internal/filled-tonal-styles.css.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"filled-tonal-styles.css.js","sourceRoot":"","sources":["filled-tonal-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n import {css} from 'lit';\n export const styles = css`:host{--_container-color: var(--md-filled-tonal-button-container-color, var(--md-sys-color-secondary-container, #e8def8));--_container-elevation: var(--md-filled-tonal-button-container-elevation, 0);--_container-height: var(--md-filled-tonal-button-container-height, 40px);--_container-shadow-color: var(--md-filled-tonal-button-container-shadow-color, var(--md-sys-color-shadow, #000));--_container-shape: var(--md-filled-tonal-button-container-shape, 9999px);--_disabled-container-color: var(--md-filled-tonal-button-disabled-container-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-container-elevation: var(--md-filled-tonal-button-disabled-container-elevation, 0);--_disabled-container-opacity: var(--md-filled-tonal-button-disabled-container-opacity, 0.12);--_disabled-label-text-color: var(--md-filled-tonal-button-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-opacity: var(--md-filled-tonal-button-disabled-label-text-opacity, 0.38);--_focus-container-elevation: var(--md-filled-tonal-button-focus-container-elevation, 0);--_focus-label-text-color: var(--md-filled-tonal-button-focus-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_hover-container-elevation: var(--md-filled-tonal-button-hover-container-elevation, 1);--_hover-label-text-color: var(--md-filled-tonal-button-hover-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_hover-state-layer-color: var(--md-filled-tonal-button-hover-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_hover-state-layer-opacity: var(--md-filled-tonal-button-hover-state-layer-opacity, 0.08);--_label-text-color: var(--md-filled-tonal-button-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_label-text-type: var(--md-filled-tonal-button-label-text-type, var(--md-sys-typescale-label-large, 500 0.875rem / 1.25rem var(--md-ref-typeface-plain, Roboto)));--_pressed-container-elevation: var(--md-filled-tonal-button-pressed-container-elevation, 0);--_pressed-label-text-color: var(--md-filled-tonal-button-pressed-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_pressed-state-layer-color: var(--md-filled-tonal-button-pressed-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_pressed-state-layer-opacity: var(--md-filled-tonal-button-pressed-state-layer-opacity, 0.12);--_disabled-icon-color: var(--md-filled-tonal-button-disabled-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-icon-opacity: var(--md-filled-tonal-button-disabled-icon-opacity, 0.38);--_focus-icon-color: var(--md-filled-tonal-button-focus-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_hover-icon-color: var(--md-filled-tonal-button-hover-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_icon-color: var(--md-filled-tonal-button-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_icon-size: var(--md-filled-tonal-button-icon-size, 18px);--_pressed-icon-color: var(--md-filled-tonal-button-pressed-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_leading-space: var(--md-filled-tonal-button-leading-space, 24px);--_trailing-space: var(--md-filled-tonal-button-trailing-space, 24px);--_with-leading-icon-leading-space: var(--md-filled-tonal-button-with-leading-icon-leading-space, 16px);--_with-leading-icon-trailing-space: var(--md-filled-tonal-button-with-leading-icon-trailing-space, 24px);--_with-trailing-icon-leading-space: var(--md-filled-tonal-button-with-trailing-icon-leading-space, 24px);--_with-trailing-icon-trailing-space: var(--md-filled-tonal-button-with-trailing-icon-trailing-space, 16px);--_container-shape-start-start: var( --md-filled-tonal-button-container-shape-start-start, var(--_container-shape) );--_container-shape-start-end: var( --md-filled-tonal-button-container-shape-start-end, var(--_container-shape) );--_container-shape-end-end: var( --md-filled-tonal-button-container-shape-end-end, var(--_container-shape) );--_container-shape-end-start: var( --md-filled-tonal-button-container-shape-end-start, var(--_container-shape) )}/*# sourceMappingURL=filled-tonal-styles.css.map */\n`;\n "]}
1
+ {"version":3,"file":"filled-tonal-styles.css.js","sourceRoot":"","sources":["filled-tonal-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n import {css} from 'lit';\n export const styles = css`:host{--_container-color: var(--md-filled-tonal-button-container-color, var(--md-sys-color-secondary-container, #e8def8));--_container-elevation: var(--md-filled-tonal-button-container-elevation, 0);--_container-height: var(--md-filled-tonal-button-container-height, 40px);--_container-shadow-color: var(--md-filled-tonal-button-container-shadow-color, var(--md-sys-color-shadow, #000));--_container-shape: var(--md-filled-tonal-button-container-shape, 9999px);--_disabled-container-color: var(--md-filled-tonal-button-disabled-container-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-container-elevation: var(--md-filled-tonal-button-disabled-container-elevation, 0);--_disabled-container-opacity: var(--md-filled-tonal-button-disabled-container-opacity, 0.12);--_disabled-label-text-color: var(--md-filled-tonal-button-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-opacity: var(--md-filled-tonal-button-disabled-label-text-opacity, 0.38);--_focus-container-elevation: var(--md-filled-tonal-button-focus-container-elevation, 0);--_focus-label-text-color: var(--md-filled-tonal-button-focus-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_hover-container-elevation: var(--md-filled-tonal-button-hover-container-elevation, 1);--_hover-label-text-color: var(--md-filled-tonal-button-hover-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_hover-state-layer-color: var(--md-filled-tonal-button-hover-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_hover-state-layer-opacity: var(--md-filled-tonal-button-hover-state-layer-opacity, 0.08);--_label-text-color: var(--md-filled-tonal-button-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_label-text-font: var(--md-filled-tonal-button-label-text-font, var(--md-sys-typescale-label-large-font, var(--md-ref-typeface-plain, Roboto)));--_label-text-line-height: var(--md-filled-tonal-button-label-text-line-height, var(--md-sys-typescale-label-large-line-height, 1.25rem));--_label-text-size: var(--md-filled-tonal-button-label-text-size, var(--md-sys-typescale-label-large-size, 0.875rem));--_label-text-weight: var(--md-filled-tonal-button-label-text-weight, var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500)));--_pressed-container-elevation: var(--md-filled-tonal-button-pressed-container-elevation, 0);--_pressed-label-text-color: var(--md-filled-tonal-button-pressed-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_pressed-state-layer-color: var(--md-filled-tonal-button-pressed-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_pressed-state-layer-opacity: var(--md-filled-tonal-button-pressed-state-layer-opacity, 0.12);--_disabled-icon-color: var(--md-filled-tonal-button-disabled-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-icon-opacity: var(--md-filled-tonal-button-disabled-icon-opacity, 0.38);--_focus-icon-color: var(--md-filled-tonal-button-focus-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_hover-icon-color: var(--md-filled-tonal-button-hover-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_icon-color: var(--md-filled-tonal-button-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_icon-size: var(--md-filled-tonal-button-icon-size, 18px);--_pressed-icon-color: var(--md-filled-tonal-button-pressed-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_leading-space: var(--md-filled-tonal-button-leading-space, 24px);--_trailing-space: var(--md-filled-tonal-button-trailing-space, 24px);--_with-leading-icon-leading-space: var(--md-filled-tonal-button-with-leading-icon-leading-space, 16px);--_with-leading-icon-trailing-space: var(--md-filled-tonal-button-with-leading-icon-trailing-space, 24px);--_with-trailing-icon-leading-space: var(--md-filled-tonal-button-with-trailing-icon-leading-space, 24px);--_with-trailing-icon-trailing-space: var(--md-filled-tonal-button-with-trailing-icon-trailing-space, 16px);--_container-shape-start-start: var( --md-filled-tonal-button-container-shape-start-start, var(--_container-shape) );--_container-shape-start-end: var( --md-filled-tonal-button-container-shape-start-end, var(--_container-shape) );--_container-shape-end-end: var( --md-filled-tonal-button-container-shape-end-end, var(--_container-shape) );--_container-shape-end-start: var( --md-filled-tonal-button-container-shape-end-start, var(--_container-shape) )}/*# sourceMappingURL=filled-tonal-styles.css.map */\n`;\n "]}
package/button/internal/outlined-styles.css.js CHANGED
@@ -4,6 +4,6 @@
4
4
  * SPDX-License-Identifier: Apache-2.0
5
5
  */
6
6
  import { css } from 'lit';
7
- export const styles = css `:host{--_container-height: var(--md-outlined-button-container-height, 40px);--_container-shape: var(--md-outlined-button-container-shape, 9999px);--_disabled-label-text-color: var(--md-outlined-button-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-opacity: var(--md-outlined-button-disabled-label-text-opacity, 0.38);--_disabled-outline-color: var(--md-outlined-button-disabled-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-outline-opacity: var(--md-outlined-button-disabled-outline-opacity, 0.12);--_focus-label-text-color: var(--md-outlined-button-focus-label-text-color, var(--md-sys-color-primary, #6750a4));--_hover-label-text-color: var(--md-outlined-button-hover-label-text-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-color: var(--md-outlined-button-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-opacity: var(--md-outlined-button-hover-state-layer-opacity, 0.08);--_label-text-color: var(--md-outlined-button-label-text-color, var(--md-sys-color-primary, #6750a4));--_label-text-type: var(--md-outlined-button-label-text-type, var(--md-sys-typescale-label-large, 500 0.875rem / 1.25rem var(--md-ref-typeface-plain, Roboto)));--_outline-color: var(--md-outlined-button-outline-color, var(--md-sys-color-outline, #79747e));--_outline-width: var(--md-outlined-button-outline-width, 1px);--_pressed-label-text-color: var(--md-outlined-button-pressed-label-text-color, var(--md-sys-color-primary, #6750a4));--_pressed-outline-color: var(--md-outlined-button-pressed-outline-color, var(--md-sys-color-outline, #79747e));--_pressed-state-layer-color: var(--md-outlined-button-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-opacity: var(--md-outlined-button-pressed-state-layer-opacity, 0.12);--_disabled-icon-color: var(--md-outlined-button-disabled-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-icon-opacity: var(--md-outlined-button-disabled-icon-opacity, 0.38);--_focus-icon-color: var(--md-outlined-button-focus-icon-color, var(--md-sys-color-primary, #6750a4));--_hover-icon-color: var(--md-outlined-button-hover-icon-color, var(--md-sys-color-primary, #6750a4));--_icon-color: var(--md-outlined-button-icon-color, var(--md-sys-color-primary, #6750a4));--_icon-size: var(--md-outlined-button-icon-size, 18px);--_pressed-icon-color: var(--md-outlined-button-pressed-icon-color, var(--md-sys-color-primary, #6750a4));--_leading-space: var(--md-outlined-button-leading-space, 24px);--_trailing-space: var(--md-outlined-button-trailing-space, 24px);--_with-leading-icon-leading-space: var(--md-outlined-button-with-leading-icon-leading-space, 16px);--_with-leading-icon-trailing-space: var(--md-outlined-button-with-leading-icon-trailing-space, 24px);--_with-trailing-icon-leading-space: var(--md-outlined-button-with-trailing-icon-leading-space, 24px);--_with-trailing-icon-trailing-space: var(--md-outlined-button-with-trailing-icon-trailing-space, 16px);--_container-color: none;--_disabled-container-color: none;--_disabled-container-opacity: 0;--_container-shape-start-start: var( --md-outlined-button-container-shape-start-start, var(--_container-shape) );--_container-shape-start-end: var( --md-outlined-button-container-shape-start-end, var(--_container-shape) );--_container-shape-end-end: var( --md-outlined-button-container-shape-end-end, var(--_container-shape) );--_container-shape-end-start: var( --md-outlined-button-container-shape-end-start, var(--_container-shape) )}.button__outline{inset:0;border-style:solid;position:absolute;box-sizing:border-box;border-color:var(--_outline-color);border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-start-radius:var(--_container-shape-end-start);border-end-end-radius:var(--_container-shape-end-end)}.button:active .button__outline{border-color:var(--_pressed-outline-color)}.button:disabled .button__outline{border-color:var(--_disabled-outline-color);opacity:var(--_disabled-outline-opacity)}.button__outline,.button__ripple{border-width:var(--_outline-width)}.button__ripple{inline-size:calc(100% - 2*var(--_outline-width));block-size:calc(100% - 2*var(--_outline-width));border-style:solid;border-color:rgba(0,0,0,0)}/*# sourceMappingURL=outlined-styles.css.map */
7
+ export const styles = css `:host{--_container-height: var(--md-outlined-button-container-height, 40px);--_container-shape: var(--md-outlined-button-container-shape, 9999px);--_disabled-label-text-color: var(--md-outlined-button-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-opacity: var(--md-outlined-button-disabled-label-text-opacity, 0.38);--_disabled-outline-color: var(--md-outlined-button-disabled-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-outline-opacity: var(--md-outlined-button-disabled-outline-opacity, 0.12);--_focus-label-text-color: var(--md-outlined-button-focus-label-text-color, var(--md-sys-color-primary, #6750a4));--_hover-label-text-color: var(--md-outlined-button-hover-label-text-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-color: var(--md-outlined-button-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-opacity: var(--md-outlined-button-hover-state-layer-opacity, 0.08);--_label-text-color: var(--md-outlined-button-label-text-color, var(--md-sys-color-primary, #6750a4));--_label-text-font: var(--md-outlined-button-label-text-font, var(--md-sys-typescale-label-large-font, var(--md-ref-typeface-plain, Roboto)));--_label-text-line-height: var(--md-outlined-button-label-text-line-height, var(--md-sys-typescale-label-large-line-height, 1.25rem));--_label-text-size: var(--md-outlined-button-label-text-size, var(--md-sys-typescale-label-large-size, 0.875rem));--_label-text-weight: var(--md-outlined-button-label-text-weight, var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500)));--_outline-color: var(--md-outlined-button-outline-color, var(--md-sys-color-outline, #79747e));--_outline-width: var(--md-outlined-button-outline-width, 1px);--_pressed-label-text-color: var(--md-outlined-button-pressed-label-text-color, var(--md-sys-color-primary, #6750a4));--_pressed-outline-color: var(--md-outlined-button-pressed-outline-color, var(--md-sys-color-outline, #79747e));--_pressed-state-layer-color: var(--md-outlined-button-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-opacity: var(--md-outlined-button-pressed-state-layer-opacity, 0.12);--_disabled-icon-color: var(--md-outlined-button-disabled-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-icon-opacity: var(--md-outlined-button-disabled-icon-opacity, 0.38);--_focus-icon-color: var(--md-outlined-button-focus-icon-color, var(--md-sys-color-primary, #6750a4));--_hover-icon-color: var(--md-outlined-button-hover-icon-color, var(--md-sys-color-primary, #6750a4));--_icon-color: var(--md-outlined-button-icon-color, var(--md-sys-color-primary, #6750a4));--_icon-size: var(--md-outlined-button-icon-size, 18px);--_pressed-icon-color: var(--md-outlined-button-pressed-icon-color, var(--md-sys-color-primary, #6750a4));--_leading-space: var(--md-outlined-button-leading-space, 24px);--_trailing-space: var(--md-outlined-button-trailing-space, 24px);--_with-leading-icon-leading-space: var(--md-outlined-button-with-leading-icon-leading-space, 16px);--_with-leading-icon-trailing-space: var(--md-outlined-button-with-leading-icon-trailing-space, 24px);--_with-trailing-icon-leading-space: var(--md-outlined-button-with-trailing-icon-leading-space, 24px);--_with-trailing-icon-trailing-space: var(--md-outlined-button-with-trailing-icon-trailing-space, 16px);--_container-color: none;--_disabled-container-color: none;--_disabled-container-opacity: 0;--_container-shape-start-start: var( --md-outlined-button-container-shape-start-start, var(--_container-shape) );--_container-shape-start-end: var( --md-outlined-button-container-shape-start-end, var(--_container-shape) );--_container-shape-end-end: var( --md-outlined-button-container-shape-end-end, var(--_container-shape) );--_container-shape-end-start: var( --md-outlined-button-container-shape-end-start, var(--_container-shape) )}.button__outline{inset:0;border-style:solid;position:absolute;box-sizing:border-box;border-color:var(--_outline-color);border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-start-radius:var(--_container-shape-end-start);border-end-end-radius:var(--_container-shape-end-end)}.button:active .button__outline{border-color:var(--_pressed-outline-color)}.button:disabled .button__outline{border-color:var(--_disabled-outline-color);opacity:var(--_disabled-outline-opacity)}@media(forced-colors: active){.button:disabled .button__outline{opacity:1}}.button__outline,.button__ripple{border-width:var(--_outline-width)}.button__ripple{inline-size:calc(100% - 2*var(--_outline-width));block-size:calc(100% - 2*var(--_outline-width));border-style:solid;border-color:rgba(0,0,0,0)}/*# sourceMappingURL=outlined-styles.css.map */
8
8
  `;
9
9
  //# sourceMappingURL=outlined-styles.css.js.map
package/button/internal/outlined-styles.css.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"outlined-styles.css.js","sourceRoot":"","sources":["outlined-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n import {css} from 'lit';\n export const styles = css`:host{--_container-height: var(--md-outlined-button-container-height, 40px);--_container-shape: var(--md-outlined-button-container-shape, 9999px);--_disabled-label-text-color: var(--md-outlined-button-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-opacity: var(--md-outlined-button-disabled-label-text-opacity, 0.38);--_disabled-outline-color: var(--md-outlined-button-disabled-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-outline-opacity: var(--md-outlined-button-disabled-outline-opacity, 0.12);--_focus-label-text-color: var(--md-outlined-button-focus-label-text-color, var(--md-sys-color-primary, #6750a4));--_hover-label-text-color: var(--md-outlined-button-hover-label-text-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-color: var(--md-outlined-button-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-opacity: var(--md-outlined-button-hover-state-layer-opacity, 0.08);--_label-text-color: var(--md-outlined-button-label-text-color, var(--md-sys-color-primary, #6750a4));--_label-text-type: var(--md-outlined-button-label-text-type, var(--md-sys-typescale-label-large, 500 0.875rem / 1.25rem var(--md-ref-typeface-plain, Roboto)));--_outline-color: var(--md-outlined-button-outline-color, var(--md-sys-color-outline, #79747e));--_outline-width: var(--md-outlined-button-outline-width, 1px);--_pressed-label-text-color: var(--md-outlined-button-pressed-label-text-color, var(--md-sys-color-primary, #6750a4));--_pressed-outline-color: var(--md-outlined-button-pressed-outline-color, var(--md-sys-color-outline, #79747e));--_pressed-state-layer-color: var(--md-outlined-button-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-opacity: var(--md-outlined-button-pressed-state-layer-opacity, 0.12);--_disabled-icon-color: var(--md-outlined-button-disabled-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-icon-opacity: var(--md-outlined-button-disabled-icon-opacity, 0.38);--_focus-icon-color: var(--md-outlined-button-focus-icon-color, var(--md-sys-color-primary, #6750a4));--_hover-icon-color: var(--md-outlined-button-hover-icon-color, var(--md-sys-color-primary, #6750a4));--_icon-color: var(--md-outlined-button-icon-color, var(--md-sys-color-primary, #6750a4));--_icon-size: var(--md-outlined-button-icon-size, 18px);--_pressed-icon-color: var(--md-outlined-button-pressed-icon-color, var(--md-sys-color-primary, #6750a4));--_leading-space: var(--md-outlined-button-leading-space, 24px);--_trailing-space: var(--md-outlined-button-trailing-space, 24px);--_with-leading-icon-leading-space: var(--md-outlined-button-with-leading-icon-leading-space, 16px);--_with-leading-icon-trailing-space: var(--md-outlined-button-with-leading-icon-trailing-space, 24px);--_with-trailing-icon-leading-space: var(--md-outlined-button-with-trailing-icon-leading-space, 24px);--_with-trailing-icon-trailing-space: var(--md-outlined-button-with-trailing-icon-trailing-space, 16px);--_container-color: none;--_disabled-container-color: none;--_disabled-container-opacity: 0;--_container-shape-start-start: var( --md-outlined-button-container-shape-start-start, var(--_container-shape) );--_container-shape-start-end: var( --md-outlined-button-container-shape-start-end, var(--_container-shape) );--_container-shape-end-end: var( --md-outlined-button-container-shape-end-end, var(--_container-shape) );--_container-shape-end-start: var( --md-outlined-button-container-shape-end-start, var(--_container-shape) )}.button__outline{inset:0;border-style:solid;position:absolute;box-sizing:border-box;border-color:var(--_outline-color);border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-start-radius:var(--_container-shape-end-start);border-end-end-radius:var(--_container-shape-end-end)}.button:active .button__outline{border-color:var(--_pressed-outline-color)}.button:disabled .button__outline{border-color:var(--_disabled-outline-color);opacity:var(--_disabled-outline-opacity)}.button__outline,.button__ripple{border-width:var(--_outline-width)}.button__ripple{inline-size:calc(100% - 2*var(--_outline-width));block-size:calc(100% - 2*var(--_outline-width));border-style:solid;border-color:rgba(0,0,0,0)}/*# sourceMappingURL=outlined-styles.css.map */\n`;\n "]}
1
+ {"version":3,"file":"outlined-styles.css.js","sourceRoot":"","sources":["outlined-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n import {css} from 'lit';\n export const styles = css`:host{--_container-height: var(--md-outlined-button-container-height, 40px);--_container-shape: var(--md-outlined-button-container-shape, 9999px);--_disabled-label-text-color: var(--md-outlined-button-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-opacity: var(--md-outlined-button-disabled-label-text-opacity, 0.38);--_disabled-outline-color: var(--md-outlined-button-disabled-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-outline-opacity: var(--md-outlined-button-disabled-outline-opacity, 0.12);--_focus-label-text-color: var(--md-outlined-button-focus-label-text-color, var(--md-sys-color-primary, #6750a4));--_hover-label-text-color: var(--md-outlined-button-hover-label-text-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-color: var(--md-outlined-button-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-opacity: var(--md-outlined-button-hover-state-layer-opacity, 0.08);--_label-text-color: var(--md-outlined-button-label-text-color, var(--md-sys-color-primary, #6750a4));--_label-text-font: var(--md-outlined-button-label-text-font, var(--md-sys-typescale-label-large-font, var(--md-ref-typeface-plain, Roboto)));--_label-text-line-height: var(--md-outlined-button-label-text-line-height, var(--md-sys-typescale-label-large-line-height, 1.25rem));--_label-text-size: var(--md-outlined-button-label-text-size, var(--md-sys-typescale-label-large-size, 0.875rem));--_label-text-weight: var(--md-outlined-button-label-text-weight, var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500)));--_outline-color: var(--md-outlined-button-outline-color, var(--md-sys-color-outline, #79747e));--_outline-width: var(--md-outlined-button-outline-width, 1px);--_pressed-label-text-color: var(--md-outlined-button-pressed-label-text-color, var(--md-sys-color-primary, #6750a4));--_pressed-outline-color: var(--md-outlined-button-pressed-outline-color, var(--md-sys-color-outline, #79747e));--_pressed-state-layer-color: var(--md-outlined-button-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-opacity: var(--md-outlined-button-pressed-state-layer-opacity, 0.12);--_disabled-icon-color: var(--md-outlined-button-disabled-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-icon-opacity: var(--md-outlined-button-disabled-icon-opacity, 0.38);--_focus-icon-color: var(--md-outlined-button-focus-icon-color, var(--md-sys-color-primary, #6750a4));--_hover-icon-color: var(--md-outlined-button-hover-icon-color, var(--md-sys-color-primary, #6750a4));--_icon-color: var(--md-outlined-button-icon-color, var(--md-sys-color-primary, #6750a4));--_icon-size: var(--md-outlined-button-icon-size, 18px);--_pressed-icon-color: var(--md-outlined-button-pressed-icon-color, var(--md-sys-color-primary, #6750a4));--_leading-space: var(--md-outlined-button-leading-space, 24px);--_trailing-space: var(--md-outlined-button-trailing-space, 24px);--_with-leading-icon-leading-space: var(--md-outlined-button-with-leading-icon-leading-space, 16px);--_with-leading-icon-trailing-space: var(--md-outlined-button-with-leading-icon-trailing-space, 24px);--_with-trailing-icon-leading-space: var(--md-outlined-button-with-trailing-icon-leading-space, 24px);--_with-trailing-icon-trailing-space: var(--md-outlined-button-with-trailing-icon-trailing-space, 16px);--_container-color: none;--_disabled-container-color: none;--_disabled-container-opacity: 0;--_container-shape-start-start: var( --md-outlined-button-container-shape-start-start, var(--_container-shape) );--_container-shape-start-end: var( --md-outlined-button-container-shape-start-end, var(--_container-shape) );--_container-shape-end-end: var( --md-outlined-button-container-shape-end-end, var(--_container-shape) );--_container-shape-end-start: var( --md-outlined-button-container-shape-end-start, var(--_container-shape) )}.button__outline{inset:0;border-style:solid;position:absolute;box-sizing:border-box;border-color:var(--_outline-color);border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-start-radius:var(--_container-shape-end-start);border-end-end-radius:var(--_container-shape-end-end)}.button:active .button__outline{border-color:var(--_pressed-outline-color)}.button:disabled .button__outline{border-color:var(--_disabled-outline-color);opacity:var(--_disabled-outline-opacity)}@media(forced-colors: active){.button:disabled .button__outline{opacity:1}}.button__outline,.button__ripple{border-width:var(--_outline-width)}.button__ripple{inline-size:calc(100% - 2*var(--_outline-width));block-size:calc(100% - 2*var(--_outline-width));border-style:solid;border-color:rgba(0,0,0,0)}/*# sourceMappingURL=outlined-styles.css.map */\n`;\n "]}
package/button/internal/shared-elevation-styles.css.js CHANGED
@@ -4,6 +4,6 @@
4
4
  * SPDX-License-Identifier: Apache-2.0
5
5
  */
6
6
  import { css } from 'lit';
7
- export const styles = css `md-elevation{transition-duration:280ms}.button{--md-elevation-level:var(--_container-elevation);--md-elevation-shadow-color:var(--_container-shadow-color)}.button:focus{--md-elevation-level:var(--_focus-container-elevation)}.button:hover{--md-elevation-level:var(--_hover-container-elevation)}.button:active{--md-elevation-level:var(--_pressed-container-elevation)}.button:disabled{--md-elevation-level:var(--_disabled-container-elevation)}/*# sourceMappingURL=shared-elevation-styles.css.map */
7
+ export const styles = css `md-elevation{transition-duration:280ms}.button:disabled md-elevation{transition:none}.button{--md-elevation-level: var(--_container-elevation);--md-elevation-shadow-color: var(--_container-shadow-color)}.button:focus{--md-elevation-level: var(--_focus-container-elevation)}.button:hover{--md-elevation-level: var(--_hover-container-elevation)}.button:active{--md-elevation-level: var(--_pressed-container-elevation)}.button:disabled{--md-elevation-level: var(--_disabled-container-elevation)}/*# sourceMappingURL=shared-elevation-styles.css.map */
8
8
  `;
9
9
  //# sourceMappingURL=shared-elevation-styles.css.js.map
package/button/internal/shared-elevation-styles.css.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"shared-elevation-styles.css.js","sourceRoot":"","sources":["shared-elevation-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n import {css} from 'lit';\n export const styles = css`md-elevation{transition-duration:280ms}.button{--md-elevation-level:var(--_container-elevation);--md-elevation-shadow-color:var(--_container-shadow-color)}.button:focus{--md-elevation-level:var(--_focus-container-elevation)}.button:hover{--md-elevation-level:var(--_hover-container-elevation)}.button:active{--md-elevation-level:var(--_pressed-container-elevation)}.button:disabled{--md-elevation-level:var(--_disabled-container-elevation)}/*# sourceMappingURL=shared-elevation-styles.css.map */\n`;\n "]}
1
+ {"version":3,"file":"shared-elevation-styles.css.js","sourceRoot":"","sources":["shared-elevation-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n import {css} from 'lit';\n export const styles = css`md-elevation{transition-duration:280ms}.button:disabled md-elevation{transition:none}.button{--md-elevation-level: var(--_container-elevation);--md-elevation-shadow-color: var(--_container-shadow-color)}.button:focus{--md-elevation-level: var(--_focus-container-elevation)}.button:hover{--md-elevation-level: var(--_hover-container-elevation)}.button:active{--md-elevation-level: var(--_pressed-container-elevation)}.button:disabled{--md-elevation-level: var(--_disabled-container-elevation)}/*# sourceMappingURL=shared-elevation-styles.css.map */\n`;\n "]}
package/button/internal/shared-styles.css.js CHANGED
@@ -4,6 +4,6 @@
4
4
  * SPDX-License-Identifier: Apache-2.0
5
5
  */
6
6
  import { css } from 'lit';
7
- export const styles = css `:host{display:inline-flex;height:var(--_container-height);outline:none;-webkit-tap-highlight-color:rgba(0,0,0,0);vertical-align:top;--md-ripple-hover-color: var(--_hover-state-layer-color);--md-ripple-pressed-color: var(--_pressed-state-layer-color);--md-ripple-hover-opacity: var(--_hover-state-layer-opacity);--md-ripple-pressed-opacity: var(--_pressed-state-layer-opacity)}:host([touch-target=wrapper]){margin:max(0px,(48px - var(--_container-height))/2) 0}md-focus-ring{--md-focus-ring-shape-start-start: var(--_container-shape-start-start);--md-focus-ring-shape-start-end: var(--_container-shape-start-end);--md-focus-ring-shape-end-end: var(--_container-shape-end-end);--md-focus-ring-shape-end-start: var(--_container-shape-end-start)}:host([disabled]){cursor:default;pointer-events:none}.button{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-inline-size:64px;border:none;outline:none;user-select:none;-webkit-appearance:none;vertical-align:middle;background:rgba(0,0,0,0);text-decoration:none;inline-size:100%;position:relative;z-index:0;height:100%;font:var(--_label-text-type);color:var(--_label-text-color);padding-inline-start:var(--_leading-space);padding-inline-end:var(--_trailing-space);gap:8px}.button::before{background-color:var(--_container-color);border-radius:inherit;content:"";inset:0;position:absolute}.button::-moz-focus-inner{padding:0;border:0}.button:hover{color:var(--_hover-label-text-color);cursor:pointer}.button:focus{color:var(--_focus-label-text-color)}.button:active{color:var(--_pressed-label-text-color);outline:none}.button:disabled .button__label{color:var(--_disabled-label-text-color);opacity:var(--_disabled-label-text-opacity)}.button:disabled::before{background-color:var(--_disabled-container-color);opacity:var(--_disabled-container-opacity)}@media(forced-colors: active){.button::before{content:"";box-sizing:border-box;border:1px solid rgba(0,0,0,0);border-radius:inherit;inset:0;pointer-events:none;position:absolute}}.button,.button__ripple{border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-start-radius:var(--_container-shape-end-start);border-end-end-radius:var(--_container-shape-end-end)}.button::after,.button::before,md-elevation,.button__ripple{z-index:-1}.button--icon-leading{padding-inline-start:var(--_with-leading-icon-leading-space);padding-inline-end:var(--_with-leading-icon-trailing-space)}.button--icon-trailing{padding-inline-start:var(--_with-trailing-icon-leading-space);padding-inline-end:var(--_with-trailing-icon-trailing-space)}.link-button-wrapper{inline-size:100%}.button ::slotted([slot=icon]){display:inline-flex;position:relative;writing-mode:horizontal-tb;fill:currentColor;color:var(--_icon-color);font-size:var(--_icon-size);inline-size:var(--_icon-size);block-size:var(--_icon-size)}.button:hover ::slotted([slot=icon]){color:var(--_hover-icon-color)}.button:focus ::slotted([slot=icon]){color:var(--_focus-icon-color)}.button:active ::slotted([slot=icon]){color:var(--_pressed-icon-color)}.button:disabled ::slotted([slot=icon]){color:var(--_disabled-icon-color);opacity:var(--_disabled-icon-opacity)}.touch{position:absolute;top:50%;height:48px;left:0;right:0;transform:translateY(-50%)}:host([touch-target=none]) .touch{display:none}/*# sourceMappingURL=shared-styles.css.map */
7
+ export const styles = css `:host{display:inline-flex;height:var(--_container-height);outline:none;font-family:var(--_label-text-font);font-size:var(--_label-text-size);line-height:var(--_label-text-line-height);font-weight:var(--_label-text-weight);-webkit-tap-highlight-color:rgba(0,0,0,0);vertical-align:top;--md-ripple-hover-color: var(--_hover-state-layer-color);--md-ripple-pressed-color: var(--_pressed-state-layer-color);--md-ripple-hover-opacity: var(--_hover-state-layer-opacity);--md-ripple-pressed-opacity: var(--_pressed-state-layer-opacity)}:host([touch-target=wrapper]){margin:max(0px,(48px - var(--_container-height))/2) 0}md-focus-ring{--md-focus-ring-shape-start-start: var(--_container-shape-start-start);--md-focus-ring-shape-start-end: var(--_container-shape-start-end);--md-focus-ring-shape-end-end: var(--_container-shape-end-end);--md-focus-ring-shape-end-start: var(--_container-shape-end-start)}:host([disabled]){cursor:default;pointer-events:none}.button{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-inline-size:64px;border:none;outline:none;user-select:none;-webkit-appearance:none;vertical-align:middle;background:rgba(0,0,0,0);text-decoration:none;inline-size:100%;position:relative;z-index:0;height:100%;font:inherit;color:var(--_label-text-color);padding-inline-start:var(--_leading-space);padding-inline-end:var(--_trailing-space);gap:8px}.button::before{background-color:var(--_container-color);border-radius:inherit;content:"";inset:0;position:absolute}.button::-moz-focus-inner{padding:0;border:0}.button:hover{color:var(--_hover-label-text-color);cursor:pointer}.button:focus{color:var(--_focus-label-text-color)}.button:active{color:var(--_pressed-label-text-color);outline:none}.button:disabled .button__label{color:var(--_disabled-label-text-color);opacity:var(--_disabled-label-text-opacity)}.button:disabled::before{background-color:var(--_disabled-container-color);opacity:var(--_disabled-container-opacity)}@media(forced-colors: active){.button::before{content:"";box-sizing:border-box;border:1px solid CanvasText;border-radius:inherit;inset:0;pointer-events:none;position:absolute}.button:disabled{--_disabled-icon-opacity: 1;--_disabled-container-opacity: 1;--_disabled-label-text-opacity: 1}}.button,.button__ripple{border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-start-radius:var(--_container-shape-end-start);border-end-end-radius:var(--_container-shape-end-end)}.button::after,.button::before,md-elevation,.button__ripple{z-index:-1}.button--icon-leading{padding-inline-start:var(--_with-leading-icon-leading-space);padding-inline-end:var(--_with-leading-icon-trailing-space)}.button--icon-trailing{padding-inline-start:var(--_with-trailing-icon-leading-space);padding-inline-end:var(--_with-trailing-icon-trailing-space)}.link-button-wrapper{inline-size:100%}.button ::slotted([slot=icon]){display:inline-flex;position:relative;writing-mode:horizontal-tb;fill:currentColor;color:var(--_icon-color);font-size:var(--_icon-size);inline-size:var(--_icon-size);block-size:var(--_icon-size)}.button:hover ::slotted([slot=icon]){color:var(--_hover-icon-color)}.button:focus ::slotted([slot=icon]){color:var(--_focus-icon-color)}.button:active ::slotted([slot=icon]){color:var(--_pressed-icon-color)}.button:disabled ::slotted([slot=icon]){color:var(--_disabled-icon-color);opacity:var(--_disabled-icon-opacity)}.touch{position:absolute;top:50%;height:48px;left:0;right:0;transform:translateY(-50%)}:host([touch-target=none]) .touch{display:none}/*# sourceMappingURL=shared-styles.css.map */
8
8
  `;
9
9
  //# sourceMappingURL=shared-styles.css.js.map
package/button/internal/shared-styles.css.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"shared-styles.css.js","sourceRoot":"","sources":["shared-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n import {css} from 'lit';\n export const styles = css`:host{display:inline-flex;height:var(--_container-height);outline:none;-webkit-tap-highlight-color:rgba(0,0,0,0);vertical-align:top;--md-ripple-hover-color: var(--_hover-state-layer-color);--md-ripple-pressed-color: var(--_pressed-state-layer-color);--md-ripple-hover-opacity: var(--_hover-state-layer-opacity);--md-ripple-pressed-opacity: var(--_pressed-state-layer-opacity)}:host([touch-target=wrapper]){margin:max(0px,(48px - var(--_container-height))/2) 0}md-focus-ring{--md-focus-ring-shape-start-start: var(--_container-shape-start-start);--md-focus-ring-shape-start-end: var(--_container-shape-start-end);--md-focus-ring-shape-end-end: var(--_container-shape-end-end);--md-focus-ring-shape-end-start: var(--_container-shape-end-start)}:host([disabled]){cursor:default;pointer-events:none}.button{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-inline-size:64px;border:none;outline:none;user-select:none;-webkit-appearance:none;vertical-align:middle;background:rgba(0,0,0,0);text-decoration:none;inline-size:100%;position:relative;z-index:0;height:100%;font:var(--_label-text-type);color:var(--_label-text-color);padding-inline-start:var(--_leading-space);padding-inline-end:var(--_trailing-space);gap:8px}.button::before{background-color:var(--_container-color);border-radius:inherit;content:\"\";inset:0;position:absolute}.button::-moz-focus-inner{padding:0;border:0}.button:hover{color:var(--_hover-label-text-color);cursor:pointer}.button:focus{color:var(--_focus-label-text-color)}.button:active{color:var(--_pressed-label-text-color);outline:none}.button:disabled .button__label{color:var(--_disabled-label-text-color);opacity:var(--_disabled-label-text-opacity)}.button:disabled::before{background-color:var(--_disabled-container-color);opacity:var(--_disabled-container-opacity)}@media(forced-colors: active){.button::before{content:\"\";box-sizing:border-box;border:1px solid rgba(0,0,0,0);border-radius:inherit;inset:0;pointer-events:none;position:absolute}}.button,.button__ripple{border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-start-radius:var(--_container-shape-end-start);border-end-end-radius:var(--_container-shape-end-end)}.button::after,.button::before,md-elevation,.button__ripple{z-index:-1}.button--icon-leading{padding-inline-start:var(--_with-leading-icon-leading-space);padding-inline-end:var(--_with-leading-icon-trailing-space)}.button--icon-trailing{padding-inline-start:var(--_with-trailing-icon-leading-space);padding-inline-end:var(--_with-trailing-icon-trailing-space)}.link-button-wrapper{inline-size:100%}.button ::slotted([slot=icon]){display:inline-flex;position:relative;writing-mode:horizontal-tb;fill:currentColor;color:var(--_icon-color);font-size:var(--_icon-size);inline-size:var(--_icon-size);block-size:var(--_icon-size)}.button:hover ::slotted([slot=icon]){color:var(--_hover-icon-color)}.button:focus ::slotted([slot=icon]){color:var(--_focus-icon-color)}.button:active ::slotted([slot=icon]){color:var(--_pressed-icon-color)}.button:disabled ::slotted([slot=icon]){color:var(--_disabled-icon-color);opacity:var(--_disabled-icon-opacity)}.touch{position:absolute;top:50%;height:48px;left:0;right:0;transform:translateY(-50%)}:host([touch-target=none]) .touch{display:none}/*# sourceMappingURL=shared-styles.css.map */\n`;\n "]}
1
+ {"version":3,"file":"shared-styles.css.js","sourceRoot":"","sources":["shared-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n import {css} from 'lit';\n export const styles = css`:host{display:inline-flex;height:var(--_container-height);outline:none;font-family:var(--_label-text-font);font-size:var(--_label-text-size);line-height:var(--_label-text-line-height);font-weight:var(--_label-text-weight);-webkit-tap-highlight-color:rgba(0,0,0,0);vertical-align:top;--md-ripple-hover-color: var(--_hover-state-layer-color);--md-ripple-pressed-color: var(--_pressed-state-layer-color);--md-ripple-hover-opacity: var(--_hover-state-layer-opacity);--md-ripple-pressed-opacity: var(--_pressed-state-layer-opacity)}:host([touch-target=wrapper]){margin:max(0px,(48px - var(--_container-height))/2) 0}md-focus-ring{--md-focus-ring-shape-start-start: var(--_container-shape-start-start);--md-focus-ring-shape-start-end: var(--_container-shape-start-end);--md-focus-ring-shape-end-end: var(--_container-shape-end-end);--md-focus-ring-shape-end-start: var(--_container-shape-end-start)}:host([disabled]){cursor:default;pointer-events:none}.button{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-inline-size:64px;border:none;outline:none;user-select:none;-webkit-appearance:none;vertical-align:middle;background:rgba(0,0,0,0);text-decoration:none;inline-size:100%;position:relative;z-index:0;height:100%;font:inherit;color:var(--_label-text-color);padding-inline-start:var(--_leading-space);padding-inline-end:var(--_trailing-space);gap:8px}.button::before{background-color:var(--_container-color);border-radius:inherit;content:\"\";inset:0;position:absolute}.button::-moz-focus-inner{padding:0;border:0}.button:hover{color:var(--_hover-label-text-color);cursor:pointer}.button:focus{color:var(--_focus-label-text-color)}.button:active{color:var(--_pressed-label-text-color);outline:none}.button:disabled .button__label{color:var(--_disabled-label-text-color);opacity:var(--_disabled-label-text-opacity)}.button:disabled::before{background-color:var(--_disabled-container-color);opacity:var(--_disabled-container-opacity)}@media(forced-colors: active){.button::before{content:\"\";box-sizing:border-box;border:1px solid CanvasText;border-radius:inherit;inset:0;pointer-events:none;position:absolute}.button:disabled{--_disabled-icon-opacity: 1;--_disabled-container-opacity: 1;--_disabled-label-text-opacity: 1}}.button,.button__ripple{border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-start-radius:var(--_container-shape-end-start);border-end-end-radius:var(--_container-shape-end-end)}.button::after,.button::before,md-elevation,.button__ripple{z-index:-1}.button--icon-leading{padding-inline-start:var(--_with-leading-icon-leading-space);padding-inline-end:var(--_with-leading-icon-trailing-space)}.button--icon-trailing{padding-inline-start:var(--_with-trailing-icon-leading-space);padding-inline-end:var(--_with-trailing-icon-trailing-space)}.link-button-wrapper{inline-size:100%}.button ::slotted([slot=icon]){display:inline-flex;position:relative;writing-mode:horizontal-tb;fill:currentColor;color:var(--_icon-color);font-size:var(--_icon-size);inline-size:var(--_icon-size);block-size:var(--_icon-size)}.button:hover ::slotted([slot=icon]){color:var(--_hover-icon-color)}.button:focus ::slotted([slot=icon]){color:var(--_focus-icon-color)}.button:active ::slotted([slot=icon]){color:var(--_pressed-icon-color)}.button:disabled ::slotted([slot=icon]){color:var(--_disabled-icon-color);opacity:var(--_disabled-icon-opacity)}.touch{position:absolute;top:50%;height:48px;left:0;right:0;transform:translateY(-50%)}:host([touch-target=none]) .touch{display:none}/*# sourceMappingURL=shared-styles.css.map */\n`;\n "]}
package/button/internal/text-styles.css.js CHANGED
@@ -4,6 +4,6 @@
4
4
  * SPDX-License-Identifier: Apache-2.0
5
5
  */
6
6
  import { css } from 'lit';
7
- export const styles = css `:host{--_container-height: var(--md-text-button-container-height, 40px);--_container-shape: var(--md-text-button-container-shape, 9999px);--_disabled-label-text-color: var(--md-text-button-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-opacity: var(--md-text-button-disabled-label-text-opacity, 0.38);--_focus-label-text-color: var(--md-text-button-focus-label-text-color, var(--md-sys-color-primary, #6750a4));--_hover-label-text-color: var(--md-text-button-hover-label-text-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-color: var(--md-text-button-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-opacity: var(--md-text-button-hover-state-layer-opacity, 0.08);--_label-text-color: var(--md-text-button-label-text-color, var(--md-sys-color-primary, #6750a4));--_label-text-type: var(--md-text-button-label-text-type, var(--md-sys-typescale-label-large, 500 0.875rem / 1.25rem var(--md-ref-typeface-plain, Roboto)));--_pressed-label-text-color: var(--md-text-button-pressed-label-text-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-color: var(--md-text-button-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-opacity: var(--md-text-button-pressed-state-layer-opacity, 0.12);--_disabled-icon-color: var(--md-text-button-disabled-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-icon-opacity: var(--md-text-button-disabled-icon-opacity, 0.38);--_focus-icon-color: var(--md-text-button-focus-icon-color, var(--md-sys-color-primary, #6750a4));--_hover-icon-color: var(--md-text-button-hover-icon-color, var(--md-sys-color-primary, #6750a4));--_icon-color: var(--md-text-button-icon-color, var(--md-sys-color-primary, #6750a4));--_icon-size: var(--md-text-button-icon-size, 18px);--_pressed-icon-color: var(--md-text-button-pressed-icon-color, var(--md-sys-color-primary, #6750a4));--_leading-space: var(--md-text-button-leading-space, 12px);--_trailing-space: var(--md-text-button-trailing-space, 12px);--_with-leading-icon-leading-space: var(--md-text-button-with-leading-icon-leading-space, 12px);--_with-leading-icon-trailing-space: var(--md-text-button-with-leading-icon-trailing-space, 16px);--_with-trailing-icon-leading-space: var(--md-text-button-with-trailing-icon-leading-space, 16px);--_with-trailing-icon-trailing-space: var(--md-text-button-with-trailing-icon-trailing-space, 12px);--_container-color: none;--_disabled-container-color: none;--_disabled-container-opacity: 0;--_container-shape-start-start: var( --md-text-button-container-shape-start-start, var(--_container-shape) );--_container-shape-start-end: var( --md-text-button-container-shape-start-end, var(--_container-shape) );--_container-shape-end-end: var( --md-text-button-container-shape-end-end, var(--_container-shape) );--_container-shape-end-start: var( --md-text-button-container-shape-end-start, var(--_container-shape) )}/*# sourceMappingURL=text-styles.css.map */
7
+ export const styles = css `:host{--_container-height: var(--md-text-button-container-height, 40px);--_container-shape: var(--md-text-button-container-shape, 9999px);--_disabled-label-text-color: var(--md-text-button-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-opacity: var(--md-text-button-disabled-label-text-opacity, 0.38);--_focus-label-text-color: var(--md-text-button-focus-label-text-color, var(--md-sys-color-primary, #6750a4));--_hover-label-text-color: var(--md-text-button-hover-label-text-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-color: var(--md-text-button-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-opacity: var(--md-text-button-hover-state-layer-opacity, 0.08);--_label-text-color: var(--md-text-button-label-text-color, var(--md-sys-color-primary, #6750a4));--_label-text-font: var(--md-text-button-label-text-font, var(--md-sys-typescale-label-large-font, var(--md-ref-typeface-plain, Roboto)));--_label-text-line-height: var(--md-text-button-label-text-line-height, var(--md-sys-typescale-label-large-line-height, 1.25rem));--_label-text-size: var(--md-text-button-label-text-size, var(--md-sys-typescale-label-large-size, 0.875rem));--_label-text-weight: var(--md-text-button-label-text-weight, var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500)));--_pressed-label-text-color: var(--md-text-button-pressed-label-text-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-color: var(--md-text-button-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-opacity: var(--md-text-button-pressed-state-layer-opacity, 0.12);--_disabled-icon-color: var(--md-text-button-disabled-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-icon-opacity: var(--md-text-button-disabled-icon-opacity, 0.38);--_focus-icon-color: var(--md-text-button-focus-icon-color, var(--md-sys-color-primary, #6750a4));--_hover-icon-color: var(--md-text-button-hover-icon-color, var(--md-sys-color-primary, #6750a4));--_icon-color: var(--md-text-button-icon-color, var(--md-sys-color-primary, #6750a4));--_icon-size: var(--md-text-button-icon-size, 18px);--_pressed-icon-color: var(--md-text-button-pressed-icon-color, var(--md-sys-color-primary, #6750a4));--_leading-space: var(--md-text-button-leading-space, 12px);--_trailing-space: var(--md-text-button-trailing-space, 12px);--_with-leading-icon-leading-space: var(--md-text-button-with-leading-icon-leading-space, 12px);--_with-leading-icon-trailing-space: var(--md-text-button-with-leading-icon-trailing-space, 16px);--_with-trailing-icon-leading-space: var(--md-text-button-with-trailing-icon-leading-space, 16px);--_with-trailing-icon-trailing-space: var(--md-text-button-with-trailing-icon-trailing-space, 12px);--_container-color: none;--_disabled-container-color: none;--_disabled-container-opacity: 0;--_container-shape-start-start: var( --md-text-button-container-shape-start-start, var(--_container-shape) );--_container-shape-start-end: var( --md-text-button-container-shape-start-end, var(--_container-shape) );--_container-shape-end-end: var( --md-text-button-container-shape-end-end, var(--_container-shape) );--_container-shape-end-start: var( --md-text-button-container-shape-end-start, var(--_container-shape) )}/*# sourceMappingURL=text-styles.css.map */
8
8
  `;
9
9
  //# sourceMappingURL=text-styles.css.js.map
package/button/internal/text-styles.css.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"text-styles.css.js","sourceRoot":"","sources":["text-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n import {css} from 'lit';\n export const styles = css`:host{--_container-height: var(--md-text-button-container-height, 40px);--_container-shape: var(--md-text-button-container-shape, 9999px);--_disabled-label-text-color: var(--md-text-button-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-opacity: var(--md-text-button-disabled-label-text-opacity, 0.38);--_focus-label-text-color: var(--md-text-button-focus-label-text-color, var(--md-sys-color-primary, #6750a4));--_hover-label-text-color: var(--md-text-button-hover-label-text-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-color: var(--md-text-button-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-opacity: var(--md-text-button-hover-state-layer-opacity, 0.08);--_label-text-color: var(--md-text-button-label-text-color, var(--md-sys-color-primary, #6750a4));--_label-text-type: var(--md-text-button-label-text-type, var(--md-sys-typescale-label-large, 500 0.875rem / 1.25rem var(--md-ref-typeface-plain, Roboto)));--_pressed-label-text-color: var(--md-text-button-pressed-label-text-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-color: var(--md-text-button-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-opacity: var(--md-text-button-pressed-state-layer-opacity, 0.12);--_disabled-icon-color: var(--md-text-button-disabled-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-icon-opacity: var(--md-text-button-disabled-icon-opacity, 0.38);--_focus-icon-color: var(--md-text-button-focus-icon-color, var(--md-sys-color-primary, #6750a4));--_hover-icon-color: var(--md-text-button-hover-icon-color, var(--md-sys-color-primary, #6750a4));--_icon-color: var(--md-text-button-icon-color, var(--md-sys-color-primary, #6750a4));--_icon-size: var(--md-text-button-icon-size, 18px);--_pressed-icon-color: var(--md-text-button-pressed-icon-color, var(--md-sys-color-primary, #6750a4));--_leading-space: var(--md-text-button-leading-space, 12px);--_trailing-space: var(--md-text-button-trailing-space, 12px);--_with-leading-icon-leading-space: var(--md-text-button-with-leading-icon-leading-space, 12px);--_with-leading-icon-trailing-space: var(--md-text-button-with-leading-icon-trailing-space, 16px);--_with-trailing-icon-leading-space: var(--md-text-button-with-trailing-icon-leading-space, 16px);--_with-trailing-icon-trailing-space: var(--md-text-button-with-trailing-icon-trailing-space, 12px);--_container-color: none;--_disabled-container-color: none;--_disabled-container-opacity: 0;--_container-shape-start-start: var( --md-text-button-container-shape-start-start, var(--_container-shape) );--_container-shape-start-end: var( --md-text-button-container-shape-start-end, var(--_container-shape) );--_container-shape-end-end: var( --md-text-button-container-shape-end-end, var(--_container-shape) );--_container-shape-end-start: var( --md-text-button-container-shape-end-start, var(--_container-shape) )}/*# sourceMappingURL=text-styles.css.map */\n`;\n "]}
1
+ {"version":3,"file":"text-styles.css.js","sourceRoot":"","sources":["text-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n import {css} from 'lit';\n export const styles = css`:host{--_container-height: var(--md-text-button-container-height, 40px);--_container-shape: var(--md-text-button-container-shape, 9999px);--_disabled-label-text-color: var(--md-text-button-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-opacity: var(--md-text-button-disabled-label-text-opacity, 0.38);--_focus-label-text-color: var(--md-text-button-focus-label-text-color, var(--md-sys-color-primary, #6750a4));--_hover-label-text-color: var(--md-text-button-hover-label-text-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-color: var(--md-text-button-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-opacity: var(--md-text-button-hover-state-layer-opacity, 0.08);--_label-text-color: var(--md-text-button-label-text-color, var(--md-sys-color-primary, #6750a4));--_label-text-font: var(--md-text-button-label-text-font, var(--md-sys-typescale-label-large-font, var(--md-ref-typeface-plain, Roboto)));--_label-text-line-height: var(--md-text-button-label-text-line-height, var(--md-sys-typescale-label-large-line-height, 1.25rem));--_label-text-size: var(--md-text-button-label-text-size, var(--md-sys-typescale-label-large-size, 0.875rem));--_label-text-weight: var(--md-text-button-label-text-weight, var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500)));--_pressed-label-text-color: var(--md-text-button-pressed-label-text-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-color: var(--md-text-button-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-opacity: var(--md-text-button-pressed-state-layer-opacity, 0.12);--_disabled-icon-color: var(--md-text-button-disabled-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-icon-opacity: var(--md-text-button-disabled-icon-opacity, 0.38);--_focus-icon-color: var(--md-text-button-focus-icon-color, var(--md-sys-color-primary, #6750a4));--_hover-icon-color: var(--md-text-button-hover-icon-color, var(--md-sys-color-primary, #6750a4));--_icon-color: var(--md-text-button-icon-color, var(--md-sys-color-primary, #6750a4));--_icon-size: var(--md-text-button-icon-size, 18px);--_pressed-icon-color: var(--md-text-button-pressed-icon-color, var(--md-sys-color-primary, #6750a4));--_leading-space: var(--md-text-button-leading-space, 12px);--_trailing-space: var(--md-text-button-trailing-space, 12px);--_with-leading-icon-leading-space: var(--md-text-button-with-leading-icon-leading-space, 12px);--_with-leading-icon-trailing-space: var(--md-text-button-with-leading-icon-trailing-space, 16px);--_with-trailing-icon-leading-space: var(--md-text-button-with-trailing-icon-leading-space, 16px);--_with-trailing-icon-trailing-space: var(--md-text-button-with-trailing-icon-trailing-space, 12px);--_container-color: none;--_disabled-container-color: none;--_disabled-container-opacity: 0;--_container-shape-start-start: var( --md-text-button-container-shape-start-start, var(--_container-shape) );--_container-shape-start-end: var( --md-text-button-container-shape-start-end, var(--_container-shape) );--_container-shape-end-end: var( --md-text-button-container-shape-end-end, var(--_container-shape) );--_container-shape-end-start: var( --md-text-button-container-shape-end-start, var(--_container-shape) )}/*# sourceMappingURL=text-styles.css.map */\n`;\n "]}
package/checkbox/internal/_checkbox.scss CHANGED
@@ -103,6 +103,7 @@ $_checkmark-bottom-left: 7px, -14px;
103
103
  outline: none;
104
104
  position: absolute;
105
105
  width: 48px;
106
+ z-index: 1;
106
107
  }
107
108
 
108
109
  :host([touch-target='none']) input {
@@ -112,7 +113,7 @@ $_checkmark-bottom-left: 7px, -14px;
112
113
 
113
114
  .container {
114
115
  border-radius: inherit;
115
- display: grid;
116
+ display: flex;
116
117
  height: 100%;
117
118
  place-content: center;
118
119
  place-items: center;
package/checkbox/internal/checkbox-styles.css.js CHANGED
@@ -4,6 +4,6 @@
4
4
  * SPDX-License-Identifier: Apache-2.0
5
5
  */
6
6
  import { css } from 'lit';
7
- export const styles = css `:host{--_container-shape: var(--md-checkbox-container-shape, 2px);--_container-size: var(--md-checkbox-container-size, 18px);--_icon-size: var(--md-checkbox-icon-size, 18px);--_selected-container-color: var(--md-checkbox-selected-container-color, var(--md-sys-color-primary, #6750a4));--_selected-disabled-container-color: var(--md-checkbox-selected-disabled-container-color, var(--md-sys-color-on-surface, #1d1b20));--_selected-disabled-container-opacity: var(--md-checkbox-selected-disabled-container-opacity, 0.38);--_selected-disabled-icon-color: var(--md-checkbox-selected-disabled-icon-color, var(--md-sys-color-surface, #fef7ff));--_selected-focus-container-color: var(--md-checkbox-selected-focus-container-color, var(--md-sys-color-primary, #6750a4));--_selected-focus-icon-color: var(--md-checkbox-selected-focus-icon-color, var(--md-sys-color-on-primary, #fff));--_selected-hover-container-color: var(--md-checkbox-selected-hover-container-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-icon-color: var(--md-checkbox-selected-hover-icon-color, var(--md-sys-color-on-primary, #fff));--_selected-hover-state-layer-color: var(--md-checkbox-selected-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-state-layer-opacity: var(--md-checkbox-selected-hover-state-layer-opacity, 0.08);--_selected-icon-color: var(--md-checkbox-selected-icon-color, var(--md-sys-color-on-primary, #fff));--_selected-pressed-container-color: var(--md-checkbox-selected-pressed-container-color, var(--md-sys-color-primary, #6750a4));--_selected-pressed-icon-color: var(--md-checkbox-selected-pressed-icon-color, var(--md-sys-color-on-primary, #fff));--_selected-pressed-state-layer-color: var(--md-checkbox-selected-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_selected-pressed-state-layer-opacity: var(--md-checkbox-selected-pressed-state-layer-opacity, 0.12);--_state-layer-shape: var(--md-checkbox-state-layer-shape, 9999px);--_state-layer-size: var(--md-checkbox-state-layer-size, 40px);--_disabled-container-opacity: var(--md-checkbox-disabled-container-opacity, 0.38);--_disabled-outline-color: var(--md-checkbox-disabled-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-outline-width: var(--md-checkbox-disabled-outline-width, 2px);--_focus-outline-color: var(--md-checkbox-focus-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_focus-outline-width: var(--md-checkbox-focus-outline-width, 2px);--_hover-outline-color: var(--md-checkbox-hover-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-outline-width: var(--md-checkbox-hover-outline-width, 2px);--_hover-state-layer-color: var(--md-checkbox-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-state-layer-opacity: var(--md-checkbox-hover-state-layer-opacity, 0.08);--_outline-color: var(--md-checkbox-outline-color, var(--md-sys-color-on-surface-variant, #49454f));--_outline-width: var(--md-checkbox-outline-width, 2px);--_pressed-outline-color: var(--md-checkbox-pressed-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_pressed-outline-width: var(--md-checkbox-pressed-outline-width, 2px);--_pressed-state-layer-color: var(--md-checkbox-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-opacity: var(--md-checkbox-pressed-state-layer-opacity, 0.12);--_container-shape-start-start: var( --md-checkbox-container-shape-start-start, var(--_container-shape) );--_container-shape-start-end: var( --md-checkbox-container-shape-start-end, var(--_container-shape) );--_container-shape-end-end: var( --md-checkbox-container-shape-end-end, var(--_container-shape) );--_container-shape-end-start: var( --md-checkbox-container-shape-end-start, var(--_container-shape) );border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-end-radius:var(--_container-shape-end-end);border-end-start-radius:var(--_container-shape-end-start);display:inline-flex;height:var(--_container-size);position:relative;vertical-align:top;width:var(--_container-size);-webkit-tap-highlight-color:rgba(0,0,0,0)}:host([touch-target=wrapper]){margin:max(0px,(48px - var(--_container-size))/2)}md-focus-ring{height:44px;inset:unset;width:44px}input{appearance:none;height:48px;margin:0;opacity:0;outline:none;position:absolute;width:48px}:host([touch-target=none]) input{height:100%;width:100%}.container{border-radius:inherit;display:grid;height:100%;place-content:center;place-items:center;position:relative;width:100%}.outline,.background,.icon{inset:0;position:absolute}.outline,.background{border-radius:inherit}.outline{border-color:var(--_outline-color);border-style:solid;border-width:var(--_outline-width);box-sizing:border-box}.background{background-color:var(--_selected-container-color)}.background,.icon{opacity:0;transition-duration:150ms,50ms;transition-property:transform,opacity;transition-timing-function:cubic-bezier(0.3, 0, 0.8, 0.15),linear;transform:scale(0.6)}:where(.selected) :is(.background,.icon){opacity:1;transition-duration:350ms,50ms;transition-timing-function:cubic-bezier(0.05, 0.7, 0.1, 1),linear;transform:scale(1)}md-ripple{border-radius:var(--_state-layer-shape);height:var(--_state-layer-size);inset:unset;width:var(--_state-layer-size);--md-ripple-hover-color: var(--_hover-state-layer-color);--md-ripple-hover-opacity: var(--_hover-state-layer-opacity);--md-ripple-pressed-color: var(--_pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_pressed-state-layer-opacity)}.selected md-ripple{--md-ripple-hover-color: var(--_selected-hover-state-layer-color);--md-ripple-hover-opacity: var(--_selected-hover-state-layer-opacity);--md-ripple-pressed-color: var(--_selected-pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_selected-pressed-state-layer-opacity)}.icon{fill:var(--_selected-icon-color);height:var(--_icon-size);width:var(--_icon-size)}.mark.short{height:2px;transition-property:transform,height;width:2px}.mark.long{height:2px;transition-property:transform,width;width:10px}.mark{animation-duration:150ms;animation-timing-function:cubic-bezier(0.3, 0, 0.8, 0.15);transition-duration:150ms;transition-timing-function:cubic-bezier(0.3, 0, 0.8, 0.15)}.selected .mark{animation-duration:350ms;animation-timing-function:cubic-bezier(0.05, 0.7, 0.1, 1);transition-duration:350ms;transition-timing-function:cubic-bezier(0.05, 0.7, 0.1, 1)}.checked .mark,.prev-checked.unselected .mark{transform:scaleY(-1) translate(7px, -14px) rotate(45deg)}.checked .mark.short,.prev-checked.unselected .mark.short{height:5.6568542495px}.checked .mark.long,.prev-checked.unselected .mark.long{width:11.313708499px}.indeterminate .mark,.prev-indeterminate.unselected .mark{transform:scaleY(-1) translate(4px, -10px) rotate(0deg)}.prev-unselected .mark{transition-property:none}.prev-unselected.checked .mark.long{animation-name:prev-unselected-to-checked}@keyframes prev-unselected-to-checked{from{width:0}}:where(:hover) .outline{border-color:var(--_hover-outline-color);border-width:var(--_hover-outline-width)}:where(:hover) .background{background:var(--_selected-hover-container-color)}:where(:hover) .icon{fill:var(--_selected-hover-icon-color)}:where(:focus-within) .outline{border-color:var(--_focus-outline-color);border-width:var(--_focus-outline-width)}:where(:focus-within) .background{background:var(--_selected-focus-container-color)}:where(:focus-within) .icon{fill:var(--_selected-focus-icon-color)}:where(:active) .outline{border-color:var(--_pressed-outline-color);border-width:var(--_pressed-outline-width)}:where(:active) .background{background:var(--_selected-pressed-container-color)}:where(:active) .icon{fill:var(--_selected-pressed-icon-color)}:where(.disabled,.prev-disabled) :is(.background,.icon,.mark){animation-duration:0s;transition-duration:0s}:where(.disabled) .outline{border-color:var(--_disabled-outline-color);border-width:var(--_disabled-outline-width);opacity:var(--_disabled-container-opacity)}:where(.selected.disabled) .outline{visibility:hidden}:where(.selected.disabled) .background{background:var(--_selected-disabled-container-color);opacity:var(--_selected-disabled-container-opacity)}:where(.disabled) .icon{fill:var(--_selected-disabled-icon-color)}@media(forced-colors: active){.background{background-color:CanvasText}.selected.disabled .background{background-color:GrayText;opacity:1}.outline{border-color:CanvasText}.disabled .outline{border-color:GrayText;opacity:1}.icon{fill:Canvas}}/*# sourceMappingURL=checkbox-styles.css.map */
7
+ export const styles = css `:host{--_container-shape: var(--md-checkbox-container-shape, 2px);--_container-size: var(--md-checkbox-container-size, 18px);--_icon-size: var(--md-checkbox-icon-size, 18px);--_selected-container-color: var(--md-checkbox-selected-container-color, var(--md-sys-color-primary, #6750a4));--_selected-disabled-container-color: var(--md-checkbox-selected-disabled-container-color, var(--md-sys-color-on-surface, #1d1b20));--_selected-disabled-container-opacity: var(--md-checkbox-selected-disabled-container-opacity, 0.38);--_selected-disabled-icon-color: var(--md-checkbox-selected-disabled-icon-color, var(--md-sys-color-surface, #fef7ff));--_selected-focus-container-color: var(--md-checkbox-selected-focus-container-color, var(--md-sys-color-primary, #6750a4));--_selected-focus-icon-color: var(--md-checkbox-selected-focus-icon-color, var(--md-sys-color-on-primary, #fff));--_selected-hover-container-color: var(--md-checkbox-selected-hover-container-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-icon-color: var(--md-checkbox-selected-hover-icon-color, var(--md-sys-color-on-primary, #fff));--_selected-hover-state-layer-color: var(--md-checkbox-selected-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-state-layer-opacity: var(--md-checkbox-selected-hover-state-layer-opacity, 0.08);--_selected-icon-color: var(--md-checkbox-selected-icon-color, var(--md-sys-color-on-primary, #fff));--_selected-pressed-container-color: var(--md-checkbox-selected-pressed-container-color, var(--md-sys-color-primary, #6750a4));--_selected-pressed-icon-color: var(--md-checkbox-selected-pressed-icon-color, var(--md-sys-color-on-primary, #fff));--_selected-pressed-state-layer-color: var(--md-checkbox-selected-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_selected-pressed-state-layer-opacity: var(--md-checkbox-selected-pressed-state-layer-opacity, 0.12);--_state-layer-shape: var(--md-checkbox-state-layer-shape, 9999px);--_state-layer-size: var(--md-checkbox-state-layer-size, 40px);--_disabled-container-opacity: var(--md-checkbox-disabled-container-opacity, 0.38);--_disabled-outline-color: var(--md-checkbox-disabled-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-outline-width: var(--md-checkbox-disabled-outline-width, 2px);--_focus-outline-color: var(--md-checkbox-focus-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_focus-outline-width: var(--md-checkbox-focus-outline-width, 2px);--_hover-outline-color: var(--md-checkbox-hover-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-outline-width: var(--md-checkbox-hover-outline-width, 2px);--_hover-state-layer-color: var(--md-checkbox-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-state-layer-opacity: var(--md-checkbox-hover-state-layer-opacity, 0.08);--_outline-color: var(--md-checkbox-outline-color, var(--md-sys-color-on-surface-variant, #49454f));--_outline-width: var(--md-checkbox-outline-width, 2px);--_pressed-outline-color: var(--md-checkbox-pressed-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_pressed-outline-width: var(--md-checkbox-pressed-outline-width, 2px);--_pressed-state-layer-color: var(--md-checkbox-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-opacity: var(--md-checkbox-pressed-state-layer-opacity, 0.12);--_container-shape-start-start: var( --md-checkbox-container-shape-start-start, var(--_container-shape) );--_container-shape-start-end: var( --md-checkbox-container-shape-start-end, var(--_container-shape) );--_container-shape-end-end: var( --md-checkbox-container-shape-end-end, var(--_container-shape) );--_container-shape-end-start: var( --md-checkbox-container-shape-end-start, var(--_container-shape) );border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-end-radius:var(--_container-shape-end-end);border-end-start-radius:var(--_container-shape-end-start);display:inline-flex;height:var(--_container-size);position:relative;vertical-align:top;width:var(--_container-size);-webkit-tap-highlight-color:rgba(0,0,0,0)}:host([touch-target=wrapper]){margin:max(0px,(48px - var(--_container-size))/2)}md-focus-ring{height:44px;inset:unset;width:44px}input{appearance:none;height:48px;margin:0;opacity:0;outline:none;position:absolute;width:48px;z-index:1}:host([touch-target=none]) input{height:100%;width:100%}.container{border-radius:inherit;display:flex;height:100%;place-content:center;place-items:center;position:relative;width:100%}.outline,.background,.icon{inset:0;position:absolute}.outline,.background{border-radius:inherit}.outline{border-color:var(--_outline-color);border-style:solid;border-width:var(--_outline-width);box-sizing:border-box}.background{background-color:var(--_selected-container-color)}.background,.icon{opacity:0;transition-duration:150ms,50ms;transition-property:transform,opacity;transition-timing-function:cubic-bezier(0.3, 0, 0.8, 0.15),linear;transform:scale(0.6)}:where(.selected) :is(.background,.icon){opacity:1;transition-duration:350ms,50ms;transition-timing-function:cubic-bezier(0.05, 0.7, 0.1, 1),linear;transform:scale(1)}md-ripple{border-radius:var(--_state-layer-shape);height:var(--_state-layer-size);inset:unset;width:var(--_state-layer-size);--md-ripple-hover-color: var(--_hover-state-layer-color);--md-ripple-hover-opacity: var(--_hover-state-layer-opacity);--md-ripple-pressed-color: var(--_pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_pressed-state-layer-opacity)}.selected md-ripple{--md-ripple-hover-color: var(--_selected-hover-state-layer-color);--md-ripple-hover-opacity: var(--_selected-hover-state-layer-opacity);--md-ripple-pressed-color: var(--_selected-pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_selected-pressed-state-layer-opacity)}.icon{fill:var(--_selected-icon-color);height:var(--_icon-size);width:var(--_icon-size)}.mark.short{height:2px;transition-property:transform,height;width:2px}.mark.long{height:2px;transition-property:transform,width;width:10px}.mark{animation-duration:150ms;animation-timing-function:cubic-bezier(0.3, 0, 0.8, 0.15);transition-duration:150ms;transition-timing-function:cubic-bezier(0.3, 0, 0.8, 0.15)}.selected .mark{animation-duration:350ms;animation-timing-function:cubic-bezier(0.05, 0.7, 0.1, 1);transition-duration:350ms;transition-timing-function:cubic-bezier(0.05, 0.7, 0.1, 1)}.checked .mark,.prev-checked.unselected .mark{transform:scaleY(-1) translate(7px, -14px) rotate(45deg)}.checked .mark.short,.prev-checked.unselected .mark.short{height:5.6568542495px}.checked .mark.long,.prev-checked.unselected .mark.long{width:11.313708499px}.indeterminate .mark,.prev-indeterminate.unselected .mark{transform:scaleY(-1) translate(4px, -10px) rotate(0deg)}.prev-unselected .mark{transition-property:none}.prev-unselected.checked .mark.long{animation-name:prev-unselected-to-checked}@keyframes prev-unselected-to-checked{from{width:0}}:where(:hover) .outline{border-color:var(--_hover-outline-color);border-width:var(--_hover-outline-width)}:where(:hover) .background{background:var(--_selected-hover-container-color)}:where(:hover) .icon{fill:var(--_selected-hover-icon-color)}:where(:focus-within) .outline{border-color:var(--_focus-outline-color);border-width:var(--_focus-outline-width)}:where(:focus-within) .background{background:var(--_selected-focus-container-color)}:where(:focus-within) .icon{fill:var(--_selected-focus-icon-color)}:where(:active) .outline{border-color:var(--_pressed-outline-color);border-width:var(--_pressed-outline-width)}:where(:active) .background{background:var(--_selected-pressed-container-color)}:where(:active) .icon{fill:var(--_selected-pressed-icon-color)}:where(.disabled,.prev-disabled) :is(.background,.icon,.mark){animation-duration:0s;transition-duration:0s}:where(.disabled) .outline{border-color:var(--_disabled-outline-color);border-width:var(--_disabled-outline-width);opacity:var(--_disabled-container-opacity)}:where(.selected.disabled) .outline{visibility:hidden}:where(.selected.disabled) .background{background:var(--_selected-disabled-container-color);opacity:var(--_selected-disabled-container-opacity)}:where(.disabled) .icon{fill:var(--_selected-disabled-icon-color)}@media(forced-colors: active){.background{background-color:CanvasText}.selected.disabled .background{background-color:GrayText;opacity:1}.outline{border-color:CanvasText}.disabled .outline{border-color:GrayText;opacity:1}.icon{fill:Canvas}}/*# sourceMappingURL=checkbox-styles.css.map */
8
8
  `;
9
9
  //# sourceMappingURL=checkbox-styles.css.js.map
package/checkbox/internal/checkbox-styles.css.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"checkbox-styles.css.js","sourceRoot":"","sources":["checkbox-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n import {css} from 'lit';\n export const styles = css`:host{--_container-shape: var(--md-checkbox-container-shape, 2px);--_container-size: var(--md-checkbox-container-size, 18px);--_icon-size: var(--md-checkbox-icon-size, 18px);--_selected-container-color: var(--md-checkbox-selected-container-color, var(--md-sys-color-primary, #6750a4));--_selected-disabled-container-color: var(--md-checkbox-selected-disabled-container-color, var(--md-sys-color-on-surface, #1d1b20));--_selected-disabled-container-opacity: var(--md-checkbox-selected-disabled-container-opacity, 0.38);--_selected-disabled-icon-color: var(--md-checkbox-selected-disabled-icon-color, var(--md-sys-color-surface, #fef7ff));--_selected-focus-container-color: var(--md-checkbox-selected-focus-container-color, var(--md-sys-color-primary, #6750a4));--_selected-focus-icon-color: var(--md-checkbox-selected-focus-icon-color, var(--md-sys-color-on-primary, #fff));--_selected-hover-container-color: var(--md-checkbox-selected-hover-container-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-icon-color: var(--md-checkbox-selected-hover-icon-color, var(--md-sys-color-on-primary, #fff));--_selected-hover-state-layer-color: var(--md-checkbox-selected-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-state-layer-opacity: var(--md-checkbox-selected-hover-state-layer-opacity, 0.08);--_selected-icon-color: var(--md-checkbox-selected-icon-color, var(--md-sys-color-on-primary, #fff));--_selected-pressed-container-color: var(--md-checkbox-selected-pressed-container-color, var(--md-sys-color-primary, #6750a4));--_selected-pressed-icon-color: var(--md-checkbox-selected-pressed-icon-color, var(--md-sys-color-on-primary, #fff));--_selected-pressed-state-layer-color: var(--md-checkbox-selected-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_selected-pressed-state-layer-opacity: var(--md-checkbox-selected-pressed-state-layer-opacity, 0.12);--_state-layer-shape: var(--md-checkbox-state-layer-shape, 9999px);--_state-layer-size: var(--md-checkbox-state-layer-size, 40px);--_disabled-container-opacity: var(--md-checkbox-disabled-container-opacity, 0.38);--_disabled-outline-color: var(--md-checkbox-disabled-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-outline-width: var(--md-checkbox-disabled-outline-width, 2px);--_focus-outline-color: var(--md-checkbox-focus-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_focus-outline-width: var(--md-checkbox-focus-outline-width, 2px);--_hover-outline-color: var(--md-checkbox-hover-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-outline-width: var(--md-checkbox-hover-outline-width, 2px);--_hover-state-layer-color: var(--md-checkbox-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-state-layer-opacity: var(--md-checkbox-hover-state-layer-opacity, 0.08);--_outline-color: var(--md-checkbox-outline-color, var(--md-sys-color-on-surface-variant, #49454f));--_outline-width: var(--md-checkbox-outline-width, 2px);--_pressed-outline-color: var(--md-checkbox-pressed-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_pressed-outline-width: var(--md-checkbox-pressed-outline-width, 2px);--_pressed-state-layer-color: var(--md-checkbox-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-opacity: var(--md-checkbox-pressed-state-layer-opacity, 0.12);--_container-shape-start-start: var( --md-checkbox-container-shape-start-start, var(--_container-shape) );--_container-shape-start-end: var( --md-checkbox-container-shape-start-end, var(--_container-shape) );--_container-shape-end-end: var( --md-checkbox-container-shape-end-end, var(--_container-shape) );--_container-shape-end-start: var( --md-checkbox-container-shape-end-start, var(--_container-shape) );border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-end-radius:var(--_container-shape-end-end);border-end-start-radius:var(--_container-shape-end-start);display:inline-flex;height:var(--_container-size);position:relative;vertical-align:top;width:var(--_container-size);-webkit-tap-highlight-color:rgba(0,0,0,0)}:host([touch-target=wrapper]){margin:max(0px,(48px - var(--_container-size))/2)}md-focus-ring{height:44px;inset:unset;width:44px}input{appearance:none;height:48px;margin:0;opacity:0;outline:none;position:absolute;width:48px}:host([touch-target=none]) input{height:100%;width:100%}.container{border-radius:inherit;display:grid;height:100%;place-content:center;place-items:center;position:relative;width:100%}.outline,.background,.icon{inset:0;position:absolute}.outline,.background{border-radius:inherit}.outline{border-color:var(--_outline-color);border-style:solid;border-width:var(--_outline-width);box-sizing:border-box}.background{background-color:var(--_selected-container-color)}.background,.icon{opacity:0;transition-duration:150ms,50ms;transition-property:transform,opacity;transition-timing-function:cubic-bezier(0.3, 0, 0.8, 0.15),linear;transform:scale(0.6)}:where(.selected) :is(.background,.icon){opacity:1;transition-duration:350ms,50ms;transition-timing-function:cubic-bezier(0.05, 0.7, 0.1, 1),linear;transform:scale(1)}md-ripple{border-radius:var(--_state-layer-shape);height:var(--_state-layer-size);inset:unset;width:var(--_state-layer-size);--md-ripple-hover-color: var(--_hover-state-layer-color);--md-ripple-hover-opacity: var(--_hover-state-layer-opacity);--md-ripple-pressed-color: var(--_pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_pressed-state-layer-opacity)}.selected md-ripple{--md-ripple-hover-color: var(--_selected-hover-state-layer-color);--md-ripple-hover-opacity: var(--_selected-hover-state-layer-opacity);--md-ripple-pressed-color: var(--_selected-pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_selected-pressed-state-layer-opacity)}.icon{fill:var(--_selected-icon-color);height:var(--_icon-size);width:var(--_icon-size)}.mark.short{height:2px;transition-property:transform,height;width:2px}.mark.long{height:2px;transition-property:transform,width;width:10px}.mark{animation-duration:150ms;animation-timing-function:cubic-bezier(0.3, 0, 0.8, 0.15);transition-duration:150ms;transition-timing-function:cubic-bezier(0.3, 0, 0.8, 0.15)}.selected .mark{animation-duration:350ms;animation-timing-function:cubic-bezier(0.05, 0.7, 0.1, 1);transition-duration:350ms;transition-timing-function:cubic-bezier(0.05, 0.7, 0.1, 1)}.checked .mark,.prev-checked.unselected .mark{transform:scaleY(-1) translate(7px, -14px) rotate(45deg)}.checked .mark.short,.prev-checked.unselected .mark.short{height:5.6568542495px}.checked .mark.long,.prev-checked.unselected .mark.long{width:11.313708499px}.indeterminate .mark,.prev-indeterminate.unselected .mark{transform:scaleY(-1) translate(4px, -10px) rotate(0deg)}.prev-unselected .mark{transition-property:none}.prev-unselected.checked .mark.long{animation-name:prev-unselected-to-checked}@keyframes prev-unselected-to-checked{from{width:0}}:where(:hover) .outline{border-color:var(--_hover-outline-color);border-width:var(--_hover-outline-width)}:where(:hover) .background{background:var(--_selected-hover-container-color)}:where(:hover) .icon{fill:var(--_selected-hover-icon-color)}:where(:focus-within) .outline{border-color:var(--_focus-outline-color);border-width:var(--_focus-outline-width)}:where(:focus-within) .background{background:var(--_selected-focus-container-color)}:where(:focus-within) .icon{fill:var(--_selected-focus-icon-color)}:where(:active) .outline{border-color:var(--_pressed-outline-color);border-width:var(--_pressed-outline-width)}:where(:active) .background{background:var(--_selected-pressed-container-color)}:where(:active) .icon{fill:var(--_selected-pressed-icon-color)}:where(.disabled,.prev-disabled) :is(.background,.icon,.mark){animation-duration:0s;transition-duration:0s}:where(.disabled) .outline{border-color:var(--_disabled-outline-color);border-width:var(--_disabled-outline-width);opacity:var(--_disabled-container-opacity)}:where(.selected.disabled) .outline{visibility:hidden}:where(.selected.disabled) .background{background:var(--_selected-disabled-container-color);opacity:var(--_selected-disabled-container-opacity)}:where(.disabled) .icon{fill:var(--_selected-disabled-icon-color)}@media(forced-colors: active){.background{background-color:CanvasText}.selected.disabled .background{background-color:GrayText;opacity:1}.outline{border-color:CanvasText}.disabled .outline{border-color:GrayText;opacity:1}.icon{fill:Canvas}}/*# sourceMappingURL=checkbox-styles.css.map */\n`;\n "]}
1
+ {"version":3,"file":"checkbox-styles.css.js","sourceRoot":"","sources":["checkbox-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n import {css} from 'lit';\n export const styles = css`:host{--_container-shape: var(--md-checkbox-container-shape, 2px);--_container-size: var(--md-checkbox-container-size, 18px);--_icon-size: var(--md-checkbox-icon-size, 18px);--_selected-container-color: var(--md-checkbox-selected-container-color, var(--md-sys-color-primary, #6750a4));--_selected-disabled-container-color: var(--md-checkbox-selected-disabled-container-color, var(--md-sys-color-on-surface, #1d1b20));--_selected-disabled-container-opacity: var(--md-checkbox-selected-disabled-container-opacity, 0.38);--_selected-disabled-icon-color: var(--md-checkbox-selected-disabled-icon-color, var(--md-sys-color-surface, #fef7ff));--_selected-focus-container-color: var(--md-checkbox-selected-focus-container-color, var(--md-sys-color-primary, #6750a4));--_selected-focus-icon-color: var(--md-checkbox-selected-focus-icon-color, var(--md-sys-color-on-primary, #fff));--_selected-hover-container-color: var(--md-checkbox-selected-hover-container-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-icon-color: var(--md-checkbox-selected-hover-icon-color, var(--md-sys-color-on-primary, #fff));--_selected-hover-state-layer-color: var(--md-checkbox-selected-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-state-layer-opacity: var(--md-checkbox-selected-hover-state-layer-opacity, 0.08);--_selected-icon-color: var(--md-checkbox-selected-icon-color, var(--md-sys-color-on-primary, #fff));--_selected-pressed-container-color: var(--md-checkbox-selected-pressed-container-color, var(--md-sys-color-primary, #6750a4));--_selected-pressed-icon-color: var(--md-checkbox-selected-pressed-icon-color, var(--md-sys-color-on-primary, #fff));--_selected-pressed-state-layer-color: var(--md-checkbox-selected-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_selected-pressed-state-layer-opacity: var(--md-checkbox-selected-pressed-state-layer-opacity, 0.12);--_state-layer-shape: var(--md-checkbox-state-layer-shape, 9999px);--_state-layer-size: var(--md-checkbox-state-layer-size, 40px);--_disabled-container-opacity: var(--md-checkbox-disabled-container-opacity, 0.38);--_disabled-outline-color: var(--md-checkbox-disabled-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-outline-width: var(--md-checkbox-disabled-outline-width, 2px);--_focus-outline-color: var(--md-checkbox-focus-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_focus-outline-width: var(--md-checkbox-focus-outline-width, 2px);--_hover-outline-color: var(--md-checkbox-hover-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-outline-width: var(--md-checkbox-hover-outline-width, 2px);--_hover-state-layer-color: var(--md-checkbox-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-state-layer-opacity: var(--md-checkbox-hover-state-layer-opacity, 0.08);--_outline-color: var(--md-checkbox-outline-color, var(--md-sys-color-on-surface-variant, #49454f));--_outline-width: var(--md-checkbox-outline-width, 2px);--_pressed-outline-color: var(--md-checkbox-pressed-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_pressed-outline-width: var(--md-checkbox-pressed-outline-width, 2px);--_pressed-state-layer-color: var(--md-checkbox-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-opacity: var(--md-checkbox-pressed-state-layer-opacity, 0.12);--_container-shape-start-start: var( --md-checkbox-container-shape-start-start, var(--_container-shape) );--_container-shape-start-end: var( --md-checkbox-container-shape-start-end, var(--_container-shape) );--_container-shape-end-end: var( --md-checkbox-container-shape-end-end, var(--_container-shape) );--_container-shape-end-start: var( --md-checkbox-container-shape-end-start, var(--_container-shape) );border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-end-radius:var(--_container-shape-end-end);border-end-start-radius:var(--_container-shape-end-start);display:inline-flex;height:var(--_container-size);position:relative;vertical-align:top;width:var(--_container-size);-webkit-tap-highlight-color:rgba(0,0,0,0)}:host([touch-target=wrapper]){margin:max(0px,(48px - var(--_container-size))/2)}md-focus-ring{height:44px;inset:unset;width:44px}input{appearance:none;height:48px;margin:0;opacity:0;outline:none;position:absolute;width:48px;z-index:1}:host([touch-target=none]) input{height:100%;width:100%}.container{border-radius:inherit;display:flex;height:100%;place-content:center;place-items:center;position:relative;width:100%}.outline,.background,.icon{inset:0;position:absolute}.outline,.background{border-radius:inherit}.outline{border-color:var(--_outline-color);border-style:solid;border-width:var(--_outline-width);box-sizing:border-box}.background{background-color:var(--_selected-container-color)}.background,.icon{opacity:0;transition-duration:150ms,50ms;transition-property:transform,opacity;transition-timing-function:cubic-bezier(0.3, 0, 0.8, 0.15),linear;transform:scale(0.6)}:where(.selected) :is(.background,.icon){opacity:1;transition-duration:350ms,50ms;transition-timing-function:cubic-bezier(0.05, 0.7, 0.1, 1),linear;transform:scale(1)}md-ripple{border-radius:var(--_state-layer-shape);height:var(--_state-layer-size);inset:unset;width:var(--_state-layer-size);--md-ripple-hover-color: var(--_hover-state-layer-color);--md-ripple-hover-opacity: var(--_hover-state-layer-opacity);--md-ripple-pressed-color: var(--_pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_pressed-state-layer-opacity)}.selected md-ripple{--md-ripple-hover-color: var(--_selected-hover-state-layer-color);--md-ripple-hover-opacity: var(--_selected-hover-state-layer-opacity);--md-ripple-pressed-color: var(--_selected-pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_selected-pressed-state-layer-opacity)}.icon{fill:var(--_selected-icon-color);height:var(--_icon-size);width:var(--_icon-size)}.mark.short{height:2px;transition-property:transform,height;width:2px}.mark.long{height:2px;transition-property:transform,width;width:10px}.mark{animation-duration:150ms;animation-timing-function:cubic-bezier(0.3, 0, 0.8, 0.15);transition-duration:150ms;transition-timing-function:cubic-bezier(0.3, 0, 0.8, 0.15)}.selected .mark{animation-duration:350ms;animation-timing-function:cubic-bezier(0.05, 0.7, 0.1, 1);transition-duration:350ms;transition-timing-function:cubic-bezier(0.05, 0.7, 0.1, 1)}.checked .mark,.prev-checked.unselected .mark{transform:scaleY(-1) translate(7px, -14px) rotate(45deg)}.checked .mark.short,.prev-checked.unselected .mark.short{height:5.6568542495px}.checked .mark.long,.prev-checked.unselected .mark.long{width:11.313708499px}.indeterminate .mark,.prev-indeterminate.unselected .mark{transform:scaleY(-1) translate(4px, -10px) rotate(0deg)}.prev-unselected .mark{transition-property:none}.prev-unselected.checked .mark.long{animation-name:prev-unselected-to-checked}@keyframes prev-unselected-to-checked{from{width:0}}:where(:hover) .outline{border-color:var(--_hover-outline-color);border-width:var(--_hover-outline-width)}:where(:hover) .background{background:var(--_selected-hover-container-color)}:where(:hover) .icon{fill:var(--_selected-hover-icon-color)}:where(:focus-within) .outline{border-color:var(--_focus-outline-color);border-width:var(--_focus-outline-width)}:where(:focus-within) .background{background:var(--_selected-focus-container-color)}:where(:focus-within) .icon{fill:var(--_selected-focus-icon-color)}:where(:active) .outline{border-color:var(--_pressed-outline-color);border-width:var(--_pressed-outline-width)}:where(:active) .background{background:var(--_selected-pressed-container-color)}:where(:active) .icon{fill:var(--_selected-pressed-icon-color)}:where(.disabled,.prev-disabled) :is(.background,.icon,.mark){animation-duration:0s;transition-duration:0s}:where(.disabled) .outline{border-color:var(--_disabled-outline-color);border-width:var(--_disabled-outline-width);opacity:var(--_disabled-container-opacity)}:where(.selected.disabled) .outline{visibility:hidden}:where(.selected.disabled) .background{background:var(--_selected-disabled-container-color);opacity:var(--_selected-disabled-container-opacity)}:where(.disabled) .icon{fill:var(--_selected-disabled-icon-color)}@media(forced-colors: active){.background{background-color:CanvasText}.selected.disabled .background{background-color:GrayText;opacity:1}.outline{border-color:CanvasText}.disabled .outline{border-color:GrayText;opacity:1}.icon{fill:Canvas}}/*# sourceMappingURL=checkbox-styles.css.map */\n`;\n "]}
package/checkbox/internal/checkbox.d.ts CHANGED
@@ -17,7 +17,7 @@ export declare class Checkbox extends LitElement {
17
17
  slotAssignment?: SlotAssignmentMode;
18
18
  };
19
19
  /** @nocollapse */
20
- static formAssociated: boolean;
20
+ static readonly formAssociated = true;
21
21
  /**
22
22
  * Whether or not the checkbox is selected.
23
23
  */
@@ -85,7 +85,6 @@ export declare class Checkbox extends LitElement {
85
85
  private prevDisabled;
86
86
  private prevIndeterminate;
87
87
  private readonly input;
88
- private readonly outline;
89
88
  private readonly internals;
90
89
  constructor();
91
90
  /**
@@ -127,6 +126,7 @@ export declare class Checkbox extends LitElement {
127
126
  setCustomValidity(error: string): void;
128
127
  protected update(changed: PropertyValues<this>): void;
129
128
  protected render(): import("lit-html").TemplateResult<1>;
129
+ protected updated(): void;
130
130
  private handleChange;
131
131
  private syncValidity;
132
132
  private getInput;
package/checkbox/internal/checkbox.js CHANGED
@@ -154,7 +154,7 @@ export class Checkbox extends LitElement {
154
154
  * @param error The error message to display.
155
155
  */
156
156
  setCustomValidity(error) {
157
- this.internals.setValidity({ customError: !!error }, error);
157
+ this.internals.setValidity({ customError: !!error }, error, this.getInput());
158
158
  }
159
159
  update(changed) {
160
160
  if (changed.has('checked') || changed.has('disabled') ||
@@ -188,17 +188,10 @@ export class Checkbox extends LitElement {
188
188
  });
189
189
  // Needed for closure conformance
190
190
  const { ariaLabel, ariaInvalid } = this;
191
+ // Note: <input> needs to be rendered before the <svg> for
192
+ // form.reportValidity() to work in Chrome.
191
193
  return html `
192
194
  <div class="container ${containerClasses}">
193
- <div class="outline"></div>
194
- <div class="background"></div>
195
- <md-focus-ring part="focus-ring" for="input"></md-focus-ring>
196
- <md-ripple for="input" ?disabled=${this.disabled}></md-ripple>
197
- <svg class="icon" viewBox="0 0 18 18" aria-hidden="true">
198
- <rect class="mark short" />
199
- <rect class="mark long" />
200
- </svg>
201
-
202
195
  <input type="checkbox"
203
196
  id="input"
204
197
  aria-checked=${isIndeterminate ? 'mixed' : nothing}
@@ -210,9 +203,23 @@ export class Checkbox extends LitElement {
210
203
  .checked=${this.checked}
211
204
  @change=${this.handleChange}
212
205
  >
206
+
207
+ <div class="outline"></div>
208
+ <div class="background"></div>
209
+ <md-focus-ring part="focus-ring" for="input"></md-focus-ring>
210
+ <md-ripple for="input" ?disabled=${this.disabled}></md-ripple>
211
+ <svg class="icon" viewBox="0 0 18 18" aria-hidden="true">
212
+ <rect class="mark short" />
213
+ <rect class="mark long" />
214
+ </svg>
213
215
  </div>
214
216
  `;
215
217
  }
218
+ updated() {
219
+ // Sync validity when properties change, since validation properties may
220
+ // have changed.
221
+ this.syncValidity();
222
+ }
216
223
  handleChange(event) {
217
224
  const target = event.target;
218
225
  this.checked = target.checked;
@@ -229,7 +236,7 @@ export class Checkbox extends LitElement {
229
236
  else {
230
237
  input.setCustomValidity('');
231
238
  }
232
- this.internals.setValidity(input.validity, input.validationMessage, this.outline);
239
+ this.internals.setValidity(input.validity, input.validationMessage, this.getInput());
233
240
  }
234
241
  getInput() {
235
242
  if (!this.input) {
@@ -293,7 +300,4 @@ __decorate([
293
300
  __decorate([
294
301
  query('input')
295
302
  ], Checkbox.prototype, "input", void 0);
296
- __decorate([
297
- query('.outline')
298
- ], Checkbox.prototype, "outline", void 0);
299
303
  //# sourceMappingURL=checkbox.js.map
package/checkbox/internal/checkbox.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"checkbox.js","sourceRoot":"","sources":["checkbox.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2019 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../focus/md-focus-ring.js';\nimport '../../ripple/ripple.js';\n\nimport {html, isServer, LitElement, nothing, PropertyValues} from 'lit';\nimport {property, query, state} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\n\nimport {ARIAMixinStrict} from '../../internal/aria/aria.js';\nimport {requestUpdateOnAriaChange} from '../../internal/aria/delegate.js';\nimport {dispatchActivationClick, isActivationClick, redispatchEvent} from '../../internal/controller/events.js';\n\n/**\n * A checkbox component.\n */\nexport class Checkbox extends LitElement {\n static {\n requestUpdateOnAriaChange(Checkbox);\n }\n\n /** @nocollapse */\n static override shadowRootOptions = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true\n };\n\n /** @nocollapse */\n static formAssociated = true;\n\n /**\n * Whether or not the checkbox is selected.\n */\n @property({type: Boolean}) checked = false;\n\n /**\n * Whether or not the checkbox is disabled.\n */\n @property({type: Boolean, reflect: true}) disabled = false;\n\n /**\n * Whether or not the checkbox is indeterminate.\n *\n * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes\n */\n @property({type: Boolean}) indeterminate = false;\n\n /**\n * When true, require the checkbox to be selected when participating in\n * form submission.\n *\n * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#validation\n */\n @property({type: Boolean}) required = false;\n\n /**\n * The value of the checkbox that is submitted with a form when selected.\n *\n * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#value\n */\n @property() value = 'on';\n\n /**\n * The HTML name to use in form submission.\n */\n get name() {\n return this.getAttribute('name') ?? '';\n }\n set name(name: string) {\n this.setAttribute('name', name);\n }\n\n /**\n * The associated form element with which this element's value will submit.\n */\n get form() {\n return this.internals.form;\n }\n\n /**\n * The labels this element is associated with.\n */\n get labels() {\n return this.internals.labels;\n }\n\n /**\n * Returns a ValidityState object that represents the validity states of the\n * checkbox.\n *\n * Note that checkboxes will only set `valueMissing` if `required` and not\n * checked.\n *\n * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#validation\n */\n get validity() {\n this.syncValidity();\n return this.internals.validity;\n }\n\n /**\n * Returns the native validation error message.\n *\n * https://developer.mozilla.org/en-US/docs/Web/HTML/Constraint_validation#constraint_validation_process\n */\n get validationMessage() {\n this.syncValidity();\n return this.internals.validationMessage;\n }\n\n /**\n * Returns whether an element will successfully validate based on forms\n * validation rules and constraints.\n *\n * https://developer.mozilla.org/en-US/docs/Web/HTML/Constraint_validation#constraint_validation_process\n */\n get willValidate() {\n this.syncValidity();\n return this.internals.willValidate;\n }\n\n @state() private prevChecked = false;\n @state() private prevDisabled = false;\n @state() private prevIndeterminate = false;\n @query('input') private readonly input!: HTMLInputElement|null;\n @query('.outline') private readonly outline!: HTMLElement|null;\n private readonly internals =\n (this as HTMLElement /* needed for closure */).attachInternals();\n\n constructor() {\n super();\n if (!isServer) {\n this.addEventListener('click', (event: MouseEvent) => {\n if (!isActivationClick(event)) {\n return;\n }\n this.focus();\n dispatchActivationClick(this.input!);\n });\n }\n }\n\n /**\n * Checks the checkbox's native validation and returns whether or not the\n * element is valid.\n *\n * If invalid, this method will dispatch the `invalid` event.\n *\n * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/checkValidity\n *\n * @return true if the checkbox is valid, or false if not.\n */\n checkValidity() {\n this.syncValidity();\n return this.internals.checkValidity();\n }\n\n /**\n * Checks the checkbox's native validation and returns whether or not the\n * element is valid.\n *\n * If invalid, this method will dispatch the `invalid` event.\n *\n * The `validationMessage` is reported to the user by the browser. Use\n * `setCustomValidity()` to customize the `validationMessage`.\n *\n * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/reportValidity\n *\n * @return true if the checkbox is valid, or false if not.\n */\n reportValidity() {\n this.syncValidity();\n return this.internals.reportValidity();\n }\n\n /**\n * Sets the checkbox's native validation error message. This is used to\n * customize `validationMessage`.\n *\n * When the error is not an empty string, the checkbox is considered invalid\n * and `validity.customError` will be true.\n *\n * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setCustomValidity\n *\n * @param error The error message to display.\n */\n setCustomValidity(error: string) {\n this.internals.setValidity({customError: !!error}, error);\n }\n\n protected override update(changed: PropertyValues<this>) {\n if (changed.has('checked') || changed.has('disabled') ||\n changed.has('indeterminate')) {\n this.prevChecked = changed.get('checked') ?? this.checked;\n this.prevDisabled = changed.get('disabled') ?? this.disabled;\n this.prevIndeterminate =\n changed.get('indeterminate') ?? this.indeterminate;\n }\n\n const shouldAddFormValue = this.checked && !this.indeterminate;\n const state = String(this.checked);\n this.internals.setFormValue(shouldAddFormValue ? this.value : null, state);\n super.update(changed);\n }\n\n protected override render() {\n const prevNone = !this.prevChecked && !this.prevIndeterminate;\n const prevChecked = this.prevChecked && !this.prevIndeterminate;\n const prevIndeterminate = this.prevIndeterminate;\n const isChecked = this.checked && !this.indeterminate;\n const isIndeterminate = this.indeterminate;\n\n const containerClasses = classMap({\n 'disabled': this.disabled,\n 'selected': isChecked || isIndeterminate,\n 'unselected': !isChecked && !isIndeterminate,\n 'checked': isChecked,\n 'indeterminate': isIndeterminate,\n 'prev-unselected': prevNone,\n 'prev-checked': prevChecked,\n 'prev-indeterminate': prevIndeterminate,\n 'prev-disabled': this.prevDisabled,\n });\n\n // Needed for closure conformance\n const {ariaLabel, ariaInvalid} = this as ARIAMixinStrict;\n return html`\n <div class=\"container ${containerClasses}\">\n <div class=\"outline\"></div>\n <div class=\"background\"></div>\n <md-focus-ring part=\"focus-ring\" for=\"input\"></md-focus-ring>\n <md-ripple for=\"input\" ?disabled=${this.disabled}></md-ripple>\n <svg class=\"icon\" viewBox=\"0 0 18 18\" aria-hidden=\"true\">\n <rect class=\"mark short\" />\n <rect class=\"mark long\" />\n </svg>\n\n <input type=\"checkbox\"\n id=\"input\"\n aria-checked=${isIndeterminate ? 'mixed' : nothing}\n aria-label=${ariaLabel || nothing}\n aria-invalid=${ariaInvalid || nothing}\n ?disabled=${this.disabled}\n ?required=${this.required}\n .indeterminate=${this.indeterminate}\n .checked=${this.checked}\n @change=${this.handleChange}\n >\n </div>\n `;\n }\n\n private handleChange(event: Event) {\n const target = event.target as HTMLInputElement;\n this.checked = target.checked;\n this.indeterminate = target.indeterminate;\n\n redispatchEvent(this, event);\n }\n\n private syncValidity() {\n // Sync the internal <input>'s validity and the host's ElementInternals\n // validity. We do this to re-use native `<input>` validation messages.\n const input = this.getInput();\n if (this.internals.validity.customError) {\n input.setCustomValidity(this.internals.validationMessage);\n } else {\n input.setCustomValidity('');\n }\n\n this.internals.setValidity(\n input.validity, input.validationMessage, this.outline!);\n }\n\n private getInput() {\n if (!this.input) {\n // If the input is not yet defined, synchronously render.\n this.connectedCallback();\n this.performUpdate();\n }\n\n if (this.isUpdatePending) {\n // If there are pending updates, synchronously perform them. This ensures\n // that constraint validation properties (like `required`) are synced\n // before interacting with input APIs that depend on them.\n this.scheduleUpdate();\n }\n\n return this.input!;\n }\n\n /** @private */\n formResetCallback() {\n // The checked property does not reflect, so the original attribute set by\n // the user is used to determine the default value.\n this.checked = this.hasAttribute('checked');\n }\n\n /** @private */\n formStateRestoreCallback(state: string) {\n this.checked = state === 'true';\n }\n}\n"]}
1
+ {"version":3,"file":"checkbox.js","sourceRoot":"","sources":["checkbox.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2019 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../focus/md-focus-ring.js';\nimport '../../ripple/ripple.js';\n\nimport {html, isServer, LitElement, nothing, PropertyValues} from 'lit';\nimport {property, query, state} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\n\nimport {ARIAMixinStrict} from '../../internal/aria/aria.js';\nimport {requestUpdateOnAriaChange} from '../../internal/aria/delegate.js';\nimport {dispatchActivationClick, isActivationClick, redispatchEvent} from '../../internal/controller/events.js';\n\n/**\n * A checkbox component.\n */\nexport class Checkbox extends LitElement {\n static {\n requestUpdateOnAriaChange(Checkbox);\n }\n\n /** @nocollapse */\n static override shadowRootOptions = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true\n };\n\n /** @nocollapse */\n static readonly formAssociated = true;\n\n /**\n * Whether or not the checkbox is selected.\n */\n @property({type: Boolean}) checked = false;\n\n /**\n * Whether or not the checkbox is disabled.\n */\n @property({type: Boolean, reflect: true}) disabled = false;\n\n /**\n * Whether or not the checkbox is indeterminate.\n *\n * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes\n */\n @property({type: Boolean}) indeterminate = false;\n\n /**\n * When true, require the checkbox to be selected when participating in\n * form submission.\n *\n * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#validation\n */\n @property({type: Boolean}) required = false;\n\n /**\n * The value of the checkbox that is submitted with a form when selected.\n *\n * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#value\n */\n @property() value = 'on';\n\n /**\n * The HTML name to use in form submission.\n */\n get name() {\n return this.getAttribute('name') ?? '';\n }\n set name(name: string) {\n this.setAttribute('name', name);\n }\n\n /**\n * The associated form element with which this element's value will submit.\n */\n get form() {\n return this.internals.form;\n }\n\n /**\n * The labels this element is associated with.\n */\n get labels() {\n return this.internals.labels;\n }\n\n /**\n * Returns a ValidityState object that represents the validity states of the\n * checkbox.\n *\n * Note that checkboxes will only set `valueMissing` if `required` and not\n * checked.\n *\n * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#validation\n */\n get validity() {\n this.syncValidity();\n return this.internals.validity;\n }\n\n /**\n * Returns the native validation error message.\n *\n * https://developer.mozilla.org/en-US/docs/Web/HTML/Constraint_validation#constraint_validation_process\n */\n get validationMessage() {\n this.syncValidity();\n return this.internals.validationMessage;\n }\n\n /**\n * Returns whether an element will successfully validate based on forms\n * validation rules and constraints.\n *\n * https://developer.mozilla.org/en-US/docs/Web/HTML/Constraint_validation#constraint_validation_process\n */\n get willValidate() {\n this.syncValidity();\n return this.internals.willValidate;\n }\n\n @state() private prevChecked = false;\n @state() private prevDisabled = false;\n @state() private prevIndeterminate = false;\n @query('input') private readonly input!: HTMLInputElement|null;\n private readonly internals =\n (this as HTMLElement /* needed for closure */).attachInternals();\n\n constructor() {\n super();\n if (!isServer) {\n this.addEventListener('click', (event: MouseEvent) => {\n if (!isActivationClick(event)) {\n return;\n }\n this.focus();\n dispatchActivationClick(this.input!);\n });\n }\n }\n\n /**\n * Checks the checkbox's native validation and returns whether or not the\n * element is valid.\n *\n * If invalid, this method will dispatch the `invalid` event.\n *\n * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/checkValidity\n *\n * @return true if the checkbox is valid, or false if not.\n */\n checkValidity() {\n this.syncValidity();\n return this.internals.checkValidity();\n }\n\n /**\n * Checks the checkbox's native validation and returns whether or not the\n * element is valid.\n *\n * If invalid, this method will dispatch the `invalid` event.\n *\n * The `validationMessage` is reported to the user by the browser. Use\n * `setCustomValidity()` to customize the `validationMessage`.\n *\n * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/reportValidity\n *\n * @return true if the checkbox is valid, or false if not.\n */\n reportValidity() {\n this.syncValidity();\n return this.internals.reportValidity();\n }\n\n /**\n * Sets the checkbox's native validation error message. This is used to\n * customize `validationMessage`.\n *\n * When the error is not an empty string, the checkbox is considered invalid\n * and `validity.customError` will be true.\n *\n * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setCustomValidity\n *\n * @param error The error message to display.\n */\n setCustomValidity(error: string) {\n this.internals.setValidity({customError: !!error}, error, this.getInput());\n }\n\n protected override update(changed: PropertyValues<this>) {\n if (changed.has('checked') || changed.has('disabled') ||\n changed.has('indeterminate')) {\n this.prevChecked = changed.get('checked') ?? this.checked;\n this.prevDisabled = changed.get('disabled') ?? this.disabled;\n this.prevIndeterminate =\n changed.get('indeterminate') ?? this.indeterminate;\n }\n\n const shouldAddFormValue = this.checked && !this.indeterminate;\n const state = String(this.checked);\n this.internals.setFormValue(shouldAddFormValue ? this.value : null, state);\n super.update(changed);\n }\n\n protected override render() {\n const prevNone = !this.prevChecked && !this.prevIndeterminate;\n const prevChecked = this.prevChecked && !this.prevIndeterminate;\n const prevIndeterminate = this.prevIndeterminate;\n const isChecked = this.checked && !this.indeterminate;\n const isIndeterminate = this.indeterminate;\n\n const containerClasses = classMap({\n 'disabled': this.disabled,\n 'selected': isChecked || isIndeterminate,\n 'unselected': !isChecked && !isIndeterminate,\n 'checked': isChecked,\n 'indeterminate': isIndeterminate,\n 'prev-unselected': prevNone,\n 'prev-checked': prevChecked,\n 'prev-indeterminate': prevIndeterminate,\n 'prev-disabled': this.prevDisabled,\n });\n\n // Needed for closure conformance\n const {ariaLabel, ariaInvalid} = this as ARIAMixinStrict;\n // Note: <input> needs to be rendered before the <svg> for\n // form.reportValidity() to work in Chrome.\n return html`\n <div class=\"container ${containerClasses}\">\n <input type=\"checkbox\"\n id=\"input\"\n aria-checked=${isIndeterminate ? 'mixed' : nothing}\n aria-label=${ariaLabel || nothing}\n aria-invalid=${ariaInvalid || nothing}\n ?disabled=${this.disabled}\n ?required=${this.required}\n .indeterminate=${this.indeterminate}\n .checked=${this.checked}\n @change=${this.handleChange}\n >\n\n <div class=\"outline\"></div>\n <div class=\"background\"></div>\n <md-focus-ring part=\"focus-ring\" for=\"input\"></md-focus-ring>\n <md-ripple for=\"input\" ?disabled=${this.disabled}></md-ripple>\n <svg class=\"icon\" viewBox=\"0 0 18 18\" aria-hidden=\"true\">\n <rect class=\"mark short\" />\n <rect class=\"mark long\" />\n </svg>\n </div>\n `;\n }\n\n protected override updated() {\n // Sync validity when properties change, since validation properties may\n // have changed.\n this.syncValidity();\n }\n\n private handleChange(event: Event) {\n const target = event.target as HTMLInputElement;\n this.checked = target.checked;\n this.indeterminate = target.indeterminate;\n\n redispatchEvent(this, event);\n }\n\n private syncValidity() {\n // Sync the internal <input>'s validity and the host's ElementInternals\n // validity. We do this to re-use native `<input>` validation messages.\n const input = this.getInput();\n if (this.internals.validity.customError) {\n input.setCustomValidity(this.internals.validationMessage);\n } else {\n input.setCustomValidity('');\n }\n\n this.internals.setValidity(\n input.validity, input.validationMessage, this.getInput());\n }\n\n private getInput() {\n if (!this.input) {\n // If the input is not yet defined, synchronously render.\n this.connectedCallback();\n this.performUpdate();\n }\n\n if (this.isUpdatePending) {\n // If there are pending updates, synchronously perform them. This ensures\n // that constraint validation properties (like `required`) are synced\n // before interacting with input APIs that depend on them.\n this.scheduleUpdate();\n }\n\n return this.input!;\n }\n\n /** @private */\n formResetCallback() {\n // The checked property does not reflect, so the original attribute set by\n // the user is used to determine the default value.\n this.checked = this.hasAttribute('checked');\n }\n\n /** @private */\n formStateRestoreCallback(state: string) {\n this.checked = state === 'true';\n }\n}\n"]}
package/chips/assist-chip.js CHANGED
@@ -6,7 +6,6 @@
6
6
  import { __decorate } from "tslib";
7
7
  import { customElement } from 'lit/decorators.js';
8
8
  import { AssistChip } from './internal/assist-chip.js';
9
- import { styles as forcedColorsStyles } from './internal/assist-forced-colors-styles.css.js';
10
9
  import { styles } from './internal/assist-styles.css.js';
11
10
  import { styles as elevatedStyles } from './internal/elevated-styles.css.js';
12
11
  import { styles as sharedStyles } from './internal/shared-styles.css.js';
@@ -18,7 +17,7 @@ import { styles as sharedStyles } from './internal/shared-styles.css.js';
18
17
  */
19
18
  let MdAssistChip = class MdAssistChip extends AssistChip {
20
19
  };
21
- MdAssistChip.styles = [sharedStyles, elevatedStyles, styles, forcedColorsStyles];
20
+ MdAssistChip.styles = [sharedStyles, elevatedStyles, styles];
22
21
  MdAssistChip = __decorate([
23
22
  customElement('md-assist-chip')
24
23
  ], MdAssistChip);
package/chips/assist-chip.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"assist-chip.js","sourceRoot":"","sources":["assist-chip.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,UAAU,EAAC,MAAM,2BAA2B,CAAC;AACrD,OAAO,EAAC,MAAM,IAAI,kBAAkB,EAAC,MAAM,+CAA+C,CAAC;AAC3F,OAAO,EAAC,MAAM,EAAC,MAAM,iCAAiC,CAAC;AACvD,OAAO,EAAC,MAAM,IAAI,cAAc,EAAC,MAAM,mCAAmC,CAAC;AAC3E,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,iCAAiC,CAAC;AAQvE;;;;;GAKG;AAEI,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,UAAU;;AAC1B,mBAAM,GAClB,CAAC,YAAY,EAAE,cAAc,EAAE,MAAM,EAAE,kBAAkB,CAAC,CAAC;AAFpD,YAAY;IADxB,aAAa,CAAC,gBAAgB,CAAC;GACnB,YAAY,CAGxB;SAHY,YAAY","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {AssistChip} from './internal/assist-chip.js';\nimport {styles as forcedColorsStyles} from './internal/assist-forced-colors-styles.css.js';\nimport {styles} from './internal/assist-styles.css.js';\nimport {styles as elevatedStyles} from './internal/elevated-styles.css.js';\nimport {styles as sharedStyles} from './internal/shared-styles.css.js';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'md-assist-chip': MdAssistChip;\n }\n}\n\n/**\n * TODO(b/243982145): add docs\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-assist-chip')\nexport class MdAssistChip extends AssistChip {\n static override styles =\n [sharedStyles, elevatedStyles, styles, forcedColorsStyles];\n}\n"]}
1
+ {"version":3,"file":"assist-chip.js","sourceRoot":"","sources":["assist-chip.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,UAAU,EAAC,MAAM,2BAA2B,CAAC;AACrD,OAAO,EAAC,MAAM,EAAC,MAAM,iCAAiC,CAAC;AACvD,OAAO,EAAC,MAAM,IAAI,cAAc,EAAC,MAAM,mCAAmC,CAAC;AAC3E,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,iCAAiC,CAAC;AAQvE;;;;;GAKG;AAEI,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,UAAU;;AAC1B,mBAAM,GAAG,CAAC,YAAY,EAAE,cAAc,EAAE,MAAM,CAAC,CAAC;AADrD,YAAY;IADxB,aAAa,CAAC,gBAAgB,CAAC;GACnB,YAAY,CAExB;SAFY,YAAY","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {AssistChip} from './internal/assist-chip.js';\nimport {styles} from './internal/assist-styles.css.js';\nimport {styles as elevatedStyles} from './internal/elevated-styles.css.js';\nimport {styles as sharedStyles} from './internal/shared-styles.css.js';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'md-assist-chip': MdAssistChip;\n }\n}\n\n/**\n * TODO(b/243982145): add docs\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-assist-chip')\nexport class MdAssistChip extends AssistChip {\n static override styles = [sharedStyles, elevatedStyles, styles];\n}\n"]}
package/chips/filter-chip.js CHANGED
@@ -7,7 +7,6 @@ import { __decorate } from "tslib";
7
7
  import { customElement } from 'lit/decorators.js';
8
8
  import { styles as elevatedStyles } from './internal/elevated-styles.css.js';
9
9
  import { FilterChip } from './internal/filter-chip.js';
10
- import { styles as forcedColorsStyles } from './internal/filter-forced-colors-styles.css.js';
11
10
  import { styles } from './internal/filter-styles.css.js';
12
11
  import { styles as selectableStyles } from './internal/selectable-styles.css.js';
13
12
  import { styles as sharedStyles } from './internal/shared-styles.css.js';
@@ -21,8 +20,7 @@ import { styles as trailingIconStyles } from './internal/trailing-icon-styles.cs
21
20
  let MdFilterChip = class MdFilterChip extends FilterChip {
22
21
  };
23
22
  MdFilterChip.styles = [
24
- sharedStyles, elevatedStyles, trailingIconStyles, selectableStyles, styles,
25
- forcedColorsStyles
23
+ sharedStyles, elevatedStyles, trailingIconStyles, selectableStyles, styles
26
24
  ];
27
25
  MdFilterChip = __decorate([
28
26
  customElement('md-filter-chip')
package/chips/filter-chip.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"filter-chip.js","sourceRoot":"","sources":["filter-chip.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,MAAM,IAAI,cAAc,EAAC,MAAM,mCAAmC,CAAC;AAC3E,OAAO,EAAC,UAAU,EAAC,MAAM,2BAA2B,CAAC;AACrD,OAAO,EAAC,MAAM,IAAI,kBAAkB,EAAC,MAAM,+CAA+C,CAAC;AAC3F,OAAO,EAAC,MAAM,EAAC,MAAM,iCAAiC,CAAC;AACvD,OAAO,EAAC,MAAM,IAAI,gBAAgB,EAAC,MAAM,qCAAqC,CAAC;AAC/E,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAC,MAAM,IAAI,kBAAkB,EAAC,MAAM,wCAAwC,CAAC;AAQpF;;;;;GAKG;AAEI,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,UAAU;;AAC1B,mBAAM,GAAG;IACvB,YAAY,EAAE,cAAc,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,MAAM;IAC1E,kBAAkB;CACnB,CAAC;AAJS,YAAY;IADxB,aAAa,CAAC,gBAAgB,CAAC;GACnB,YAAY,CAKxB;SALY,YAAY","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {styles as elevatedStyles} from './internal/elevated-styles.css.js';\nimport {FilterChip} from './internal/filter-chip.js';\nimport {styles as forcedColorsStyles} from './internal/filter-forced-colors-styles.css.js';\nimport {styles} from './internal/filter-styles.css.js';\nimport {styles as selectableStyles} from './internal/selectable-styles.css.js';\nimport {styles as sharedStyles} from './internal/shared-styles.css.js';\nimport {styles as trailingIconStyles} from './internal/trailing-icon-styles.css.js';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'md-filter-chip': MdFilterChip;\n }\n}\n\n/**\n * TODO(b/243982145): add docs\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-filter-chip')\nexport class MdFilterChip extends FilterChip {\n static override styles = [\n sharedStyles, elevatedStyles, trailingIconStyles, selectableStyles, styles,\n forcedColorsStyles\n ];\n}\n"]}
1
+ {"version":3,"file":"filter-chip.js","sourceRoot":"","sources":["filter-chip.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,MAAM,IAAI,cAAc,EAAC,MAAM,mCAAmC,CAAC;AAC3E,OAAO,EAAC,UAAU,EAAC,MAAM,2BAA2B,CAAC;AACrD,OAAO,EAAC,MAAM,EAAC,MAAM,iCAAiC,CAAC;AACvD,OAAO,EAAC,MAAM,IAAI,gBAAgB,EAAC,MAAM,qCAAqC,CAAC;AAC/E,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAC,MAAM,IAAI,kBAAkB,EAAC,MAAM,wCAAwC,CAAC;AAQpF;;;;;GAKG;AAEI,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,UAAU;;AAC1B,mBAAM,GAAG;IACvB,YAAY,EAAE,cAAc,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,MAAM;CAC3E,CAAC;AAHS,YAAY;IADxB,aAAa,CAAC,gBAAgB,CAAC;GACnB,YAAY,CAIxB;SAJY,YAAY","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {styles as elevatedStyles} from './internal/elevated-styles.css.js';\nimport {FilterChip} from './internal/filter-chip.js';\nimport {styles} from './internal/filter-styles.css.js';\nimport {styles as selectableStyles} from './internal/selectable-styles.css.js';\nimport {styles as sharedStyles} from './internal/shared-styles.css.js';\nimport {styles as trailingIconStyles} from './internal/trailing-icon-styles.css.js';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'md-filter-chip': MdFilterChip;\n }\n}\n\n/**\n * TODO(b/243982145): add docs\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-filter-chip')\nexport class MdFilterChip extends FilterChip {\n static override styles = [\n sharedStyles, elevatedStyles, trailingIconStyles, selectableStyles, styles\n ];\n}\n"]}
package/chips/input-chip.js CHANGED
@@ -6,7 +6,6 @@
6
6
  import { __decorate } from "tslib";
7
7
  import { customElement } from 'lit/decorators.js';
8
8
  import { InputChip } from './internal/input-chip.js';
9
- import { styles as forcedColorsStyles } from './internal/input-forced-colors-styles.css.js';
10
9
  import { styles } from './internal/input-styles.css.js';
11
10
  import { styles as selectableStyles } from './internal/selectable-styles.css.js';
12
11
  import { styles as sharedStyles } from './internal/shared-styles.css.js';
@@ -19,10 +18,7 @@ import { styles as trailingIconStyles } from './internal/trailing-icon-styles.cs
19
18
  */
20
19
  let MdInputChip = class MdInputChip extends InputChip {
21
20
  };
22
- MdInputChip.styles = [
23
- sharedStyles, trailingIconStyles, selectableStyles, styles,
24
- forcedColorsStyles
25
- ];
21
+ MdInputChip.styles = [sharedStyles, trailingIconStyles, selectableStyles, styles];
26
22
  MdInputChip = __decorate([
27
23
  customElement('md-input-chip')
28
24
  ], MdInputChip);
package/chips/input-chip.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"input-chip.js","sourceRoot":"","sources":["input-chip.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,SAAS,EAAC,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAC,MAAM,IAAI,kBAAkB,EAAC,MAAM,8CAA8C,CAAC;AAC1F,OAAO,EAAC,MAAM,EAAC,MAAM,gCAAgC,CAAC;AACtD,OAAO,EAAC,MAAM,IAAI,gBAAgB,EAAC,MAAM,qCAAqC,CAAC;AAC/E,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAC,MAAM,IAAI,kBAAkB,EAAC,MAAM,wCAAwC,CAAC;AAQpF;;;;;GAKG;AAEI,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,SAAS;;AACxB,kBAAM,GAAG;IACvB,YAAY,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,MAAM;IAC1D,kBAAkB;CACnB,CAAC;AAJS,WAAW;IADvB,aAAa,CAAC,eAAe,CAAC;GAClB,WAAW,CAKvB;SALY,WAAW","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {InputChip} from './internal/input-chip.js';\nimport {styles as forcedColorsStyles} from './internal/input-forced-colors-styles.css.js';\nimport {styles} from './internal/input-styles.css.js';\nimport {styles as selectableStyles} from './internal/selectable-styles.css.js';\nimport {styles as sharedStyles} from './internal/shared-styles.css.js';\nimport {styles as trailingIconStyles} from './internal/trailing-icon-styles.css.js';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'md-input-chip': MdInputChip;\n }\n}\n\n/**\n * TODO(b/243982145): add docs\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-input-chip')\nexport class MdInputChip extends InputChip {\n static override styles = [\n sharedStyles, trailingIconStyles, selectableStyles, styles,\n forcedColorsStyles\n ];\n}\n"]}
1
+ {"version":3,"file":"input-chip.js","sourceRoot":"","sources":["input-chip.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,SAAS,EAAC,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAC,MAAM,EAAC,MAAM,gCAAgC,CAAC;AACtD,OAAO,EAAC,MAAM,IAAI,gBAAgB,EAAC,MAAM,qCAAqC,CAAC;AAC/E,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAC,MAAM,IAAI,kBAAkB,EAAC,MAAM,wCAAwC,CAAC;AAQpF;;;;;GAKG;AAEI,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,SAAS;;AACxB,kBAAM,GAClB,CAAC,YAAY,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,MAAM,CAAC,CAAC;AAFtD,WAAW;IADvB,aAAa,CAAC,eAAe,CAAC;GAClB,WAAW,CAGvB;SAHY,WAAW","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {InputChip} from './internal/input-chip.js';\nimport {styles} from './internal/input-styles.css.js';\nimport {styles as selectableStyles} from './internal/selectable-styles.css.js';\nimport {styles as sharedStyles} from './internal/shared-styles.css.js';\nimport {styles as trailingIconStyles} from './internal/trailing-icon-styles.css.js';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'md-input-chip': MdInputChip;\n }\n}\n\n/**\n * TODO(b/243982145): add docs\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-input-chip')\nexport class MdInputChip extends InputChip {\n static override styles =\n [sharedStyles, trailingIconStyles, selectableStyles, styles];\n}\n"]}
package/chips/internal/_assist-chip.scss CHANGED
@@ -58,4 +58,10 @@
58
58
  var(--_container-shape)
59
59
  );
60
60
  }
61
+
62
+ @media (forced-colors: active) {
63
+ .link .outline {
64
+ border-color: ActiveText;
65
+ }
66
+ }
61
67
  }
package/chips/internal/_elevated.scss CHANGED
@@ -60,11 +60,7 @@
60
60
 
61
61
  @media (forced-colors: active) {
62
62
  .elevated md-elevation {
63
- border: 1px solid transparent;
64
- }
65
-
66
- .elevated.link md-elevation {
67
- border-color: ActiveText;
63
+ border: 1px solid CanvasText;
68
64
  }
69
65
 
70
66
  .elevated.disabled md-elevation {