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

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 (334) hide show
  1. package/README.md +7 -7
  2. package/aria/aria.d.ts +43 -0
  3. package/aria/aria.js +56 -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 +8 -7
  12. package/badge/lib/badge.js +5 -6
  13. package/badge/lib/badge.js.map +1 -1
  14. package/button/lib/_elevation.scss +13 -3
  15. package/button/lib/button.d.ts +1 -12
  16. package/button/lib/button.js +29 -60
  17. package/button/lib/button.js.map +1 -1
  18. package/button/lib/shared-elevation-styles.css.js +1 -1
  19. package/button/lib/shared-elevation-styles.css.js.map +1 -1
  20. package/checkbox/lib/checkbox.d.ts +0 -1
  21. package/checkbox/lib/checkbox.js +33 -43
  22. package/checkbox/lib/checkbox.js.map +1 -1
  23. package/chips/_filter-chip.scss +6 -0
  24. package/chips/filter-chip.d.ts +20 -0
  25. package/chips/filter-chip.js +24 -0
  26. package/chips/filter-chip.js.map +1 -0
  27. package/chips/lib/_filter-chip.scss +141 -0
  28. package/chips/lib/_shared.scss +18 -14
  29. package/chips/lib/assist-styles.css.js +1 -1
  30. package/chips/lib/assist-styles.css.js.map +1 -1
  31. package/chips/lib/chip.d.ts +8 -3
  32. package/chips/lib/chip.js +29 -30
  33. package/chips/lib/chip.js.map +1 -1
  34. package/chips/lib/filter-chip.d.ts +21 -0
  35. package/chips/lib/filter-chip.js +47 -0
  36. package/chips/lib/filter-chip.js.map +1 -0
  37. package/chips/lib/filter-styles.css.js +9 -0
  38. package/chips/lib/filter-styles.css.js.map +1 -0
  39. package/{fab/lib/fab-extended-styles.scss → chips/lib/filter-styles.scss} +3 -3
  40. package/chips/lib/shared-styles.css.js +1 -1
  41. package/chips/lib/shared-styles.css.js.map +1 -1
  42. package/chips/lib/suggestion-styles.css.js +1 -1
  43. package/chips/lib/suggestion-styles.css.js.map +1 -1
  44. package/circularprogress/harness.d.ts +1 -0
  45. package/circularprogress/harness.js +4 -0
  46. package/circularprogress/harness.js.map +1 -1
  47. package/circularprogress/lib/circular-progress.d.ts +0 -1
  48. package/circularprogress/lib/circular-progress.js +16 -19
  49. package/circularprogress/lib/circular-progress.js.map +1 -1
  50. package/dialog/lib/_dialog.scss +8 -8
  51. package/dialog/lib/dialog-styles.css.js +1 -1
  52. package/dialog/lib/dialog-styles.css.js.map +1 -1
  53. package/dialog/lib/dialog.js +25 -49
  54. package/dialog/lib/dialog.js.map +1 -1
  55. package/divider/lib/divider.js +4 -7
  56. package/divider/lib/divider.js.map +1 -1
  57. package/elevation/lib/_elevation.scss +5 -7
  58. package/elevation/lib/elevation-styles.css.js +1 -1
  59. package/elevation/lib/elevation-styles.css.js.map +1 -1
  60. package/fab/_fab.scss +1 -0
  61. package/fab/branded-fab.d.ts +53 -0
  62. package/fab/branded-fab.js +56 -0
  63. package/fab/branded-fab.js.map +1 -0
  64. package/fab/fab.d.ts +25 -5
  65. package/fab/fab.js +27 -10
  66. package/fab/fab.js.map +1 -1
  67. package/fab/harness.d.ts +1 -2
  68. package/fab/harness.js +1 -1
  69. package/fab/harness.js.map +1 -1
  70. package/fab/lib/_fab-branded.scss +27 -0
  71. package/fab/lib/_fab.scss +144 -16
  72. package/fab/lib/_shared.scss +155 -130
  73. package/fab/lib/fab-branded-styles.css.js +9 -0
  74. package/fab/lib/fab-branded-styles.css.js.map +1 -0
  75. package/fab/lib/fab-branded-styles.scss +10 -0
  76. package/fab/lib/fab-styles.css.js +1 -1
  77. package/fab/lib/fab-styles.css.js.map +1 -1
  78. package/fab/lib/fab.d.ts +14 -10
  79. package/fab/lib/fab.js +19 -12
  80. package/fab/lib/fab.js.map +1 -1
  81. package/fab/lib/forced-colors-styles.css.d.ts +1 -0
  82. package/fab/lib/forced-colors-styles.css.js +9 -0
  83. package/fab/lib/forced-colors-styles.css.js.map +1 -0
  84. package/fab/lib/forced-colors-styles.scss +26 -0
  85. package/fab/lib/shared-styles.css.d.ts +1 -0
  86. package/fab/lib/shared-styles.css.js +9 -0
  87. package/fab/lib/shared-styles.css.js.map +1 -0
  88. package/fab/lib/{fab-shared-styles.scss → shared-styles.scss} +1 -1
  89. package/fab/lib/{fab-shared.d.ts → shared.d.ts} +24 -16
  90. package/fab/lib/shared.js +137 -0
  91. package/fab/lib/shared.js.map +1 -0
  92. package/field/lib/field.js +14 -27
  93. package/field/lib/field.js.map +1 -1
  94. package/focus/focus-ring.d.ts +0 -1
  95. package/focus/focus-ring.js +0 -1
  96. package/focus/focus-ring.js.map +1 -1
  97. package/focus/lib/focus-ring.js +2 -3
  98. package/focus/lib/focus-ring.js.map +1 -1
  99. package/focus/strong-focus.js +5 -0
  100. package/focus/strong-focus.js.map +1 -1
  101. package/icon/icon.d.ts +0 -1
  102. package/icon/icon.js +0 -1
  103. package/icon/icon.js.map +1 -1
  104. package/icon/lib/_icon.scss +2 -0
  105. package/icon/lib/icon-styles.css.js +1 -1
  106. package/icon/lib/icon-styles.css.js.map +1 -1
  107. package/icon/lib/icon.d.ts +5 -4
  108. package/icon/lib/icon.js +3 -2
  109. package/icon/lib/icon.js.map +1 -1
  110. package/iconbutton/lib/icon-button.d.ts +0 -4
  111. package/iconbutton/lib/icon-button.js +28 -48
  112. package/iconbutton/lib/icon-button.js.map +1 -1
  113. package/linearprogress/_linear-progress.scss +6 -0
  114. package/linearprogress/harness.d.ts +13 -0
  115. package/linearprogress/harness.js +18 -0
  116. package/linearprogress/harness.js.map +1 -0
  117. package/linearprogress/lib/_linear-progress.scss +380 -0
  118. package/linearprogress/lib/linear-progress-styles.css.d.ts +1 -0
  119. package/linearprogress/lib/linear-progress-styles.css.js +9 -0
  120. package/linearprogress/lib/linear-progress-styles.css.js.map +1 -0
  121. package/linearprogress/lib/linear-progress-styles.scss +8 -0
  122. package/linearprogress/lib/linear-progress.d.ts +35 -0
  123. package/linearprogress/lib/linear-progress.js +127 -0
  124. package/linearprogress/lib/linear-progress.js.map +1 -0
  125. package/linearprogress/linear-progress.d.ts +23 -0
  126. package/linearprogress/linear-progress.js +26 -0
  127. package/linearprogress/linear-progress.js.map +1 -0
  128. package/list/lib/_list.scss +6 -49
  129. package/list/lib/list-styles.css.js +1 -1
  130. package/list/lib/list-styles.css.js.map +1 -1
  131. package/list/lib/list.d.ts +1 -3
  132. package/list/lib/list.js +18 -34
  133. package/list/lib/list.js.map +1 -1
  134. package/list/lib/listitem/_list-item.scss +10 -69
  135. package/list/lib/listitem/forced-colors-styles.css.js +1 -1
  136. package/list/lib/listitem/forced-colors-styles.css.js.map +1 -1
  137. package/list/lib/listitem/list-item-styles.css.js +1 -1
  138. package/list/lib/listitem/list-item-styles.css.js.map +1 -1
  139. package/list/lib/listitem/list-item.d.ts +2 -4
  140. package/list/lib/listitem/list-item.js +24 -53
  141. package/list/lib/listitem/list-item.js.map +1 -1
  142. package/list/lib/listitemlink/list-item-link.js +4 -6
  143. package/list/lib/listitemlink/list-item-link.js.map +1 -1
  144. package/menu/lib/_menu.scss +6 -28
  145. package/menu/lib/menu-styles.css.js +1 -1
  146. package/menu/lib/menu-styles.css.js.map +1 -1
  147. package/menu/lib/menu.d.ts +1 -2
  148. package/menu/lib/menu.js +38 -63
  149. package/menu/lib/menu.js.map +1 -1
  150. package/menu/lib/menuitem/_menu-item.scss +13 -32
  151. package/menu/lib/menuitem/menu-item-styles.css.js +1 -1
  152. package/menu/lib/menuitem/menu-item-styles.css.js.map +1 -1
  153. package/menu/lib/menuitem/menu-item.d.ts +1 -1
  154. package/menu/lib/menuitem/menu-item.js +4 -6
  155. package/menu/lib/menuitem/menu-item.js.map +1 -1
  156. package/menu/lib/menuitemlink/menu-item-link.d.ts +0 -2
  157. package/menu/lib/menuitemlink/menu-item-link.js +3 -6
  158. package/menu/lib/menuitemlink/menu-item-link.js.map +1 -1
  159. package/menu/lib/shared.d.ts +6 -2
  160. package/menu/lib/shared.js.map +1 -1
  161. package/menu/lib/submenuitem/sub-menu-item.d.ts +0 -2
  162. package/menu/lib/submenuitem/sub-menu-item.js +7 -15
  163. package/menu/lib/submenuitem/sub-menu-item.js.map +1 -1
  164. package/navigationbar/lib/_navigation-bar.scss +7 -1
  165. package/navigationbar/lib/navigation-bar-styles.css.js +1 -1
  166. package/navigationbar/lib/navigation-bar-styles.css.js.map +1 -1
  167. package/navigationbar/lib/navigation-bar.d.ts +5 -5
  168. package/navigationbar/lib/navigation-bar.js +17 -18
  169. package/navigationbar/lib/navigation-bar.js.map +1 -1
  170. package/navigationbar/navigation-bar.d.ts +0 -1
  171. package/navigationbar/navigation-bar.js +0 -1
  172. package/navigationbar/navigation-bar.js.map +1 -1
  173. package/navigationdrawer/lib/navigation-drawer-modal.d.ts +5 -10
  174. package/navigationdrawer/lib/navigation-drawer-modal.js +19 -41
  175. package/navigationdrawer/lib/navigation-drawer-modal.js.map +1 -1
  176. package/navigationdrawer/lib/navigation-drawer.d.ts +5 -9
  177. package/navigationdrawer/lib/navigation-drawer.js +17 -38
  178. package/navigationdrawer/lib/navigation-drawer.js.map +1 -1
  179. package/navigationdrawer/navigation-drawer-modal.d.ts +0 -1
  180. package/navigationdrawer/navigation-drawer-modal.js +0 -1
  181. package/navigationdrawer/navigation-drawer-modal.js.map +1 -1
  182. package/navigationdrawer/navigation-drawer.d.ts +0 -1
  183. package/navigationdrawer/navigation-drawer.js +0 -1
  184. package/navigationdrawer/navigation-drawer.js.map +1 -1
  185. package/navigationtab/lib/navigation-tab.d.ts +19 -24
  186. package/navigationtab/lib/navigation-tab.js +48 -68
  187. package/navigationtab/lib/navigation-tab.js.map +1 -1
  188. package/navigationtab/navigation-tab.d.ts +0 -1
  189. package/navigationtab/navigation-tab.js +0 -1
  190. package/navigationtab/navigation-tab.js.map +1 -1
  191. package/package.json +1 -1
  192. package/radio/lib/radio.d.ts +0 -1
  193. package/radio/lib/radio.js +30 -37
  194. package/radio/lib/radio.js.map +1 -1
  195. package/ripple/lib/ripple.js +7 -13
  196. package/ripple/lib/ripple.js.map +1 -1
  197. package/segmentedbutton/lib/outlined-segmented-button.d.ts +16 -7
  198. package/segmentedbutton/lib/outlined-segmented-button.js +3 -3
  199. package/segmentedbutton/lib/outlined-segmented-button.js.map +1 -1
  200. package/segmentedbutton/lib/segmented-button.d.ts +27 -33
  201. package/segmentedbutton/lib/segmented-button.js +42 -75
  202. package/segmentedbutton/lib/segmented-button.js.map +1 -1
  203. package/segmentedbutton/outlined-segmented-button.d.ts +0 -1
  204. package/segmentedbutton/outlined-segmented-button.js +0 -1
  205. package/segmentedbutton/outlined-segmented-button.js.map +1 -1
  206. package/segmentedbuttonset/lib/outlined-segmented-button-set.d.ts +6 -4
  207. package/segmentedbuttonset/lib/outlined-segmented-button-set.js +3 -2
  208. package/segmentedbuttonset/lib/outlined-segmented-button-set.js.map +1 -1
  209. package/segmentedbuttonset/lib/segmented-button-set.d.ts +3 -9
  210. package/segmentedbuttonset/lib/segmented-button-set.js +14 -20
  211. package/segmentedbuttonset/lib/segmented-button-set.js.map +1 -1
  212. package/segmentedbuttonset/outlined-segmented-button-set.d.ts +0 -1
  213. package/segmentedbuttonset/outlined-segmented-button-set.js +0 -1
  214. package/segmentedbuttonset/outlined-segmented-button-set.js.map +1 -1
  215. package/select/_filled-select.scss +6 -0
  216. package/select/_outlined-select.scss +6 -0
  217. package/select/filled-select.d.ts +41 -0
  218. package/select/filled-select.js +46 -0
  219. package/select/filled-select.js.map +1 -0
  220. package/select/harness.d.ts +24 -0
  221. package/select/harness.js +53 -0
  222. package/select/harness.js.map +1 -0
  223. package/select/lib/_filled-select.scss +163 -0
  224. package/select/lib/_outlined-select.scss +146 -0
  225. package/select/lib/_shared.scss +48 -0
  226. package/select/lib/filled-forced-colors-styles.css.d.ts +1 -0
  227. package/select/lib/filled-forced-colors-styles.css.js +9 -0
  228. package/select/lib/filled-forced-colors-styles.css.js.map +1 -0
  229. package/select/lib/filled-forced-colors-styles.scss +29 -0
  230. package/select/lib/filled-select-styles.css.d.ts +1 -0
  231. package/select/lib/filled-select-styles.css.js +9 -0
  232. package/select/lib/filled-select-styles.css.js.map +1 -0
  233. package/select/lib/filled-select-styles.scss +10 -0
  234. package/select/lib/filled-select.d.ts +10 -0
  235. package/select/lib/filled-select.js +16 -0
  236. package/select/lib/filled-select.js.map +1 -0
  237. package/select/lib/outlined-forced-colors-styles.css.d.ts +1 -0
  238. package/select/lib/outlined-forced-colors-styles.css.js +9 -0
  239. package/select/lib/outlined-forced-colors-styles.css.js.map +1 -0
  240. package/select/lib/outlined-forced-colors-styles.scss +29 -0
  241. package/select/lib/outlined-select-styles.css.d.ts +1 -0
  242. package/select/lib/outlined-select-styles.css.js +9 -0
  243. package/select/lib/outlined-select-styles.css.js.map +1 -0
  244. package/select/lib/outlined-select-styles.scss +10 -0
  245. package/select/lib/outlined-select.d.ts +10 -0
  246. package/select/lib/outlined-select.js +16 -0
  247. package/select/lib/outlined-select.js.map +1 -0
  248. package/select/lib/select.d.ts +218 -0
  249. package/select/lib/select.js +587 -0
  250. package/select/lib/select.js.map +1 -0
  251. package/select/lib/selectoption/harness.d.ts +11 -0
  252. package/select/lib/selectoption/harness.js +12 -0
  253. package/select/lib/selectoption/harness.js.map +1 -0
  254. package/select/lib/selectoption/select-option.d.ts +30 -0
  255. package/select/lib/selectoption/select-option.js +71 -0
  256. package/select/lib/selectoption/select-option.js.map +1 -0
  257. package/select/lib/shared-styles.css.d.ts +1 -0
  258. package/select/lib/shared-styles.css.js +9 -0
  259. package/select/lib/shared-styles.css.js.map +1 -0
  260. package/select/lib/shared-styles.scss +10 -0
  261. package/select/lib/shared.d.ts +52 -0
  262. package/select/lib/shared.js +41 -0
  263. package/select/lib/shared.js.map +1 -0
  264. package/select/outlined-select.d.ts +41 -0
  265. package/select/outlined-select.js +46 -0
  266. package/select/outlined-select.js.map +1 -0
  267. package/select/select-option.d.ts +44 -0
  268. package/select/select-option.js +51 -0
  269. package/select/select-option.js.map +1 -0
  270. package/slider/harness.d.ts +1 -0
  271. package/slider/harness.js +5 -0
  272. package/slider/harness.js.map +1 -1
  273. package/slider/lib/_slider.scss +146 -164
  274. package/slider/lib/forced-colors-styles.css.js +1 -1
  275. package/slider/lib/forced-colors-styles.css.js.map +1 -1
  276. package/slider/lib/forced-colors-styles.scss +2 -2
  277. package/slider/lib/slider-styles.css.js +1 -1
  278. package/slider/lib/slider-styles.css.js.map +1 -1
  279. package/slider/lib/slider.d.ts +2 -7
  280. package/slider/lib/slider.js +64 -118
  281. package/slider/lib/slider.js.map +1 -1
  282. package/switch/lib/switch.d.ts +0 -2
  283. package/switch/lib/switch.js +32 -54
  284. package/switch/lib/switch.js.map +1 -1
  285. package/textfield/lib/text-field.d.ts +0 -10
  286. package/textfield/lib/text-field.js +45 -115
  287. package/textfield/lib/text-field.js.map +1 -1
  288. package/tokens/_index.scss +3 -0
  289. package/tokens/_md-comp-assist-chip.scss +25 -20
  290. package/tokens/_md-comp-elevation.scss +0 -4
  291. package/tokens/_md-comp-fab-branded.scss +109 -1
  292. package/tokens/_md-comp-fab.scss +290 -0
  293. package/tokens/_md-comp-filled-select.scss +150 -1
  294. package/tokens/_md-comp-filter-chip.scss +103 -93
  295. package/tokens/_md-comp-input-chip.scss +77 -85
  296. package/tokens/_md-comp-linear-progress-indicator.scss +14 -1
  297. package/tokens/_md-comp-list-item.scss +201 -0
  298. package/tokens/_md-comp-list.scss +107 -26
  299. package/tokens/_md-comp-menu-item.scss +76 -0
  300. package/tokens/_md-comp-menu.scss +52 -2
  301. package/tokens/_md-comp-outlined-select.scss +150 -1
  302. package/tokens/_md-comp-slider.scss +13 -1
  303. package/tokens/_md-comp-suggestion-chip.scss +29 -21
  304. package/tokens/_values.scss +5 -2
  305. package/types/aria.d.ts +61 -1
  306. package/actionelement/action-element.d.ts +0 -79
  307. package/actionelement/action-element.js +0 -97
  308. package/actionelement/action-element.js.map +0 -1
  309. package/button/lib/state.d.ts +0 -10
  310. package/button/lib/state.js +0 -7
  311. package/button/lib/state.js.map +0 -1
  312. package/controller/action-controller.d.ts +0 -147
  313. package/controller/action-controller.js +0 -286
  314. package/controller/action-controller.js.map +0 -1
  315. package/decorators/aria-property.d.ts +0 -32
  316. package/decorators/aria-property.js +0 -99
  317. package/decorators/aria-property.js.map +0 -1
  318. package/fab/_fab-extended.scss +0 -6
  319. package/fab/fab-extended.d.ts +0 -23
  320. package/fab/fab-extended.js +0 -29
  321. package/fab/fab-extended.js.map +0 -1
  322. package/fab/lib/_fab-extended.scss +0 -73
  323. package/fab/lib/fab-extended-styles.css.js +0 -9
  324. package/fab/lib/fab-extended-styles.css.js.map +0 -1
  325. package/fab/lib/fab-extended.d.ts +0 -19
  326. package/fab/lib/fab-extended.js +0 -28
  327. package/fab/lib/fab-extended.js.map +0 -1
  328. package/fab/lib/fab-shared-styles.css.js +0 -9
  329. package/fab/lib/fab-shared-styles.css.js.map +0 -1
  330. package/fab/lib/fab-shared.js +0 -121
  331. package/fab/lib/fab-shared.js.map +0 -1
  332. package/slider/lib/_tokens.scss +0 -65
  333. /package/{fab/lib/fab-extended-styles.css.d.ts → chips/lib/filter-styles.css.d.ts} +0 -0
  334. /package/fab/lib/{fab-shared-styles.css.d.ts → fab-branded-styles.css.d.ts} +0 -0
@@ -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,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":"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","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,65 +0,0 @@
1
- //
2
- // Copyright 2023 Google LLC
3
- // SPDX-License-Identifier: Apache-2.0
4
- //
5
-
6
- // go/keep-sorted start
7
- @use 'sass:map';
8
- @use 'sass:string';
9
- // go/keep-sorted end
10
- // go/keep-sorted start
11
- @use '../../sass/color';
12
- @use '../../sass/shape';
13
- @use '../../sass/theme';
14
- @use '../../sass/var';
15
- @use '../../tokens';
16
- // go/keep-sorted end
17
-
18
- $baseTokens: tokens.md-comp-slider-values();
19
-
20
- $_tokens: (
21
- 'container-min-inline-size': 200px,
22
- 'label-container-shape': map.get(tokens.md-sys-shape-values(), 'corner-full'),
23
- 'handle-motion-duration':
24
- map.get(tokens.md-sys-motion-values(), 'duration-short1'),
25
- 'label-motion-duration':
26
- map.get(tokens.md-sys-motion-values(), 'duration-short2'),
27
- 'label-motion-easing':
28
- map.get(tokens.md-sys-motion-values(), 'easing-emphasized'),
29
- );
30
-
31
- @function remove-unsupported-tokens($tokens) {
32
- $unsupported-tokens: (
33
- 'disabled-handle-opacity',
34
- 'label-container-elevation',
35
- 'label-label-text-font',
36
- 'label-label-text-line-height',
37
- 'label-label-text-size',
38
- 'label-label-text-tracking',
39
- 'label-label-text-weight',
40
- 'track-elevation',
41
- // for efficiency, tick marks are rendered as radial-gradients and
42
- // have more limited customization
43
- 'with-tick-marks-active-container-opacity',
44
- 'with-tick-marks-container-shape',
45
- 'with-tick-marks-disabled-container-opacity',
46
- 'with-tick-marks-inactive-container-opacity',
47
- // focus tokens no longer used.
48
- 'focus-state-layer-color',
49
- 'focus-state-layer-opacity'
50
- );
51
- @return map.remove($tokens, $unsupported-tokens...);
52
- }
53
-
54
- /**
55
- *
56
- * Extended token set for slider.
57
- */
58
- @function md-comp-slider-values() {
59
- $tokens: remove-unsupported-tokens($baseTokens);
60
- @return map.merge($tokens, $_tokens);
61
- }
62
-
63
- @function md-sys-shape-values() {
64
- @return tokens.md-sys-shape-values();
65
- }