@api-client/ui 0.2.13 → 0.3.1

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 (326) hide show
  1. package/.vscode/settings.json +1 -0
  2. package/build/src/core/ModalActivity.d.ts +1 -1
  3. package/build/src/core/ModalActivity.d.ts.map +1 -1
  4. package/build/src/core/ModalActivity.js +6 -5
  5. package/build/src/core/ModalActivity.js.map +1 -1
  6. package/build/src/core/ThemeManager.d.ts +4 -2
  7. package/build/src/core/ThemeManager.d.ts.map +1 -1
  8. package/build/src/core/ThemeManager.js.map +1 -1
  9. package/build/src/demo/DemoPage.d.ts +1 -4
  10. package/build/src/demo/DemoPage.d.ts.map +1 -1
  11. package/build/src/demo/DemoPage.js +2 -5
  12. package/build/src/demo/DemoPage.js.map +1 -1
  13. package/build/src/elements/authorization/ui/CcAuthorization.d.ts +1 -1
  14. package/build/src/elements/authorization/ui/CcAuthorization.d.ts.map +1 -1
  15. package/build/src/elements/authorization/ui/CcAuthorization.js +2 -2
  16. package/build/src/elements/authorization/ui/CcAuthorization.js.map +1 -1
  17. package/build/src/elements/authorization/ui/OAuth2Authorization.d.ts +1 -1
  18. package/build/src/elements/authorization/ui/OAuth2Authorization.d.ts.map +1 -1
  19. package/build/src/elements/authorization/ui/OAuth2Authorization.js +11 -5
  20. package/build/src/elements/authorization/ui/OAuth2Authorization.js.map +1 -1
  21. package/build/src/elements/authorization/ui/OidcAuthorization.d.ts +1 -2
  22. package/build/src/elements/authorization/ui/OidcAuthorization.d.ts.map +1 -1
  23. package/build/src/elements/authorization/ui/OidcAuthorization.js +10 -8
  24. package/build/src/elements/authorization/ui/OidcAuthorization.js.map +1 -1
  25. package/build/src/elements/code/HttpSnippets.d.ts +1 -1
  26. package/build/src/elements/code/HttpSnippets.d.ts.map +1 -1
  27. package/build/src/elements/code/HttpSnippets.js +5 -5
  28. package/build/src/elements/code/HttpSnippets.js.map +1 -1
  29. package/build/src/elements/dialog/internals/ConfirmDelete.d.ts +1 -1
  30. package/build/src/elements/dialog/internals/ConfirmDelete.d.ts.map +1 -1
  31. package/build/src/elements/dialog/internals/ConfirmDelete.js +5 -5
  32. package/build/src/elements/dialog/internals/ConfirmDelete.js.map +1 -1
  33. package/build/src/elements/dialog/internals/Rename.d.ts +1 -1
  34. package/build/src/elements/dialog/internals/Rename.d.ts.map +1 -1
  35. package/build/src/elements/dialog/internals/Rename.js +6 -5
  36. package/build/src/elements/dialog/internals/Rename.js.map +1 -1
  37. package/build/src/elements/environment/EnvironmentEditor.d.ts +1 -1
  38. package/build/src/elements/environment/EnvironmentEditor.d.ts.map +1 -1
  39. package/build/src/elements/environment/EnvironmentEditor.js +5 -4
  40. package/build/src/elements/environment/EnvironmentEditor.js.map +1 -1
  41. package/build/src/elements/http/BodyEditor.d.ts +1 -3
  42. package/build/src/elements/http/BodyEditor.d.ts.map +1 -1
  43. package/build/src/elements/http/BodyEditor.js +25 -20
  44. package/build/src/elements/http/BodyEditor.js.map +1 -1
  45. package/build/src/elements/http/BodyMultipartEditor.d.ts +1 -1
  46. package/build/src/elements/http/BodyMultipartEditor.d.ts.map +1 -1
  47. package/build/src/elements/http/BodyMultipartEditor.js +3 -3
  48. package/build/src/elements/http/BodyMultipartEditor.js.map +1 -1
  49. package/build/src/elements/http/CertificateAdd.element.d.ts +1 -3
  50. package/build/src/elements/http/CertificateAdd.element.d.ts.map +1 -1
  51. package/build/src/elements/http/CertificateAdd.element.js +6 -10
  52. package/build/src/elements/http/CertificateAdd.element.js.map +1 -1
  53. package/build/src/elements/http/HeadersForm.d.ts +1 -1
  54. package/build/src/elements/http/HeadersForm.d.ts.map +1 -1
  55. package/build/src/elements/http/HeadersForm.js +3 -3
  56. package/build/src/elements/http/HeadersForm.js.map +1 -1
  57. package/build/src/elements/http/HttpAssertions.element.d.ts +1 -1
  58. package/build/src/elements/http/HttpAssertions.element.d.ts.map +1 -1
  59. package/build/src/elements/http/HttpAssertions.element.js +2 -2
  60. package/build/src/elements/http/HttpAssertions.element.js.map +1 -1
  61. package/build/src/elements/http/HttpFlows.element.d.ts +1 -1
  62. package/build/src/elements/http/HttpFlows.element.d.ts.map +1 -1
  63. package/build/src/elements/http/HttpFlows.element.js +6 -6
  64. package/build/src/elements/http/HttpFlows.element.js.map +1 -1
  65. package/build/src/elements/http/RequestEditor.d.ts +1 -3
  66. package/build/src/elements/http/RequestEditor.d.ts.map +1 -1
  67. package/build/src/elements/http/RequestEditor.js +10 -11
  68. package/build/src/elements/http/RequestEditor.js.map +1 -1
  69. package/build/src/elements/http/UrlParamsForm.d.ts +1 -1
  70. package/build/src/elements/http/UrlParamsForm.d.ts.map +1 -1
  71. package/build/src/elements/http/UrlParamsForm.js +4 -4
  72. package/build/src/elements/http/UrlParamsForm.js.map +1 -1
  73. package/build/src/elements/project/HttpProjectRequest.d.ts +1 -1
  74. package/build/src/elements/project/HttpProjectRequest.d.ts.map +1 -1
  75. package/build/src/elements/project/HttpProjectRequest.js +3 -3
  76. package/build/src/elements/project/HttpProjectRequest.js.map +1 -1
  77. package/build/src/elements/project/HttpProjectRequestHistory.d.ts +1 -2
  78. package/build/src/elements/project/HttpProjectRequestHistory.d.ts.map +1 -1
  79. package/build/src/elements/project/HttpProjectRequestHistory.js +5 -6
  80. package/build/src/elements/project/HttpProjectRequestHistory.js.map +1 -1
  81. package/build/src/elements/project/ProjectRunReport.d.ts +1 -1
  82. package/build/src/elements/project/ProjectRunReport.d.ts.map +1 -1
  83. package/build/src/elements/project/ProjectRunReport.js +7 -7
  84. package/build/src/elements/project/ProjectRunReport.js.map +1 -1
  85. package/build/src/elements/project/ProjectRunner.d.ts +1 -2
  86. package/build/src/elements/project/ProjectRunner.d.ts.map +1 -1
  87. package/build/src/elements/project/ProjectRunner.js +4 -5
  88. package/build/src/elements/project/ProjectRunner.js.map +1 -1
  89. package/build/src/md/button/internals/base.d.ts +98 -0
  90. package/build/src/md/button/internals/base.d.ts.map +1 -0
  91. package/build/src/md/button/internals/base.js +353 -0
  92. package/build/src/md/button/internals/base.js.map +1 -0
  93. package/build/src/md/button/internals/button.d.ts +7 -75
  94. package/build/src/md/button/internals/button.d.ts.map +1 -1
  95. package/build/src/md/button/internals/button.js +18 -247
  96. package/build/src/md/button/internals/button.js.map +1 -1
  97. package/build/src/md/button/internals/{button-styles.d.ts → button.styles.d.ts} +1 -1
  98. package/build/src/md/button/internals/button.styles.d.ts.map +1 -0
  99. package/build/src/md/button/internals/button.styles.js +319 -0
  100. package/build/src/md/button/internals/button.styles.js.map +1 -0
  101. package/build/src/md/button/internals/group.d.ts +54 -0
  102. package/build/src/md/button/internals/group.d.ts.map +1 -0
  103. package/build/src/md/button/internals/group.js +157 -0
  104. package/build/src/md/button/internals/group.js.map +1 -0
  105. package/build/src/md/button/internals/{text-button.styles.d.ts → group.styles.d.ts} +1 -1
  106. package/build/src/md/button/internals/group.styles.d.ts.map +1 -0
  107. package/build/src/md/button/internals/group.styles.js +102 -0
  108. package/build/src/md/button/internals/group.styles.js.map +1 -0
  109. package/build/src/md/button/ui-button-group.d.ts +11 -0
  110. package/build/src/md/button/ui-button-group.d.ts.map +1 -0
  111. package/build/src/md/{icon-button/ui-filled-icon-button.js → button/ui-button-group.js} +10 -11
  112. package/build/src/md/button/ui-button-group.js.map +1 -0
  113. package/build/src/md/button/ui-button.d.ts +14 -0
  114. package/build/src/md/button/ui-button.d.ts.map +1 -0
  115. package/build/src/md/button/{ui-text-button.js → ui-button.js} +10 -11
  116. package/build/src/md/button/ui-button.js.map +1 -0
  117. package/build/src/md/dialog/internals/Dialog.d.ts +5 -5
  118. package/build/src/md/dialog/internals/Dialog.d.ts.map +1 -1
  119. package/build/src/md/dialog/internals/Dialog.js +14 -9
  120. package/build/src/md/dialog/internals/Dialog.js.map +1 -1
  121. package/build/src/md/dropdown-list/internals/UiDropdownList.d.ts +1 -1
  122. package/build/src/md/dropdown-list/internals/UiDropdownList.js +1 -1
  123. package/build/src/md/dropdown-list/internals/UiDropdownList.js.map +1 -1
  124. package/build/src/md/icon-button/internals/IconButton.d.ts +12 -36
  125. package/build/src/md/icon-button/internals/IconButton.d.ts.map +1 -1
  126. package/build/src/md/icon-button/internals/IconButton.js +32 -144
  127. package/build/src/md/icon-button/internals/IconButton.js.map +1 -1
  128. package/build/src/md/{button/internals/filled-button.styles.d.ts → icon-button/internals/IconButton.styles.d.ts} +1 -1
  129. package/build/src/md/icon-button/internals/IconButton.styles.d.ts.map +1 -0
  130. package/build/src/md/icon-button/internals/IconButton.styles.js +286 -0
  131. package/build/src/md/icon-button/internals/IconButton.styles.js.map +1 -0
  132. package/build/src/md/icon-button/ui-icon-button.d.ts.map +1 -1
  133. package/build/src/md/icon-button/ui-icon-button.js +2 -3
  134. package/build/src/md/icon-button/ui-icon-button.js.map +1 -1
  135. package/build/src/md/input/Input.d.ts +4 -3
  136. package/build/src/md/input/Input.d.ts.map +1 -1
  137. package/build/src/md/input/Input.js +15 -11
  138. package/build/src/md/input/Input.js.map +1 -1
  139. package/build/src/md/ripple/internals/ripple.d.ts +2 -0
  140. package/build/src/md/ripple/internals/ripple.d.ts.map +1 -1
  141. package/build/src/md/ripple/internals/ripple.js +20 -10
  142. package/build/src/md/ripple/internals/ripple.js.map +1 -1
  143. package/build/src/md/ripple/internals/ripple.styles.d.ts.map +1 -1
  144. package/build/src/md/ripple/internals/ripple.styles.js +8 -20
  145. package/build/src/md/ripple/internals/ripple.styles.js.map +1 -1
  146. package/build/src/md/snackbar/internals/Snackbar.d.ts +1 -1
  147. package/build/src/md/snackbar/internals/Snackbar.d.ts.map +1 -1
  148. package/build/src/md/snackbar/internals/Snackbar.js +4 -2
  149. package/build/src/md/snackbar/internals/Snackbar.js.map +1 -1
  150. package/build/src/md/text-field/internals/common.styles.d.ts.map +1 -1
  151. package/build/src/md/text-field/internals/common.styles.js +11 -5
  152. package/build/src/md/text-field/internals/common.styles.js.map +1 -1
  153. package/build/src/md/text-field/internals/filled.styles.d.ts.map +1 -1
  154. package/build/src/md/text-field/internals/filled.styles.js +7 -0
  155. package/build/src/md/text-field/internals/filled.styles.js.map +1 -1
  156. package/build/src/md/text-field/internals/outlined.styles.d.ts.map +1 -1
  157. package/build/src/md/text-field/internals/outlined.styles.js +29 -9
  158. package/build/src/md/text-field/internals/outlined.styles.js.map +1 -1
  159. package/build/src/styles/m3/dialog.module.d.ts +2 -2
  160. package/build/src/styles/m3/dialog.module.js +2 -2
  161. package/build/src/styles/m3/dialog.module.js.map +1 -1
  162. package/build/src/styles/m3/tokens.d.ts.map +1 -1
  163. package/build/src/styles/m3/tokens.js +208 -182
  164. package/build/src/styles/m3/tokens.js.map +1 -1
  165. package/demo/elements/authorization/oauth-authorize.html +1 -1
  166. package/demo/elements/authorization/oauth-authorize.ts +1 -1
  167. package/demo/elements/environment/variables-editor.ts +2 -2
  168. package/demo/elements/http/url-editing.ts +3 -3
  169. package/demo/elements/project/request-editor.ts +4 -4
  170. package/demo/layout/index.ts +5 -5
  171. package/demo/md/buttons/button.html +121 -0
  172. package/demo/md/buttons/button.ts +246 -0
  173. package/demo/md/buttons/{index.html → group.html} +15 -2
  174. package/demo/md/buttons/group.ts +171 -0
  175. package/demo/md/checkbox/index.ts +1 -1
  176. package/demo/md/dialog/dialog.ts +8 -9
  177. package/demo/md/dropdown-list/index.ts +68 -71
  178. package/demo/md/icon-button/index.html +97 -7
  179. package/demo/md/icon-button/index.ts +97 -201
  180. package/demo/md/index.html +3 -1
  181. package/demo/md/inputs/input.html +39 -0
  182. package/demo/md/inputs/input.ts +204 -419
  183. package/demo/md/inputs/radio.ts +1 -1
  184. package/demo/md/inputs/switch.ts +1 -1
  185. package/demo/md/notification/snack.ts +5 -5
  186. package/demo/md/progress/progress.ts +4 -3
  187. package/package.json +2 -2
  188. package/src/core/ModalActivity.ts +6 -5
  189. package/src/core/ThemeManager.ts +5 -4
  190. package/src/demo/DemoPage.ts +2 -5
  191. package/src/elements/authorization/ui/CcAuthorization.ts +2 -2
  192. package/src/elements/authorization/ui/OAuth2Authorization.ts +11 -5
  193. package/src/elements/authorization/ui/OidcAuthorization.ts +10 -8
  194. package/src/elements/code/HttpSnippets.ts +5 -5
  195. package/src/elements/dialog/internals/ConfirmDelete.ts +5 -5
  196. package/src/elements/dialog/internals/Rename.ts +6 -5
  197. package/src/elements/environment/EnvironmentEditor.ts +5 -4
  198. package/src/elements/http/BodyEditor.ts +25 -20
  199. package/src/elements/http/BodyMultipartEditor.ts +3 -3
  200. package/src/elements/http/CertificateAdd.element.ts +6 -10
  201. package/src/elements/http/HeadersForm.ts +3 -3
  202. package/src/elements/http/HttpAssertions.element.ts +2 -2
  203. package/src/elements/http/HttpFlows.element.ts +6 -6
  204. package/src/elements/http/RequestEditor.ts +10 -11
  205. package/src/elements/http/UrlParamsForm.ts +4 -4
  206. package/src/elements/project/HttpProjectRequest.ts +3 -3
  207. package/src/elements/project/HttpProjectRequestHistory.ts +5 -6
  208. package/src/elements/project/ProjectRunReport.ts +7 -7
  209. package/src/elements/project/ProjectRunner.ts +4 -5
  210. package/src/md/button/internals/base.ts +299 -0
  211. package/src/md/button/internals/button.styles.ts +319 -0
  212. package/src/md/button/internals/button.ts +8 -234
  213. package/src/md/button/internals/group.styles.ts +102 -0
  214. package/src/md/button/internals/group.ts +121 -0
  215. package/src/md/button/ui-button-group.ts +15 -0
  216. package/src/md/button/ui-button.ts +18 -0
  217. package/src/md/dialog/internals/Dialog.ts +14 -9
  218. package/src/md/dropdown-list/internals/UiDropdownList.ts +1 -1
  219. package/src/md/icon-button/internals/IconButton.styles.ts +286 -0
  220. package/src/md/icon-button/internals/IconButton.ts +15 -139
  221. package/src/md/icon-button/ui-icon-button.ts +2 -3
  222. package/src/md/input/Input.ts +16 -11
  223. package/src/md/ripple/internals/ripple.styles.ts +8 -20
  224. package/src/md/ripple/internals/ripple.ts +21 -13
  225. package/src/md/snackbar/internals/Snackbar.ts +4 -2
  226. package/src/md/text-field/internals/common.styles.ts +11 -5
  227. package/src/md/text-field/internals/filled.styles.ts +7 -0
  228. package/src/md/text-field/internals/outlined.styles.ts +29 -9
  229. package/src/styles/m3/dialog.module.ts +2 -2
  230. package/src/styles/m3/native.css +270 -0
  231. package/src/styles/m3/tokens.css +208 -182
  232. package/src/styles/m3/tokens.ts +208 -182
  233. package/test/ui/button/UiButton.test.ts +51 -29
  234. package/test/ui/button/UiIconButton.test.ts +25 -19
  235. package/test/ui/dialog/UiDialog.test.ts +10 -10
  236. package/build/src/md/button/internals/button-styles.d.ts.map +0 -1
  237. package/build/src/md/button/internals/button-styles.js +0 -143
  238. package/build/src/md/button/internals/button-styles.js.map +0 -1
  239. package/build/src/md/button/internals/elevated-button.d.ts +0 -4
  240. package/build/src/md/button/internals/elevated-button.d.ts.map +0 -1
  241. package/build/src/md/button/internals/elevated-button.js +0 -4
  242. package/build/src/md/button/internals/elevated-button.js.map +0 -1
  243. package/build/src/md/button/internals/elevated-button.styles.d.ts +0 -3
  244. package/build/src/md/button/internals/elevated-button.styles.d.ts.map +0 -1
  245. package/build/src/md/button/internals/elevated-button.styles.js +0 -38
  246. package/build/src/md/button/internals/elevated-button.styles.js.map +0 -1
  247. package/build/src/md/button/internals/filled-button.d.ts +0 -4
  248. package/build/src/md/button/internals/filled-button.d.ts.map +0 -1
  249. package/build/src/md/button/internals/filled-button.js +0 -4
  250. package/build/src/md/button/internals/filled-button.js.map +0 -1
  251. package/build/src/md/button/internals/filled-button.styles.d.ts.map +0 -1
  252. package/build/src/md/button/internals/filled-button.styles.js +0 -30
  253. package/build/src/md/button/internals/filled-button.styles.js.map +0 -1
  254. package/build/src/md/button/internals/filled-tonal-button.d.ts +0 -4
  255. package/build/src/md/button/internals/filled-tonal-button.d.ts.map +0 -1
  256. package/build/src/md/button/internals/filled-tonal-button.js +0 -4
  257. package/build/src/md/button/internals/filled-tonal-button.js.map +0 -1
  258. package/build/src/md/button/internals/filled-tonal-button.styles.d.ts +0 -3
  259. package/build/src/md/button/internals/filled-tonal-button.styles.d.ts.map +0 -1
  260. package/build/src/md/button/internals/filled-tonal-button.styles.js +0 -30
  261. package/build/src/md/button/internals/filled-tonal-button.styles.js.map +0 -1
  262. package/build/src/md/button/internals/outlined-button.d.ts +0 -4
  263. package/build/src/md/button/internals/outlined-button.d.ts.map +0 -1
  264. package/build/src/md/button/internals/outlined-button.js +0 -4
  265. package/build/src/md/button/internals/outlined-button.js.map +0 -1
  266. package/build/src/md/button/internals/outlined-button.styles.d.ts +0 -3
  267. package/build/src/md/button/internals/outlined-button.styles.d.ts.map +0 -1
  268. package/build/src/md/button/internals/outlined-button.styles.js +0 -31
  269. package/build/src/md/button/internals/outlined-button.styles.js.map +0 -1
  270. package/build/src/md/button/internals/text-button.d.ts +0 -4
  271. package/build/src/md/button/internals/text-button.d.ts.map +0 -1
  272. package/build/src/md/button/internals/text-button.js +0 -4
  273. package/build/src/md/button/internals/text-button.js.map +0 -1
  274. package/build/src/md/button/internals/text-button.styles.d.ts.map +0 -1
  275. package/build/src/md/button/internals/text-button.styles.js +0 -30
  276. package/build/src/md/button/internals/text-button.styles.js.map +0 -1
  277. package/build/src/md/button/ui-elevated-button.d.ts +0 -14
  278. package/build/src/md/button/ui-elevated-button.d.ts.map +0 -1
  279. package/build/src/md/button/ui-elevated-button.js +0 -31
  280. package/build/src/md/button/ui-elevated-button.js.map +0 -1
  281. package/build/src/md/button/ui-filled-button.d.ts +0 -14
  282. package/build/src/md/button/ui-filled-button.d.ts.map +0 -1
  283. package/build/src/md/button/ui-filled-button.js +0 -31
  284. package/build/src/md/button/ui-filled-button.js.map +0 -1
  285. package/build/src/md/button/ui-filled-tonal-button.d.ts +0 -14
  286. package/build/src/md/button/ui-filled-tonal-button.d.ts.map +0 -1
  287. package/build/src/md/button/ui-filled-tonal-button.js +0 -31
  288. package/build/src/md/button/ui-filled-tonal-button.js.map +0 -1
  289. package/build/src/md/button/ui-outlined-button.d.ts +0 -14
  290. package/build/src/md/button/ui-outlined-button.d.ts.map +0 -1
  291. package/build/src/md/button/ui-outlined-button.js +0 -31
  292. package/build/src/md/button/ui-outlined-button.js.map +0 -1
  293. package/build/src/md/button/ui-text-button.d.ts +0 -14
  294. package/build/src/md/button/ui-text-button.d.ts.map +0 -1
  295. package/build/src/md/button/ui-text-button.js.map +0 -1
  296. package/build/src/md/icon-button/ui-filled-icon-button.d.ts +0 -11
  297. package/build/src/md/icon-button/ui-filled-icon-button.d.ts.map +0 -1
  298. package/build/src/md/icon-button/ui-filled-icon-button.js.map +0 -1
  299. package/build/src/md/icon-button/ui-filled-tonal-icon-button.d.ts +0 -11
  300. package/build/src/md/icon-button/ui-filled-tonal-icon-button.d.ts.map +0 -1
  301. package/build/src/md/icon-button/ui-filled-tonal-icon-button.js +0 -28
  302. package/build/src/md/icon-button/ui-filled-tonal-icon-button.js.map +0 -1
  303. package/build/src/md/icon-button/ui-outlined-icon-button.d.ts +0 -11
  304. package/build/src/md/icon-button/ui-outlined-icon-button.d.ts.map +0 -1
  305. package/build/src/md/icon-button/ui-outlined-icon-button.js +0 -28
  306. package/build/src/md/icon-button/ui-outlined-icon-button.js.map +0 -1
  307. package/demo/md/buttons/index.ts +0 -279
  308. package/src/md/button/internals/button-styles.ts +0 -143
  309. package/src/md/button/internals/elevated-button.styles.ts +0 -38
  310. package/src/md/button/internals/elevated-button.ts +0 -3
  311. package/src/md/button/internals/filled-button.styles.ts +0 -30
  312. package/src/md/button/internals/filled-button.ts +0 -3
  313. package/src/md/button/internals/filled-tonal-button.styles.ts +0 -30
  314. package/src/md/button/internals/filled-tonal-button.ts +0 -3
  315. package/src/md/button/internals/outlined-button.styles.ts +0 -31
  316. package/src/md/button/internals/outlined-button.ts +0 -3
  317. package/src/md/button/internals/text-button.styles.ts +0 -30
  318. package/src/md/button/internals/text-button.ts +0 -3
  319. package/src/md/button/ui-elevated-button.ts +0 -19
  320. package/src/md/button/ui-filled-button.ts +0 -19
  321. package/src/md/button/ui-filled-tonal-button.ts +0 -19
  322. package/src/md/button/ui-outlined-button.ts +0 -19
  323. package/src/md/button/ui-text-button.ts +0 -19
  324. package/src/md/icon-button/ui-filled-icon-button.ts +0 -16
  325. package/src/md/icon-button/ui-filled-tonal-icon-button.ts +0 -16
  326. package/src/md/icon-button/ui-outlined-icon-button.ts +0 -16
@@ -2,20 +2,20 @@ import { assert, fixture, html, nextFrame } from '@open-wc/testing'
2
2
  import UiButton from '../../../src/md/button/internals/button.js'
3
3
  import { UiMock } from '../../helpers/UiMock.js'
4
4
 
5
- import '../../../src/md/button/ui-filled-button.js'
5
+ import '../../../src/md/button/ui-button.js'
6
6
  import '../../../src/md/icons/ui-icon.js'
7
7
 
8
8
  describe('md', () => {
9
9
  describe('UiButton', () => {
10
10
  async function basicFixture(): Promise<UiButton> {
11
- return fixture(html`<ui-filled-button>Label</ui-filled-button>`)
11
+ return fixture(html`<ui-button color="filled">Label</ui-button>`)
12
12
  }
13
13
 
14
14
  async function formFixture(): Promise<HTMLFormElement> {
15
15
  return fixture(
16
16
  html`<form>
17
17
  <input name="text" value="abc" />
18
- <ui-filled-button>Label</ui-filled-button>
18
+ <ui-button color="filled">Label</ui-button>
19
19
  </form>`
20
20
  )
21
21
  }
@@ -24,7 +24,7 @@ describe('md', () => {
24
24
  return fixture(
25
25
  html`<form>
26
26
  <input name="text" value="abc" />
27
- <ui-filled-button name="button" value="ok" type="submit">Label</ui-filled-button>
27
+ <ui-button color="filled" name="button" value="ok" type="submit">Label</ui-button>
28
28
  </form>`
29
29
  )
30
30
  }
@@ -33,34 +33,52 @@ describe('md', () => {
33
33
  return fixture(
34
34
  html`<form>
35
35
  <input name="text" value="abc" />
36
- <ui-filled-button name="button" value="ok" type="submit" disabled>Label</ui-filled-button>
36
+ <ui-button color="filled" name="button" value="ok" type="submit" disabled>Label</ui-button>
37
37
  </form>`
38
38
  )
39
39
  }
40
40
 
41
41
  async function disabledFixture(): Promise<UiButton> {
42
- return fixture(html`<ui-filled-button disabled>Label</ui-filled-button>`)
42
+ return fixture(html`<ui-button color="filled" disabled>Label</ui-button>`)
43
43
  }
44
44
 
45
45
  async function tabindexFixture(): Promise<UiButton> {
46
- return fixture(html`<ui-filled-button tabindex="1">Label</ui-filled-button>`)
46
+ return fixture(html`<ui-button color="filled" tabindex="1">Label</ui-button>`)
47
47
  }
48
48
 
49
49
  async function iconFixture(): Promise<UiButton> {
50
50
  return fixture(
51
- html`<ui-filled-button>
51
+ html`<ui-button color="filled">
52
52
  <ui-icon slot="icon" icon="add"></ui-icon>
53
53
  Label
54
- </ui-filled-button>`
54
+ </ui-button>`
55
55
  )
56
56
  }
57
57
 
58
58
  async function trailingIconFixture(): Promise<UiButton> {
59
59
  return fixture(
60
- html`<ui-filled-button trailingIcon>
60
+ html`<ui-button color="filled" trailingIcon>
61
61
  <ui-icon slot="icon" icon="add"></ui-icon>
62
62
  Label
63
- </ui-filled-button>`
63
+ </ui-button>`
64
+ )
65
+ }
66
+
67
+ async function toggleFixture(): Promise<UiButton> {
68
+ return fixture(
69
+ html`<ui-button color="filled" toggle>
70
+ <ui-icon slot="icon" icon="add"></ui-icon>
71
+ Label
72
+ </ui-button>`
73
+ )
74
+ }
75
+
76
+ async function toggleSelectedFixture(): Promise<UiButton> {
77
+ return fixture(
78
+ html`<ui-button color="filled" toggle selected>
79
+ <ui-icon slot="icon" icon="add"></ui-icon>
80
+ Label
81
+ </ui-button>`
64
82
  )
65
83
  }
66
84
 
@@ -76,14 +94,14 @@ describe('md', () => {
76
94
 
77
95
  it('has form when in a form', async () => {
78
96
  const form = await formFixture()
79
- const button = form.querySelector('ui-filled-button')!
97
+ const button = form.querySelector('ui-button')!
80
98
  assert.ok(button.form, 'has a form')
81
99
  assert.isTrue(button.form === form, 'has the parent form')
82
100
  })
83
101
 
84
102
  it('does not trigger submit when not "submit"', async () => {
85
103
  const form = await formFixture()
86
- const button = form.querySelector('ui-filled-button')!
104
+ const button = form.querySelector('ui-button')!
87
105
  let event: Event | undefined
88
106
  form.addEventListener('submit', (e: SubmitEvent) => {
89
107
  e.preventDefault()
@@ -95,7 +113,7 @@ describe('md', () => {
95
113
 
96
114
  it('removes the native "button" after submitting', async () => {
97
115
  const form = await submitFormFixture()
98
- const button = form.querySelector('ui-filled-button')!
116
+ const button = form.querySelector('ui-button')!
99
117
  form.addEventListener('submit', (e: SubmitEvent) => {
100
118
  e.preventDefault()
101
119
  })
@@ -106,13 +124,13 @@ describe('md', () => {
106
124
 
107
125
  it('registers the form values', async () => {
108
126
  const form = await submitFormFixture()
109
- const button = form.querySelector('ui-filled-button')!
127
+ const button = form.querySelector('ui-button')!
110
128
  assert.isTrue(form.elements[1] === button, 'the form has the button')
111
129
  })
112
130
 
113
131
  it('submits the form when clicking on the button', async () => {
114
132
  const form = await submitFormFixture()
115
- const button = form.querySelector('ui-filled-button')!
133
+ const button = form.querySelector('ui-button')!
116
134
  let event: SubmitEvent | undefined
117
135
  form.addEventListener('submit', (e: SubmitEvent) => {
118
136
  e.preventDefault()
@@ -127,7 +145,7 @@ describe('md', () => {
127
145
 
128
146
  it('submits the form with Space bar', async () => {
129
147
  const form = await submitFormFixture()
130
- const button = form.querySelector('ui-filled-button')!
148
+ const button = form.querySelector('ui-button')!
131
149
  let event: SubmitEvent | undefined
132
150
  form.addEventListener('submit', (e: SubmitEvent) => {
133
151
  e.preventDefault()
@@ -139,7 +157,7 @@ describe('md', () => {
139
157
 
140
158
  it('submits the form with Enter', async () => {
141
159
  const form = await submitFormFixture()
142
- const button = form.querySelector('ui-filled-button')!
160
+ const button = form.querySelector('ui-button')!
143
161
  let event: SubmitEvent | undefined
144
162
  form.addEventListener('submit', (e: SubmitEvent) => {
145
163
  e.preventDefault()
@@ -195,7 +213,7 @@ describe('md', () => {
195
213
 
196
214
  it('does not trigger submit when disabled', async () => {
197
215
  const form = await disabledFormFixture()
198
- const button = form.querySelector('ui-filled-button')!
216
+ const button = form.querySelector('ui-button')!
199
217
  let event: Event | undefined
200
218
  form.addEventListener('submit', (e: SubmitEvent) => {
201
219
  e.preventDefault()
@@ -209,20 +227,14 @@ describe('md', () => {
209
227
  describe('Icon placement', () => {
210
228
  it('places the icon as a prefix by default', async () => {
211
229
  const button = await iconFixture()
212
- const content = button.shadowRoot!.querySelector('.content')
213
- assert.equal(content?.children[0].localName, 'slot')
230
+ const content = button.shadowRoot!
231
+ assert.equal(content?.children[2].localName, 'slot')
214
232
  })
215
233
 
216
234
  it('places the icon as a suffix', async () => {
217
235
  const button = await trailingIconFixture()
218
- const content = button.shadowRoot!.querySelector('.content')
219
- assert.equal(content?.children[1].localName, 'slot')
220
- })
221
-
222
- it('recognizes it has an icon', async () => {
223
- const button = await iconFixture()
224
- const surface = button.shadowRoot!.querySelector('.surface') as HTMLElement
225
- assert.isTrue(surface.classList.contains('withIcon'))
236
+ const content = button.shadowRoot!
237
+ assert.equal(content?.children[3].localName, 'slot')
226
238
  })
227
239
  })
228
240
 
@@ -259,6 +271,16 @@ describe('md', () => {
259
271
  const button = await tabindexFixture()
260
272
  assert.equal(button.getAttribute('tabindex'), '1')
261
273
  })
274
+
275
+ it('is accessible when not selected', async () => {
276
+ const button = await toggleFixture()
277
+ await assert.isAccessible(button)
278
+ })
279
+
280
+ it('is accessible when selected', async () => {
281
+ const button = await toggleSelectedFixture()
282
+ await assert.isAccessible(button)
283
+ })
262
284
  })
263
285
 
264
286
  describe('Value and Name', () => {
@@ -31,32 +31,40 @@ describe('md', () => {
31
31
 
32
32
  async function labeledToggleFixture(icon: IconType): Promise<UiIconButton> {
33
33
  return fixture(
34
- html`<ui-icon-button aria-label="My button" title="My button description"
34
+ html`<ui-icon-button aria-label="My button" title="My button description" toggle
35
+ ><ui-icon .icon="${icon}"></ui-icon
36
+ ></ui-icon-button>`
37
+ )
38
+ }
39
+
40
+ async function labeledSelectedToggleFixture(icon: IconType): Promise<UiIconButton> {
41
+ return fixture(
42
+ html`<ui-icon-button aria-label="My button" title="My button description" toggle selected
35
43
  ><ui-icon .icon="${icon}"></ui-icon
36
44
  ></ui-icon-button>`
37
45
  )
38
46
  }
39
47
 
40
48
  describe('toggle button', () => {
41
- it('sets button active when pressing the button with space', async () => {
49
+ it('sets button selected when pressing the button with space', async () => {
42
50
  const button = await toggleFixture('add')
43
51
  await UiMock.keyPress(button, 'Space')
44
52
  await nextFrame()
45
- assert.isTrue(button.active, 'button is active')
53
+ assert.isTrue(button.selected, 'button is selected')
46
54
  })
47
55
 
48
- it('sets button active when pressing the button with enter', async () => {
56
+ it('sets button selected when pressing the button with enter', async () => {
49
57
  const button = await toggleFixture('add')
50
58
  await UiMock.keyPress(button, 'Enter')
51
59
  await nextFrame()
52
- assert.isTrue(button.active, 'button is active')
60
+ assert.isTrue(button.selected, 'button is selected')
53
61
  })
54
62
 
55
- it('sets button active when clicking on the button', async () => {
63
+ it('sets button selected when clicking on the button', async () => {
56
64
  const button = await toggleFixture('add')
57
65
  button.click()
58
66
  await nextFrame()
59
- assert.isTrue(button.active, 'button is active')
67
+ assert.isTrue(button.selected, 'button is selected')
60
68
  })
61
69
 
62
70
  it('sets "aria-pressed" when toggling the button', async () => {
@@ -66,29 +74,29 @@ describe('md', () => {
66
74
  assert.equal(button.getAttribute('aria-pressed'), 'true')
67
75
  })
68
76
 
69
- it('dispatches the "active" event when toggling', async () => {
77
+ it('dispatches the "toggle" event when toggling', async () => {
70
78
  const button = await toggleFixture('add')
71
79
  UiMock.keyPress(button, 'Space')
72
- const e = await oneEvent(button, 'active')
80
+ const e = await oneEvent(button, 'toggle')
73
81
  assert.ok(e, 'dispatches the event')
74
82
  })
75
83
 
76
- it('does not dispatch the "active" event toggling attribute', async () => {
84
+ it('does not dispatch the "toggle" event toggling attribute', async () => {
77
85
  const button = await toggleFixture('add')
78
86
  const spy = sinon.spy()
79
- button.addEventListener('active', spy)
80
- button.active = true
87
+ button.addEventListener('toggle', spy)
88
+ button.selected = true
81
89
  await nextFrame()
82
90
  assert.isFalse(spy.called)
83
91
  })
84
92
 
85
- it('does not dispatch the "click" event when toggling', async () => {
93
+ it('dispatches the "click" event when toggling', async () => {
86
94
  const button = await toggleFixture('add')
87
95
  const spy = sinon.spy()
88
96
  button.addEventListener('click', spy)
89
97
  await UiMock.keyPress(button, 'Space')
90
98
  await nextFrame()
91
- assert.isFalse(spy.called)
99
+ assert.isTrue(spy.called)
92
100
  })
93
101
  })
94
102
 
@@ -133,15 +141,13 @@ describe('md', () => {
133
141
  await assert.isAccessible(button)
134
142
  })
135
143
 
136
- it('is accessible when not active', async () => {
144
+ it('is accessible when not selected', async () => {
137
145
  const button = await labeledToggleFixture('add')
138
146
  await assert.isAccessible(button)
139
147
  })
140
148
 
141
- it('is accessible when active', async () => {
142
- const button = await labeledToggleFixture('add')
143
- button.active = true
144
- await nextFrame()
149
+ it('is accessible when selected', async () => {
150
+ const button = await labeledSelectedToggleFixture('add')
145
151
  await assert.isAccessible(button)
146
152
  })
147
153
  })
@@ -6,7 +6,7 @@ import UiButton from '../../../src/md/button/internals/button.js'
6
6
 
7
7
  import '../../../src/md/dialog/ui-dialog.js'
8
8
  import '../../../src/md/icons/ui-icon.js'
9
- import '../../../src/md/button/ui-text-button.js'
9
+ import '../../../src/md/button/ui-button.js'
10
10
 
11
11
  describe('md', () => {
12
12
  describe('Dialog', () => {
@@ -40,9 +40,9 @@ describe('md', () => {
40
40
  return fixture(
41
41
  html` <ui-dialog>
42
42
  Content
43
- <ui-text-button slot="button">Learn more</ui-text-button>
44
- <ui-text-button slot="button" value="dismiss">Cancel</ui-text-button>
45
- <ui-text-button slot="button" value="confirm">Accept</ui-text-button>
43
+ <ui-button color="text" slot="button">Learn more</ui-button>
44
+ <ui-button color="text" slot="button" value="dismiss">Cancel</ui-button>
45
+ <ui-button color="text" slot="button" value="confirm">Accept</ui-button>
46
46
  </ui-dialog>`
47
47
  )
48
48
  }
@@ -64,7 +64,7 @@ describe('md', () => {
64
64
  it('closes the dialog via the Escape button', async () => {
65
65
  const element = await buttonFixture()
66
66
  // the dialog requires a focusable element
67
- const button = element.querySelector('ui-text-button')!
67
+ const button = element.querySelector('ui-button')!
68
68
  button.focus()
69
69
  await UiMock.keyPress(element, 'Escape', { key: 'Escape' })
70
70
  assert.equal(element.open, false)
@@ -72,14 +72,14 @@ describe('md', () => {
72
72
 
73
73
  it('closes the dialog via the dismiss slotted button', async () => {
74
74
  const element = await buttonFixture()
75
- const button = element.querySelector('ui-text-button[value="dismiss"]') as UiButton
75
+ const button = element.querySelector('ui-button[value="dismiss"]') as UiButton
76
76
  button.click()
77
77
  assert.equal(element.open, false)
78
78
  })
79
79
 
80
80
  it('closes the dialog via the confirm slotted button', async () => {
81
81
  const element = await buttonFixture()
82
- const button = element.querySelector('ui-text-button[value="confirm"]') as UiButton
82
+ const button = element.querySelector('ui-button[value="confirm"]') as UiButton
83
83
  button.click()
84
84
  assert.equal(element.open, false)
85
85
  })
@@ -106,7 +106,7 @@ describe('md', () => {
106
106
  const element = await buttonFixture()
107
107
  const spy = sinon.spy()
108
108
  element.addEventListener('close', spy)
109
- const button = element.querySelector('ui-text-button[value="dismiss"]') as UiButton
109
+ const button = element.querySelector('ui-button[value="dismiss"]') as UiButton
110
110
  button.click()
111
111
  assert.isTrue(spy.calledOnce, 'the event was dispatched')
112
112
  const event = spy.args[0][0] as CustomEvent<UiDialogClosingReason>
@@ -117,7 +117,7 @@ describe('md', () => {
117
117
  const element = await buttonFixture()
118
118
  const spy = sinon.spy()
119
119
  element.addEventListener('close', spy)
120
- const button = element.querySelector('ui-text-button[value="confirm"]') as UiButton
120
+ const button = element.querySelector('ui-button[value="confirm"]') as UiButton
121
121
  button.click()
122
122
  assert.isTrue(spy.calledOnce, 'the event was dispatched')
123
123
  const event = spy.args[0][0] as CustomEvent<UiDialogClosingReason>
@@ -129,7 +129,7 @@ describe('md', () => {
129
129
  element.dialogValue = 'test'
130
130
  const spy = sinon.spy()
131
131
  element.addEventListener('close', spy)
132
- const button = element.querySelector('ui-text-button[value="confirm"]') as UiButton
132
+ const button = element.querySelector('ui-button[value="confirm"]') as UiButton
133
133
  button.click()
134
134
  assert.isTrue(spy.calledOnce, 'the event was dispatched')
135
135
  const event = spy.args[0][0] as CustomEvent<UiDialogClosingReason>
@@ -1 +0,0 @@
1
- {"version":3,"file":"button-styles.d.ts","sourceRoot":"","sources":["../../../../../src/md/button/internals/button-styles.ts"],"names":[],"mappings":";AAEA,wBA4IC"}
@@ -1,143 +0,0 @@
1
- import { css } from 'lit';
2
- export default css `
3
- :host {
4
- display: inline-block;
5
- vertical-align: middle;
6
- box-sizing: content-box;
7
- outline: none;
8
- writing-mode: horizontal-tb !important;
9
- text-rendering: auto;
10
- cursor: default;
11
- user-select: none;
12
- height: 40px;
13
- width: fit-content;
14
- -webkit-tap-highlight-color: transparent;
15
-
16
- position: relative;
17
-
18
- border-radius: 20px;
19
-
20
- --_label-text-font: var(
21
- --ui-button-label-text-font,
22
- var(--md-sys-typescale-label-large-font, var(--md-ref-typeface-plain, Roboto))
23
- );
24
- --_label-text-weight: var(
25
- --ui-button-label-text-weight,
26
- var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500))
27
- );
28
- --_label-text-line-height: var(
29
- --ui-button-label-text-line-height,
30
- var(--md-sys-typescale-label-large-height, 1.25rem)
31
- );
32
- --_label-text-size: var(--ui-button-label-text-size, var(--md-sys-typescale-label-large-size, 0.875rem));
33
- --_icon-size: var(--md-elevated-button-icon-size, 18px);
34
- --_content-padding: 0px 24px;
35
- --_content-opacity: 1;
36
- --_content-background-color: initial;
37
- --_content-color: inherit;
38
- --_container-background-color: initial;
39
- --_container-opacity: 1;
40
- --_container-elevation: var(--md-sys-elevation-0);
41
- --_surface-color: inherit;
42
- --_state-opacity: 0;
43
- --_state-background-color: initial;
44
-
45
- letter-spacing: var(--md-sys-typescale-label-large-tracking);
46
- font-family: var(--_label-text-font);
47
- font-size: var(--_label-text-size);
48
- line-height: var(--_label-text-line-height);
49
- font-weight: var(--_label-text-weight);
50
- text-overflow: ellipsis;
51
- }
52
-
53
- :host([disabled]) {
54
- --_content-opacity: 0.38;
55
- }
56
-
57
- .surface {
58
- width: inherit;
59
- height: inherit;
60
- position: relative;
61
- border-radius: inherit;
62
- display: flex;
63
- justify-content: center;
64
- align-items: center;
65
- color: var(--_surface-color);
66
- }
67
-
68
- .container,
69
- .state {
70
- position: absolute;
71
- top: 0;
72
- left: 0;
73
- right: 0;
74
- bottom: 0;
75
- border-radius: inherit;
76
- }
77
-
78
- .container {
79
- z-index: 1;
80
- transition:
81
- box-shadow 160ms cubic-bezier(0.4, 0, 0.2, 1),
82
- background-color 230ms cubic-bezier(0.4, 0, 0.2, 1);
83
- background-color: var(--_container-background-color);
84
- opacity: var(--_container-opacity);
85
- box-shadow: var(--_container-elevation);
86
- }
87
-
88
- .state {
89
- z-index: 2;
90
- opacity: var(--_state-opacity);
91
- background-color: var(--_state-background-color);
92
- transition: opacity 260ms cubic-bezier(0.4, 0, 0.2, 1);
93
- }
94
-
95
- .content {
96
- z-index: 3;
97
- display: flex;
98
- justify-content: center;
99
- align-items: center;
100
- position: relative;
101
- padding: var(--_content-padding);
102
- opacity: var(--_content-opacity);
103
- white-space: nowrap;
104
- color: var(--_content-color);
105
- background-color: var(--_content-background-color);
106
- }
107
-
108
- .content slot::slotted(*) {
109
- color: var(--_content-color);
110
- fill: var(--_content-color);
111
- }
112
-
113
- .ripple {
114
- border-radius: inherit;
115
- z-index: 3;
116
- }
117
-
118
- .surface.withIcon {
119
- --_content-padding: 0px 24px 0px 16px;
120
- }
121
-
122
- :host([trailingIcon]) .surface.withIcon {
123
- --_content-padding: 0px 16px 0px 24px;
124
- }
125
-
126
- .surface.withIcon slot[name='icon']::slotted(*) {
127
- margin-right: 8px;
128
- margin-left: 0px;
129
- font-size: var(--_icon-size);
130
- inline-size: var(--_icon-size);
131
- block-size: var(--_icon-size);
132
- }
133
-
134
- :host([trailingIcon]) .surface.withIcon slot[name='icon']::slotted(*) {
135
- margin-left: 8px;
136
- margin-right: 0px;
137
- }
138
-
139
- :host([disabled]) {
140
- pointer-events: none;
141
- }
142
- `;
143
- //# sourceMappingURL=button-styles.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"button-styles.js","sourceRoot":"","sources":["../../../../../src/md/button/internals/button-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4IjB,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport default css`\n :host {\n display: inline-block;\n vertical-align: middle;\n box-sizing: content-box;\n outline: none;\n writing-mode: horizontal-tb !important;\n text-rendering: auto;\n cursor: default;\n user-select: none;\n height: 40px;\n width: fit-content;\n -webkit-tap-highlight-color: transparent;\n\n position: relative;\n\n border-radius: 20px;\n\n --_label-text-font: var(\n --ui-button-label-text-font,\n var(--md-sys-typescale-label-large-font, var(--md-ref-typeface-plain, Roboto))\n );\n --_label-text-weight: var(\n --ui-button-label-text-weight,\n var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500))\n );\n --_label-text-line-height: var(\n --ui-button-label-text-line-height,\n var(--md-sys-typescale-label-large-height, 1.25rem)\n );\n --_label-text-size: var(--ui-button-label-text-size, var(--md-sys-typescale-label-large-size, 0.875rem));\n --_icon-size: var(--md-elevated-button-icon-size, 18px);\n --_content-padding: 0px 24px;\n --_content-opacity: 1;\n --_content-background-color: initial;\n --_content-color: inherit;\n --_container-background-color: initial;\n --_container-opacity: 1;\n --_container-elevation: var(--md-sys-elevation-0);\n --_surface-color: inherit;\n --_state-opacity: 0;\n --_state-background-color: initial;\n\n letter-spacing: var(--md-sys-typescale-label-large-tracking);\n font-family: var(--_label-text-font);\n font-size: var(--_label-text-size);\n line-height: var(--_label-text-line-height);\n font-weight: var(--_label-text-weight);\n text-overflow: ellipsis;\n }\n\n :host([disabled]) {\n --_content-opacity: 0.38;\n }\n\n .surface {\n width: inherit;\n height: inherit;\n position: relative;\n border-radius: inherit;\n display: flex;\n justify-content: center;\n align-items: center;\n color: var(--_surface-color);\n }\n\n .container,\n .state {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border-radius: inherit;\n }\n\n .container {\n z-index: 1;\n transition:\n box-shadow 160ms cubic-bezier(0.4, 0, 0.2, 1),\n background-color 230ms cubic-bezier(0.4, 0, 0.2, 1);\n background-color: var(--_container-background-color);\n opacity: var(--_container-opacity);\n box-shadow: var(--_container-elevation);\n }\n\n .state {\n z-index: 2;\n opacity: var(--_state-opacity);\n background-color: var(--_state-background-color);\n transition: opacity 260ms cubic-bezier(0.4, 0, 0.2, 1);\n }\n\n .content {\n z-index: 3;\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n padding: var(--_content-padding);\n opacity: var(--_content-opacity);\n white-space: nowrap;\n color: var(--_content-color);\n background-color: var(--_content-background-color);\n }\n\n .content slot::slotted(*) {\n color: var(--_content-color);\n fill: var(--_content-color);\n }\n\n .ripple {\n border-radius: inherit;\n z-index: 3;\n }\n\n .surface.withIcon {\n --_content-padding: 0px 24px 0px 16px;\n }\n\n :host([trailingIcon]) .surface.withIcon {\n --_content-padding: 0px 16px 0px 24px;\n }\n\n .surface.withIcon slot[name='icon']::slotted(*) {\n margin-right: 8px;\n margin-left: 0px;\n font-size: var(--_icon-size);\n inline-size: var(--_icon-size);\n block-size: var(--_icon-size);\n }\n\n :host([trailingIcon]) .surface.withIcon slot[name='icon']::slotted(*) {\n margin-left: 8px;\n margin-right: 0px;\n }\n\n :host([disabled]) {\n pointer-events: none;\n }\n`\n"]}
@@ -1,4 +0,0 @@
1
- import Button from './button.js';
2
- export default class ElevatedButton extends Button {
3
- }
4
- //# sourceMappingURL=elevated-button.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"elevated-button.d.ts","sourceRoot":"","sources":["../../../../../src/md/button/internals/elevated-button.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,aAAa,CAAA;AAEhC,MAAM,CAAC,OAAO,OAAO,cAAe,SAAQ,MAAM;CAAG"}
@@ -1,4 +0,0 @@
1
- import Button from './button.js';
2
- export default class ElevatedButton extends Button {
3
- }
4
- //# sourceMappingURL=elevated-button.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"elevated-button.js","sourceRoot":"","sources":["../../../../../src/md/button/internals/elevated-button.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,aAAa,CAAA;AAEhC,MAAM,CAAC,OAAO,OAAO,cAAe,SAAQ,MAAM;CAAG","sourcesContent":["import Button from './button.js'\n\nexport default class ElevatedButton extends Button {}\n"]}
@@ -1,3 +0,0 @@
1
- declare const _default: import("lit").CSSResult;
2
- export default _default;
3
- //# sourceMappingURL=elevated-button.styles.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"elevated-button.styles.d.ts","sourceRoot":"","sources":["../../../../../src/md/button/internals/elevated-button.styles.ts"],"names":[],"mappings":";AAEA,wBAmCC"}
@@ -1,38 +0,0 @@
1
- import { css } from 'lit';
2
- export default css `
3
- :host {
4
- --md-ripple-hover-state-layer-color: var(--md-sys-color-primary);
5
- --md-ripple-focus-state-layer-color: var(--md-sys-color-primary);
6
- --md-ripple-pressed-state-layer-color: var(--md-sys-color-primary);
7
- --_container-background-color: var(--md-sys-color-surface);
8
- --_container-elevation: var(--md-sys-elevation-1);
9
- --_surface-color: var(--md-sys-color-primary);
10
- --_content-color: var(--md-sys-color-primary);
11
- }
12
-
13
- :host(:hover) {
14
- --_container-elevation: var(--md-sys-elevation-2);
15
- --_state-background-color: var(--md-sys-color-primary);
16
- --_state-opacity: var(--md-sys-state-hover-state-layer-opacity);
17
- }
18
-
19
- :host(:focus) {
20
- --_container-elevation: var(--md-sys-elevation-1);
21
- }
22
-
23
- :host(:active),
24
- :host .pressed {
25
- --_container-elevation: var(--md-sys-elevation-1);
26
- --_state-background-color: var(--md-sys-color-primary);
27
- --_state-opacity: var(--md-sys-state-pressed-state-layer-opacity);
28
- }
29
-
30
- :host([disabled]) {
31
- --_container-background-color: var(--md-sys-color-on-surface);
32
- --_container-opacity: 0.12;
33
- --_container-elevation: var(--md-sys-elevation-0);
34
- --_content-opacity: 0.38;
35
- --_content-color: var(--md-sys-color-on-surface);
36
- }
37
- `;
38
- //# sourceMappingURL=elevated-button.styles.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"elevated-button.styles.js","sourceRoot":"","sources":["../../../../../src/md/button/internals/elevated-button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmCjB,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport default css`\n :host {\n --md-ripple-hover-state-layer-color: var(--md-sys-color-primary);\n --md-ripple-focus-state-layer-color: var(--md-sys-color-primary);\n --md-ripple-pressed-state-layer-color: var(--md-sys-color-primary);\n --_container-background-color: var(--md-sys-color-surface);\n --_container-elevation: var(--md-sys-elevation-1);\n --_surface-color: var(--md-sys-color-primary);\n --_content-color: var(--md-sys-color-primary);\n }\n\n :host(:hover) {\n --_container-elevation: var(--md-sys-elevation-2);\n --_state-background-color: var(--md-sys-color-primary);\n --_state-opacity: var(--md-sys-state-hover-state-layer-opacity);\n }\n\n :host(:focus) {\n --_container-elevation: var(--md-sys-elevation-1);\n }\n\n :host(:active),\n :host .pressed {\n --_container-elevation: var(--md-sys-elevation-1);\n --_state-background-color: var(--md-sys-color-primary);\n --_state-opacity: var(--md-sys-state-pressed-state-layer-opacity);\n }\n\n :host([disabled]) {\n --_container-background-color: var(--md-sys-color-on-surface);\n --_container-opacity: 0.12;\n --_container-elevation: var(--md-sys-elevation-0);\n --_content-opacity: 0.38;\n --_content-color: var(--md-sys-color-on-surface);\n }\n`\n"]}
@@ -1,4 +0,0 @@
1
- import Button from './button.js';
2
- export default class FilledButton extends Button {
3
- }
4
- //# sourceMappingURL=filled-button.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"filled-button.d.ts","sourceRoot":"","sources":["../../../../../src/md/button/internals/filled-button.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,aAAa,CAAA;AAEhC,MAAM,CAAC,OAAO,OAAO,YAAa,SAAQ,MAAM;CAAG"}
@@ -1,4 +0,0 @@
1
- import Button from './button.js';
2
- export default class FilledButton extends Button {
3
- }
4
- //# sourceMappingURL=filled-button.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"filled-button.js","sourceRoot":"","sources":["../../../../../src/md/button/internals/filled-button.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,aAAa,CAAA;AAEhC,MAAM,CAAC,OAAO,OAAO,YAAa,SAAQ,MAAM;CAAG","sourcesContent":["import Button from './button.js'\n\nexport default class FilledButton extends Button {}\n"]}
@@ -1 +0,0 @@
1
- {"version":3,"file":"filled-button.styles.d.ts","sourceRoot":"","sources":["../../../../../src/md/button/internals/filled-button.styles.ts"],"names":[],"mappings":";AAEA,wBA2BC"}