@material/web 1.0.0-pre.1 → 1.0.0-pre.3

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 (683) hide show
  1. package/README.md +66 -19
  2. package/autocomplete/autocomplete-item.js.map +1 -1
  3. package/autocomplete/autocomplete-list.js.map +1 -1
  4. package/autocomplete/autocomplete-surface.js.map +1 -1
  5. package/autocomplete/filled-autocomplete.d.ts +0 -2
  6. package/autocomplete/filled-autocomplete.js +0 -7
  7. package/autocomplete/filled-autocomplete.js.map +1 -1
  8. package/autocomplete/lib/_filled-autocomplete.scss +23 -62
  9. package/autocomplete/lib/_outlined-autocomplete.scss +24 -63
  10. package/autocomplete/lib/_shared.scss +6 -10
  11. package/autocomplete/lib/autocomplete.d.ts +2 -6
  12. package/autocomplete/lib/autocomplete.js +9 -17
  13. package/autocomplete/lib/autocomplete.js.map +1 -1
  14. package/autocomplete/lib/autocompleteitem/autocomplete-item.d.ts +2 -2
  15. package/autocomplete/lib/autocompleteitem/autocomplete-item.js +2 -2
  16. package/autocomplete/lib/autocompleteitem/autocomplete-item.js.map +1 -1
  17. package/autocomplete/lib/autocompletelist/autocomplete-list-styles.scss +2 -0
  18. package/autocomplete/lib/autocompletelist/autocomplete-list.d.ts +1 -1
  19. package/autocomplete/lib/autocompletelist/autocomplete-list.js +2 -2
  20. package/autocomplete/lib/autocompletelist/autocomplete-list.js.map +1 -1
  21. package/autocomplete/lib/autocompletesurface/autocomplete-surface-styles.scss +2 -0
  22. package/autocomplete/lib/filled-styles.css.js +1 -1
  23. package/autocomplete/lib/filled-styles.css.js.map +1 -1
  24. package/autocomplete/lib/filled-styles.scss +2 -0
  25. package/autocomplete/lib/outlined-styles.css.js +1 -1
  26. package/autocomplete/lib/outlined-styles.css.js.map +1 -1
  27. package/autocomplete/lib/outlined-styles.scss +2 -0
  28. package/autocomplete/lib/shared-styles.scss +2 -0
  29. package/autocomplete/outlined-autocomplete.d.ts +0 -2
  30. package/autocomplete/outlined-autocomplete.js +0 -7
  31. package/autocomplete/outlined-autocomplete.js.map +1 -1
  32. package/badge/badge.js.map +1 -1
  33. package/badge/lib/_badge.scss +10 -13
  34. package/badge/lib/badge-styles.css.js +1 -1
  35. package/badge/lib/badge-styles.css.js.map +1 -1
  36. package/badge/lib/badge-styles.scss +2 -0
  37. package/badge/lib/badge.js.map +1 -1
  38. package/button/elevated-button.js.map +1 -1
  39. package/button/elevated-link-button.js.map +1 -1
  40. package/button/filled-button.js.map +1 -1
  41. package/button/filled-link-button.js.map +1 -1
  42. package/button/lib/_elevated-button.scss +10 -15
  43. package/button/lib/_elevation.scss +5 -2
  44. package/button/lib/_filled-button.scss +12 -14
  45. package/button/lib/_icon.scss +15 -24
  46. package/button/lib/_outlined-button.scss +10 -15
  47. package/button/lib/_shared.scss +15 -19
  48. package/button/lib/_text-button.scss +12 -14
  49. package/button/lib/_tonal-button.scss +10 -15
  50. package/button/lib/button.d.ts +0 -3
  51. package/button/lib/button.js +1 -12
  52. package/button/lib/button.js.map +1 -1
  53. package/button/lib/elevated-styles.css.js +1 -1
  54. package/button/lib/elevated-styles.css.js.map +1 -1
  55. package/button/lib/elevated-styles.scss +2 -0
  56. package/button/lib/filled-styles.css.js +1 -1
  57. package/button/lib/filled-styles.css.js.map +1 -1
  58. package/button/lib/filled-styles.scss +2 -0
  59. package/button/lib/link-button.d.ts +0 -1
  60. package/button/lib/link-button.js +0 -5
  61. package/button/lib/link-button.js.map +1 -1
  62. package/button/lib/outlined-styles.css.js +1 -1
  63. package/button/lib/outlined-styles.css.js.map +1 -1
  64. package/button/lib/outlined-styles.scss +2 -0
  65. package/button/lib/shared-elevation-styles.css.js +1 -1
  66. package/button/lib/shared-elevation-styles.css.js.map +1 -1
  67. package/button/lib/shared-elevation-styles.scss +2 -0
  68. package/button/lib/shared-styles.css.js +1 -1
  69. package/button/lib/shared-styles.css.js.map +1 -1
  70. package/button/lib/shared-styles.scss +2 -0
  71. package/button/lib/text-styles.css.js +1 -1
  72. package/button/lib/text-styles.css.js.map +1 -1
  73. package/button/lib/text-styles.scss +2 -0
  74. package/button/lib/tonal-styles.css.js +1 -1
  75. package/button/lib/tonal-styles.css.js.map +1 -1
  76. package/button/lib/tonal-styles.scss +2 -0
  77. package/button/outlined-button.js.map +1 -1
  78. package/button/outlined-link-button.js.map +1 -1
  79. package/button/text-button.js.map +1 -1
  80. package/button/text-link-button.js.map +1 -1
  81. package/button/tonal-button.js.map +1 -1
  82. package/button/tonal-link-button.js.map +1 -1
  83. package/checkbox/checkbox.d.ts +11 -2
  84. package/checkbox/checkbox.js +11 -2
  85. package/checkbox/checkbox.js.map +1 -1
  86. package/checkbox/lib/_checkbox.scss +26 -31
  87. package/checkbox/lib/checkbox-styles.css.js +1 -1
  88. package/checkbox/lib/checkbox-styles.css.js.map +1 -1
  89. package/checkbox/lib/checkbox-styles.scss +2 -0
  90. package/checkbox/lib/checkbox.d.ts +28 -0
  91. package/checkbox/lib/checkbox.js +33 -4
  92. package/checkbox/lib/checkbox.js.map +1 -1
  93. package/checkbox/lib/forced-colors-styles.scss +2 -0
  94. package/chips/action/delete-action.js.map +1 -1
  95. package/chips/action/lib/action.js +4 -4
  96. package/chips/action/lib/action.js.map +1 -1
  97. package/chips/action/lib/link-action.js +1 -1
  98. package/chips/action/lib/link-action.js.map +1 -1
  99. package/chips/action/lib/primary-action.js.map +1 -1
  100. package/chips/action/lib/selectable-action.js.map +1 -1
  101. package/chips/action/link-action.js.map +1 -1
  102. package/chips/action/presentational-action.js.map +1 -1
  103. package/chips/action/primary-action.js.map +1 -1
  104. package/chips/action/selectable-action.js.map +1 -1
  105. package/chips/chip/lib/_assist-chip-theme.scss +4 -0
  106. package/chips/chip/lib/_chip-theme.scss +30 -41
  107. package/chips/chip/lib/_chip.scss +2 -0
  108. package/chips/chip/lib/_filter-chip-theme.scss +4 -0
  109. package/chips/chip/lib/_input-chip-theme.scss +4 -0
  110. package/chips/chip/lib/_suggestion-chip-theme.scss +4 -0
  111. package/chips/chip/lib/chip.js.map +1 -1
  112. package/chips/chip/lib/foundation.js +4 -4
  113. package/chips/chip/lib/foundation.js.map +1 -1
  114. package/chips/chip/lib/link-chip.js.map +1 -1
  115. package/chips/chip/lib/selectable-chip.js.map +1 -1
  116. package/chips/chip/lib/types.d.ts +2 -2
  117. package/chips/chipset/lib/_chip-set-theme.scss +2 -0
  118. package/chips/chipset/lib/_chip-set.scss +2 -0
  119. package/chips/chipset/lib/foundation.js +3 -3
  120. package/chips/chipset/lib/foundation.js.map +1 -1
  121. package/chips/chipset/lib/types.d.ts +3 -3
  122. package/controller/events.js +4 -0
  123. package/controller/events.js.map +1 -1
  124. package/controller/form-controller.js.map +1 -1
  125. package/controller/foundation.d.ts +1 -1
  126. package/controller/observer.d.ts +2 -2
  127. package/dialog/_dialog.scss +6 -0
  128. package/dialog/dialog.d.ts +38 -0
  129. package/dialog/dialog.js +41 -0
  130. package/dialog/dialog.js.map +1 -0
  131. package/dialog/harness.d.ts +18 -0
  132. package/dialog/harness.js +58 -0
  133. package/dialog/harness.js.map +1 -0
  134. package/dialog/lib/_dialog.scss +382 -0
  135. package/dialog/lib/_tokens.scss +89 -0
  136. package/dialog/lib/dialog-styles.css.js +9 -0
  137. package/dialog/lib/dialog-styles.css.js.map +1 -0
  138. package/dialog/lib/dialog-styles.scss +10 -0
  139. package/dialog/lib/dialog.d.ts +190 -0
  140. package/dialog/lib/dialog.js +568 -0
  141. package/dialog/lib/dialog.js.map +1 -0
  142. package/divider/_divider.scss +6 -0
  143. package/divider/divider.d.ts +24 -0
  144. package/divider/divider.js +27 -0
  145. package/divider/divider.js.map +1 -0
  146. package/divider/lib/_divider.scss +56 -0
  147. package/divider/lib/divider-styles.css.js +9 -0
  148. package/divider/lib/divider-styles.css.js.map +1 -0
  149. package/divider/lib/divider-styles.scss +10 -0
  150. package/divider/lib/divider.d.ts +23 -0
  151. package/divider/lib/divider.js +41 -0
  152. package/divider/lib/divider.js.map +1 -0
  153. package/elevation/elevation.js.map +1 -1
  154. package/elevation/lib/_elevation.scss +5 -1
  155. package/elevation/lib/_md-comp-elevation.scss +5 -1
  156. package/elevation/lib/elevation-styles.css.js +1 -1
  157. package/elevation/lib/elevation-styles.css.js.map +1 -1
  158. package/elevation/lib/elevation-styles.scss +2 -0
  159. package/elevation/lib/elevation.js.map +1 -1
  160. package/fab/fab-extended.js.map +1 -1
  161. package/fab/fab.js.map +1 -1
  162. package/fab/lib/_fab-extended.scss +18 -11
  163. package/fab/lib/_fab.scss +7 -2
  164. package/fab/lib/_shared.scss +17 -9
  165. package/fab/lib/fab-extended-styles.css.js +1 -1
  166. package/fab/lib/fab-extended-styles.css.js.map +1 -1
  167. package/fab/lib/fab-extended-styles.scss +2 -0
  168. package/fab/lib/fab-shared-styles.css.js +1 -1
  169. package/fab/lib/fab-shared-styles.css.js.map +1 -1
  170. package/fab/lib/fab-shared-styles.scss +2 -0
  171. package/fab/lib/fab-shared.d.ts +9 -15
  172. package/fab/lib/fab-shared.js +21 -33
  173. package/fab/lib/fab-shared.js.map +1 -1
  174. package/fab/lib/fab-styles.css.js +1 -1
  175. package/fab/lib/fab-styles.css.js.map +1 -1
  176. package/fab/lib/fab-styles.scss +2 -0
  177. package/field/filled-field.d.ts +1 -1
  178. package/field/filled-field.js +1 -1
  179. package/field/filled-field.js.map +1 -1
  180. package/field/harness.js +1 -1
  181. package/field/harness.js.map +1 -1
  182. package/field/lib/_content.scss +35 -50
  183. package/field/lib/_filled-field.scss +60 -76
  184. package/field/lib/_label.scss +26 -63
  185. package/field/lib/_md-comp-filled-field.scss +17 -3
  186. package/field/lib/_md-comp-outlined-field.scss +16 -5
  187. package/field/lib/_outlined-field.scss +96 -110
  188. package/field/lib/_shared.scss +15 -35
  189. package/field/lib/_supporting-text.scss +25 -52
  190. package/field/lib/field.d.ts +14 -33
  191. package/field/lib/field.js +79 -101
  192. package/field/lib/field.js.map +1 -1
  193. package/field/lib/filled-field.d.ts +10 -16
  194. package/field/lib/filled-field.js +14 -37
  195. package/field/lib/filled-field.js.map +1 -1
  196. package/field/lib/filled-styles.css.js +1 -1
  197. package/field/lib/filled-styles.css.js.map +1 -1
  198. package/field/lib/outlined-field.d.ts +4 -10
  199. package/field/lib/outlined-field.js +13 -33
  200. package/field/lib/outlined-field.js.map +1 -1
  201. package/field/lib/outlined-styles.css.js +1 -1
  202. package/field/lib/outlined-styles.css.js.map +1 -1
  203. package/field/lib/shared-styles.css.js +1 -1
  204. package/field/lib/shared-styles.css.js.map +1 -1
  205. package/field/outlined-field.d.ts +1 -1
  206. package/field/outlined-field.js +1 -1
  207. package/field/outlined-field.js.map +1 -1
  208. package/focus/focus-ring.js.map +1 -1
  209. package/focus/lib/_focus-ring.scss +10 -23
  210. package/focus/lib/_md-comp-focus-ring.scss +4 -0
  211. package/focus/lib/focus-ring-styles.css.js +1 -1
  212. package/focus/lib/focus-ring-styles.css.js.map +1 -1
  213. package/focus/lib/focus-ring-styles.scss +2 -0
  214. package/focus/lib/focus-ring.d.ts +1 -4
  215. package/focus/lib/focus-ring.js +2 -11
  216. package/focus/lib/focus-ring.js.map +1 -1
  217. package/icon/icon.js.map +1 -1
  218. package/icon/lib/_icon.scss +2 -0
  219. package/icon/lib/icon-styles.scss +2 -0
  220. package/iconbutton/filled-icon-button-toggle.js.map +1 -1
  221. package/iconbutton/filled-icon-button.js.map +1 -1
  222. package/iconbutton/filled-link-icon-button.js.map +1 -1
  223. package/iconbutton/filled-tonal-icon-button-toggle.js.map +1 -1
  224. package/iconbutton/filled-tonal-icon-button.js.map +1 -1
  225. package/iconbutton/filled-tonal-link-icon-button.js.map +1 -1
  226. package/iconbutton/lib/_filled-icon-button.scss +20 -20
  227. package/iconbutton/lib/_filled-tonal-icon-button.scss +20 -20
  228. package/iconbutton/lib/_outlined-icon-button.scss +27 -21
  229. package/iconbutton/lib/_shared.scss +13 -33
  230. package/iconbutton/lib/_standard-icon-button.scss +25 -24
  231. package/iconbutton/lib/filled-styles.css.js +1 -1
  232. package/iconbutton/lib/filled-styles.css.js.map +1 -1
  233. package/iconbutton/lib/filled-styles.scss +2 -0
  234. package/iconbutton/lib/filled-tonal-styles.css.js +1 -1
  235. package/iconbutton/lib/filled-tonal-styles.css.js.map +1 -1
  236. package/iconbutton/lib/filled-tonal-styles.scss +2 -0
  237. package/iconbutton/lib/icon-button-toggle.d.ts +13 -42
  238. package/iconbutton/lib/icon-button-toggle.js +33 -103
  239. package/iconbutton/lib/icon-button-toggle.js.map +1 -1
  240. package/iconbutton/lib/icon-button.d.ts +2 -4
  241. package/iconbutton/lib/icon-button.js +3 -9
  242. package/iconbutton/lib/icon-button.js.map +1 -1
  243. package/iconbutton/lib/link-icon-button.js.map +1 -1
  244. package/iconbutton/lib/outlined-styles.css.js +1 -1
  245. package/iconbutton/lib/outlined-styles.css.js.map +1 -1
  246. package/iconbutton/lib/outlined-styles.scss +2 -0
  247. package/iconbutton/lib/shared-styles.css.js +1 -1
  248. package/iconbutton/lib/shared-styles.css.js.map +1 -1
  249. package/iconbutton/lib/shared-styles.scss +2 -0
  250. package/iconbutton/lib/standard-styles.css.js +1 -1
  251. package/iconbutton/lib/standard-styles.css.js.map +1 -1
  252. package/iconbutton/lib/standard-styles.scss +2 -0
  253. package/iconbutton/outlined-icon-button-toggle.js.map +1 -1
  254. package/iconbutton/outlined-icon-button.js.map +1 -1
  255. package/iconbutton/outlined-link-icon-button.js.map +1 -1
  256. package/iconbutton/standard-icon-button-toggle.js.map +1 -1
  257. package/iconbutton/standard-icon-button.js.map +1 -1
  258. package/iconbutton/standard-link-icon-button.js.map +1 -1
  259. package/list/lib/_list.scss +35 -39
  260. package/list/lib/avatar/_list-item-avatar.scss +3 -1
  261. package/list/lib/avatar/list-item-avatar-styles.css.js +1 -1
  262. package/list/lib/avatar/list-item-avatar-styles.css.js.map +1 -1
  263. package/list/lib/avatar/list-item-avatar-styles.scss +2 -0
  264. package/list/lib/avatar/list-item-avatar.d.ts +9 -4
  265. package/list/lib/avatar/list-item-avatar.js +24 -11
  266. package/list/lib/avatar/list-item-avatar.js.map +1 -1
  267. package/list/lib/icon/_list-item-icon.scss +7 -1
  268. package/list/lib/icon/list-item-icon-styles.css.js +1 -1
  269. package/list/lib/icon/list-item-icon-styles.css.js.map +1 -1
  270. package/list/lib/icon/list-item-icon-styles.scss +2 -0
  271. package/list/lib/icon/list-item-icon.d.ts +0 -3
  272. package/list/lib/icon/list-item-icon.js +1 -12
  273. package/list/lib/icon/list-item-icon.js.map +1 -1
  274. package/list/lib/image/_list-item-image.scss +6 -2
  275. package/list/lib/image/list-item-image-styles.css.js +1 -1
  276. package/list/lib/image/list-item-image-styles.css.js.map +1 -1
  277. package/list/lib/image/list-item-image-styles.scss +2 -0
  278. package/list/lib/image/list-item-image.d.ts +11 -4
  279. package/list/lib/image/list-item-image.js +24 -13
  280. package/list/lib/image/list-item-image.js.map +1 -1
  281. package/list/lib/list-styles.css.js +1 -1
  282. package/list/lib/list-styles.css.js.map +1 -1
  283. package/list/lib/list-styles.scss +2 -0
  284. package/list/lib/list.d.ts +99 -28
  285. package/list/lib/list.js +213 -112
  286. package/list/lib/list.js.map +1 -1
  287. package/list/lib/listitem/_list-item.scss +122 -56
  288. package/list/lib/listitem/harness.js +2 -1
  289. package/list/lib/listitem/harness.js.map +1 -1
  290. package/list/lib/listitem/list-item-private-styles.css.js +9 -0
  291. package/list/lib/listitem/list-item-private-styles.css.js.map +1 -0
  292. package/list/lib/listitem/list-item-private-styles.scss +10 -0
  293. package/list/lib/listitem/list-item-styles.css.js +1 -1
  294. package/list/lib/listitem/list-item-styles.css.js.map +1 -1
  295. package/list/lib/listitem/list-item-styles.scss +2 -0
  296. package/list/lib/listitem/list-item.d.ts +99 -43
  297. package/list/lib/listitem/list-item.js +204 -173
  298. package/list/lib/listitem/list-item.js.map +1 -1
  299. package/list/lib/listitemlink/list-item-link.d.ts +17 -0
  300. package/list/lib/listitemlink/list-item-link.js +42 -0
  301. package/list/lib/listitemlink/list-item-link.js.map +1 -0
  302. package/list/lib/video/_list-item-video.scss +15 -5
  303. package/list/lib/video/list-item-video-styles.css.js +1 -1
  304. package/list/lib/video/list-item-video-styles.css.js.map +1 -1
  305. package/list/lib/video/list-item-video-styles.scss +2 -0
  306. package/list/lib/video/list-item-video.d.ts +43 -4
  307. package/list/lib/video/list-item-video.js +90 -12
  308. package/list/lib/video/list-item-video.js.map +1 -1
  309. package/list/list-item-avatar.d.ts +2 -1
  310. package/list/list-item-avatar.js +2 -1
  311. package/list/list-item-avatar.js.map +1 -1
  312. package/list/list-item-icon.d.ts +2 -1
  313. package/list/list-item-icon.js +2 -1
  314. package/list/list-item-icon.js.map +1 -1
  315. package/list/list-item-image.d.ts +2 -1
  316. package/list/list-item-image.js +2 -1
  317. package/list/list-item-image.js.map +1 -1
  318. package/list/list-item-link.d.ts +35 -0
  319. package/list/list-item-link.js +39 -0
  320. package/list/list-item-link.js.map +1 -0
  321. package/list/list-item-video.d.ts +2 -1
  322. package/list/list-item-video.js +2 -1
  323. package/list/list-item-video.js.map +1 -1
  324. package/list/list-item.d.ts +18 -2
  325. package/list/list-item.js +20 -3
  326. package/list/list-item.js.map +1 -1
  327. package/list/list.d.ts +15 -1
  328. package/list/list.js +15 -1
  329. package/list/list.js.map +1 -1
  330. package/menu/_menu-item.scss +6 -0
  331. package/menu/_menu.scss +6 -0
  332. package/menu/harness.d.ts +5 -0
  333. package/menu/harness.js +22 -0
  334. package/menu/harness.js.map +1 -1
  335. package/menu/lib/_menu.scss +64 -62
  336. package/menu/lib/menu-styles.css.js +1 -1
  337. package/menu/lib/menu-styles.css.js.map +1 -1
  338. package/menu/lib/menu-styles.scss +2 -0
  339. package/menu/lib/menu.d.ts +177 -43
  340. package/menu/lib/menu.js +506 -246
  341. package/menu/lib/menu.js.map +1 -1
  342. package/menu/lib/menuitem/_menu-item.scss +123 -0
  343. package/menu/lib/menuitem/menu-item-private-styles.css.js +9 -0
  344. package/menu/lib/menuitem/menu-item-private-styles.css.js.map +1 -0
  345. package/menu/lib/menuitem/menu-item-private-styles.scss +10 -0
  346. package/menu/lib/menuitem/menu-item-styles.css.d.ts +1 -0
  347. package/menu/lib/menuitem/menu-item-styles.css.js +9 -0
  348. package/menu/lib/menuitem/menu-item-styles.css.js.map +1 -0
  349. package/menu/lib/menuitem/menu-item-styles.scss +10 -0
  350. package/menu/lib/menuitem/menu-item.d.ts +20 -3
  351. package/menu/lib/menuitem/menu-item.js +42 -3
  352. package/menu/lib/menuitem/menu-item.js.map +1 -1
  353. package/menu/lib/menuitemlink/menu-item-link.d.ts +25 -0
  354. package/menu/lib/menuitemlink/menu-item-link.js +51 -0
  355. package/menu/lib/menuitemlink/menu-item-link.js.map +1 -0
  356. package/menu/lib/shared.d.ts +134 -0
  357. package/menu/lib/shared.js +85 -0
  358. package/menu/lib/shared.js.map +1 -0
  359. package/menu/lib/submenuitem/harness.d.ts +11 -0
  360. package/menu/lib/submenuitem/harness.js +12 -0
  361. package/menu/lib/submenuitem/harness.js.map +1 -0
  362. package/menu/lib/submenuitem/sub-menu-item.d.ts +89 -0
  363. package/menu/lib/submenuitem/sub-menu-item.js +266 -0
  364. package/menu/lib/submenuitem/sub-menu-item.js.map +1 -0
  365. package/menu/lib/surfacePositionController.d.ts +117 -0
  366. package/menu/lib/surfacePositionController.js +196 -0
  367. package/menu/lib/surfacePositionController.js.map +1 -0
  368. package/menu/lib/typeaheadController.d.ts +144 -0
  369. package/menu/lib/typeaheadController.js +242 -0
  370. package/menu/lib/typeaheadController.js.map +1 -0
  371. package/menu/menu-item-link.d.ts +33 -0
  372. package/menu/menu-item-link.js +37 -0
  373. package/menu/menu-item-link.js.map +1 -0
  374. package/menu/menu-item.d.ts +19 -2
  375. package/menu/menu-item.js +22 -4
  376. package/menu/menu-item.js.map +1 -1
  377. package/menu/menu.d.ts +45 -0
  378. package/menu/menu.js +43 -0
  379. package/menu/menu.js.map +1 -1
  380. package/menu/sub-menu-item.d.ts +60 -0
  381. package/menu/sub-menu-item.js +64 -0
  382. package/menu/sub-menu-item.js.map +1 -0
  383. package/menusurface/lib/_md-comp-menu-surface.scss +4 -0
  384. package/menusurface/lib/_menu-surface.scss +5 -1
  385. package/menusurface/lib/foundation.js +31 -31
  386. package/menusurface/lib/foundation.js.map +1 -1
  387. package/menusurface/lib/menu-surface-styles.css.js +1 -1
  388. package/menusurface/lib/menu-surface-styles.css.js.map +1 -1
  389. package/menusurface/lib/menu-surface-styles.scss +2 -0
  390. package/menusurface/lib/menu-surface.d.ts +2 -2
  391. package/menusurface/lib/menu-surface.js.map +1 -1
  392. package/menusurface/menu-surface.js.map +1 -1
  393. package/motion/animation.d.ts +20 -3
  394. package/motion/animation.js +39 -4
  395. package/motion/animation.js.map +1 -1
  396. package/navigationbar/lib/_navigation-bar.scss +11 -9
  397. package/navigationbar/lib/constants.d.ts +1 -1
  398. package/navigationbar/lib/navigation-bar-styles.css.js +1 -1
  399. package/navigationbar/lib/navigation-bar-styles.css.js.map +1 -1
  400. package/navigationbar/lib/navigation-bar-styles.scss +2 -0
  401. package/navigationbar/lib/navigation-bar.js.map +1 -1
  402. package/navigationbar/navigation-bar.js.map +1 -1
  403. package/navigationdrawer/lib/_navigation-drawer-modal.scss +11 -2
  404. package/navigationdrawer/lib/_navigation-drawer.scss +11 -6
  405. package/navigationdrawer/lib/_shared.scss +4 -8
  406. package/navigationdrawer/lib/navigation-drawer-modal-styles.css.js +1 -1
  407. package/navigationdrawer/lib/navigation-drawer-modal-styles.css.js.map +1 -1
  408. package/navigationdrawer/lib/navigation-drawer-modal-styles.scss +2 -0
  409. package/navigationdrawer/lib/navigation-drawer-modal.js.map +1 -1
  410. package/navigationdrawer/lib/navigation-drawer-styles.css.js +1 -1
  411. package/navigationdrawer/lib/navigation-drawer-styles.css.js.map +1 -1
  412. package/navigationdrawer/lib/navigation-drawer-styles.scss +2 -0
  413. package/navigationdrawer/lib/navigation-drawer.js.map +1 -1
  414. package/navigationdrawer/lib/shared-styles.scss +2 -0
  415. package/navigationdrawer/navigation-drawer-modal.js.map +1 -1
  416. package/navigationdrawer/navigation-drawer.js.map +1 -1
  417. package/navigationtab/lib/_navigation-tab.scss +34 -41
  418. package/navigationtab/lib/navigation-tab-styles.css.js +1 -1
  419. package/navigationtab/lib/navigation-tab-styles.css.js.map +1 -1
  420. package/navigationtab/lib/navigation-tab-styles.scss +2 -0
  421. package/navigationtab/lib/navigation-tab.js +4 -4
  422. package/navigationtab/lib/navigation-tab.js.map +1 -1
  423. package/navigationtab/navigation-tab.js.map +1 -1
  424. package/package.json +2 -9
  425. package/radio/lib/_radio.scss +16 -15
  426. package/radio/lib/forced-colors-styles.scss +2 -0
  427. package/radio/lib/radio-styles.css.js +1 -1
  428. package/radio/lib/radio-styles.css.js.map +1 -1
  429. package/radio/lib/radio-styles.scss +2 -0
  430. package/radio/lib/radio.d.ts +10 -1
  431. package/radio/lib/radio.js +28 -19
  432. package/radio/lib/radio.js.map +1 -1
  433. package/radio/radio.d.ts +16 -1
  434. package/radio/radio.js +16 -1
  435. package/radio/radio.js.map +1 -1
  436. package/ripple/directive.d.ts +1 -33
  437. package/ripple/directive.js +7 -194
  438. package/ripple/directive.js.map +1 -1
  439. package/ripple/lib/_md-comp-ripple.scss +20 -19
  440. package/ripple/lib/_ripple.scss +24 -40
  441. package/ripple/lib/ripple-styles.css.js +1 -1
  442. package/ripple/lib/ripple-styles.css.js.map +1 -1
  443. package/ripple/lib/ripple-styles.scss +2 -0
  444. package/ripple/lib/ripple.d.ts +50 -48
  445. package/ripple/lib/ripple.js +215 -77
  446. package/ripple/lib/ripple.js.map +1 -1
  447. package/ripple/ripple.d.ts +9 -1
  448. package/ripple/ripple.js +9 -1
  449. package/ripple/ripple.js.map +1 -1
  450. package/sass/_assert.scss +2 -0
  451. package/sass/_color-scheme.scss +4 -0
  452. package/sass/_color.scss +4 -0
  453. package/sass/_elevation.scss +4 -0
  454. package/sass/_feature-flags.scss +2 -0
  455. package/sass/_map-ext.scss +26 -0
  456. package/sass/_resolvers.scss +4 -4
  457. package/sass/_shape.scss +75 -27
  458. package/sass/_string-ext.scss +67 -0
  459. package/sass/_theme.scss +4 -0
  460. package/sass/_typography.scss +18 -93
  461. package/sass/_var.scss +4 -0
  462. package/segmentedbutton/lib/_outlined-segmented-button.scss +4 -0
  463. package/segmentedbutton/lib/_shared.scss +18 -22
  464. package/segmentedbutton/lib/outlined-styles.css.js +1 -1
  465. package/segmentedbutton/lib/outlined-styles.css.js.map +1 -1
  466. package/segmentedbutton/lib/outlined-styles.scss +2 -0
  467. package/segmentedbutton/lib/segmented-button.js +4 -4
  468. package/segmentedbutton/lib/segmented-button.js.map +1 -1
  469. package/segmentedbutton/lib/shared-styles.css.js +1 -1
  470. package/segmentedbutton/lib/shared-styles.css.js.map +1 -1
  471. package/segmentedbutton/lib/shared-styles.scss +2 -0
  472. package/segmentedbutton/outlined-segmented-button.js.map +1 -1
  473. package/segmentedbuttonset/lib/_outlined-segmented-button-set.scss +9 -5
  474. package/segmentedbuttonset/lib/_shared.scss +0 -13
  475. package/segmentedbuttonset/lib/outlined-styles.css.js +1 -1
  476. package/segmentedbuttonset/lib/outlined-styles.css.js.map +1 -1
  477. package/segmentedbuttonset/lib/outlined-styles.scss +2 -0
  478. package/segmentedbuttonset/lib/segmented-button-set.d.ts +0 -2
  479. package/segmentedbuttonset/lib/segmented-button-set.js +0 -2
  480. package/segmentedbuttonset/lib/segmented-button-set.js.map +1 -1
  481. package/segmentedbuttonset/lib/shared-styles.scss +2 -0
  482. package/segmentedbuttonset/outlined-segmented-button-set.js.map +1 -1
  483. package/slider/_slider.scss +6 -0
  484. package/slider/harness.d.ts +20 -0
  485. package/slider/harness.js +63 -0
  486. package/slider/harness.js.map +1 -0
  487. package/slider/lib/_slider.scss +503 -0
  488. package/slider/lib/_tokens.scss +66 -0
  489. package/slider/lib/forced-colors-styles.css.d.ts +1 -0
  490. package/slider/lib/forced-colors-styles.css.js +9 -0
  491. package/slider/lib/forced-colors-styles.css.js.map +1 -0
  492. package/slider/lib/forced-colors-styles.scss +53 -0
  493. package/slider/lib/slider-styles.css.d.ts +1 -0
  494. package/slider/lib/slider-styles.css.js +9 -0
  495. package/slider/lib/slider-styles.css.js.map +1 -0
  496. package/slider/lib/slider-styles.scss +8 -0
  497. package/slider/lib/slider.d.ts +158 -0
  498. package/slider/lib/slider.js +575 -0
  499. package/slider/lib/slider.js.map +1 -0
  500. package/slider/slider.d.ts +28 -0
  501. package/slider/slider.js +32 -0
  502. package/slider/slider.js.map +1 -0
  503. package/switch/lib/README.md +55 -0
  504. package/switch/lib/_handle.scss +72 -26
  505. package/switch/lib/_icon.scss +40 -0
  506. package/switch/lib/_switch.scss +12 -133
  507. package/switch/lib/_track.scss +41 -0
  508. package/switch/lib/switch-styles.css.js +1 -1
  509. package/switch/lib/switch-styles.css.js.map +1 -1
  510. package/switch/lib/switch-styles.scss +2 -0
  511. package/switch/lib/switch.d.ts +3 -0
  512. package/switch/lib/switch.js +12 -9
  513. package/switch/lib/switch.js.map +1 -1
  514. package/switch/switch.js.map +1 -1
  515. package/textfield/filled-text-field.d.ts +1 -1
  516. package/textfield/filled-text-field.js +1 -2
  517. package/textfield/filled-text-field.js.map +1 -1
  518. package/textfield/harness.js +1 -1
  519. package/textfield/harness.js.map +1 -1
  520. package/textfield/lib/_filled-text-field.scss +29 -23
  521. package/textfield/lib/_icon.scss +41 -56
  522. package/textfield/lib/_input.scss +17 -36
  523. package/textfield/lib/_outlined-text-field.scss +29 -23
  524. package/textfield/lib/_shared.scss +10 -29
  525. package/textfield/lib/filled-forced-colors-styles.scss +2 -0
  526. package/textfield/lib/filled-styles.css.js +1 -1
  527. package/textfield/lib/filled-styles.css.js.map +1 -1
  528. package/textfield/lib/filled-styles.scss +2 -0
  529. package/textfield/lib/filled-text-field.d.ts +6 -5
  530. package/textfield/lib/filled-text-field.js +8 -7
  531. package/textfield/lib/filled-text-field.js.map +1 -1
  532. package/textfield/lib/outlined-forced-colors-styles.scss +2 -0
  533. package/textfield/lib/outlined-styles.css.js +1 -1
  534. package/textfield/lib/outlined-styles.css.js.map +1 -1
  535. package/textfield/lib/outlined-styles.scss +2 -0
  536. package/textfield/lib/outlined-text-field.d.ts +6 -5
  537. package/textfield/lib/outlined-text-field.js +8 -7
  538. package/textfield/lib/outlined-text-field.js.map +1 -1
  539. package/textfield/lib/shared-styles.css.js +1 -1
  540. package/textfield/lib/shared-styles.css.js.map +1 -1
  541. package/textfield/lib/shared-styles.scss +2 -0
  542. package/textfield/lib/text-field.d.ts +40 -90
  543. package/textfield/lib/text-field.js +194 -272
  544. package/textfield/lib/text-field.js.map +1 -1
  545. package/textfield/outlined-text-field.d.ts +1 -1
  546. package/textfield/outlined-text-field.js +1 -2
  547. package/textfield/outlined-text-field.js.map +1 -1
  548. package/tokens/_index.scss +1 -1
  549. package/tokens/{v0_150 → v0_160}/_index.scss +1 -1
  550. package/tokens/{v0_150 → v0_160}/_md-comp-assist-chip.scss +2 -2
  551. package/tokens/{v0_150 → v0_160}/_md-comp-badge.scss +2 -2
  552. package/tokens/{v0_150 → v0_160}/_md-comp-banner.scss +2 -43
  553. package/tokens/{v0_150 → v0_160}/_md-comp-bottom-app-bar.scss +3 -4
  554. package/tokens/{v0_150 → v0_160}/_md-comp-carousel-item.scss +2 -2
  555. package/tokens/{v0_150 → v0_160}/_md-comp-checkbox.scss +5 -26
  556. package/tokens/{v0_150 → v0_160}/_md-comp-circular-progress-indicator.scss +2 -2
  557. package/tokens/{v0_150 → v0_160}/_md-comp-data-table.scss +2 -6
  558. package/tokens/{v0_150 → v0_160}/_md-comp-date-input-modal.scss +11 -11
  559. package/tokens/{v0_150 → v0_160}/_md-comp-date-picker-docked.scss +24 -24
  560. package/tokens/{v0_150 → v0_160}/_md-comp-date-picker-modal.scss +35 -35
  561. package/tokens/{v0_150 → v0_160}/_md-comp-dialog.scss +2 -25
  562. package/tokens/{v0_150 → v0_160}/_md-comp-divider.scss +2 -2
  563. package/tokens/{v0_150 → v0_160}/_md-comp-elevated-button.scss +2 -2
  564. package/tokens/{v0_150 → v0_160}/_md-comp-elevated-card.scss +2 -2
  565. package/tokens/{v0_150 → v0_160}/_md-comp-extended-fab-branded.scss +2 -2
  566. package/tokens/{v0_150 → v0_160}/_md-comp-extended-fab-primary.scss +2 -2
  567. package/tokens/{v0_150 → v0_160}/_md-comp-extended-fab-secondary.scss +2 -2
  568. package/tokens/{v0_150 → v0_160}/_md-comp-extended-fab-surface.scss +2 -2
  569. package/tokens/{v0_150 → v0_160}/_md-comp-extended-fab-tertiary.scss +2 -4
  570. package/tokens/{v0_150 → v0_160}/_md-comp-fab-branded-large.scss +2 -3
  571. package/tokens/{v0_150 → v0_160}/_md-comp-fab-branded.scss +2 -2
  572. package/tokens/{v0_150 → v0_160}/_md-comp-fab-primary-large.scss +2 -2
  573. package/tokens/{v0_150 → v0_160}/_md-comp-fab-primary-small.scss +2 -2
  574. package/tokens/{v0_150 → v0_160}/_md-comp-fab-primary.scss +2 -2
  575. package/tokens/{v0_150 → v0_160}/_md-comp-fab-secondary-large.scss +2 -2
  576. package/tokens/{v0_150 → v0_160}/_md-comp-fab-secondary-small.scss +2 -2
  577. package/tokens/{v0_150 → v0_160}/_md-comp-fab-secondary.scss +2 -2
  578. package/tokens/{v0_150 → v0_160}/_md-comp-fab-surface-large.scss +2 -2
  579. package/tokens/{v0_150 → v0_160}/_md-comp-fab-surface-small.scss +2 -2
  580. package/tokens/{v0_150 → v0_160}/_md-comp-fab-surface.scss +2 -2
  581. package/tokens/{v0_150 → v0_160}/_md-comp-fab-tertiary-large.scss +2 -2
  582. package/tokens/{v0_150 → v0_160}/_md-comp-fab-tertiary-small.scss +2 -2
  583. package/tokens/{v0_150 → v0_160}/_md-comp-fab-tertiary.scss +2 -2
  584. package/tokens/{v0_150 → v0_160}/_md-comp-filled-autocomplete.scss +2 -3
  585. package/tokens/{v0_150 → v0_160}/_md-comp-filled-button.scss +2 -8
  586. package/tokens/{v0_150 → v0_160}/_md-comp-filled-card.scss +2 -4
  587. package/tokens/{v0_150 → v0_160}/_md-comp-filled-icon-button.scss +2 -2
  588. package/tokens/{v0_150 → v0_160}/_md-comp-filled-menu-button.scss +2 -2
  589. package/tokens/{v0_150 → v0_160}/_md-comp-filled-select.scss +2 -6
  590. package/tokens/{v0_150 → v0_160}/_md-comp-filled-text-field.scss +2 -3
  591. package/tokens/{v0_150 → v0_160}/_md-comp-filled-tonal-button.scss +2 -2
  592. package/tokens/{v0_150 → v0_160}/_md-comp-filled-tonal-icon-button.scss +2 -2
  593. package/tokens/{v0_150 → v0_160}/_md-comp-filter-chip.scss +2 -30
  594. package/tokens/{v0_150 → v0_160}/_md-comp-full-screen-dialog.scss +3 -53
  595. package/tokens/{v0_150 → v0_160}/_md-comp-icon-button.scss +3 -3
  596. package/tokens/{v0_150 → v0_160}/_md-comp-input-chip.scss +2 -52
  597. package/tokens/{v0_150 → v0_160}/_md-comp-linear-progress-indicator.scss +2 -2
  598. package/tokens/{v0_150 → v0_160}/_md-comp-list.scss +3 -12
  599. package/tokens/{v0_150 → v0_160}/_md-comp-menu.scss +2 -4
  600. package/tokens/{v0_150 → v0_160}/_md-comp-navigation-bar.scss +2 -9
  601. package/tokens/{v0_150 → v0_160}/_md-comp-navigation-drawer.scss +2 -8
  602. package/tokens/{v0_150 → v0_160}/_md-comp-navigation-rail.scss +2 -39
  603. package/tokens/{v0_150 → v0_160}/_md-comp-outlined-autocomplete.scss +2 -3
  604. package/tokens/{v0_150 → v0_160}/_md-comp-outlined-button.scss +2 -6
  605. package/tokens/{v0_150 → v0_160}/_md-comp-outlined-card.scss +2 -2
  606. package/tokens/{v0_150 → v0_160}/_md-comp-outlined-icon-button.scss +2 -4
  607. package/tokens/{v0_150 → v0_160}/_md-comp-outlined-menu-button.scss +2 -2
  608. package/tokens/{v0_150 → v0_160}/_md-comp-outlined-segmented-button.scss +2 -2
  609. package/tokens/{v0_150 → v0_160}/_md-comp-outlined-select.scss +2 -6
  610. package/tokens/{v0_150 → v0_160}/_md-comp-outlined-text-field.scss +2 -3
  611. package/tokens/{v0_150 → v0_160}/_md-comp-plain-tooltip.scss +2 -2
  612. package/tokens/{v0_150 → v0_160}/_md-comp-primary-navigation-tab.scss +2 -4
  613. package/tokens/{v0_150 → v0_160}/_md-comp-radio-button.scss +2 -2
  614. package/tokens/{v0_150 → v0_160}/_md-comp-rich-tooltip.scss +2 -2
  615. package/tokens/{v0_150 → v0_160}/_md-comp-scrim.scss +2 -2
  616. package/tokens/{v0_150 → v0_160}/_md-comp-search-bar.scss +2 -2
  617. package/tokens/{v0_150 → v0_160}/_md-comp-search-view.scss +2 -2
  618. package/tokens/{v0_150 → v0_160}/_md-comp-secondary-navigation-tab.scss +2 -4
  619. package/tokens/{v0_150 → v0_160}/_md-comp-sheet-bottom.scss +2 -2
  620. package/tokens/{v0_150 → v0_160}/_md-comp-sheet-floating.scss +2 -2
  621. package/tokens/{v0_150 → v0_160}/_md-comp-sheet-side.scss +13 -11
  622. package/tokens/{v0_150 → v0_160}/_md-comp-slider.scss +2 -4
  623. package/tokens/{v0_150 → v0_160}/_md-comp-snackbar.scss +2 -2
  624. package/tokens/{v0_150 → v0_160}/_md-comp-standard-menu-button.scss +2 -2
  625. package/tokens/{v0_150 → v0_160}/_md-comp-suggestion-chip.scss +2 -2
  626. package/tokens/{v0_150 → v0_160}/_md-comp-switch.scss +2 -11
  627. package/tokens/{v0_150 → v0_160}/_md-comp-text-button.scss +2 -6
  628. package/tokens/{v0_150 → v0_160}/_md-comp-time-input.scss +2 -2
  629. package/tokens/{v0_150 → v0_160}/_md-comp-time-picker.scss +2 -5
  630. package/tokens/{v0_150 → v0_160}/_md-comp-top-app-bar-large.scss +2 -2
  631. package/tokens/{v0_150 → v0_160}/_md-comp-top-app-bar-medium.scss +2 -2
  632. package/tokens/{v0_150 → v0_160}/_md-comp-top-app-bar-small-centered.scss +2 -3
  633. package/tokens/{v0_150 → v0_160}/_md-comp-top-app-bar-small.scss +2 -3
  634. package/tokens/{v0_150 → v0_160}/_md-ref-palette.scss +2 -2
  635. package/tokens/{v0_150 → v0_160}/_md-ref-typeface.scss +2 -2
  636. package/tokens/{v0_150 → v0_160}/_md-sys-color.scss +218 -20
  637. package/tokens/{v0_150 → v0_160}/_md-sys-elevation.scss +4 -13
  638. package/tokens/{v0_150 → v0_160}/_md-sys-motion.scss +2 -2
  639. package/tokens/{v0_150 → v0_160}/_md-sys-shape.scss +2 -2
  640. package/tokens/{v0_150 → v0_160}/_md-sys-state.scss +2 -2
  641. package/tokens/{v0_150 → v0_160}/_md-sys-typescale.scss +2 -3
  642. package/tokens/v0_160/index.test.css.d.ts +1 -0
  643. package/tokens/{v0_150 → v0_160}/index.test.scss +1 -1
  644. package/tokens/v0_160/lib.test.css.d.ts +1 -0
  645. package/tokens/{v0_150 → v0_160}/lib.test.scss +1 -1
  646. package/list/lib/_tokens.scss +0 -80
  647. package/list/lib/divider/_list-divider.scss +0 -46
  648. package/list/lib/divider/list-divider-styles.css.js +0 -9
  649. package/list/lib/divider/list-divider-styles.css.js.map +0 -1
  650. package/list/lib/divider/list-divider-styles.scss +0 -8
  651. package/list/lib/divider/list-divider.d.ts +0 -13
  652. package/list/lib/divider/list-divider.js +0 -32
  653. package/list/lib/divider/list-divider.js.map +0 -1
  654. package/list/list-divider.d.ts +0 -19
  655. package/list/list-divider.js +0 -22
  656. package/list/list-divider.js.map +0 -1
  657. package/menu/lib/_menu-button.scss +0 -14
  658. package/menu/lib/adapter.d.ts +0 -66
  659. package/menu/lib/adapter.js +0 -7
  660. package/menu/lib/adapter.js.map +0 -1
  661. package/menu/lib/constants.d.ts +0 -22
  662. package/menu/lib/constants.js +0 -23
  663. package/menu/lib/constants.js.map +0 -1
  664. package/menu/lib/foundation.d.ts +0 -49
  665. package/menu/lib/foundation.js +0 -123
  666. package/menu/lib/foundation.js.map +0 -1
  667. package/menu/lib/menu-button-styles.css.js +0 -9
  668. package/menu/lib/menu-button-styles.css.js.map +0 -1
  669. package/menu/lib/menu-button-styles.scss +0 -8
  670. package/menu/lib/menu-button.d.ts +0 -27
  671. package/menu/lib/menu-button.js +0 -93
  672. package/menu/lib/menu-button.js.map +0 -1
  673. package/menu/menu-button.d.ts +0 -14
  674. package/menu/menu-button.js +0 -17
  675. package/menu/menu-button.js.map +0 -1
  676. /package/{list/lib/divider/list-divider-styles.css.d.ts → dialog/lib/dialog-styles.css.d.ts} +0 -0
  677. /package/{menu/lib/menu-button-styles.css.d.ts → divider/lib/divider-styles.css.d.ts} +0 -0
  678. /package/{tokens/v0_150/index.test.css.d.ts → list/lib/listitem/list-item-private-styles.css.d.ts} +0 -0
  679. /package/{tokens/v0_150/lib.test.css.d.ts → menu/lib/menuitem/menu-item-private-styles.css.d.ts} +0 -0
  680. /package/tokens/{v0_150 → v0_160}/index.test.css.js +0 -0
  681. /package/tokens/{v0_150 → v0_160}/index.test.css.js.map +0 -0
  682. /package/tokens/{v0_150 → v0_160}/lib.test.css.js +0 -0
  683. /package/tokens/{v0_150 → v0_160}/lib.test.css.js.map +0 -0
package/iconbutton/lib/filled-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-start-start: var(--md-filled-icon-button-container-shape-start-start, 9999px);--_container-shape-start-end: var(--md-filled-icon-button-container-shape-start-end, 9999px);--_container-shape-end-end: var(--md-filled-icon-button-container-shape-end-end, 9999px);--_container-shape-end-start: var(--md-filled-icon-button-container-shape-end-start, 9999px);--_container-color: var(--md-filled-icon-button-container-color, var(--md-sys-color-primary, #6750a4));--_container-size: var(--md-filled-icon-button-container-size, 40px);--_disabled-container-color: var(--md-filled-icon-button-disabled-container-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.12));--_disabled-icon-color: var(--md-filled-icon-button-disabled-icon-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.38));--_focus-icon-color: var(--md-filled-icon-button-focus-icon-color, var(--md-sys-color-on-primary, #fff));--_focus-state-layer-color: var(--md-filled-icon-button-focus-state-layer-color, var(--md-sys-color-on-primary, #fff));--_focus-state-layer-opacity: var(--md-filled-icon-button-focus-state-layer-opacity, 0.12);--_hover-icon-color: var(--md-filled-icon-button-hover-icon-color, var(--md-sys-color-on-primary, #fff));--_hover-state-layer-color: var(--md-filled-icon-button-hover-state-layer-color, var(--md-sys-color-on-primary, #fff));--_hover-state-layer-opacity: var(--md-filled-icon-button-hover-state-layer-opacity, 0.08);--_icon-color: var(--md-filled-icon-button-icon-color, var(--md-sys-color-on-primary, #fff));--_icon-size: var(--md-filled-icon-button-icon-size, 24px);--_pressed-icon-color: var(--md-filled-icon-button-pressed-icon-color, var(--md-sys-color-on-primary, #fff));--_pressed-state-layer-color: var(--md-filled-icon-button-pressed-state-layer-color, var(--md-sys-color-on-primary, #fff));--_pressed-state-layer-opacity: var(--md-filled-icon-button-pressed-state-layer-opacity, 0.12);--_selected-container-color: var(--md-filled-icon-button-selected-container-color, var(--md-sys-color-primary, #6750a4));--_toggle-selected-focus-icon-color: var(--md-filled-icon-button-toggle-selected-focus-icon-color, var(--md-sys-color-on-primary, #fff));--_toggle-selected-focus-state-layer-color: var(--md-filled-icon-button-toggle-selected-focus-state-layer-color, var(--md-sys-color-on-primary, #fff));--_toggle-selected-hover-icon-color: var(--md-filled-icon-button-toggle-selected-hover-icon-color, var(--md-sys-color-on-primary, #fff));--_toggle-selected-hover-state-layer-color: var(--md-filled-icon-button-toggle-selected-hover-state-layer-color, var(--md-sys-color-on-primary, #fff));--_toggle-selected-icon-color: var(--md-filled-icon-button-toggle-selected-icon-color, var(--md-sys-color-on-primary, #fff));--_toggle-selected-pressed-icon-color: var(--md-filled-icon-button-toggle-selected-pressed-icon-color, var(--md-sys-color-on-primary, #fff));--_toggle-selected-pressed-state-layer-color: var(--md-filled-icon-button-toggle-selected-pressed-state-layer-color, var(--md-sys-color-on-primary, #fff));--_toggle-unselected-focus-icon-color: var(--md-filled-icon-button-toggle-unselected-focus-icon-color, var(--md-sys-color-primary, #6750a4));--_toggle-unselected-focus-state-layer-color: var(--md-filled-icon-button-toggle-unselected-focus-state-layer-color, var(--md-sys-color-primary, #6750a4));--_toggle-unselected-hover-icon-color: var(--md-filled-icon-button-toggle-unselected-hover-icon-color, var(--md-sys-color-primary, #6750a4));--_toggle-unselected-hover-state-layer-color: var(--md-filled-icon-button-toggle-unselected-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_toggle-unselected-icon-color: var(--md-filled-icon-button-toggle-unselected-icon-color, var(--md-sys-color-primary, #6750a4));--_toggle-unselected-pressed-icon-color: var(--md-filled-icon-button-toggle-unselected-pressed-icon-color, var(--md-sys-color-primary, #6750a4));--_toggle-unselected-pressed-state-layer-color: var(--md-filled-icon-button-toggle-unselected-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_unselected-container-color: var(--md-filled-icon-button-unselected-container-color, var(--md-sys-color-surface-variant, #e7e0ec));--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)}.md3-icon-button{background-color:var(--_container-color);color:var(--_icon-color);--md-ripple-focus-state-layer-color:var(--_focus-state-layer-color);--md-ripple-focus-state-layer-opacity:var(--_focus-state-layer-opacity);--md-ripple-hover-state-layer-color:var(--_hover-state-layer-color);--md-ripple-hover-state-layer-opacity:var(--_hover-state-layer-opacity);--md-ripple-pressed-state-layer-color:var(--_pressed-state-layer-color);--md-ripple-pressed-state-layer-opacity:var(--_pressed-state-layer-opacity)}.md3-icon-button:hover{color:var(--_hover-icon-color)}.md3-icon-button:focus{color:var(--_focus-icon-color)}.md3-icon-button:active{color:var(--_pressed-icon-color)}.md3-icon-button:disabled{background-color:var(--_disabled-container-color);color:var(--_disabled-icon-color)}.md3-icon-button--toggle-filled{--md-ripple-focus-state-layer-color:var(--_toggle-unselected-focus-state-layer-color);--md-ripple-hover-state-layer-color:var(--_toggle-unselected-hover-state-layer-color);--md-ripple-pressed-state-layer-color:var(--_toggle-unselected-pressed-state-layer-color)}.md3-icon-button--toggle-filled:not(:disabled){background-color:var(--_unselected-container-color);color:var(--_toggle-unselected-icon-color)}.md3-icon-button--toggle-filled:not(:disabled):hover{color:var(--_toggle-unselected-hover-icon-color)}.md3-icon-button--toggle-filled:not(:disabled):focus{color:var(--_toggle-unselected-focus-icon-color)}.md3-icon-button--toggle-filled:not(:disabled):active{color:var(--_toggle-unselected-pressed-icon-color)}.md3-icon-button--on{--md-ripple-focus-state-layer-color:var(--_toggle-selected-focus-state-layer-color);--md-ripple-hover-state-layer-color:var(--_toggle-selected-hover-state-layer-color);--md-ripple-pressed-state-layer-color:var(--_toggle-selected-pressed-state-layer-color)}.md3-icon-button--on:not(:disabled){background-color:var(--_selected-container-color);color:var(--_toggle-selected-icon-color)}.md3-icon-button--on:not(:disabled):hover{color:var(--_toggle-selected-hover-icon-color)}.md3-icon-button--on:not(:disabled):focus{color:var(--_toggle-selected-focus-icon-color)}.md3-icon-button--on:not(:disabled):active{color:var(--_toggle-selected-pressed-icon-color)}/*# sourceMappingURL=filled-styles.css.map */
7
+ export const styles = css `:host{--_container-shape-start-start: var(--md-filled-icon-button-container-shape-start-start, var(--md-filled-icon-button-container-shape, 9999px));--_container-shape-start-end: var(--md-filled-icon-button-container-shape-start-end, var(--md-filled-icon-button-container-shape, 9999px));--_container-shape-end-end: var(--md-filled-icon-button-container-shape-end-end, var(--md-filled-icon-button-container-shape, 9999px));--_container-shape-end-start: var(--md-filled-icon-button-container-shape-end-start, var(--md-filled-icon-button-container-shape, 9999px));--_container-color: var(--md-filled-icon-button-container-color, var(--md-sys-color-primary, #6750a4));--_container-size: var(--md-filled-icon-button-container-size, 40px);--_disabled-container-color: var(--md-filled-icon-button-disabled-container-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.12));--_disabled-icon-color: var(--md-filled-icon-button-disabled-icon-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.38));--_focus-icon-color: var(--md-filled-icon-button-focus-icon-color, var(--md-sys-color-on-primary, #fff));--_focus-state-layer-color: var(--md-filled-icon-button-focus-state-layer-color, var(--md-sys-color-on-primary, #fff));--_focus-state-layer-opacity: var(--md-filled-icon-button-focus-state-layer-opacity, 0.12);--_hover-icon-color: var(--md-filled-icon-button-hover-icon-color, var(--md-sys-color-on-primary, #fff));--_hover-state-layer-color: var(--md-filled-icon-button-hover-state-layer-color, var(--md-sys-color-on-primary, #fff));--_hover-state-layer-opacity: var(--md-filled-icon-button-hover-state-layer-opacity, 0.08);--_icon-color: var(--md-filled-icon-button-icon-color, var(--md-sys-color-on-primary, #fff));--_icon-size: var(--md-filled-icon-button-icon-size, 24px);--_pressed-icon-color: var(--md-filled-icon-button-pressed-icon-color, var(--md-sys-color-on-primary, #fff));--_pressed-state-layer-color: var(--md-filled-icon-button-pressed-state-layer-color, var(--md-sys-color-on-primary, #fff));--_pressed-state-layer-opacity: var(--md-filled-icon-button-pressed-state-layer-opacity, 0.12);--_selected-container-color: var(--md-filled-icon-button-selected-container-color, var(--md-sys-color-primary, #6750a4));--_toggle-selected-focus-icon-color: var(--md-filled-icon-button-toggle-selected-focus-icon-color, var(--md-sys-color-on-primary, #fff));--_toggle-selected-focus-state-layer-color: var(--md-filled-icon-button-toggle-selected-focus-state-layer-color, var(--md-sys-color-on-primary, #fff));--_toggle-selected-hover-icon-color: var(--md-filled-icon-button-toggle-selected-hover-icon-color, var(--md-sys-color-on-primary, #fff));--_toggle-selected-hover-state-layer-color: var(--md-filled-icon-button-toggle-selected-hover-state-layer-color, var(--md-sys-color-on-primary, #fff));--_toggle-selected-icon-color: var(--md-filled-icon-button-toggle-selected-icon-color, var(--md-sys-color-on-primary, #fff));--_toggle-selected-pressed-icon-color: var(--md-filled-icon-button-toggle-selected-pressed-icon-color, var(--md-sys-color-on-primary, #fff));--_toggle-selected-pressed-state-layer-color: var(--md-filled-icon-button-toggle-selected-pressed-state-layer-color, var(--md-sys-color-on-primary, #fff));--_toggle-unselected-focus-icon-color: var(--md-filled-icon-button-toggle-unselected-focus-icon-color, var(--md-sys-color-primary, #6750a4));--_toggle-unselected-focus-state-layer-color: var(--md-filled-icon-button-toggle-unselected-focus-state-layer-color, var(--md-sys-color-primary, #6750a4));--_toggle-unselected-hover-icon-color: var(--md-filled-icon-button-toggle-unselected-hover-icon-color, var(--md-sys-color-primary, #6750a4));--_toggle-unselected-hover-state-layer-color: var(--md-filled-icon-button-toggle-unselected-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_toggle-unselected-icon-color: var(--md-filled-icon-button-toggle-unselected-icon-color, var(--md-sys-color-primary, #6750a4));--_toggle-unselected-pressed-icon-color: var(--md-filled-icon-button-toggle-unselected-pressed-icon-color, var(--md-sys-color-primary, #6750a4));--_toggle-unselected-pressed-state-layer-color: var(--md-filled-icon-button-toggle-unselected-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_unselected-container-color: var(--md-filled-icon-button-unselected-container-color, var(--md-sys-color-surface-variant, #e7e0ec));--md-focus-ring-shape-start-start:var(--md-focus-ring-shape, var(--_container-shape-start-start));--md-focus-ring-shape-start-end:var(--md-focus-ring-shape, var(--_container-shape-start-end));--md-focus-ring-shape-end-end:var(--md-focus-ring-shape, var(--_container-shape-end-end));--md-focus-ring-shape-end-start:var(--md-focus-ring-shape, var(--_container-shape-end-start)))))}.md3-icon-button{background-color:var(--_container-color);color:var(--_icon-color);--md-ripple-focus-color:var(--_focus-state-layer-color);--md-ripple-focus-opacity:var(--_focus-state-layer-opacity);--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)}.md3-icon-button:hover{color:var(--_hover-icon-color)}.md3-icon-button:focus{color:var(--_focus-icon-color)}.md3-icon-button:active{color:var(--_pressed-icon-color)}.md3-icon-button:disabled{background-color:var(--_disabled-container-color);color:var(--_disabled-icon-color)}.md3-icon-button--toggle-filled{--md-ripple-focus-color:var(--_toggle-unselected-focus-state-layer-color);--md-ripple-hover-color:var(--_toggle-unselected-hover-state-layer-color);--md-ripple-pressed-color:var(--_toggle-unselected-pressed-state-layer-color)}.md3-icon-button--toggle-filled:not(:disabled){background-color:var(--_unselected-container-color);color:var(--_toggle-unselected-icon-color)}.md3-icon-button--toggle-filled:not(:disabled):hover{color:var(--_toggle-unselected-hover-icon-color)}.md3-icon-button--toggle-filled:not(:disabled):focus{color:var(--_toggle-unselected-focus-icon-color)}.md3-icon-button--toggle-filled:not(:disabled):active{color:var(--_toggle-unselected-pressed-icon-color)}.md3-icon-button--selected{--md-ripple-focus-color:var(--_toggle-selected-focus-state-layer-color);--md-ripple-hover-color:var(--_toggle-selected-hover-state-layer-color);--md-ripple-pressed-color:var(--_toggle-selected-pressed-state-layer-color)}.md3-icon-button--selected:not(:disabled){background-color:var(--_selected-container-color);color:var(--_toggle-selected-icon-color)}.md3-icon-button--selected:not(:disabled):hover{color:var(--_toggle-selected-hover-icon-color)}.md3-icon-button--selected:not(:disabled):focus{color:var(--_toggle-selected-focus-icon-color)}.md3-icon-button--selected:not(:disabled):active{color:var(--_toggle-selected-pressed-icon-color)}/*# sourceMappingURL=filled-styles.css.map */
8
8
  `;
9
9
  //# sourceMappingURL=filled-styles.css.js.map
package/iconbutton/lib/filled-styles.css.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"filled-styles.css.js","sourceRoot":"","sources":["filled-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-start-start: var(--md-filled-icon-button-container-shape-start-start, 9999px);--_container-shape-start-end: var(--md-filled-icon-button-container-shape-start-end, 9999px);--_container-shape-end-end: var(--md-filled-icon-button-container-shape-end-end, 9999px);--_container-shape-end-start: var(--md-filled-icon-button-container-shape-end-start, 9999px);--_container-color: var(--md-filled-icon-button-container-color, var(--md-sys-color-primary, #6750a4));--_container-size: var(--md-filled-icon-button-container-size, 40px);--_disabled-container-color: var(--md-filled-icon-button-disabled-container-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.12));--_disabled-icon-color: var(--md-filled-icon-button-disabled-icon-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.38));--_focus-icon-color: var(--md-filled-icon-button-focus-icon-color, var(--md-sys-color-on-primary, #fff));--_focus-state-layer-color: var(--md-filled-icon-button-focus-state-layer-color, var(--md-sys-color-on-primary, #fff));--_focus-state-layer-opacity: var(--md-filled-icon-button-focus-state-layer-opacity, 0.12);--_hover-icon-color: var(--md-filled-icon-button-hover-icon-color, var(--md-sys-color-on-primary, #fff));--_hover-state-layer-color: var(--md-filled-icon-button-hover-state-layer-color, var(--md-sys-color-on-primary, #fff));--_hover-state-layer-opacity: var(--md-filled-icon-button-hover-state-layer-opacity, 0.08);--_icon-color: var(--md-filled-icon-button-icon-color, var(--md-sys-color-on-primary, #fff));--_icon-size: var(--md-filled-icon-button-icon-size, 24px);--_pressed-icon-color: var(--md-filled-icon-button-pressed-icon-color, var(--md-sys-color-on-primary, #fff));--_pressed-state-layer-color: var(--md-filled-icon-button-pressed-state-layer-color, var(--md-sys-color-on-primary, #fff));--_pressed-state-layer-opacity: var(--md-filled-icon-button-pressed-state-layer-opacity, 0.12);--_selected-container-color: var(--md-filled-icon-button-selected-container-color, var(--md-sys-color-primary, #6750a4));--_toggle-selected-focus-icon-color: var(--md-filled-icon-button-toggle-selected-focus-icon-color, var(--md-sys-color-on-primary, #fff));--_toggle-selected-focus-state-layer-color: var(--md-filled-icon-button-toggle-selected-focus-state-layer-color, var(--md-sys-color-on-primary, #fff));--_toggle-selected-hover-icon-color: var(--md-filled-icon-button-toggle-selected-hover-icon-color, var(--md-sys-color-on-primary, #fff));--_toggle-selected-hover-state-layer-color: var(--md-filled-icon-button-toggle-selected-hover-state-layer-color, var(--md-sys-color-on-primary, #fff));--_toggle-selected-icon-color: var(--md-filled-icon-button-toggle-selected-icon-color, var(--md-sys-color-on-primary, #fff));--_toggle-selected-pressed-icon-color: var(--md-filled-icon-button-toggle-selected-pressed-icon-color, var(--md-sys-color-on-primary, #fff));--_toggle-selected-pressed-state-layer-color: var(--md-filled-icon-button-toggle-selected-pressed-state-layer-color, var(--md-sys-color-on-primary, #fff));--_toggle-unselected-focus-icon-color: var(--md-filled-icon-button-toggle-unselected-focus-icon-color, var(--md-sys-color-primary, #6750a4));--_toggle-unselected-focus-state-layer-color: var(--md-filled-icon-button-toggle-unselected-focus-state-layer-color, var(--md-sys-color-primary, #6750a4));--_toggle-unselected-hover-icon-color: var(--md-filled-icon-button-toggle-unselected-hover-icon-color, var(--md-sys-color-primary, #6750a4));--_toggle-unselected-hover-state-layer-color: var(--md-filled-icon-button-toggle-unselected-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_toggle-unselected-icon-color: var(--md-filled-icon-button-toggle-unselected-icon-color, var(--md-sys-color-primary, #6750a4));--_toggle-unselected-pressed-icon-color: var(--md-filled-icon-button-toggle-unselected-pressed-icon-color, var(--md-sys-color-primary, #6750a4));--_toggle-unselected-pressed-state-layer-color: var(--md-filled-icon-button-toggle-unselected-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_unselected-container-color: var(--md-filled-icon-button-unselected-container-color, var(--md-sys-color-surface-variant, #e7e0ec));--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)}.md3-icon-button{background-color:var(--_container-color);color:var(--_icon-color);--md-ripple-focus-state-layer-color:var(--_focus-state-layer-color);--md-ripple-focus-state-layer-opacity:var(--_focus-state-layer-opacity);--md-ripple-hover-state-layer-color:var(--_hover-state-layer-color);--md-ripple-hover-state-layer-opacity:var(--_hover-state-layer-opacity);--md-ripple-pressed-state-layer-color:var(--_pressed-state-layer-color);--md-ripple-pressed-state-layer-opacity:var(--_pressed-state-layer-opacity)}.md3-icon-button:hover{color:var(--_hover-icon-color)}.md3-icon-button:focus{color:var(--_focus-icon-color)}.md3-icon-button:active{color:var(--_pressed-icon-color)}.md3-icon-button:disabled{background-color:var(--_disabled-container-color);color:var(--_disabled-icon-color)}.md3-icon-button--toggle-filled{--md-ripple-focus-state-layer-color:var(--_toggle-unselected-focus-state-layer-color);--md-ripple-hover-state-layer-color:var(--_toggle-unselected-hover-state-layer-color);--md-ripple-pressed-state-layer-color:var(--_toggle-unselected-pressed-state-layer-color)}.md3-icon-button--toggle-filled:not(:disabled){background-color:var(--_unselected-container-color);color:var(--_toggle-unselected-icon-color)}.md3-icon-button--toggle-filled:not(:disabled):hover{color:var(--_toggle-unselected-hover-icon-color)}.md3-icon-button--toggle-filled:not(:disabled):focus{color:var(--_toggle-unselected-focus-icon-color)}.md3-icon-button--toggle-filled:not(:disabled):active{color:var(--_toggle-unselected-pressed-icon-color)}.md3-icon-button--on{--md-ripple-focus-state-layer-color:var(--_toggle-selected-focus-state-layer-color);--md-ripple-hover-state-layer-color:var(--_toggle-selected-hover-state-layer-color);--md-ripple-pressed-state-layer-color:var(--_toggle-selected-pressed-state-layer-color)}.md3-icon-button--on:not(:disabled){background-color:var(--_selected-container-color);color:var(--_toggle-selected-icon-color)}.md3-icon-button--on:not(:disabled):hover{color:var(--_toggle-selected-hover-icon-color)}.md3-icon-button--on:not(:disabled):focus{color:var(--_toggle-selected-focus-icon-color)}.md3-icon-button--on:not(:disabled):active{color:var(--_toggle-selected-pressed-icon-color)}/*# sourceMappingURL=filled-styles.css.map */\n`;\n "]}
1
+ {"version":3,"file":"filled-styles.css.js","sourceRoot":"","sources":["filled-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-start-start: var(--md-filled-icon-button-container-shape-start-start, var(--md-filled-icon-button-container-shape, 9999px));--_container-shape-start-end: var(--md-filled-icon-button-container-shape-start-end, var(--md-filled-icon-button-container-shape, 9999px));--_container-shape-end-end: var(--md-filled-icon-button-container-shape-end-end, var(--md-filled-icon-button-container-shape, 9999px));--_container-shape-end-start: var(--md-filled-icon-button-container-shape-end-start, var(--md-filled-icon-button-container-shape, 9999px));--_container-color: var(--md-filled-icon-button-container-color, var(--md-sys-color-primary, #6750a4));--_container-size: var(--md-filled-icon-button-container-size, 40px);--_disabled-container-color: var(--md-filled-icon-button-disabled-container-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.12));--_disabled-icon-color: var(--md-filled-icon-button-disabled-icon-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.38));--_focus-icon-color: var(--md-filled-icon-button-focus-icon-color, var(--md-sys-color-on-primary, #fff));--_focus-state-layer-color: var(--md-filled-icon-button-focus-state-layer-color, var(--md-sys-color-on-primary, #fff));--_focus-state-layer-opacity: var(--md-filled-icon-button-focus-state-layer-opacity, 0.12);--_hover-icon-color: var(--md-filled-icon-button-hover-icon-color, var(--md-sys-color-on-primary, #fff));--_hover-state-layer-color: var(--md-filled-icon-button-hover-state-layer-color, var(--md-sys-color-on-primary, #fff));--_hover-state-layer-opacity: var(--md-filled-icon-button-hover-state-layer-opacity, 0.08);--_icon-color: var(--md-filled-icon-button-icon-color, var(--md-sys-color-on-primary, #fff));--_icon-size: var(--md-filled-icon-button-icon-size, 24px);--_pressed-icon-color: var(--md-filled-icon-button-pressed-icon-color, var(--md-sys-color-on-primary, #fff));--_pressed-state-layer-color: var(--md-filled-icon-button-pressed-state-layer-color, var(--md-sys-color-on-primary, #fff));--_pressed-state-layer-opacity: var(--md-filled-icon-button-pressed-state-layer-opacity, 0.12);--_selected-container-color: var(--md-filled-icon-button-selected-container-color, var(--md-sys-color-primary, #6750a4));--_toggle-selected-focus-icon-color: var(--md-filled-icon-button-toggle-selected-focus-icon-color, var(--md-sys-color-on-primary, #fff));--_toggle-selected-focus-state-layer-color: var(--md-filled-icon-button-toggle-selected-focus-state-layer-color, var(--md-sys-color-on-primary, #fff));--_toggle-selected-hover-icon-color: var(--md-filled-icon-button-toggle-selected-hover-icon-color, var(--md-sys-color-on-primary, #fff));--_toggle-selected-hover-state-layer-color: var(--md-filled-icon-button-toggle-selected-hover-state-layer-color, var(--md-sys-color-on-primary, #fff));--_toggle-selected-icon-color: var(--md-filled-icon-button-toggle-selected-icon-color, var(--md-sys-color-on-primary, #fff));--_toggle-selected-pressed-icon-color: var(--md-filled-icon-button-toggle-selected-pressed-icon-color, var(--md-sys-color-on-primary, #fff));--_toggle-selected-pressed-state-layer-color: var(--md-filled-icon-button-toggle-selected-pressed-state-layer-color, var(--md-sys-color-on-primary, #fff));--_toggle-unselected-focus-icon-color: var(--md-filled-icon-button-toggle-unselected-focus-icon-color, var(--md-sys-color-primary, #6750a4));--_toggle-unselected-focus-state-layer-color: var(--md-filled-icon-button-toggle-unselected-focus-state-layer-color, var(--md-sys-color-primary, #6750a4));--_toggle-unselected-hover-icon-color: var(--md-filled-icon-button-toggle-unselected-hover-icon-color, var(--md-sys-color-primary, #6750a4));--_toggle-unselected-hover-state-layer-color: var(--md-filled-icon-button-toggle-unselected-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_toggle-unselected-icon-color: var(--md-filled-icon-button-toggle-unselected-icon-color, var(--md-sys-color-primary, #6750a4));--_toggle-unselected-pressed-icon-color: var(--md-filled-icon-button-toggle-unselected-pressed-icon-color, var(--md-sys-color-primary, #6750a4));--_toggle-unselected-pressed-state-layer-color: var(--md-filled-icon-button-toggle-unselected-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_unselected-container-color: var(--md-filled-icon-button-unselected-container-color, var(--md-sys-color-surface-variant, #e7e0ec));--md-focus-ring-shape-start-start:var(--md-focus-ring-shape, var(--_container-shape-start-start));--md-focus-ring-shape-start-end:var(--md-focus-ring-shape, var(--_container-shape-start-end));--md-focus-ring-shape-end-end:var(--md-focus-ring-shape, var(--_container-shape-end-end));--md-focus-ring-shape-end-start:var(--md-focus-ring-shape, var(--_container-shape-end-start)))))}.md3-icon-button{background-color:var(--_container-color);color:var(--_icon-color);--md-ripple-focus-color:var(--_focus-state-layer-color);--md-ripple-focus-opacity:var(--_focus-state-layer-opacity);--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)}.md3-icon-button:hover{color:var(--_hover-icon-color)}.md3-icon-button:focus{color:var(--_focus-icon-color)}.md3-icon-button:active{color:var(--_pressed-icon-color)}.md3-icon-button:disabled{background-color:var(--_disabled-container-color);color:var(--_disabled-icon-color)}.md3-icon-button--toggle-filled{--md-ripple-focus-color:var(--_toggle-unselected-focus-state-layer-color);--md-ripple-hover-color:var(--_toggle-unselected-hover-state-layer-color);--md-ripple-pressed-color:var(--_toggle-unselected-pressed-state-layer-color)}.md3-icon-button--toggle-filled:not(:disabled){background-color:var(--_unselected-container-color);color:var(--_toggle-unselected-icon-color)}.md3-icon-button--toggle-filled:not(:disabled):hover{color:var(--_toggle-unselected-hover-icon-color)}.md3-icon-button--toggle-filled:not(:disabled):focus{color:var(--_toggle-unselected-focus-icon-color)}.md3-icon-button--toggle-filled:not(:disabled):active{color:var(--_toggle-unselected-pressed-icon-color)}.md3-icon-button--selected{--md-ripple-focus-color:var(--_toggle-selected-focus-state-layer-color);--md-ripple-hover-color:var(--_toggle-selected-hover-state-layer-color);--md-ripple-pressed-color:var(--_toggle-selected-pressed-state-layer-color)}.md3-icon-button--selected:not(:disabled){background-color:var(--_selected-container-color);color:var(--_toggle-selected-icon-color)}.md3-icon-button--selected:not(:disabled):hover{color:var(--_toggle-selected-hover-icon-color)}.md3-icon-button--selected:not(:disabled):focus{color:var(--_toggle-selected-focus-icon-color)}.md3-icon-button--selected:not(:disabled):active{color:var(--_toggle-selected-pressed-icon-color)}/*# sourceMappingURL=filled-styles.css.map */\n`;\n "]}
package/iconbutton/lib/filled-styles.scss CHANGED
@@ -3,6 +3,8 @@
3
3
  // SPDX-License-Identifier: Apache-2.0
4
4
  //
5
5
 
6
+ // go/keep-sorted start
6
7
  @use './filled-icon-button';
8
+ // go/keep-sorted end
7
9
 
8
10
  @include filled-icon-button.styles;
package/iconbutton/lib/filled-tonal-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-start-start: var(--md-filled-tonal-icon-button-container-shape-start-start, 9999px);--_container-shape-start-end: var(--md-filled-tonal-icon-button-container-shape-start-end, 9999px);--_container-shape-end-end: var(--md-filled-tonal-icon-button-container-shape-end-end, 9999px);--_container-shape-end-start: var(--md-filled-tonal-icon-button-container-shape-end-start, 9999px);--_container-color: var(--md-filled-tonal-icon-button-container-color, var(--md-sys-color-secondary-container, #e8def8));--_container-size: var(--md-filled-tonal-icon-button-container-size, 40px);--_disabled-container-color: var(--md-filled-tonal-icon-button-disabled-container-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.12));--_disabled-icon-color: var(--md-filled-tonal-icon-button-disabled-icon-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.38));--_focus-icon-color: var(--md-filled-tonal-icon-button-focus-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_focus-state-layer-color: var(--md-filled-tonal-icon-button-focus-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_focus-state-layer-opacity: var(--md-filled-tonal-icon-button-focus-state-layer-opacity, 0.12);--_hover-icon-color: var(--md-filled-tonal-icon-button-hover-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_hover-state-layer-color: var(--md-filled-tonal-icon-button-hover-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_hover-state-layer-opacity: var(--md-filled-tonal-icon-button-hover-state-layer-opacity, 0.08);--_icon-color: var(--md-filled-tonal-icon-button-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_icon-size: var(--md-filled-tonal-icon-button-icon-size, 24px);--_pressed-icon-color: var(--md-filled-tonal-icon-button-pressed-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_pressed-state-layer-color: var(--md-filled-tonal-icon-button-pressed-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_pressed-state-layer-opacity: var(--md-filled-tonal-icon-button-pressed-state-layer-opacity, 0.12);--_selected-container-color: var(--md-filled-tonal-icon-button-selected-container-color, var(--md-sys-color-secondary-container, #e8def8));--_toggle-selected-focus-icon-color: var(--md-filled-tonal-icon-button-toggle-selected-focus-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_toggle-selected-focus-state-layer-color: var(--md-filled-tonal-icon-button-toggle-selected-focus-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_toggle-selected-hover-icon-color: var(--md-filled-tonal-icon-button-toggle-selected-hover-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_toggle-selected-hover-state-layer-color: var(--md-filled-tonal-icon-button-toggle-selected-hover-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_toggle-selected-icon-color: var(--md-filled-tonal-icon-button-toggle-selected-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_toggle-selected-pressed-icon-color: var(--md-filled-tonal-icon-button-toggle-selected-pressed-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_toggle-selected-pressed-state-layer-color: var(--md-filled-tonal-icon-button-toggle-selected-pressed-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_toggle-unselected-focus-icon-color: var(--md-filled-tonal-icon-button-toggle-unselected-focus-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_toggle-unselected-focus-state-layer-color: var(--md-filled-tonal-icon-button-toggle-unselected-focus-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_toggle-unselected-hover-icon-color: var(--md-filled-tonal-icon-button-toggle-unselected-hover-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_toggle-unselected-hover-state-layer-color: var(--md-filled-tonal-icon-button-toggle-unselected-hover-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_toggle-unselected-icon-color: var(--md-filled-tonal-icon-button-toggle-unselected-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_toggle-unselected-pressed-icon-color: var(--md-filled-tonal-icon-button-toggle-unselected-pressed-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_toggle-unselected-pressed-state-layer-color: var(--md-filled-tonal-icon-button-toggle-unselected-pressed-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_unselected-container-color: var(--md-filled-tonal-icon-button-unselected-container-color, var(--md-sys-color-surface-variant, #e7e0ec));--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)}.md3-icon-button{background-color:var(--_container-color);color:var(--_icon-color);--md-ripple-focus-state-layer-color:var(--_focus-state-layer-color);--md-ripple-focus-state-layer-opacity:var(--_focus-state-layer-opacity);--md-ripple-hover-state-layer-color:var(--_hover-state-layer-color);--md-ripple-hover-state-layer-opacity:var(--_hover-state-layer-opacity);--md-ripple-pressed-state-layer-color:var(--_pressed-state-layer-color);--md-ripple-pressed-state-layer-opacity:var(--_pressed-state-layer-opacity)}.md3-icon-button:hover{color:var(--_hover-icon-color)}.md3-icon-button:focus{color:var(--_focus-icon-color)}.md3-icon-button:active{color:var(--_pressed-icon-color)}.md3-icon-button:disabled{background-color:var(--_disabled-container-color);color:var(--_disabled-icon-color)}.md3-icon-button--toggle-filled-tonal{--md-ripple-focus-state-layer-color:var(--_toggle-unselected-focus-state-layer-color);--md-ripple-hover-state-layer-color:var(--_toggle-unselected-hover-state-layer-color);--md-ripple-pressed-state-layer-color:var(--_toggle-unselected-pressed-state-layer-color)}.md3-icon-button--toggle-filled-tonal:not(:disabled){background-color:var(--_unselected-container-color);color:var(--_toggle-unselected-icon-color)}.md3-icon-button--toggle-filled-tonal:not(:disabled):hover{color:var(--_toggle-unselected-hover-icon-color)}.md3-icon-button--toggle-filled-tonal:not(:disabled):focus{color:var(--_toggle-unselected-focus-icon-color)}.md3-icon-button--toggle-filled-tonal:not(:disabled):active{color:var(--_toggle-unselected-pressed-icon-color)}.md3-icon-button--on{--md-ripple-focus-state-layer-color:var(--_toggle-selected-focus-state-layer-color);--md-ripple-hover-state-layer-color:var(--_toggle-selected-hover-state-layer-color);--md-ripple-pressed-state-layer-color:var(--_toggle-selected-pressed-state-layer-color)}.md3-icon-button--on:not(:disabled){background-color:var(--_selected-container-color);color:var(--_toggle-selected-icon-color)}.md3-icon-button--on:not(:disabled):hover{color:var(--_toggle-selected-hover-icon-color)}.md3-icon-button--on:not(:disabled):focus{color:var(--_toggle-selected-focus-icon-color)}.md3-icon-button--on:not(:disabled):active{color:var(--_toggle-selected-pressed-icon-color)}/*# sourceMappingURL=filled-tonal-styles.css.map */
7
+ export const styles = css `:host{--_container-shape-start-start: var(--md-filled-tonal-icon-button-container-shape-start-start, var(--md-filled-tonal-icon-button-container-shape, 9999px));--_container-shape-start-end: var(--md-filled-tonal-icon-button-container-shape-start-end, var(--md-filled-tonal-icon-button-container-shape, 9999px));--_container-shape-end-end: var(--md-filled-tonal-icon-button-container-shape-end-end, var(--md-filled-tonal-icon-button-container-shape, 9999px));--_container-shape-end-start: var(--md-filled-tonal-icon-button-container-shape-end-start, var(--md-filled-tonal-icon-button-container-shape, 9999px));--_container-color: var(--md-filled-tonal-icon-button-container-color, var(--md-sys-color-secondary-container, #e8def8));--_container-size: var(--md-filled-tonal-icon-button-container-size, 40px);--_disabled-container-color: var(--md-filled-tonal-icon-button-disabled-container-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.12));--_disabled-icon-color: var(--md-filled-tonal-icon-button-disabled-icon-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.38));--_focus-icon-color: var(--md-filled-tonal-icon-button-focus-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_focus-state-layer-color: var(--md-filled-tonal-icon-button-focus-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_focus-state-layer-opacity: var(--md-filled-tonal-icon-button-focus-state-layer-opacity, 0.12);--_hover-icon-color: var(--md-filled-tonal-icon-button-hover-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_hover-state-layer-color: var(--md-filled-tonal-icon-button-hover-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_hover-state-layer-opacity: var(--md-filled-tonal-icon-button-hover-state-layer-opacity, 0.08);--_icon-color: var(--md-filled-tonal-icon-button-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_icon-size: var(--md-filled-tonal-icon-button-icon-size, 24px);--_pressed-icon-color: var(--md-filled-tonal-icon-button-pressed-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_pressed-state-layer-color: var(--md-filled-tonal-icon-button-pressed-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_pressed-state-layer-opacity: var(--md-filled-tonal-icon-button-pressed-state-layer-opacity, 0.12);--_selected-container-color: var(--md-filled-tonal-icon-button-selected-container-color, var(--md-sys-color-secondary-container, #e8def8));--_toggle-selected-focus-icon-color: var(--md-filled-tonal-icon-button-toggle-selected-focus-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_toggle-selected-focus-state-layer-color: var(--md-filled-tonal-icon-button-toggle-selected-focus-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_toggle-selected-hover-icon-color: var(--md-filled-tonal-icon-button-toggle-selected-hover-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_toggle-selected-hover-state-layer-color: var(--md-filled-tonal-icon-button-toggle-selected-hover-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_toggle-selected-icon-color: var(--md-filled-tonal-icon-button-toggle-selected-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_toggle-selected-pressed-icon-color: var(--md-filled-tonal-icon-button-toggle-selected-pressed-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_toggle-selected-pressed-state-layer-color: var(--md-filled-tonal-icon-button-toggle-selected-pressed-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_toggle-unselected-focus-icon-color: var(--md-filled-tonal-icon-button-toggle-unselected-focus-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_toggle-unselected-focus-state-layer-color: var(--md-filled-tonal-icon-button-toggle-unselected-focus-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_toggle-unselected-hover-icon-color: var(--md-filled-tonal-icon-button-toggle-unselected-hover-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_toggle-unselected-hover-state-layer-color: var(--md-filled-tonal-icon-button-toggle-unselected-hover-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_toggle-unselected-icon-color: var(--md-filled-tonal-icon-button-toggle-unselected-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_toggle-unselected-pressed-icon-color: var(--md-filled-tonal-icon-button-toggle-unselected-pressed-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_toggle-unselected-pressed-state-layer-color: var(--md-filled-tonal-icon-button-toggle-unselected-pressed-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_unselected-container-color: var(--md-filled-tonal-icon-button-unselected-container-color, var(--md-sys-color-surface-variant, #e7e0ec));--md-focus-ring-shape-start-start:var(--md-focus-ring-shape, var(--_container-shape-start-start));--md-focus-ring-shape-start-end:var(--md-focus-ring-shape, var(--_container-shape-start-end));--md-focus-ring-shape-end-end:var(--md-focus-ring-shape, var(--_container-shape-end-end));--md-focus-ring-shape-end-start:var(--md-focus-ring-shape, var(--_container-shape-end-start)))))}.md3-icon-button{background-color:var(--_container-color);color:var(--_icon-color);--md-ripple-focus-color:var(--_focus-state-layer-color);--md-ripple-focus-opacity:var(--_focus-state-layer-opacity);--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)}.md3-icon-button:hover{color:var(--_hover-icon-color)}.md3-icon-button:focus{color:var(--_focus-icon-color)}.md3-icon-button:active{color:var(--_pressed-icon-color)}.md3-icon-button:disabled{background-color:var(--_disabled-container-color);color:var(--_disabled-icon-color)}.md3-icon-button--toggle-filled-tonal{--md-ripple-focus-color:var(--_toggle-unselected-focus-state-layer-color);--md-ripple-hover-color:var(--_toggle-unselected-hover-state-layer-color);--md-ripple-pressed-color:var(--_toggle-unselected-pressed-state-layer-color)}.md3-icon-button--toggle-filled-tonal:not(:disabled){background-color:var(--_unselected-container-color);color:var(--_toggle-unselected-icon-color)}.md3-icon-button--toggle-filled-tonal:not(:disabled):hover{color:var(--_toggle-unselected-hover-icon-color)}.md3-icon-button--toggle-filled-tonal:not(:disabled):focus{color:var(--_toggle-unselected-focus-icon-color)}.md3-icon-button--toggle-filled-tonal:not(:disabled):active{color:var(--_toggle-unselected-pressed-icon-color)}.md3-icon-button--selected{--md-ripple-focus-color:var(--_toggle-selected-focus-state-layer-color);--md-ripple-hover-color:var(--_toggle-selected-hover-state-layer-color);--md-ripple-pressed-color:var(--_toggle-selected-pressed-state-layer-color)}.md3-icon-button--selected:not(:disabled){background-color:var(--_selected-container-color);color:var(--_toggle-selected-icon-color)}.md3-icon-button--selected:not(:disabled):hover{color:var(--_toggle-selected-hover-icon-color)}.md3-icon-button--selected:not(:disabled):focus{color:var(--_toggle-selected-focus-icon-color)}.md3-icon-button--selected:not(:disabled):active{color:var(--_toggle-selected-pressed-icon-color)}/*# sourceMappingURL=filled-tonal-styles.css.map */
8
8
  `;
9
9
  //# sourceMappingURL=filled-tonal-styles.css.js.map
package/iconbutton/lib/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-shape-start-start: var(--md-filled-tonal-icon-button-container-shape-start-start, 9999px);--_container-shape-start-end: var(--md-filled-tonal-icon-button-container-shape-start-end, 9999px);--_container-shape-end-end: var(--md-filled-tonal-icon-button-container-shape-end-end, 9999px);--_container-shape-end-start: var(--md-filled-tonal-icon-button-container-shape-end-start, 9999px);--_container-color: var(--md-filled-tonal-icon-button-container-color, var(--md-sys-color-secondary-container, #e8def8));--_container-size: var(--md-filled-tonal-icon-button-container-size, 40px);--_disabled-container-color: var(--md-filled-tonal-icon-button-disabled-container-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.12));--_disabled-icon-color: var(--md-filled-tonal-icon-button-disabled-icon-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.38));--_focus-icon-color: var(--md-filled-tonal-icon-button-focus-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_focus-state-layer-color: var(--md-filled-tonal-icon-button-focus-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_focus-state-layer-opacity: var(--md-filled-tonal-icon-button-focus-state-layer-opacity, 0.12);--_hover-icon-color: var(--md-filled-tonal-icon-button-hover-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_hover-state-layer-color: var(--md-filled-tonal-icon-button-hover-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_hover-state-layer-opacity: var(--md-filled-tonal-icon-button-hover-state-layer-opacity, 0.08);--_icon-color: var(--md-filled-tonal-icon-button-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_icon-size: var(--md-filled-tonal-icon-button-icon-size, 24px);--_pressed-icon-color: var(--md-filled-tonal-icon-button-pressed-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_pressed-state-layer-color: var(--md-filled-tonal-icon-button-pressed-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_pressed-state-layer-opacity: var(--md-filled-tonal-icon-button-pressed-state-layer-opacity, 0.12);--_selected-container-color: var(--md-filled-tonal-icon-button-selected-container-color, var(--md-sys-color-secondary-container, #e8def8));--_toggle-selected-focus-icon-color: var(--md-filled-tonal-icon-button-toggle-selected-focus-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_toggle-selected-focus-state-layer-color: var(--md-filled-tonal-icon-button-toggle-selected-focus-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_toggle-selected-hover-icon-color: var(--md-filled-tonal-icon-button-toggle-selected-hover-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_toggle-selected-hover-state-layer-color: var(--md-filled-tonal-icon-button-toggle-selected-hover-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_toggle-selected-icon-color: var(--md-filled-tonal-icon-button-toggle-selected-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_toggle-selected-pressed-icon-color: var(--md-filled-tonal-icon-button-toggle-selected-pressed-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_toggle-selected-pressed-state-layer-color: var(--md-filled-tonal-icon-button-toggle-selected-pressed-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_toggle-unselected-focus-icon-color: var(--md-filled-tonal-icon-button-toggle-unselected-focus-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_toggle-unselected-focus-state-layer-color: var(--md-filled-tonal-icon-button-toggle-unselected-focus-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_toggle-unselected-hover-icon-color: var(--md-filled-tonal-icon-button-toggle-unselected-hover-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_toggle-unselected-hover-state-layer-color: var(--md-filled-tonal-icon-button-toggle-unselected-hover-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_toggle-unselected-icon-color: var(--md-filled-tonal-icon-button-toggle-unselected-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_toggle-unselected-pressed-icon-color: var(--md-filled-tonal-icon-button-toggle-unselected-pressed-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_toggle-unselected-pressed-state-layer-color: var(--md-filled-tonal-icon-button-toggle-unselected-pressed-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_unselected-container-color: var(--md-filled-tonal-icon-button-unselected-container-color, var(--md-sys-color-surface-variant, #e7e0ec));--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)}.md3-icon-button{background-color:var(--_container-color);color:var(--_icon-color);--md-ripple-focus-state-layer-color:var(--_focus-state-layer-color);--md-ripple-focus-state-layer-opacity:var(--_focus-state-layer-opacity);--md-ripple-hover-state-layer-color:var(--_hover-state-layer-color);--md-ripple-hover-state-layer-opacity:var(--_hover-state-layer-opacity);--md-ripple-pressed-state-layer-color:var(--_pressed-state-layer-color);--md-ripple-pressed-state-layer-opacity:var(--_pressed-state-layer-opacity)}.md3-icon-button:hover{color:var(--_hover-icon-color)}.md3-icon-button:focus{color:var(--_focus-icon-color)}.md3-icon-button:active{color:var(--_pressed-icon-color)}.md3-icon-button:disabled{background-color:var(--_disabled-container-color);color:var(--_disabled-icon-color)}.md3-icon-button--toggle-filled-tonal{--md-ripple-focus-state-layer-color:var(--_toggle-unselected-focus-state-layer-color);--md-ripple-hover-state-layer-color:var(--_toggle-unselected-hover-state-layer-color);--md-ripple-pressed-state-layer-color:var(--_toggle-unselected-pressed-state-layer-color)}.md3-icon-button--toggle-filled-tonal:not(:disabled){background-color:var(--_unselected-container-color);color:var(--_toggle-unselected-icon-color)}.md3-icon-button--toggle-filled-tonal:not(:disabled):hover{color:var(--_toggle-unselected-hover-icon-color)}.md3-icon-button--toggle-filled-tonal:not(:disabled):focus{color:var(--_toggle-unselected-focus-icon-color)}.md3-icon-button--toggle-filled-tonal:not(:disabled):active{color:var(--_toggle-unselected-pressed-icon-color)}.md3-icon-button--on{--md-ripple-focus-state-layer-color:var(--_toggle-selected-focus-state-layer-color);--md-ripple-hover-state-layer-color:var(--_toggle-selected-hover-state-layer-color);--md-ripple-pressed-state-layer-color:var(--_toggle-selected-pressed-state-layer-color)}.md3-icon-button--on:not(:disabled){background-color:var(--_selected-container-color);color:var(--_toggle-selected-icon-color)}.md3-icon-button--on:not(:disabled):hover{color:var(--_toggle-selected-hover-icon-color)}.md3-icon-button--on:not(:disabled):focus{color:var(--_toggle-selected-focus-icon-color)}.md3-icon-button--on:not(:disabled):active{color:var(--_toggle-selected-pressed-icon-color)}/*# 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-shape-start-start: var(--md-filled-tonal-icon-button-container-shape-start-start, var(--md-filled-tonal-icon-button-container-shape, 9999px));--_container-shape-start-end: var(--md-filled-tonal-icon-button-container-shape-start-end, var(--md-filled-tonal-icon-button-container-shape, 9999px));--_container-shape-end-end: var(--md-filled-tonal-icon-button-container-shape-end-end, var(--md-filled-tonal-icon-button-container-shape, 9999px));--_container-shape-end-start: var(--md-filled-tonal-icon-button-container-shape-end-start, var(--md-filled-tonal-icon-button-container-shape, 9999px));--_container-color: var(--md-filled-tonal-icon-button-container-color, var(--md-sys-color-secondary-container, #e8def8));--_container-size: var(--md-filled-tonal-icon-button-container-size, 40px);--_disabled-container-color: var(--md-filled-tonal-icon-button-disabled-container-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.12));--_disabled-icon-color: var(--md-filled-tonal-icon-button-disabled-icon-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.38));--_focus-icon-color: var(--md-filled-tonal-icon-button-focus-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_focus-state-layer-color: var(--md-filled-tonal-icon-button-focus-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_focus-state-layer-opacity: var(--md-filled-tonal-icon-button-focus-state-layer-opacity, 0.12);--_hover-icon-color: var(--md-filled-tonal-icon-button-hover-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_hover-state-layer-color: var(--md-filled-tonal-icon-button-hover-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_hover-state-layer-opacity: var(--md-filled-tonal-icon-button-hover-state-layer-opacity, 0.08);--_icon-color: var(--md-filled-tonal-icon-button-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_icon-size: var(--md-filled-tonal-icon-button-icon-size, 24px);--_pressed-icon-color: var(--md-filled-tonal-icon-button-pressed-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_pressed-state-layer-color: var(--md-filled-tonal-icon-button-pressed-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_pressed-state-layer-opacity: var(--md-filled-tonal-icon-button-pressed-state-layer-opacity, 0.12);--_selected-container-color: var(--md-filled-tonal-icon-button-selected-container-color, var(--md-sys-color-secondary-container, #e8def8));--_toggle-selected-focus-icon-color: var(--md-filled-tonal-icon-button-toggle-selected-focus-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_toggle-selected-focus-state-layer-color: var(--md-filled-tonal-icon-button-toggle-selected-focus-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_toggle-selected-hover-icon-color: var(--md-filled-tonal-icon-button-toggle-selected-hover-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_toggle-selected-hover-state-layer-color: var(--md-filled-tonal-icon-button-toggle-selected-hover-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_toggle-selected-icon-color: var(--md-filled-tonal-icon-button-toggle-selected-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_toggle-selected-pressed-icon-color: var(--md-filled-tonal-icon-button-toggle-selected-pressed-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_toggle-selected-pressed-state-layer-color: var(--md-filled-tonal-icon-button-toggle-selected-pressed-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_toggle-unselected-focus-icon-color: var(--md-filled-tonal-icon-button-toggle-unselected-focus-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_toggle-unselected-focus-state-layer-color: var(--md-filled-tonal-icon-button-toggle-unselected-focus-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_toggle-unselected-hover-icon-color: var(--md-filled-tonal-icon-button-toggle-unselected-hover-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_toggle-unselected-hover-state-layer-color: var(--md-filled-tonal-icon-button-toggle-unselected-hover-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_toggle-unselected-icon-color: var(--md-filled-tonal-icon-button-toggle-unselected-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_toggle-unselected-pressed-icon-color: var(--md-filled-tonal-icon-button-toggle-unselected-pressed-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_toggle-unselected-pressed-state-layer-color: var(--md-filled-tonal-icon-button-toggle-unselected-pressed-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_unselected-container-color: var(--md-filled-tonal-icon-button-unselected-container-color, var(--md-sys-color-surface-variant, #e7e0ec));--md-focus-ring-shape-start-start:var(--md-focus-ring-shape, var(--_container-shape-start-start));--md-focus-ring-shape-start-end:var(--md-focus-ring-shape, var(--_container-shape-start-end));--md-focus-ring-shape-end-end:var(--md-focus-ring-shape, var(--_container-shape-end-end));--md-focus-ring-shape-end-start:var(--md-focus-ring-shape, var(--_container-shape-end-start)))))}.md3-icon-button{background-color:var(--_container-color);color:var(--_icon-color);--md-ripple-focus-color:var(--_focus-state-layer-color);--md-ripple-focus-opacity:var(--_focus-state-layer-opacity);--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)}.md3-icon-button:hover{color:var(--_hover-icon-color)}.md3-icon-button:focus{color:var(--_focus-icon-color)}.md3-icon-button:active{color:var(--_pressed-icon-color)}.md3-icon-button:disabled{background-color:var(--_disabled-container-color);color:var(--_disabled-icon-color)}.md3-icon-button--toggle-filled-tonal{--md-ripple-focus-color:var(--_toggle-unselected-focus-state-layer-color);--md-ripple-hover-color:var(--_toggle-unselected-hover-state-layer-color);--md-ripple-pressed-color:var(--_toggle-unselected-pressed-state-layer-color)}.md3-icon-button--toggle-filled-tonal:not(:disabled){background-color:var(--_unselected-container-color);color:var(--_toggle-unselected-icon-color)}.md3-icon-button--toggle-filled-tonal:not(:disabled):hover{color:var(--_toggle-unselected-hover-icon-color)}.md3-icon-button--toggle-filled-tonal:not(:disabled):focus{color:var(--_toggle-unselected-focus-icon-color)}.md3-icon-button--toggle-filled-tonal:not(:disabled):active{color:var(--_toggle-unselected-pressed-icon-color)}.md3-icon-button--selected{--md-ripple-focus-color:var(--_toggle-selected-focus-state-layer-color);--md-ripple-hover-color:var(--_toggle-selected-hover-state-layer-color);--md-ripple-pressed-color:var(--_toggle-selected-pressed-state-layer-color)}.md3-icon-button--selected:not(:disabled){background-color:var(--_selected-container-color);color:var(--_toggle-selected-icon-color)}.md3-icon-button--selected:not(:disabled):hover{color:var(--_toggle-selected-hover-icon-color)}.md3-icon-button--selected:not(:disabled):focus{color:var(--_toggle-selected-focus-icon-color)}.md3-icon-button--selected:not(:disabled):active{color:var(--_toggle-selected-pressed-icon-color)}/*# sourceMappingURL=filled-tonal-styles.css.map */\n`;\n "]}
package/iconbutton/lib/filled-tonal-styles.scss CHANGED
@@ -3,6 +3,8 @@
3
3
  // SPDX-License-Identifier: Apache-2.0
4
4
  //
5
5
 
6
+ // go/keep-sorted start
6
7
  @use './filled-tonal-icon-button';
8
+ // go/keep-sorted end
7
9
 
8
10
  @include filled-tonal-icon-button.styles;
package/iconbutton/lib/icon-button-toggle.d.ts CHANGED
@@ -6,58 +6,29 @@
6
6
  import '../../focus/focus-ring.js';
7
7
  import '../../icon/icon.js';
8
8
  import '../../ripple/ripple.js';
9
- import { LitElement, TemplateResult } from 'lit';
9
+ import { TemplateResult } from 'lit';
10
10
  import { ClassInfo } from 'lit/directives/class-map.js';
11
- import { MdRipple } from '../../ripple/ripple.js';
11
+ import { IconButton } from './icon-button.js';
12
12
  /**
13
- * @fires icon-button-toggle-change {CustomEvent<{selected: boolean}>}
13
+ * @fires change {Event}
14
+ * Dispatched whenever `selected` is changed via user click
15
+ *
16
+ * @fires input {InputEvent}
14
17
  * Dispatched whenever `selected` is changed via user click
15
18
  */
16
- export declare class IconButtonToggle extends LitElement {
17
- ariaLabel: string;
18
- /**
19
- * Disables the icon button and makes it non-interactive.
20
- */
21
- disabled: boolean;
22
- /**
23
- * The glyph of the icon to display from the applied icon font when toggle
24
- * button is selected or "on". See the associated typography tokens for more
25
- * info.
26
- */
27
- onIcon: string;
28
- /**
29
- * The glyph of the icon to display from the applied icon font when toggle
30
- * button is not selected or "off". See the associated typography tokens for
31
- * more info.
32
- */
33
- offIcon: string;
34
- /**
35
- * The `aria-label` of the button when the toggle button is selected or "on".
36
- */
37
- ariaLabelOn: string;
19
+ export declare class IconButtonToggle extends IconButton {
38
20
  /**
39
- * The `aria-label` of the button when the toggle button is not selected or
40
- * "off".
21
+ * The `aria-label` of the button when the toggle button is selected.
41
22
  */
42
- ariaLabelOff: string;
23
+ ariaLabelSelected: string;
43
24
  /**
44
- * Sets the toggle button to the "on" state and displays the `onIcon`. If
45
- * false, sets the toggle button to the "off" state and displays the
46
- * `offIcon`.
25
+ * Sets the selected state. When false, displays the default icon. When true,
26
+ * displays the `selectedIcon`, or the default icon If no `selectedIcon` is
27
+ * provided.
47
28
  */
48
29
  selected: boolean;
49
- ripple: Promise<MdRipple | null>;
50
- protected showFocusRing: boolean;
51
- protected showRipple: boolean;
52
- protected readonly getRipple: () => Promise<MdRipple>;
53
- protected readonly renderRipple: () => TemplateResult<1>;
54
30
  protected render(): TemplateResult;
31
+ protected renderSelectedIcon(): TemplateResult<1>;
55
32
  protected getRenderClasses(): ClassInfo;
56
- protected renderIcon(icon: string): TemplateResult | string;
57
- protected renderTouchTarget(): TemplateResult;
58
- protected renderFocusRing(): TemplateResult;
59
- protected handlePointerDown(e: PointerEvent): void;
60
- protected handleFocus(): void;
61
- protected handleBlur(): void;
62
33
  protected handleClick(): void;
63
34
  }
package/iconbutton/lib/icon-button-toggle.js CHANGED
@@ -9,63 +9,39 @@ import { __decorate, __metadata } from "tslib";
9
9
  import '../../focus/focus-ring.js';
10
10
  import '../../icon/icon.js';
11
11
  import '../../ripple/ripple.js';
12
- import { html, LitElement } from 'lit';
13
- import { property, queryAsync, state } from 'lit/decorators.js';
12
+ import { html, nothing } from 'lit';
13
+ import { property } from 'lit/decorators.js';
14
14
  import { classMap } from 'lit/directives/class-map.js';
15
- import { ifDefined } from 'lit/directives/if-defined.js';
16
15
  import { when } from 'lit/directives/when.js';
17
- import { ariaProperty } from '../../decorators/aria-property.js';
18
- import { pointerPress, shouldShowStrongFocus } from '../../focus/strong-focus.js';
19
16
  import { ripple } from '../../ripple/directive.js';
17
+ import { IconButton } from './icon-button.js';
20
18
  /**
21
- * @fires icon-button-toggle-change {CustomEvent<{selected: boolean}>}
19
+ * @fires change {Event}
20
+ * Dispatched whenever `selected` is changed via user click
21
+ *
22
+ * @fires input {InputEvent}
22
23
  * Dispatched whenever `selected` is changed via user click
23
24
  */
24
- export class IconButtonToggle extends LitElement {
25
+ export class IconButtonToggle extends IconButton {
25
26
  constructor() {
26
27
  super(...arguments);
27
28
  /**
28
- * Disables the icon button and makes it non-interactive.
29
- */
30
- this.disabled = false;
31
- /**
32
- * The glyph of the icon to display from the applied icon font when toggle
33
- * button is selected or "on". See the associated typography tokens for more
34
- * info.
35
- */
36
- this.onIcon = '';
37
- /**
38
- * The glyph of the icon to display from the applied icon font when toggle
39
- * button is not selected or "off". See the associated typography tokens for
40
- * more info.
41
- */
42
- this.offIcon = '';
43
- /**
44
- * Sets the toggle button to the "on" state and displays the `onIcon`. If
45
- * false, sets the toggle button to the "off" state and displays the
46
- * `offIcon`.
29
+ * Sets the selected state. When false, displays the default icon. When true,
30
+ * displays the `selectedIcon`, or the default icon If no `selectedIcon` is
31
+ * provided.
47
32
  */
48
33
  this.selected = false;
49
- this.showFocusRing = false;
50
- this.showRipple = false;
51
- this.getRipple = () => {
52
- this.showRipple = true;
53
- return this.ripple;
54
- };
55
- this.renderRipple = () => {
56
- return html `<md-ripple ?disabled="${this.disabled}"></md-ripple>`;
57
- };
58
34
  }
59
35
  render() {
60
- const hasToggledAriaLabel = this.ariaLabelOn && this.ariaLabelOff;
61
- const ariaPressedValue = hasToggledAriaLabel ? undefined : this.selected;
62
- const ariaLabelValue = hasToggledAriaLabel ?
63
- (this.selected ? this.ariaLabelOn : this.ariaLabelOff) :
36
+ const hasToggledAriaLabel = this.ariaLabel && this.ariaLabelSelected;
37
+ const ariaPressedValue = hasToggledAriaLabel ? nothing : this.selected;
38
+ const ariaLabelValue = (hasToggledAriaLabel && this.selected) ?
39
+ this.ariaLabelSelected :
64
40
  this.ariaLabel;
65
41
  return html `<button
66
42
  class="md3-icon-button ${classMap(this.getRenderClasses())}"
67
- aria-pressed="${ifDefined(ariaPressedValue)}"
68
- aria-label="${ifDefined(ariaLabelValue)}"
43
+ aria-pressed="${ariaPressedValue}"
44
+ aria-label="${ariaLabelValue || nothing}"
69
45
  ?disabled="${this.disabled}"
70
46
  @focus="${this.handleFocus}"
71
47
  @blur="${this.handleBlur}"
@@ -75,83 +51,37 @@ export class IconButtonToggle extends LitElement {
75
51
  ${this.renderFocusRing()}
76
52
  ${when(this.showRipple, this.renderRipple)}
77
53
  ${this.renderTouchTarget()}
78
- <span class="md3-icon-button__icon">
79
- <slot name="offIcon">${this.renderIcon(this.offIcon)}</slot>
80
- </span>
81
- <span class="md3-icon-button__icon md3-icon-button__icon--on">
82
- <slot name="onIcon">${this.renderIcon(this.onIcon)}</slot>
83
- </span>
54
+ ${!this.selected ? this.renderIcon() : nothing}
55
+ ${this.selected ? this.renderSelectedIcon() : nothing}
84
56
  </button>`;
85
57
  }
58
+ renderSelectedIcon() {
59
+ // Use default slot as fallback to not require specifying multiple icons
60
+ return html `<md-icon class="md3-icon-button__icon md3-icon-button__icon--selected"><slot name="selectedIcon"><slot></slot></slot></md-icon>`;
61
+ }
86
62
  getRenderClasses() {
87
63
  return {
88
- 'md3-icon-button--on': this.selected,
64
+ ...super.getRenderClasses(),
65
+ 'md3-icon-button--selected': this.selected,
89
66
  };
90
67
  }
91
- renderIcon(icon) {
92
- return icon ? html `<md-icon>${icon}</md-icon>` : '';
93
- }
94
- renderTouchTarget() {
95
- return html `<span class="md3-icon-button__touch"></span>`;
96
- }
97
- renderFocusRing() {
98
- return html `<md-focus-ring .visible="${this.showFocusRing}"></md-focus-ring>`;
99
- }
100
- handlePointerDown(e) {
101
- pointerPress();
102
- this.showFocusRing = shouldShowStrongFocus();
103
- }
104
- handleFocus() {
105
- this.showFocusRing = shouldShowStrongFocus();
106
- }
107
- handleBlur() {
108
- this.showFocusRing = false;
109
- }
110
68
  handleClick() {
69
+ if (this.disabled) {
70
+ return;
71
+ }
111
72
  this.selected = !this.selected;
112
- const detail = { selected: this.selected };
113
- this.dispatchEvent(new CustomEvent('icon-button-toggle-change', { detail, bubbles: true, composed: true }));
73
+ this.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
74
+ // Bubbles but does not compose to mimic native browser <input> & <select>
75
+ // Additionally, native change event is not an InputEvent.
76
+ this.dispatchEvent(new Event('change', { bubbles: true }));
114
77
  }
115
78
  }
116
- __decorate([
117
- ariaProperty,
118
- property({ type: String, attribute: 'data-aria-label' }),
119
- __metadata("design:type", String)
120
- ], IconButtonToggle.prototype, "ariaLabel", void 0);
121
- __decorate([
122
- property({ type: Boolean, reflect: true }),
123
- __metadata("design:type", Object)
124
- ], IconButtonToggle.prototype, "disabled", void 0);
125
- __decorate([
126
- property({ type: String }),
127
- __metadata("design:type", Object)
128
- ], IconButtonToggle.prototype, "onIcon", void 0);
129
- __decorate([
130
- property({ type: String }),
131
- __metadata("design:type", Object)
132
- ], IconButtonToggle.prototype, "offIcon", void 0);
133
79
  __decorate([
134
80
  property({ type: String }),
135
81
  __metadata("design:type", String)
136
- ], IconButtonToggle.prototype, "ariaLabelOn", void 0);
137
- __decorate([
138
- property({ type: String }),
139
- __metadata("design:type", String)
140
- ], IconButtonToggle.prototype, "ariaLabelOff", void 0);
82
+ ], IconButtonToggle.prototype, "ariaLabelSelected", void 0);
141
83
  __decorate([
142
84
  property({ type: Boolean, reflect: true }),
143
85
  __metadata("design:type", Object)
144
86
  ], IconButtonToggle.prototype, "selected", void 0);
145
- __decorate([
146
- queryAsync('md-ripple'),
147
- __metadata("design:type", Promise)
148
- ], IconButtonToggle.prototype, "ripple", void 0);
149
- __decorate([
150
- state(),
151
- __metadata("design:type", Object)
152
- ], IconButtonToggle.prototype, "showFocusRing", void 0);
153
- __decorate([
154
- state(),
155
- __metadata("design:type", Object)
156
- ], IconButtonToggle.prototype, "showRipple", void 0);
157
87
  //# sourceMappingURL=icon-button-toggle.js.map
package/iconbutton/lib/icon-button-toggle.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"icon-button-toggle.js","sourceRoot":"","sources":["icon-button-toggle.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// Required for @ariaProperty\n// tslint:disable:no-new-decorators\n\nimport '../../focus/focus-ring.js';\nimport '../../icon/icon.js';\nimport '../../ripple/ripple.js';\n\nimport {html, LitElement, TemplateResult} from 'lit';\nimport {property, queryAsync, state} from 'lit/decorators.js';\nimport {ClassInfo, classMap} from 'lit/directives/class-map.js';\nimport {ifDefined} from 'lit/directives/if-defined.js';\nimport {when} from 'lit/directives/when.js';\n\nimport {ariaProperty} from '../../decorators/aria-property.js';\nimport {pointerPress, shouldShowStrongFocus} from '../../focus/strong-focus.js';\nimport {ripple} from '../../ripple/directive.js';\nimport {MdRipple} from '../../ripple/ripple.js';\n\n/**\n * @fires icon-button-toggle-change {CustomEvent<{selected: boolean}>}\n * Dispatched whenever `selected` is changed via user click\n */\nexport class IconButtonToggle extends LitElement {\n @ariaProperty\n @property({type: String, attribute: 'data-aria-label'})\n override ariaLabel!: string;\n\n /**\n * Disables the icon button and makes it non-interactive.\n */\n @property({type: Boolean, reflect: true}) disabled = false;\n\n /**\n * The glyph of the icon to display from the applied icon font when toggle\n * button is selected or \"on\". See the associated typography tokens for more\n * info.\n */\n @property({type: String}) onIcon = '';\n\n /**\n * The glyph of the icon to display from the applied icon font when toggle\n * button is not selected or \"off\". See the associated typography tokens for\n * more info.\n */\n @property({type: String}) offIcon = '';\n\n /**\n * The `aria-label` of the button when the toggle button is selected or \"on\".\n */\n @property({type: String}) ariaLabelOn!: string;\n\n /**\n * The `aria-label` of the button when the toggle button is not selected or\n * \"off\".\n */\n @property({type: String}) ariaLabelOff!: string;\n\n /**\n * Sets the toggle button to the \"on\" state and displays the `onIcon`. If\n * false, sets the toggle button to the \"off\" state and displays the\n * `offIcon`.\n */\n @property({type: Boolean, reflect: true}) selected = false;\n\n @queryAsync('md-ripple') ripple!: Promise<MdRipple|null>;\n\n @state() protected showFocusRing = false;\n\n @state() protected showRipple = false;\n\n protected readonly getRipple = () => {\n this.showRipple = true;\n return this.ripple;\n };\n\n protected readonly renderRipple = () => {\n return html`<md-ripple ?disabled=\"${this.disabled}\"></md-ripple>`;\n };\n\n protected override render(): TemplateResult {\n const hasToggledAriaLabel = this.ariaLabelOn && this.ariaLabelOff;\n const ariaPressedValue = hasToggledAriaLabel ? undefined : this.selected;\n const ariaLabelValue = hasToggledAriaLabel ?\n (this.selected ? this.ariaLabelOn : this.ariaLabelOff) :\n this.ariaLabel;\n return html`<button\n class=\"md3-icon-button ${classMap(this.getRenderClasses())}\"\n aria-pressed=\"${ifDefined(ariaPressedValue)}\"\n aria-label=\"${ifDefined(ariaLabelValue)}\"\n ?disabled=\"${this.disabled}\"\n @focus=\"${this.handleFocus}\"\n @blur=\"${this.handleBlur}\"\n @pointerdown=\"${this.handlePointerDown}\"\n @click=\"${this.handleClick}\"\n ${ripple(this.getRipple)}>\n ${this.renderFocusRing()}\n ${when(this.showRipple, this.renderRipple)}\n ${this.renderTouchTarget()}\n <span class=\"md3-icon-button__icon\">\n <slot name=\"offIcon\">${this.renderIcon(this.offIcon)}</slot>\n </span>\n <span class=\"md3-icon-button__icon md3-icon-button__icon--on\">\n <slot name=\"onIcon\">${this.renderIcon(this.onIcon)}</slot>\n </span>\n </button>`;\n }\n\n protected getRenderClasses(): ClassInfo {\n return {\n 'md3-icon-button--on': this.selected,\n };\n }\n\n protected renderIcon(icon: string): TemplateResult|string {\n return icon ? html`<md-icon>${icon}</md-icon>` : '';\n }\n\n protected renderTouchTarget(): TemplateResult {\n return html`<span class=\"md3-icon-button__touch\"></span>`;\n }\n\n protected renderFocusRing(): TemplateResult {\n return html`<md-focus-ring .visible=\"${\n this.showFocusRing}\"></md-focus-ring>`;\n }\n\n protected handlePointerDown(e: PointerEvent) {\n pointerPress();\n this.showFocusRing = shouldShowStrongFocus();\n }\n\n protected handleFocus() {\n this.showFocusRing = shouldShowStrongFocus();\n }\n\n protected handleBlur() {\n this.showFocusRing = false;\n }\n\n protected handleClick() {\n this.selected = !this.selected;\n const detail = {selected: this.selected};\n this.dispatchEvent(new CustomEvent(\n 'icon-button-toggle-change', {detail, bubbles: true, composed: true}));\n }\n}\n"]}
1
+ {"version":3,"file":"icon-button-toggle.js","sourceRoot":"","sources":["icon-button-toggle.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,6BAA6B;AAC7B,mCAAmC;AAEnC,OAAO,2BAA2B,CAAC;AACnC,OAAO,oBAAoB,CAAC;AAC5B,OAAO,wBAAwB,CAAC;AAEhC,OAAO,EAAC,IAAI,EAAE,OAAO,EAAiB,MAAM,KAAK,CAAC;AAClD,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAY,QAAQ,EAAC,MAAM,6BAA6B,CAAC;AAChE,OAAO,EAAC,IAAI,EAAC,MAAM,wBAAwB,CAAC;AAE5C,OAAO,EAAC,MAAM,EAAC,MAAM,2BAA2B,CAAC;AAEjD,OAAO,EAAC,UAAU,EAAC,MAAM,kBAAkB,CAAC;AAE5C;;;;;;GAMG;AACH,MAAM,OAAO,gBAAiB,SAAQ,UAAU;IAAhD;;QAME;;;;WAIG;QACuC,aAAQ,GAAG,KAAK,CAAC;IAkD7D,CAAC;IAhDoB,MAAM;QACvB,MAAM,mBAAmB,GAAG,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,iBAAiB,CAAC;QACrE,MAAM,gBAAgB,GAAG,mBAAmB,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC;QACvE,MAAM,cAAc,GAAG,CAAC,mBAAmB,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;YAC3D,IAAI,CAAC,iBAAiB,CAAC,CAAC;YACxB,IAAI,CAAC,SAAS,CAAC;QACnB,OAAO,IAAI,CAAA;mCACoB,QAAQ,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC;0BAC1C,gBAAgB;wBAClB,cAAc,IAAI,OAAO;uBAC1B,IAAI,CAAC,QAAQ;oBAChB,IAAI,CAAC,WAAW;mBACjB,IAAI,CAAC,UAAU;0BACR,IAAI,CAAC,iBAAiB;oBAC5B,IAAI,CAAC,WAAW;YACxB,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC;UACxB,IAAI,CAAC,eAAe,EAAE;UACtB,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,YAAY,CAAC;UACxC,IAAI,CAAC,iBAAiB,EAAE;UACxB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC,OAAO;UAC5C,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,kBAAkB,EAAE,CAAC,CAAC,CAAC,OAAO;gBAC7C,CAAC;IACf,CAAC;IAES,kBAAkB;QAC1B,wEAAwE;QACxE,OAAO,IAAI,CAAA,iIAAiI,CAAC;IAC/I,CAAC;IAEkB,gBAAgB;QACjC,OAAO;YACL,GAAG,KAAK,CAAC,gBAAgB,EAAE;YAC3B,2BAA2B,EAAE,IAAI,CAAC,QAAQ;SAC3C,CAAC;IACJ,CAAC;IAES,WAAW;QACnB,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,OAAO;SACR;QAED,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;QAC/B,IAAI,CAAC,aAAa,CACd,IAAI,UAAU,CAAC,OAAO,EAAE,EAAC,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAC,CAAC,CAAC,CAAC;QAC9D,0EAA0E;QAC1E,0DAA0D;QAC1D,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,EAAE,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC,CAAC,CAAC;IAC3D,CAAC;CACF;AAzDC;IAAC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;;2DAA4B;AAOrD;IAAC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;;kDAAkB","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// Required for @ariaProperty\n// tslint:disable:no-new-decorators\n\nimport '../../focus/focus-ring.js';\nimport '../../icon/icon.js';\nimport '../../ripple/ripple.js';\n\nimport {html, nothing, TemplateResult} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {ClassInfo, classMap} from 'lit/directives/class-map.js';\nimport {when} from 'lit/directives/when.js';\n\nimport {ripple} from '../../ripple/directive.js';\n\nimport {IconButton} from './icon-button.js';\n\n/**\n * @fires change {Event}\n * Dispatched whenever `selected` is changed via user click\n *\n * @fires input {InputEvent}\n * Dispatched whenever `selected` is changed via user click\n */\nexport class IconButtonToggle extends IconButton {\n /**\n * The `aria-label` of the button when the toggle button is selected.\n */\n @property({type: String}) ariaLabelSelected!: string;\n\n /**\n * Sets the selected state. When false, displays the default icon. When true,\n * displays the `selectedIcon`, or the default icon If no `selectedIcon` is\n * provided.\n */\n @property({type: Boolean, reflect: true}) selected = false;\n\n protected override render(): TemplateResult {\n const hasToggledAriaLabel = this.ariaLabel && this.ariaLabelSelected;\n const ariaPressedValue = hasToggledAriaLabel ? nothing : this.selected;\n const ariaLabelValue = (hasToggledAriaLabel && this.selected) ?\n this.ariaLabelSelected :\n this.ariaLabel;\n return html`<button\n class=\"md3-icon-button ${classMap(this.getRenderClasses())}\"\n aria-pressed=\"${ariaPressedValue}\"\n aria-label=\"${ariaLabelValue || nothing}\"\n ?disabled=\"${this.disabled}\"\n @focus=\"${this.handleFocus}\"\n @blur=\"${this.handleBlur}\"\n @pointerdown=\"${this.handlePointerDown}\"\n @click=\"${this.handleClick}\"\n ${ripple(this.getRipple)}>\n ${this.renderFocusRing()}\n ${when(this.showRipple, this.renderRipple)}\n ${this.renderTouchTarget()}\n ${!this.selected ? this.renderIcon() : nothing}\n ${this.selected ? this.renderSelectedIcon() : nothing}\n </button>`;\n }\n\n protected renderSelectedIcon() {\n // Use default slot as fallback to not require specifying multiple icons\n return html`<md-icon class=\"md3-icon-button__icon md3-icon-button__icon--selected\"><slot name=\"selectedIcon\"><slot></slot></slot></md-icon>`;\n }\n\n protected override getRenderClasses(): ClassInfo {\n return {\n ...super.getRenderClasses(),\n 'md3-icon-button--selected': this.selected,\n };\n }\n\n protected handleClick() {\n if (this.disabled) {\n return;\n }\n\n this.selected = !this.selected;\n this.dispatchEvent(\n new InputEvent('input', {bubbles: true, composed: true}));\n // Bubbles but does not compose to mimic native browser <input> & <select>\n // Additionally, native change event is not an InputEvent.\n this.dispatchEvent(new Event('change', {bubbles: true}));\n }\n}\n"]}
package/iconbutton/lib/icon-button.d.ts CHANGED
@@ -11,12 +11,10 @@ import { ClassInfo } from 'lit/directives/class-map.js';
11
11
  import { MdRipple } from '../../ripple/ripple.js';
12
12
  import { ARIAHasPopup } from '../../types/aria.js';
13
13
  export declare class IconButton extends LitElement {
14
- disabled: boolean;
15
14
  /**
16
- * The glyph of the icon to display from the applied icon font. See the
17
- * associated typography tokens for more info.
15
+ * Disables the icon button and makes it non-interactive.
18
16
  */
19
- icon: string;
17
+ disabled: boolean;
20
18
  /**
21
19
  * Flips the icon if it is in an RTL context at startup.
22
20
  */
package/iconbutton/lib/icon-button.js CHANGED
@@ -22,12 +22,10 @@ import { ripple } from '../../ripple/directive.js';
22
22
  export class IconButton extends LitElement {
23
23
  constructor() {
24
24
  super(...arguments);
25
- this.disabled = false;
26
25
  /**
27
- * The glyph of the icon to display from the applied icon font. See the
28
- * associated typography tokens for more info.
26
+ * Disables the icon button and makes it non-interactive.
29
27
  */
30
- this.icon = '';
28
+ this.disabled = false;
31
29
  /**
32
30
  * Flips the icon if it is in an RTL context at startup.
33
31
  */
@@ -67,7 +65,7 @@ export class IconButton extends LitElement {
67
65
  renderIcon() {
68
66
  // Note, it's important not to render the icon property as a slot fallback
69
67
  // to avoid any whitespace from overridding it.
70
- return html `<span class="md3-icon-button__icon"><md-icon>${this.icon ? this.icon : html `<slot></slot>`}</md-icon></span>`;
68
+ return html `<md-icon class="md3-icon-button__icon"><slot></slot></md-icon>`;
71
69
  }
72
70
  renderTouchTarget() {
73
71
  return html `<span class="md3-icon-button__touch"></span>`;
@@ -94,10 +92,6 @@ __decorate([
94
92
  property({ type: Boolean, reflect: true }),
95
93
  __metadata("design:type", Object)
96
94
  ], IconButton.prototype, "disabled", void 0);
97
- __decorate([
98
- property({ type: String }),
99
- __metadata("design:type", Object)
100
- ], IconButton.prototype, "icon", void 0);
101
95
  __decorate([
102
96
  property({ type: Boolean }),
103
97
  __metadata("design:type", Object)
package/iconbutton/lib/icon-button.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"icon-button.js","sourceRoot":"","sources":["icon-button.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2018 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// This is required for @ariaProperty\n// tslint:disable:no-new-decorators\n\nimport '../../focus/focus-ring.js';\nimport '../../icon/icon.js';\nimport '../../ripple/ripple.js';\n\nimport {html, LitElement, TemplateResult} from 'lit';\nimport {property, query, queryAsync, state} from 'lit/decorators.js';\nimport {ClassInfo, classMap} from 'lit/directives/class-map.js';\nimport {ifDefined} from 'lit/directives/if-defined.js';\nimport {when} from 'lit/directives/when.js';\n\nimport {isRtl} from '../../controller/is-rtl.js';\nimport {ariaProperty} from '../../decorators/aria-property.js';\nimport {pointerPress, shouldShowStrongFocus} from '../../focus/strong-focus.js';\nimport {ripple} from '../../ripple/directive.js';\nimport {MdRipple} from '../../ripple/ripple.js';\nimport {ARIAHasPopup} from '../../types/aria.js';\n\n// tslint:disable-next-line:enforce-comments-on-exported-symbols\nexport class IconButton extends LitElement {\n @property({type: Boolean, reflect: true}) disabled = false;\n\n /**\n * The glyph of the icon to display from the applied icon font. See the\n * associated typography tokens for more info.\n */\n @property({type: String}) icon = '';\n\n /**\n * Flips the icon if it is in an RTL context at startup.\n */\n @property({type: Boolean}) flipIconInRtl = false;\n\n @state() protected flipIcon: boolean = isRtl(this, this.flipIconInRtl);\n\n @ariaProperty\n @property({type: String, attribute: 'data-aria-label'})\n override ariaLabel!: string;\n\n @ariaProperty\n @property({type: String, attribute: 'data-aria-haspopup'})\n override ariaHasPopup!: ARIAHasPopup;\n\n @query('button') protected buttonElement!: HTMLElement;\n\n @queryAsync('md-ripple') protected ripple!: Promise<MdRipple|null>;\n\n @state() protected showFocusRing = false;\n\n @state() protected showRipple = false;\n\n protected getRipple = () => {\n this.showRipple = true;\n return this.ripple;\n };\n\n protected readonly renderRipple = () => {\n return html`<md-ripple ?disabled=\"${this.disabled}\"></md-ripple>`;\n };\n\n protected override render(): TemplateResult {\n return html`<button\n class=\"md3-icon-button ${classMap(this.getRenderClasses())}\"\n aria-label=\"${ifDefined(this.ariaLabel)}\"\n aria-haspopup=\"${ifDefined(this.ariaHasPopup)}\"\n ?disabled=\"${this.disabled}\"\n @focus=\"${this.handleFocus}\"\n @blur=\"${this.handleBlur}\"\n @pointerdown=\"${this.handlePointerDown}\"\n ${ripple(this.getRipple)}>\n ${this.renderFocusRing()}\n ${when(this.showRipple, this.renderRipple)}\n ${this.renderIcon()}\n ${this.renderTouchTarget()}\n </button>`;\n }\n\n protected getRenderClasses(): ClassInfo {\n return {\n 'md3-icon-button--flip-icon': this.flipIcon,\n };\n }\n\n protected renderIcon(): TemplateResult {\n // Note, it's important not to render the icon property as a slot fallback\n // to avoid any whitespace from overridding it.\n return html`<span class=\"md3-icon-button__icon\"><md-icon>${\n this.icon ? this.icon : html`<slot></slot>`}</md-icon></span>`;\n }\n\n protected renderTouchTarget(): TemplateResult {\n return html`<span class=\"md3-icon-button__touch\"></span>`;\n }\n\n protected renderFocusRing(): TemplateResult {\n return html`<md-focus-ring .visible=\"${\n this.showFocusRing}\"></md-focus-ring>`;\n }\n\n override connectedCallback() {\n this.flipIcon = isRtl(this, this.flipIconInRtl);\n super.connectedCallback();\n }\n\n handlePointerDown() {\n pointerPress();\n this.showFocusRing = shouldShowStrongFocus();\n }\n\n protected handleFocus() {\n this.showFocusRing = shouldShowStrongFocus();\n }\n\n protected handleBlur() {\n this.showFocusRing = false;\n }\n}\n"]}
1
+ {"version":3,"file":"icon-button.js","sourceRoot":"","sources":["icon-button.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2018 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// This is required for @ariaProperty\n// tslint:disable:no-new-decorators\n\nimport '../../focus/focus-ring.js';\nimport '../../icon/icon.js';\nimport '../../ripple/ripple.js';\n\nimport {html, LitElement, TemplateResult} from 'lit';\nimport {property, query, queryAsync, state} from 'lit/decorators.js';\nimport {ClassInfo, classMap} from 'lit/directives/class-map.js';\nimport {ifDefined} from 'lit/directives/if-defined.js';\nimport {when} from 'lit/directives/when.js';\n\nimport {isRtl} from '../../controller/is-rtl.js';\nimport {ariaProperty} from '../../decorators/aria-property.js';\nimport {pointerPress, shouldShowStrongFocus} from '../../focus/strong-focus.js';\nimport {ripple} from '../../ripple/directive.js';\nimport {MdRipple} from '../../ripple/ripple.js';\nimport {ARIAHasPopup} from '../../types/aria.js';\n\n// tslint:disable-next-line:enforce-comments-on-exported-symbols\nexport class IconButton extends LitElement {\n /**\n * Disables the icon button and makes it non-interactive.\n */\n @property({type: Boolean, reflect: true}) disabled = false;\n\n /**\n * Flips the icon if it is in an RTL context at startup.\n */\n @property({type: Boolean}) flipIconInRtl = false;\n\n @state() protected flipIcon: boolean = isRtl(this, this.flipIconInRtl);\n\n @ariaProperty\n @property({type: String, attribute: 'data-aria-label'})\n override ariaLabel!: string;\n\n @ariaProperty\n @property({type: String, attribute: 'data-aria-haspopup'})\n override ariaHasPopup!: ARIAHasPopup;\n\n @query('button') protected buttonElement!: HTMLElement;\n\n @queryAsync('md-ripple') protected ripple!: Promise<MdRipple|null>;\n\n @state() protected showFocusRing = false;\n\n @state() protected showRipple = false;\n\n protected getRipple = () => {\n this.showRipple = true;\n return this.ripple;\n };\n\n protected readonly renderRipple = () => {\n return html`<md-ripple ?disabled=\"${this.disabled}\"></md-ripple>`;\n };\n\n protected override render(): TemplateResult {\n return html`<button\n class=\"md3-icon-button ${classMap(this.getRenderClasses())}\"\n aria-label=\"${ifDefined(this.ariaLabel)}\"\n aria-haspopup=\"${ifDefined(this.ariaHasPopup)}\"\n ?disabled=\"${this.disabled}\"\n @focus=\"${this.handleFocus}\"\n @blur=\"${this.handleBlur}\"\n @pointerdown=\"${this.handlePointerDown}\"\n ${ripple(this.getRipple)}>\n ${this.renderFocusRing()}\n ${when(this.showRipple, this.renderRipple)}\n ${this.renderIcon()}\n ${this.renderTouchTarget()}\n </button>`;\n }\n\n protected getRenderClasses(): ClassInfo {\n return {\n 'md3-icon-button--flip-icon': this.flipIcon,\n };\n }\n\n protected renderIcon(): TemplateResult {\n // Note, it's important not to render the icon property as a slot fallback\n // to avoid any whitespace from overridding it.\n return html`<md-icon class=\"md3-icon-button__icon\"><slot></slot></md-icon>`;\n }\n\n protected renderTouchTarget(): TemplateResult {\n return html`<span class=\"md3-icon-button__touch\"></span>`;\n }\n\n protected renderFocusRing(): TemplateResult {\n return html`<md-focus-ring .visible=\"${\n this.showFocusRing}\"></md-focus-ring>`;\n }\n\n override connectedCallback() {\n this.flipIcon = isRtl(this, this.flipIconInRtl);\n super.connectedCallback();\n }\n\n handlePointerDown() {\n pointerPress();\n this.showFocusRing = shouldShowStrongFocus();\n }\n\n protected handleFocus() {\n this.showFocusRing = shouldShowStrongFocus();\n }\n\n protected handleBlur() {\n this.showFocusRing = false;\n }\n}\n"]}
package/iconbutton/lib/link-icon-button.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"link-icon-button.js","sourceRoot":"","sources":["link-icon-button.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,IAAI,EAAiB,MAAM,KAAK,CAAC;AACzC,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAC,QAAQ,EAAC,MAAM,6BAA6B,CAAC;AACrD,OAAO,EAAC,SAAS,EAAC,MAAM,8BAA8B,CAAC;AACvD,OAAO,EAAC,IAAI,EAAC,MAAM,wBAAwB,CAAC;AAE5C,OAAO,EAAC,MAAM,EAAC,MAAM,2BAA2B,CAAC;AAEjD,OAAO,EAAC,UAAU,EAAC,MAAM,kBAAkB,CAAC;AAU5C,gEAAgE;AAChE,MAAM,OAAO,cAAe,SAAQ,UAAU;IAA9C;;QACE;;WAEG;QACuB,aAAQ,GAAG,EAAE,CAAC;QAOxC;;WAEG;QACM,aAAQ,GAAG,KAAK,CAAC;IAyB5B,CAAC;IAvBU,UAAU;QACjB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;IACxB,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA;iCACkB,QAAQ,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC;kBAChD,IAAI,CAAC,WAAW;iBACjB,IAAI,CAAC,UAAU;wBACR,IAAI,CAAC,iBAAiB;UACpC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC;UACtB,IAAI,CAAC,eAAe,EAAE;UACtB,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,YAAY,CAAC;UACxC,IAAI,CAAC,UAAU,EAAE;UACjB,IAAI,CAAC,iBAAiB,EAAE;+CACa,IAAI,CAAC,QAAQ;oBACxC,SAAS,CAAC,IAAI,CAAC,UAAwB,CAAC;wBACpC,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC;oBAC7B,IAAI,CAAC,WAAW;mBACjB,IAAI,CAAC,UAAU;;WAEvB,CAAC;IACV,CAAC;CACF;AAnC2B;IAAzB,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;;gDAAe;AAKd;IAAzB,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;;kDAAqB","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html, TemplateResult} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {ifDefined} from 'lit/directives/if-defined.js';\nimport {when} from 'lit/directives/when.js';\n\nimport {ripple} from '../../ripple/directive.js';\n\nimport {IconButton} from './icon-button.js';\n\n/**\n * Note that we cast `linkTarget` to this type, below. The Lit compiler\n * enforces the `target` attribute value to be of this type, but this is not\n * compatible with the generated Wit Soy/JS, which expects `linkTarget`\n * to be a string type.\n */\ntype LinkTarget = '_blank'|'_parent'|'_self'|'_top';\n\n// tslint:disable-next-line:enforce-comments-on-exported-symbols\nexport class LinkIconButton extends IconButton {\n /**\n * Sets the underlying `HTMLAnchorElement`'s `href` resource attribute.\n */\n @property({type: String}) linkHref = '';\n\n /**\n * Sets the underlying `HTMLAnchorElement`'s `target` attribute.\n */\n @property({type: String}) linkTarget!: string;\n\n /**\n * Link buttons cannot be disabled.\n */\n override disabled = false;\n\n override willUpdate() {\n this.disabled = false;\n }\n\n protected override render(): TemplateResult {\n return html`<div\n class=\"md3-icon-button ${classMap(this.getRenderClasses())}\"\n @focus=\"${this.handleFocus}\"\n @blur=\"${this.handleBlur}\"\n @pointerdown=\"${this.handlePointerDown}\"\n ${ripple(this.getRipple)}>\n ${this.renderFocusRing()}\n ${when(this.showRipple, this.renderRipple)}\n ${this.renderIcon()}\n ${this.renderTouchTarget()}\n <a class=\"md3-icon-button__link\" href=\"${this.linkHref}\"\n target=\"${ifDefined(this.linkTarget as LinkTarget)}\"\n aria-label=\"${ifDefined(this.ariaLabel)}\"\n @focus=\"${this.handleFocus}\"\n @blur=\"${this.handleBlur}\">\n </a>\n </div>`;\n }\n}\n"]}
1
+ {"version":3,"file":"link-icon-button.js","sourceRoot":"","sources":["link-icon-button.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,IAAI,EAAiB,MAAM,KAAK,CAAC;AACzC,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAC,QAAQ,EAAC,MAAM,6BAA6B,CAAC;AACrD,OAAO,EAAC,SAAS,EAAC,MAAM,8BAA8B,CAAC;AACvD,OAAO,EAAC,IAAI,EAAC,MAAM,wBAAwB,CAAC;AAE5C,OAAO,EAAC,MAAM,EAAC,MAAM,2BAA2B,CAAC;AAEjD,OAAO,EAAC,UAAU,EAAC,MAAM,kBAAkB,CAAC;AAU5C,gEAAgE;AAChE,MAAM,OAAO,cAAe,SAAQ,UAAU;IAA9C;;QACE;;WAEG;QACuB,aAAQ,GAAG,EAAE,CAAC;QAOxC;;WAEG;QACM,aAAQ,GAAG,KAAK,CAAC;IAyB5B,CAAC;IAvBU,UAAU;QACjB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;IACxB,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA;iCACkB,QAAQ,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC;kBAChD,IAAI,CAAC,WAAW;iBACjB,IAAI,CAAC,UAAU;wBACR,IAAI,CAAC,iBAAiB;UACpC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC;UACtB,IAAI,CAAC,eAAe,EAAE;UACtB,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,YAAY,CAAC;UACxC,IAAI,CAAC,UAAU,EAAE;UACjB,IAAI,CAAC,iBAAiB,EAAE;+CACa,IAAI,CAAC,QAAQ;oBACxC,SAAS,CAAC,IAAI,CAAC,UAAwB,CAAC;wBACpC,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC;oBAC7B,IAAI,CAAC,WAAW;mBACjB,IAAI,CAAC,UAAU;;WAEvB,CAAC;IACV,CAAC;CACF;AAnCC;IAAC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;;gDAAe;AAKxC;IAAC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;;kDAAqB","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html, TemplateResult} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {ifDefined} from 'lit/directives/if-defined.js';\nimport {when} from 'lit/directives/when.js';\n\nimport {ripple} from '../../ripple/directive.js';\n\nimport {IconButton} from './icon-button.js';\n\n/**\n * Note that we cast `linkTarget` to this type, below. The Lit compiler\n * enforces the `target` attribute value to be of this type, but this is not\n * compatible with the generated Wit Soy/JS, which expects `linkTarget`\n * to be a string type.\n */\ntype LinkTarget = '_blank'|'_parent'|'_self'|'_top';\n\n// tslint:disable-next-line:enforce-comments-on-exported-symbols\nexport class LinkIconButton extends IconButton {\n /**\n * Sets the underlying `HTMLAnchorElement`'s `href` resource attribute.\n */\n @property({type: String}) linkHref = '';\n\n /**\n * Sets the underlying `HTMLAnchorElement`'s `target` attribute.\n */\n @property({type: String}) linkTarget!: string;\n\n /**\n * Link buttons cannot be disabled.\n */\n override disabled = false;\n\n override willUpdate() {\n this.disabled = false;\n }\n\n protected override render(): TemplateResult {\n return html`<div\n class=\"md3-icon-button ${classMap(this.getRenderClasses())}\"\n @focus=\"${this.handleFocus}\"\n @blur=\"${this.handleBlur}\"\n @pointerdown=\"${this.handlePointerDown}\"\n ${ripple(this.getRipple)}>\n ${this.renderFocusRing()}\n ${when(this.showRipple, this.renderRipple)}\n ${this.renderIcon()}\n ${this.renderTouchTarget()}\n <a class=\"md3-icon-button__link\" href=\"${this.linkHref}\"\n target=\"${ifDefined(this.linkTarget as LinkTarget)}\"\n aria-label=\"${ifDefined(this.ariaLabel)}\"\n @focus=\"${this.handleFocus}\"\n @blur=\"${this.handleBlur}\">\n </a>\n </div>`;\n }\n}\n"]}