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

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 (472) hide show
  1. package/README.md +1 -1
  2. package/badge/lib/badge-styles.css.js +1 -1
  3. package/badge/lib/badge-styles.css.js.map +1 -1
  4. package/button/lib/_elevation.scss +7 -13
  5. package/button/lib/_outlined-button.scss +1 -1
  6. package/button/lib/_shared.scss +5 -0
  7. package/button/lib/_text-button.scss +1 -1
  8. package/button/lib/_tonal-button.scss +1 -1
  9. package/button/lib/button.d.ts +14 -1
  10. package/button/lib/button.js +36 -14
  11. package/button/lib/button.js.map +1 -1
  12. package/button/lib/elevated-button.d.ts +3 -0
  13. package/button/lib/elevated-button.js +4 -2
  14. package/button/lib/elevated-button.js.map +1 -1
  15. package/button/lib/elevated-styles.css.js +1 -1
  16. package/button/lib/elevated-styles.css.js.map +1 -1
  17. package/button/lib/filled-button.d.ts +3 -1
  18. package/button/lib/filled-button.js +4 -3
  19. package/button/lib/filled-button.js.map +1 -1
  20. package/button/lib/filled-styles.css.js +1 -1
  21. package/button/lib/filled-styles.css.js.map +1 -1
  22. package/button/lib/outlined-button.d.ts +3 -0
  23. package/button/lib/outlined-button.js +3 -1
  24. package/button/lib/outlined-button.js.map +1 -1
  25. package/button/lib/outlined-styles.css.js +1 -1
  26. package/button/lib/outlined-styles.css.js.map +1 -1
  27. package/button/lib/shared-elevation-styles.css.js +1 -1
  28. package/button/lib/shared-elevation-styles.css.js.map +1 -1
  29. package/button/lib/shared-styles.css.js +1 -1
  30. package/button/lib/shared-styles.css.js.map +1 -1
  31. package/button/lib/text-button.d.ts +3 -0
  32. package/button/lib/text-button.js +3 -1
  33. package/button/lib/text-button.js.map +1 -1
  34. package/button/lib/text-styles.css.js +1 -1
  35. package/button/lib/text-styles.css.js.map +1 -1
  36. package/button/lib/tonal-button.d.ts +3 -1
  37. package/button/lib/tonal-button.js +4 -3
  38. package/button/lib/tonal-button.js.map +1 -1
  39. package/button/lib/tonal-styles.css.js +1 -1
  40. package/button/lib/tonal-styles.css.js.map +1 -1
  41. package/checkbox/lib/checkbox-styles.css.js +1 -1
  42. package/checkbox/lib/checkbox-styles.css.js.map +1 -1
  43. package/chips/lib/_shared.scss +63 -33
  44. package/chips/lib/assist-styles.css.js +1 -1
  45. package/chips/lib/assist-styles.css.js.map +1 -1
  46. package/chips/lib/chip.js +1 -1
  47. package/chips/lib/chip.js.map +1 -1
  48. package/chips/lib/shared-styles.css.js +1 -1
  49. package/chips/lib/shared-styles.css.js.map +1 -1
  50. package/chips/lib/suggestion-styles.css.js +1 -1
  51. package/chips/lib/suggestion-styles.css.js.map +1 -1
  52. package/circularprogress/_circular-progress.scss +6 -0
  53. package/circularprogress/circular-progress.d.ts +24 -0
  54. package/circularprogress/circular-progress.js +27 -0
  55. package/circularprogress/circular-progress.js.map +1 -0
  56. package/circularprogress/harness.d.ts +12 -0
  57. package/circularprogress/harness.js +12 -0
  58. package/circularprogress/harness.js.map +1 -0
  59. package/circularprogress/lib/_circular-progress.scss +282 -0
  60. package/circularprogress/lib/circular-progress-styles.css.js +9 -0
  61. package/circularprogress/lib/circular-progress-styles.css.js.map +1 -0
  62. package/circularprogress/lib/circular-progress-styles.scss +8 -0
  63. package/circularprogress/lib/circular-progress.d.ts +29 -0
  64. package/circularprogress/lib/circular-progress.js +98 -0
  65. package/circularprogress/lib/circular-progress.js.map +1 -0
  66. package/dialog/lib/_dialog.scss +1 -6
  67. package/dialog/lib/dialog-styles.css.js +1 -1
  68. package/dialog/lib/dialog-styles.css.js.map +1 -1
  69. package/dialog/lib/dialog.js +1 -1
  70. package/dialog/lib/dialog.js.map +1 -1
  71. package/elevation/lib/_elevation.scss +13 -48
  72. package/elevation/lib/elevation-styles.css.js +1 -1
  73. package/elevation/lib/elevation-styles.css.js.map +1 -1
  74. package/elevation/lib/elevation.d.ts +0 -8
  75. package/elevation/lib/elevation.js +1 -25
  76. package/elevation/lib/elevation.js.map +1 -1
  77. package/fab/lib/_shared.scss +18 -21
  78. package/fab/lib/fab-extended-styles.css.js +1 -1
  79. package/fab/lib/fab-extended-styles.css.js.map +1 -1
  80. package/fab/lib/fab-shared-styles.css.js +1 -1
  81. package/fab/lib/fab-shared-styles.css.js.map +1 -1
  82. package/fab/lib/fab-shared.js +1 -1
  83. package/fab/lib/fab-shared.js.map +1 -1
  84. package/fab/lib/fab-styles.css.js +1 -1
  85. package/fab/lib/fab-styles.css.js.map +1 -1
  86. package/field/lib/filled-styles.css.js +1 -1
  87. package/field/lib/filled-styles.css.js.map +1 -1
  88. package/field/lib/outlined-styles.css.js +1 -1
  89. package/field/lib/outlined-styles.css.js.map +1 -1
  90. package/focus/lib/_focus-ring.scss +30 -20
  91. package/focus/lib/focus-ring-styles.css.js +1 -1
  92. package/focus/lib/focus-ring-styles.css.js.map +1 -1
  93. package/focus/strong-focus.d.ts +11 -0
  94. package/focus/strong-focus.js +11 -1
  95. package/focus/strong-focus.js.map +1 -1
  96. package/iconbutton/filled-icon-button.js +1 -0
  97. package/iconbutton/filled-icon-button.js.map +1 -1
  98. package/iconbutton/filled-tonal-icon-button.js +1 -0
  99. package/iconbutton/filled-tonal-icon-button.js.map +1 -1
  100. package/iconbutton/harness.d.ts +1 -2
  101. package/iconbutton/harness.js.map +1 -1
  102. package/iconbutton/lib/filled-styles.css.js +1 -1
  103. package/iconbutton/lib/filled-styles.css.js.map +1 -1
  104. package/iconbutton/lib/filled-tonal-styles.css.js +1 -1
  105. package/iconbutton/lib/filled-tonal-styles.css.js.map +1 -1
  106. package/iconbutton/lib/icon-button.d.ts +33 -2
  107. package/iconbutton/lib/icon-button.js +104 -16
  108. package/iconbutton/lib/icon-button.js.map +1 -1
  109. package/iconbutton/lib/outlined-styles.css.js +1 -1
  110. package/iconbutton/lib/outlined-styles.css.js.map +1 -1
  111. package/iconbutton/lib/standard-styles.css.js +1 -1
  112. package/iconbutton/lib/standard-styles.css.js.map +1 -1
  113. package/list/harness.d.ts +1 -0
  114. package/list/harness.js +1 -0
  115. package/list/harness.js.map +1 -1
  116. package/list/lib/_list.scss +0 -1
  117. package/list/lib/list-styles.css.js +1 -1
  118. package/list/lib/list-styles.css.js.map +1 -1
  119. package/list/lib/list.js +2 -0
  120. package/list/lib/list.js.map +1 -1
  121. package/list/lib/listitem/_list-item.scss +9 -13
  122. package/list/lib/listitem/forced-colors-styles.css.js +9 -0
  123. package/list/lib/listitem/forced-colors-styles.css.js.map +1 -0
  124. package/list/lib/listitem/forced-colors-styles.scss +23 -0
  125. package/list/lib/listitem/list-item-styles.css.js +1 -1
  126. package/list/lib/listitem/list-item-styles.css.js.map +1 -1
  127. package/list/lib/listitem/list-item.d.ts +3 -3
  128. package/list/lib/listitem/list-item.js +3 -3
  129. package/list/lib/listitem/list-item.js.map +1 -1
  130. package/list/list-item-link.js +2 -1
  131. package/list/list-item-link.js.map +1 -1
  132. package/list/list-item.js +2 -1
  133. package/list/list-item.js.map +1 -1
  134. package/menu/harness.d.ts +1 -0
  135. package/menu/harness.js +1 -0
  136. package/menu/harness.js.map +1 -1
  137. package/menu/lib/_menu.scss +5 -10
  138. package/menu/lib/forced-colors-styles.css.d.ts +1 -0
  139. package/menu/lib/forced-colors-styles.css.js +9 -0
  140. package/menu/lib/forced-colors-styles.css.js.map +1 -0
  141. package/menu/lib/forced-colors-styles.scss +12 -0
  142. package/menu/lib/menu-styles.css.js +1 -1
  143. package/menu/lib/menu-styles.css.js.map +1 -1
  144. package/menu/lib/menu.d.ts +12 -1
  145. package/menu/lib/menu.js +42 -4
  146. package/menu/lib/menu.js.map +1 -1
  147. package/menu/lib/menuitem/_menu-item.scss +5 -11
  148. package/menu/lib/menuitem/forced-colors-styles.css.d.ts +1 -0
  149. package/menu/lib/menuitem/forced-colors-styles.css.js +9 -0
  150. package/menu/lib/menuitem/forced-colors-styles.css.js.map +1 -0
  151. package/menu/lib/menuitem/forced-colors-styles.scss +22 -0
  152. package/menu/lib/menuitem/menu-item-styles.css.js +1 -1
  153. package/menu/lib/menuitem/menu-item-styles.css.js.map +1 -1
  154. package/menu/lib/shared.d.ts +10 -0
  155. package/menu/lib/shared.js +23 -0
  156. package/menu/lib/shared.js.map +1 -1
  157. package/menu/lib/submenuitem/sub-menu-item.d.ts +4 -0
  158. package/menu/lib/submenuitem/sub-menu-item.js +12 -0
  159. package/menu/lib/submenuitem/sub-menu-item.js.map +1 -1
  160. package/menu/lib/typeaheadController.d.ts +10 -2
  161. package/menu/lib/typeaheadController.js +20 -14
  162. package/menu/lib/typeaheadController.js.map +1 -1
  163. package/menu/menu-item-link.js +3 -1
  164. package/menu/menu-item-link.js.map +1 -1
  165. package/menu/menu-item.js +4 -2
  166. package/menu/menu-item.js.map +1 -1
  167. package/menu/menu.js +2 -1
  168. package/menu/menu.js.map +1 -1
  169. package/menu/sub-menu-item.js +3 -1
  170. package/menu/sub-menu-item.js.map +1 -1
  171. package/navigationbar/lib/_navigation-bar.scss +3 -6
  172. package/navigationbar/lib/navigation-bar-styles.css.js +1 -1
  173. package/navigationbar/lib/navigation-bar-styles.css.js.map +1 -1
  174. package/navigationbar/lib/navigation-bar.js +2 -2
  175. package/navigationbar/lib/navigation-bar.js.map +1 -1
  176. package/navigationdrawer/lib/_navigation-drawer-modal.scss +10 -11
  177. package/navigationdrawer/lib/_navigation-drawer.scss +9 -14
  178. package/navigationdrawer/lib/navigation-drawer-modal-styles.css.js +1 -1
  179. package/navigationdrawer/lib/navigation-drawer-modal-styles.css.js.map +1 -1
  180. package/navigationdrawer/lib/navigation-drawer-styles.css.js +1 -1
  181. package/navigationdrawer/lib/navigation-drawer-styles.css.js.map +1 -1
  182. package/navigationdrawer/lib/navigation-drawer.js +1 -1
  183. package/navigationdrawer/lib/navigation-drawer.js.map +1 -1
  184. package/navigationtab/lib/navigation-tab-styles.css.js +1 -1
  185. package/navigationtab/lib/navigation-tab-styles.css.js.map +1 -1
  186. package/package.json +2 -1
  187. package/radio/lib/radio-styles.css.js +1 -1
  188. package/radio/lib/radio-styles.css.js.map +1 -1
  189. package/ripple/lib/_md-comp-ripple.scss +3 -3
  190. package/ripple/lib/ripple-styles.css.js +1 -1
  191. package/ripple/lib/ripple-styles.css.js.map +1 -1
  192. package/segmentedbutton/lib/outlined-styles.css.js +1 -1
  193. package/segmentedbutton/lib/outlined-styles.css.js.map +1 -1
  194. package/segmentedbuttonset/lib/outlined-styles.css.js +1 -1
  195. package/segmentedbuttonset/lib/outlined-styles.css.js.map +1 -1
  196. package/slider/lib/_slider.scss +1 -7
  197. package/slider/lib/_tokens.scss +5 -0
  198. package/slider/lib/slider-styles.css.js +1 -1
  199. package/slider/lib/slider-styles.css.js.map +1 -1
  200. package/slider/lib/slider.js +1 -1
  201. package/slider/lib/slider.js.map +1 -1
  202. package/switch/lib/switch-styles.css.js +1 -1
  203. package/switch/lib/switch-styles.css.js.map +1 -1
  204. package/textfield/lib/filled-styles.css.js +1 -1
  205. package/textfield/lib/filled-styles.css.js.map +1 -1
  206. package/textfield/lib/outlined-styles.css.js +1 -1
  207. package/textfield/lib/outlined-styles.css.js.map +1 -1
  208. package/tokens/_index.scss +3 -0
  209. package/tokens/_md-comp-assist-chip.scss +69 -14
  210. package/tokens/_md-comp-badge.scss +8 -1
  211. package/tokens/_md-comp-banner.scss +1 -1
  212. package/tokens/_md-comp-bottom-app-bar.scss +1 -1
  213. package/tokens/_md-comp-carousel-item.scss +1 -1
  214. package/tokens/_md-comp-checkbox.scss +1 -1
  215. package/tokens/_md-comp-circular-progress-indicator.scss +17 -2
  216. package/tokens/_md-comp-data-table.scss +1 -1
  217. package/tokens/_md-comp-date-input-modal.scss +1 -1
  218. package/tokens/_md-comp-date-picker-docked.scss +1 -1
  219. package/tokens/_md-comp-date-picker-modal.scss +1 -1
  220. package/tokens/_md-comp-dialog.scss +10 -1
  221. package/tokens/_md-comp-divider.scss +1 -1
  222. package/tokens/_md-comp-elevated-button.scss +80 -20
  223. package/tokens/_md-comp-elevated-card.scss +1 -1
  224. package/tokens/_md-comp-elevation.scss +28 -0
  225. package/tokens/_md-comp-extended-fab-branded.scss +8 -1
  226. package/tokens/_md-comp-extended-fab-primary.scss +8 -1
  227. package/tokens/_md-comp-extended-fab-secondary.scss +8 -1
  228. package/tokens/_md-comp-extended-fab-surface.scss +8 -1
  229. package/tokens/_md-comp-extended-fab-tertiary.scss +8 -1
  230. package/tokens/_md-comp-fab-branded-large.scss +1 -1
  231. package/tokens/_md-comp-fab-branded.scss +1 -1
  232. package/tokens/_md-comp-fab-primary-large.scss +1 -1
  233. package/tokens/_md-comp-fab-primary-small.scss +1 -1
  234. package/tokens/_md-comp-fab-primary.scss +1 -1
  235. package/tokens/_md-comp-fab-secondary-large.scss +1 -1
  236. package/tokens/_md-comp-fab-secondary-small.scss +1 -1
  237. package/tokens/_md-comp-fab-secondary.scss +1 -1
  238. package/tokens/_md-comp-fab-surface-large.scss +1 -1
  239. package/tokens/_md-comp-fab-surface-small.scss +1 -1
  240. package/tokens/_md-comp-fab-surface.scss +1 -1
  241. package/tokens/_md-comp-fab-tertiary-large.scss +1 -1
  242. package/tokens/_md-comp-fab-tertiary-small.scss +1 -1
  243. package/tokens/_md-comp-fab-tertiary.scss +1 -1
  244. package/tokens/_md-comp-filled-autocomplete.scss +1 -1
  245. package/tokens/_md-comp-filled-button.scss +80 -20
  246. package/tokens/_md-comp-filled-card.scss +1 -1
  247. package/tokens/_md-comp-filled-icon-button.scss +1 -1
  248. package/tokens/_md-comp-filled-menu-button.scss +1 -1
  249. package/tokens/_md-comp-filled-select.scss +1 -1
  250. package/tokens/_md-comp-filled-text-field.scss +10 -1
  251. package/tokens/_md-comp-filled-tonal-button.scss +80 -20
  252. package/tokens/_md-comp-filled-tonal-icon-button.scss +1 -1
  253. package/tokens/_md-comp-filter-chip.scss +201 -11
  254. package/tokens/_md-comp-focus-ring.scss +46 -0
  255. package/tokens/_md-comp-full-screen-dialog.scss +1 -1
  256. package/tokens/_md-comp-icon-button.scss +1 -1
  257. package/tokens/_md-comp-input-chip.scss +194 -11
  258. package/tokens/_md-comp-linear-progress-indicator.scss +1 -1
  259. package/tokens/_md-comp-list.scss +18 -1
  260. package/tokens/_md-comp-menu.scss +1 -1
  261. package/tokens/_md-comp-navigation-bar.scss +1 -1
  262. package/tokens/_md-comp-navigation-drawer.scss +1 -1
  263. package/tokens/_md-comp-navigation-rail.scss +1 -1
  264. package/tokens/_md-comp-outlined-autocomplete.scss +1 -1
  265. package/tokens/_md-comp-outlined-button.scss +77 -19
  266. package/tokens/_md-comp-outlined-card.scss +1 -1
  267. package/tokens/_md-comp-outlined-icon-button.scss +1 -1
  268. package/tokens/_md-comp-outlined-menu-button.scss +1 -1
  269. package/tokens/_md-comp-outlined-segmented-button.scss +10 -1
  270. package/tokens/_md-comp-outlined-select.scss +1 -1
  271. package/tokens/_md-comp-outlined-text-field.scss +10 -1
  272. package/tokens/_md-comp-plain-tooltip.scss +1 -1
  273. package/tokens/_md-comp-primary-navigation-tab.scss +10 -1
  274. package/tokens/_md-comp-radio-button.scss +1 -1
  275. package/tokens/_md-comp-rich-tooltip.scss +1 -1
  276. package/tokens/_md-comp-scrim.scss +1 -1
  277. package/tokens/_md-comp-search-bar.scss +1 -1
  278. package/tokens/_md-comp-search-view.scss +1 -1
  279. package/tokens/_md-comp-secondary-navigation-tab.scss +9 -1
  280. package/tokens/_md-comp-sheet-bottom.scss +1 -1
  281. package/tokens/_md-comp-sheet-floating.scss +1 -1
  282. package/tokens/_md-comp-sheet-side.scss +1 -1
  283. package/tokens/_md-comp-slider.scss +10 -1
  284. package/tokens/_md-comp-snackbar.scss +1 -1
  285. package/tokens/_md-comp-standard-menu-button.scss +1 -1
  286. package/tokens/_md-comp-suggestion-chip.scss +65 -14
  287. package/tokens/_md-comp-switch.scss +1 -1
  288. package/tokens/_md-comp-test-table.scss +31 -0
  289. package/tokens/_md-comp-text-button.scss +70 -19
  290. package/tokens/_md-comp-time-input.scss +1 -1
  291. package/tokens/_md-comp-time-picker.scss +1 -1
  292. package/tokens/_md-comp-top-app-bar-large.scss +1 -1
  293. package/tokens/_md-comp-top-app-bar-medium.scss +1 -1
  294. package/tokens/_md-comp-top-app-bar-small-centered.scss +1 -1
  295. package/tokens/_md-comp-top-app-bar-small.scss +1 -1
  296. package/tokens/_md-ref-palette.scss +1 -1
  297. package/tokens/_md-ref-typeface.scss +24 -2
  298. package/tokens/_md-sys-color.scss +1 -1
  299. package/tokens/_md-sys-elevation.scss +1 -1
  300. package/tokens/_md-sys-motion.scss +1 -1
  301. package/tokens/_md-sys-shape.scss +1 -1
  302. package/tokens/_md-sys-state.scss +1 -1
  303. package/tokens/_md-sys-typescale.scss +36 -2
  304. package/tokens/_values.scss +111 -0
  305. package/tokens/{v0_161 → v0_172}/_md-comp-assist-chip.scss +3 -4
  306. package/tokens/{v0_161 → v0_172}/_md-comp-badge.scss +1 -1
  307. package/tokens/{v0_161 → v0_172}/_md-comp-banner.scss +2 -4
  308. package/tokens/{v0_161 → v0_172}/_md-comp-bottom-app-bar.scss +3 -5
  309. package/tokens/{v0_161 → v0_172}/_md-comp-carousel-item.scss +1 -3
  310. package/tokens/{v0_161 → v0_172}/_md-comp-checkbox.scss +1 -1
  311. package/tokens/{v0_161 → v0_172}/_md-comp-circular-progress-indicator.scss +1 -1
  312. package/tokens/{v0_161 → v0_172}/_md-comp-data-table.scss +2 -2
  313. package/tokens/{v0_161 → v0_172}/_md-comp-date-input-modal.scss +2 -4
  314. package/tokens/{v0_161 → v0_172}/_md-comp-date-picker-docked.scss +2 -4
  315. package/tokens/{v0_161 → v0_172}/_md-comp-date-picker-modal.scss +2 -4
  316. package/tokens/{v0_161 → v0_172}/_md-comp-dialog.scss +2 -4
  317. package/tokens/{v0_161 → v0_172}/_md-comp-divider.scss +1 -1
  318. package/tokens/{v0_161 → v0_172}/_md-comp-elevated-button.scss +2 -4
  319. package/tokens/{v0_161 → v0_172}/_md-comp-elevated-card.scss +2 -4
  320. package/tokens/{v0_161 → v0_172}/_md-comp-extended-fab-branded.scss +4 -4
  321. package/tokens/{v0_161 → v0_172}/_md-comp-extended-fab-primary.scss +1 -1
  322. package/tokens/{v0_161 → v0_172}/_md-comp-extended-fab-secondary.scss +1 -1
  323. package/tokens/{v0_161 → v0_172}/_md-comp-extended-fab-surface.scss +4 -4
  324. package/tokens/{v0_161 → v0_172}/_md-comp-extended-fab-tertiary.scss +1 -1
  325. package/tokens/{v0_161 → v0_172}/_md-comp-fab-branded-large.scss +4 -4
  326. package/tokens/{v0_161 → v0_172}/_md-comp-fab-branded.scss +4 -4
  327. package/tokens/{v0_161 → v0_172}/_md-comp-fab-primary-large.scss +1 -1
  328. package/tokens/{v0_161 → v0_172}/_md-comp-fab-primary-small.scss +1 -1
  329. package/tokens/{v0_161 → v0_172}/_md-comp-fab-primary.scss +1 -1
  330. package/tokens/{v0_161 → v0_172}/_md-comp-fab-secondary-large.scss +1 -1
  331. package/tokens/{v0_161 → v0_172}/_md-comp-fab-secondary-small.scss +1 -1
  332. package/tokens/{v0_161 → v0_172}/_md-comp-fab-secondary.scss +1 -1
  333. package/tokens/{v0_161 → v0_172}/_md-comp-fab-surface-large.scss +4 -4
  334. package/tokens/{v0_161 → v0_172}/_md-comp-fab-surface-small.scss +4 -4
  335. package/tokens/{v0_161 → v0_172}/_md-comp-fab-surface.scss +4 -4
  336. package/tokens/{v0_161 → v0_172}/_md-comp-fab-tertiary-large.scss +1 -1
  337. package/tokens/{v0_161 → v0_172}/_md-comp-fab-tertiary-small.scss +1 -1
  338. package/tokens/{v0_161 → v0_172}/_md-comp-fab-tertiary.scss +1 -1
  339. package/tokens/{v0_161 → v0_172}/_md-comp-filled-autocomplete.scss +4 -6
  340. package/tokens/{v0_161 → v0_172}/_md-comp-filled-button.scss +1 -1
  341. package/tokens/{v0_161 → v0_172}/_md-comp-filled-card.scss +3 -2
  342. package/tokens/{v0_161 → v0_172}/_md-comp-filled-icon-button.scss +2 -2
  343. package/tokens/{v0_161 → v0_172}/_md-comp-filled-menu-button.scss +1 -1
  344. package/tokens/{v0_161 → v0_172}/_md-comp-filled-select.scss +4 -6
  345. package/tokens/{v0_161 → v0_172}/_md-comp-filled-text-field.scss +3 -2
  346. package/tokens/{v0_161 → v0_172}/_md-comp-filled-tonal-button.scss +1 -1
  347. package/tokens/{v0_161 → v0_172}/_md-comp-filled-tonal-icon-button.scss +2 -2
  348. package/tokens/{v0_161 → v0_172}/_md-comp-filter-chip.scss +2 -4
  349. package/tokens/{v0_161 → v0_172}/_md-comp-full-screen-dialog.scss +3 -3
  350. package/tokens/{v0_161 → v0_172}/_md-comp-icon-button.scss +1 -1
  351. package/tokens/{v0_161 → v0_172}/_md-comp-input-chip.scss +1 -1
  352. package/tokens/{v0_161 → v0_172}/_md-comp-linear-progress-indicator.scss +2 -2
  353. package/tokens/{v0_161 → v0_172}/_md-comp-list.scss +1 -1
  354. package/tokens/{v0_161 → v0_172}/_md-comp-menu.scss +3 -5
  355. package/tokens/{v0_161 → v0_172}/_md-comp-navigation-bar.scss +2 -4
  356. package/tokens/{v0_161 → v0_172}/_md-comp-navigation-drawer.scss +4 -4
  357. package/tokens/{v0_161 → v0_172}/_md-comp-navigation-rail.scss +1 -16
  358. package/tokens/{v0_161 → v0_172}/_md-comp-outlined-autocomplete.scss +4 -6
  359. package/tokens/{v0_161 → v0_172}/_md-comp-outlined-button.scss +1 -1
  360. package/tokens/{v0_161 → v0_172}/_md-comp-outlined-card.scss +1 -3
  361. package/tokens/{v0_161 → v0_172}/_md-comp-outlined-icon-button.scss +1 -1
  362. package/tokens/{v0_161 → v0_172}/_md-comp-outlined-menu-button.scss +1 -1
  363. package/tokens/{v0_161 → v0_172}/_md-comp-outlined-segmented-button.scss +1 -1
  364. package/tokens/{v0_161 → v0_172}/_md-comp-outlined-select.scss +4 -6
  365. package/tokens/{v0_161 → v0_172}/_md-comp-outlined-text-field.scss +1 -1
  366. package/tokens/{v0_161 → v0_172}/_md-comp-plain-tooltip.scss +1 -1
  367. package/tokens/{v0_161 → v0_172}/_md-comp-primary-navigation-tab.scss +1 -1
  368. package/tokens/{v0_161 → v0_172}/_md-comp-radio-button.scss +1 -1
  369. package/tokens/{v0_161 → v0_172}/_md-comp-rich-tooltip.scss +3 -5
  370. package/tokens/{v0_161 → v0_172}/_md-comp-scrim.scss +1 -1
  371. package/tokens/{v0_161 → v0_172}/_md-comp-search-bar.scss +2 -4
  372. package/tokens/{v0_161 → v0_172}/_md-comp-search-view.scss +2 -4
  373. package/tokens/{v0_161 → v0_172}/_md-comp-secondary-navigation-tab.scss +3 -3
  374. package/tokens/{v0_161 → v0_172}/_md-comp-sheet-bottom.scss +3 -4
  375. package/tokens/{v0_161 → v0_172}/_md-comp-sheet-floating.scss +3 -5
  376. package/tokens/{v0_161 → v0_172}/_md-comp-sheet-side.scss +4 -4
  377. package/tokens/{v0_161 → v0_172}/_md-comp-slider.scss +3 -2
  378. package/tokens/{v0_161 → v0_172}/_md-comp-snackbar.scss +1 -1
  379. package/tokens/{v0_161 → v0_172}/_md-comp-standard-menu-button.scss +1 -1
  380. package/tokens/{v0_161 → v0_172}/_md-comp-suggestion-chip.scss +3 -4
  381. package/tokens/{v0_161 → v0_172}/_md-comp-switch.scss +13 -11
  382. package/tokens/{v0_161 → v0_172}/_md-comp-text-button.scss +1 -1
  383. package/tokens/{v0_161 → v0_172}/_md-comp-time-input.scss +3 -4
  384. package/tokens/{v0_161 → v0_172}/_md-comp-time-picker.scss +5 -5
  385. package/tokens/{v0_161 → v0_172}/_md-comp-top-app-bar-large.scss +1 -3
  386. package/tokens/{v0_161 → v0_172}/_md-comp-top-app-bar-medium.scss +1 -3
  387. package/tokens/{v0_161 → v0_172}/_md-comp-top-app-bar-small-centered.scss +3 -1
  388. package/tokens/{v0_161 → v0_172}/_md-comp-top-app-bar-small.scss +3 -3
  389. package/tokens/{v0_161 → v0_172}/_md-ref-palette.scss +23 -23
  390. package/tokens/{v0_161 → v0_172}/_md-ref-typeface.scss +1 -1
  391. package/tokens/{v0_161 → v0_172}/_md-sys-color.scss +9 -9
  392. package/tokens/{v0_161 → v0_172}/_md-sys-elevation.scss +1 -1
  393. package/tokens/{v0_161 → v0_172}/_md-sys-motion.scss +1 -1
  394. package/tokens/{v0_161 → v0_172}/_md-sys-shape.scss +1 -1
  395. package/tokens/{v0_161 → v0_172}/_md-sys-state.scss +1 -1
  396. package/tokens/{v0_161 → v0_172}/_md-sys-typescale.scss +1 -1
  397. package/tokens/v0_172/index.test.css.d.ts +1 -0
  398. package/tokens/v0_172/lib.test.css.d.ts +1 -0
  399. package/button/elevated-link-button.d.ts +0 -36
  400. package/button/elevated-link-button.js +0 -41
  401. package/button/elevated-link-button.js.map +0 -1
  402. package/button/filled-link-button.d.ts +0 -34
  403. package/button/filled-link-button.js +0 -39
  404. package/button/filled-link-button.js.map +0 -1
  405. package/button/lib/elevated-link-button.d.ts +0 -13
  406. package/button/lib/elevated-link-button.js +0 -21
  407. package/button/lib/elevated-link-button.js.map +0 -1
  408. package/button/lib/filled-link-button.d.ts +0 -14
  409. package/button/lib/filled-link-button.js +0 -22
  410. package/button/lib/filled-link-button.js.map +0 -1
  411. package/button/lib/link-button.d.ts +0 -24
  412. package/button/lib/link-button.js +0 -59
  413. package/button/lib/link-button.js.map +0 -1
  414. package/button/lib/outlined-link-button.d.ts +0 -12
  415. package/button/lib/outlined-link-button.js +0 -20
  416. package/button/lib/outlined-link-button.js.map +0 -1
  417. package/button/lib/text-link-button.d.ts +0 -10
  418. package/button/lib/text-link-button.js +0 -16
  419. package/button/lib/text-link-button.js.map +0 -1
  420. package/button/lib/tonal-link-button.d.ts +0 -14
  421. package/button/lib/tonal-link-button.js +0 -22
  422. package/button/lib/tonal-link-button.js.map +0 -1
  423. package/button/outlined-link-button.d.ts +0 -36
  424. package/button/outlined-link-button.js +0 -40
  425. package/button/outlined-link-button.js.map +0 -1
  426. package/button/text-link-button.d.ts +0 -34
  427. package/button/text-link-button.js +0 -38
  428. package/button/text-link-button.js.map +0 -1
  429. package/button/tonal-link-button.d.ts +0 -35
  430. package/button/tonal-link-button.js +0 -40
  431. package/button/tonal-link-button.js.map +0 -1
  432. package/elevation/lib/_md-comp-elevation.scss +0 -27
  433. package/focus/lib/_md-comp-focus-ring.scss +0 -30
  434. package/iconbutton/filled-icon-button-toggle.d.ts +0 -31
  435. package/iconbutton/filled-icon-button-toggle.js +0 -40
  436. package/iconbutton/filled-icon-button-toggle.js.map +0 -1
  437. package/iconbutton/filled-link-icon-button.d.ts +0 -31
  438. package/iconbutton/filled-link-icon-button.js +0 -39
  439. package/iconbutton/filled-link-icon-button.js.map +0 -1
  440. package/iconbutton/filled-tonal-icon-button-toggle.d.ts +0 -31
  441. package/iconbutton/filled-tonal-icon-button-toggle.js +0 -40
  442. package/iconbutton/filled-tonal-icon-button-toggle.js.map +0 -1
  443. package/iconbutton/filled-tonal-link-icon-button.d.ts +0 -31
  444. package/iconbutton/filled-tonal-link-icon-button.js +0 -39
  445. package/iconbutton/filled-tonal-link-icon-button.js.map +0 -1
  446. package/iconbutton/lib/icon-button-toggle.d.ts +0 -34
  447. package/iconbutton/lib/icon-button-toggle.js +0 -87
  448. package/iconbutton/lib/icon-button-toggle.js.map +0 -1
  449. package/iconbutton/lib/link-icon-button.d.ts +0 -23
  450. package/iconbutton/lib/link-icon-button.js +0 -58
  451. package/iconbutton/lib/link-icon-button.js.map +0 -1
  452. package/iconbutton/outlined-icon-button-toggle.d.ts +0 -31
  453. package/iconbutton/outlined-icon-button-toggle.js +0 -39
  454. package/iconbutton/outlined-icon-button-toggle.js.map +0 -1
  455. package/iconbutton/outlined-link-icon-button.d.ts +0 -31
  456. package/iconbutton/outlined-link-icon-button.js +0 -39
  457. package/iconbutton/outlined-link-icon-button.js.map +0 -1
  458. package/iconbutton/standard-icon-button-toggle.d.ts +0 -31
  459. package/iconbutton/standard-icon-button-toggle.js +0 -39
  460. package/iconbutton/standard-icon-button-toggle.js.map +0 -1
  461. package/iconbutton/standard-link-icon-button.d.ts +0 -31
  462. package/iconbutton/standard-link-icon-button.js +0 -39
  463. package/iconbutton/standard-link-icon-button.js.map +0 -1
  464. /package/{tokens/v0_161/index.test.css.d.ts → circularprogress/lib/circular-progress-styles.css.d.ts} +0 -0
  465. /package/{tokens/v0_161/lib.test.css.d.ts → list/lib/listitem/forced-colors-styles.css.d.ts} +0 -0
  466. /package/tokens/{v0_161 → v0_172}/_index.scss +0 -0
  467. /package/tokens/{v0_161 → v0_172}/index.test.css.js +0 -0
  468. /package/tokens/{v0_161 → v0_172}/index.test.css.js.map +0 -0
  469. /package/tokens/{v0_161 → v0_172}/index.test.scss +0 -0
  470. /package/tokens/{v0_161 → v0_172}/lib.test.css.js +0 -0
  471. /package/tokens/{v0_161 → v0_172}/lib.test.css.js.map +0 -0
  472. /package/tokens/{v0_161 → v0_172}/lib.test.scss +0 -0
package/README.md CHANGED
@@ -46,7 +46,7 @@ Field | ✅ | ✅ | 🟡
46
46
  Icon | ✅ | ✅ | ❌
47
47
  List | ✅ | 🟡 | 🟡
48
48
  Menu | ✅ | 🟡 | 🟡
49
- Progress indicator (circular) | 🟡 | | ❌
49
+ Progress indicator (circular) | | 🟡 | ❌
50
50
  Progress indicator (linear) | 🟡 | ❌ | ❌
51
51
  Radio button | ✅ | ✅ | ❌
52
52
  Ripple | ✅ | ✅ | 🟡
@@ -4,6 +4,6 @@
4
4
  * SPDX-License-Identifier: Apache-2.0
5
5
  */
6
6
  import { css } from 'lit';
7
- export const styles = css `:host{--_color: var(--md-badge-color, var(--md-sys-color-error, #b3261e));--_large-color: var(--md-badge-large-color, var(--md-sys-color-error, #b3261e));--_large-label-text-color: var(--md-badge-large-label-text-color, var(--md-sys-color-on-error, #fff));--_large-label-text-type: var(--md-badge-large-label-text-type, 500 0.688rem / 1rem Roboto);--_large-shape: var(--md-badge-large-shape, 9999px);--_large-size: var(--md-badge-large-size, 16px);--_shape: var(--md-badge-shape, 9999px);--_size: var(--md-badge-size, 6px)}.md3-badge{inset-inline-start:50%;margin-inline-start:6px;margin-block-start:4px;position:absolute;inset-block-start:0px;background-color:var(--_color);border-radius:var(--_shape);height:var(--_size)}.md3-badge:not(.md3-badge--large){width:var(--_size)}.md3-badge.md3-badge--large{display:flex;flex-direction:column;justify-content:center;margin-inline-start:2px;margin-block-start:1px;background-color:var(--_large-color);border-radius:var(--_large-shape);height:var(--_large-size);min-width:var(--_large-size);color:var(--_large-label-text-color)}.md3-badge.md3-badge--large .md3-badge__value{padding:0px 4px}.md3-badge__value{font:var(--_large-label-text-type)}/*# sourceMappingURL=badge-styles.css.map */
7
+ export const styles = css `:host{--_color: var(--md-badge-color, var(--md-sys-color-error, #b3261e));--_large-color: var(--md-badge-large-color, var(--md-sys-color-error, #b3261e));--_large-label-text-color: var(--md-badge-large-label-text-color, var(--md-sys-color-on-error, #fff));--_large-label-text-type: var(--md-badge-large-label-text-type, var(--md-sys-typescale-label-small, 500 0.688rem / 1rem var(--md-ref-typeface-plain, Roboto)));--_large-shape: var(--md-badge-large-shape, 9999px);--_large-size: var(--md-badge-large-size, 16px);--_shape: var(--md-badge-shape, 9999px);--_size: var(--md-badge-size, 6px)}.md3-badge{inset-inline-start:50%;margin-inline-start:6px;margin-block-start:4px;position:absolute;inset-block-start:0px;background-color:var(--_color);border-radius:var(--_shape);height:var(--_size)}.md3-badge:not(.md3-badge--large){width:var(--_size)}.md3-badge.md3-badge--large{display:flex;flex-direction:column;justify-content:center;margin-inline-start:2px;margin-block-start:1px;background-color:var(--_large-color);border-radius:var(--_large-shape);height:var(--_large-size);min-width:var(--_large-size);color:var(--_large-label-text-color)}.md3-badge.md3-badge--large .md3-badge__value{padding:0px 4px}.md3-badge__value{font:var(--_large-label-text-type)}/*# sourceMappingURL=badge-styles.css.map */
8
8
  `;
9
9
  //# sourceMappingURL=badge-styles.css.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"badge-styles.css.js","sourceRoot":"","sources":["badge-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{--_color: var(--md-badge-color, var(--md-sys-color-error, #b3261e));--_large-color: var(--md-badge-large-color, var(--md-sys-color-error, #b3261e));--_large-label-text-color: var(--md-badge-large-label-text-color, var(--md-sys-color-on-error, #fff));--_large-label-text-type: var(--md-badge-large-label-text-type, 500 0.688rem / 1rem Roboto);--_large-shape: var(--md-badge-large-shape, 9999px);--_large-size: var(--md-badge-large-size, 16px);--_shape: var(--md-badge-shape, 9999px);--_size: var(--md-badge-size, 6px)}.md3-badge{inset-inline-start:50%;margin-inline-start:6px;margin-block-start:4px;position:absolute;inset-block-start:0px;background-color:var(--_color);border-radius:var(--_shape);height:var(--_size)}.md3-badge:not(.md3-badge--large){width:var(--_size)}.md3-badge.md3-badge--large{display:flex;flex-direction:column;justify-content:center;margin-inline-start:2px;margin-block-start:1px;background-color:var(--_large-color);border-radius:var(--_large-shape);height:var(--_large-size);min-width:var(--_large-size);color:var(--_large-label-text-color)}.md3-badge.md3-badge--large .md3-badge__value{padding:0px 4px}.md3-badge__value{font:var(--_large-label-text-type)}/*# sourceMappingURL=badge-styles.css.map */\n`;\n "]}
1
+ {"version":3,"file":"badge-styles.css.js","sourceRoot":"","sources":["badge-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{--_color: var(--md-badge-color, var(--md-sys-color-error, #b3261e));--_large-color: var(--md-badge-large-color, var(--md-sys-color-error, #b3261e));--_large-label-text-color: var(--md-badge-large-label-text-color, var(--md-sys-color-on-error, #fff));--_large-label-text-type: var(--md-badge-large-label-text-type, var(--md-sys-typescale-label-small, 500 0.688rem / 1rem var(--md-ref-typeface-plain, Roboto)));--_large-shape: var(--md-badge-large-shape, 9999px);--_large-size: var(--md-badge-large-size, 16px);--_shape: var(--md-badge-shape, 9999px);--_size: var(--md-badge-size, 6px)}.md3-badge{inset-inline-start:50%;margin-inline-start:6px;margin-block-start:4px;position:absolute;inset-block-start:0px;background-color:var(--_color);border-radius:var(--_shape);height:var(--_size)}.md3-badge:not(.md3-badge--large){width:var(--_size)}.md3-badge.md3-badge--large{display:flex;flex-direction:column;justify-content:center;margin-inline-start:2px;margin-block-start:1px;background-color:var(--_large-color);border-radius:var(--_large-shape);height:var(--_large-size);min-width:var(--_large-size);color:var(--_large-label-text-color)}.md3-badge.md3-badge--large .md3-badge__value{padding:0px 4px}.md3-badge__value{font:var(--_large-label-text-type)}/*# sourceMappingURL=badge-styles.css.map */\n`;\n "]}
@@ -11,19 +11,13 @@
11
11
  // go/keep-sorted end
12
12
 
13
13
  @mixin styles() {
14
- md-elevation {
15
- inset: 0;
16
- position: absolute;
17
- }
18
-
19
14
  .md3-button {
20
15
  @include elevation.theme(
21
16
  (
22
17
  // TODO: replace duration with animation tokens
23
- duration: 280ms,
24
- level: var(--_container-elevation),
25
- shadow-color: var(--_container-shadow-color),
26
- surface-tint: var(--_container-surface-tint-layer-color)
18
+ 'duration': 280ms,
19
+ 'level': var(--_container-elevation),
20
+ 'shadow-color': var(--_container-shadow-color)
27
21
  )
28
22
  );
29
23
 
@@ -32,7 +26,7 @@
32
26
  &:focus {
33
27
  @include elevation.theme(
34
28
  (
35
- level: var(--_focus-container-elevation),
29
+ 'level': var(--_focus-container-elevation),
36
30
  )
37
31
  );
38
32
  }
@@ -40,7 +34,7 @@
40
34
  &:hover {
41
35
  @include elevation.theme(
42
36
  (
43
- level: var(--_hover-container-elevation),
37
+ 'level': var(--_hover-container-elevation),
44
38
  )
45
39
  );
46
40
  }
@@ -48,7 +42,7 @@
48
42
  &:active {
49
43
  @include elevation.theme(
50
44
  (
51
- level: var(--_pressed-container-elevation),
45
+ 'level': var(--_pressed-container-elevation),
52
46
  )
53
47
  );
54
48
  }
@@ -56,7 +50,7 @@
56
50
  &:disabled {
57
51
  @include elevation.theme(
58
52
  (
59
- level: var(--_disabled-container-elevation),
53
+ 'level': var(--_disabled-container-elevation),
60
54
  )
61
55
  );
62
56
  }
@@ -21,7 +21,7 @@
21
21
  );
22
22
 
23
23
  @each $token, $value in $tokens {
24
- --md-elevated-button-#{$token}: #{$value};
24
+ --md-outlined-button-#{$token}: #{$value};
25
25
  }
26
26
  }
27
27
 
@@ -150,3 +150,8 @@
150
150
  inline-size: 100%;
151
151
  }
152
152
  }
153
+
154
+ :root {
155
+ --md-filled-button-container-shape-start-start: 12px;
156
+ --md-filled-button-container-shape: 8px;
157
+ }
@@ -17,7 +17,7 @@ $_custom-property-prefix: 'text-button';
17
17
  $tokens: theme.validate-theme(tokens.md-comp-text-button-values(), $tokens);
18
18
 
19
19
  @each $token, $value in $tokens {
20
- --md-elevated-button-#{$token}: #{$value};
20
+ --md-text-button-#{$token}: #{$value};
21
21
  }
22
22
  }
23
23
 
@@ -19,7 +19,7 @@
19
19
  );
20
20
 
21
21
  @each $token, $value in $tokens {
22
- --md-elevated-button-#{$token}: #{$value};
22
+ --md-tonal-button-#{$token}: #{$value};
23
23
  }
24
24
  }
25
25
 
@@ -8,16 +8,29 @@ import '../../ripple/ripple.js';
8
8
  import { LitElement, TemplateResult } from 'lit';
9
9
  import { ClassInfo } from 'lit/directives/class-map.js';
10
10
  import { MdRipple } from '../../ripple/ripple.js';
11
- import { ARIAHasPopup } from '../../types/aria.js';
11
+ import { ARIAExpanded, ARIAHasPopup } from '../../types/aria.js';
12
12
  import { ButtonState } from './state.js';
13
+ /**
14
+ * A button component.
15
+ */
13
16
  export declare abstract class Button extends LitElement implements ButtonState {
14
17
  static shadowRootOptions: ShadowRootInit;
18
+ ariaExpanded: ARIAExpanded;
15
19
  ariaHasPopup: ARIAHasPopup;
16
20
  ariaLabel: string;
17
21
  /**
18
22
  * Whether or not the button is disabled.
19
23
  */
20
24
  disabled: boolean;
25
+ /**
26
+ * The URL that the link button points to.
27
+ */
28
+ href?: string;
29
+ /**
30
+ * Where to display the linked `href` URL for a link button. Common options
31
+ * include `_blank` to open in a new tab.
32
+ */
33
+ target?: string;
21
34
  /**
22
35
  * Whether to render the icon at the inline end of the label rather than the
23
36
  * inline start.
@@ -12,11 +12,14 @@ import { html, LitElement, nothing } from 'lit';
12
12
  import { property, query, queryAssignedElements, queryAsync, state } from 'lit/decorators.js';
13
13
  import { classMap } from 'lit/directives/class-map.js';
14
14
  import { when } from 'lit/directives/when.js';
15
+ import { html as staticHtml, literal } from 'lit/static-html.js';
15
16
  import { dispatchActivationClick, isActivationClick } from '../../controller/events.js';
16
17
  import { ariaProperty } from '../../decorators/aria-property.js';
17
18
  import { pointerPress, shouldShowStrongFocus } from '../../focus/strong-focus.js';
18
19
  import { ripple } from '../../ripple/directive.js';
19
- // tslint:disable-next-line:enforce-comments-on-exported-symbols
20
+ /**
21
+ * A button component.
22
+ */
20
23
  export class Button extends LitElement {
21
24
  constructor() {
22
25
  super();
@@ -73,18 +76,24 @@ export class Button extends LitElement {
73
76
  this.buttonElement.blur();
74
77
  }
75
78
  render() {
76
- // TODO(b/237283903): Replace ifDefined(... || undefined) with ifTruthy(...)
77
- return html `
78
- <button
79
- class="md3-button ${classMap(this.getRenderClasses())}"
80
- ?disabled="${this.disabled}"
81
- aria-label="${this.ariaLabel || nothing}"
82
- aria-haspopup="${this.ariaHasPopup || nothing}"
83
- @pointerdown="${this.handlePointerDown}"
84
- @focus="${this.handleFocus}"
85
- @blur="${this.handleBlur}"
86
- @click="${this.handleClick}"
87
- ${ripple(this.getRipple)}>
79
+ // Link buttons may not be disabled
80
+ const isDisabled = this.disabled && !this.href;
81
+ const button = this.href ? literal `a` : literal `button`;
82
+ return staticHtml `
83
+ <${button}
84
+ class="md3-button ${classMap(this.getRenderClasses())}"
85
+ ?disabled=${isDisabled}
86
+ aria-label="${this.ariaLabel || nothing}"
87
+ aria-haspopup="${this.ariaHasPopup || nothing}"
88
+ aria-expanded="${this.ariaExpanded || nothing}"
89
+ href=${this.href || nothing}
90
+ target=${this.target || nothing}
91
+ @pointerdown="${this.handlePointerDown}"
92
+ @focus="${this.handleFocus}"
93
+ @blur="${this.handleBlur}"
94
+ @click="${this.handleClick}"
95
+ ${ripple(this.getRipple)}
96
+ >
88
97
  ${this.renderFocusRing()}
89
98
  ${this.renderElevation()}
90
99
  ${when(this.showRipple, this.renderRipple)}
@@ -93,7 +102,7 @@ export class Button extends LitElement {
93
102
  ${this.renderLeadingIcon()}
94
103
  ${this.renderLabel()}
95
104
  ${this.renderTrailingIcon()}
96
- </button>`;
105
+ </${button}}>`;
97
106
  }
98
107
  getRenderClasses() {
99
108
  return {
@@ -148,6 +157,11 @@ export class Button extends LitElement {
148
157
  }
149
158
  }
150
159
  Button.shadowRootOptions = { mode: 'open', delegatesFocus: true };
160
+ __decorate([
161
+ property({ type: String, attribute: 'data-aria-expanded', noAccessor: true }),
162
+ ariaProperty,
163
+ __metadata("design:type", String)
164
+ ], Button.prototype, "ariaExpanded", void 0);
151
165
  __decorate([
152
166
  property({ type: String, attribute: 'data-aria-has-popup', noAccessor: true }),
153
167
  ariaProperty,
@@ -162,6 +176,14 @@ __decorate([
162
176
  property({ type: Boolean, reflect: true }),
163
177
  __metadata("design:type", Object)
164
178
  ], Button.prototype, "disabled", void 0);
179
+ __decorate([
180
+ property({ type: String }),
181
+ __metadata("design:type", String)
182
+ ], Button.prototype, "href", void 0);
183
+ __decorate([
184
+ property({ type: String }),
185
+ __metadata("design:type", String)
186
+ ], Button.prototype, "target", void 0);
165
187
  __decorate([
166
188
  property({ type: Boolean, attribute: 'trailingicon' }),
167
189
  __metadata("design:type", Object)
@@ -1 +1 @@
1
- {"version":3,"file":"button.js","sourceRoot":"","sources":["button.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2019 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// This is required for @ariaProperty\n// tslint:disable:no-new-decorators\n\nimport '../../focus/focus-ring.js';\nimport '../../ripple/ripple.js';\n\nimport {html, LitElement, nothing, TemplateResult} from 'lit';\nimport {property, query, queryAssignedElements, queryAsync, state} from 'lit/decorators.js';\nimport {ClassInfo, classMap} from 'lit/directives/class-map.js';\nimport {when} from 'lit/directives/when.js';\n\nimport {dispatchActivationClick, isActivationClick} from '../../controller/events.js';\nimport {ariaProperty} from '../../decorators/aria-property.js';\nimport {pointerPress, shouldShowStrongFocus} from '../../focus/strong-focus.js';\nimport {ripple} from '../../ripple/directive.js';\nimport {MdRipple} from '../../ripple/ripple.js';\nimport {ARIAHasPopup} from '../../types/aria.js';\n\nimport {ButtonState} from './state.js';\n\n// tslint:disable-next-line:enforce-comments-on-exported-symbols\nexport abstract class Button extends LitElement implements ButtonState {\n static override shadowRootOptions:\n ShadowRootInit = {mode: 'open', delegatesFocus: true};\n\n @property({type: String, attribute: 'data-aria-has-popup', noAccessor: true})\n @ariaProperty\n override ariaHasPopup!: ARIAHasPopup;\n\n @property({type: String, attribute: 'data-aria-label', noAccessor: true})\n @ariaProperty\n override ariaLabel!: string;\n\n /**\n * Whether or not the button is disabled.\n */\n @property({type: Boolean, reflect: true}) disabled = false;\n\n /**\n * Whether to render the icon at the inline end of the label rather than the\n * inline start.\n *\n * _Note:_ Link buttons cannot have trailing icons.\n */\n @property({type: Boolean, attribute: 'trailingicon'}) trailingIcon = false;\n\n // TODO(b/272598771): remove label property\n /**\n * The button's visible label.\n *\n * @deprecated Set text as content of the button instead.\n */\n @property({type: String}) label = '';\n\n /**\n * Whether to display the icon or not.\n */\n @property({type: Boolean}) hasIcon = false;\n\n /**\n * Whether `preventDefault()` should be called on the underlying button.\n * Useful for preventing certain native functionalities like preventing form\n * submissions.\n */\n @property({type: Boolean}) preventClickDefault = false;\n\n @query('.md3-button') protected buttonElement!: HTMLElement;\n\n @queryAsync('md-ripple') protected ripple!: Promise<MdRipple|null>;\n\n @state() protected showFocusRing = false;\n\n @state() protected showRipple = false;\n\n @queryAssignedElements({slot: 'icon', flatten: true})\n protected assignedIcons!: HTMLElement[];\n\n constructor() {\n super();\n this.addEventListener('click', this.handleActivationClick);\n }\n\n private readonly handleActivationClick = (event: MouseEvent) => {\n if (!isActivationClick((event))) {\n return;\n }\n this.focus();\n dispatchActivationClick(this.buttonElement);\n };\n\n override focus() {\n this.buttonElement.focus();\n }\n\n override blur() {\n this.buttonElement.blur();\n }\n\n protected readonly getRipple = () => {\n this.showRipple = true;\n return this.ripple;\n };\n\n protected override render(): TemplateResult {\n // TODO(b/237283903): Replace ifDefined(... || undefined) with ifTruthy(...)\n return html`\n <button\n class=\"md3-button ${classMap(this.getRenderClasses())}\"\n ?disabled=\"${this.disabled}\"\n aria-label=\"${this.ariaLabel || nothing}\"\n aria-haspopup=\"${this.ariaHasPopup || nothing}\"\n @pointerdown=\"${this.handlePointerDown}\"\n @focus=\"${this.handleFocus}\"\n @blur=\"${this.handleBlur}\"\n @click=\"${this.handleClick}\"\n ${ripple(this.getRipple)}>\n ${this.renderFocusRing()}\n ${this.renderElevation()}\n ${when(this.showRipple, this.renderRipple)}\n ${this.renderOutline()}\n ${this.renderTouchTarget()}\n ${this.renderLeadingIcon()}\n ${this.renderLabel()}\n ${this.renderTrailingIcon()}\n </button>`;\n }\n\n protected getRenderClasses(): ClassInfo {\n return {\n 'md3-button--icon-leading': !this.trailingIcon && this.hasIcon,\n 'md3-button--icon-trailing': this.trailingIcon && this.hasIcon,\n };\n }\n\n protected renderTouchTarget(): TemplateResult {\n return html`\n <span class=\"md3-button__touch\"></span>\n `;\n }\n\n protected renderElevation(): TemplateResult {\n return html``;\n }\n\n protected renderRipple = () => {\n return html`<md-ripple class=\"md3-button__ripple\" ?disabled=\"${\n this.disabled}\"></md-ripple>`;\n };\n\n protected renderOutline(): TemplateResult {\n return html``;\n }\n\n protected renderFocusRing(): TemplateResult {\n return html`<md-focus-ring .visible=\"${\n this.showFocusRing}\"></md-focus-ring>`;\n }\n\n protected renderLabel(): TemplateResult {\n // TODO(b/272598771): remove the ternary when label property is removed\n return html`<span class=\"md3-button__label\">${\n this.label ? this.label : html`<slot></slot>`}</span>`;\n }\n\n protected renderLeadingIcon(): TemplateResult|string {\n return this.trailingIcon ? '' : this.renderIcon();\n }\n\n protected renderTrailingIcon(): TemplateResult|string {\n return this.trailingIcon ? this.renderIcon() : '';\n }\n\n protected renderIcon(): TemplateResult {\n return html`<slot name=\"icon\" @slotchange=\"${\n this.handleSlotChange}\"></slot>`;\n }\n\n protected handlePointerDown(e: PointerEvent) {\n pointerPress();\n this.showFocusRing = shouldShowStrongFocus();\n }\n\n protected handleClick(e: MouseEvent) {\n if (this.preventClickDefault) {\n e.preventDefault();\n }\n }\n\n protected handleFocus() {\n this.showFocusRing = shouldShowStrongFocus();\n }\n\n protected handleBlur() {\n this.showFocusRing = false;\n }\n\n protected handleSlotChange() {\n this.hasIcon = this.assignedIcons.length > 0;\n }\n}\n"]}
1
+ {"version":3,"file":"button.js","sourceRoot":"","sources":["button.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2019 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// This is required for @ariaProperty\n// tslint:disable:no-new-decorators\n\nimport '../../focus/focus-ring.js';\nimport '../../ripple/ripple.js';\n\nimport {html, LitElement, nothing, TemplateResult} from 'lit';\nimport {property, query, queryAssignedElements, queryAsync, state} from 'lit/decorators.js';\nimport {ClassInfo, classMap} from 'lit/directives/class-map.js';\nimport {when} from 'lit/directives/when.js';\nimport {html as staticHtml, literal} from 'lit/static-html.js';\n\nimport {dispatchActivationClick, isActivationClick} from '../../controller/events.js';\nimport {ariaProperty} from '../../decorators/aria-property.js';\nimport {pointerPress, shouldShowStrongFocus} from '../../focus/strong-focus.js';\nimport {ripple} from '../../ripple/directive.js';\nimport {MdRipple} from '../../ripple/ripple.js';\nimport {ARIAExpanded, ARIAHasPopup} from '../../types/aria.js';\n\nimport {ButtonState} from './state.js';\n\n/**\n * A button component.\n */\nexport abstract class Button extends LitElement implements ButtonState {\n static override shadowRootOptions:\n ShadowRootInit = {mode: 'open', delegatesFocus: true};\n\n @property({type: String, attribute: 'data-aria-expanded', noAccessor: true})\n @ariaProperty\n override ariaExpanded!: ARIAExpanded;\n\n @property({type: String, attribute: 'data-aria-has-popup', noAccessor: true})\n @ariaProperty\n override ariaHasPopup!: ARIAHasPopup;\n\n @property({type: String, attribute: 'data-aria-label', noAccessor: true})\n @ariaProperty\n override ariaLabel!: string;\n\n /**\n * Whether or not the button is disabled.\n */\n @property({type: Boolean, reflect: true}) disabled = false;\n\n /**\n * The URL that the link button points to.\n */\n @property({type: String}) href?: string;\n\n /**\n * Where to display the linked `href` URL for a link button. Common options\n * include `_blank` to open in a new tab.\n */\n @property({type: String}) target?: string;\n\n /**\n * Whether to render the icon at the inline end of the label rather than the\n * inline start.\n *\n * _Note:_ Link buttons cannot have trailing icons.\n */\n @property({type: Boolean, attribute: 'trailingicon'}) trailingIcon = false;\n\n // TODO(b/272598771): remove label property\n /**\n * The button's visible label.\n *\n * @deprecated Set text as content of the button instead.\n */\n @property({type: String}) label = '';\n\n /**\n * Whether to display the icon or not.\n */\n @property({type: Boolean}) hasIcon = false;\n\n /**\n * Whether `preventDefault()` should be called on the underlying button.\n * Useful for preventing certain native functionalities like preventing form\n * submissions.\n */\n @property({type: Boolean}) preventClickDefault = false;\n\n @query('.md3-button') protected buttonElement!: HTMLElement;\n\n @queryAsync('md-ripple') protected ripple!: Promise<MdRipple|null>;\n\n @state() protected showFocusRing = false;\n\n @state() protected showRipple = false;\n\n @queryAssignedElements({slot: 'icon', flatten: true})\n protected assignedIcons!: HTMLElement[];\n\n constructor() {\n super();\n this.addEventListener('click', this.handleActivationClick);\n }\n\n private readonly handleActivationClick = (event: MouseEvent) => {\n if (!isActivationClick((event))) {\n return;\n }\n this.focus();\n dispatchActivationClick(this.buttonElement);\n };\n\n override focus() {\n this.buttonElement.focus();\n }\n\n override blur() {\n this.buttonElement.blur();\n }\n\n protected readonly getRipple = () => {\n this.showRipple = true;\n return this.ripple;\n };\n\n protected override render(): TemplateResult {\n // Link buttons may not be disabled\n const isDisabled = this.disabled && !this.href;\n\n const button = this.href ? literal`a` : literal`button`;\n return staticHtml`\n <${button}\n class=\"md3-button ${classMap(this.getRenderClasses())}\"\n ?disabled=${isDisabled}\n aria-label=\"${this.ariaLabel || nothing}\"\n aria-haspopup=\"${this.ariaHasPopup || nothing}\"\n aria-expanded=\"${this.ariaExpanded || nothing}\"\n href=${this.href || nothing}\n target=${this.target || nothing}\n @pointerdown=\"${this.handlePointerDown}\"\n @focus=\"${this.handleFocus}\"\n @blur=\"${this.handleBlur}\"\n @click=\"${this.handleClick}\"\n ${ripple(this.getRipple)}\n >\n ${this.renderFocusRing()}\n ${this.renderElevation()}\n ${when(this.showRipple, this.renderRipple)}\n ${this.renderOutline()}\n ${this.renderTouchTarget()}\n ${this.renderLeadingIcon()}\n ${this.renderLabel()}\n ${this.renderTrailingIcon()}\n </${button}}>`;\n }\n\n protected getRenderClasses(): ClassInfo {\n return {\n 'md3-button--icon-leading': !this.trailingIcon && this.hasIcon,\n 'md3-button--icon-trailing': this.trailingIcon && this.hasIcon,\n };\n }\n\n protected renderTouchTarget(): TemplateResult {\n return html`\n <span class=\"md3-button__touch\"></span>\n `;\n }\n\n protected renderElevation(): TemplateResult {\n return html``;\n }\n\n protected renderRipple = () => {\n return html`<md-ripple class=\"md3-button__ripple\" ?disabled=\"${\n this.disabled}\"></md-ripple>`;\n };\n\n protected renderOutline(): TemplateResult {\n return html``;\n }\n\n protected renderFocusRing(): TemplateResult {\n return html`<md-focus-ring .visible=\"${\n this.showFocusRing}\"></md-focus-ring>`;\n }\n\n protected renderLabel(): TemplateResult {\n // TODO(b/272598771): remove the ternary when label property is removed\n return html`<span class=\"md3-button__label\">${\n this.label ? this.label : html`<slot></slot>`}</span>`;\n }\n\n protected renderLeadingIcon(): TemplateResult|string {\n return this.trailingIcon ? '' : this.renderIcon();\n }\n\n protected renderTrailingIcon(): TemplateResult|string {\n return this.trailingIcon ? this.renderIcon() : '';\n }\n\n protected renderIcon(): TemplateResult {\n return html`<slot name=\"icon\" @slotchange=\"${\n this.handleSlotChange}\"></slot>`;\n }\n\n protected handlePointerDown(e: PointerEvent) {\n pointerPress();\n this.showFocusRing = shouldShowStrongFocus();\n }\n\n protected handleClick(e: MouseEvent) {\n if (this.preventClickDefault) {\n e.preventDefault();\n }\n }\n\n protected handleFocus() {\n this.showFocusRing = shouldShowStrongFocus();\n }\n\n protected handleBlur() {\n this.showFocusRing = false;\n }\n\n protected handleSlotChange() {\n this.hasIcon = this.assignedIcons.length > 0;\n }\n}\n"]}
@@ -7,6 +7,9 @@ import '../../elevation/elevation.js';
7
7
  import { TemplateResult } from 'lit';
8
8
  import { ClassInfo } from 'lit/directives/class-map.js';
9
9
  import { Button } from './button.js';
10
+ /**
11
+ * An elevated button component.
12
+ */
10
13
  export declare class ElevatedButton extends Button {
11
14
  protected getRenderClasses(): ClassInfo;
12
15
  protected renderElevation(): TemplateResult;
@@ -6,7 +6,9 @@
6
6
  import '../../elevation/elevation.js';
7
7
  import { html } from 'lit';
8
8
  import { Button } from './button.js';
9
- // tslint:disable-next-line:enforce-comments-on-exported-symbols
9
+ /**
10
+ * An elevated button component.
11
+ */
10
12
  export class ElevatedButton extends Button {
11
13
  getRenderClasses() {
12
14
  return {
@@ -15,7 +17,7 @@ export class ElevatedButton extends Button {
15
17
  };
16
18
  }
17
19
  renderElevation() {
18
- return html `<md-elevation shadow surface></md-elevation>`;
20
+ return html `<md-elevation></md-elevation>`;
19
21
  }
20
22
  }
21
23
  //# sourceMappingURL=elevated-button.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"elevated-button.js","sourceRoot":"","sources":["elevated-button.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,8BAA8B,CAAC;AAEtC,OAAO,EAAC,IAAI,EAAiB,MAAM,KAAK,CAAC;AAGzC,OAAO,EAAC,MAAM,EAAC,MAAM,aAAa,CAAC;AAEnC,gEAAgE;AAChE,MAAM,OAAO,cAAe,SAAQ,MAAM;IACrB,gBAAgB;QACjC,OAAO;YACL,GAAG,KAAK,CAAC,gBAAgB,EAAE;YAC3B,sBAAsB,EAAE,IAAI;SAC7B,CAAC;IACJ,CAAC;IAEkB,eAAe;QAChC,OAAO,IAAI,CAAA,8CAA8C,CAAC;IAC5D,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../elevation/elevation.js';\n\nimport {html, TemplateResult} from 'lit';\nimport {ClassInfo} from 'lit/directives/class-map.js';\n\nimport {Button} from './button.js';\n\n// tslint:disable-next-line:enforce-comments-on-exported-symbols\nexport class ElevatedButton extends Button {\n protected override getRenderClasses(): ClassInfo {\n return {\n ...super.getRenderClasses(),\n 'md3-button--elevated': true,\n };\n }\n\n protected override renderElevation(): TemplateResult {\n return html`<md-elevation shadow surface></md-elevation>`;\n }\n}\n"]}
1
+ {"version":3,"file":"elevated-button.js","sourceRoot":"","sources":["elevated-button.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,8BAA8B,CAAC;AAEtC,OAAO,EAAC,IAAI,EAAiB,MAAM,KAAK,CAAC;AAGzC,OAAO,EAAC,MAAM,EAAC,MAAM,aAAa,CAAC;AAEnC;;GAEG;AACH,MAAM,OAAO,cAAe,SAAQ,MAAM;IACrB,gBAAgB;QACjC,OAAO;YACL,GAAG,KAAK,CAAC,gBAAgB,EAAE;YAC3B,sBAAsB,EAAE,IAAI;SAC7B,CAAC;IACJ,CAAC;IAEkB,eAAe;QAChC,OAAO,IAAI,CAAA,+BAA+B,CAAC;IAC7C,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../elevation/elevation.js';\n\nimport {html, TemplateResult} from 'lit';\nimport {ClassInfo} from 'lit/directives/class-map.js';\n\nimport {Button} from './button.js';\n\n/**\n * An elevated button component.\n */\nexport class ElevatedButton extends Button {\n protected override getRenderClasses(): ClassInfo {\n return {\n ...super.getRenderClasses(),\n 'md3-button--elevated': true,\n };\n }\n\n protected override renderElevation(): TemplateResult {\n return html`<md-elevation></md-elevation>`;\n }\n}\n"]}
@@ -4,6 +4,6 @@
4
4
  * SPDX-License-Identifier: Apache-2.0
5
5
  */
6
6
  import { css } from 'lit';
7
- export const styles = css `:host{--_container-shape-start-start: var(--md-elevated-button-container-shape-start-start, var(--md-elevated-button-container-shape, 9999px));--_container-shape-start-end: var(--md-elevated-button-container-shape-start-end, var(--md-elevated-button-container-shape, 9999px));--_container-shape-end-end: var(--md-elevated-button-container-shape-end-end, var(--md-elevated-button-container-shape, 9999px));--_container-shape-end-start: var(--md-elevated-button-container-shape-end-start, var(--md-elevated-button-container-shape, 9999px));--_container-color: var(--md-elevated-button-container-color, var(--md-sys-color-surface, #fffbfe));--_container-elevation: var(--md-elevated-button-container-elevation, 1);--_container-height: var(--md-elevated-button-container-height, 40px);--_container-shadow-color: var(--md-elevated-button-container-shadow-color, var(--md-sys-color-shadow, #000));--_container-surface-tint-layer-color: var(--md-elevated-button-container-surface-tint-layer-color, var(--md-sys-color-primary, #6750a4));--_disabled-container-color: var(--md-elevated-button-disabled-container-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-container-elevation: var(--md-elevated-button-disabled-container-elevation, 0);--_disabled-container-opacity: var(--md-elevated-button-disabled-container-opacity, 0.12);--_disabled-label-text-color: var(--md-elevated-button-disabled-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-label-text-opacity: var(--md-elevated-button-disabled-label-text-opacity, 0.38);--_focus-container-elevation: var(--md-elevated-button-focus-container-elevation, 1);--_focus-label-text-color: var(--md-elevated-button-focus-label-text-color, var(--md-sys-color-primary, #6750a4));--_focus-state-layer-color: var(--md-elevated-button-focus-state-layer-color, var(--md-sys-color-primary, #6750a4));--_focus-state-layer-opacity: var(--md-elevated-button-focus-state-layer-opacity, 0.12);--_hover-container-elevation: var(--md-elevated-button-hover-container-elevation, 2);--_hover-label-text-color: var(--md-elevated-button-hover-label-text-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-color: var(--md-elevated-button-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-opacity: var(--md-elevated-button-hover-state-layer-opacity, 0.08);--_label-text-color: var(--md-elevated-button-label-text-color, var(--md-sys-color-primary, #6750a4));--_label-text-type: var(--md-elevated-button-label-text-type, 500 0.875rem / 1.25rem Roboto);--_pressed-container-elevation: var(--md-elevated-button-pressed-container-elevation, 1);--_pressed-label-text-color: var(--md-elevated-button-pressed-label-text-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-color: var(--md-elevated-button-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-opacity: var(--md-elevated-button-pressed-state-layer-opacity, 0.12);--_with-icon-disabled-icon-color: var(--md-elevated-button-with-icon-disabled-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_with-icon-disabled-icon-opacity: var(--md-elevated-button-with-icon-disabled-icon-opacity, 0.38);--_with-icon-focus-icon-color: var(--md-elevated-button-with-icon-focus-icon-color, var(--md-sys-color-primary, #6750a4));--_with-icon-hover-icon-color: var(--md-elevated-button-with-icon-hover-icon-color, var(--md-sys-color-primary, #6750a4));--_with-icon-icon-color: var(--md-elevated-button-with-icon-icon-color, var(--md-sys-color-primary, #6750a4));--_with-icon-icon-size: var(--md-elevated-button-with-icon-icon-size, 18px);--_with-icon-pressed-icon-color: var(--md-elevated-button-with-icon-pressed-icon-color, var(--md-sys-color-primary, #6750a4));--_spacing-leading: var(--md-elevated-button-spacing-leading, 24px);--_spacing-trailing: var(--md-elevated-button-spacing-trailing, 24px);--_with-icon-spacing-leading: var(--md-elevated-button-with-icon-spacing-leading, 16px);--_with-icon-spacing-trailing: var(--md-elevated-button-with-icon-spacing-trailing, 24px);--_with-trailing-icon-spacing-leading: var(--md-elevated-button-with-trailing-icon-spacing-leading, 24px);--_with-trailing-icon-spacing-trailing: var(--md-elevated-button-with-trailing-icon-spacing-trailing, 16px)}/*# sourceMappingURL=elevated-styles.css.map */
7
+ export const styles = css `:host{--_container-shape-start-start: var(--md-elevated-button-container-shape-start-start, var(--md-elevated-button-container-shape, 9999px));--_container-shape-start-end: var(--md-elevated-button-container-shape-start-end, var(--md-elevated-button-container-shape, 9999px));--_container-shape-end-end: var(--md-elevated-button-container-shape-end-end, var(--md-elevated-button-container-shape, 9999px));--_container-shape-end-start: var(--md-elevated-button-container-shape-end-start, var(--md-elevated-button-container-shape, 9999px));--_container-color: var(--md-elevated-button-container-color, var(--md-sys-color-surface-container-low, #f7f2fa));--_container-elevation: var(--md-elevated-button-container-elevation, 1);--_container-height: var(--md-elevated-button-container-height, 40px);--_container-shadow-color: var(--md-elevated-button-container-shadow-color, var(--md-sys-color-shadow, #000));--_disabled-container-color: var(--md-elevated-button-disabled-container-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-container-elevation: var(--md-elevated-button-disabled-container-elevation, 0);--_disabled-container-opacity: var(--md-elevated-button-disabled-container-opacity, 0.12);--_disabled-label-text-color: var(--md-elevated-button-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-opacity: var(--md-elevated-button-disabled-label-text-opacity, 0.38);--_focus-container-elevation: var(--md-elevated-button-focus-container-elevation, 1);--_focus-label-text-color: var(--md-elevated-button-focus-label-text-color, var(--md-sys-color-primary, #6750a4));--_focus-state-layer-color: var(--md-elevated-button-focus-state-layer-color, var(--md-sys-color-primary, #6750a4));--_focus-state-layer-opacity: var(--md-elevated-button-focus-state-layer-opacity, 0.12);--_hover-container-elevation: var(--md-elevated-button-hover-container-elevation, 2);--_hover-label-text-color: var(--md-elevated-button-hover-label-text-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-color: var(--md-elevated-button-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-opacity: var(--md-elevated-button-hover-state-layer-opacity, 0.08);--_label-text-color: var(--md-elevated-button-label-text-color, var(--md-sys-color-primary, #6750a4));--_label-text-type: var(--md-elevated-button-label-text-type, var(--md-sys-typescale-label-large, 500 0.875rem / 1.25rem var(--md-ref-typeface-plain, Roboto)));--_pressed-container-elevation: var(--md-elevated-button-pressed-container-elevation, 1);--_pressed-label-text-color: var(--md-elevated-button-pressed-label-text-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-color: var(--md-elevated-button-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-opacity: var(--md-elevated-button-pressed-state-layer-opacity, 0.12);--_with-icon-disabled-icon-color: var(--md-elevated-button-with-icon-disabled-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_with-icon-disabled-icon-opacity: var(--md-elevated-button-with-icon-disabled-icon-opacity, 0.38);--_with-icon-focus-icon-color: var(--md-elevated-button-with-icon-focus-icon-color, var(--md-sys-color-primary, #6750a4));--_with-icon-hover-icon-color: var(--md-elevated-button-with-icon-hover-icon-color, var(--md-sys-color-primary, #6750a4));--_with-icon-icon-color: var(--md-elevated-button-with-icon-icon-color, var(--md-sys-color-primary, #6750a4));--_with-icon-icon-size: var(--md-elevated-button-with-icon-icon-size, 18px);--_with-icon-pressed-icon-color: var(--md-elevated-button-with-icon-pressed-icon-color, var(--md-sys-color-primary, #6750a4));--_spacing-leading: var(--md-elevated-button-spacing-leading, 24px);--_spacing-trailing: var(--md-elevated-button-spacing-trailing, 24px);--_with-icon-spacing-leading: var(--md-elevated-button-with-icon-spacing-leading, 16px);--_with-icon-spacing-trailing: var(--md-elevated-button-with-icon-spacing-trailing, 24px);--_with-trailing-icon-spacing-leading: var(--md-elevated-button-with-trailing-icon-spacing-leading, 24px);--_with-trailing-icon-spacing-trailing: var(--md-elevated-button-with-trailing-icon-spacing-trailing, 16px)}/*# sourceMappingURL=elevated-styles.css.map */
8
8
  `;
9
9
  //# sourceMappingURL=elevated-styles.css.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"elevated-styles.css.js","sourceRoot":"","sources":["elevated-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-elevated-button-container-shape-start-start, var(--md-elevated-button-container-shape, 9999px));--_container-shape-start-end: var(--md-elevated-button-container-shape-start-end, var(--md-elevated-button-container-shape, 9999px));--_container-shape-end-end: var(--md-elevated-button-container-shape-end-end, var(--md-elevated-button-container-shape, 9999px));--_container-shape-end-start: var(--md-elevated-button-container-shape-end-start, var(--md-elevated-button-container-shape, 9999px));--_container-color: var(--md-elevated-button-container-color, var(--md-sys-color-surface, #fffbfe));--_container-elevation: var(--md-elevated-button-container-elevation, 1);--_container-height: var(--md-elevated-button-container-height, 40px);--_container-shadow-color: var(--md-elevated-button-container-shadow-color, var(--md-sys-color-shadow, #000));--_container-surface-tint-layer-color: var(--md-elevated-button-container-surface-tint-layer-color, var(--md-sys-color-primary, #6750a4));--_disabled-container-color: var(--md-elevated-button-disabled-container-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-container-elevation: var(--md-elevated-button-disabled-container-elevation, 0);--_disabled-container-opacity: var(--md-elevated-button-disabled-container-opacity, 0.12);--_disabled-label-text-color: var(--md-elevated-button-disabled-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-label-text-opacity: var(--md-elevated-button-disabled-label-text-opacity, 0.38);--_focus-container-elevation: var(--md-elevated-button-focus-container-elevation, 1);--_focus-label-text-color: var(--md-elevated-button-focus-label-text-color, var(--md-sys-color-primary, #6750a4));--_focus-state-layer-color: var(--md-elevated-button-focus-state-layer-color, var(--md-sys-color-primary, #6750a4));--_focus-state-layer-opacity: var(--md-elevated-button-focus-state-layer-opacity, 0.12);--_hover-container-elevation: var(--md-elevated-button-hover-container-elevation, 2);--_hover-label-text-color: var(--md-elevated-button-hover-label-text-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-color: var(--md-elevated-button-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-opacity: var(--md-elevated-button-hover-state-layer-opacity, 0.08);--_label-text-color: var(--md-elevated-button-label-text-color, var(--md-sys-color-primary, #6750a4));--_label-text-type: var(--md-elevated-button-label-text-type, 500 0.875rem / 1.25rem Roboto);--_pressed-container-elevation: var(--md-elevated-button-pressed-container-elevation, 1);--_pressed-label-text-color: var(--md-elevated-button-pressed-label-text-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-color: var(--md-elevated-button-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-opacity: var(--md-elevated-button-pressed-state-layer-opacity, 0.12);--_with-icon-disabled-icon-color: var(--md-elevated-button-with-icon-disabled-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_with-icon-disabled-icon-opacity: var(--md-elevated-button-with-icon-disabled-icon-opacity, 0.38);--_with-icon-focus-icon-color: var(--md-elevated-button-with-icon-focus-icon-color, var(--md-sys-color-primary, #6750a4));--_with-icon-hover-icon-color: var(--md-elevated-button-with-icon-hover-icon-color, var(--md-sys-color-primary, #6750a4));--_with-icon-icon-color: var(--md-elevated-button-with-icon-icon-color, var(--md-sys-color-primary, #6750a4));--_with-icon-icon-size: var(--md-elevated-button-with-icon-icon-size, 18px);--_with-icon-pressed-icon-color: var(--md-elevated-button-with-icon-pressed-icon-color, var(--md-sys-color-primary, #6750a4));--_spacing-leading: var(--md-elevated-button-spacing-leading, 24px);--_spacing-trailing: var(--md-elevated-button-spacing-trailing, 24px);--_with-icon-spacing-leading: var(--md-elevated-button-with-icon-spacing-leading, 16px);--_with-icon-spacing-trailing: var(--md-elevated-button-with-icon-spacing-trailing, 24px);--_with-trailing-icon-spacing-leading: var(--md-elevated-button-with-trailing-icon-spacing-leading, 24px);--_with-trailing-icon-spacing-trailing: var(--md-elevated-button-with-trailing-icon-spacing-trailing, 16px)}/*# sourceMappingURL=elevated-styles.css.map */\n`;\n "]}
1
+ {"version":3,"file":"elevated-styles.css.js","sourceRoot":"","sources":["elevated-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-elevated-button-container-shape-start-start, var(--md-elevated-button-container-shape, 9999px));--_container-shape-start-end: var(--md-elevated-button-container-shape-start-end, var(--md-elevated-button-container-shape, 9999px));--_container-shape-end-end: var(--md-elevated-button-container-shape-end-end, var(--md-elevated-button-container-shape, 9999px));--_container-shape-end-start: var(--md-elevated-button-container-shape-end-start, var(--md-elevated-button-container-shape, 9999px));--_container-color: var(--md-elevated-button-container-color, var(--md-sys-color-surface-container-low, #f7f2fa));--_container-elevation: var(--md-elevated-button-container-elevation, 1);--_container-height: var(--md-elevated-button-container-height, 40px);--_container-shadow-color: var(--md-elevated-button-container-shadow-color, var(--md-sys-color-shadow, #000));--_disabled-container-color: var(--md-elevated-button-disabled-container-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-container-elevation: var(--md-elevated-button-disabled-container-elevation, 0);--_disabled-container-opacity: var(--md-elevated-button-disabled-container-opacity, 0.12);--_disabled-label-text-color: var(--md-elevated-button-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-opacity: var(--md-elevated-button-disabled-label-text-opacity, 0.38);--_focus-container-elevation: var(--md-elevated-button-focus-container-elevation, 1);--_focus-label-text-color: var(--md-elevated-button-focus-label-text-color, var(--md-sys-color-primary, #6750a4));--_focus-state-layer-color: var(--md-elevated-button-focus-state-layer-color, var(--md-sys-color-primary, #6750a4));--_focus-state-layer-opacity: var(--md-elevated-button-focus-state-layer-opacity, 0.12);--_hover-container-elevation: var(--md-elevated-button-hover-container-elevation, 2);--_hover-label-text-color: var(--md-elevated-button-hover-label-text-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-color: var(--md-elevated-button-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-opacity: var(--md-elevated-button-hover-state-layer-opacity, 0.08);--_label-text-color: var(--md-elevated-button-label-text-color, var(--md-sys-color-primary, #6750a4));--_label-text-type: var(--md-elevated-button-label-text-type, var(--md-sys-typescale-label-large, 500 0.875rem / 1.25rem var(--md-ref-typeface-plain, Roboto)));--_pressed-container-elevation: var(--md-elevated-button-pressed-container-elevation, 1);--_pressed-label-text-color: var(--md-elevated-button-pressed-label-text-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-color: var(--md-elevated-button-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-opacity: var(--md-elevated-button-pressed-state-layer-opacity, 0.12);--_with-icon-disabled-icon-color: var(--md-elevated-button-with-icon-disabled-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_with-icon-disabled-icon-opacity: var(--md-elevated-button-with-icon-disabled-icon-opacity, 0.38);--_with-icon-focus-icon-color: var(--md-elevated-button-with-icon-focus-icon-color, var(--md-sys-color-primary, #6750a4));--_with-icon-hover-icon-color: var(--md-elevated-button-with-icon-hover-icon-color, var(--md-sys-color-primary, #6750a4));--_with-icon-icon-color: var(--md-elevated-button-with-icon-icon-color, var(--md-sys-color-primary, #6750a4));--_with-icon-icon-size: var(--md-elevated-button-with-icon-icon-size, 18px);--_with-icon-pressed-icon-color: var(--md-elevated-button-with-icon-pressed-icon-color, var(--md-sys-color-primary, #6750a4));--_spacing-leading: var(--md-elevated-button-spacing-leading, 24px);--_spacing-trailing: var(--md-elevated-button-spacing-trailing, 24px);--_with-icon-spacing-leading: var(--md-elevated-button-with-icon-spacing-leading, 16px);--_with-icon-spacing-trailing: var(--md-elevated-button-with-icon-spacing-trailing, 24px);--_with-trailing-icon-spacing-leading: var(--md-elevated-button-with-trailing-icon-spacing-leading, 24px);--_with-trailing-icon-spacing-trailing: var(--md-elevated-button-with-trailing-icon-spacing-trailing, 16px)}/*# sourceMappingURL=elevated-styles.css.map */\n`;\n "]}
@@ -7,8 +7,10 @@ import '../../elevation/elevation.js';
7
7
  import { TemplateResult } from 'lit';
8
8
  import { ClassInfo } from 'lit/directives/class-map.js';
9
9
  import { Button } from './button.js';
10
+ /**
11
+ * A filled button component.
12
+ */
10
13
  export declare class FilledButton extends Button {
11
14
  protected getRenderClasses(): ClassInfo;
12
- /** @soyTemplate */
13
15
  protected renderElevation(): TemplateResult;
14
16
  }
@@ -6,7 +6,9 @@
6
6
  import '../../elevation/elevation.js';
7
7
  import { html } from 'lit';
8
8
  import { Button } from './button.js';
9
- // tslint:disable-next-line:enforce-comments-on-exported-symbols
9
+ /**
10
+ * A filled button component.
11
+ */
10
12
  export class FilledButton extends Button {
11
13
  getRenderClasses() {
12
14
  return {
@@ -14,9 +16,8 @@ export class FilledButton extends Button {
14
16
  'md3-button--filled': true,
15
17
  };
16
18
  }
17
- /** @soyTemplate */
18
19
  renderElevation() {
19
- return html `<md-elevation shadow surface></md-elevation>`;
20
+ return html `<md-elevation></md-elevation>`;
20
21
  }
21
22
  }
22
23
  //# sourceMappingURL=filled-button.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"filled-button.js","sourceRoot":"","sources":["filled-button.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,8BAA8B,CAAC;AAEtC,OAAO,EAAC,IAAI,EAAiB,MAAM,KAAK,CAAC;AAGzC,OAAO,EAAC,MAAM,EAAC,MAAM,aAAa,CAAC;AAEnC,gEAAgE;AAChE,MAAM,OAAO,YAAa,SAAQ,MAAM;IACnB,gBAAgB;QACjC,OAAO;YACL,GAAG,KAAK,CAAC,gBAAgB,EAAE;YAC3B,oBAAoB,EAAE,IAAI;SAC3B,CAAC;IACJ,CAAC;IAED,mBAAmB;IACA,eAAe;QAChC,OAAO,IAAI,CAAA,8CAA8C,CAAC;IAC5D,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../elevation/elevation.js';\n\nimport {html, TemplateResult} from 'lit';\nimport {ClassInfo} from 'lit/directives/class-map.js';\n\nimport {Button} from './button.js';\n\n// tslint:disable-next-line:enforce-comments-on-exported-symbols\nexport class FilledButton extends Button {\n protected override getRenderClasses(): ClassInfo {\n return {\n ...super.getRenderClasses(),\n 'md3-button--filled': true,\n };\n }\n\n /** @soyTemplate */\n protected override renderElevation(): TemplateResult {\n return html`<md-elevation shadow surface></md-elevation>`;\n }\n}\n"]}
1
+ {"version":3,"file":"filled-button.js","sourceRoot":"","sources":["filled-button.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,8BAA8B,CAAC;AAEtC,OAAO,EAAC,IAAI,EAAiB,MAAM,KAAK,CAAC;AAGzC,OAAO,EAAC,MAAM,EAAC,MAAM,aAAa,CAAC;AAEnC;;GAEG;AACH,MAAM,OAAO,YAAa,SAAQ,MAAM;IACnB,gBAAgB;QACjC,OAAO;YACL,GAAG,KAAK,CAAC,gBAAgB,EAAE;YAC3B,oBAAoB,EAAE,IAAI;SAC3B,CAAC;IACJ,CAAC;IAEkB,eAAe;QAChC,OAAO,IAAI,CAAA,+BAA+B,CAAC;IAC7C,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../elevation/elevation.js';\n\nimport {html, TemplateResult} from 'lit';\nimport {ClassInfo} from 'lit/directives/class-map.js';\n\nimport {Button} from './button.js';\n\n/**\n * A filled button component.\n */\nexport class FilledButton extends Button {\n protected override getRenderClasses(): ClassInfo {\n return {\n ...super.getRenderClasses(),\n 'md3-button--filled': true,\n };\n }\n\n protected override renderElevation(): TemplateResult {\n return html`<md-elevation></md-elevation>`;\n }\n}\n"]}
@@ -4,6 +4,6 @@
4
4
  * SPDX-License-Identifier: Apache-2.0
5
5
  */
6
6
  import { css } from 'lit';
7
- export const styles = css `:host{--_container-shape-start-start: var(--md-filled-button-container-shape-start-start, var(--md-filled-button-container-shape, 9999px));--_container-shape-start-end: var(--md-filled-button-container-shape-start-end, var(--md-filled-button-container-shape, 9999px));--_container-shape-end-end: var(--md-filled-button-container-shape-end-end, var(--md-filled-button-container-shape, 9999px));--_container-shape-end-start: var(--md-filled-button-container-shape-end-start, var(--md-filled-button-container-shape, 9999px));--_container-color: var(--md-filled-button-container-color, var(--md-sys-color-primary, #6750a4));--_container-elevation: var(--md-filled-button-container-elevation, 0);--_container-height: var(--md-filled-button-container-height, 40px);--_container-shadow-color: var(--md-filled-button-container-shadow-color, var(--md-sys-color-shadow, #000));--_disabled-container-color: var(--md-filled-button-disabled-container-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-container-elevation: var(--md-filled-button-disabled-container-elevation, 0);--_disabled-container-opacity: var(--md-filled-button-disabled-container-opacity, 0.12);--_disabled-label-text-color: var(--md-filled-button-disabled-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-label-text-opacity: var(--md-filled-button-disabled-label-text-opacity, 0.38);--_focus-container-elevation: var(--md-filled-button-focus-container-elevation, 0);--_focus-label-text-color: var(--md-filled-button-focus-label-text-color, var(--md-sys-color-on-primary, #fff));--_focus-state-layer-color: var(--md-filled-button-focus-state-layer-color, var(--md-sys-color-on-primary, #fff));--_focus-state-layer-opacity: var(--md-filled-button-focus-state-layer-opacity, 0.12);--_hover-container-elevation: var(--md-filled-button-hover-container-elevation, 1);--_hover-label-text-color: var(--md-filled-button-hover-label-text-color, var(--md-sys-color-on-primary, #fff));--_hover-state-layer-color: var(--md-filled-button-hover-state-layer-color, var(--md-sys-color-on-primary, #fff));--_hover-state-layer-opacity: var(--md-filled-button-hover-state-layer-opacity, 0.08);--_label-text-color: var(--md-filled-button-label-text-color, var(--md-sys-color-on-primary, #fff));--_label-text-type: var(--md-filled-button-label-text-type, 500 0.875rem / 1.25rem Roboto);--_pressed-container-elevation: var(--md-filled-button-pressed-container-elevation, 0);--_pressed-label-text-color: var(--md-filled-button-pressed-label-text-color, var(--md-sys-color-on-primary, #fff));--_pressed-state-layer-color: var(--md-filled-button-pressed-state-layer-color, var(--md-sys-color-on-primary, #fff));--_pressed-state-layer-opacity: var(--md-filled-button-pressed-state-layer-opacity, 0.12);--_with-icon-disabled-icon-color: var(--md-filled-button-with-icon-disabled-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_with-icon-disabled-icon-opacity: var(--md-filled-button-with-icon-disabled-icon-opacity, 0.38);--_with-icon-focus-icon-color: var(--md-filled-button-with-icon-focus-icon-color, var(--md-sys-color-on-primary, #fff));--_with-icon-hover-icon-color: var(--md-filled-button-with-icon-hover-icon-color, var(--md-sys-color-on-primary, #fff));--_with-icon-icon-color: var(--md-filled-button-with-icon-icon-color, var(--md-sys-color-on-primary, #fff));--_with-icon-icon-size: var(--md-filled-button-with-icon-icon-size, 18px);--_with-icon-pressed-icon-color: var(--md-filled-button-with-icon-pressed-icon-color, var(--md-sys-color-on-primary, #fff));--_spacing-leading: var(--md-filled-button-spacing-leading, 24px);--_spacing-trailing: var(--md-filled-button-spacing-trailing, 24px);--_with-icon-spacing-leading: var(--md-filled-button-with-icon-spacing-leading, 16px);--_with-icon-spacing-trailing: var(--md-filled-button-with-icon-spacing-trailing, 24px);--_with-trailing-icon-spacing-leading: var(--md-filled-button-with-trailing-icon-spacing-leading, 24px);--_with-trailing-icon-spacing-trailing: var(--md-filled-button-with-trailing-icon-spacing-trailing, 16px)}/*# sourceMappingURL=filled-styles.css.map */
7
+ export const styles = css `:host{--_container-shape-start-start: var(--md-filled-button-container-shape-start-start, var(--md-filled-button-container-shape, 9999px));--_container-shape-start-end: var(--md-filled-button-container-shape-start-end, var(--md-filled-button-container-shape, 9999px));--_container-shape-end-end: var(--md-filled-button-container-shape-end-end, var(--md-filled-button-container-shape, 9999px));--_container-shape-end-start: var(--md-filled-button-container-shape-end-start, var(--md-filled-button-container-shape, 9999px));--_container-color: var(--md-filled-button-container-color, var(--md-sys-color-primary, #6750a4));--_container-elevation: var(--md-filled-button-container-elevation, 0);--_container-height: var(--md-filled-button-container-height, 40px);--_container-shadow-color: var(--md-filled-button-container-shadow-color, var(--md-sys-color-shadow, #000));--_disabled-container-color: var(--md-filled-button-disabled-container-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-container-elevation: var(--md-filled-button-disabled-container-elevation, 0);--_disabled-container-opacity: var(--md-filled-button-disabled-container-opacity, 0.12);--_disabled-label-text-color: var(--md-filled-button-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-opacity: var(--md-filled-button-disabled-label-text-opacity, 0.38);--_focus-container-elevation: var(--md-filled-button-focus-container-elevation, 0);--_focus-label-text-color: var(--md-filled-button-focus-label-text-color, var(--md-sys-color-on-primary, #fff));--_focus-state-layer-color: var(--md-filled-button-focus-state-layer-color, var(--md-sys-color-on-primary, #fff));--_focus-state-layer-opacity: var(--md-filled-button-focus-state-layer-opacity, 0.12);--_hover-container-elevation: var(--md-filled-button-hover-container-elevation, 1);--_hover-label-text-color: var(--md-filled-button-hover-label-text-color, var(--md-sys-color-on-primary, #fff));--_hover-state-layer-color: var(--md-filled-button-hover-state-layer-color, var(--md-sys-color-on-primary, #fff));--_hover-state-layer-opacity: var(--md-filled-button-hover-state-layer-opacity, 0.08);--_label-text-color: var(--md-filled-button-label-text-color, var(--md-sys-color-on-primary, #fff));--_label-text-type: var(--md-filled-button-label-text-type, var(--md-sys-typescale-label-large, 500 0.875rem / 1.25rem var(--md-ref-typeface-plain, Roboto)));--_pressed-container-elevation: var(--md-filled-button-pressed-container-elevation, 0);--_pressed-label-text-color: var(--md-filled-button-pressed-label-text-color, var(--md-sys-color-on-primary, #fff));--_pressed-state-layer-color: var(--md-filled-button-pressed-state-layer-color, var(--md-sys-color-on-primary, #fff));--_pressed-state-layer-opacity: var(--md-filled-button-pressed-state-layer-opacity, 0.12);--_with-icon-disabled-icon-color: var(--md-filled-button-with-icon-disabled-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_with-icon-disabled-icon-opacity: var(--md-filled-button-with-icon-disabled-icon-opacity, 0.38);--_with-icon-focus-icon-color: var(--md-filled-button-with-icon-focus-icon-color, var(--md-sys-color-on-primary, #fff));--_with-icon-hover-icon-color: var(--md-filled-button-with-icon-hover-icon-color, var(--md-sys-color-on-primary, #fff));--_with-icon-icon-color: var(--md-filled-button-with-icon-icon-color, var(--md-sys-color-on-primary, #fff));--_with-icon-icon-size: var(--md-filled-button-with-icon-icon-size, 18px);--_with-icon-pressed-icon-color: var(--md-filled-button-with-icon-pressed-icon-color, var(--md-sys-color-on-primary, #fff));--_spacing-leading: var(--md-filled-button-spacing-leading, 24px);--_spacing-trailing: var(--md-filled-button-spacing-trailing, 24px);--_with-icon-spacing-leading: var(--md-filled-button-with-icon-spacing-leading, 16px);--_with-icon-spacing-trailing: var(--md-filled-button-with-icon-spacing-trailing, 24px);--_with-trailing-icon-spacing-leading: var(--md-filled-button-with-trailing-icon-spacing-leading, 24px);--_with-trailing-icon-spacing-trailing: var(--md-filled-button-with-trailing-icon-spacing-trailing, 16px)}/*# sourceMappingURL=filled-styles.css.map */
8
8
  `;
9
9
  //# sourceMappingURL=filled-styles.css.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"filled-styles.css.js","sourceRoot":"","sources":["filled-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n import {css} from 'lit';\n export const styles = css`:host{--_container-shape-start-start: var(--md-filled-button-container-shape-start-start, var(--md-filled-button-container-shape, 9999px));--_container-shape-start-end: var(--md-filled-button-container-shape-start-end, var(--md-filled-button-container-shape, 9999px));--_container-shape-end-end: var(--md-filled-button-container-shape-end-end, var(--md-filled-button-container-shape, 9999px));--_container-shape-end-start: var(--md-filled-button-container-shape-end-start, var(--md-filled-button-container-shape, 9999px));--_container-color: var(--md-filled-button-container-color, var(--md-sys-color-primary, #6750a4));--_container-elevation: var(--md-filled-button-container-elevation, 0);--_container-height: var(--md-filled-button-container-height, 40px);--_container-shadow-color: var(--md-filled-button-container-shadow-color, var(--md-sys-color-shadow, #000));--_disabled-container-color: var(--md-filled-button-disabled-container-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-container-elevation: var(--md-filled-button-disabled-container-elevation, 0);--_disabled-container-opacity: var(--md-filled-button-disabled-container-opacity, 0.12);--_disabled-label-text-color: var(--md-filled-button-disabled-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-label-text-opacity: var(--md-filled-button-disabled-label-text-opacity, 0.38);--_focus-container-elevation: var(--md-filled-button-focus-container-elevation, 0);--_focus-label-text-color: var(--md-filled-button-focus-label-text-color, var(--md-sys-color-on-primary, #fff));--_focus-state-layer-color: var(--md-filled-button-focus-state-layer-color, var(--md-sys-color-on-primary, #fff));--_focus-state-layer-opacity: var(--md-filled-button-focus-state-layer-opacity, 0.12);--_hover-container-elevation: var(--md-filled-button-hover-container-elevation, 1);--_hover-label-text-color: var(--md-filled-button-hover-label-text-color, var(--md-sys-color-on-primary, #fff));--_hover-state-layer-color: var(--md-filled-button-hover-state-layer-color, var(--md-sys-color-on-primary, #fff));--_hover-state-layer-opacity: var(--md-filled-button-hover-state-layer-opacity, 0.08);--_label-text-color: var(--md-filled-button-label-text-color, var(--md-sys-color-on-primary, #fff));--_label-text-type: var(--md-filled-button-label-text-type, 500 0.875rem / 1.25rem Roboto);--_pressed-container-elevation: var(--md-filled-button-pressed-container-elevation, 0);--_pressed-label-text-color: var(--md-filled-button-pressed-label-text-color, var(--md-sys-color-on-primary, #fff));--_pressed-state-layer-color: var(--md-filled-button-pressed-state-layer-color, var(--md-sys-color-on-primary, #fff));--_pressed-state-layer-opacity: var(--md-filled-button-pressed-state-layer-opacity, 0.12);--_with-icon-disabled-icon-color: var(--md-filled-button-with-icon-disabled-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_with-icon-disabled-icon-opacity: var(--md-filled-button-with-icon-disabled-icon-opacity, 0.38);--_with-icon-focus-icon-color: var(--md-filled-button-with-icon-focus-icon-color, var(--md-sys-color-on-primary, #fff));--_with-icon-hover-icon-color: var(--md-filled-button-with-icon-hover-icon-color, var(--md-sys-color-on-primary, #fff));--_with-icon-icon-color: var(--md-filled-button-with-icon-icon-color, var(--md-sys-color-on-primary, #fff));--_with-icon-icon-size: var(--md-filled-button-with-icon-icon-size, 18px);--_with-icon-pressed-icon-color: var(--md-filled-button-with-icon-pressed-icon-color, var(--md-sys-color-on-primary, #fff));--_spacing-leading: var(--md-filled-button-spacing-leading, 24px);--_spacing-trailing: var(--md-filled-button-spacing-trailing, 24px);--_with-icon-spacing-leading: var(--md-filled-button-with-icon-spacing-leading, 16px);--_with-icon-spacing-trailing: var(--md-filled-button-with-icon-spacing-trailing, 24px);--_with-trailing-icon-spacing-leading: var(--md-filled-button-with-trailing-icon-spacing-leading, 24px);--_with-trailing-icon-spacing-trailing: var(--md-filled-button-with-trailing-icon-spacing-trailing, 16px)}/*# sourceMappingURL=filled-styles.css.map */\n`;\n "]}
1
+ {"version":3,"file":"filled-styles.css.js","sourceRoot":"","sources":["filled-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n import {css} from 'lit';\n export const styles = css`:host{--_container-shape-start-start: var(--md-filled-button-container-shape-start-start, var(--md-filled-button-container-shape, 9999px));--_container-shape-start-end: var(--md-filled-button-container-shape-start-end, var(--md-filled-button-container-shape, 9999px));--_container-shape-end-end: var(--md-filled-button-container-shape-end-end, var(--md-filled-button-container-shape, 9999px));--_container-shape-end-start: var(--md-filled-button-container-shape-end-start, var(--md-filled-button-container-shape, 9999px));--_container-color: var(--md-filled-button-container-color, var(--md-sys-color-primary, #6750a4));--_container-elevation: var(--md-filled-button-container-elevation, 0);--_container-height: var(--md-filled-button-container-height, 40px);--_container-shadow-color: var(--md-filled-button-container-shadow-color, var(--md-sys-color-shadow, #000));--_disabled-container-color: var(--md-filled-button-disabled-container-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-container-elevation: var(--md-filled-button-disabled-container-elevation, 0);--_disabled-container-opacity: var(--md-filled-button-disabled-container-opacity, 0.12);--_disabled-label-text-color: var(--md-filled-button-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-opacity: var(--md-filled-button-disabled-label-text-opacity, 0.38);--_focus-container-elevation: var(--md-filled-button-focus-container-elevation, 0);--_focus-label-text-color: var(--md-filled-button-focus-label-text-color, var(--md-sys-color-on-primary, #fff));--_focus-state-layer-color: var(--md-filled-button-focus-state-layer-color, var(--md-sys-color-on-primary, #fff));--_focus-state-layer-opacity: var(--md-filled-button-focus-state-layer-opacity, 0.12);--_hover-container-elevation: var(--md-filled-button-hover-container-elevation, 1);--_hover-label-text-color: var(--md-filled-button-hover-label-text-color, var(--md-sys-color-on-primary, #fff));--_hover-state-layer-color: var(--md-filled-button-hover-state-layer-color, var(--md-sys-color-on-primary, #fff));--_hover-state-layer-opacity: var(--md-filled-button-hover-state-layer-opacity, 0.08);--_label-text-color: var(--md-filled-button-label-text-color, var(--md-sys-color-on-primary, #fff));--_label-text-type: var(--md-filled-button-label-text-type, var(--md-sys-typescale-label-large, 500 0.875rem / 1.25rem var(--md-ref-typeface-plain, Roboto)));--_pressed-container-elevation: var(--md-filled-button-pressed-container-elevation, 0);--_pressed-label-text-color: var(--md-filled-button-pressed-label-text-color, var(--md-sys-color-on-primary, #fff));--_pressed-state-layer-color: var(--md-filled-button-pressed-state-layer-color, var(--md-sys-color-on-primary, #fff));--_pressed-state-layer-opacity: var(--md-filled-button-pressed-state-layer-opacity, 0.12);--_with-icon-disabled-icon-color: var(--md-filled-button-with-icon-disabled-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_with-icon-disabled-icon-opacity: var(--md-filled-button-with-icon-disabled-icon-opacity, 0.38);--_with-icon-focus-icon-color: var(--md-filled-button-with-icon-focus-icon-color, var(--md-sys-color-on-primary, #fff));--_with-icon-hover-icon-color: var(--md-filled-button-with-icon-hover-icon-color, var(--md-sys-color-on-primary, #fff));--_with-icon-icon-color: var(--md-filled-button-with-icon-icon-color, var(--md-sys-color-on-primary, #fff));--_with-icon-icon-size: var(--md-filled-button-with-icon-icon-size, 18px);--_with-icon-pressed-icon-color: var(--md-filled-button-with-icon-pressed-icon-color, var(--md-sys-color-on-primary, #fff));--_spacing-leading: var(--md-filled-button-spacing-leading, 24px);--_spacing-trailing: var(--md-filled-button-spacing-trailing, 24px);--_with-icon-spacing-leading: var(--md-filled-button-with-icon-spacing-leading, 16px);--_with-icon-spacing-trailing: var(--md-filled-button-with-icon-spacing-trailing, 24px);--_with-trailing-icon-spacing-leading: var(--md-filled-button-with-trailing-icon-spacing-leading, 24px);--_with-trailing-icon-spacing-trailing: var(--md-filled-button-with-trailing-icon-spacing-trailing, 16px)}/*# sourceMappingURL=filled-styles.css.map */\n`;\n "]}
@@ -6,6 +6,9 @@
6
6
  import { TemplateResult } from 'lit';
7
7
  import { ClassInfo } from 'lit/directives/class-map.js';
8
8
  import { Button } from './button.js';
9
+ /**
10
+ * An outlined button component.
11
+ */
9
12
  export declare class OutlinedButton extends Button {
10
13
  protected getRenderClasses(): ClassInfo;
11
14
  protected renderOutline(): TemplateResult;
@@ -5,7 +5,9 @@
5
5
  */
6
6
  import { html } from 'lit';
7
7
  import { Button } from './button.js';
8
- // tslint:disable-next-line:enforce-comments-on-exported-symbols
8
+ /**
9
+ * An outlined button component.
10
+ */
9
11
  export class OutlinedButton extends Button {
10
12
  getRenderClasses() {
11
13
  return {
@@ -1 +1 @@
1
- {"version":3,"file":"outlined-button.js","sourceRoot":"","sources":["outlined-button.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,IAAI,EAAiB,MAAM,KAAK,CAAC;AAGzC,OAAO,EAAC,MAAM,EAAC,MAAM,aAAa,CAAC;AAEnC,gEAAgE;AAChE,MAAM,OAAO,cAAe,SAAQ,MAAM;IACrB,gBAAgB;QACjC,OAAO;YACL,GAAG,KAAK,CAAC,gBAAgB,EAAE;YAC3B,sBAAsB,EAAE,IAAI;SAC7B,CAAC;IACJ,CAAC;IAEkB,aAAa;QAC9B,OAAO,IAAI,CAAA,2CAA2C,CAAC;IACzD,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2021 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 {Button} from './button.js';\n\n// tslint:disable-next-line:enforce-comments-on-exported-symbols\nexport class OutlinedButton extends Button {\n protected override getRenderClasses(): ClassInfo {\n return {\n ...super.getRenderClasses(),\n 'md3-button--outlined': true,\n };\n }\n\n protected override renderOutline(): TemplateResult {\n return html`<span class=\"md3-button__outline\"></span>`;\n }\n}\n"]}
1
+ {"version":3,"file":"outlined-button.js","sourceRoot":"","sources":["outlined-button.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,IAAI,EAAiB,MAAM,KAAK,CAAC;AAGzC,OAAO,EAAC,MAAM,EAAC,MAAM,aAAa,CAAC;AAEnC;;GAEG;AACH,MAAM,OAAO,cAAe,SAAQ,MAAM;IACrB,gBAAgB;QACjC,OAAO;YACL,GAAG,KAAK,CAAC,gBAAgB,EAAE;YAC3B,sBAAsB,EAAE,IAAI;SAC7B,CAAC;IACJ,CAAC;IAEkB,aAAa;QAC9B,OAAO,IAAI,CAAA,2CAA2C,CAAC;IACzD,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2021 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 {Button} from './button.js';\n\n/**\n * An outlined button component.\n */\nexport class OutlinedButton extends Button {\n protected override getRenderClasses(): ClassInfo {\n return {\n ...super.getRenderClasses(),\n 'md3-button--outlined': true,\n };\n }\n\n protected override renderOutline(): TemplateResult {\n return html`<span class=\"md3-button__outline\"></span>`;\n }\n}\n"]}
@@ -4,6 +4,6 @@
4
4
  * SPDX-License-Identifier: Apache-2.0
5
5
  */
6
6
  import { css } from 'lit';
7
- export const styles = css `:host{--_container-shape-start-start: var(--md-outlined-button-container-shape-start-start, var(--md-outlined-button-container-shape, 9999px));--_container-shape-start-end: var(--md-outlined-button-container-shape-start-end, var(--md-outlined-button-container-shape, 9999px));--_container-shape-end-end: var(--md-outlined-button-container-shape-end-end, var(--md-outlined-button-container-shape, 9999px));--_container-shape-end-start: var(--md-outlined-button-container-shape-end-start, var(--md-outlined-button-container-shape, 9999px));--_container-height: var(--md-outlined-button-container-height, 40px);--_disabled-label-text-color: var(--md-outlined-button-disabled-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-label-text-opacity: var(--md-outlined-button-disabled-label-text-opacity, 0.38);--_disabled-outline-color: var(--md-outlined-button-disabled-outline-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-outline-opacity: var(--md-outlined-button-disabled-outline-opacity, 0.12);--_focus-label-text-color: var(--md-outlined-button-focus-label-text-color, var(--md-sys-color-primary, #6750a4));--_focus-outline-color: var(--md-outlined-button-focus-outline-color, var(--md-sys-color-primary, #6750a4));--_focus-state-layer-color: var(--md-outlined-button-focus-state-layer-color, var(--md-sys-color-primary, #6750a4));--_focus-state-layer-opacity: var(--md-outlined-button-focus-state-layer-opacity, 0.12);--_hover-label-text-color: var(--md-outlined-button-hover-label-text-color, var(--md-sys-color-primary, #6750a4));--_hover-outline-color: var(--md-outlined-button-hover-outline-color, var(--md-sys-color-outline, #79747e));--_hover-state-layer-color: var(--md-outlined-button-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-opacity: var(--md-outlined-button-hover-state-layer-opacity, 0.08);--_label-text-color: var(--md-outlined-button-label-text-color, var(--md-sys-color-primary, #6750a4));--_label-text-type: var(--md-outlined-button-label-text-type, 500 0.875rem / 1.25rem Roboto);--_outline-color: var(--md-outlined-button-outline-color, var(--md-sys-color-outline, #79747e));--_outline-width: var(--md-outlined-button-outline-width, 1px);--_pressed-label-text-color: var(--md-outlined-button-pressed-label-text-color, var(--md-sys-color-primary, #6750a4));--_pressed-outline-color: var(--md-outlined-button-pressed-outline-color, var(--md-sys-color-outline, #79747e));--_pressed-state-layer-color: var(--md-outlined-button-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-opacity: var(--md-outlined-button-pressed-state-layer-opacity, 0.12);--_with-icon-disabled-icon-color: var(--md-outlined-button-with-icon-disabled-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_with-icon-disabled-icon-opacity: var(--md-outlined-button-with-icon-disabled-icon-opacity, 0.38);--_with-icon-focus-icon-color: var(--md-outlined-button-with-icon-focus-icon-color, var(--md-sys-color-primary, #6750a4));--_with-icon-hover-icon-color: var(--md-outlined-button-with-icon-hover-icon-color, var(--md-sys-color-primary, #6750a4));--_with-icon-icon-color: var(--md-outlined-button-with-icon-icon-color, var(--md-sys-color-primary, #6750a4));--_with-icon-icon-size: var(--md-outlined-button-with-icon-icon-size, 18px);--_with-icon-pressed-icon-color: var(--md-outlined-button-with-icon-pressed-icon-color, var(--md-sys-color-primary, #6750a4));--_spacing-leading: var(--md-outlined-button-spacing-leading, 24px);--_spacing-trailing: var(--md-outlined-button-spacing-trailing, 24px);--_with-icon-spacing-leading: var(--md-outlined-button-with-icon-spacing-leading, 16px);--_with-icon-spacing-trailing: var(--md-outlined-button-with-icon-spacing-trailing, 24px);--_with-trailing-icon-spacing-leading: var(--md-outlined-button-with-trailing-icon-spacing-leading, 24px);--_with-trailing-icon-spacing-trailing: var(--md-outlined-button-with-trailing-icon-spacing-trailing, 16px)}.md3-button__outline{inset:0;border-style:solid;position:absolute;box-sizing:border-box;border-color:var(--_outline-color);border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-start-radius:var(--_container-shape-end-start);border-end-end-radius:var(--_container-shape-end-end)}.md3-button:active .md3-button__outline{border-color:var(--_pressed-outline-color)}.md3-button:disabled .md3-button__outline{border-color:var(--_disabled-outline-color);opacity:var(--_disabled-outline-opacity)}.md3-button__outline,.md3-button__ripple{border-width:var(--_outline-width)}.md3-button__ripple{inline-size:calc(100% - 2*var(--_outline-width));block-size:calc(100% - 2*var(--_outline-width));border-style:solid;border-color:rgba(0,0,0,0)}/*# sourceMappingURL=outlined-styles.css.map */
7
+ export const styles = css `:host{--_container-shape-start-start: var(--md-outlined-button-container-shape-start-start, var(--md-outlined-button-container-shape, 9999px));--_container-shape-start-end: var(--md-outlined-button-container-shape-start-end, var(--md-outlined-button-container-shape, 9999px));--_container-shape-end-end: var(--md-outlined-button-container-shape-end-end, var(--md-outlined-button-container-shape, 9999px));--_container-shape-end-start: var(--md-outlined-button-container-shape-end-start, var(--md-outlined-button-container-shape, 9999px));--_container-height: var(--md-outlined-button-container-height, 40px);--_disabled-label-text-color: var(--md-outlined-button-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-opacity: var(--md-outlined-button-disabled-label-text-opacity, 0.38);--_disabled-outline-color: var(--md-outlined-button-disabled-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-outline-opacity: var(--md-outlined-button-disabled-outline-opacity, 0.12);--_focus-label-text-color: var(--md-outlined-button-focus-label-text-color, var(--md-sys-color-primary, #6750a4));--_focus-outline-color: var(--md-outlined-button-focus-outline-color, var(--md-sys-color-primary, #6750a4));--_focus-state-layer-color: var(--md-outlined-button-focus-state-layer-color, var(--md-sys-color-primary, #6750a4));--_focus-state-layer-opacity: var(--md-outlined-button-focus-state-layer-opacity, 0.12);--_hover-label-text-color: var(--md-outlined-button-hover-label-text-color, var(--md-sys-color-primary, #6750a4));--_hover-outline-color: var(--md-outlined-button-hover-outline-color, var(--md-sys-color-outline, #79747e));--_hover-state-layer-color: var(--md-outlined-button-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-opacity: var(--md-outlined-button-hover-state-layer-opacity, 0.08);--_label-text-color: var(--md-outlined-button-label-text-color, var(--md-sys-color-primary, #6750a4));--_label-text-type: var(--md-outlined-button-label-text-type, var(--md-sys-typescale-label-large, 500 0.875rem / 1.25rem var(--md-ref-typeface-plain, Roboto)));--_outline-color: var(--md-outlined-button-outline-color, var(--md-sys-color-outline, #79747e));--_outline-width: var(--md-outlined-button-outline-width, 1px);--_pressed-label-text-color: var(--md-outlined-button-pressed-label-text-color, var(--md-sys-color-primary, #6750a4));--_pressed-outline-color: var(--md-outlined-button-pressed-outline-color, var(--md-sys-color-outline, #79747e));--_pressed-state-layer-color: var(--md-outlined-button-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-opacity: var(--md-outlined-button-pressed-state-layer-opacity, 0.12);--_with-icon-disabled-icon-color: var(--md-outlined-button-with-icon-disabled-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_with-icon-disabled-icon-opacity: var(--md-outlined-button-with-icon-disabled-icon-opacity, 0.38);--_with-icon-focus-icon-color: var(--md-outlined-button-with-icon-focus-icon-color, var(--md-sys-color-primary, #6750a4));--_with-icon-hover-icon-color: var(--md-outlined-button-with-icon-hover-icon-color, var(--md-sys-color-primary, #6750a4));--_with-icon-icon-color: var(--md-outlined-button-with-icon-icon-color, var(--md-sys-color-primary, #6750a4));--_with-icon-icon-size: var(--md-outlined-button-with-icon-icon-size, 18px);--_with-icon-pressed-icon-color: var(--md-outlined-button-with-icon-pressed-icon-color, var(--md-sys-color-primary, #6750a4));--_spacing-leading: var(--md-outlined-button-spacing-leading, 24px);--_spacing-trailing: var(--md-outlined-button-spacing-trailing, 24px);--_with-icon-spacing-leading: var(--md-outlined-button-with-icon-spacing-leading, 16px);--_with-icon-spacing-trailing: var(--md-outlined-button-with-icon-spacing-trailing, 24px);--_with-trailing-icon-spacing-leading: var(--md-outlined-button-with-trailing-icon-spacing-leading, 24px);--_with-trailing-icon-spacing-trailing: var(--md-outlined-button-with-trailing-icon-spacing-trailing, 16px)}.md3-button__outline{inset:0;border-style:solid;position:absolute;box-sizing:border-box;border-color:var(--_outline-color);border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-start-radius:var(--_container-shape-end-start);border-end-end-radius:var(--_container-shape-end-end)}.md3-button:active .md3-button__outline{border-color:var(--_pressed-outline-color)}.md3-button:disabled .md3-button__outline{border-color:var(--_disabled-outline-color);opacity:var(--_disabled-outline-opacity)}.md3-button__outline,.md3-button__ripple{border-width:var(--_outline-width)}.md3-button__ripple{inline-size:calc(100% - 2*var(--_outline-width));block-size:calc(100% - 2*var(--_outline-width));border-style:solid;border-color:rgba(0,0,0,0)}/*# sourceMappingURL=outlined-styles.css.map */
8
8
  `;
9
9
  //# sourceMappingURL=outlined-styles.css.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"outlined-styles.css.js","sourceRoot":"","sources":["outlined-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n import {css} from 'lit';\n export const styles = css`:host{--_container-shape-start-start: var(--md-outlined-button-container-shape-start-start, var(--md-outlined-button-container-shape, 9999px));--_container-shape-start-end: var(--md-outlined-button-container-shape-start-end, var(--md-outlined-button-container-shape, 9999px));--_container-shape-end-end: var(--md-outlined-button-container-shape-end-end, var(--md-outlined-button-container-shape, 9999px));--_container-shape-end-start: var(--md-outlined-button-container-shape-end-start, var(--md-outlined-button-container-shape, 9999px));--_container-height: var(--md-outlined-button-container-height, 40px);--_disabled-label-text-color: var(--md-outlined-button-disabled-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-label-text-opacity: var(--md-outlined-button-disabled-label-text-opacity, 0.38);--_disabled-outline-color: var(--md-outlined-button-disabled-outline-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-outline-opacity: var(--md-outlined-button-disabled-outline-opacity, 0.12);--_focus-label-text-color: var(--md-outlined-button-focus-label-text-color, var(--md-sys-color-primary, #6750a4));--_focus-outline-color: var(--md-outlined-button-focus-outline-color, var(--md-sys-color-primary, #6750a4));--_focus-state-layer-color: var(--md-outlined-button-focus-state-layer-color, var(--md-sys-color-primary, #6750a4));--_focus-state-layer-opacity: var(--md-outlined-button-focus-state-layer-opacity, 0.12);--_hover-label-text-color: var(--md-outlined-button-hover-label-text-color, var(--md-sys-color-primary, #6750a4));--_hover-outline-color: var(--md-outlined-button-hover-outline-color, var(--md-sys-color-outline, #79747e));--_hover-state-layer-color: var(--md-outlined-button-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-opacity: var(--md-outlined-button-hover-state-layer-opacity, 0.08);--_label-text-color: var(--md-outlined-button-label-text-color, var(--md-sys-color-primary, #6750a4));--_label-text-type: var(--md-outlined-button-label-text-type, 500 0.875rem / 1.25rem Roboto);--_outline-color: var(--md-outlined-button-outline-color, var(--md-sys-color-outline, #79747e));--_outline-width: var(--md-outlined-button-outline-width, 1px);--_pressed-label-text-color: var(--md-outlined-button-pressed-label-text-color, var(--md-sys-color-primary, #6750a4));--_pressed-outline-color: var(--md-outlined-button-pressed-outline-color, var(--md-sys-color-outline, #79747e));--_pressed-state-layer-color: var(--md-outlined-button-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-opacity: var(--md-outlined-button-pressed-state-layer-opacity, 0.12);--_with-icon-disabled-icon-color: var(--md-outlined-button-with-icon-disabled-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_with-icon-disabled-icon-opacity: var(--md-outlined-button-with-icon-disabled-icon-opacity, 0.38);--_with-icon-focus-icon-color: var(--md-outlined-button-with-icon-focus-icon-color, var(--md-sys-color-primary, #6750a4));--_with-icon-hover-icon-color: var(--md-outlined-button-with-icon-hover-icon-color, var(--md-sys-color-primary, #6750a4));--_with-icon-icon-color: var(--md-outlined-button-with-icon-icon-color, var(--md-sys-color-primary, #6750a4));--_with-icon-icon-size: var(--md-outlined-button-with-icon-icon-size, 18px);--_with-icon-pressed-icon-color: var(--md-outlined-button-with-icon-pressed-icon-color, var(--md-sys-color-primary, #6750a4));--_spacing-leading: var(--md-outlined-button-spacing-leading, 24px);--_spacing-trailing: var(--md-outlined-button-spacing-trailing, 24px);--_with-icon-spacing-leading: var(--md-outlined-button-with-icon-spacing-leading, 16px);--_with-icon-spacing-trailing: var(--md-outlined-button-with-icon-spacing-trailing, 24px);--_with-trailing-icon-spacing-leading: var(--md-outlined-button-with-trailing-icon-spacing-leading, 24px);--_with-trailing-icon-spacing-trailing: var(--md-outlined-button-with-trailing-icon-spacing-trailing, 16px)}.md3-button__outline{inset:0;border-style:solid;position:absolute;box-sizing:border-box;border-color:var(--_outline-color);border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-start-radius:var(--_container-shape-end-start);border-end-end-radius:var(--_container-shape-end-end)}.md3-button:active .md3-button__outline{border-color:var(--_pressed-outline-color)}.md3-button:disabled .md3-button__outline{border-color:var(--_disabled-outline-color);opacity:var(--_disabled-outline-opacity)}.md3-button__outline,.md3-button__ripple{border-width:var(--_outline-width)}.md3-button__ripple{inline-size:calc(100% - 2*var(--_outline-width));block-size:calc(100% - 2*var(--_outline-width));border-style:solid;border-color:rgba(0,0,0,0)}/*# sourceMappingURL=outlined-styles.css.map */\n`;\n "]}
1
+ {"version":3,"file":"outlined-styles.css.js","sourceRoot":"","sources":["outlined-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n import {css} from 'lit';\n export const styles = css`:host{--_container-shape-start-start: var(--md-outlined-button-container-shape-start-start, var(--md-outlined-button-container-shape, 9999px));--_container-shape-start-end: var(--md-outlined-button-container-shape-start-end, var(--md-outlined-button-container-shape, 9999px));--_container-shape-end-end: var(--md-outlined-button-container-shape-end-end, var(--md-outlined-button-container-shape, 9999px));--_container-shape-end-start: var(--md-outlined-button-container-shape-end-start, var(--md-outlined-button-container-shape, 9999px));--_container-height: var(--md-outlined-button-container-height, 40px);--_disabled-label-text-color: var(--md-outlined-button-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-opacity: var(--md-outlined-button-disabled-label-text-opacity, 0.38);--_disabled-outline-color: var(--md-outlined-button-disabled-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-outline-opacity: var(--md-outlined-button-disabled-outline-opacity, 0.12);--_focus-label-text-color: var(--md-outlined-button-focus-label-text-color, var(--md-sys-color-primary, #6750a4));--_focus-outline-color: var(--md-outlined-button-focus-outline-color, var(--md-sys-color-primary, #6750a4));--_focus-state-layer-color: var(--md-outlined-button-focus-state-layer-color, var(--md-sys-color-primary, #6750a4));--_focus-state-layer-opacity: var(--md-outlined-button-focus-state-layer-opacity, 0.12);--_hover-label-text-color: var(--md-outlined-button-hover-label-text-color, var(--md-sys-color-primary, #6750a4));--_hover-outline-color: var(--md-outlined-button-hover-outline-color, var(--md-sys-color-outline, #79747e));--_hover-state-layer-color: var(--md-outlined-button-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-opacity: var(--md-outlined-button-hover-state-layer-opacity, 0.08);--_label-text-color: var(--md-outlined-button-label-text-color, var(--md-sys-color-primary, #6750a4));--_label-text-type: var(--md-outlined-button-label-text-type, var(--md-sys-typescale-label-large, 500 0.875rem / 1.25rem var(--md-ref-typeface-plain, Roboto)));--_outline-color: var(--md-outlined-button-outline-color, var(--md-sys-color-outline, #79747e));--_outline-width: var(--md-outlined-button-outline-width, 1px);--_pressed-label-text-color: var(--md-outlined-button-pressed-label-text-color, var(--md-sys-color-primary, #6750a4));--_pressed-outline-color: var(--md-outlined-button-pressed-outline-color, var(--md-sys-color-outline, #79747e));--_pressed-state-layer-color: var(--md-outlined-button-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-opacity: var(--md-outlined-button-pressed-state-layer-opacity, 0.12);--_with-icon-disabled-icon-color: var(--md-outlined-button-with-icon-disabled-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_with-icon-disabled-icon-opacity: var(--md-outlined-button-with-icon-disabled-icon-opacity, 0.38);--_with-icon-focus-icon-color: var(--md-outlined-button-with-icon-focus-icon-color, var(--md-sys-color-primary, #6750a4));--_with-icon-hover-icon-color: var(--md-outlined-button-with-icon-hover-icon-color, var(--md-sys-color-primary, #6750a4));--_with-icon-icon-color: var(--md-outlined-button-with-icon-icon-color, var(--md-sys-color-primary, #6750a4));--_with-icon-icon-size: var(--md-outlined-button-with-icon-icon-size, 18px);--_with-icon-pressed-icon-color: var(--md-outlined-button-with-icon-pressed-icon-color, var(--md-sys-color-primary, #6750a4));--_spacing-leading: var(--md-outlined-button-spacing-leading, 24px);--_spacing-trailing: var(--md-outlined-button-spacing-trailing, 24px);--_with-icon-spacing-leading: var(--md-outlined-button-with-icon-spacing-leading, 16px);--_with-icon-spacing-trailing: var(--md-outlined-button-with-icon-spacing-trailing, 24px);--_with-trailing-icon-spacing-leading: var(--md-outlined-button-with-trailing-icon-spacing-leading, 24px);--_with-trailing-icon-spacing-trailing: var(--md-outlined-button-with-trailing-icon-spacing-trailing, 16px)}.md3-button__outline{inset:0;border-style:solid;position:absolute;box-sizing:border-box;border-color:var(--_outline-color);border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-start-radius:var(--_container-shape-end-start);border-end-end-radius:var(--_container-shape-end-end)}.md3-button:active .md3-button__outline{border-color:var(--_pressed-outline-color)}.md3-button:disabled .md3-button__outline{border-color:var(--_disabled-outline-color);opacity:var(--_disabled-outline-opacity)}.md3-button__outline,.md3-button__ripple{border-width:var(--_outline-width)}.md3-button__ripple{inline-size:calc(100% - 2*var(--_outline-width));block-size:calc(100% - 2*var(--_outline-width));border-style:solid;border-color:rgba(0,0,0,0)}/*# sourceMappingURL=outlined-styles.css.map */\n`;\n "]}
@@ -4,6 +4,6 @@
4
4
  * SPDX-License-Identifier: Apache-2.0
5
5
  */
6
6
  import { css } from 'lit';
7
- export const styles = css `md-elevation{inset:0;position:absolute}.md3-button{--md-elevation-duration:280ms;--md-elevation-level:var(--_container-elevation);--md-elevation-shadow-color:var(--_container-shadow-color);--md-elevation-surface-tint:var(--_container-surface-tint-layer-color)}.md3-button:focus{--md-elevation-level:var(--_focus-container-elevation)}.md3-button:hover{--md-elevation-level:var(--_hover-container-elevation)}.md3-button:active{--md-elevation-level:var(--_pressed-container-elevation)}.md3-button:disabled{--md-elevation-level:var(--_disabled-container-elevation)}/*# sourceMappingURL=shared-elevation-styles.css.map */
7
+ export const styles = css `.md3-button{--md-elevation-duration:280ms;--md-elevation-level:var(--_container-elevation);--md-elevation-shadow-color:var(--_container-shadow-color)}.md3-button:focus{--md-elevation-level:var(--_focus-container-elevation)}.md3-button:hover{--md-elevation-level:var(--_hover-container-elevation)}.md3-button:active{--md-elevation-level:var(--_pressed-container-elevation)}.md3-button:disabled{--md-elevation-level:var(--_disabled-container-elevation)}/*# sourceMappingURL=shared-elevation-styles.css.map */
8
8
  `;
9
9
  //# sourceMappingURL=shared-elevation-styles.css.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"shared-elevation-styles.css.js","sourceRoot":"","sources":["shared-elevation-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n import {css} from 'lit';\n export const styles = css`md-elevation{inset:0;position:absolute}.md3-button{--md-elevation-duration:280ms;--md-elevation-level:var(--_container-elevation);--md-elevation-shadow-color:var(--_container-shadow-color);--md-elevation-surface-tint:var(--_container-surface-tint-layer-color)}.md3-button:focus{--md-elevation-level:var(--_focus-container-elevation)}.md3-button:hover{--md-elevation-level:var(--_hover-container-elevation)}.md3-button:active{--md-elevation-level:var(--_pressed-container-elevation)}.md3-button:disabled{--md-elevation-level:var(--_disabled-container-elevation)}/*# sourceMappingURL=shared-elevation-styles.css.map */\n`;\n "]}
1
+ {"version":3,"file":"shared-elevation-styles.css.js","sourceRoot":"","sources":["shared-elevation-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n import {css} from 'lit';\n export const styles = css`.md3-button{--md-elevation-duration:280ms;--md-elevation-level:var(--_container-elevation);--md-elevation-shadow-color:var(--_container-shadow-color)}.md3-button:focus{--md-elevation-level:var(--_focus-container-elevation)}.md3-button:hover{--md-elevation-level:var(--_hover-container-elevation)}.md3-button:active{--md-elevation-level:var(--_pressed-container-elevation)}.md3-button:disabled{--md-elevation-level:var(--_disabled-container-elevation)}/*# sourceMappingURL=shared-elevation-styles.css.map */\n`;\n "]}