@material/web 1.0.0-pre.6 → 1.0.0-pre.8

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 (504) hide show
  1. package/README.md +8 -8
  2. package/aria/aria.d.ts +43 -0
  3. package/aria/aria.js +80 -0
  4. package/aria/aria.js.map +1 -0
  5. package/aria/delegate.d.ts +37 -0
  6. package/aria/delegate.js +53 -0
  7. package/aria/delegate.js.map +1 -0
  8. package/badge/badge.d.ts +0 -1
  9. package/badge/badge.js +0 -1
  10. package/badge/badge.js.map +1 -1
  11. package/badge/lib/badge.d.ts +5 -7
  12. package/badge/lib/badge.js +9 -12
  13. package/badge/lib/badge.js.map +1 -1
  14. package/button/lib/_elevated-button.scss +35 -6
  15. package/button/lib/_elevation.scss +13 -3
  16. package/button/lib/_filled-button.scss +35 -3
  17. package/button/lib/_outlined-button.scss +35 -6
  18. package/button/lib/_shared.scss +4 -2
  19. package/button/lib/_text-button.scss +35 -6
  20. package/button/lib/_tonal-button.scss +34 -7
  21. package/button/lib/button.d.ts +24 -38
  22. package/button/lib/button.js +40 -89
  23. package/button/lib/button.js.map +1 -1
  24. package/button/lib/elevated-button.d.ts +6 -4
  25. package/button/lib/elevated-button.js.map +1 -1
  26. package/button/lib/elevated-styles.css.js +1 -1
  27. package/button/lib/elevated-styles.css.js.map +1 -1
  28. package/button/lib/filled-button.d.ts +6 -4
  29. package/button/lib/filled-button.js.map +1 -1
  30. package/button/lib/filled-styles.css.js +1 -1
  31. package/button/lib/filled-styles.css.js.map +1 -1
  32. package/button/lib/outlined-button.d.ts +6 -4
  33. package/button/lib/outlined-button.js.map +1 -1
  34. package/button/lib/outlined-styles.css.js +1 -1
  35. package/button/lib/outlined-styles.css.js.map +1 -1
  36. package/button/lib/shared-elevation-styles.css.js +1 -1
  37. package/button/lib/shared-elevation-styles.css.js.map +1 -1
  38. package/button/lib/shared-styles.css.js +1 -1
  39. package/button/lib/shared-styles.css.js.map +1 -1
  40. package/button/lib/text-button.d.ts +5 -2
  41. package/button/lib/text-button.js.map +1 -1
  42. package/button/lib/text-styles.css.js +1 -1
  43. package/button/lib/text-styles.css.js.map +1 -1
  44. package/button/lib/tonal-button.d.ts +6 -4
  45. package/button/lib/tonal-button.js.map +1 -1
  46. package/button/lib/tonal-styles.css.js +1 -1
  47. package/button/lib/tonal-styles.css.js.map +1 -1
  48. package/checkbox/lib/_checkbox.scss +48 -47
  49. package/checkbox/lib/checkbox-styles.css.js +1 -1
  50. package/checkbox/lib/checkbox-styles.css.js.map +1 -1
  51. package/checkbox/lib/checkbox.d.ts +2 -7
  52. package/checkbox/lib/checkbox.js +35 -62
  53. package/checkbox/lib/checkbox.js.map +1 -1
  54. package/checkbox/lib/forced-colors-styles.css.js +1 -1
  55. package/checkbox/lib/forced-colors-styles.css.js.map +1 -1
  56. package/chips/_filter-chip.scss +6 -0
  57. package/chips/assist-chip.js +2 -1
  58. package/chips/assist-chip.js.map +1 -1
  59. package/chips/filter-chip.d.ts +20 -0
  60. package/chips/filter-chip.js +25 -0
  61. package/chips/filter-chip.js.map +1 -0
  62. package/chips/lib/_assist-chip.scss +37 -3
  63. package/chips/lib/_elevated.scss +60 -0
  64. package/chips/lib/_filter-chip.scss +175 -0
  65. package/chips/lib/_shared.scss +48 -84
  66. package/chips/lib/_suggestion-chip.scss +36 -5
  67. package/chips/lib/assist-chip.d.ts +12 -0
  68. package/chips/lib/assist-chip.js +64 -0
  69. package/chips/lib/assist-chip.js.map +1 -1
  70. package/chips/lib/assist-styles.css.js +1 -1
  71. package/chips/lib/assist-styles.css.js.map +1 -1
  72. package/chips/lib/chip.d.ts +24 -16
  73. package/chips/lib/chip.js +53 -74
  74. package/chips/lib/chip.js.map +1 -1
  75. package/chips/lib/elevated-styles.css.js +9 -0
  76. package/chips/lib/elevated-styles.css.js.map +1 -0
  77. package/{fab/lib/fab-extended-styles.scss → chips/lib/elevated-styles.scss} +3 -3
  78. package/chips/lib/filter-chip.d.ts +26 -0
  79. package/chips/lib/filter-chip.js +80 -0
  80. package/chips/lib/filter-chip.js.map +1 -0
  81. package/chips/lib/filter-styles.css.js +9 -0
  82. package/chips/lib/filter-styles.css.js.map +1 -0
  83. package/chips/lib/filter-styles.scss +10 -0
  84. package/chips/lib/shared-styles.css.js +1 -1
  85. package/chips/lib/shared-styles.css.js.map +1 -1
  86. package/chips/lib/suggestion-chip.d.ts +2 -2
  87. package/chips/lib/suggestion-chip.js +4 -2
  88. package/chips/lib/suggestion-chip.js.map +1 -1
  89. package/chips/lib/suggestion-styles.css.js +1 -1
  90. package/chips/lib/suggestion-styles.css.js.map +1 -1
  91. package/chips/suggestion-chip.js +2 -1
  92. package/chips/suggestion-chip.js.map +1 -1
  93. package/circularprogress/harness.d.ts +1 -0
  94. package/circularprogress/harness.js +4 -0
  95. package/circularprogress/harness.js.map +1 -1
  96. package/circularprogress/lib/_circular-progress.scss +13 -7
  97. package/circularprogress/lib/circular-progress-styles.css.js +1 -1
  98. package/circularprogress/lib/circular-progress-styles.css.js.map +1 -1
  99. package/circularprogress/lib/circular-progress.d.ts +5 -7
  100. package/circularprogress/lib/circular-progress.js +17 -21
  101. package/circularprogress/lib/circular-progress.js.map +1 -1
  102. package/dialog/lib/_dialog.scss +8 -9
  103. package/dialog/lib/_tokens.scss +0 -1
  104. package/dialog/lib/dialog-styles.css.js +1 -1
  105. package/dialog/lib/dialog-styles.css.js.map +1 -1
  106. package/dialog/lib/dialog.d.ts +10 -10
  107. package/dialog/lib/dialog.js +33 -56
  108. package/dialog/lib/dialog.js.map +1 -1
  109. package/divider/lib/divider.js +4 -7
  110. package/divider/lib/divider.js.map +1 -1
  111. package/elevation/lib/_elevation.scss +5 -7
  112. package/elevation/lib/elevation-styles.css.js +1 -1
  113. package/elevation/lib/elevation-styles.css.js.map +1 -1
  114. package/elevation/lib/elevation.d.ts +1 -1
  115. package/elevation/lib/elevation.js.map +1 -1
  116. package/fab/_fab.scss +1 -0
  117. package/fab/branded-fab.d.ts +56 -0
  118. package/fab/branded-fab.js +56 -0
  119. package/fab/branded-fab.js.map +1 -0
  120. package/fab/fab.d.ts +25 -5
  121. package/fab/fab.js +27 -10
  122. package/fab/fab.js.map +1 -1
  123. package/fab/harness.d.ts +1 -2
  124. package/fab/harness.js +1 -1
  125. package/fab/harness.js.map +1 -1
  126. package/fab/lib/_fab-branded.scss +81 -0
  127. package/fab/lib/_fab.scss +221 -19
  128. package/fab/lib/_shared.scss +161 -131
  129. package/fab/lib/fab-branded-styles.css.d.ts +1 -0
  130. package/fab/lib/fab-branded-styles.css.js +9 -0
  131. package/fab/lib/fab-branded-styles.css.js.map +1 -0
  132. package/fab/lib/fab-branded-styles.scss +10 -0
  133. package/fab/lib/fab-styles.css.js +1 -1
  134. package/fab/lib/fab-styles.css.js.map +1 -1
  135. package/fab/lib/fab.d.ts +18 -10
  136. package/fab/lib/fab.js +19 -12
  137. package/fab/lib/fab.js.map +1 -1
  138. package/fab/lib/forced-colors-styles.css.d.ts +1 -0
  139. package/fab/lib/forced-colors-styles.css.js +9 -0
  140. package/fab/lib/forced-colors-styles.css.js.map +1 -0
  141. package/fab/lib/forced-colors-styles.scss +26 -0
  142. package/fab/lib/shared-styles.css.d.ts +1 -0
  143. package/fab/lib/shared-styles.css.js +9 -0
  144. package/fab/lib/shared-styles.css.js.map +1 -0
  145. package/fab/lib/{fab-shared-styles.scss → shared-styles.scss} +1 -1
  146. package/fab/lib/shared.d.ts +49 -0
  147. package/fab/lib/shared.js +113 -0
  148. package/fab/lib/shared.js.map +1 -0
  149. package/field/lib/_filled-field.scss +47 -12
  150. package/field/lib/_outlined-field.scss +39 -12
  151. package/field/lib/field.js +14 -27
  152. package/field/lib/field.js.map +1 -1
  153. package/field/lib/filled-styles.css.js +1 -1
  154. package/field/lib/filled-styles.css.js.map +1 -1
  155. package/field/lib/outlined-styles.css.js +1 -1
  156. package/field/lib/outlined-styles.css.js.map +1 -1
  157. package/focus/focus-ring.d.ts +2 -1
  158. package/focus/focus-ring.js +2 -1
  159. package/focus/focus-ring.js.map +1 -1
  160. package/focus/lib/_focus-ring.scss +49 -34
  161. package/focus/lib/focus-ring-styles.css.js +1 -1
  162. package/focus/lib/focus-ring-styles.css.js.map +1 -1
  163. package/focus/lib/focus-ring.d.ts +59 -12
  164. package/focus/lib/focus-ring.js +118 -14
  165. package/focus/lib/focus-ring.js.map +1 -1
  166. package/icon/icon.d.ts +0 -1
  167. package/icon/icon.js +0 -1
  168. package/icon/icon.js.map +1 -1
  169. package/icon/lib/_icon.scss +2 -0
  170. package/icon/lib/icon-styles.css.js +1 -1
  171. package/icon/lib/icon-styles.css.js.map +1 -1
  172. package/icon/lib/icon.d.ts +5 -4
  173. package/icon/lib/icon.js +3 -2
  174. package/icon/lib/icon.js.map +1 -1
  175. package/iconbutton/filled-icon-button.d.ts +6 -2
  176. package/iconbutton/filled-icon-button.js.map +1 -1
  177. package/iconbutton/filled-tonal-icon-button.d.ts +6 -2
  178. package/iconbutton/filled-tonal-icon-button.js.map +1 -1
  179. package/iconbutton/harness.d.ts +1 -1
  180. package/iconbutton/harness.js +4 -1
  181. package/iconbutton/harness.js.map +1 -1
  182. package/iconbutton/lib/_filled-icon-button.scss +38 -13
  183. package/iconbutton/lib/_filled-tonal-icon-button.scss +38 -11
  184. package/iconbutton/lib/_outlined-icon-button.scss +38 -13
  185. package/iconbutton/lib/_shared.scss +4 -6
  186. package/iconbutton/lib/_standard-icon-button.scss +14 -14
  187. package/iconbutton/lib/filled-styles.css.js +1 -1
  188. package/iconbutton/lib/filled-styles.css.js.map +1 -1
  189. package/iconbutton/lib/filled-tonal-styles.css.js +1 -1
  190. package/iconbutton/lib/filled-tonal-styles.css.js.map +1 -1
  191. package/iconbutton/lib/icon-button.d.ts +17 -25
  192. package/iconbutton/lib/icon-button.js +37 -73
  193. package/iconbutton/lib/icon-button.js.map +1 -1
  194. package/iconbutton/lib/outlined-styles.css.js +1 -1
  195. package/iconbutton/lib/outlined-styles.css.js.map +1 -1
  196. package/iconbutton/lib/shared-styles.css.js +1 -1
  197. package/iconbutton/lib/shared-styles.css.js.map +1 -1
  198. package/iconbutton/lib/standard-styles.css.js +1 -1
  199. package/iconbutton/lib/standard-styles.css.js.map +1 -1
  200. package/iconbutton/outlined-icon-button.d.ts +5 -2
  201. package/iconbutton/outlined-icon-button.js.map +1 -1
  202. package/iconbutton/standard-icon-button.d.ts +5 -2
  203. package/iconbutton/standard-icon-button.js.map +1 -1
  204. package/linearprogress/_linear-progress.scss +6 -0
  205. package/linearprogress/harness.d.ts +13 -0
  206. package/linearprogress/harness.js +18 -0
  207. package/linearprogress/harness.js.map +1 -0
  208. package/linearprogress/lib/_linear-progress.scss +386 -0
  209. package/linearprogress/lib/linear-progress-styles.css.d.ts +1 -0
  210. package/linearprogress/lib/linear-progress-styles.css.js +9 -0
  211. package/linearprogress/lib/linear-progress-styles.css.js.map +1 -0
  212. package/linearprogress/lib/linear-progress-styles.scss +8 -0
  213. package/linearprogress/lib/linear-progress.d.ts +35 -0
  214. package/linearprogress/lib/linear-progress.js +127 -0
  215. package/linearprogress/lib/linear-progress.js.map +1 -0
  216. package/linearprogress/linear-progress.d.ts +23 -0
  217. package/linearprogress/linear-progress.js +26 -0
  218. package/linearprogress/linear-progress.js.map +1 -0
  219. package/list/lib/_list.scss +9 -50
  220. package/list/lib/list-styles.css.js +1 -1
  221. package/list/lib/list-styles.css.js.map +1 -1
  222. package/list/lib/list.d.ts +8 -15
  223. package/list/lib/list.js +20 -45
  224. package/list/lib/list.js.map +1 -1
  225. package/list/lib/listitem/_list-item.scss +17 -72
  226. package/list/lib/listitem/forced-colors-styles.css.js +1 -1
  227. package/list/lib/listitem/forced-colors-styles.css.js.map +1 -1
  228. package/list/lib/listitem/list-item-styles.css.js +1 -1
  229. package/list/lib/listitem/list-item-styles.css.js.map +1 -1
  230. package/list/lib/listitem/list-item.d.ts +29 -31
  231. package/list/lib/listitem/list-item.js +26 -80
  232. package/list/lib/listitem/list-item.js.map +1 -1
  233. package/list/lib/listitemlink/list-item-link.js +5 -9
  234. package/list/lib/listitemlink/list-item-link.js.map +1 -1
  235. package/menu/lib/_menu.scss +9 -29
  236. package/menu/lib/menu-styles.css.js +1 -1
  237. package/menu/lib/menu-styles.css.js.map +1 -1
  238. package/menu/lib/menu.d.ts +32 -41
  239. package/menu/lib/menu.js +51 -82
  240. package/menu/lib/menu.js.map +1 -1
  241. package/menu/lib/menuitem/_menu-item.scss +16 -33
  242. package/menu/lib/menuitem/menu-item-styles.css.js +1 -1
  243. package/menu/lib/menuitem/menu-item-styles.css.js.map +1 -1
  244. package/menu/lib/menuitem/menu-item.d.ts +1 -1
  245. package/menu/lib/menuitem/menu-item.js +4 -6
  246. package/menu/lib/menuitem/menu-item.js.map +1 -1
  247. package/menu/lib/menuitemlink/menu-item-link.d.ts +0 -2
  248. package/menu/lib/menuitemlink/menu-item-link.js +3 -6
  249. package/menu/lib/menuitemlink/menu-item-link.js.map +1 -1
  250. package/menu/lib/shared.d.ts +20 -2
  251. package/menu/lib/shared.js +18 -0
  252. package/menu/lib/shared.js.map +1 -1
  253. package/menu/lib/submenuitem/sub-menu-item.d.ts +16 -13
  254. package/menu/lib/submenuitem/sub-menu-item.js +27 -18
  255. package/menu/lib/submenuitem/sub-menu-item.js.map +1 -1
  256. package/menu/lib/typeaheadController.d.ts +9 -9
  257. package/menu/lib/typeaheadController.js.map +1 -1
  258. package/navigationbar/lib/_navigation-bar.scss +7 -1
  259. package/navigationbar/lib/navigation-bar-styles.css.js +1 -1
  260. package/navigationbar/lib/navigation-bar-styles.css.js.map +1 -1
  261. package/navigationbar/lib/navigation-bar.d.ts +6 -6
  262. package/navigationbar/lib/navigation-bar.js +17 -18
  263. package/navigationbar/lib/navigation-bar.js.map +1 -1
  264. package/navigationbar/navigation-bar.d.ts +0 -1
  265. package/navigationbar/navigation-bar.js +0 -1
  266. package/navigationbar/navigation-bar.js.map +1 -1
  267. package/navigationdrawer/lib/_navigation-drawer-modal.scss +0 -3
  268. package/navigationdrawer/lib/_navigation-drawer.scss +0 -3
  269. package/navigationdrawer/lib/_shared.scss +1 -4
  270. package/navigationdrawer/lib/navigation-drawer-modal-styles.css.js +1 -1
  271. package/navigationdrawer/lib/navigation-drawer-modal-styles.css.js.map +1 -1
  272. package/navigationdrawer/lib/navigation-drawer-modal.d.ts +7 -12
  273. package/navigationdrawer/lib/navigation-drawer-modal.js +19 -41
  274. package/navigationdrawer/lib/navigation-drawer-modal.js.map +1 -1
  275. package/navigationdrawer/lib/navigation-drawer-styles.css.js +1 -1
  276. package/navigationdrawer/lib/navigation-drawer-styles.css.js.map +1 -1
  277. package/navigationdrawer/lib/navigation-drawer.d.ts +6 -10
  278. package/navigationdrawer/lib/navigation-drawer.js +17 -38
  279. package/navigationdrawer/lib/navigation-drawer.js.map +1 -1
  280. package/navigationdrawer/lib/shared-styles.css.js +1 -1
  281. package/navigationdrawer/lib/shared-styles.css.js.map +1 -1
  282. package/navigationdrawer/navigation-drawer-modal.d.ts +0 -1
  283. package/navigationdrawer/navigation-drawer-modal.js +0 -1
  284. package/navigationdrawer/navigation-drawer-modal.js.map +1 -1
  285. package/navigationdrawer/navigation-drawer.d.ts +0 -1
  286. package/navigationdrawer/navigation-drawer.js +0 -1
  287. package/navigationdrawer/navigation-drawer.js.map +1 -1
  288. package/navigationtab/lib/_navigation-tab.scss +2 -2
  289. package/navigationtab/lib/navigation-tab-styles.css.js +1 -1
  290. package/navigationtab/lib/navigation-tab-styles.css.js.map +1 -1
  291. package/navigationtab/lib/navigation-tab.d.ts +16 -29
  292. package/navigationtab/lib/navigation-tab.js +49 -88
  293. package/navigationtab/lib/navigation-tab.js.map +1 -1
  294. package/navigationtab/lib/state.d.ts +1 -1
  295. package/navigationtab/lib/state.js.map +1 -1
  296. package/navigationtab/navigation-tab.d.ts +0 -1
  297. package/navigationtab/navigation-tab.js +0 -1
  298. package/navigationtab/navigation-tab.js.map +1 -1
  299. package/package.json +1 -1
  300. package/radio/lib/_radio.scss +1 -1
  301. package/radio/lib/radio-styles.css.js +1 -1
  302. package/radio/lib/radio-styles.css.js.map +1 -1
  303. package/radio/lib/radio.d.ts +2 -8
  304. package/radio/lib/radio.js +31 -58
  305. package/radio/lib/radio.js.map +1 -1
  306. package/ripple/lib/ripple.js +11 -13
  307. package/ripple/lib/ripple.js.map +1 -1
  308. package/segmentedbutton/lib/outlined-segmented-button.d.ts +16 -7
  309. package/segmentedbutton/lib/outlined-segmented-button.js +3 -3
  310. package/segmentedbutton/lib/outlined-segmented-button.js.map +1 -1
  311. package/segmentedbutton/lib/segmented-button.d.ts +28 -40
  312. package/segmentedbutton/lib/segmented-button.js +42 -96
  313. package/segmentedbutton/lib/segmented-button.js.map +1 -1
  314. package/segmentedbutton/outlined-segmented-button.d.ts +0 -1
  315. package/segmentedbutton/outlined-segmented-button.js +0 -1
  316. package/segmentedbutton/outlined-segmented-button.js.map +1 -1
  317. package/segmentedbuttonset/lib/_outlined-segmented-button-set.scss +32 -13
  318. package/segmentedbuttonset/lib/outlined-segmented-button-set.d.ts +6 -4
  319. package/segmentedbuttonset/lib/outlined-segmented-button-set.js +3 -2
  320. package/segmentedbuttonset/lib/outlined-segmented-button-set.js.map +1 -1
  321. package/segmentedbuttonset/lib/outlined-styles.css.js +1 -1
  322. package/segmentedbuttonset/lib/outlined-styles.css.js.map +1 -1
  323. package/segmentedbuttonset/lib/segmented-button-set.d.ts +3 -9
  324. package/segmentedbuttonset/lib/segmented-button-set.js +14 -20
  325. package/segmentedbuttonset/lib/segmented-button-set.js.map +1 -1
  326. package/segmentedbuttonset/outlined-segmented-button-set.d.ts +0 -1
  327. package/segmentedbuttonset/outlined-segmented-button-set.js +0 -1
  328. package/segmentedbuttonset/outlined-segmented-button-set.js.map +1 -1
  329. package/select/_filled-select.scss +6 -0
  330. package/select/_outlined-select.scss +6 -0
  331. package/select/filled-select.d.ts +41 -0
  332. package/select/filled-select.js +46 -0
  333. package/select/filled-select.js.map +1 -0
  334. package/select/harness.d.ts +24 -0
  335. package/select/harness.js +53 -0
  336. package/select/harness.js.map +1 -0
  337. package/select/lib/_filled-select.scss +222 -0
  338. package/select/lib/_outlined-select.scss +180 -0
  339. package/select/lib/_shared.scss +48 -0
  340. package/select/lib/filled-forced-colors-styles.css.d.ts +1 -0
  341. package/select/lib/filled-forced-colors-styles.css.js +9 -0
  342. package/select/lib/filled-forced-colors-styles.css.js.map +1 -0
  343. package/select/lib/filled-forced-colors-styles.scss +29 -0
  344. package/select/lib/filled-select-styles.css.d.ts +1 -0
  345. package/select/lib/filled-select-styles.css.js +9 -0
  346. package/select/lib/filled-select-styles.css.js.map +1 -0
  347. package/select/lib/filled-select-styles.scss +10 -0
  348. package/select/lib/filled-select.d.ts +10 -0
  349. package/select/lib/filled-select.js +16 -0
  350. package/select/lib/filled-select.js.map +1 -0
  351. package/select/lib/outlined-forced-colors-styles.css.d.ts +1 -0
  352. package/select/lib/outlined-forced-colors-styles.css.js +9 -0
  353. package/select/lib/outlined-forced-colors-styles.css.js.map +1 -0
  354. package/select/lib/outlined-forced-colors-styles.scss +29 -0
  355. package/select/lib/outlined-select-styles.css.d.ts +1 -0
  356. package/select/lib/outlined-select-styles.css.js +9 -0
  357. package/select/lib/outlined-select-styles.css.js.map +1 -0
  358. package/select/lib/outlined-select-styles.scss +10 -0
  359. package/select/lib/outlined-select.d.ts +10 -0
  360. package/select/lib/outlined-select.js +16 -0
  361. package/select/lib/outlined-select.js.map +1 -0
  362. package/select/lib/select.d.ts +216 -0
  363. package/select/lib/select.js +589 -0
  364. package/select/lib/select.js.map +1 -0
  365. package/select/lib/selectoption/harness.d.ts +11 -0
  366. package/select/lib/selectoption/harness.js +12 -0
  367. package/select/lib/selectoption/harness.js.map +1 -0
  368. package/select/lib/selectoption/select-option.d.ts +30 -0
  369. package/select/lib/selectoption/select-option.js +71 -0
  370. package/select/lib/selectoption/select-option.js.map +1 -0
  371. package/select/lib/shared-styles.css.d.ts +1 -0
  372. package/select/lib/shared-styles.css.js +9 -0
  373. package/select/lib/shared-styles.css.js.map +1 -0
  374. package/select/lib/shared-styles.scss +10 -0
  375. package/select/lib/shared.d.ts +52 -0
  376. package/select/lib/shared.js +41 -0
  377. package/select/lib/shared.js.map +1 -0
  378. package/select/outlined-select.d.ts +41 -0
  379. package/select/outlined-select.js +46 -0
  380. package/select/outlined-select.js.map +1 -0
  381. package/select/select-option.d.ts +44 -0
  382. package/select/select-option.js +51 -0
  383. package/select/select-option.js.map +1 -0
  384. package/slider/harness.d.ts +2 -1
  385. package/slider/harness.js +14 -9
  386. package/slider/harness.js.map +1 -1
  387. package/slider/lib/_slider.scss +149 -167
  388. package/slider/lib/forced-colors-styles.css.js +1 -1
  389. package/slider/lib/forced-colors-styles.css.js.map +1 -1
  390. package/slider/lib/forced-colors-styles.scss +2 -2
  391. package/slider/lib/slider-styles.css.js +1 -1
  392. package/slider/lib/slider-styles.css.js.map +1 -1
  393. package/slider/lib/slider.d.ts +23 -57
  394. package/slider/lib/slider.js +77 -167
  395. package/slider/lib/slider.js.map +1 -1
  396. package/switch/lib/_switch.scss +63 -18
  397. package/switch/lib/switch-styles.css.js +1 -1
  398. package/switch/lib/switch-styles.css.js.map +1 -1
  399. package/switch/lib/switch.d.ts +0 -7
  400. package/switch/lib/switch.js +32 -79
  401. package/switch/lib/switch.js.map +1 -1
  402. package/textfield/harness.d.ts +1 -1
  403. package/textfield/harness.js.map +1 -1
  404. package/textfield/lib/_filled-text-field.scss +70 -14
  405. package/textfield/lib/_outlined-text-field.scss +60 -35
  406. package/textfield/lib/filled-forced-colors-styles.css.js +1 -1
  407. package/textfield/lib/filled-forced-colors-styles.css.js.map +1 -1
  408. package/textfield/lib/filled-styles.css.js +1 -1
  409. package/textfield/lib/filled-styles.css.js.map +1 -1
  410. package/textfield/lib/outlined-forced-colors-styles.css.js +1 -1
  411. package/textfield/lib/outlined-forced-colors-styles.css.js.map +1 -1
  412. package/textfield/lib/outlined-styles.css.js +1 -1
  413. package/textfield/lib/outlined-styles.css.js.map +1 -1
  414. package/textfield/lib/text-field.d.ts +1 -11
  415. package/textfield/lib/text-field.js +45 -115
  416. package/textfield/lib/text-field.js.map +1 -1
  417. package/tokens/_index.scss +5 -18
  418. package/tokens/_md-comp-assist-chip.scss +25 -29
  419. package/tokens/_md-comp-checkbox.scss +78 -1
  420. package/tokens/_md-comp-circular-progress-indicator.scss +39 -13
  421. package/tokens/_md-comp-elevated-button.scss +0 -10
  422. package/tokens/_md-comp-elevation.scss +0 -4
  423. package/tokens/_md-comp-fab-branded.scss +84 -1
  424. package/tokens/_md-comp-fab.scss +249 -0
  425. package/tokens/_md-comp-filled-button.scss +0 -10
  426. package/{field/lib → tokens}/_md-comp-filled-field.scss +91 -9
  427. package/tokens/_md-comp-filled-icon-button.scss +46 -1
  428. package/tokens/_md-comp-filled-select.scss +124 -1
  429. package/tokens/_md-comp-filled-text-field.scss +93 -9
  430. package/tokens/_md-comp-filled-tonal-button.scss +0 -11
  431. package/tokens/_md-comp-filled-tonal-icon-button.scss +45 -3
  432. package/tokens/_md-comp-filter-chip.scss +103 -103
  433. package/tokens/_md-comp-focus-ring.scss +23 -24
  434. package/tokens/_md-comp-icon-button.scss +37 -1
  435. package/tokens/_md-comp-input-chip.scss +77 -95
  436. package/tokens/_md-comp-linear-progress-indicator.scss +31 -3
  437. package/tokens/_md-comp-list-item.scss +174 -0
  438. package/tokens/_md-comp-list.scss +81 -26
  439. package/tokens/_md-comp-menu-item.scss +50 -0
  440. package/tokens/_md-comp-menu.scss +29 -2
  441. package/tokens/_md-comp-outlined-button.scss +0 -10
  442. package/{field/lib → tokens}/_md-comp-outlined-field.scss +85 -9
  443. package/tokens/_md-comp-outlined-icon-button.scss +41 -1
  444. package/tokens/_md-comp-outlined-segmented-button.scss +57 -11
  445. package/tokens/_md-comp-outlined-select.scss +123 -1
  446. package/tokens/_md-comp-outlined-text-field.scss +85 -8
  447. package/tokens/_md-comp-slider.scss +13 -1
  448. package/tokens/_md-comp-suggestion-chip.scss +29 -30
  449. package/tokens/_md-comp-switch.scss +81 -1
  450. package/tokens/_md-comp-text-button.scss +0 -10
  451. package/tokens/_values.scss +2 -4
  452. package/types/aria.d.ts +59 -1
  453. package/actionelement/action-element.d.ts +0 -79
  454. package/actionelement/action-element.js +0 -97
  455. package/actionelement/action-element.js.map +0 -1
  456. package/button/lib/state.d.ts +0 -10
  457. package/button/lib/state.js +0 -7
  458. package/button/lib/state.js.map +0 -1
  459. package/controller/action-controller.d.ts +0 -147
  460. package/controller/action-controller.js +0 -286
  461. package/controller/action-controller.js.map +0 -1
  462. package/decorators/aria-property.d.ts +0 -32
  463. package/decorators/aria-property.js +0 -99
  464. package/decorators/aria-property.js.map +0 -1
  465. package/fab/_fab-extended.scss +0 -6
  466. package/fab/fab-extended.d.ts +0 -23
  467. package/fab/fab-extended.js +0 -29
  468. package/fab/fab-extended.js.map +0 -1
  469. package/fab/lib/_fab-extended.scss +0 -73
  470. package/fab/lib/fab-extended-styles.css.js +0 -9
  471. package/fab/lib/fab-extended-styles.css.js.map +0 -1
  472. package/fab/lib/fab-extended.d.ts +0 -19
  473. package/fab/lib/fab-extended.js +0 -28
  474. package/fab/lib/fab-extended.js.map +0 -1
  475. package/fab/lib/fab-shared-styles.css.js +0 -9
  476. package/fab/lib/fab-shared-styles.css.js.map +0 -1
  477. package/fab/lib/fab-shared.d.ts +0 -44
  478. package/fab/lib/fab-shared.js +0 -121
  479. package/fab/lib/fab-shared.js.map +0 -1
  480. package/focus/strong-focus.d.ts +0 -56
  481. package/focus/strong-focus.js +0 -96
  482. package/focus/strong-focus.js.map +0 -1
  483. package/sass/_shape.scss +0 -154
  484. package/slider/lib/_tokens.scss +0 -65
  485. package/tokens/_md-comp-extended-fab-branded.scss +0 -45
  486. package/tokens/_md-comp-extended-fab-primary.scss +0 -45
  487. package/tokens/_md-comp-extended-fab-secondary.scss +0 -48
  488. package/tokens/_md-comp-extended-fab-surface.scss +0 -45
  489. package/tokens/_md-comp-extended-fab-tertiary.scss +0 -48
  490. package/tokens/_md-comp-fab-branded-large.scss +0 -23
  491. package/tokens/_md-comp-fab-primary-large.scss +0 -23
  492. package/tokens/_md-comp-fab-primary-small.scss +0 -23
  493. package/tokens/_md-comp-fab-primary.scss +0 -23
  494. package/tokens/_md-comp-fab-secondary-large.scss +0 -23
  495. package/tokens/_md-comp-fab-secondary-small.scss +0 -23
  496. package/tokens/_md-comp-fab-secondary.scss +0 -23
  497. package/tokens/_md-comp-fab-surface-large.scss +0 -23
  498. package/tokens/_md-comp-fab-surface-small.scss +0 -23
  499. package/tokens/_md-comp-fab-surface.scss +0 -23
  500. package/tokens/_md-comp-fab-tertiary-large.scss +0 -23
  501. package/tokens/_md-comp-fab-tertiary-small.scss +0 -23
  502. package/tokens/_md-comp-fab-tertiary.scss +0 -23
  503. /package/{fab/lib/fab-extended-styles.css.d.ts → chips/lib/elevated-styles.css.d.ts} +0 -0
  504. /package/{fab/lib/fab-shared-styles.css.d.ts → chips/lib/filter-styles.css.d.ts} +0 -0
@@ -1,29 +0,0 @@
1
- /**
2
- * @license
3
- * Copyright 2022 Google LLC
4
- * SPDX-License-Identifier: Apache-2.0
5
- */
6
- import { __decorate } from "tslib";
7
- import '../icon/icon.js';
8
- import { html } from 'lit';
9
- import { customElement } from 'lit/decorators.js';
10
- import { FabExtended } from './lib/fab-extended.js';
11
- import { styles as extendedStyles } from './lib/fab-extended-styles.css.js';
12
- import { styles as sharedStyles } from './lib/fab-shared-styles.css.js';
13
- /**
14
- * @soyCompatible
15
- * @final
16
- * @suppress {visibility}
17
- */
18
- let MdFabExtended = class MdFabExtended extends FabExtended {
19
- /** @soyTemplate */
20
- renderIcon(icon) {
21
- return icon ? html `<md-icon class="md3-fab__icon">${icon}</md-icon>` : '';
22
- }
23
- };
24
- MdFabExtended.styles = [sharedStyles, extendedStyles];
25
- MdFabExtended = __decorate([
26
- customElement('md-fab-extended')
27
- ], MdFabExtended);
28
- export { MdFabExtended };
29
- //# sourceMappingURL=fab-extended.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"fab-extended.js","sourceRoot":"","sources":["fab-extended.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,iBAAiB,CAAC;AAEzB,OAAO,EAAC,IAAI,EAAiB,MAAM,KAAK,CAAC;AACzC,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,WAAW,EAAC,MAAM,uBAAuB,CAAC;AAClD,OAAO,EAAC,MAAM,IAAI,cAAc,EAAC,MAAM,kCAAkC,CAAC;AAC1E,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,gCAAgC,CAAC;AAQtE;;;;GAIG;AAEI,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,WAAW;IAG5C,mBAAmB;IACA,UAAU,CAAC,IAAY;QACxC,OAAO,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA,kCAAkC,IAAI,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;IAC5E,CAAC;;AALe,oBAAM,GAAG,CAAC,YAAY,EAAE,cAAc,CAAC,CAAC;AAD7C,aAAa;IADzB,aAAa,CAAC,iBAAiB,CAAC;GACpB,aAAa,CAOzB;SAPY,aAAa","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../icon/icon.js';\n\nimport {html, TemplateResult} from 'lit';\nimport {customElement} from 'lit/decorators.js';\n\nimport {FabExtended} from './lib/fab-extended.js';\nimport {styles as extendedStyles} from './lib/fab-extended-styles.css.js';\nimport {styles as sharedStyles} from './lib/fab-shared-styles.css.js';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'md-fab-extended': MdFabExtended;\n }\n}\n\n/**\n * @soyCompatible\n * @final\n * @suppress {visibility}\n */\n@customElement('md-fab-extended')\nexport class MdFabExtended extends FabExtended {\n static override styles = [sharedStyles, extendedStyles];\n\n /** @soyTemplate */\n protected override renderIcon(icon: string): TemplateResult|string {\n return icon ? html`<md-icon class=\"md3-fab__icon\">${icon}</md-icon>` : '';\n }\n}\n"]}
@@ -1,73 +0,0 @@
1
- //
2
- // Copyright 2022 Google LLC
3
- // SPDX-License-Identifier: Apache-2.0
4
- //
5
-
6
- // stylelint-disable selector-class-pattern --
7
- // Selector '.md3-*' should only be used in this project.
8
-
9
- // go/keep-sorted start
10
- @use 'sass:map';
11
- // go/keep-sorted end
12
- // go/keep-sorted start
13
- @use '../../sass/shape';
14
- @use '../../sass/theme';
15
- @use '../../tokens';
16
- @use './shared';
17
- // go/keep-sorted end
18
-
19
- @mixin theme($tokens) {
20
- $tokens: theme.validate-theme(
21
- tokens.md-comp-extended-fab-surface-values(),
22
- $tokens
23
- );
24
- $tokens: theme.create-theme-vars($tokens, 'fab-extended');
25
- $tokens: shape.resolve-tokens($tokens, 'container-shape');
26
-
27
- @include theme.emit-theme-vars($tokens);
28
- }
29
-
30
- @mixin styles() {
31
- $tokens: tokens.md-comp-extended-fab-surface-values();
32
- $tokens: theme.create-theme-vars($tokens, 'fab-extended');
33
- $tokens: shape.resolve-tokens($tokens, 'container-shape');
34
-
35
- :host {
36
- @each $token, $value in $tokens {
37
- --_#{$token}: #{$value};
38
- }
39
- }
40
-
41
- .md3-fab--extended {
42
- box-sizing: border-box;
43
- padding-inline-start: 16px;
44
- padding-inline-end: 20px;
45
- height: var(--_container-height);
46
- font: var(--_label-text-type);
47
- }
48
-
49
- .md3-fab__label {
50
- padding-inline-start: 12px;
51
- color: var(--_label-text-color);
52
-
53
- .md3-fab:hover & {
54
- color: var(--_hover-label-text-color);
55
- }
56
-
57
- .md3-fab:focus & {
58
- color: var(--_focus-label-text-color);
59
- }
60
-
61
- .md3-fab:active & {
62
- color: var(--_pressed-label-text-color);
63
- }
64
- }
65
-
66
- @media (forced-colors: active) {
67
- .md3-fab--extended {
68
- // Adjust the padding-inline to account for the 1px border in HCM.
69
- padding-inline-start: 15px;
70
- padding-inline-end: 19px;
71
- }
72
- }
73
- }
@@ -1,9 +0,0 @@
1
- /**
2
- * @license
3
- * Copyright 2022 Google LLC
4
- * SPDX-License-Identifier: Apache-2.0
5
- */
6
- import { css } from 'lit';
7
- export const styles = css `:host{--_container-shape-start-start: var(--md-fab-extended-container-shape-start-start, var(--md-fab-extended-container-shape, 16px));--_container-shape-start-end: var(--md-fab-extended-container-shape-start-end, var(--md-fab-extended-container-shape, 16px));--_container-shape-end-end: var(--md-fab-extended-container-shape-end-end, var(--md-fab-extended-container-shape, 16px));--_container-shape-end-start: var(--md-fab-extended-container-shape-end-start, var(--md-fab-extended-container-shape, 16px));--_container-color: var(--md-fab-extended-container-color, var(--md-sys-color-surface-container-high, #ece6f0));--_container-elevation: var(--md-fab-extended-container-elevation, 3);--_container-height: var(--md-fab-extended-container-height, 56px);--_container-shadow-color: var(--md-fab-extended-container-shadow-color, var(--md-sys-color-shadow, #000));--_focus-container-elevation: var(--md-fab-extended-focus-container-elevation, 3);--_focus-icon-color: var(--md-fab-extended-focus-icon-color, var(--md-sys-color-primary, #6750a4));--_focus-label-text-color: var(--md-fab-extended-focus-label-text-color, var(--md-sys-color-primary, #6750a4));--_focus-state-layer-color: var(--md-fab-extended-focus-state-layer-color, var(--md-sys-color-primary, #6750a4));--_focus-state-layer-opacity: var(--md-fab-extended-focus-state-layer-opacity, 0.12);--_hover-container-elevation: var(--md-fab-extended-hover-container-elevation, 4);--_hover-icon-color: var(--md-fab-extended-hover-icon-color, var(--md-sys-color-primary, #6750a4));--_hover-label-text-color: var(--md-fab-extended-hover-label-text-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-color: var(--md-fab-extended-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-opacity: var(--md-fab-extended-hover-state-layer-opacity, 0.08);--_icon-color: var(--md-fab-extended-icon-color, var(--md-sys-color-primary, #6750a4));--_icon-size: var(--md-fab-extended-icon-size, 24px);--_label-text-color: var(--md-fab-extended-label-text-color, var(--md-sys-color-primary, #6750a4));--_label-text-font: var(--md-fab-extended-label-text-font, var(--md-ref-typeface-plain, Roboto));--_label-text-line-height: var(--md-fab-extended-label-text-line-height, 1.25rem);--_label-text-size: var(--md-fab-extended-label-text-size, 0.875rem);--_label-text-tracking: var(--md-fab-extended-label-text-tracking, 0.006rem);--_label-text-type: var(--md-fab-extended-label-text-type, 500 0.875rem / 1.25rem var(--md-ref-typeface-plain, Roboto));--_label-text-weight: var(--md-fab-extended-label-text-weight, 500);--_lowered-container-color: var(--md-fab-extended-lowered-container-color, var(--md-sys-color-surface-container-low, #f7f2fa));--_lowered-container-elevation: var(--md-fab-extended-lowered-container-elevation, 1);--_lowered-focus-container-elevation: var(--md-fab-extended-lowered-focus-container-elevation, 1);--_lowered-hover-container-elevation: var(--md-fab-extended-lowered-hover-container-elevation, 2);--_lowered-pressed-container-elevation: var(--md-fab-extended-lowered-pressed-container-elevation, 1);--_pressed-container-elevation: var(--md-fab-extended-pressed-container-elevation, 3);--_pressed-icon-color: var(--md-fab-extended-pressed-icon-color, var(--md-sys-color-primary, #6750a4));--_pressed-label-text-color: var(--md-fab-extended-pressed-label-text-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-color: var(--md-fab-extended-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-opacity: var(--md-fab-extended-pressed-state-layer-opacity, 0.12)}.md3-fab--extended{box-sizing:border-box;padding-inline-start:16px;padding-inline-end:20px;height:var(--_container-height);font:var(--_label-text-type)}.md3-fab__label{padding-inline-start:12px;color:var(--_label-text-color)}.md3-fab:hover .md3-fab__label{color:var(--_hover-label-text-color)}.md3-fab:focus .md3-fab__label{color:var(--_focus-label-text-color)}.md3-fab:active .md3-fab__label{color:var(--_pressed-label-text-color)}@media(forced-colors: active){.md3-fab--extended{padding-inline-start:15px;padding-inline-end:19px}}/*# sourceMappingURL=fab-extended-styles.css.map */
8
- `;
9
- //# sourceMappingURL=fab-extended-styles.css.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"fab-extended-styles.css.js","sourceRoot":"","sources":["fab-extended-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-fab-extended-container-shape-start-start, var(--md-fab-extended-container-shape, 16px));--_container-shape-start-end: var(--md-fab-extended-container-shape-start-end, var(--md-fab-extended-container-shape, 16px));--_container-shape-end-end: var(--md-fab-extended-container-shape-end-end, var(--md-fab-extended-container-shape, 16px));--_container-shape-end-start: var(--md-fab-extended-container-shape-end-start, var(--md-fab-extended-container-shape, 16px));--_container-color: var(--md-fab-extended-container-color, var(--md-sys-color-surface-container-high, #ece6f0));--_container-elevation: var(--md-fab-extended-container-elevation, 3);--_container-height: var(--md-fab-extended-container-height, 56px);--_container-shadow-color: var(--md-fab-extended-container-shadow-color, var(--md-sys-color-shadow, #000));--_focus-container-elevation: var(--md-fab-extended-focus-container-elevation, 3);--_focus-icon-color: var(--md-fab-extended-focus-icon-color, var(--md-sys-color-primary, #6750a4));--_focus-label-text-color: var(--md-fab-extended-focus-label-text-color, var(--md-sys-color-primary, #6750a4));--_focus-state-layer-color: var(--md-fab-extended-focus-state-layer-color, var(--md-sys-color-primary, #6750a4));--_focus-state-layer-opacity: var(--md-fab-extended-focus-state-layer-opacity, 0.12);--_hover-container-elevation: var(--md-fab-extended-hover-container-elevation, 4);--_hover-icon-color: var(--md-fab-extended-hover-icon-color, var(--md-sys-color-primary, #6750a4));--_hover-label-text-color: var(--md-fab-extended-hover-label-text-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-color: var(--md-fab-extended-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-opacity: var(--md-fab-extended-hover-state-layer-opacity, 0.08);--_icon-color: var(--md-fab-extended-icon-color, var(--md-sys-color-primary, #6750a4));--_icon-size: var(--md-fab-extended-icon-size, 24px);--_label-text-color: var(--md-fab-extended-label-text-color, var(--md-sys-color-primary, #6750a4));--_label-text-font: var(--md-fab-extended-label-text-font, var(--md-ref-typeface-plain, Roboto));--_label-text-line-height: var(--md-fab-extended-label-text-line-height, 1.25rem);--_label-text-size: var(--md-fab-extended-label-text-size, 0.875rem);--_label-text-tracking: var(--md-fab-extended-label-text-tracking, 0.006rem);--_label-text-type: var(--md-fab-extended-label-text-type, 500 0.875rem / 1.25rem var(--md-ref-typeface-plain, Roboto));--_label-text-weight: var(--md-fab-extended-label-text-weight, 500);--_lowered-container-color: var(--md-fab-extended-lowered-container-color, var(--md-sys-color-surface-container-low, #f7f2fa));--_lowered-container-elevation: var(--md-fab-extended-lowered-container-elevation, 1);--_lowered-focus-container-elevation: var(--md-fab-extended-lowered-focus-container-elevation, 1);--_lowered-hover-container-elevation: var(--md-fab-extended-lowered-hover-container-elevation, 2);--_lowered-pressed-container-elevation: var(--md-fab-extended-lowered-pressed-container-elevation, 1);--_pressed-container-elevation: var(--md-fab-extended-pressed-container-elevation, 3);--_pressed-icon-color: var(--md-fab-extended-pressed-icon-color, var(--md-sys-color-primary, #6750a4));--_pressed-label-text-color: var(--md-fab-extended-pressed-label-text-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-color: var(--md-fab-extended-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-opacity: var(--md-fab-extended-pressed-state-layer-opacity, 0.12)}.md3-fab--extended{box-sizing:border-box;padding-inline-start:16px;padding-inline-end:20px;height:var(--_container-height);font:var(--_label-text-type)}.md3-fab__label{padding-inline-start:12px;color:var(--_label-text-color)}.md3-fab:hover .md3-fab__label{color:var(--_hover-label-text-color)}.md3-fab:focus .md3-fab__label{color:var(--_focus-label-text-color)}.md3-fab:active .md3-fab__label{color:var(--_pressed-label-text-color)}@media(forced-colors: active){.md3-fab--extended{padding-inline-start:15px;padding-inline-end:19px}}/*# sourceMappingURL=fab-extended-styles.css.map */\n`;\n "]}
@@ -1,19 +0,0 @@
1
- /**
2
- * @license
3
- * Copyright 2022 Google LLC
4
- * SPDX-License-Identifier: Apache-2.0
5
- */
6
- import { TemplateResult } from 'lit';
7
- import { ClassInfo } from 'lit/directives/class-map.js';
8
- import { FabShared } from './fab-shared.js';
9
- /**
10
- * @soyCompatible
11
- */
12
- export declare class FabExtended extends FabShared {
13
- /** @soyTemplate */
14
- protected getRenderClasses(): ClassInfo;
15
- /** @soyTemplate */
16
- protected renderIcon(icon: string): TemplateResult | string;
17
- /** @soyTemplate */
18
- protected renderLabel(): TemplateResult;
19
- }
@@ -1,28 +0,0 @@
1
- /**
2
- * @license
3
- * Copyright 2022 Google LLC
4
- * SPDX-License-Identifier: Apache-2.0
5
- */
6
- import { html } from 'lit';
7
- import { FabShared } from './fab-shared.js';
8
- /**
9
- * @soyCompatible
10
- */
11
- export class FabExtended extends FabShared {
12
- /** @soyTemplate */
13
- getRenderClasses() {
14
- return {
15
- ...super.getRenderClasses(),
16
- 'md3-fab--extended': true,
17
- };
18
- }
19
- /** @soyTemplate */
20
- renderIcon(icon) {
21
- return '';
22
- }
23
- /** @soyTemplate */
24
- renderLabel() {
25
- return html `<span class="md3-fab__label">${this.label}</span>`;
26
- }
27
- }
28
- //# sourceMappingURL=fab-extended.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"fab-extended.js","sourceRoot":"","sources":["fab-extended.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,IAAI,EAAiB,MAAM,KAAK,CAAC;AAGzC,OAAO,EAAC,SAAS,EAAC,MAAM,iBAAiB,CAAC;AAE1C;;GAEG;AACH,MAAM,OAAO,WAAY,SAAQ,SAAS;IACxC,mBAAmB;IACA,gBAAgB;QACjC,OAAO;YACL,GAAG,KAAK,CAAC,gBAAgB,EAAE;YAC3B,mBAAmB,EAAE,IAAI;SAC1B,CAAC;IACJ,CAAC;IAED,mBAAmB;IACA,UAAU,CAAC,IAAY;QACxC,OAAO,EAAE,CAAC;IACZ,CAAC;IAED,mBAAmB;IACA,WAAW;QAC5B,OAAO,IAAI,CAAA,gCAAgC,IAAI,CAAC,KAAK,SAAS,CAAC;IACjE,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html, TemplateResult} from 'lit';\nimport {ClassInfo} from 'lit/directives/class-map.js';\n\nimport {FabShared} from './fab-shared.js';\n\n/**\n * @soyCompatible\n */\nexport class FabExtended extends FabShared {\n /** @soyTemplate */\n protected override getRenderClasses(): ClassInfo {\n return {\n ...super.getRenderClasses(),\n 'md3-fab--extended': true,\n };\n }\n\n /** @soyTemplate */\n protected override renderIcon(icon: string): TemplateResult|string {\n return '';\n }\n\n /** @soyTemplate */\n protected override renderLabel(): TemplateResult {\n return html`<span class=\"md3-fab__label\">${this.label}</span>`;\n }\n}\n"]}
@@ -1,9 +0,0 @@
1
- /**
2
- * @license
3
- * Copyright 2022 Google LLC
4
- * SPDX-License-Identifier: Apache-2.0
5
- */
6
- import { css } from 'lit';
7
- export const styles = css `:host{display:inline-flex;outline:none;-webkit-tap-highlight-color:rgba(0,0,0,0);vertical-align:top}.md3-fab{display:inline-flex;border:none;outline:none;user-select:none;-webkit-appearance:none;vertical-align:middle;text-decoration:none;align-items:center;justify-content:center;position:relative;z-index:0;background-color:var(--_container-color);--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));--md-ripple-hover-color:var(--_hover-state-layer-color);--md-ripple-focus-color:var(--_focus-state-layer-color);--md-ripple-pressed-color:var(--_pressed-state-layer-color);--md-ripple-hover-opacity:var(--_hover-state-layer-opacity);--md-ripple-focus-opacity:var(--_focus-state-layer-opacity);--md-ripple-pressed-opacity:var(--_pressed-state-layer-opacity);--md-elevation-duration:280ms;--md-elevation-level:var(--_container-elevation);--md-elevation-shadow-color:var(--_container-shadow-color)}.md3-fab.md3-fab--lowered{--md-elevation-level:var(--_lowered-container-elevation)}.md3-fab:focus{--md-elevation-level:var(--_focus-container-elevation)}.md3-fab:focus.md3-fab--lowered{--md-elevation-level:var(--_lowered-focus-container-elevation)}.md3-fab:hover{cursor:pointer;--md-elevation-level:var(--_hover-container-elevation)}.md3-fab:hover.md3-fab--lowered{--md-elevation-level:var(--_lowered-hover-container-elevation)}.md3-fab:active{outline:none;--md-elevation-level:var(--_pressed-container-elevation)}.md3-fab:active.md3-fab--lowered{--md-elevation-level:var(--_lowered-pressed-container-elevation)}md-elevation{z-index:-1}.md3-fab__ripple{overflow:hidden;z-index:-1}.md3-fab,.md3-fab__ripple{border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-start-radius:var(--_container-shape-end-start);border-end-end-radius:var(--_container-shape-end-end)}.md3-fab__icon{display:inline-flex}.md3-fab__touch{position:absolute;top:50%;height:48px;left:50%;width:48px;transform:translate(-50%, -50%)}.md3-fab__icon ::slotted(*),.md3-fab__icon{color:var(--_icon-color);font-size:var(--_icon-size);height:var(--_icon-size);width:var(--_icon-size)}.md3-fab:hover .md3-fab__icon ::slotted(*),.md3-fab:hover .md3-fab__icon{color:var(--_hover-icon-color)}.md3-fab:focus .md3-fab__icon ::slotted(*),.md3-fab:focus .md3-fab__icon{color:var(--_focus-icon-color)}.md3-fab:active .md3-fab__icon ::slotted(*),.md3-fab:active .md3-fab__icon{color:var(--_pressed-icon-color)}@media(forced-colors: active){.md3-fab{--md-focus-ring-offset:3px;border:1px solid ButtonText}}/*# sourceMappingURL=fab-shared-styles.css.map */
8
- `;
9
- //# sourceMappingURL=fab-shared-styles.css.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"fab-shared-styles.css.js","sourceRoot":"","sources":["fab-shared-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n import {css} from 'lit';\n export const styles = css`:host{display:inline-flex;outline:none;-webkit-tap-highlight-color:rgba(0,0,0,0);vertical-align:top}.md3-fab{display:inline-flex;border:none;outline:none;user-select:none;-webkit-appearance:none;vertical-align:middle;text-decoration:none;align-items:center;justify-content:center;position:relative;z-index:0;background-color:var(--_container-color);--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));--md-ripple-hover-color:var(--_hover-state-layer-color);--md-ripple-focus-color:var(--_focus-state-layer-color);--md-ripple-pressed-color:var(--_pressed-state-layer-color);--md-ripple-hover-opacity:var(--_hover-state-layer-opacity);--md-ripple-focus-opacity:var(--_focus-state-layer-opacity);--md-ripple-pressed-opacity:var(--_pressed-state-layer-opacity);--md-elevation-duration:280ms;--md-elevation-level:var(--_container-elevation);--md-elevation-shadow-color:var(--_container-shadow-color)}.md3-fab.md3-fab--lowered{--md-elevation-level:var(--_lowered-container-elevation)}.md3-fab:focus{--md-elevation-level:var(--_focus-container-elevation)}.md3-fab:focus.md3-fab--lowered{--md-elevation-level:var(--_lowered-focus-container-elevation)}.md3-fab:hover{cursor:pointer;--md-elevation-level:var(--_hover-container-elevation)}.md3-fab:hover.md3-fab--lowered{--md-elevation-level:var(--_lowered-hover-container-elevation)}.md3-fab:active{outline:none;--md-elevation-level:var(--_pressed-container-elevation)}.md3-fab:active.md3-fab--lowered{--md-elevation-level:var(--_lowered-pressed-container-elevation)}md-elevation{z-index:-1}.md3-fab__ripple{overflow:hidden;z-index:-1}.md3-fab,.md3-fab__ripple{border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-start-radius:var(--_container-shape-end-start);border-end-end-radius:var(--_container-shape-end-end)}.md3-fab__icon{display:inline-flex}.md3-fab__touch{position:absolute;top:50%;height:48px;left:50%;width:48px;transform:translate(-50%, -50%)}.md3-fab__icon ::slotted(*),.md3-fab__icon{color:var(--_icon-color);font-size:var(--_icon-size);height:var(--_icon-size);width:var(--_icon-size)}.md3-fab:hover .md3-fab__icon ::slotted(*),.md3-fab:hover .md3-fab__icon{color:var(--_hover-icon-color)}.md3-fab:focus .md3-fab__icon ::slotted(*),.md3-fab:focus .md3-fab__icon{color:var(--_focus-icon-color)}.md3-fab:active .md3-fab__icon ::slotted(*),.md3-fab:active .md3-fab__icon{color:var(--_pressed-icon-color)}@media(forced-colors: active){.md3-fab{--md-focus-ring-offset:3px;border:1px solid ButtonText}}/*# sourceMappingURL=fab-shared-styles.css.map */\n`;\n "]}
@@ -1,44 +0,0 @@
1
- /**
2
- * @license
3
- * Copyright 2022 Google LLC
4
- * SPDX-License-Identifier: Apache-2.0
5
- */
6
- import '../../elevation/elevation.js';
7
- import '../../focus/focus-ring.js';
8
- import '../../ripple/ripple.js';
9
- import { LitElement, TemplateResult } from 'lit';
10
- import { ClassInfo } from 'lit/directives/class-map.js';
11
- /**
12
- * @soyCompatible
13
- */
14
- export declare abstract class FabShared extends LitElement {
15
- static shadowRootOptions: ShadowRootInit;
16
- icon: string;
17
- label: string;
18
- lowered: boolean;
19
- reducedTouchTarget: boolean;
20
- private readonly ripple;
21
- private showFocusRing;
22
- private showRipple;
23
- /**
24
- * @soyTemplate
25
- * @soyClasses fabClasses: .md3-fab
26
- */
27
- protected render(): TemplateResult;
28
- /** @soyTemplate */
29
- protected getRenderClasses(): ClassInfo;
30
- /** @soyTemplate */
31
- protected abstract renderIcon(icon: string): TemplateResult | string;
32
- /** @soyTemplate */
33
- protected renderTouchTarget(): TemplateResult;
34
- /** @soyTemplate */
35
- protected renderLabel(): TemplateResult | string;
36
- /** @soyTemplate */
37
- protected renderElevation(): TemplateResult;
38
- /** @soyTemplate */
39
- protected renderFocusRing(): TemplateResult;
40
- private handlePointerDown;
41
- private handleFocus;
42
- private handleBlur;
43
- private readonly renderRipple;
44
- }
@@ -1,121 +0,0 @@
1
- /**
2
- * @license
3
- * Copyright 2022 Google LLC
4
- * SPDX-License-Identifier: Apache-2.0
5
- */
6
- import { __decorate, __metadata } from "tslib";
7
- import '../../elevation/elevation.js';
8
- import '../../focus/focus-ring.js';
9
- import '../../ripple/ripple.js';
10
- import { html, LitElement } from 'lit';
11
- import { property, queryAsync, state } from 'lit/decorators.js';
12
- import { classMap } from 'lit/directives/class-map.js';
13
- import { when } from 'lit/directives/when.js';
14
- import { pointerPress, shouldShowStrongFocus } from '../../focus/strong-focus.js';
15
- import { ripple } from '../../ripple/directive.js';
16
- /**
17
- * @soyCompatible
18
- */
19
- export class FabShared extends LitElement {
20
- constructor() {
21
- super(...arguments);
22
- this.icon = '';
23
- this.label = '';
24
- this.lowered = false;
25
- this.reducedTouchTarget = false;
26
- this.showFocusRing = false;
27
- this.showRipple = false;
28
- this.renderRipple = () => {
29
- return html `<md-ripple class="md3-fab__ripple"></md-ripple>`;
30
- };
31
- }
32
- /**
33
- * @soyTemplate
34
- * @soyClasses fabClasses: .md3-fab
35
- */
36
- render() {
37
- const ariaLabel = this.label ? this.label : this.icon;
38
- const getRipple = () => {
39
- this.showRipple = true;
40
- return this.ripple;
41
- };
42
- return html `
43
- <button
44
- class="md3-fab md3-surface ${classMap(this.getRenderClasses())}"
45
- aria-label="${ariaLabel}"
46
- @focus="${this.handleFocus}"
47
- @blur="${this.handleBlur}"
48
- @pointerdown="${this.handlePointerDown}"
49
- ${ripple(getRipple)}>
50
- ${this.renderElevation()}
51
- ${this.renderFocusRing()}
52
- ${when(this.showRipple, this.renderRipple)}
53
- <span class="md3-fab__icon">
54
- <slot name="icon">${this.renderIcon(this.icon)}</slot>
55
- </span>
56
- ${this.renderLabel()}
57
- ${this.renderTouchTarget()}
58
- </button>`;
59
- }
60
- /** @soyTemplate */
61
- getRenderClasses() {
62
- return { 'md3-fab--lowered': this.lowered };
63
- }
64
- /** @soyTemplate */
65
- renderTouchTarget() {
66
- return this.reducedTouchTarget ? html `` :
67
- html `<div class="md3-fab__touch"></div>`;
68
- }
69
- /** @soyTemplate */
70
- renderLabel() {
71
- return '';
72
- }
73
- /** @soyTemplate */
74
- renderElevation() {
75
- return html `<md-elevation></md-elevation>`;
76
- }
77
- /** @soyTemplate */
78
- renderFocusRing() {
79
- return html `<md-focus-ring .visible="${this.showFocusRing}"></md-focus-ring>`;
80
- }
81
- handlePointerDown(e) {
82
- pointerPress();
83
- this.showFocusRing = shouldShowStrongFocus();
84
- }
85
- handleFocus() {
86
- this.showFocusRing = shouldShowStrongFocus();
87
- }
88
- handleBlur() {
89
- this.showFocusRing = false;
90
- }
91
- }
92
- FabShared.shadowRootOptions = { mode: 'open', delegatesFocus: true };
93
- __decorate([
94
- property(),
95
- __metadata("design:type", Object)
96
- ], FabShared.prototype, "icon", void 0);
97
- __decorate([
98
- property(),
99
- __metadata("design:type", Object)
100
- ], FabShared.prototype, "label", void 0);
101
- __decorate([
102
- property({ type: Boolean }),
103
- __metadata("design:type", Object)
104
- ], FabShared.prototype, "lowered", void 0);
105
- __decorate([
106
- property({ type: Boolean }),
107
- __metadata("design:type", Object)
108
- ], FabShared.prototype, "reducedTouchTarget", void 0);
109
- __decorate([
110
- queryAsync('md-ripple'),
111
- __metadata("design:type", Promise)
112
- ], FabShared.prototype, "ripple", void 0);
113
- __decorate([
114
- state(),
115
- __metadata("design:type", Object)
116
- ], FabShared.prototype, "showFocusRing", void 0);
117
- __decorate([
118
- state(),
119
- __metadata("design:type", Object)
120
- ], FabShared.prototype, "showRipple", void 0);
121
- //# sourceMappingURL=fab-shared.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"fab-shared.js","sourceRoot":"","sources":["fab-shared.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,8BAA8B,CAAC;AACtC,OAAO,2BAA2B,CAAC;AACnC,OAAO,wBAAwB,CAAC;AAEhC,OAAO,EAAC,IAAI,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAC;AACrD,OAAO,EAAC,QAAQ,EAAE,UAAU,EAAE,KAAK,EAAC,MAAM,mBAAmB,CAAC;AAC9D,OAAO,EAAY,QAAQ,EAAC,MAAM,6BAA6B,CAAC;AAChE,OAAO,EAAC,IAAI,EAAC,MAAM,wBAAwB,CAAC;AAE5C,OAAO,EAAC,YAAY,EAAE,qBAAqB,EAAC,MAAM,6BAA6B,CAAC;AAChF,OAAO,EAAC,MAAM,EAAC,MAAM,2BAA2B,CAAC;AAGjD;;GAEG;AACH,MAAM,OAAgB,SAAU,SAAQ,UAAU;IAAlD;;QAIc,SAAI,GAAG,EAAE,CAAC;QAEV,UAAK,GAAG,EAAE,CAAC;QAEI,YAAO,GAAG,KAAK,CAAC;QAEhB,uBAAkB,GAAG,KAAK,CAAC;QAGrC,kBAAa,GAAG,KAAK,CAAC;QACtB,eAAU,GAAG,KAAK,CAAC;QA2EnB,iBAAY,GAAG,GAAG,EAAE;YACnC,OAAO,IAAI,CAAA,iDAAiD,CAAC;QAC/D,CAAC,CAAC;IACJ,CAAC;IA5EC;;;OAGG;IACgB,MAAM;QACvB,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC;QACtD,MAAM,SAAS,GAAG,GAAG,EAAE;YACrB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;YACvB,OAAO,IAAI,CAAC,MAAM,CAAC;QACrB,CAAC,CAAC;QAEF,OAAO,IAAI,CAAA;;qCAEsB,QAAQ,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC;sBAChD,SAAS;kBACb,IAAI,CAAC,WAAW;iBACjB,IAAI,CAAC,UAAU;wBACR,IAAI,CAAC,iBAAiB;UACpC,MAAM,CAAC,SAAS,CAAC;UACjB,IAAI,CAAC,eAAe,EAAE;UACtB,IAAI,CAAC,eAAe,EAAE;UACtB,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,YAAY,CAAC;;8BAEpB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC;;UAE9C,IAAI,CAAC,WAAW,EAAE;UAClB,IAAI,CAAC,iBAAiB,EAAE;gBAClB,CAAC;IACf,CAAC;IAED,mBAAmB;IACT,gBAAgB;QACxB,OAAO,EAAC,kBAAkB,EAAE,IAAI,CAAC,OAAO,EAAC,CAAC;IAC5C,CAAC;IAKD,mBAAmB;IACT,iBAAiB;QACzB,OAAO,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,IAAI,CAAA,EAAE,CAAC,CAAC;YACR,IAAI,CAAA,oCAAoC,CAAC;IAC5E,CAAC;IAED,mBAAmB;IACT,WAAW;QACnB,OAAO,EAAE,CAAC;IACZ,CAAC;IAED,mBAAmB;IACT,eAAe;QACvB,OAAO,IAAI,CAAA,+BAA+B,CAAC;IAC7C,CAAC;IAED,mBAAmB;IACT,eAAe;QACvB,OAAO,IAAI,CAAA,4BACP,IAAI,CAAC,aAAa,oBAAoB,CAAC;IAC7C,CAAC;IAEO,iBAAiB,CAAC,CAAe;QACvC,YAAY,EAAE,CAAC;QACf,IAAI,CAAC,aAAa,GAAG,qBAAqB,EAAE,CAAC;IAC/C,CAAC;IAEO,WAAW;QACjB,IAAI,CAAC,aAAa,GAAG,qBAAqB,EAAE,CAAC;IAC/C,CAAC;IAEO,UAAU;QAChB,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;IAC7B,CAAC;;AAtFe,2BAAiB,GACZ,EAAC,IAAI,EAAE,MAAM,EAAE,cAAc,EAAE,IAAI,EAAC,CAAC;AAE1D;IAAC,QAAQ,EAAE;;uCAAW;AAEtB;IAAC,QAAQ,EAAE;;wCAAY;AAEvB;IAAC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;;0CAAiB;AAE3C;IAAC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;;qDAA4B;AAEtD;IAAC,UAAU,CAAC,WAAW,CAAC;;yCAAkD;AAC1E;IAAC,KAAK,EAAE;;gDAA+B;AACvC;IAAC,KAAK,EAAE;;6CAA4B","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../elevation/elevation.js';\nimport '../../focus/focus-ring.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 {when} from 'lit/directives/when.js';\n\nimport {pointerPress, shouldShowStrongFocus} from '../../focus/strong-focus.js';\nimport {ripple} from '../../ripple/directive.js';\nimport {MdRipple} from '../../ripple/ripple.js';\n\n/**\n * @soyCompatible\n */\nexport abstract class FabShared extends LitElement {\n static override shadowRootOptions:\n ShadowRootInit = {mode: 'open', delegatesFocus: true};\n\n @property() icon = '';\n\n @property() label = '';\n\n @property({type: Boolean}) lowered = false;\n\n @property({type: Boolean}) reducedTouchTarget = false;\n\n @queryAsync('md-ripple') private readonly ripple!: Promise<MdRipple|null>;\n @state() private showFocusRing = false;\n @state() private showRipple = false;\n\n /**\n * @soyTemplate\n * @soyClasses fabClasses: .md3-fab\n */\n protected override render(): TemplateResult {\n const ariaLabel = this.label ? this.label : this.icon;\n const getRipple = () => {\n this.showRipple = true;\n return this.ripple;\n };\n\n return html`\n <button\n class=\"md3-fab md3-surface ${classMap(this.getRenderClasses())}\"\n aria-label=\"${ariaLabel}\"\n @focus=\"${this.handleFocus}\"\n @blur=\"${this.handleBlur}\"\n @pointerdown=\"${this.handlePointerDown}\"\n ${ripple(getRipple)}>\n ${this.renderElevation()}\n ${this.renderFocusRing()}\n ${when(this.showRipple, this.renderRipple)}\n <span class=\"md3-fab__icon\">\n <slot name=\"icon\">${this.renderIcon(this.icon)}</slot>\n </span>\n ${this.renderLabel()}\n ${this.renderTouchTarget()}\n </button>`;\n }\n\n /** @soyTemplate */\n protected getRenderClasses(): ClassInfo {\n return {'md3-fab--lowered': this.lowered};\n }\n\n /** @soyTemplate */\n protected abstract renderIcon(icon: string): TemplateResult|string;\n\n /** @soyTemplate */\n protected renderTouchTarget(): TemplateResult {\n return this.reducedTouchTarget ? html`` :\n html`<div class=\"md3-fab__touch\"></div>`;\n }\n\n /** @soyTemplate */\n protected renderLabel(): TemplateResult|string {\n return '';\n }\n\n /** @soyTemplate */\n protected renderElevation(): TemplateResult {\n return html`<md-elevation></md-elevation>`;\n }\n\n /** @soyTemplate */\n protected renderFocusRing(): TemplateResult {\n return html`<md-focus-ring .visible=\"${\n this.showFocusRing}\"></md-focus-ring>`;\n }\n\n private handlePointerDown(e: PointerEvent) {\n pointerPress();\n this.showFocusRing = shouldShowStrongFocus();\n }\n\n private handleFocus() {\n this.showFocusRing = shouldShowStrongFocus();\n }\n\n private handleBlur() {\n this.showFocusRing = false;\n }\n\n private readonly renderRipple = () => {\n return html`<md-ripple class=\"md3-fab__ripple\"></md-ripple>`;\n };\n}\n"]}
@@ -1,56 +0,0 @@
1
- /**
2
- * @license
3
- * Copyright 2021 Google LLC
4
- * SPDX-License-Identifier: Apache-2.0
5
- */
6
- interface StrongFocus {
7
- visible: boolean;
8
- setVisible(visible: boolean): void;
9
- }
10
- /**
11
- * Components should call this when a user interacts with a component with a
12
- * keyboard event in the very special case that the component needs to call
13
- * focus inside of a keydown handler. Otherwise, this module will handle
14
- * keyboard events on window.
15
- *
16
- * By default, this will enable the strong focus to be shown.
17
- *
18
- * @param e The native keyboard event.
19
- */
20
- export declare function keydownHandler(e: KeyboardEvent): void;
21
- /**
22
- * Set up integration with alternate global focus tracking object
23
- *
24
- * @param focusGlobal A global focus object to coordinate between multiple
25
- * systems
26
- * @param enableKeydownHandler Set to true to let StrongFocusService listen for
27
- * keyboard navigation
28
- */
29
- export declare function setup(focusGlobal: StrongFocus, enableKeydownHandler?: boolean): void;
30
- /**
31
- * Returns `true` if the component should show strong focus.
32
- *
33
- * By default, strong focus is shown only on keyboard navigation, and not on
34
- * pointer interaction.
35
- */
36
- export declare function shouldShowStrongFocus(): boolean;
37
- /**
38
- * Control if strong focus should always be shown on component focus
39
- *
40
- * Defaults to `false`
41
- *
42
- * @param force Forces strong focus on the page. Disables strong focus if false.
43
- */
44
- export declare function setForceStrongFocus(force: boolean): void;
45
- /**
46
- * If `true`, strong focus is always shown
47
- */
48
- export declare function isStrongFocusForced(): boolean;
49
- /**
50
- * Components should call this when a user interacts with a component with a
51
- * pointing device.
52
- *
53
- * By default, this will prevent the strong focus from being shown.
54
- */
55
- export declare function pointerPress(): void;
56
- export {};
@@ -1,96 +0,0 @@
1
- /**
2
- * @license
3
- * Copyright 2021 Google LLC
4
- * SPDX-License-Identifier: Apache-2.0
5
- */
6
- class FocusGlobal {
7
- constructor() {
8
- this.visible = false;
9
- }
10
- setVisible(visible) {
11
- this.visible = visible;
12
- }
13
- }
14
- /**
15
- * This object can be overwritten by the `setup()` function to use a different
16
- * focus coordination object.
17
- */
18
- let focusObject = new FocusGlobal();
19
- /**
20
- * Set of keyboard event codes that correspond to keyboard navigation
21
- */
22
- const KEYBOARD_NAVIGATION_KEYS = new Set(['Tab', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown']);
23
- /**
24
- * Components should call this when a user interacts with a component with a
25
- * keyboard event in the very special case that the component needs to call
26
- * focus inside of a keydown handler. Otherwise, this module will handle
27
- * keyboard events on window.
28
- *
29
- * By default, this will enable the strong focus to be shown.
30
- *
31
- * @param e The native keyboard event.
32
- */
33
- export function keydownHandler(e) {
34
- if (KEYBOARD_NAVIGATION_KEYS.has(e.key)) {
35
- focusObject.setVisible(true);
36
- }
37
- }
38
- /**
39
- * Set up integration with alternate global focus tracking object
40
- *
41
- * @param focusGlobal A global focus object to coordinate between multiple
42
- * systems
43
- * @param enableKeydownHandler Set to true to let StrongFocusService listen for
44
- * keyboard navigation
45
- */
46
- export function setup(focusGlobal, enableKeydownHandler = false) {
47
- focusObject = focusGlobal;
48
- if (enableKeydownHandler) {
49
- window.addEventListener('keydown', keydownHandler);
50
- }
51
- else {
52
- window.removeEventListener('keydown', keydownHandler);
53
- }
54
- }
55
- /**
56
- * Setting for always showing strong focus
57
- *
58
- * Defaults to false, controlled by `setForceStrongFocus`
59
- */
60
- let alwaysStrong = false;
61
- /**
62
- * Returns `true` if the component should show strong focus.
63
- *
64
- * By default, strong focus is shown only on keyboard navigation, and not on
65
- * pointer interaction.
66
- */
67
- export function shouldShowStrongFocus() {
68
- return alwaysStrong || focusObject.visible;
69
- }
70
- /**
71
- * Control if strong focus should always be shown on component focus
72
- *
73
- * Defaults to `false`
74
- *
75
- * @param force Forces strong focus on the page. Disables strong focus if false.
76
- */
77
- export function setForceStrongFocus(force) {
78
- alwaysStrong = force;
79
- }
80
- /**
81
- * If `true`, strong focus is always shown
82
- */
83
- export function isStrongFocusForced() {
84
- return alwaysStrong;
85
- }
86
- /**
87
- * Components should call this when a user interacts with a component with a
88
- * pointing device.
89
- *
90
- * By default, this will prevent the strong focus from being shown.
91
- */
92
- export function pointerPress() {
93
- focusObject.setVisible(false);
94
- }
95
- setup(focusObject, true);
96
- //# sourceMappingURL=strong-focus.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"strong-focus.js","sourceRoot":"","sources":["strong-focus.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAOH,MAAM,WAAW;IAAjB;QACE,YAAO,GAAG,KAAK,CAAC;IAIlB,CAAC;IAHC,UAAU,CAAC,OAAgB;QACzB,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;IACzB,CAAC;CACF;AAED;;;GAGG;AACH,IAAI,WAAW,GAAgB,IAAI,WAAW,EAAE,CAAC;AAEjD;;GAEG;AACH,MAAM,wBAAwB,GAC1B,IAAI,GAAG,CAAC,CAAC,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,SAAS,EAAE,WAAW,CAAC,CAAC,CAAC;AAExE;;;;;;;;;GASG;AACH,MAAM,UAAU,cAAc,CAAC,CAAgB;IAC7C,IAAI,wBAAwB,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE;QACvC,WAAW,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;KAC9B;AACH,CAAC;AAED;;;;;;;GAOG;AACH,MAAM,UAAU,KAAK,CAAC,WAAwB,EAAE,oBAAoB,GAAG,KAAK;IAC1E,WAAW,GAAG,WAAW,CAAC;IAC1B,IAAI,oBAAoB,EAAE;QACxB,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC;KACpD;SAAM;QACL,MAAM,CAAC,mBAAmB,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC;KACvD;AACH,CAAC;AAED;;;;GAIG;AACH,IAAI,YAAY,GAAG,KAAK,CAAC;AAEzB;;;;;GAKG;AACH,MAAM,UAAU,qBAAqB;IACnC,OAAO,YAAY,IAAI,WAAW,CAAC,OAAO,CAAC;AAC7C,CAAC;AAED;;;;;;GAMG;AACH,MAAM,UAAU,mBAAmB,CAAC,KAAc;IAChD,YAAY,GAAG,KAAK,CAAC;AACvB,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,mBAAmB;IACjC,OAAO,YAAY,CAAC;AACtB,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,YAAY;IAC1B,WAAW,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;AAChC,CAAC;AAED,KAAK,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\ninterface StrongFocus {\n visible: boolean;\n setVisible(visible: boolean): void;\n}\n\nclass FocusGlobal implements StrongFocus {\n visible = false;\n setVisible(visible: boolean) {\n this.visible = visible;\n }\n}\n\n/**\n * This object can be overwritten by the `setup()` function to use a different\n * focus coordination object.\n */\nlet focusObject: StrongFocus = new FocusGlobal();\n\n/**\n * Set of keyboard event codes that correspond to keyboard navigation\n */\nconst KEYBOARD_NAVIGATION_KEYS =\n new Set(['Tab', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown']);\n\n/**\n * Components should call this when a user interacts with a component with a\n * keyboard event in the very special case that the component needs to call\n * focus inside of a keydown handler. Otherwise, this module will handle\n * keyboard events on window.\n *\n * By default, this will enable the strong focus to be shown.\n *\n * @param e The native keyboard event.\n */\nexport function keydownHandler(e: KeyboardEvent) {\n if (KEYBOARD_NAVIGATION_KEYS.has(e.key)) {\n focusObject.setVisible(true);\n }\n}\n\n/**\n * Set up integration with alternate global focus tracking object\n *\n * @param focusGlobal A global focus object to coordinate between multiple\n * systems\n * @param enableKeydownHandler Set to true to let StrongFocusService listen for\n * keyboard navigation\n */\nexport function setup(focusGlobal: StrongFocus, enableKeydownHandler = false) {\n focusObject = focusGlobal;\n if (enableKeydownHandler) {\n window.addEventListener('keydown', keydownHandler);\n } else {\n window.removeEventListener('keydown', keydownHandler);\n }\n}\n\n/**\n * Setting for always showing strong focus\n *\n * Defaults to false, controlled by `setForceStrongFocus`\n */\nlet alwaysStrong = false;\n\n/**\n * Returns `true` if the component should show strong focus.\n *\n * By default, strong focus is shown only on keyboard navigation, and not on\n * pointer interaction.\n */\nexport function shouldShowStrongFocus() {\n return alwaysStrong || focusObject.visible;\n}\n\n/**\n * Control if strong focus should always be shown on component focus\n *\n * Defaults to `false`\n *\n * @param force Forces strong focus on the page. Disables strong focus if false.\n */\nexport function setForceStrongFocus(force: boolean) {\n alwaysStrong = force;\n}\n\n/**\n * If `true`, strong focus is always shown\n */\nexport function isStrongFocusForced() {\n return alwaysStrong;\n}\n\n/**\n * Components should call this when a user interacts with a component with a\n * pointing device.\n *\n * By default, this will prevent the strong focus from being shown.\n */\nexport function pointerPress() {\n focusObject.setVisible(false);\n}\n\nsetup(focusObject, true);"]}