material 3.0.0-next.0 → 3.0.0

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 (253) hide show
  1. package/README.md +59 -370
  2. package/dist/components/badge/index.d.ts +1 -1
  3. package/dist/components/badge/index.js +1 -1
  4. package/dist/components/button/index.d.ts +1 -1
  5. package/dist/components/button/index.js +1 -1
  6. package/dist/components/card/index.d.ts +1 -1
  7. package/dist/components/card/index.js +1 -1
  8. package/dist/components/checkbox/index.d.ts +1 -1
  9. package/dist/components/checkbox/index.js +1 -1
  10. package/dist/components/chips/index.d.ts +1 -1
  11. package/dist/components/chips/index.js +1 -1
  12. package/dist/components/datepicker/index.d.ts +1 -1
  13. package/dist/components/datepicker/index.js +1 -1
  14. package/dist/components/dialog/index.d.ts +1 -1
  15. package/dist/components/dialog/index.js +1 -1
  16. package/dist/components/divider/index.d.ts +1 -1
  17. package/dist/components/divider/index.js +1 -1
  18. package/dist/components/drawer/index.d.ts +1 -1
  19. package/dist/components/drawer/index.js +1 -1
  20. package/dist/components/index.d.ts +1 -1
  21. package/dist/components/list/config.js +6 -1
  22. package/dist/components/list/constants.d.ts +10 -0
  23. package/dist/components/list/constants.js +4 -0
  24. package/dist/components/list/index.d.ts +3 -3
  25. package/dist/components/list/index.js +2 -2
  26. package/dist/components/list/list.d.ts +17 -0
  27. package/dist/components/list/list.js +2 -2
  28. package/dist/components/list/types.d.ts +29 -1
  29. package/dist/components/loading-indicator/index.d.ts +1 -1
  30. package/dist/components/loading-indicator/index.js +1 -1
  31. package/dist/components/menu/index.d.ts +1 -1
  32. package/dist/components/menu/index.js +1 -1
  33. package/dist/components/progress/index.d.ts +1 -1
  34. package/dist/components/progress/index.js +1 -1
  35. package/dist/components/progress/types.d.ts +20 -10
  36. package/dist/components/radios/index.d.ts +1 -1
  37. package/dist/components/radios/index.js +1 -1
  38. package/dist/components/search/index.d.ts +1 -1
  39. package/dist/components/search/index.js +1 -1
  40. package/dist/components/select/index.d.ts +1 -1
  41. package/dist/components/select/index.js +1 -1
  42. package/dist/components/slider/index.d.ts +1 -1
  43. package/dist/components/slider/index.js +1 -1
  44. package/dist/components/slider/types.d.ts +7 -0
  45. package/dist/components/snackbar/index.d.ts +1 -1
  46. package/dist/components/snackbar/index.js +1 -1
  47. package/dist/components/split-button/index.d.ts +1 -1
  48. package/dist/components/split-button/index.js +1 -1
  49. package/dist/components/switch/index.d.ts +1 -1
  50. package/dist/components/switch/index.js +1 -1
  51. package/dist/components/tabs/index.d.ts +1 -0
  52. package/dist/components/tabs/index.js +1 -0
  53. package/dist/components/tabs/types.d.ts +15 -3
  54. package/dist/components/text-field/features/placement.js +7 -4
  55. package/dist/components/timepicker/index.d.ts +1 -1
  56. package/dist/components/timepicker/index.js +1 -1
  57. package/dist/components/tooltip/index.d.ts +1 -1
  58. package/dist/components/tooltip/index.js +1 -1
  59. package/dist/core/compose/features/textinput.js +3 -1
  60. package/dist/core/compose/index.d.ts +1 -1
  61. package/dist/core/dom/html.d.ts +1 -1
  62. package/dist/elements/css/button.css +1 -1
  63. package/dist/elements/css/button.js +1 -1
  64. package/dist/elements/css/card.css +1 -1
  65. package/dist/elements/css/card.js +1 -1
  66. package/dist/elements/css/checkbox.css +1 -1
  67. package/dist/elements/css/checkbox.js +1 -1
  68. package/dist/elements/css/chips.css +1 -1
  69. package/dist/elements/css/chips.js +1 -1
  70. package/dist/elements/css/dialog.css +1 -1
  71. package/dist/elements/css/dialog.js +1 -1
  72. package/dist/elements/css/extended-fab.css +1 -1
  73. package/dist/elements/css/extended-fab.js +1 -1
  74. package/dist/elements/css/fab-menu.css +1 -1
  75. package/dist/elements/css/fab-menu.js +1 -1
  76. package/dist/elements/css/fab.css +1 -1
  77. package/dist/elements/css/fab.js +1 -1
  78. package/dist/elements/css/hosts/switch.css +1 -1
  79. package/dist/elements/css/hosts/text-field.css +1 -1
  80. package/dist/elements/css/icon-button.css +1 -1
  81. package/dist/elements/css/icon-button.js +1 -1
  82. package/dist/elements/css/list.css +1 -1
  83. package/dist/elements/css/list.js +1 -1
  84. package/dist/elements/css/menu.css +1 -1
  85. package/dist/elements/css/menu.js +1 -1
  86. package/dist/elements/css/radios.css +1 -1
  87. package/dist/elements/css/radios.js +1 -1
  88. package/dist/elements/css/select.css +1 -1
  89. package/dist/elements/css/select.js +1 -1
  90. package/dist/elements/css/side-sheet.css +1 -1
  91. package/dist/elements/css/side-sheet.js +1 -1
  92. package/dist/elements/css/slider.css +1 -1
  93. package/dist/elements/css/slider.js +1 -1
  94. package/dist/elements/css/snackbar.css +1 -1
  95. package/dist/elements/css/snackbar.js +1 -1
  96. package/dist/elements/css/switch.css +1 -1
  97. package/dist/elements/css/switch.js +1 -1
  98. package/dist/elements/css/text-field.css +1 -1
  99. package/dist/elements/css/text-field.js +1 -1
  100. package/dist/elements/define.d.ts +20 -0
  101. package/dist/elements/list.d.ts +6 -0
  102. package/dist/elements/list.js +1 -0
  103. package/dist/elements/preupgrade/badge.css +1 -1
  104. package/dist/elements/preupgrade/bottom-app-bar.css +1 -1
  105. package/dist/elements/preupgrade/bottom-sheet.css +1 -1
  106. package/dist/elements/preupgrade/button-group.css +1 -1
  107. package/dist/elements/preupgrade/button.css +2 -2
  108. package/dist/elements/preupgrade/card.css +1 -1
  109. package/dist/elements/preupgrade/carousel.css +1 -1
  110. package/dist/elements/preupgrade/checkbox.css +2 -2
  111. package/dist/elements/preupgrade/chips.css +1 -1
  112. package/dist/elements/preupgrade/datepicker.css +1 -1
  113. package/dist/elements/preupgrade/dialog.css +1 -1
  114. package/dist/elements/preupgrade/divider.css +1 -1
  115. package/dist/elements/preupgrade/drawer.css +1 -1
  116. package/dist/elements/preupgrade/extended-fab.css +1 -1
  117. package/dist/elements/preupgrade/fab-menu.css +1 -1
  118. package/dist/elements/preupgrade/fab.css +1 -1
  119. package/dist/elements/preupgrade/icon-button.css +1 -1
  120. package/dist/elements/preupgrade/list.css +2 -2
  121. package/dist/elements/preupgrade/loading-indicator.css +1 -1
  122. package/dist/elements/preupgrade/menu.css +1 -1
  123. package/dist/elements/preupgrade/navigation-bar.css +1 -1
  124. package/dist/elements/preupgrade/navigation-rail.css +1 -1
  125. package/dist/elements/preupgrade/progress.css +1 -1
  126. package/dist/elements/preupgrade/radios.css +2 -2
  127. package/dist/elements/preupgrade/search.css +1 -1
  128. package/dist/elements/preupgrade/select.css +1 -1
  129. package/dist/elements/preupgrade/side-sheet.css +1 -1
  130. package/dist/elements/preupgrade/slider.css +1 -1
  131. package/dist/elements/preupgrade/snackbar.css +1 -1
  132. package/dist/elements/preupgrade/split-button.css +1 -1
  133. package/dist/elements/preupgrade/switch.css +2 -2
  134. package/dist/elements/preupgrade/tabs.css +1 -1
  135. package/dist/elements/preupgrade/text-field.css +2 -2
  136. package/dist/elements/preupgrade/timepicker.css +1 -1
  137. package/dist/elements/preupgrade/toolbar.css +1 -1
  138. package/dist/elements/preupgrade/tooltip.css +1 -1
  139. package/dist/elements/preupgrade/top-app-bar.css +1 -1
  140. package/dist/elements/preupgrade.css +2 -2
  141. package/dist/elements/preupgrade.js +1 -1
  142. package/dist/elements/styles.d.ts +13 -1
  143. package/dist/elements/switch.d.ts +1 -0
  144. package/dist/elements/switch.js +1 -0
  145. package/dist/elements/text-field.js +1 -5
  146. package/dist/package.json +28 -4
  147. package/dist/styles/badge.css +1 -1
  148. package/dist/styles/base.css +1 -1
  149. package/dist/styles/bottom-app-bar.css +1 -1
  150. package/dist/styles/bottom-sheet.css +1 -1
  151. package/dist/styles/button-group.css +1 -1
  152. package/dist/styles/button.css +2 -2
  153. package/dist/styles/card.css +2 -2
  154. package/dist/styles/carousel.css +1 -1
  155. package/dist/styles/checkbox.css +2 -2
  156. package/dist/styles/chips.css +2 -2
  157. package/dist/styles/contrast.css +1 -1
  158. package/dist/styles/datepicker.css +1 -1
  159. package/dist/styles/dialog.css +2 -2
  160. package/dist/styles/divider.css +1 -1
  161. package/dist/styles/drawer.css +1 -1
  162. package/dist/styles/extended-fab.css +2 -2
  163. package/dist/styles/fab-menu.css +2 -2
  164. package/dist/styles/fab.css +2 -2
  165. package/dist/styles/icon-button.css +2 -2
  166. package/dist/styles/list.css +2 -2
  167. package/dist/styles/loading-indicator.css +1 -1
  168. package/dist/styles/menu.css +2 -2
  169. package/dist/styles/navigation-bar.css +1 -1
  170. package/dist/styles/navigation-rail.css +1 -1
  171. package/dist/styles/progress.css +1 -1
  172. package/dist/styles/radios.css +2 -2
  173. package/dist/styles/search.css +1 -1
  174. package/dist/styles/select.css +2 -2
  175. package/dist/styles/side-sheet.css +2 -2
  176. package/dist/styles/slider.css +2 -2
  177. package/dist/styles/snackbar.css +2 -2
  178. package/dist/styles/split-button.css +1 -1
  179. package/dist/styles/switch.css +2 -2
  180. package/dist/styles/tabs.css +1 -1
  181. package/dist/styles/text-field.css +2 -2
  182. package/dist/styles/timepicker.css +1 -1
  183. package/dist/styles/toolbar.css +1 -1
  184. package/dist/styles/tooltip.css +1 -1
  185. package/dist/styles/top-app-bar.css +1 -1
  186. package/dist/styles/typography.css +1 -1
  187. package/dist/styles/utilities.css +1 -1
  188. package/dist/styles.css +2 -2
  189. package/dist/themes/autumn-contrast.css +1 -1
  190. package/dist/themes/autumn.css +1 -1
  191. package/dist/themes/baseline-contrast.css +1 -1
  192. package/dist/themes/baseline.css +1 -1
  193. package/dist/themes/brownbeige-contrast.css +1 -1
  194. package/dist/themes/brownbeige.css +1 -1
  195. package/dist/themes/content-contrast.css +1 -1
  196. package/dist/themes/content.css +1 -1
  197. package/dist/themes/desert-contrast.css +1 -1
  198. package/dist/themes/desert.css +1 -1
  199. package/dist/themes/expressive-contrast.css +1 -1
  200. package/dist/themes/expressive.css +1 -1
  201. package/dist/themes/fidelity-contrast.css +1 -1
  202. package/dist/themes/fidelity.css +1 -1
  203. package/dist/themes/forest-contrast.css +1 -1
  204. package/dist/themes/forest.css +1 -1
  205. package/dist/themes/fruit-salad-contrast.css +1 -1
  206. package/dist/themes/fruit-salad.css +1 -1
  207. package/dist/themes/highcontrast-contrast.css +1 -1
  208. package/dist/themes/highcontrast.css +1 -1
  209. package/dist/themes/monochrome-contrast.css +1 -1
  210. package/dist/themes/monochrome.css +1 -1
  211. package/dist/themes/neutral-contrast.css +1 -1
  212. package/dist/themes/neutral.css +1 -1
  213. package/dist/themes/ocean-contrast.css +1 -1
  214. package/dist/themes/ocean.css +1 -1
  215. package/dist/themes/rainbow-contrast.css +1 -1
  216. package/dist/themes/rainbow.css +1 -1
  217. package/dist/themes/sageivory-contrast.css +1 -1
  218. package/dist/themes/sageivory.css +1 -1
  219. package/dist/themes/spring-contrast.css +1 -1
  220. package/dist/themes/spring.css +1 -1
  221. package/dist/themes/summer-contrast.css +1 -1
  222. package/dist/themes/summer.css +1 -1
  223. package/dist/themes/sunset-contrast.css +1 -1
  224. package/dist/themes/sunset.css +1 -1
  225. package/dist/themes/tealcaramel-contrast.css +1 -1
  226. package/dist/themes/tealcaramel.css +1 -1
  227. package/dist/themes/vibrant-contrast.css +1 -1
  228. package/dist/themes/vibrant.css +1 -1
  229. package/package.json +28 -4
  230. package/src/styles/abstract/_mixins.scss +17 -5
  231. package/src/styles/abstract/_variables.scss +1 -1
  232. package/src/styles/components/_button.scss +10 -7
  233. package/src/styles/components/_checkbox.scss +10 -0
  234. package/src/styles/components/_chips.scss +10 -0
  235. package/src/styles/components/_dialog.scss +16 -0
  236. package/src/styles/components/_fab-menu.scss +20 -1
  237. package/src/styles/components/_icon-button.scss +6 -0
  238. package/src/styles/components/_list.scss +48 -4
  239. package/src/styles/components/_menu.scss +8 -0
  240. package/src/styles/components/_radios.scss +22 -4
  241. package/src/styles/components/_select.scss +13 -29
  242. package/src/styles/components/_side-sheet.scss +22 -0
  243. package/src/styles/components/_slider.scss +3 -3
  244. package/src/styles/components/_switch.scss +19 -0
  245. package/src/styles/components/_text-field.scss +97 -319
  246. package/src/styles/elements/_button.scss +17 -1
  247. package/src/styles/elements/_checkbox.scss +16 -0
  248. package/src/styles/elements/_list.scss +6 -0
  249. package/src/styles/elements/_radios.scss +3 -2
  250. package/src/styles/elements/_switch.scss +52 -0
  251. package/src/styles/elements/_text-field.scss +21 -0
  252. package/dist/LICENSE +0 -21
  253. package/dist/README.md +0 -438
package/dist/elements/css/fab-menu.js CHANGED
@@ -2,4 +2,4 @@ import "./ripple.js";
2
2
  import "./fab.js";
3
3
  import "./menu.js";
4
4
  import { registerStyles } from "../styles.js";
5
- registerStyles({ "fab-menu": ".mtrl-fab-menu{position:relative;display:inline-block;width:56px;height:56px;vertical-align:middle}.mtrl-fab-menu--medium{width:80px;height:80px}.mtrl-fab-menu--large{width:96px;height:96px}.mtrl-fab-menu--primary{--mtrl-fab-menu-close: var(--mtrl-sys-color-primary);--mtrl-fab-menu-on-close: var(--mtrl-sys-color-on-primary);--mtrl-fab-menu-item: var(--mtrl-sys-color-primary-container);--mtrl-fab-menu-on-item: var(--mtrl-sys-color-on-primary-container)}.mtrl-fab-menu--secondary{--mtrl-fab-menu-close: var(--mtrl-sys-color-secondary);--mtrl-fab-menu-on-close: var(--mtrl-sys-color-on-secondary);--mtrl-fab-menu-item: var(--mtrl-sys-color-secondary-container);--mtrl-fab-menu-on-item: var(--mtrl-sys-color-on-secondary-container)}.mtrl-fab-menu--tertiary{--mtrl-fab-menu-close: var(--mtrl-sys-color-tertiary);--mtrl-fab-menu-on-close: var(--mtrl-sys-color-on-tertiary);--mtrl-fab-menu-item: var(--mtrl-sys-color-tertiary-container);--mtrl-fab-menu-on-item: var(--mtrl-sys-color-on-tertiary-container)}.mtrl-fab-menu--bottom-end,.mtrl-fab-menu--bottom-start{--mtrl-fab-menu-margin: 16px;position:absolute;bottom:var(--mtrl-fab-menu-margin);z-index:50}@media(min-width: 1200px){.mtrl-fab-menu--bottom-end,.mtrl-fab-menu--bottom-start{--mtrl-fab-menu-margin: 24px}}.mtrl-fab-menu--bottom-end{inset-inline-end:var(--mtrl-fab-menu-margin)}.mtrl-fab-menu--bottom-start{inset-inline-start:var(--mtrl-fab-menu-margin)}.mtrl-fab.mtrl-fab-menu__fab{position:absolute;inset-block-start:0;inset-inline-end:0;display:grid;place-items:center;transition:width 425ms linear(0, 0.102, 0.323, 0.57, 0.784, 0.942, 1.039, 1.085, 1.094, 1.082, 1.06, 1.037, 1.018, 1.004, 0.995, 0.992, 0.991, 0.992, 0.995, 0.997, 0.999, 1, 1.001, 1.001, 1),height 425ms linear(0, 0.102, 0.323, 0.57, 0.784, 0.942, 1.039, 1.085, 1.094, 1.082, 1.06, 1.037, 1.018, 1.004, 0.995, 0.992, 0.991, 0.992, 0.995, 0.997, 0.999, 1, 1.001, 1.001, 1),border-radius 425ms linear(0, 0.102, 0.323, 0.57, 0.784, 0.942, 1.039, 1.085, 1.094, 1.082, 1.06, 1.037, 1.018, 1.004, 0.995, 0.992, 0.991, 0.992, 0.995, 0.997, 0.999, 1, 1.001, 1.001, 1),background-color 425ms linear(0, 0.102, 0.323, 0.57, 0.784, 0.942, 1, 1, 1, 1, 1, 1, 1, 1, 0.995, 0.992, 0.991, 0.992, 0.995, 0.997, 0.999, 1, 1, 1, 1),color 425ms linear(0, 0.102, 0.323, 0.57, 0.784, 0.942, 1, 1, 1, 1, 1, 1, 1, 1, 0.995, 0.992, 0.991, 0.992, 0.995, 0.997, 0.999, 1, 1, 1, 1),box-shadow 425ms linear(0, 0.102, 0.323, 0.57, 0.784, 0.942, 1.039, 1.085, 1.094, 1.082, 1.06, 1.037, 1.018, 1.004, 0.995, 0.992, 0.991, 0.992, 0.995, 0.997, 0.999, 1, 1.001, 1.001, 1)}.mtrl-fab.mtrl-fab-menu__fab>*{grid-area:1/1}.mtrl-fab.mtrl-fab-menu__fab .mtrl-fab__icon,.mtrl-fab.mtrl-fab-menu__fab .mtrl-fab-menu__close{transition:visibility 0s linear 48ms}.mtrl-fab-menu__close{display:inline-flex;width:20px;height:20px;visibility:hidden}.mtrl-fab-menu__close svg{width:20px;height:20px;fill:currentColor}.mtrl-fab-menu--list.mtrl-fab-menu--open .mtrl-fab-menu__fab{width:56px;height:56px;border-radius:28px;background-color:var(--mtrl-fab-menu-close);color:var(--mtrl-fab-menu-on-close)}.mtrl-fab-menu--list.mtrl-fab-menu--open .mtrl-fab-menu__fab .mtrl-fab__icon{visibility:hidden}.mtrl-fab-menu--list.mtrl-fab-menu--open .mtrl-fab-menu__fab .mtrl-fab-menu__close{visibility:visible}.mtrl-fab-menu__list{position:absolute;bottom:calc(100% + 8px);inset-inline-end:0;display:flex;flex-direction:column;align-items:flex-end;gap:4px;overflow-y:auto;visibility:hidden;transition:visibility 0s linear var(--mtrl-fab-menu-exit, 0ms)}.mtrl-fab-menu--menu .mtrl-fab-menu__list{display:none}.mtrl-fab-menu--open .mtrl-fab-menu__list{visibility:visible;transition-delay:0s}.mtrl-fab-menu__item{position:relative;display:inline-flex;flex-shrink:0;justify-content:flex-end;box-sizing:border-box;width:0;height:56px;padding:0;border:none;border-radius:var(--mtrl-sys-shape-corner-full, 9999px);background-color:var(--mtrl-fab-menu-item);color:var(--mtrl-fab-menu-on-item);font-family:var(--mtrl-ref-typeface-brand, Roboto, sans-serif);font-size:16px;line-height:24px;letter-spacing:.15px;font-weight:500;white-space:nowrap;cursor:pointer;overflow:hidden;opacity:0;transition:opacity 175ms linear(0, 0.075, 0.227, 0.39, 0.537, 0.657, 0.751, 0.822, 0.874, 0.912, 0.939, 0.958, 0.971, 0.98, 0.987, 0.991, 0.994, 0.996, 0.997, 0.998, 0.999, 0.999, 0.999, 1, 1),width 425ms linear(0, 0.102, 0.323, 0.57, 0.784, 0.942, 1.039, 1.085, 1.094, 1.082, 1.06, 1.037, 1.018, 1.004, 0.995, 0.992, 0.991, 0.992, 0.995, 0.997, 0.999, 1, 1.001, 1.001, 1);transition-delay:var(--mtrl-fab-menu-delay, 0ms)}.mtrl-fab-menu__item:hover{position:relative}.mtrl-fab-menu__item:hover::before{content:\"\";position:absolute;inset:0;background-color:currentColor;opacity:.08;pointer-events:none;border-radius:inherit}.mtrl-fab-menu__item:focus-visible{position:relative;outline:2px solid var(--mtrl-sys-color-secondary);outline-offset:2px}.mtrl-fab-menu__item:focus-visible::before{content:\"\";position:absolute;inset:0;background-color:currentColor;opacity:.1;pointer-events:none;border-radius:inherit}.mtrl-fab-menu__item:active{position:relative}.mtrl-fab-menu__item:active:not(:has(>.mtrl-ripple))::before{content:\"\";position:absolute;inset:0;background-color:currentColor;opacity:.1;pointer-events:none;border-radius:inherit}.mtrl-fab-menu__item-content{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;gap:8px;box-sizing:border-box;min-width:56px;height:100%;padding:0 24px}.mtrl-fab-menu--open .mtrl-fab-menu__item{opacity:1;width:var(--mtrl-fab-menu-item-width, auto)}.mtrl-fab-menu__item-icon{display:inline-flex;width:24px;height:24px}.mtrl-fab-menu__item-icon svg{width:24px;height:24px;fill:currentColor}@media(prefers-reduced-motion: reduce){.mtrl-fab.mtrl-fab-menu__fab{transition:background-color 175ms linear(0, 0.075, 0.227, 0.39, 0.537, 0.657, 0.751, 0.822, 0.874, 0.912, 0.939, 0.958, 0.971, 0.98, 0.987, 0.991, 0.994, 0.996, 0.997, 0.998, 0.999, 0.999, 0.999, 1, 1),color 175ms linear(0, 0.075, 0.227, 0.39, 0.537, 0.657, 0.751, 0.822, 0.874, 0.912, 0.939, 0.958, 0.971, 0.98, 0.987, 0.991, 0.994, 0.996, 0.997, 0.998, 0.999, 0.999, 0.999, 1, 1)}.mtrl-fab-menu__item{transition:opacity 175ms linear(0, 0.075, 0.227, 0.39, 0.537, 0.657, 0.751, 0.822, 0.874, 0.912, 0.939, 0.958, 0.971, 0.98, 0.987, 0.991, 0.994, 0.996, 0.997, 0.998, 0.999, 0.999, 0.999, 1, 1)}}" });
5
+ registerStyles({ "fab-menu": ".mtrl-fab-menu{position:relative;display:inline-block;width:56px;height:56px;vertical-align:middle}.mtrl-fab-menu--medium{width:80px;height:80px}.mtrl-fab-menu--large{width:96px;height:96px}.mtrl-fab-menu--primary{--mtrl-fab-menu-close: var(--mtrl-sys-color-primary);--mtrl-fab-menu-on-close: var(--mtrl-sys-color-on-primary);--mtrl-fab-menu-item: var(--mtrl-sys-color-primary-container);--mtrl-fab-menu-on-item: var(--mtrl-sys-color-on-primary-container)}.mtrl-fab-menu--secondary{--mtrl-fab-menu-close: var(--mtrl-sys-color-secondary);--mtrl-fab-menu-on-close: var(--mtrl-sys-color-on-secondary);--mtrl-fab-menu-item: var(--mtrl-sys-color-secondary-container);--mtrl-fab-menu-on-item: var(--mtrl-sys-color-on-secondary-container)}.mtrl-fab-menu--tertiary{--mtrl-fab-menu-close: var(--mtrl-sys-color-tertiary);--mtrl-fab-menu-on-close: var(--mtrl-sys-color-on-tertiary);--mtrl-fab-menu-item: var(--mtrl-sys-color-tertiary-container);--mtrl-fab-menu-on-item: var(--mtrl-sys-color-on-tertiary-container)}.mtrl-fab-menu--bottom-end,.mtrl-fab-menu--bottom-start{--mtrl-fab-menu-margin: 16px;position:absolute;bottom:var(--mtrl-fab-menu-margin);z-index:50}@media(min-width: 1200px){.mtrl-fab-menu--bottom-end,.mtrl-fab-menu--bottom-start{--mtrl-fab-menu-margin: 24px}}.mtrl-fab-menu--bottom-end{inset-inline-end:var(--mtrl-fab-menu-margin)}.mtrl-fab-menu--bottom-start{inset-inline-start:var(--mtrl-fab-menu-margin)}.mtrl-fab-menu--bottom-start .mtrl-fab.mtrl-fab-menu__fab{inset-inline-start:0;inset-inline-end:auto}.mtrl-fab-menu--bottom-start .mtrl-fab-menu__list{inset-inline-start:0;inset-inline-end:auto;align-items:flex-start}.mtrl-fab-menu--bottom-start .mtrl-fab-menu__item{justify-content:flex-start}.mtrl-fab.mtrl-fab-menu__fab{position:absolute;inset-block-start:0;inset-inline-end:0;display:grid;place-items:center;transition:width 425ms linear(0, 0.102, 0.323, 0.57, 0.784, 0.942, 1.039, 1.085, 1.094, 1.082, 1.06, 1.037, 1.018, 1.004, 0.995, 0.992, 0.991, 0.992, 0.995, 0.997, 0.999, 1, 1.001, 1.001, 1),height 425ms linear(0, 0.102, 0.323, 0.57, 0.784, 0.942, 1.039, 1.085, 1.094, 1.082, 1.06, 1.037, 1.018, 1.004, 0.995, 0.992, 0.991, 0.992, 0.995, 0.997, 0.999, 1, 1.001, 1.001, 1),border-radius 425ms linear(0, 0.102, 0.323, 0.57, 0.784, 0.942, 1.039, 1.085, 1.094, 1.082, 1.06, 1.037, 1.018, 1.004, 0.995, 0.992, 0.991, 0.992, 0.995, 0.997, 0.999, 1, 1.001, 1.001, 1),background-color 425ms linear(0, 0.102, 0.323, 0.57, 0.784, 0.942, 1, 1, 1, 1, 1, 1, 1, 1, 0.995, 0.992, 0.991, 0.992, 0.995, 0.997, 0.999, 1, 1, 1, 1),color 425ms linear(0, 0.102, 0.323, 0.57, 0.784, 0.942, 1, 1, 1, 1, 1, 1, 1, 1, 0.995, 0.992, 0.991, 0.992, 0.995, 0.997, 0.999, 1, 1, 1, 1),box-shadow 425ms linear(0, 0.102, 0.323, 0.57, 0.784, 0.942, 1.039, 1.085, 1.094, 1.082, 1.06, 1.037, 1.018, 1.004, 0.995, 0.992, 0.991, 0.992, 0.995, 0.997, 0.999, 1, 1.001, 1.001, 1)}.mtrl-fab.mtrl-fab-menu__fab>*{grid-area:1/1}.mtrl-fab.mtrl-fab-menu__fab .mtrl-fab__icon,.mtrl-fab.mtrl-fab-menu__fab .mtrl-fab-menu__close{transition:visibility 0s linear 48ms}.mtrl-fab-menu__close{display:inline-flex;width:20px;height:20px;visibility:hidden}.mtrl-fab-menu__close svg{width:20px;height:20px;fill:currentColor}.mtrl-fab-menu--list.mtrl-fab-menu--open .mtrl-fab-menu__fab{width:56px;height:56px;border-radius:28px;background-color:var(--mtrl-fab-menu-close);color:var(--mtrl-fab-menu-on-close)}.mtrl-fab-menu--list.mtrl-fab-menu--open .mtrl-fab-menu__fab .mtrl-fab__icon{visibility:hidden}.mtrl-fab-menu--list.mtrl-fab-menu--open .mtrl-fab-menu__fab .mtrl-fab-menu__close{visibility:visible}.mtrl-fab-menu__list{position:absolute;bottom:calc(100% + 8px);inset-inline-end:0;display:flex;flex-direction:column;align-items:flex-end;gap:4px;overflow-y:auto;visibility:hidden;transition:visibility 0s linear var(--mtrl-fab-menu-exit, 0ms)}.mtrl-fab-menu--menu .mtrl-fab-menu__list{display:none}.mtrl-fab-menu--open .mtrl-fab-menu__list{visibility:visible;transition-delay:0s}.mtrl-fab-menu__item{position:relative;display:inline-flex;flex-shrink:0;justify-content:flex-end;box-sizing:border-box;width:0;height:56px;padding:0;border:none;border-radius:var(--mtrl-sys-shape-corner-full, 9999px);background-color:var(--mtrl-fab-menu-item);color:var(--mtrl-fab-menu-on-item);font-family:var(--mtrl-ref-typeface-brand, Roboto, sans-serif);font-size:16px;line-height:24px;letter-spacing:.15px;font-weight:500;white-space:nowrap;cursor:pointer;overflow:hidden;opacity:0;transition:opacity 175ms linear(0, 0.075, 0.227, 0.39, 0.537, 0.657, 0.751, 0.822, 0.874, 0.912, 0.939, 0.958, 0.971, 0.98, 0.987, 0.991, 0.994, 0.996, 0.997, 0.998, 0.999, 0.999, 0.999, 1, 1),width 425ms linear(0, 0.102, 0.323, 0.57, 0.784, 0.942, 1.039, 1.085, 1.094, 1.082, 1.06, 1.037, 1.018, 1.004, 0.995, 0.992, 0.991, 0.992, 0.995, 0.997, 0.999, 1, 1.001, 1.001, 1);transition-delay:var(--mtrl-fab-menu-delay, 0ms)}:where(.mtrl-fab-menu__item:hover){position:relative}.mtrl-fab-menu__item:hover::before{content:\"\";position:absolute;inset:0;background-color:currentColor;opacity:.08;pointer-events:none;border-radius:inherit}.mtrl-fab-menu__item:focus-visible{outline:2px solid var(--mtrl-sys-color-secondary);outline-offset:2px}:where(.mtrl-fab-menu__item:focus-visible){position:relative}.mtrl-fab-menu__item:focus-visible::before{content:\"\";position:absolute;inset:0;background-color:currentColor;opacity:.1;pointer-events:none;border-radius:inherit}:where(.mtrl-fab-menu__item:active){position:relative}.mtrl-fab-menu__item:active:not(:has(>.mtrl-ripple))::before{content:\"\";position:absolute;inset:0;background-color:currentColor;opacity:.1;pointer-events:none;border-radius:inherit}.mtrl-fab-menu__item-content{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;gap:8px;box-sizing:border-box;min-width:56px;height:100%;padding:0 24px}.mtrl-fab-menu--open .mtrl-fab-menu__item{opacity:1;width:var(--mtrl-fab-menu-item-width, auto)}.mtrl-fab-menu__item-icon{display:inline-flex;width:24px;height:24px}.mtrl-fab-menu__item-icon svg{width:24px;height:24px;fill:currentColor}@media(prefers-reduced-motion: reduce){.mtrl-fab.mtrl-fab-menu__fab{transition:background-color 175ms linear(0, 0.075, 0.227, 0.39, 0.537, 0.657, 0.751, 0.822, 0.874, 0.912, 0.939, 0.958, 0.971, 0.98, 0.987, 0.991, 0.994, 0.996, 0.997, 0.998, 0.999, 0.999, 0.999, 1, 1),color 175ms linear(0, 0.075, 0.227, 0.39, 0.537, 0.657, 0.751, 0.822, 0.874, 0.912, 0.939, 0.958, 0.971, 0.98, 0.987, 0.991, 0.994, 0.996, 0.997, 0.998, 0.999, 0.999, 0.999, 1, 1)}.mtrl-fab-menu__item{transition:opacity 175ms linear(0, 0.075, 0.227, 0.39, 0.537, 0.657, 0.751, 0.822, 0.874, 0.912, 0.939, 0.958, 0.971, 0.98, 0.987, 0.991, 0.994, 0.996, 0.997, 0.998, 0.999, 0.999, 0.999, 1, 1)}}" });
package/dist/elements/css/fab.css CHANGED
@@ -1 +1 @@
1
- .mtrl-fab{position:relative;display:inline-flex;align-items:center;justify-content:center;border:none;background-color:var(--mtrl-sys-color-primary-container);color:var(--mtrl-sys-color-on-primary-container);font:inherit;text-decoration:none;cursor:pointer;user-select:none;vertical-align:middle;appearance:none;overflow:hidden;box-shadow:0px 1px 3px rgba(0,0,0,.3),0px 4px 8px 3px rgba(0,0,0,.15);transition:transform 100ms cubic-bezier(0.2, 0, 0, 1),box-shadow 100ms cubic-bezier(0.2, 0, 0, 1),background-color 100ms cubic-bezier(0.2, 0, 0, 1),color 100ms cubic-bezier(0.2, 0, 0, 1);width:56px;height:56px;border-radius:var(--mtrl-sys-shape-corner-large, 16px)}.mtrl-fab:focus{outline:none}.mtrl-fab:focus-visible{outline:2px solid var(--mtrl-sys-color-outline);outline-offset:2px}.mtrl-fab__icon{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px}.mtrl-fab__icon svg{width:24px;height:24px}.mtrl-fab--medium{width:80px;height:80px;border-radius:var(--mtrl-sys-shape-corner-large-increased, 20px)}.mtrl-fab--medium .mtrl-fab__icon{width:28px;height:28px}.mtrl-fab--medium .mtrl-fab__icon svg{width:28px;height:28px}.mtrl-fab--large{width:96px;height:96px;border-radius:var(--mtrl-sys-shape-corner-extra-large, 28px)}.mtrl-fab--large .mtrl-fab__icon{width:32px;height:32px}.mtrl-fab--large .mtrl-fab__icon svg{width:32px;height:32px}.mtrl-fab--primary-container{background-color:var(--mtrl-sys-color-primary-container);color:var(--mtrl-sys-color-on-primary-container)}.mtrl-fab--secondary-container{background-color:var(--mtrl-sys-color-secondary-container);color:var(--mtrl-sys-color-on-secondary-container)}.mtrl-fab--tertiary-container{background-color:var(--mtrl-sys-color-tertiary-container);color:var(--mtrl-sys-color-on-tertiary-container)}.mtrl-fab--primary{background-color:var(--mtrl-sys-color-primary);color:var(--mtrl-sys-color-on-primary)}.mtrl-fab--secondary{background-color:var(--mtrl-sys-color-secondary);color:var(--mtrl-sys-color-on-secondary)}.mtrl-fab--tertiary{background-color:var(--mtrl-sys-color-tertiary);color:var(--mtrl-sys-color-on-tertiary)}.mtrl-fab:hover{position:relative;box-shadow:0px 2px 3px rgba(0,0,0,.3),0px 6px 10px 4px rgba(0,0,0,.15)}.mtrl-fab:hover::before{content:"";position:absolute;inset:0;background-color:currentColor;opacity:.08;pointer-events:none;border-radius:inherit}.mtrl-fab:focus-visible{position:relative;box-shadow:0px 1px 3px rgba(0,0,0,.3),0px 4px 8px 3px rgba(0,0,0,.15)}.mtrl-fab:focus-visible::before{content:"";position:absolute;inset:0;background-color:currentColor;opacity:.1;pointer-events:none;border-radius:inherit}.mtrl-fab:active{position:relative;box-shadow:0px 1px 3px rgba(0,0,0,.3),0px 4px 8px 3px rgba(0,0,0,.15)}.mtrl-fab:active:not(:has(>.mtrl-ripple))::before{content:"";position:absolute;inset:0;background-color:currentColor;opacity:.1;pointer-events:none;border-radius:inherit}.mtrl-fab.mtrl-fab--lowered{box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 1px 3px 1px rgba(0,0,0,.15)}.mtrl-fab.mtrl-fab--lowered:hover{box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 2px 6px 2px rgba(0,0,0,.15)}.mtrl-fab.mtrl-fab--lowered:focus-visible,.mtrl-fab.mtrl-fab--lowered:active{box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 1px 3px 1px rgba(0,0,0,.15)}.mtrl-fab:disabled,.mtrl-fab.mtrl-fab--disabled{pointer-events:none}.mtrl-fab:disabled,.mtrl-fab:disabled:hover,.mtrl-fab:disabled:focus-visible,.mtrl-fab:disabled:active,.mtrl-fab.mtrl-fab--disabled,.mtrl-fab.mtrl-fab--disabled:hover,.mtrl-fab.mtrl-fab--disabled:focus-visible,.mtrl-fab.mtrl-fab--disabled:active{box-shadow:none;color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 38%, transparent);background-color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 12%, transparent)}.mtrl-fab:disabled::before,.mtrl-fab.mtrl-fab--disabled::before{display:none}.mtrl-fab--top-right{position:fixed;top:16px;right:16px;z-index:600}.mtrl-fab--top-left{position:fixed;top:16px;left:16px;z-index:600}.mtrl-fab--bottom-right{position:fixed;bottom:16px;right:16px;z-index:600}.mtrl-fab--bottom-left{position:fixed;bottom:16px;left:16px;z-index:600}@keyframes fab-enter{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}.mtrl-fab--animate-enter{animation:fab-enter .3s cubic-bezier(0.05, 0.7, 0.1, 1) forwards}
1
+ .mtrl-fab{position:relative;display:inline-flex;align-items:center;justify-content:center;border:none;background-color:var(--mtrl-sys-color-primary-container);color:var(--mtrl-sys-color-on-primary-container);font:inherit;text-decoration:none;cursor:pointer;user-select:none;vertical-align:middle;appearance:none;overflow:hidden;box-shadow:0px 1px 3px rgba(0,0,0,.3),0px 4px 8px 3px rgba(0,0,0,.15);transition:transform 100ms cubic-bezier(0.2, 0, 0, 1),box-shadow 100ms cubic-bezier(0.2, 0, 0, 1),background-color 100ms cubic-bezier(0.2, 0, 0, 1),color 100ms cubic-bezier(0.2, 0, 0, 1);width:56px;height:56px;border-radius:var(--mtrl-sys-shape-corner-large, 16px)}.mtrl-fab:focus{outline:none}.mtrl-fab:focus-visible{outline:2px solid var(--mtrl-sys-color-outline);outline-offset:2px}.mtrl-fab__icon{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px}.mtrl-fab__icon svg{width:24px;height:24px}.mtrl-fab--medium{width:80px;height:80px;border-radius:var(--mtrl-sys-shape-corner-large-increased, 20px)}.mtrl-fab--medium .mtrl-fab__icon{width:28px;height:28px}.mtrl-fab--medium .mtrl-fab__icon svg{width:28px;height:28px}.mtrl-fab--large{width:96px;height:96px;border-radius:var(--mtrl-sys-shape-corner-extra-large, 28px)}.mtrl-fab--large .mtrl-fab__icon{width:32px;height:32px}.mtrl-fab--large .mtrl-fab__icon svg{width:32px;height:32px}.mtrl-fab--primary-container{background-color:var(--mtrl-sys-color-primary-container);color:var(--mtrl-sys-color-on-primary-container)}.mtrl-fab--secondary-container{background-color:var(--mtrl-sys-color-secondary-container);color:var(--mtrl-sys-color-on-secondary-container)}.mtrl-fab--tertiary-container{background-color:var(--mtrl-sys-color-tertiary-container);color:var(--mtrl-sys-color-on-tertiary-container)}.mtrl-fab--primary{background-color:var(--mtrl-sys-color-primary);color:var(--mtrl-sys-color-on-primary)}.mtrl-fab--secondary{background-color:var(--mtrl-sys-color-secondary);color:var(--mtrl-sys-color-on-secondary)}.mtrl-fab--tertiary{background-color:var(--mtrl-sys-color-tertiary);color:var(--mtrl-sys-color-on-tertiary)}.mtrl-fab:hover{box-shadow:0px 2px 3px rgba(0,0,0,.3),0px 6px 10px 4px rgba(0,0,0,.15)}:where(.mtrl-fab:hover){position:relative}.mtrl-fab:hover::before{content:"";position:absolute;inset:0;background-color:currentColor;opacity:.08;pointer-events:none;border-radius:inherit}.mtrl-fab:focus-visible{box-shadow:0px 1px 3px rgba(0,0,0,.3),0px 4px 8px 3px rgba(0,0,0,.15)}:where(.mtrl-fab:focus-visible){position:relative}.mtrl-fab:focus-visible::before{content:"";position:absolute;inset:0;background-color:currentColor;opacity:.1;pointer-events:none;border-radius:inherit}.mtrl-fab:active{box-shadow:0px 1px 3px rgba(0,0,0,.3),0px 4px 8px 3px rgba(0,0,0,.15)}:where(.mtrl-fab:active){position:relative}.mtrl-fab:active:not(:has(>.mtrl-ripple))::before{content:"";position:absolute;inset:0;background-color:currentColor;opacity:.1;pointer-events:none;border-radius:inherit}.mtrl-fab.mtrl-fab--lowered{box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 1px 3px 1px rgba(0,0,0,.15)}.mtrl-fab.mtrl-fab--lowered:hover{box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 2px 6px 2px rgba(0,0,0,.15)}.mtrl-fab.mtrl-fab--lowered:focus-visible,.mtrl-fab.mtrl-fab--lowered:active{box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 1px 3px 1px rgba(0,0,0,.15)}.mtrl-fab:disabled,.mtrl-fab.mtrl-fab--disabled{pointer-events:none}.mtrl-fab:disabled,.mtrl-fab:disabled:hover,.mtrl-fab:disabled:focus-visible,.mtrl-fab:disabled:active,.mtrl-fab.mtrl-fab--disabled,.mtrl-fab.mtrl-fab--disabled:hover,.mtrl-fab.mtrl-fab--disabled:focus-visible,.mtrl-fab.mtrl-fab--disabled:active{box-shadow:none;color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 38%, transparent);background-color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 12%, transparent)}.mtrl-fab:disabled::before,.mtrl-fab.mtrl-fab--disabled::before{display:none}.mtrl-fab--top-right{position:fixed;top:16px;right:16px;z-index:600}.mtrl-fab--top-left{position:fixed;top:16px;left:16px;z-index:600}.mtrl-fab--bottom-right{position:fixed;bottom:16px;right:16px;z-index:600}.mtrl-fab--bottom-left{position:fixed;bottom:16px;left:16px;z-index:600}@keyframes fab-enter{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}.mtrl-fab--animate-enter{animation:fab-enter .3s cubic-bezier(0.05, 0.7, 0.1, 1) forwards}
package/dist/elements/css/fab.js CHANGED
@@ -1,3 +1,3 @@
1
1
  import "./ripple.js";
2
2
  import { registerStyles } from "../styles.js";
3
- registerStyles({ "fab": ".mtrl-fab{position:relative;display:inline-flex;align-items:center;justify-content:center;border:none;background-color:var(--mtrl-sys-color-primary-container);color:var(--mtrl-sys-color-on-primary-container);font:inherit;text-decoration:none;cursor:pointer;user-select:none;vertical-align:middle;appearance:none;overflow:hidden;box-shadow:0px 1px 3px rgba(0,0,0,.3),0px 4px 8px 3px rgba(0,0,0,.15);transition:transform 100ms cubic-bezier(0.2, 0, 0, 1),box-shadow 100ms cubic-bezier(0.2, 0, 0, 1),background-color 100ms cubic-bezier(0.2, 0, 0, 1),color 100ms cubic-bezier(0.2, 0, 0, 1);width:56px;height:56px;border-radius:var(--mtrl-sys-shape-corner-large, 16px)}.mtrl-fab:focus{outline:none}.mtrl-fab:focus-visible{outline:2px solid var(--mtrl-sys-color-outline);outline-offset:2px}.mtrl-fab__icon{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px}.mtrl-fab__icon svg{width:24px;height:24px}.mtrl-fab--medium{width:80px;height:80px;border-radius:var(--mtrl-sys-shape-corner-large-increased, 20px)}.mtrl-fab--medium .mtrl-fab__icon{width:28px;height:28px}.mtrl-fab--medium .mtrl-fab__icon svg{width:28px;height:28px}.mtrl-fab--large{width:96px;height:96px;border-radius:var(--mtrl-sys-shape-corner-extra-large, 28px)}.mtrl-fab--large .mtrl-fab__icon{width:32px;height:32px}.mtrl-fab--large .mtrl-fab__icon svg{width:32px;height:32px}.mtrl-fab--primary-container{background-color:var(--mtrl-sys-color-primary-container);color:var(--mtrl-sys-color-on-primary-container)}.mtrl-fab--secondary-container{background-color:var(--mtrl-sys-color-secondary-container);color:var(--mtrl-sys-color-on-secondary-container)}.mtrl-fab--tertiary-container{background-color:var(--mtrl-sys-color-tertiary-container);color:var(--mtrl-sys-color-on-tertiary-container)}.mtrl-fab--primary{background-color:var(--mtrl-sys-color-primary);color:var(--mtrl-sys-color-on-primary)}.mtrl-fab--secondary{background-color:var(--mtrl-sys-color-secondary);color:var(--mtrl-sys-color-on-secondary)}.mtrl-fab--tertiary{background-color:var(--mtrl-sys-color-tertiary);color:var(--mtrl-sys-color-on-tertiary)}.mtrl-fab:hover{position:relative;box-shadow:0px 2px 3px rgba(0,0,0,.3),0px 6px 10px 4px rgba(0,0,0,.15)}.mtrl-fab:hover::before{content:\"\";position:absolute;inset:0;background-color:currentColor;opacity:.08;pointer-events:none;border-radius:inherit}.mtrl-fab:focus-visible{position:relative;box-shadow:0px 1px 3px rgba(0,0,0,.3),0px 4px 8px 3px rgba(0,0,0,.15)}.mtrl-fab:focus-visible::before{content:\"\";position:absolute;inset:0;background-color:currentColor;opacity:.1;pointer-events:none;border-radius:inherit}.mtrl-fab:active{position:relative;box-shadow:0px 1px 3px rgba(0,0,0,.3),0px 4px 8px 3px rgba(0,0,0,.15)}.mtrl-fab:active:not(:has(>.mtrl-ripple))::before{content:\"\";position:absolute;inset:0;background-color:currentColor;opacity:.1;pointer-events:none;border-radius:inherit}.mtrl-fab.mtrl-fab--lowered{box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 1px 3px 1px rgba(0,0,0,.15)}.mtrl-fab.mtrl-fab--lowered:hover{box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 2px 6px 2px rgba(0,0,0,.15)}.mtrl-fab.mtrl-fab--lowered:focus-visible,.mtrl-fab.mtrl-fab--lowered:active{box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 1px 3px 1px rgba(0,0,0,.15)}.mtrl-fab:disabled,.mtrl-fab.mtrl-fab--disabled{pointer-events:none}.mtrl-fab:disabled,.mtrl-fab:disabled:hover,.mtrl-fab:disabled:focus-visible,.mtrl-fab:disabled:active,.mtrl-fab.mtrl-fab--disabled,.mtrl-fab.mtrl-fab--disabled:hover,.mtrl-fab.mtrl-fab--disabled:focus-visible,.mtrl-fab.mtrl-fab--disabled:active{box-shadow:none;color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 38%, transparent);background-color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 12%, transparent)}.mtrl-fab:disabled::before,.mtrl-fab.mtrl-fab--disabled::before{display:none}.mtrl-fab--top-right{position:fixed;top:16px;right:16px;z-index:600}.mtrl-fab--top-left{position:fixed;top:16px;left:16px;z-index:600}.mtrl-fab--bottom-right{position:fixed;bottom:16px;right:16px;z-index:600}.mtrl-fab--bottom-left{position:fixed;bottom:16px;left:16px;z-index:600}@keyframes fab-enter{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}.mtrl-fab--animate-enter{animation:fab-enter .3s cubic-bezier(0.05, 0.7, 0.1, 1) forwards}" });
3
+ registerStyles({ "fab": ".mtrl-fab{position:relative;display:inline-flex;align-items:center;justify-content:center;border:none;background-color:var(--mtrl-sys-color-primary-container);color:var(--mtrl-sys-color-on-primary-container);font:inherit;text-decoration:none;cursor:pointer;user-select:none;vertical-align:middle;appearance:none;overflow:hidden;box-shadow:0px 1px 3px rgba(0,0,0,.3),0px 4px 8px 3px rgba(0,0,0,.15);transition:transform 100ms cubic-bezier(0.2, 0, 0, 1),box-shadow 100ms cubic-bezier(0.2, 0, 0, 1),background-color 100ms cubic-bezier(0.2, 0, 0, 1),color 100ms cubic-bezier(0.2, 0, 0, 1);width:56px;height:56px;border-radius:var(--mtrl-sys-shape-corner-large, 16px)}.mtrl-fab:focus{outline:none}.mtrl-fab:focus-visible{outline:2px solid var(--mtrl-sys-color-outline);outline-offset:2px}.mtrl-fab__icon{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px}.mtrl-fab__icon svg{width:24px;height:24px}.mtrl-fab--medium{width:80px;height:80px;border-radius:var(--mtrl-sys-shape-corner-large-increased, 20px)}.mtrl-fab--medium .mtrl-fab__icon{width:28px;height:28px}.mtrl-fab--medium .mtrl-fab__icon svg{width:28px;height:28px}.mtrl-fab--large{width:96px;height:96px;border-radius:var(--mtrl-sys-shape-corner-extra-large, 28px)}.mtrl-fab--large .mtrl-fab__icon{width:32px;height:32px}.mtrl-fab--large .mtrl-fab__icon svg{width:32px;height:32px}.mtrl-fab--primary-container{background-color:var(--mtrl-sys-color-primary-container);color:var(--mtrl-sys-color-on-primary-container)}.mtrl-fab--secondary-container{background-color:var(--mtrl-sys-color-secondary-container);color:var(--mtrl-sys-color-on-secondary-container)}.mtrl-fab--tertiary-container{background-color:var(--mtrl-sys-color-tertiary-container);color:var(--mtrl-sys-color-on-tertiary-container)}.mtrl-fab--primary{background-color:var(--mtrl-sys-color-primary);color:var(--mtrl-sys-color-on-primary)}.mtrl-fab--secondary{background-color:var(--mtrl-sys-color-secondary);color:var(--mtrl-sys-color-on-secondary)}.mtrl-fab--tertiary{background-color:var(--mtrl-sys-color-tertiary);color:var(--mtrl-sys-color-on-tertiary)}.mtrl-fab:hover{box-shadow:0px 2px 3px rgba(0,0,0,.3),0px 6px 10px 4px rgba(0,0,0,.15)}:where(.mtrl-fab:hover){position:relative}.mtrl-fab:hover::before{content:\"\";position:absolute;inset:0;background-color:currentColor;opacity:.08;pointer-events:none;border-radius:inherit}.mtrl-fab:focus-visible{box-shadow:0px 1px 3px rgba(0,0,0,.3),0px 4px 8px 3px rgba(0,0,0,.15)}:where(.mtrl-fab:focus-visible){position:relative}.mtrl-fab:focus-visible::before{content:\"\";position:absolute;inset:0;background-color:currentColor;opacity:.1;pointer-events:none;border-radius:inherit}.mtrl-fab:active{box-shadow:0px 1px 3px rgba(0,0,0,.3),0px 4px 8px 3px rgba(0,0,0,.15)}:where(.mtrl-fab:active){position:relative}.mtrl-fab:active:not(:has(>.mtrl-ripple))::before{content:\"\";position:absolute;inset:0;background-color:currentColor;opacity:.1;pointer-events:none;border-radius:inherit}.mtrl-fab.mtrl-fab--lowered{box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 1px 3px 1px rgba(0,0,0,.15)}.mtrl-fab.mtrl-fab--lowered:hover{box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 2px 6px 2px rgba(0,0,0,.15)}.mtrl-fab.mtrl-fab--lowered:focus-visible,.mtrl-fab.mtrl-fab--lowered:active{box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 1px 3px 1px rgba(0,0,0,.15)}.mtrl-fab:disabled,.mtrl-fab.mtrl-fab--disabled{pointer-events:none}.mtrl-fab:disabled,.mtrl-fab:disabled:hover,.mtrl-fab:disabled:focus-visible,.mtrl-fab:disabled:active,.mtrl-fab.mtrl-fab--disabled,.mtrl-fab.mtrl-fab--disabled:hover,.mtrl-fab.mtrl-fab--disabled:focus-visible,.mtrl-fab.mtrl-fab--disabled:active{box-shadow:none;color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 38%, transparent);background-color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 12%, transparent)}.mtrl-fab:disabled::before,.mtrl-fab.mtrl-fab--disabled::before{display:none}.mtrl-fab--top-right{position:fixed;top:16px;right:16px;z-index:600}.mtrl-fab--top-left{position:fixed;top:16px;left:16px;z-index:600}.mtrl-fab--bottom-right{position:fixed;bottom:16px;right:16px;z-index:600}.mtrl-fab--bottom-left{position:fixed;bottom:16px;left:16px;z-index:600}@keyframes fab-enter{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}.mtrl-fab--animate-enter{animation:fab-enter .3s cubic-bezier(0.05, 0.7, 0.1, 1) forwards}" });
package/dist/elements/css/hosts/switch.css CHANGED
@@ -1 +1 @@
1
- :host{display:inline-block}:host([hidden]){display:none}*,*::before,*::after{box-sizing:border-box}@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-property:opacity,color,background-color,border-color,outline-color,box-shadow,visibility!important;scroll-behavior:auto!important}}
1
+ :host{display:inline-block}:host([hidden]){display:none}*,*::before,*::after{box-sizing:border-box}@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-property:opacity,color,background-color,border-color,outline-color,box-shadow,visibility!important;scroll-behavior:auto!important}}:host{display:inline-flex}
package/dist/elements/css/hosts/text-field.css CHANGED
@@ -1 +1 @@
1
- :host{display:inline-block}:host([hidden]){display:none}*,*::before,*::after{box-sizing:border-box}@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-property:opacity,color,background-color,border-color,outline-color,box-shadow,visibility!important;scroll-behavior:auto!important}}:host>*{width:100%}
1
+ :host{display:inline-block}:host([hidden]){display:none}*,*::before,*::after{box-sizing:border-box}@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-property:opacity,color,background-color,border-color,outline-color,box-shadow,visibility!important;scroll-behavior:auto!important}}:host>*{width:100%}:host([type='hidden' i]){display:none}
package/dist/elements/css/icon-button.css CHANGED
@@ -1 +1 @@
1
- .mtrl-icon-button{position:relative;display:inline-flex;align-items:center;justify-content:center;border:none;background-color:rgba(0,0,0,0);color:var(--mtrl-sys-color-on-surface-variant);font:inherit;text-decoration:none;cursor:pointer;user-select:none;vertical-align:middle;appearance:none;overflow:visible;flex-shrink:0;width:40px;height:40px;border-radius:var(--mtrl-button-shape, 20px);transition:background-color 100ms cubic-bezier(0.2, 0, 0, 1),color 100ms cubic-bezier(0.2, 0, 0, 1),border-color 100ms cubic-bezier(0.2, 0, 0, 1),border-radius 50ms cubic-bezier(0.3, 0, 1, 1),transform 50ms cubic-bezier(0.3, 0, 1, 1),box-shadow 100ms cubic-bezier(0.2, 0, 0, 1)}.mtrl-icon-button:focus{outline:none}.mtrl-icon-button:focus-visible{outline:2px solid var(--mtrl-sys-color-outline);outline-offset:2px}.mtrl-icon-button::before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background-color:currentColor;opacity:0;pointer-events:none;border-radius:inherit;transition:opacity 100ms cubic-bezier(0.2, 0, 0, 1)}.mtrl-icon-button:hover::before{opacity:.08}.mtrl-icon-button:focus-visible::before{opacity:.1}.mtrl-icon-button:active:not(:has(>.mtrl-ripple))::before{opacity:.1}.mtrl-icon-button__icon,.mtrl-icon-button .mtrl-icon,.mtrl-icon-button .mtrl-icon-button__icon{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;pointer-events:none}.mtrl-icon-button__icon svg,.mtrl-icon-button .mtrl-icon svg,.mtrl-icon-button .mtrl-icon-button__icon svg{width:100%;height:100%}.mtrl-icon-button--xs{width:32px;height:32px}.mtrl-icon-button--xs .mtrl-icon,.mtrl-icon-button--xs .mtrl-icon-button__icon{width:20px;height:20px}.mtrl-icon-button--xs::after,.mtrl-icon-button--s::after{content:"";position:absolute;width:48px;height:48px;top:50%;left:50%;transform:translate(-50%, -50%)}.mtrl-icon-button--m{width:56px;height:56px}.mtrl-icon-button--m .mtrl-icon,.mtrl-icon-button--m .mtrl-icon-button__icon{width:24px;height:24px}.mtrl-icon-button--l{width:96px;height:96px}.mtrl-icon-button--l .mtrl-icon,.mtrl-icon-button--l .mtrl-icon-button__icon{width:32px;height:32px}.mtrl-icon-button--xl{width:136px;height:136px}.mtrl-icon-button--xl .mtrl-icon,.mtrl-icon-button--xl .mtrl-icon-button__icon{width:40px;height:40px}.mtrl-icon-button--round{border-radius:var(--mtrl-button-shape, 20px)}.mtrl-icon-button--round.mtrl-icon-button--xs{border-radius:var(--mtrl-button-shape, 16px)}.mtrl-icon-button--round.mtrl-icon-button--m{border-radius:var(--mtrl-button-shape, 28px)}.mtrl-icon-button--round.mtrl-icon-button--l{border-radius:var(--mtrl-button-shape, 48px)}.mtrl-icon-button--round.mtrl-icon-button--xl{border-radius:var(--mtrl-button-shape, 68px)}.mtrl-icon-button--square{border-radius:var(--mtrl-button-shape, var(--mtrl-sys-shape-corner-medium, 12px))}.mtrl-icon-button--square.mtrl-icon-button--xs{border-radius:var(--mtrl-button-shape, var(--mtrl-sys-shape-corner-medium, 12px))}.mtrl-icon-button--square.mtrl-icon-button--m{border-radius:var(--mtrl-button-shape, var(--mtrl-sys-shape-corner-large, 16px))}.mtrl-icon-button--square.mtrl-icon-button--l{border-radius:var(--mtrl-button-shape, var(--mtrl-sys-shape-corner-extra-large, 28px))}.mtrl-icon-button--square.mtrl-icon-button--xl{border-radius:var(--mtrl-button-shape, var(--mtrl-sys-shape-corner-extra-large, 28px))}.mtrl-icon-button:active.mtrl-icon-button--round{border-radius:var(--mtrl-button-shape-pressed, var(--mtrl-sys-shape-corner-small, 8px))}.mtrl-icon-button:active.mtrl-icon-button--round.mtrl-icon-button--xs{border-radius:var(--mtrl-button-shape-pressed, var(--mtrl-sys-shape-corner-small, 8px))}.mtrl-icon-button:active.mtrl-icon-button--round.mtrl-icon-button--m{border-radius:var(--mtrl-button-shape-pressed, var(--mtrl-sys-shape-corner-medium, 12px))}.mtrl-icon-button:active.mtrl-icon-button--round.mtrl-icon-button--l{border-radius:var(--mtrl-button-shape-pressed, var(--mtrl-sys-shape-corner-large, 16px))}.mtrl-icon-button:active.mtrl-icon-button--round.mtrl-icon-button--xl{border-radius:var(--mtrl-button-shape-pressed, var(--mtrl-sys-shape-corner-large, 16px))}.mtrl-icon-button:active.mtrl-icon-button--square{border-radius:var(--mtrl-button-shape-pressed, var(--mtrl-sys-shape-corner-small, 8px))}.mtrl-icon-button:active.mtrl-icon-button--square.mtrl-icon-button--xs{border-radius:var(--mtrl-button-shape-pressed, var(--mtrl-sys-shape-corner-small, 8px))}.mtrl-icon-button:active.mtrl-icon-button--square.mtrl-icon-button--m{border-radius:var(--mtrl-button-shape-pressed, var(--mtrl-sys-shape-corner-medium, 12px))}.mtrl-icon-button:active.mtrl-icon-button--square.mtrl-icon-button--l{border-radius:var(--mtrl-button-shape-pressed, var(--mtrl-sys-shape-corner-large, 16px))}.mtrl-icon-button:active.mtrl-icon-button--square.mtrl-icon-button--xl{border-radius:var(--mtrl-button-shape-pressed, var(--mtrl-sys-shape-corner-large, 16px))}.mtrl-icon-button--narrow{width:32px}.mtrl-icon-button--narrow.mtrl-icon-button--xs{width:28px}.mtrl-icon-button--narrow.mtrl-icon-button--m{width:48px}.mtrl-icon-button--narrow.mtrl-icon-button--l{width:64px}.mtrl-icon-button--narrow.mtrl-icon-button--xl{width:104px}.mtrl-icon-button--wide{width:52px}.mtrl-icon-button--wide.mtrl-icon-button--xs{width:40px}.mtrl-icon-button--wide.mtrl-icon-button--m{width:72px}.mtrl-icon-button--wide.mtrl-icon-button--l{width:128px}.mtrl-icon-button--wide.mtrl-icon-button--xl{width:184px}.mtrl-icon-button--standard{background-color:rgba(0,0,0,0);color:var(--mtrl-icon-button-standard-color, var(--mtrl-sys-color-on-surface-variant))}.mtrl-icon-button--standard.mtrl-icon-button--selected{background-color:var(--mtrl-icon-button-selected-container, transparent);color:var(--mtrl-icon-button-selected-color, var(--mtrl-sys-color-primary))}.mtrl-icon-button--filled{background-color:var(--mtrl-sys-color-primary);color:var(--mtrl-sys-color-on-primary)}.mtrl-icon-button--filled.mtrl-icon-button--toggle:not(.mtrl-icon-button--selected){background-color:var(--mtrl-sys-color-surface-container);color:var(--mtrl-sys-color-on-surface-variant)}.mtrl-icon-button--tonal{background-color:var(--mtrl-sys-color-secondary-container);color:var(--mtrl-sys-color-on-secondary-container)}.mtrl-icon-button--tonal.mtrl-icon-button--selected{background-color:var(--mtrl-icon-button-selected-container, var(--mtrl-sys-color-secondary));color:var(--mtrl-icon-button-selected-color, var(--mtrl-sys-color-on-secondary))}.mtrl-icon-button--outlined{background-color:rgba(0,0,0,0);color:var(--mtrl-sys-color-on-surface-variant);border:1px solid var(--mtrl-sys-color-outline-variant)}.mtrl-icon-button--outlined.mtrl-icon-button--xs{border-width:1px}.mtrl-icon-button--outlined.mtrl-icon-button--s{border-width:1px}.mtrl-icon-button--outlined.mtrl-icon-button--m{border-width:1px}.mtrl-icon-button--outlined.mtrl-icon-button--l{border-width:2px}.mtrl-icon-button--outlined.mtrl-icon-button--xl{border-width:3px}.mtrl-icon-button--outlined.mtrl-icon-button--selected{background-color:var(--mtrl-sys-color-inverse-surface);color:var(--mtrl-sys-color-inverse-on-surface);border-color:rgba(0,0,0,0)}.mtrl-icon-button--selected.mtrl-icon-button--round:not(:active){border-radius:var(--mtrl-button-shape-selected, var(--mtrl-sys-shape-corner-medium, 12px))}.mtrl-icon-button--selected.mtrl-icon-button--round:not(:active).mtrl-icon-button--xs{border-radius:var(--mtrl-button-shape-selected, var(--mtrl-sys-shape-corner-medium, 12px))}.mtrl-icon-button--selected.mtrl-icon-button--round:not(:active).mtrl-icon-button--m{border-radius:var(--mtrl-button-shape-selected, var(--mtrl-sys-shape-corner-large, 16px))}.mtrl-icon-button--selected.mtrl-icon-button--round:not(:active).mtrl-icon-button--l{border-radius:var(--mtrl-button-shape-selected, var(--mtrl-sys-shape-corner-extra-large, 28px))}.mtrl-icon-button--selected.mtrl-icon-button--round:not(:active).mtrl-icon-button--xl{border-radius:var(--mtrl-button-shape-selected, var(--mtrl-sys-shape-corner-extra-large, 28px))}.mtrl-icon-button--selected.mtrl-icon-button--square:not(:active){border-radius:var(--mtrl-button-shape-selected, 20px)}.mtrl-icon-button--selected.mtrl-icon-button--square:not(:active).mtrl-icon-button--xs{border-radius:var(--mtrl-button-shape-selected, 16px)}.mtrl-icon-button--selected.mtrl-icon-button--square:not(:active).mtrl-icon-button--m{border-radius:var(--mtrl-button-shape-selected, 28px)}.mtrl-icon-button--selected.mtrl-icon-button--square:not(:active).mtrl-icon-button--l{border-radius:var(--mtrl-button-shape-selected, 48px)}.mtrl-icon-button--selected.mtrl-icon-button--square:not(:active).mtrl-icon-button--xl{border-radius:var(--mtrl-button-shape-selected, 68px)}.mtrl-icon-button:disabled,.mtrl-icon-button.mtrl-icon-button--disabled{pointer-events:none;cursor:default}.mtrl-icon-button:disabled.mtrl-icon-button--standard,.mtrl-icon-button:disabled.mtrl-icon-button--filled,.mtrl-icon-button:disabled.mtrl-icon-button--tonal,.mtrl-icon-button:disabled.mtrl-icon-button--outlined,.mtrl-icon-button.mtrl-icon-button--disabled.mtrl-icon-button--standard,.mtrl-icon-button.mtrl-icon-button--disabled.mtrl-icon-button--filled,.mtrl-icon-button.mtrl-icon-button--disabled.mtrl-icon-button--tonal,.mtrl-icon-button.mtrl-icon-button--disabled.mtrl-icon-button--outlined{color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 38%, transparent)}.mtrl-icon-button:disabled.mtrl-icon-button--filled,.mtrl-icon-button:disabled.mtrl-icon-button--tonal,.mtrl-icon-button.mtrl-icon-button--disabled.mtrl-icon-button--filled,.mtrl-icon-button.mtrl-icon-button--disabled.mtrl-icon-button--tonal{background-color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 10%, transparent)}.mtrl-icon-button:disabled.mtrl-icon-button--outlined,.mtrl-icon-button.mtrl-icon-button--disabled.mtrl-icon-button--outlined{border-color:var(--mtrl-sys-color-outline-variant)}.mtrl-icon-button:disabled.mtrl-icon-button--outlined.mtrl-icon-button--selected,.mtrl-icon-button.mtrl-icon-button--disabled.mtrl-icon-button--outlined.mtrl-icon-button--selected{background-color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 10%, transparent);border-color:rgba(0,0,0,0)}.mtrl-icon-button:disabled::before,.mtrl-icon-button.mtrl-icon-button--disabled::before{display:none}
1
+ .mtrl-icon-button{position:relative;display:inline-flex;align-items:center;justify-content:center;border:none;padding:0;background-color:rgba(0,0,0,0);color:var(--mtrl-sys-color-on-surface-variant);font:inherit;text-decoration:none;cursor:pointer;user-select:none;vertical-align:middle;appearance:none;overflow:visible;flex-shrink:0;width:40px;height:40px;border-radius:var(--mtrl-button-shape, 20px);transition:background-color 100ms cubic-bezier(0.2, 0, 0, 1),color 100ms cubic-bezier(0.2, 0, 0, 1),border-color 100ms cubic-bezier(0.2, 0, 0, 1),border-radius 50ms cubic-bezier(0.3, 0, 1, 1),transform 50ms cubic-bezier(0.3, 0, 1, 1),box-shadow 100ms cubic-bezier(0.2, 0, 0, 1)}.mtrl-icon-button:focus{outline:none}.mtrl-icon-button:focus-visible{outline:2px solid var(--mtrl-sys-color-outline);outline-offset:2px}.mtrl-icon-button::before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background-color:currentColor;opacity:0;pointer-events:none;border-radius:inherit;transition:opacity 100ms cubic-bezier(0.2, 0, 0, 1)}.mtrl-icon-button:hover::before{opacity:.08}.mtrl-icon-button:focus-visible::before{opacity:.1}.mtrl-icon-button:active:not(:has(>.mtrl-ripple))::before{opacity:.1}.mtrl-icon-button__icon,.mtrl-icon-button .mtrl-icon,.mtrl-icon-button .mtrl-icon-button__icon{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;pointer-events:none}.mtrl-icon-button__icon svg,.mtrl-icon-button .mtrl-icon svg,.mtrl-icon-button .mtrl-icon-button__icon svg{width:100%;height:100%}.mtrl-icon-button--xs{width:32px;height:32px}.mtrl-icon-button--xs .mtrl-icon,.mtrl-icon-button--xs .mtrl-icon-button__icon{width:20px;height:20px}.mtrl-icon-button--xs::after,.mtrl-icon-button--s::after{content:"";position:absolute;width:48px;height:48px;top:50%;left:50%;transform:translate(-50%, -50%)}.mtrl-icon-button--m{width:56px;height:56px}.mtrl-icon-button--m .mtrl-icon,.mtrl-icon-button--m .mtrl-icon-button__icon{width:24px;height:24px}.mtrl-icon-button--l{width:96px;height:96px}.mtrl-icon-button--l .mtrl-icon,.mtrl-icon-button--l .mtrl-icon-button__icon{width:32px;height:32px}.mtrl-icon-button--xl{width:136px;height:136px}.mtrl-icon-button--xl .mtrl-icon,.mtrl-icon-button--xl .mtrl-icon-button__icon{width:40px;height:40px}.mtrl-icon-button--round{border-radius:var(--mtrl-button-shape, 20px)}.mtrl-icon-button--round.mtrl-icon-button--xs{border-radius:var(--mtrl-button-shape, 16px)}.mtrl-icon-button--round.mtrl-icon-button--m{border-radius:var(--mtrl-button-shape, 28px)}.mtrl-icon-button--round.mtrl-icon-button--l{border-radius:var(--mtrl-button-shape, 48px)}.mtrl-icon-button--round.mtrl-icon-button--xl{border-radius:var(--mtrl-button-shape, 68px)}.mtrl-icon-button--square{border-radius:var(--mtrl-button-shape, var(--mtrl-sys-shape-corner-medium, 12px))}.mtrl-icon-button--square.mtrl-icon-button--xs{border-radius:var(--mtrl-button-shape, var(--mtrl-sys-shape-corner-medium, 12px))}.mtrl-icon-button--square.mtrl-icon-button--m{border-radius:var(--mtrl-button-shape, var(--mtrl-sys-shape-corner-large, 16px))}.mtrl-icon-button--square.mtrl-icon-button--l{border-radius:var(--mtrl-button-shape, var(--mtrl-sys-shape-corner-extra-large, 28px))}.mtrl-icon-button--square.mtrl-icon-button--xl{border-radius:var(--mtrl-button-shape, var(--mtrl-sys-shape-corner-extra-large, 28px))}.mtrl-icon-button:active.mtrl-icon-button--round{border-radius:var(--mtrl-button-shape-pressed, var(--mtrl-sys-shape-corner-small, 8px))}.mtrl-icon-button:active.mtrl-icon-button--round.mtrl-icon-button--xs{border-radius:var(--mtrl-button-shape-pressed, var(--mtrl-sys-shape-corner-small, 8px))}.mtrl-icon-button:active.mtrl-icon-button--round.mtrl-icon-button--m{border-radius:var(--mtrl-button-shape-pressed, var(--mtrl-sys-shape-corner-medium, 12px))}.mtrl-icon-button:active.mtrl-icon-button--round.mtrl-icon-button--l{border-radius:var(--mtrl-button-shape-pressed, var(--mtrl-sys-shape-corner-large, 16px))}.mtrl-icon-button:active.mtrl-icon-button--round.mtrl-icon-button--xl{border-radius:var(--mtrl-button-shape-pressed, var(--mtrl-sys-shape-corner-large, 16px))}.mtrl-icon-button:active.mtrl-icon-button--square{border-radius:var(--mtrl-button-shape-pressed, var(--mtrl-sys-shape-corner-small, 8px))}.mtrl-icon-button:active.mtrl-icon-button--square.mtrl-icon-button--xs{border-radius:var(--mtrl-button-shape-pressed, var(--mtrl-sys-shape-corner-small, 8px))}.mtrl-icon-button:active.mtrl-icon-button--square.mtrl-icon-button--m{border-radius:var(--mtrl-button-shape-pressed, var(--mtrl-sys-shape-corner-medium, 12px))}.mtrl-icon-button:active.mtrl-icon-button--square.mtrl-icon-button--l{border-radius:var(--mtrl-button-shape-pressed, var(--mtrl-sys-shape-corner-large, 16px))}.mtrl-icon-button:active.mtrl-icon-button--square.mtrl-icon-button--xl{border-radius:var(--mtrl-button-shape-pressed, var(--mtrl-sys-shape-corner-large, 16px))}.mtrl-icon-button--narrow{width:32px}.mtrl-icon-button--narrow.mtrl-icon-button--xs{width:28px}.mtrl-icon-button--narrow.mtrl-icon-button--m{width:48px}.mtrl-icon-button--narrow.mtrl-icon-button--l{width:64px}.mtrl-icon-button--narrow.mtrl-icon-button--xl{width:104px}.mtrl-icon-button--wide{width:52px}.mtrl-icon-button--wide.mtrl-icon-button--xs{width:40px}.mtrl-icon-button--wide.mtrl-icon-button--m{width:72px}.mtrl-icon-button--wide.mtrl-icon-button--l{width:128px}.mtrl-icon-button--wide.mtrl-icon-button--xl{width:184px}.mtrl-icon-button--standard{background-color:rgba(0,0,0,0);color:var(--mtrl-icon-button-standard-color, var(--mtrl-sys-color-on-surface-variant))}.mtrl-icon-button--standard.mtrl-icon-button--selected{background-color:var(--mtrl-icon-button-selected-container, transparent);color:var(--mtrl-icon-button-selected-color, var(--mtrl-sys-color-primary))}.mtrl-icon-button--filled{background-color:var(--mtrl-sys-color-primary);color:var(--mtrl-sys-color-on-primary)}.mtrl-icon-button--filled.mtrl-icon-button--toggle:not(.mtrl-icon-button--selected){background-color:var(--mtrl-sys-color-surface-container);color:var(--mtrl-sys-color-on-surface-variant)}.mtrl-icon-button--tonal{background-color:var(--mtrl-sys-color-secondary-container);color:var(--mtrl-sys-color-on-secondary-container)}.mtrl-icon-button--tonal.mtrl-icon-button--selected{background-color:var(--mtrl-icon-button-selected-container, var(--mtrl-sys-color-secondary));color:var(--mtrl-icon-button-selected-color, var(--mtrl-sys-color-on-secondary))}.mtrl-icon-button--outlined{background-color:rgba(0,0,0,0);color:var(--mtrl-sys-color-on-surface-variant);border:1px solid var(--mtrl-sys-color-outline-variant)}.mtrl-icon-button--outlined.mtrl-icon-button--xs{border-width:1px}.mtrl-icon-button--outlined.mtrl-icon-button--s{border-width:1px}.mtrl-icon-button--outlined.mtrl-icon-button--m{border-width:1px}.mtrl-icon-button--outlined.mtrl-icon-button--l{border-width:2px}.mtrl-icon-button--outlined.mtrl-icon-button--xl{border-width:3px}.mtrl-icon-button--outlined.mtrl-icon-button--selected{background-color:var(--mtrl-sys-color-inverse-surface);color:var(--mtrl-sys-color-inverse-on-surface);border-color:rgba(0,0,0,0)}.mtrl-icon-button--selected.mtrl-icon-button--round:not(:active){border-radius:var(--mtrl-button-shape-selected, var(--mtrl-sys-shape-corner-medium, 12px))}.mtrl-icon-button--selected.mtrl-icon-button--round:not(:active).mtrl-icon-button--xs{border-radius:var(--mtrl-button-shape-selected, var(--mtrl-sys-shape-corner-medium, 12px))}.mtrl-icon-button--selected.mtrl-icon-button--round:not(:active).mtrl-icon-button--m{border-radius:var(--mtrl-button-shape-selected, var(--mtrl-sys-shape-corner-large, 16px))}.mtrl-icon-button--selected.mtrl-icon-button--round:not(:active).mtrl-icon-button--l{border-radius:var(--mtrl-button-shape-selected, var(--mtrl-sys-shape-corner-extra-large, 28px))}.mtrl-icon-button--selected.mtrl-icon-button--round:not(:active).mtrl-icon-button--xl{border-radius:var(--mtrl-button-shape-selected, var(--mtrl-sys-shape-corner-extra-large, 28px))}.mtrl-icon-button--selected.mtrl-icon-button--square:not(:active){border-radius:var(--mtrl-button-shape-selected, 20px)}.mtrl-icon-button--selected.mtrl-icon-button--square:not(:active).mtrl-icon-button--xs{border-radius:var(--mtrl-button-shape-selected, 16px)}.mtrl-icon-button--selected.mtrl-icon-button--square:not(:active).mtrl-icon-button--m{border-radius:var(--mtrl-button-shape-selected, 28px)}.mtrl-icon-button--selected.mtrl-icon-button--square:not(:active).mtrl-icon-button--l{border-radius:var(--mtrl-button-shape-selected, 48px)}.mtrl-icon-button--selected.mtrl-icon-button--square:not(:active).mtrl-icon-button--xl{border-radius:var(--mtrl-button-shape-selected, 68px)}.mtrl-icon-button:disabled,.mtrl-icon-button.mtrl-icon-button--disabled{pointer-events:none;cursor:default}.mtrl-icon-button:disabled.mtrl-icon-button--standard,.mtrl-icon-button:disabled.mtrl-icon-button--filled,.mtrl-icon-button:disabled.mtrl-icon-button--tonal,.mtrl-icon-button:disabled.mtrl-icon-button--outlined,.mtrl-icon-button.mtrl-icon-button--disabled.mtrl-icon-button--standard,.mtrl-icon-button.mtrl-icon-button--disabled.mtrl-icon-button--filled,.mtrl-icon-button.mtrl-icon-button--disabled.mtrl-icon-button--tonal,.mtrl-icon-button.mtrl-icon-button--disabled.mtrl-icon-button--outlined{color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 38%, transparent)}.mtrl-icon-button:disabled.mtrl-icon-button--filled,.mtrl-icon-button:disabled.mtrl-icon-button--tonal,.mtrl-icon-button.mtrl-icon-button--disabled.mtrl-icon-button--filled,.mtrl-icon-button.mtrl-icon-button--disabled.mtrl-icon-button--tonal{background-color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 10%, transparent)}.mtrl-icon-button:disabled.mtrl-icon-button--outlined,.mtrl-icon-button.mtrl-icon-button--disabled.mtrl-icon-button--outlined{border-color:var(--mtrl-sys-color-outline-variant)}.mtrl-icon-button:disabled.mtrl-icon-button--outlined.mtrl-icon-button--selected,.mtrl-icon-button.mtrl-icon-button--disabled.mtrl-icon-button--outlined.mtrl-icon-button--selected{background-color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 10%, transparent);border-color:rgba(0,0,0,0)}.mtrl-icon-button:disabled::before,.mtrl-icon-button.mtrl-icon-button--disabled::before{display:none}
package/dist/elements/css/icon-button.js CHANGED
@@ -1,3 +1,3 @@
1
1
  import "./ripple.js";
2
2
  import { registerStyles } from "../styles.js";
3
- registerStyles({ "icon-button": ".mtrl-icon-button{position:relative;display:inline-flex;align-items:center;justify-content:center;border:none;background-color:rgba(0,0,0,0);color:var(--mtrl-sys-color-on-surface-variant);font:inherit;text-decoration:none;cursor:pointer;user-select:none;vertical-align:middle;appearance:none;overflow:visible;flex-shrink:0;width:40px;height:40px;border-radius:var(--mtrl-button-shape, 20px);transition:background-color 100ms cubic-bezier(0.2, 0, 0, 1),color 100ms cubic-bezier(0.2, 0, 0, 1),border-color 100ms cubic-bezier(0.2, 0, 0, 1),border-radius 50ms cubic-bezier(0.3, 0, 1, 1),transform 50ms cubic-bezier(0.3, 0, 1, 1),box-shadow 100ms cubic-bezier(0.2, 0, 0, 1)}.mtrl-icon-button:focus{outline:none}.mtrl-icon-button:focus-visible{outline:2px solid var(--mtrl-sys-color-outline);outline-offset:2px}.mtrl-icon-button::before{content:\"\";position:absolute;top:0;left:0;right:0;bottom:0;background-color:currentColor;opacity:0;pointer-events:none;border-radius:inherit;transition:opacity 100ms cubic-bezier(0.2, 0, 0, 1)}.mtrl-icon-button:hover::before{opacity:.08}.mtrl-icon-button:focus-visible::before{opacity:.1}.mtrl-icon-button:active:not(:has(>.mtrl-ripple))::before{opacity:.1}.mtrl-icon-button__icon,.mtrl-icon-button .mtrl-icon,.mtrl-icon-button .mtrl-icon-button__icon{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;pointer-events:none}.mtrl-icon-button__icon svg,.mtrl-icon-button .mtrl-icon svg,.mtrl-icon-button .mtrl-icon-button__icon svg{width:100%;height:100%}.mtrl-icon-button--xs{width:32px;height:32px}.mtrl-icon-button--xs .mtrl-icon,.mtrl-icon-button--xs .mtrl-icon-button__icon{width:20px;height:20px}.mtrl-icon-button--xs::after,.mtrl-icon-button--s::after{content:\"\";position:absolute;width:48px;height:48px;top:50%;left:50%;transform:translate(-50%, -50%)}.mtrl-icon-button--m{width:56px;height:56px}.mtrl-icon-button--m .mtrl-icon,.mtrl-icon-button--m .mtrl-icon-button__icon{width:24px;height:24px}.mtrl-icon-button--l{width:96px;height:96px}.mtrl-icon-button--l .mtrl-icon,.mtrl-icon-button--l .mtrl-icon-button__icon{width:32px;height:32px}.mtrl-icon-button--xl{width:136px;height:136px}.mtrl-icon-button--xl .mtrl-icon,.mtrl-icon-button--xl .mtrl-icon-button__icon{width:40px;height:40px}.mtrl-icon-button--round{border-radius:var(--mtrl-button-shape, 20px)}.mtrl-icon-button--round.mtrl-icon-button--xs{border-radius:var(--mtrl-button-shape, 16px)}.mtrl-icon-button--round.mtrl-icon-button--m{border-radius:var(--mtrl-button-shape, 28px)}.mtrl-icon-button--round.mtrl-icon-button--l{border-radius:var(--mtrl-button-shape, 48px)}.mtrl-icon-button--round.mtrl-icon-button--xl{border-radius:var(--mtrl-button-shape, 68px)}.mtrl-icon-button--square{border-radius:var(--mtrl-button-shape, var(--mtrl-sys-shape-corner-medium, 12px))}.mtrl-icon-button--square.mtrl-icon-button--xs{border-radius:var(--mtrl-button-shape, var(--mtrl-sys-shape-corner-medium, 12px))}.mtrl-icon-button--square.mtrl-icon-button--m{border-radius:var(--mtrl-button-shape, var(--mtrl-sys-shape-corner-large, 16px))}.mtrl-icon-button--square.mtrl-icon-button--l{border-radius:var(--mtrl-button-shape, var(--mtrl-sys-shape-corner-extra-large, 28px))}.mtrl-icon-button--square.mtrl-icon-button--xl{border-radius:var(--mtrl-button-shape, var(--mtrl-sys-shape-corner-extra-large, 28px))}.mtrl-icon-button:active.mtrl-icon-button--round{border-radius:var(--mtrl-button-shape-pressed, var(--mtrl-sys-shape-corner-small, 8px))}.mtrl-icon-button:active.mtrl-icon-button--round.mtrl-icon-button--xs{border-radius:var(--mtrl-button-shape-pressed, var(--mtrl-sys-shape-corner-small, 8px))}.mtrl-icon-button:active.mtrl-icon-button--round.mtrl-icon-button--m{border-radius:var(--mtrl-button-shape-pressed, var(--mtrl-sys-shape-corner-medium, 12px))}.mtrl-icon-button:active.mtrl-icon-button--round.mtrl-icon-button--l{border-radius:var(--mtrl-button-shape-pressed, var(--mtrl-sys-shape-corner-large, 16px))}.mtrl-icon-button:active.mtrl-icon-button--round.mtrl-icon-button--xl{border-radius:var(--mtrl-button-shape-pressed, var(--mtrl-sys-shape-corner-large, 16px))}.mtrl-icon-button:active.mtrl-icon-button--square{border-radius:var(--mtrl-button-shape-pressed, var(--mtrl-sys-shape-corner-small, 8px))}.mtrl-icon-button:active.mtrl-icon-button--square.mtrl-icon-button--xs{border-radius:var(--mtrl-button-shape-pressed, var(--mtrl-sys-shape-corner-small, 8px))}.mtrl-icon-button:active.mtrl-icon-button--square.mtrl-icon-button--m{border-radius:var(--mtrl-button-shape-pressed, var(--mtrl-sys-shape-corner-medium, 12px))}.mtrl-icon-button:active.mtrl-icon-button--square.mtrl-icon-button--l{border-radius:var(--mtrl-button-shape-pressed, var(--mtrl-sys-shape-corner-large, 16px))}.mtrl-icon-button:active.mtrl-icon-button--square.mtrl-icon-button--xl{border-radius:var(--mtrl-button-shape-pressed, var(--mtrl-sys-shape-corner-large, 16px))}.mtrl-icon-button--narrow{width:32px}.mtrl-icon-button--narrow.mtrl-icon-button--xs{width:28px}.mtrl-icon-button--narrow.mtrl-icon-button--m{width:48px}.mtrl-icon-button--narrow.mtrl-icon-button--l{width:64px}.mtrl-icon-button--narrow.mtrl-icon-button--xl{width:104px}.mtrl-icon-button--wide{width:52px}.mtrl-icon-button--wide.mtrl-icon-button--xs{width:40px}.mtrl-icon-button--wide.mtrl-icon-button--m{width:72px}.mtrl-icon-button--wide.mtrl-icon-button--l{width:128px}.mtrl-icon-button--wide.mtrl-icon-button--xl{width:184px}.mtrl-icon-button--standard{background-color:rgba(0,0,0,0);color:var(--mtrl-icon-button-standard-color, var(--mtrl-sys-color-on-surface-variant))}.mtrl-icon-button--standard.mtrl-icon-button--selected{background-color:var(--mtrl-icon-button-selected-container, transparent);color:var(--mtrl-icon-button-selected-color, var(--mtrl-sys-color-primary))}.mtrl-icon-button--filled{background-color:var(--mtrl-sys-color-primary);color:var(--mtrl-sys-color-on-primary)}.mtrl-icon-button--filled.mtrl-icon-button--toggle:not(.mtrl-icon-button--selected){background-color:var(--mtrl-sys-color-surface-container);color:var(--mtrl-sys-color-on-surface-variant)}.mtrl-icon-button--tonal{background-color:var(--mtrl-sys-color-secondary-container);color:var(--mtrl-sys-color-on-secondary-container)}.mtrl-icon-button--tonal.mtrl-icon-button--selected{background-color:var(--mtrl-icon-button-selected-container, var(--mtrl-sys-color-secondary));color:var(--mtrl-icon-button-selected-color, var(--mtrl-sys-color-on-secondary))}.mtrl-icon-button--outlined{background-color:rgba(0,0,0,0);color:var(--mtrl-sys-color-on-surface-variant);border:1px solid var(--mtrl-sys-color-outline-variant)}.mtrl-icon-button--outlined.mtrl-icon-button--xs{border-width:1px}.mtrl-icon-button--outlined.mtrl-icon-button--s{border-width:1px}.mtrl-icon-button--outlined.mtrl-icon-button--m{border-width:1px}.mtrl-icon-button--outlined.mtrl-icon-button--l{border-width:2px}.mtrl-icon-button--outlined.mtrl-icon-button--xl{border-width:3px}.mtrl-icon-button--outlined.mtrl-icon-button--selected{background-color:var(--mtrl-sys-color-inverse-surface);color:var(--mtrl-sys-color-inverse-on-surface);border-color:rgba(0,0,0,0)}.mtrl-icon-button--selected.mtrl-icon-button--round:not(:active){border-radius:var(--mtrl-button-shape-selected, var(--mtrl-sys-shape-corner-medium, 12px))}.mtrl-icon-button--selected.mtrl-icon-button--round:not(:active).mtrl-icon-button--xs{border-radius:var(--mtrl-button-shape-selected, var(--mtrl-sys-shape-corner-medium, 12px))}.mtrl-icon-button--selected.mtrl-icon-button--round:not(:active).mtrl-icon-button--m{border-radius:var(--mtrl-button-shape-selected, var(--mtrl-sys-shape-corner-large, 16px))}.mtrl-icon-button--selected.mtrl-icon-button--round:not(:active).mtrl-icon-button--l{border-radius:var(--mtrl-button-shape-selected, var(--mtrl-sys-shape-corner-extra-large, 28px))}.mtrl-icon-button--selected.mtrl-icon-button--round:not(:active).mtrl-icon-button--xl{border-radius:var(--mtrl-button-shape-selected, var(--mtrl-sys-shape-corner-extra-large, 28px))}.mtrl-icon-button--selected.mtrl-icon-button--square:not(:active){border-radius:var(--mtrl-button-shape-selected, 20px)}.mtrl-icon-button--selected.mtrl-icon-button--square:not(:active).mtrl-icon-button--xs{border-radius:var(--mtrl-button-shape-selected, 16px)}.mtrl-icon-button--selected.mtrl-icon-button--square:not(:active).mtrl-icon-button--m{border-radius:var(--mtrl-button-shape-selected, 28px)}.mtrl-icon-button--selected.mtrl-icon-button--square:not(:active).mtrl-icon-button--l{border-radius:var(--mtrl-button-shape-selected, 48px)}.mtrl-icon-button--selected.mtrl-icon-button--square:not(:active).mtrl-icon-button--xl{border-radius:var(--mtrl-button-shape-selected, 68px)}.mtrl-icon-button:disabled,.mtrl-icon-button.mtrl-icon-button--disabled{pointer-events:none;cursor:default}.mtrl-icon-button:disabled.mtrl-icon-button--standard,.mtrl-icon-button:disabled.mtrl-icon-button--filled,.mtrl-icon-button:disabled.mtrl-icon-button--tonal,.mtrl-icon-button:disabled.mtrl-icon-button--outlined,.mtrl-icon-button.mtrl-icon-button--disabled.mtrl-icon-button--standard,.mtrl-icon-button.mtrl-icon-button--disabled.mtrl-icon-button--filled,.mtrl-icon-button.mtrl-icon-button--disabled.mtrl-icon-button--tonal,.mtrl-icon-button.mtrl-icon-button--disabled.mtrl-icon-button--outlined{color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 38%, transparent)}.mtrl-icon-button:disabled.mtrl-icon-button--filled,.mtrl-icon-button:disabled.mtrl-icon-button--tonal,.mtrl-icon-button.mtrl-icon-button--disabled.mtrl-icon-button--filled,.mtrl-icon-button.mtrl-icon-button--disabled.mtrl-icon-button--tonal{background-color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 10%, transparent)}.mtrl-icon-button:disabled.mtrl-icon-button--outlined,.mtrl-icon-button.mtrl-icon-button--disabled.mtrl-icon-button--outlined{border-color:var(--mtrl-sys-color-outline-variant)}.mtrl-icon-button:disabled.mtrl-icon-button--outlined.mtrl-icon-button--selected,.mtrl-icon-button.mtrl-icon-button--disabled.mtrl-icon-button--outlined.mtrl-icon-button--selected{background-color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 10%, transparent);border-color:rgba(0,0,0,0)}.mtrl-icon-button:disabled::before,.mtrl-icon-button.mtrl-icon-button--disabled::before{display:none}" });
3
+ registerStyles({ "icon-button": ".mtrl-icon-button{position:relative;display:inline-flex;align-items:center;justify-content:center;border:none;padding:0;background-color:rgba(0,0,0,0);color:var(--mtrl-sys-color-on-surface-variant);font:inherit;text-decoration:none;cursor:pointer;user-select:none;vertical-align:middle;appearance:none;overflow:visible;flex-shrink:0;width:40px;height:40px;border-radius:var(--mtrl-button-shape, 20px);transition:background-color 100ms cubic-bezier(0.2, 0, 0, 1),color 100ms cubic-bezier(0.2, 0, 0, 1),border-color 100ms cubic-bezier(0.2, 0, 0, 1),border-radius 50ms cubic-bezier(0.3, 0, 1, 1),transform 50ms cubic-bezier(0.3, 0, 1, 1),box-shadow 100ms cubic-bezier(0.2, 0, 0, 1)}.mtrl-icon-button:focus{outline:none}.mtrl-icon-button:focus-visible{outline:2px solid var(--mtrl-sys-color-outline);outline-offset:2px}.mtrl-icon-button::before{content:\"\";position:absolute;top:0;left:0;right:0;bottom:0;background-color:currentColor;opacity:0;pointer-events:none;border-radius:inherit;transition:opacity 100ms cubic-bezier(0.2, 0, 0, 1)}.mtrl-icon-button:hover::before{opacity:.08}.mtrl-icon-button:focus-visible::before{opacity:.1}.mtrl-icon-button:active:not(:has(>.mtrl-ripple))::before{opacity:.1}.mtrl-icon-button__icon,.mtrl-icon-button .mtrl-icon,.mtrl-icon-button .mtrl-icon-button__icon{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;pointer-events:none}.mtrl-icon-button__icon svg,.mtrl-icon-button .mtrl-icon svg,.mtrl-icon-button .mtrl-icon-button__icon svg{width:100%;height:100%}.mtrl-icon-button--xs{width:32px;height:32px}.mtrl-icon-button--xs .mtrl-icon,.mtrl-icon-button--xs .mtrl-icon-button__icon{width:20px;height:20px}.mtrl-icon-button--xs::after,.mtrl-icon-button--s::after{content:\"\";position:absolute;width:48px;height:48px;top:50%;left:50%;transform:translate(-50%, -50%)}.mtrl-icon-button--m{width:56px;height:56px}.mtrl-icon-button--m .mtrl-icon,.mtrl-icon-button--m .mtrl-icon-button__icon{width:24px;height:24px}.mtrl-icon-button--l{width:96px;height:96px}.mtrl-icon-button--l .mtrl-icon,.mtrl-icon-button--l .mtrl-icon-button__icon{width:32px;height:32px}.mtrl-icon-button--xl{width:136px;height:136px}.mtrl-icon-button--xl .mtrl-icon,.mtrl-icon-button--xl .mtrl-icon-button__icon{width:40px;height:40px}.mtrl-icon-button--round{border-radius:var(--mtrl-button-shape, 20px)}.mtrl-icon-button--round.mtrl-icon-button--xs{border-radius:var(--mtrl-button-shape, 16px)}.mtrl-icon-button--round.mtrl-icon-button--m{border-radius:var(--mtrl-button-shape, 28px)}.mtrl-icon-button--round.mtrl-icon-button--l{border-radius:var(--mtrl-button-shape, 48px)}.mtrl-icon-button--round.mtrl-icon-button--xl{border-radius:var(--mtrl-button-shape, 68px)}.mtrl-icon-button--square{border-radius:var(--mtrl-button-shape, var(--mtrl-sys-shape-corner-medium, 12px))}.mtrl-icon-button--square.mtrl-icon-button--xs{border-radius:var(--mtrl-button-shape, var(--mtrl-sys-shape-corner-medium, 12px))}.mtrl-icon-button--square.mtrl-icon-button--m{border-radius:var(--mtrl-button-shape, var(--mtrl-sys-shape-corner-large, 16px))}.mtrl-icon-button--square.mtrl-icon-button--l{border-radius:var(--mtrl-button-shape, var(--mtrl-sys-shape-corner-extra-large, 28px))}.mtrl-icon-button--square.mtrl-icon-button--xl{border-radius:var(--mtrl-button-shape, var(--mtrl-sys-shape-corner-extra-large, 28px))}.mtrl-icon-button:active.mtrl-icon-button--round{border-radius:var(--mtrl-button-shape-pressed, var(--mtrl-sys-shape-corner-small, 8px))}.mtrl-icon-button:active.mtrl-icon-button--round.mtrl-icon-button--xs{border-radius:var(--mtrl-button-shape-pressed, var(--mtrl-sys-shape-corner-small, 8px))}.mtrl-icon-button:active.mtrl-icon-button--round.mtrl-icon-button--m{border-radius:var(--mtrl-button-shape-pressed, var(--mtrl-sys-shape-corner-medium, 12px))}.mtrl-icon-button:active.mtrl-icon-button--round.mtrl-icon-button--l{border-radius:var(--mtrl-button-shape-pressed, var(--mtrl-sys-shape-corner-large, 16px))}.mtrl-icon-button:active.mtrl-icon-button--round.mtrl-icon-button--xl{border-radius:var(--mtrl-button-shape-pressed, var(--mtrl-sys-shape-corner-large, 16px))}.mtrl-icon-button:active.mtrl-icon-button--square{border-radius:var(--mtrl-button-shape-pressed, var(--mtrl-sys-shape-corner-small, 8px))}.mtrl-icon-button:active.mtrl-icon-button--square.mtrl-icon-button--xs{border-radius:var(--mtrl-button-shape-pressed, var(--mtrl-sys-shape-corner-small, 8px))}.mtrl-icon-button:active.mtrl-icon-button--square.mtrl-icon-button--m{border-radius:var(--mtrl-button-shape-pressed, var(--mtrl-sys-shape-corner-medium, 12px))}.mtrl-icon-button:active.mtrl-icon-button--square.mtrl-icon-button--l{border-radius:var(--mtrl-button-shape-pressed, var(--mtrl-sys-shape-corner-large, 16px))}.mtrl-icon-button:active.mtrl-icon-button--square.mtrl-icon-button--xl{border-radius:var(--mtrl-button-shape-pressed, var(--mtrl-sys-shape-corner-large, 16px))}.mtrl-icon-button--narrow{width:32px}.mtrl-icon-button--narrow.mtrl-icon-button--xs{width:28px}.mtrl-icon-button--narrow.mtrl-icon-button--m{width:48px}.mtrl-icon-button--narrow.mtrl-icon-button--l{width:64px}.mtrl-icon-button--narrow.mtrl-icon-button--xl{width:104px}.mtrl-icon-button--wide{width:52px}.mtrl-icon-button--wide.mtrl-icon-button--xs{width:40px}.mtrl-icon-button--wide.mtrl-icon-button--m{width:72px}.mtrl-icon-button--wide.mtrl-icon-button--l{width:128px}.mtrl-icon-button--wide.mtrl-icon-button--xl{width:184px}.mtrl-icon-button--standard{background-color:rgba(0,0,0,0);color:var(--mtrl-icon-button-standard-color, var(--mtrl-sys-color-on-surface-variant))}.mtrl-icon-button--standard.mtrl-icon-button--selected{background-color:var(--mtrl-icon-button-selected-container, transparent);color:var(--mtrl-icon-button-selected-color, var(--mtrl-sys-color-primary))}.mtrl-icon-button--filled{background-color:var(--mtrl-sys-color-primary);color:var(--mtrl-sys-color-on-primary)}.mtrl-icon-button--filled.mtrl-icon-button--toggle:not(.mtrl-icon-button--selected){background-color:var(--mtrl-sys-color-surface-container);color:var(--mtrl-sys-color-on-surface-variant)}.mtrl-icon-button--tonal{background-color:var(--mtrl-sys-color-secondary-container);color:var(--mtrl-sys-color-on-secondary-container)}.mtrl-icon-button--tonal.mtrl-icon-button--selected{background-color:var(--mtrl-icon-button-selected-container, var(--mtrl-sys-color-secondary));color:var(--mtrl-icon-button-selected-color, var(--mtrl-sys-color-on-secondary))}.mtrl-icon-button--outlined{background-color:rgba(0,0,0,0);color:var(--mtrl-sys-color-on-surface-variant);border:1px solid var(--mtrl-sys-color-outline-variant)}.mtrl-icon-button--outlined.mtrl-icon-button--xs{border-width:1px}.mtrl-icon-button--outlined.mtrl-icon-button--s{border-width:1px}.mtrl-icon-button--outlined.mtrl-icon-button--m{border-width:1px}.mtrl-icon-button--outlined.mtrl-icon-button--l{border-width:2px}.mtrl-icon-button--outlined.mtrl-icon-button--xl{border-width:3px}.mtrl-icon-button--outlined.mtrl-icon-button--selected{background-color:var(--mtrl-sys-color-inverse-surface);color:var(--mtrl-sys-color-inverse-on-surface);border-color:rgba(0,0,0,0)}.mtrl-icon-button--selected.mtrl-icon-button--round:not(:active){border-radius:var(--mtrl-button-shape-selected, var(--mtrl-sys-shape-corner-medium, 12px))}.mtrl-icon-button--selected.mtrl-icon-button--round:not(:active).mtrl-icon-button--xs{border-radius:var(--mtrl-button-shape-selected, var(--mtrl-sys-shape-corner-medium, 12px))}.mtrl-icon-button--selected.mtrl-icon-button--round:not(:active).mtrl-icon-button--m{border-radius:var(--mtrl-button-shape-selected, var(--mtrl-sys-shape-corner-large, 16px))}.mtrl-icon-button--selected.mtrl-icon-button--round:not(:active).mtrl-icon-button--l{border-radius:var(--mtrl-button-shape-selected, var(--mtrl-sys-shape-corner-extra-large, 28px))}.mtrl-icon-button--selected.mtrl-icon-button--round:not(:active).mtrl-icon-button--xl{border-radius:var(--mtrl-button-shape-selected, var(--mtrl-sys-shape-corner-extra-large, 28px))}.mtrl-icon-button--selected.mtrl-icon-button--square:not(:active){border-radius:var(--mtrl-button-shape-selected, 20px)}.mtrl-icon-button--selected.mtrl-icon-button--square:not(:active).mtrl-icon-button--xs{border-radius:var(--mtrl-button-shape-selected, 16px)}.mtrl-icon-button--selected.mtrl-icon-button--square:not(:active).mtrl-icon-button--m{border-radius:var(--mtrl-button-shape-selected, 28px)}.mtrl-icon-button--selected.mtrl-icon-button--square:not(:active).mtrl-icon-button--l{border-radius:var(--mtrl-button-shape-selected, 48px)}.mtrl-icon-button--selected.mtrl-icon-button--square:not(:active).mtrl-icon-button--xl{border-radius:var(--mtrl-button-shape-selected, 68px)}.mtrl-icon-button:disabled,.mtrl-icon-button.mtrl-icon-button--disabled{pointer-events:none;cursor:default}.mtrl-icon-button:disabled.mtrl-icon-button--standard,.mtrl-icon-button:disabled.mtrl-icon-button--filled,.mtrl-icon-button:disabled.mtrl-icon-button--tonal,.mtrl-icon-button:disabled.mtrl-icon-button--outlined,.mtrl-icon-button.mtrl-icon-button--disabled.mtrl-icon-button--standard,.mtrl-icon-button.mtrl-icon-button--disabled.mtrl-icon-button--filled,.mtrl-icon-button.mtrl-icon-button--disabled.mtrl-icon-button--tonal,.mtrl-icon-button.mtrl-icon-button--disabled.mtrl-icon-button--outlined{color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 38%, transparent)}.mtrl-icon-button:disabled.mtrl-icon-button--filled,.mtrl-icon-button:disabled.mtrl-icon-button--tonal,.mtrl-icon-button.mtrl-icon-button--disabled.mtrl-icon-button--filled,.mtrl-icon-button.mtrl-icon-button--disabled.mtrl-icon-button--tonal{background-color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 10%, transparent)}.mtrl-icon-button:disabled.mtrl-icon-button--outlined,.mtrl-icon-button.mtrl-icon-button--disabled.mtrl-icon-button--outlined{border-color:var(--mtrl-sys-color-outline-variant)}.mtrl-icon-button:disabled.mtrl-icon-button--outlined.mtrl-icon-button--selected,.mtrl-icon-button.mtrl-icon-button--disabled.mtrl-icon-button--outlined.mtrl-icon-button--selected{background-color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 10%, transparent);border-color:rgba(0,0,0,0)}.mtrl-icon-button:disabled::before,.mtrl-icon-button.mtrl-icon-button--disabled::before{display:none}" });
package/dist/elements/css/list.css CHANGED
@@ -1 +1 @@
1
- .mtrl-list{--mtrl-list-item-offset: 0px;position:relative;overflow:auto;background:var(--mtrl-sys-color-surface);color:var(--mtrl-sys-color-on-surface);padding-block:8px}.mtrl-list__content{display:flex;flex-direction:column}.mtrl-list__item{position:relative;display:flex;align-items:center;gap:16px;box-sizing:border-box;min-width:0;min-height:56px;padding:8px 16px;background:var(--mtrl-sys-color-surface);transform:translateY(var(--mtrl-list-item-offset))}.mtrl-list__item--two-line{min-height:72px}.mtrl-list__item--three-line{min-height:88px;padding-block:12px;align-items:flex-start}.mtrl-list__text{min-width:0;flex:1}.mtrl-list__headline{font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:16px;line-height:24px;letter-spacing:.5px;font-weight:400;color:var(--mtrl-sys-color-on-surface)}.mtrl-list__overline{font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:11px;line-height:16px;letter-spacing:.5px;font-weight:500;color:var(--mtrl-sys-color-on-surface-variant)}.mtrl-list__supporting{font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.25px;font-weight:400;color:var(--mtrl-sys-color-on-surface-variant)}.mtrl-list__headline,.mtrl-list__overline{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mtrl-list__supporting{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden;overflow-wrap:anywhere}.mtrl-list__item--three-line .mtrl-list__supporting{-webkit-line-clamp:2}.mtrl-list__item--three-line:has(.mtrl-list__overline) .mtrl-list__supporting{-webkit-line-clamp:1}.mtrl-list__leading,.mtrl-list__trailing{display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--mtrl-sys-color-on-surface-variant)}.mtrl-list__leading--icon,.mtrl-list__trailing--icon{width:24px;height:24px}.mtrl-list__leading--icon svg,.mtrl-list__trailing--icon svg{width:100%;height:100%}.mtrl-list__leading--avatar,.mtrl-list__trailing--avatar{width:40px;height:40px;overflow:hidden;border-radius:50%;background:var(--mtrl-sys-color-primary-container);color:var(--mtrl-sys-color-on-primary-container);font-family:var(--mtrl-ref-typeface-brand, Roboto, sans-serif);font-size:16px;line-height:24px;letter-spacing:.15px;font-weight:500}.mtrl-list__leading--image,.mtrl-list__trailing--image{width:56px;height:56px;overflow:hidden}.mtrl-list__leading--video,.mtrl-list__trailing--video{width:100px;height:56px;overflow:hidden;border-radius:var(--mtrl-sys-shape-corner-small, 8px)}.mtrl-list__leading--avatar img,.mtrl-list__leading--avatar svg,.mtrl-list__leading--avatar video,.mtrl-list__leading--image img,.mtrl-list__leading--image svg,.mtrl-list__leading--image video,.mtrl-list__leading--video img,.mtrl-list__leading--video svg,.mtrl-list__leading--video video,.mtrl-list__trailing--avatar img,.mtrl-list__trailing--avatar svg,.mtrl-list__trailing--avatar video,.mtrl-list__trailing--image img,.mtrl-list__trailing--image svg,.mtrl-list__trailing--image video,.mtrl-list__trailing--video img,.mtrl-list__trailing--video svg,.mtrl-list__trailing--video video{width:100%;height:100%;object-fit:cover}.mtrl-list__leading--text,.mtrl-list__trailing--text{font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:11px;line-height:16px;letter-spacing:.5px;font-weight:500;white-space:nowrap}.mtrl-list__item--three-line .mtrl-list__leading--video{width:114px;height:64px}.mtrl-list__action{appearance:none;position:absolute;inset:0;width:100%;height:100%;padding:0;margin:0;border:0;border-radius:inherit;background:rgba(0,0,0,0);cursor:pointer}.mtrl-list__action::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:var(--mtrl-sys-color-on-surface);opacity:0}.mtrl-list__action:hover:not(:disabled)::before{opacity:.08}.mtrl-list__action:active:not(:disabled)::before{opacity:.1}.mtrl-list__action:focus-visible{outline:2px solid var(--mtrl-sys-color-secondary);outline-offset:-2px}.mtrl-list__action:focus-visible::before{opacity:.1}.mtrl-list__action:disabled{cursor:default}.mtrl-list__item :is(button,input,select,textarea,a,[contenteditable=true],[data-list-control]):not(.mtrl-list__action){position:relative;z-index:1}.mtrl-list__item--selected{border-radius:var(--mtrl-sys-shape-corner-large, 16px);background:var(--mtrl-sys-color-secondary-container)}.mtrl-list__item--selected .mtrl-list__headline,.mtrl-list__item--selected .mtrl-list__overline,.mtrl-list__item--selected .mtrl-list__supporting,.mtrl-list__item--selected .mtrl-list__leading,.mtrl-list__item--selected .mtrl-list__trailing{color:var(--mtrl-sys-color-on-secondary-container)}.mtrl-list__item--selected .mtrl-list__action::before{background:var(--mtrl-sys-color-on-secondary-container)}.mtrl-list__item--disabled.mtrl-list__item--selected{background:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 38%, transparent)}.mtrl-list__item--disabled .mtrl-list__headline,.mtrl-list__item--disabled .mtrl-list__overline,.mtrl-list__item--disabled .mtrl-list__supporting,.mtrl-list__item--disabled .mtrl-list__leading,.mtrl-list__item--disabled .mtrl-list__trailing{color:var(--mtrl-sys-color-on-surface)}.mtrl-list__item--disabled .mtrl-list__text,.mtrl-list__item--disabled .mtrl-list__leading,.mtrl-list__item--disabled .mtrl-list__trailing{opacity:.38}.mtrl-list__divider{height:1px;min-height:1px;background:var(--mtrl-sys-color-outline-variant);margin-block:0}.mtrl-list__divider--inset{margin-inline-start:72px;margin-inline-end:16px}.mtrl-list__subheader{font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.1px;font-weight:500;color:var(--mtrl-sys-color-on-surface-variant);padding:16px 16px 8px}.mtrl-list__empty{font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.25px;font-weight:400;color:var(--mtrl-sys-color-on-surface-variant);padding:16px}
1
+ .mtrl-list{--mtrl-list-item-offset: 0px;position:relative;overflow:auto;color:var(--mtrl-sys-color-on-surface);padding-block:8px}.mtrl-list__content{display:flex;flex-direction:column}.mtrl-list__item{position:relative;display:flex;align-items:center;gap:16px;box-sizing:border-box;min-width:0;min-height:56px;padding:8px 16px;background:var(--mtrl-list-item-container-color, var(--mtrl-sys-color-surface));transform:translateY(var(--mtrl-list-item-offset))}.mtrl-list__item--two-line{min-height:72px}.mtrl-list__item--three-line{min-height:88px;padding-block:12px;align-items:flex-start}.mtrl-list__text{min-width:0;flex:1}.mtrl-list__headline{font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:16px;line-height:24px;letter-spacing:.5px;font-weight:400;color:var(--mtrl-sys-color-on-surface)}.mtrl-list__overline{font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:11px;line-height:16px;letter-spacing:.5px;font-weight:500;color:var(--mtrl-sys-color-on-surface-variant)}.mtrl-list__supporting{font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.25px;font-weight:400;color:var(--mtrl-sys-color-on-surface-variant)}.mtrl-list__headline,.mtrl-list__overline{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mtrl-list__supporting{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden;overflow-wrap:anywhere}.mtrl-list__item--three-line .mtrl-list__supporting{-webkit-line-clamp:2}.mtrl-list__item--three-line:has(.mtrl-list__overline) .mtrl-list__supporting{-webkit-line-clamp:1}.mtrl-list__leading,.mtrl-list__trailing{display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--mtrl-sys-color-on-surface-variant)}.mtrl-list__leading--icon,.mtrl-list__trailing--icon{width:24px;height:24px}.mtrl-list__leading--icon svg,.mtrl-list__trailing--icon svg{width:100%;height:100%}.mtrl-list__leading--avatar,.mtrl-list__trailing--avatar{width:40px;height:40px;overflow:hidden;border-radius:50%;background:var(--mtrl-sys-color-primary-container);color:var(--mtrl-sys-color-on-primary-container);font-family:var(--mtrl-ref-typeface-brand, Roboto, sans-serif);font-size:16px;line-height:24px;letter-spacing:.15px;font-weight:500}.mtrl-list__leading--image,.mtrl-list__trailing--image{width:56px;height:56px;overflow:hidden}.mtrl-list__leading--video,.mtrl-list__trailing--video{width:100px;height:56px;overflow:hidden;border-radius:var(--mtrl-sys-shape-corner-small, 8px)}.mtrl-list__leading--avatar img,.mtrl-list__leading--avatar svg,.mtrl-list__leading--avatar video,.mtrl-list__leading--image img,.mtrl-list__leading--image svg,.mtrl-list__leading--image video,.mtrl-list__leading--video img,.mtrl-list__leading--video svg,.mtrl-list__leading--video video,.mtrl-list__trailing--avatar img,.mtrl-list__trailing--avatar svg,.mtrl-list__trailing--avatar video,.mtrl-list__trailing--image img,.mtrl-list__trailing--image svg,.mtrl-list__trailing--image video,.mtrl-list__trailing--video img,.mtrl-list__trailing--video svg,.mtrl-list__trailing--video video{width:100%;height:100%;object-fit:cover}.mtrl-list__leading--text,.mtrl-list__trailing--text{font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:11px;line-height:16px;letter-spacing:.5px;font-weight:500;white-space:nowrap}.mtrl-list__item--three-line .mtrl-list__leading--video{width:114px;height:64px}.mtrl-list__action{appearance:none;position:absolute;inset:0;width:100%;height:100%;padding:0;margin:0;border:0;border-radius:inherit;background:rgba(0,0,0,0);cursor:pointer}.mtrl-list__action::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:var(--mtrl-sys-color-on-surface);opacity:0}.mtrl-list__action:hover:not(:disabled)::before{opacity:.08}.mtrl-list__action:active:not(:disabled)::before{opacity:.1}.mtrl-list__action:focus-visible{outline:2px solid var(--mtrl-sys-color-secondary);outline-offset:-2px}.mtrl-list__action:focus-visible::before{opacity:.1}.mtrl-list__action:disabled{cursor:default}.mtrl-list__item :is(button,input,select,textarea,a,[contenteditable=true],[data-list-control]):not(.mtrl-list__action){position:relative;z-index:1}.mtrl-list--segmented>.mtrl-list__content{gap:var(--mtrl-list-segmented-gap, 2px)}.mtrl-list--segmented>.mtrl-list__content>.mtrl-list__item{border-radius:var(--mtrl-list-item-shape, var(--mtrl-sys-shape-corner-extra-small, 4px))}.mtrl-list--segmented>.mtrl-list__content>.mtrl-list__item:not(.mtrl-list__item--selected){background:var(--mtrl-list-item-container-color, var(--mtrl-sys-color-surface-container))}.mtrl-list--segmented>.mtrl-list__content>.mtrl-list__item:first-child,.mtrl-list--segmented>.mtrl-list__content>:not(.mtrl-list__item)+.mtrl-list__item{border-start-start-radius:var(--mtrl-list-item-shape-outer, var(--mtrl-sys-shape-corner-large, 16px));border-start-end-radius:var(--mtrl-list-item-shape-outer, var(--mtrl-sys-shape-corner-large, 16px))}.mtrl-list--segmented>.mtrl-list__content>.mtrl-list__item:last-child,.mtrl-list--segmented>.mtrl-list__content>.mtrl-list__item:has(+:not(.mtrl-list__item)){border-end-start-radius:var(--mtrl-list-item-shape-outer, var(--mtrl-sys-shape-corner-large, 16px));border-end-end-radius:var(--mtrl-list-item-shape-outer, var(--mtrl-sys-shape-corner-large, 16px))}.mtrl-list--segmented>.mtrl-list__content>.mtrl-list__item:hover:not(.mtrl-list__item--disabled):not(.mtrl-list__item--selected){border-radius:var(--mtrl-list-item-shape-hover, var(--mtrl-sys-shape-corner-medium, 12px))}.mtrl-list--segmented>.mtrl-list__content>.mtrl-list__item:has(.mtrl-list__action:focus-visible):not(.mtrl-list__item--disabled):not(.mtrl-list__item--selected),.mtrl-list--segmented>.mtrl-list__content>.mtrl-list__item:active:not(.mtrl-list__item--disabled):not(.mtrl-list__item--selected),.mtrl-list--segmented>.mtrl-list__content>.mtrl-list__item.mtrl-list__item--selected{border-radius:var(--mtrl-list-item-shape-active, var(--mtrl-sys-shape-corner-large, 16px))}.mtrl-list__item--selected{background:var(--mtrl-sys-color-secondary-container)}.mtrl-list__item--selected .mtrl-list__headline,.mtrl-list__item--selected .mtrl-list__overline,.mtrl-list__item--selected .mtrl-list__supporting,.mtrl-list__item--selected .mtrl-list__leading,.mtrl-list__item--selected .mtrl-list__trailing{color:var(--mtrl-sys-color-on-secondary-container)}.mtrl-list__item--selected .mtrl-list__action::before{background:var(--mtrl-sys-color-on-secondary-container)}.mtrl-list__item--disabled.mtrl-list__item--selected{background:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 38%, transparent)}.mtrl-list__item--disabled .mtrl-list__headline,.mtrl-list__item--disabled .mtrl-list__overline,.mtrl-list__item--disabled .mtrl-list__supporting,.mtrl-list__item--disabled .mtrl-list__leading,.mtrl-list__item--disabled .mtrl-list__trailing{color:var(--mtrl-sys-color-on-surface)}.mtrl-list__item--disabled .mtrl-list__text,.mtrl-list__item--disabled .mtrl-list__leading,.mtrl-list__item--disabled .mtrl-list__trailing{opacity:.38}.mtrl-list__divider{height:1px;min-height:1px;background:var(--mtrl-sys-color-outline-variant);margin-block:0}.mtrl-list__divider--inset{margin-inline-start:72px;margin-inline-end:16px}.mtrl-list__subheader{font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.1px;font-weight:500;color:var(--mtrl-sys-color-on-surface-variant);padding:16px 16px 8px}.mtrl-list__empty{font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.25px;font-weight:400;color:var(--mtrl-sys-color-on-surface-variant);padding:16px}
package/dist/elements/css/list.js CHANGED
@@ -1,3 +1,3 @@
1
1
  import "./ripple.js";
2
2
  import { registerStyles } from "../styles.js";
3
- registerStyles({ "list": ".mtrl-list{--mtrl-list-item-offset: 0px;position:relative;overflow:auto;background:var(--mtrl-sys-color-surface);color:var(--mtrl-sys-color-on-surface);padding-block:8px}.mtrl-list__content{display:flex;flex-direction:column}.mtrl-list__item{position:relative;display:flex;align-items:center;gap:16px;box-sizing:border-box;min-width:0;min-height:56px;padding:8px 16px;background:var(--mtrl-sys-color-surface);transform:translateY(var(--mtrl-list-item-offset))}.mtrl-list__item--two-line{min-height:72px}.mtrl-list__item--three-line{min-height:88px;padding-block:12px;align-items:flex-start}.mtrl-list__text{min-width:0;flex:1}.mtrl-list__headline{font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:16px;line-height:24px;letter-spacing:.5px;font-weight:400;color:var(--mtrl-sys-color-on-surface)}.mtrl-list__overline{font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:11px;line-height:16px;letter-spacing:.5px;font-weight:500;color:var(--mtrl-sys-color-on-surface-variant)}.mtrl-list__supporting{font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.25px;font-weight:400;color:var(--mtrl-sys-color-on-surface-variant)}.mtrl-list__headline,.mtrl-list__overline{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mtrl-list__supporting{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden;overflow-wrap:anywhere}.mtrl-list__item--three-line .mtrl-list__supporting{-webkit-line-clamp:2}.mtrl-list__item--three-line:has(.mtrl-list__overline) .mtrl-list__supporting{-webkit-line-clamp:1}.mtrl-list__leading,.mtrl-list__trailing{display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--mtrl-sys-color-on-surface-variant)}.mtrl-list__leading--icon,.mtrl-list__trailing--icon{width:24px;height:24px}.mtrl-list__leading--icon svg,.mtrl-list__trailing--icon svg{width:100%;height:100%}.mtrl-list__leading--avatar,.mtrl-list__trailing--avatar{width:40px;height:40px;overflow:hidden;border-radius:50%;background:var(--mtrl-sys-color-primary-container);color:var(--mtrl-sys-color-on-primary-container);font-family:var(--mtrl-ref-typeface-brand, Roboto, sans-serif);font-size:16px;line-height:24px;letter-spacing:.15px;font-weight:500}.mtrl-list__leading--image,.mtrl-list__trailing--image{width:56px;height:56px;overflow:hidden}.mtrl-list__leading--video,.mtrl-list__trailing--video{width:100px;height:56px;overflow:hidden;border-radius:var(--mtrl-sys-shape-corner-small, 8px)}.mtrl-list__leading--avatar img,.mtrl-list__leading--avatar svg,.mtrl-list__leading--avatar video,.mtrl-list__leading--image img,.mtrl-list__leading--image svg,.mtrl-list__leading--image video,.mtrl-list__leading--video img,.mtrl-list__leading--video svg,.mtrl-list__leading--video video,.mtrl-list__trailing--avatar img,.mtrl-list__trailing--avatar svg,.mtrl-list__trailing--avatar video,.mtrl-list__trailing--image img,.mtrl-list__trailing--image svg,.mtrl-list__trailing--image video,.mtrl-list__trailing--video img,.mtrl-list__trailing--video svg,.mtrl-list__trailing--video video{width:100%;height:100%;object-fit:cover}.mtrl-list__leading--text,.mtrl-list__trailing--text{font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:11px;line-height:16px;letter-spacing:.5px;font-weight:500;white-space:nowrap}.mtrl-list__item--three-line .mtrl-list__leading--video{width:114px;height:64px}.mtrl-list__action{appearance:none;position:absolute;inset:0;width:100%;height:100%;padding:0;margin:0;border:0;border-radius:inherit;background:rgba(0,0,0,0);cursor:pointer}.mtrl-list__action::before{content:\"\";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:var(--mtrl-sys-color-on-surface);opacity:0}.mtrl-list__action:hover:not(:disabled)::before{opacity:.08}.mtrl-list__action:active:not(:disabled)::before{opacity:.1}.mtrl-list__action:focus-visible{outline:2px solid var(--mtrl-sys-color-secondary);outline-offset:-2px}.mtrl-list__action:focus-visible::before{opacity:.1}.mtrl-list__action:disabled{cursor:default}.mtrl-list__item :is(button,input,select,textarea,a,[contenteditable=true],[data-list-control]):not(.mtrl-list__action){position:relative;z-index:1}.mtrl-list__item--selected{border-radius:var(--mtrl-sys-shape-corner-large, 16px);background:var(--mtrl-sys-color-secondary-container)}.mtrl-list__item--selected .mtrl-list__headline,.mtrl-list__item--selected .mtrl-list__overline,.mtrl-list__item--selected .mtrl-list__supporting,.mtrl-list__item--selected .mtrl-list__leading,.mtrl-list__item--selected .mtrl-list__trailing{color:var(--mtrl-sys-color-on-secondary-container)}.mtrl-list__item--selected .mtrl-list__action::before{background:var(--mtrl-sys-color-on-secondary-container)}.mtrl-list__item--disabled.mtrl-list__item--selected{background:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 38%, transparent)}.mtrl-list__item--disabled .mtrl-list__headline,.mtrl-list__item--disabled .mtrl-list__overline,.mtrl-list__item--disabled .mtrl-list__supporting,.mtrl-list__item--disabled .mtrl-list__leading,.mtrl-list__item--disabled .mtrl-list__trailing{color:var(--mtrl-sys-color-on-surface)}.mtrl-list__item--disabled .mtrl-list__text,.mtrl-list__item--disabled .mtrl-list__leading,.mtrl-list__item--disabled .mtrl-list__trailing{opacity:.38}.mtrl-list__divider{height:1px;min-height:1px;background:var(--mtrl-sys-color-outline-variant);margin-block:0}.mtrl-list__divider--inset{margin-inline-start:72px;margin-inline-end:16px}.mtrl-list__subheader{font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.1px;font-weight:500;color:var(--mtrl-sys-color-on-surface-variant);padding:16px 16px 8px}.mtrl-list__empty{font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.25px;font-weight:400;color:var(--mtrl-sys-color-on-surface-variant);padding:16px}" });
3
+ registerStyles({ "list": ".mtrl-list{--mtrl-list-item-offset: 0px;position:relative;overflow:auto;color:var(--mtrl-sys-color-on-surface);padding-block:8px}.mtrl-list__content{display:flex;flex-direction:column}.mtrl-list__item{position:relative;display:flex;align-items:center;gap:16px;box-sizing:border-box;min-width:0;min-height:56px;padding:8px 16px;background:var(--mtrl-list-item-container-color, var(--mtrl-sys-color-surface));transform:translateY(var(--mtrl-list-item-offset))}.mtrl-list__item--two-line{min-height:72px}.mtrl-list__item--three-line{min-height:88px;padding-block:12px;align-items:flex-start}.mtrl-list__text{min-width:0;flex:1}.mtrl-list__headline{font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:16px;line-height:24px;letter-spacing:.5px;font-weight:400;color:var(--mtrl-sys-color-on-surface)}.mtrl-list__overline{font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:11px;line-height:16px;letter-spacing:.5px;font-weight:500;color:var(--mtrl-sys-color-on-surface-variant)}.mtrl-list__supporting{font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.25px;font-weight:400;color:var(--mtrl-sys-color-on-surface-variant)}.mtrl-list__headline,.mtrl-list__overline{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mtrl-list__supporting{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden;overflow-wrap:anywhere}.mtrl-list__item--three-line .mtrl-list__supporting{-webkit-line-clamp:2}.mtrl-list__item--three-line:has(.mtrl-list__overline) .mtrl-list__supporting{-webkit-line-clamp:1}.mtrl-list__leading,.mtrl-list__trailing{display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--mtrl-sys-color-on-surface-variant)}.mtrl-list__leading--icon,.mtrl-list__trailing--icon{width:24px;height:24px}.mtrl-list__leading--icon svg,.mtrl-list__trailing--icon svg{width:100%;height:100%}.mtrl-list__leading--avatar,.mtrl-list__trailing--avatar{width:40px;height:40px;overflow:hidden;border-radius:50%;background:var(--mtrl-sys-color-primary-container);color:var(--mtrl-sys-color-on-primary-container);font-family:var(--mtrl-ref-typeface-brand, Roboto, sans-serif);font-size:16px;line-height:24px;letter-spacing:.15px;font-weight:500}.mtrl-list__leading--image,.mtrl-list__trailing--image{width:56px;height:56px;overflow:hidden}.mtrl-list__leading--video,.mtrl-list__trailing--video{width:100px;height:56px;overflow:hidden;border-radius:var(--mtrl-sys-shape-corner-small, 8px)}.mtrl-list__leading--avatar img,.mtrl-list__leading--avatar svg,.mtrl-list__leading--avatar video,.mtrl-list__leading--image img,.mtrl-list__leading--image svg,.mtrl-list__leading--image video,.mtrl-list__leading--video img,.mtrl-list__leading--video svg,.mtrl-list__leading--video video,.mtrl-list__trailing--avatar img,.mtrl-list__trailing--avatar svg,.mtrl-list__trailing--avatar video,.mtrl-list__trailing--image img,.mtrl-list__trailing--image svg,.mtrl-list__trailing--image video,.mtrl-list__trailing--video img,.mtrl-list__trailing--video svg,.mtrl-list__trailing--video video{width:100%;height:100%;object-fit:cover}.mtrl-list__leading--text,.mtrl-list__trailing--text{font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:11px;line-height:16px;letter-spacing:.5px;font-weight:500;white-space:nowrap}.mtrl-list__item--three-line .mtrl-list__leading--video{width:114px;height:64px}.mtrl-list__action{appearance:none;position:absolute;inset:0;width:100%;height:100%;padding:0;margin:0;border:0;border-radius:inherit;background:rgba(0,0,0,0);cursor:pointer}.mtrl-list__action::before{content:\"\";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:var(--mtrl-sys-color-on-surface);opacity:0}.mtrl-list__action:hover:not(:disabled)::before{opacity:.08}.mtrl-list__action:active:not(:disabled)::before{opacity:.1}.mtrl-list__action:focus-visible{outline:2px solid var(--mtrl-sys-color-secondary);outline-offset:-2px}.mtrl-list__action:focus-visible::before{opacity:.1}.mtrl-list__action:disabled{cursor:default}.mtrl-list__item :is(button,input,select,textarea,a,[contenteditable=true],[data-list-control]):not(.mtrl-list__action){position:relative;z-index:1}.mtrl-list--segmented>.mtrl-list__content{gap:var(--mtrl-list-segmented-gap, 2px)}.mtrl-list--segmented>.mtrl-list__content>.mtrl-list__item{border-radius:var(--mtrl-list-item-shape, var(--mtrl-sys-shape-corner-extra-small, 4px))}.mtrl-list--segmented>.mtrl-list__content>.mtrl-list__item:not(.mtrl-list__item--selected){background:var(--mtrl-list-item-container-color, var(--mtrl-sys-color-surface-container))}.mtrl-list--segmented>.mtrl-list__content>.mtrl-list__item:first-child,.mtrl-list--segmented>.mtrl-list__content>:not(.mtrl-list__item)+.mtrl-list__item{border-start-start-radius:var(--mtrl-list-item-shape-outer, var(--mtrl-sys-shape-corner-large, 16px));border-start-end-radius:var(--mtrl-list-item-shape-outer, var(--mtrl-sys-shape-corner-large, 16px))}.mtrl-list--segmented>.mtrl-list__content>.mtrl-list__item:last-child,.mtrl-list--segmented>.mtrl-list__content>.mtrl-list__item:has(+:not(.mtrl-list__item)){border-end-start-radius:var(--mtrl-list-item-shape-outer, var(--mtrl-sys-shape-corner-large, 16px));border-end-end-radius:var(--mtrl-list-item-shape-outer, var(--mtrl-sys-shape-corner-large, 16px))}.mtrl-list--segmented>.mtrl-list__content>.mtrl-list__item:hover:not(.mtrl-list__item--disabled):not(.mtrl-list__item--selected){border-radius:var(--mtrl-list-item-shape-hover, var(--mtrl-sys-shape-corner-medium, 12px))}.mtrl-list--segmented>.mtrl-list__content>.mtrl-list__item:has(.mtrl-list__action:focus-visible):not(.mtrl-list__item--disabled):not(.mtrl-list__item--selected),.mtrl-list--segmented>.mtrl-list__content>.mtrl-list__item:active:not(.mtrl-list__item--disabled):not(.mtrl-list__item--selected),.mtrl-list--segmented>.mtrl-list__content>.mtrl-list__item.mtrl-list__item--selected{border-radius:var(--mtrl-list-item-shape-active, var(--mtrl-sys-shape-corner-large, 16px))}.mtrl-list__item--selected{background:var(--mtrl-sys-color-secondary-container)}.mtrl-list__item--selected .mtrl-list__headline,.mtrl-list__item--selected .mtrl-list__overline,.mtrl-list__item--selected .mtrl-list__supporting,.mtrl-list__item--selected .mtrl-list__leading,.mtrl-list__item--selected .mtrl-list__trailing{color:var(--mtrl-sys-color-on-secondary-container)}.mtrl-list__item--selected .mtrl-list__action::before{background:var(--mtrl-sys-color-on-secondary-container)}.mtrl-list__item--disabled.mtrl-list__item--selected{background:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 38%, transparent)}.mtrl-list__item--disabled .mtrl-list__headline,.mtrl-list__item--disabled .mtrl-list__overline,.mtrl-list__item--disabled .mtrl-list__supporting,.mtrl-list__item--disabled .mtrl-list__leading,.mtrl-list__item--disabled .mtrl-list__trailing{color:var(--mtrl-sys-color-on-surface)}.mtrl-list__item--disabled .mtrl-list__text,.mtrl-list__item--disabled .mtrl-list__leading,.mtrl-list__item--disabled .mtrl-list__trailing{opacity:.38}.mtrl-list__divider{height:1px;min-height:1px;background:var(--mtrl-sys-color-outline-variant);margin-block:0}.mtrl-list__divider--inset{margin-inline-start:72px;margin-inline-end:16px}.mtrl-list__subheader{font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.1px;font-weight:500;color:var(--mtrl-sys-color-on-surface-variant);padding:16px 16px 8px}.mtrl-list__empty{font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.25px;font-weight:400;color:var(--mtrl-sys-color-on-surface-variant);padding:16px}" });
package/dist/elements/css/menu.css CHANGED
@@ -1 +1 @@
1
- .mtrl-menu{font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.25px;font-weight:400;border-radius:var(--mtrl-sys-shape-corner-extra-small, 4px);position:fixed;z-index:700;min-width:112px;max-width:280px;padding:8px 0;background-color:var(--mtrl-sys-color-surface-container);color:var(--mtrl-sys-color-on-surface);box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 2px 6px 2px rgba(0,0,0,.15);overflow:hidden;display:flex;flex-direction:column;opacity:0;transform-origin:top center;transform:scaleY(0);pointer-events:none;visibility:hidden;transition:transform 250ms cubic-bezier(0.3, 0, 0, 1),opacity 250ms cubic-bezier(0.3, 0, 0, 1),visibility 250ms}.mtrl-menu[popover]{inset:auto;margin:0;border:0}.mtrl-menu--visible{opacity:1;transform:scaleY(1);pointer-events:auto;visibility:visible}.mtrl-menu--position-top,.mtrl-menu--position-top-start,.mtrl-menu--position-top-end{transform-origin:bottom center}.mtrl-menu--submenu{position:absolute;z-index:701}.mtrl-menu__group{display:block;list-style:none}.mtrl-menu__group>ul{margin:0;padding:0;list-style:none}.mtrl-menu__group+.mtrl-menu__group{margin-top:8px}.mtrl-menu__list{margin:0;padding:0;list-style:none;overflow-y:auto;flex:1 1 auto;min-height:0;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) rgba(0,0,0,.05);width:100%}.mtrl-menu__list::-webkit-scrollbar{width:8px}.mtrl-menu__list::-webkit-scrollbar-track{background:rgba(0,0,0,.05)}.mtrl-menu__list::-webkit-scrollbar-thumb{background:rgba(0,0,0,.2);border-radius:4px}.mtrl-menu__item{font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.1px;font-weight:500;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;position:relative;min-height:48px;padding:12px;padding-inline-end:40px;cursor:pointer;user-select:none;color:var(--mtrl-sys-color-on-surface);white-space:nowrap;text-overflow:ellipsis;overflow:hidden;width:100%;box-sizing:border-box}.mtrl-menu__item:hover{position:relative}.mtrl-menu__item:hover::before{content:"";position:absolute;inset:0;background-color:var(--mtrl-sys-color-on-surface);opacity:.08;pointer-events:none;border-radius:inherit}.mtrl-menu__item:focus{outline:none}.mtrl-menu__item:focus-visible,.mtrl-menu__item--active{position:relative}.mtrl-menu__item:focus-visible::before,.mtrl-menu__item--active::before{content:"";position:absolute;inset:0;background-color:var(--mtrl-sys-color-on-surface);opacity:.1;pointer-events:none;border-radius:inherit}.mtrl-menu__item:active{position:relative}.mtrl-menu__item:active:not(:has(>.mtrl-ripple))::before{content:"";position:absolute;inset:0;background-color:var(--mtrl-sys-color-on-surface);opacity:.1;pointer-events:none;border-radius:inherit}.mtrl-menu__item--submenu{padding-right:48px}.mtrl-menu__item--submenu::after{content:"";position:absolute;right:12px;top:50%;transform:translateY(-50%);width:24px;height:24px;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 17l5-5-5-5v10z'/%3E%3C/svg%3E") center/contain no-repeat;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 17l5-5-5-5v10z'/%3E%3C/svg%3E") center/contain no-repeat;background-color:currentColor;opacity:.87}.mtrl-menu__item--submenu[aria-expanded=true]{position:relative}.mtrl-menu__item--submenu[aria-expanded=true]::before{content:"";position:absolute;inset:0;background-color:var(--mtrl-sys-color-on-surface);opacity:.08;pointer-events:none;border-radius:inherit}.mtrl-menu__item--submenu[aria-expanded=true]::after{opacity:1}.mtrl-menu__item--disabled{cursor:default;color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 38%, transparent)}.mtrl-menu__item--disabled:hover::before,.mtrl-menu__item--disabled:active::before{opacity:0}.mtrl-menu__item--selected{background-color:var(--mtrl-sys-color-secondary-container);color:var(--mtrl-sys-color-on-secondary-container)}.mtrl-menu__item--selected:hover{position:relative}.mtrl-menu__item--selected:hover::before{content:"";position:absolute;inset:0;background-color:var(--mtrl-sys-color-on-secondary-container);opacity:.08;pointer-events:none;border-radius:inherit}.mtrl-menu__item--selected:focus-visible,.mtrl-menu__item--selected.mtrl-menu__item--active{position:relative}.mtrl-menu__item--selected:focus-visible::before,.mtrl-menu__item--selected.mtrl-menu__item--active::before{content:"";position:absolute;inset:0;background-color:var(--mtrl-sys-color-on-secondary-container);opacity:.1;pointer-events:none;border-radius:inherit}.mtrl-menu__item--selected:active{position:relative}.mtrl-menu__item--selected:active:not(:has(>.mtrl-ripple))::before{content:"";position:absolute;inset:0;background-color:var(--mtrl-sys-color-on-secondary-container);opacity:.1;pointer-events:none;border-radius:inherit}.mtrl-menu__item--selected .mtrl-menu__item-icon,.mtrl-menu__item--selected .mtrl-menu__item-shortcut{color:inherit}.mtrl-menu__item--selected::after{content:"";position:absolute;right:12px;top:50%;transform:translateY(-50%);width:18px;height:18px;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolyline points='20 6 9 17 4 12' stroke='white' stroke-width='2' fill='none'/%3E%3C/svg%3E") center/contain no-repeat;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolyline points='20 6 9 17 4 12' stroke='white' stroke-width='2' fill='none'/%3E%3C/svg%3E") center/contain no-repeat;background-color:currentColor}.mtrl-menu__item-content{display:flex;align-items:center;width:100%;overflow:hidden}.mtrl-menu__item-icon{margin-inline-end:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--mtrl-sys-color-on-surface-variant)}.mtrl-menu__item-icon svg{width:24px;height:24px}.mtrl-menu__item-text{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mtrl-menu__item-label{display:flex;flex-direction:column;justify-content:center;flex:1;min-width:0}.mtrl-menu__item-supporting{font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.25px;font-weight:400;color:var(--mtrl-sys-color-on-surface-variant);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mtrl-menu__item-shortcut{margin-left:12px;color:var(--mtrl-sys-color-on-surface-variant);flex-shrink:0}.mtrl-menu__divider{height:1px;flex-shrink:0;margin:8px 0;background-color:var(--mtrl-sys-color-outline-variant)}.mtrl-menu:focus-visible{outline:2px solid ".mtrl-menu__item:focus-visible";outline-offset:2px;box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 1px 3px 1px rgba(0,0,0,.15)}@media(prefers-reduced-motion: reduce){.mtrl-menu{transition:opacity 100ms linear,visibility 100ms}.mtrl-menu,.mtrl-menu--visible{transform:none}}@media(forced-colors: active){.mtrl-menu{border:1px solid CurrentColor}.mtrl-menu .mtrl-menu__divider{background-color:CurrentColor}.mtrl-menu .mtrl-menu__item--disabled{opacity:1;color:GrayText}}.mtrl-menu--dense{padding:4px 0}.mtrl-menu--dense .mtrl-menu__item{font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.25px;font-weight:400;min-height:32px;padding:4px 12px;padding-right:32px}.mtrl-menu--dense .mtrl-menu__item--submenu{padding-right:36px}.mtrl-menu--dense .mtrl-menu__item-icon svg{width:16px;height:16px}.mtrl-menu--dense .mtrl-menu__divider{margin:4px 0}.mtrl-menu--vertical{--mtrl-menu-container: var(--mtrl-sys-color-surface-container-low);--mtrl-menu-label: var(--mtrl-sys-color-on-surface);--mtrl-menu-supporting: var(--mtrl-sys-color-on-surface-variant);--mtrl-menu-selected-container: var(--mtrl-sys-color-tertiary-container);--mtrl-menu-selected-label: var(--mtrl-sys-color-on-tertiary-container);border-radius:var(--mtrl-sys-shape-corner-large, 16px);background-color:var(--mtrl-menu-container);color:var(--mtrl-menu-label);padding:4px}.mtrl-menu--vertical.mtrl-menu--vibrant{--mtrl-menu-container: var(--mtrl-sys-color-tertiary-container);--mtrl-menu-label: var(--mtrl-sys-color-on-tertiary-container);--mtrl-menu-supporting: var(--mtrl-sys-color-on-tertiary-container);--mtrl-menu-selected-container: var(--mtrl-sys-color-tertiary);--mtrl-menu-selected-label: var(--mtrl-sys-color-on-tertiary)}.mtrl-menu--vertical .mtrl-menu__list{display:flex;flex-direction:column;gap:2px}.mtrl-menu--vertical .mtrl-menu__item{font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:16px;line-height:24px;letter-spacing:.5px;font-weight:400;min-height:44px;padding:8px 16px;padding-inline-end:16px;color:var(--mtrl-menu-label);border-radius:var(--mtrl-sys-shape-corner-extra-small, 4px);transition:border-radius 425ms linear(0, 0.102, 0.323, 0.57, 0.784, 0.942, 1.039, 1.085, 1.094, 1.082, 1.06, 1.037, 1.018, 1.004, 0.995, 0.992, 0.991, 0.992, 0.995, 0.997, 0.999, 1, 1.001, 1.001, 1),background-color 100ms cubic-bezier(0.2, 0, 0, 1)}.mtrl-menu--vertical .mtrl-menu__item:hover,.mtrl-menu--vertical .mtrl-menu__item:focus-visible,.mtrl-menu--vertical .mtrl-menu__item--active,.mtrl-menu--vertical .mtrl-menu__item:active{border-radius:var(--mtrl-sys-shape-corner-medium, 12px)}.mtrl-menu--vertical .mtrl-menu__item:first-child{border-start-start-radius:var(--mtrl-sys-shape-corner-medium, 12px);border-start-end-radius:var(--mtrl-sys-shape-corner-medium, 12px)}.mtrl-menu--vertical .mtrl-menu__item:last-child{border-end-start-radius:var(--mtrl-sys-shape-corner-medium, 12px);border-end-end-radius:var(--mtrl-sys-shape-corner-medium, 12px)}.mtrl-menu--vertical .mtrl-menu__item--selected{background-color:var(--mtrl-menu-selected-container);color:var(--mtrl-menu-selected-label);border-radius:var(--mtrl-sys-shape-corner-medium, 12px)}.mtrl-menu--vertical .mtrl-menu__item--selected:hover{position:relative}.mtrl-menu--vertical .mtrl-menu__item--selected:hover::before{content:"";position:absolute;inset:0;background-color:var(--mtrl-menu-selected-label);opacity:.08;pointer-events:none;border-radius:inherit}.mtrl-menu--vertical .mtrl-menu__item--selected:focus-visible,.mtrl-menu--vertical .mtrl-menu__item--selected.mtrl-menu__item--active{position:relative}.mtrl-menu--vertical .mtrl-menu__item--selected:focus-visible::before,.mtrl-menu--vertical .mtrl-menu__item--selected.mtrl-menu__item--active::before{content:"";position:absolute;inset:0;background-color:var(--mtrl-menu-selected-label);opacity:.1;pointer-events:none;border-radius:inherit}.mtrl-menu--vertical .mtrl-menu__item--selected:active{position:relative}.mtrl-menu--vertical .mtrl-menu__item--selected:active:not(:has(>.mtrl-ripple))::before{content:"";position:absolute;inset:0;background-color:var(--mtrl-menu-selected-label);opacity:.1;pointer-events:none;border-radius:inherit}.mtrl-menu--vertical .mtrl-menu__item--disabled{color:color-mix(in srgb, var(--mtrl-menu-label) 38%, transparent)}.mtrl-menu--vertical .mtrl-menu__item-icon{color:var(--mtrl-menu-supporting);margin-inline-end:12px}.mtrl-menu--vertical .mtrl-menu__item-icon svg{width:20px;height:20px}.mtrl-menu--vertical .mtrl-menu__item-shortcut{font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:11px;line-height:16px;letter-spacing:.5px;font-weight:500;color:var(--mtrl-menu-supporting)}.mtrl-menu--vertical .mtrl-menu__item-label{display:flex;flex-direction:column;justify-content:center;flex:1;min-width:0}.mtrl-menu--vertical .mtrl-menu__item-supporting{font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.25px;font-weight:400;color:var(--mtrl-menu-supporting);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mtrl-menu--vertical .mtrl-menu__item--selected .mtrl-menu__item-icon,.mtrl-menu--vertical .mtrl-menu__item--selected .mtrl-menu__item-shortcut,.mtrl-menu--vertical .mtrl-menu__item--selected .mtrl-menu__item-supporting{color:inherit}.mtrl-menu--vertical .mtrl-menu__divider{margin:6px 0}.mtrl-menu--vertical:has(.mtrl-menu__group){background-color:rgba(0,0,0,0);box-shadow:none;padding:0;overflow:visible}.mtrl-menu--vertical:has(.mtrl-menu__group) .mtrl-menu__list{overflow:visible;gap:2px}.mtrl-menu--vertical:has(.mtrl-menu__group) .mtrl-menu__group{background-color:var(--mtrl-menu-container);padding:4px;box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 2px 6px 2px rgba(0,0,0,.15);border-radius:var(--mtrl-sys-shape-corner-small, 8px)}.mtrl-menu--vertical:has(.mtrl-menu__group) .mtrl-menu__group:first-child{border-start-start-radius:var(--mtrl-sys-shape-corner-large, 16px);border-start-end-radius:var(--mtrl-sys-shape-corner-large, 16px)}.mtrl-menu--vertical:has(.mtrl-menu__group) .mtrl-menu__group:last-child{border-end-start-radius:var(--mtrl-sys-shape-corner-large, 16px);border-end-end-radius:var(--mtrl-sys-shape-corner-large, 16px)}.mtrl-menu--vertical:has(.mtrl-menu__group) .mtrl-menu__group+.mtrl-menu__group{margin-top:0}.mtrl-menu--vertical:has(.mtrl-menu__group) .mtrl-menu__group>ul{display:flex;flex-direction:column;gap:2px}.mtrl-menu--vertical{transition:transform 250ms cubic-bezier(0.3, 0, 0, 1),opacity 250ms cubic-bezier(0.3, 0, 0, 1),visibility 250ms,border-radius 425ms linear(0, 0.102, 0.323, 0.57, 0.784, 0.942, 1.039, 1.085, 1.094, 1.082, 1.06, 1.037, 1.018, 1.004, 0.995, 0.992, 0.991, 0.992, 0.995, 0.997, 0.999, 1, 1.001, 1.001, 1)}.mtrl-menu--vertical.mtrl-menu--active{border-radius:24px}.mtrl-menu--vertical.mtrl-menu--inactive{border-radius:var(--mtrl-sys-shape-corner-small, 8px)}[dir=rtl] .mtrl-menu{transform-origin:top right}[dir=rtl] .mtrl-menu--position-top,[dir=rtl] .mtrl-menu--position-top-start,[dir=rtl] .mtrl-menu--position-top-end{transform-origin:bottom right}[dir=rtl] .mtrl-menu .mtrl-menu__item--submenu{padding-right:16px;padding-left:48px}[dir=rtl] .mtrl-menu .mtrl-menu__item--submenu::after{right:auto;left:16px;transform:translateY(-50%) rotate(180deg)}
1
+ .mtrl-menu{font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.25px;font-weight:400;border-radius:var(--mtrl-sys-shape-corner-extra-small, 4px);position:fixed;z-index:700;min-width:112px;max-width:280px;padding:8px 0;background-color:var(--mtrl-sys-color-surface-container);color:var(--mtrl-sys-color-on-surface);box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 2px 6px 2px rgba(0,0,0,.15);overflow:hidden;display:flex;flex-direction:column;opacity:0;transform-origin:top center;transform:scaleY(0);pointer-events:none;visibility:hidden;transition:transform 250ms cubic-bezier(0.3, 0, 0, 1),opacity 250ms cubic-bezier(0.3, 0, 0, 1),visibility 250ms}.mtrl-menu[popover]{inset:auto;margin:0;border:0}.mtrl-menu--visible{opacity:1;transform:scaleY(1);pointer-events:auto;visibility:visible}.mtrl-menu--position-top,.mtrl-menu--position-top-start,.mtrl-menu--position-top-end{transform-origin:bottom center}.mtrl-menu--submenu{position:absolute;z-index:701}.mtrl-menu__group{display:block;list-style:none}.mtrl-menu__group>ul{margin:0;padding:0;list-style:none}.mtrl-menu__group+.mtrl-menu__group{margin-top:8px}.mtrl-menu__list{margin:0;padding:0;list-style:none;overflow-y:auto;flex:1 1 auto;min-height:0;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) rgba(0,0,0,.05);width:100%}.mtrl-menu__list::-webkit-scrollbar{width:8px}.mtrl-menu__list::-webkit-scrollbar-track{background:rgba(0,0,0,.05)}.mtrl-menu__list::-webkit-scrollbar-thumb{background:rgba(0,0,0,.2);border-radius:4px}.mtrl-menu__item{font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.1px;font-weight:500;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;position:relative;min-height:48px;padding:12px;padding-inline-end:40px;cursor:pointer;user-select:none;color:var(--mtrl-sys-color-on-surface);white-space:nowrap;text-overflow:ellipsis;overflow:hidden;width:100%;box-sizing:border-box}:where(.mtrl-menu__item:hover){position:relative}.mtrl-menu__item:hover::before{content:"";position:absolute;inset:0;background-color:var(--mtrl-sys-color-on-surface);opacity:.08;pointer-events:none;border-radius:inherit}.mtrl-menu__item:focus{outline:none}:where(.mtrl-menu__item:focus-visible,.mtrl-menu__item--active){position:relative}.mtrl-menu__item:focus-visible::before,.mtrl-menu__item--active::before{content:"";position:absolute;inset:0;background-color:var(--mtrl-sys-color-on-surface);opacity:.1;pointer-events:none;border-radius:inherit}:where(.mtrl-menu__item:active){position:relative}.mtrl-menu__item:active:not(:has(>.mtrl-ripple))::before{content:"";position:absolute;inset:0;background-color:var(--mtrl-sys-color-on-surface);opacity:.1;pointer-events:none;border-radius:inherit}.mtrl-menu__item--submenu{padding-right:48px}.mtrl-menu__item--submenu::after{content:"";position:absolute;right:12px;top:50%;transform:translateY(-50%);width:24px;height:24px;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 17l5-5-5-5v10z'/%3E%3C/svg%3E") center/contain no-repeat;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 17l5-5-5-5v10z'/%3E%3C/svg%3E") center/contain no-repeat;background-color:currentColor;opacity:.87}:where(.mtrl-menu__item--submenu[aria-expanded=true]){position:relative}.mtrl-menu__item--submenu[aria-expanded=true]::before{content:"";position:absolute;inset:0;background-color:var(--mtrl-sys-color-on-surface);opacity:.08;pointer-events:none;border-radius:inherit}.mtrl-menu__item--submenu[aria-expanded=true]::after{opacity:1}.mtrl-menu__item--disabled{cursor:default;color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 38%, transparent)}.mtrl-menu__item--disabled:hover::before,.mtrl-menu__item--disabled:active::before{opacity:0}.mtrl-menu__item--selected{background-color:var(--mtrl-sys-color-secondary-container);color:var(--mtrl-sys-color-on-secondary-container)}:where(.mtrl-menu__item--selected:hover){position:relative}.mtrl-menu__item--selected:hover::before{content:"";position:absolute;inset:0;background-color:var(--mtrl-sys-color-on-secondary-container);opacity:.08;pointer-events:none;border-radius:inherit}:where(.mtrl-menu__item--selected:focus-visible,.mtrl-menu__item--selected.mtrl-menu__item--active){position:relative}.mtrl-menu__item--selected:focus-visible::before,.mtrl-menu__item--selected.mtrl-menu__item--active::before{content:"";position:absolute;inset:0;background-color:var(--mtrl-sys-color-on-secondary-container);opacity:.1;pointer-events:none;border-radius:inherit}:where(.mtrl-menu__item--selected:active){position:relative}.mtrl-menu__item--selected:active:not(:has(>.mtrl-ripple))::before{content:"";position:absolute;inset:0;background-color:var(--mtrl-sys-color-on-secondary-container);opacity:.1;pointer-events:none;border-radius:inherit}.mtrl-menu__item--selected .mtrl-menu__item-icon,.mtrl-menu__item--selected .mtrl-menu__item-shortcut{color:inherit}.mtrl-menu__item--selected::after{content:"";position:absolute;left:12px;right:12px;margin-inline-start:auto;top:50%;transform:translateY(-50%);width:18px;height:18px;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolyline points='20 6 9 17 4 12' stroke='white' stroke-width='2' fill='none'/%3E%3C/svg%3E") center/contain no-repeat;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolyline points='20 6 9 17 4 12' stroke='white' stroke-width='2' fill='none'/%3E%3C/svg%3E") center/contain no-repeat;background-color:currentColor}.mtrl-menu__item-content{display:flex;align-items:center;width:100%;overflow:hidden}.mtrl-menu__item-icon{margin-inline-end:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--mtrl-sys-color-on-surface-variant)}.mtrl-menu__item-icon svg{width:24px;height:24px}.mtrl-menu__item-text{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mtrl-menu__item-label{display:flex;flex-direction:column;justify-content:center;flex:1;min-width:0}.mtrl-menu__item-supporting{font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.25px;font-weight:400;color:var(--mtrl-sys-color-on-surface-variant);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mtrl-menu__item-shortcut{margin-left:12px;color:var(--mtrl-sys-color-on-surface-variant);flex-shrink:0}.mtrl-menu__divider{height:1px;flex-shrink:0;margin:8px 0;background-color:var(--mtrl-sys-color-outline-variant)}.mtrl-menu:focus-visible{outline:2px solid ".mtrl-menu__item:focus-visible";outline-offset:2px;box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 1px 3px 1px rgba(0,0,0,.15)}@media(prefers-reduced-motion: reduce){.mtrl-menu{transition:opacity 100ms linear,visibility 100ms}.mtrl-menu,.mtrl-menu--visible{transform:none}}@media(forced-colors: active){.mtrl-menu{border:1px solid CurrentColor}.mtrl-menu .mtrl-menu__divider{background-color:CurrentColor}.mtrl-menu .mtrl-menu__item--disabled{opacity:1;color:GrayText}}.mtrl-menu--dense{padding:4px 0}.mtrl-menu--dense .mtrl-menu__item{font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.25px;font-weight:400;min-height:32px;padding:4px 12px;padding-right:32px}.mtrl-menu--dense .mtrl-menu__item--submenu{padding-right:36px}.mtrl-menu--dense .mtrl-menu__item-icon svg{width:16px;height:16px}.mtrl-menu--dense .mtrl-menu__divider{margin:4px 0}.mtrl-menu--vertical{--mtrl-menu-container: var(--mtrl-sys-color-surface-container-low);--mtrl-menu-label: var(--mtrl-sys-color-on-surface);--mtrl-menu-supporting: var(--mtrl-sys-color-on-surface-variant);--mtrl-menu-selected-container: var(--mtrl-sys-color-tertiary-container);--mtrl-menu-selected-label: var(--mtrl-sys-color-on-tertiary-container);border-radius:var(--mtrl-sys-shape-corner-large, 16px);background-color:var(--mtrl-menu-container);color:var(--mtrl-menu-label);padding:4px}.mtrl-menu--vertical.mtrl-menu--vibrant{--mtrl-menu-container: var(--mtrl-sys-color-tertiary-container);--mtrl-menu-label: var(--mtrl-sys-color-on-tertiary-container);--mtrl-menu-supporting: var(--mtrl-sys-color-on-tertiary-container);--mtrl-menu-selected-container: var(--mtrl-sys-color-tertiary);--mtrl-menu-selected-label: var(--mtrl-sys-color-on-tertiary)}.mtrl-menu--vertical .mtrl-menu__list{display:flex;flex-direction:column;gap:2px}.mtrl-menu--vertical .mtrl-menu__item{font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:16px;line-height:24px;letter-spacing:.5px;font-weight:400;min-height:44px;padding:8px 16px;padding-inline-end:16px;color:var(--mtrl-menu-label);border-radius:var(--mtrl-sys-shape-corner-extra-small, 4px);transition:border-radius 425ms linear(0, 0.102, 0.323, 0.57, 0.784, 0.942, 1.039, 1.085, 1.094, 1.082, 1.06, 1.037, 1.018, 1.004, 0.995, 0.992, 0.991, 0.992, 0.995, 0.997, 0.999, 1, 1.001, 1.001, 1),background-color 100ms cubic-bezier(0.2, 0, 0, 1)}.mtrl-menu--vertical .mtrl-menu__item:hover,.mtrl-menu--vertical .mtrl-menu__item:focus-visible,.mtrl-menu--vertical .mtrl-menu__item--active,.mtrl-menu--vertical .mtrl-menu__item:active{border-radius:var(--mtrl-sys-shape-corner-medium, 12px)}.mtrl-menu--vertical .mtrl-menu__item:first-child{border-start-start-radius:var(--mtrl-sys-shape-corner-medium, 12px);border-start-end-radius:var(--mtrl-sys-shape-corner-medium, 12px)}.mtrl-menu--vertical .mtrl-menu__item:last-child{border-end-start-radius:var(--mtrl-sys-shape-corner-medium, 12px);border-end-end-radius:var(--mtrl-sys-shape-corner-medium, 12px)}.mtrl-menu--vertical .mtrl-menu__item--selected{background-color:var(--mtrl-menu-selected-container);color:var(--mtrl-menu-selected-label);border-radius:var(--mtrl-sys-shape-corner-medium, 12px)}:where(.mtrl-menu--vertical .mtrl-menu__item--selected:hover){position:relative}.mtrl-menu--vertical .mtrl-menu__item--selected:hover::before{content:"";position:absolute;inset:0;background-color:var(--mtrl-menu-selected-label);opacity:.08;pointer-events:none;border-radius:inherit}:where(.mtrl-menu--vertical .mtrl-menu__item--selected:focus-visible,.mtrl-menu--vertical .mtrl-menu__item--selected.mtrl-menu__item--active){position:relative}.mtrl-menu--vertical .mtrl-menu__item--selected:focus-visible::before,.mtrl-menu--vertical .mtrl-menu__item--selected.mtrl-menu__item--active::before{content:"";position:absolute;inset:0;background-color:var(--mtrl-menu-selected-label);opacity:.1;pointer-events:none;border-radius:inherit}:where(.mtrl-menu--vertical .mtrl-menu__item--selected:active){position:relative}.mtrl-menu--vertical .mtrl-menu__item--selected:active:not(:has(>.mtrl-ripple))::before{content:"";position:absolute;inset:0;background-color:var(--mtrl-menu-selected-label);opacity:.1;pointer-events:none;border-radius:inherit}.mtrl-menu--vertical .mtrl-menu__item--disabled{color:color-mix(in srgb, var(--mtrl-menu-label) 38%, transparent)}.mtrl-menu--vertical .mtrl-menu__item-icon{color:var(--mtrl-menu-supporting);margin-inline-end:12px}.mtrl-menu--vertical .mtrl-menu__item-icon svg{width:20px;height:20px}.mtrl-menu--vertical .mtrl-menu__item-shortcut{font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:11px;line-height:16px;letter-spacing:.5px;font-weight:500;color:var(--mtrl-menu-supporting)}.mtrl-menu--vertical .mtrl-menu__item-label{display:flex;flex-direction:column;justify-content:center;flex:1;min-width:0}.mtrl-menu--vertical .mtrl-menu__item-supporting{font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.25px;font-weight:400;color:var(--mtrl-menu-supporting);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mtrl-menu--vertical .mtrl-menu__item--selected .mtrl-menu__item-icon,.mtrl-menu--vertical .mtrl-menu__item--selected .mtrl-menu__item-shortcut,.mtrl-menu--vertical .mtrl-menu__item--selected .mtrl-menu__item-supporting{color:inherit}.mtrl-menu--vertical .mtrl-menu__divider{margin:6px 0}.mtrl-menu--vertical:has(.mtrl-menu__group){background-color:rgba(0,0,0,0);box-shadow:none;padding:0;overflow:visible}.mtrl-menu--vertical:has(.mtrl-menu__group) .mtrl-menu__list{overflow:visible;gap:2px}.mtrl-menu--vertical:has(.mtrl-menu__group) .mtrl-menu__group{background-color:var(--mtrl-menu-container);padding:4px;box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 2px 6px 2px rgba(0,0,0,.15);border-radius:var(--mtrl-sys-shape-corner-small, 8px)}.mtrl-menu--vertical:has(.mtrl-menu__group) .mtrl-menu__group:first-child{border-start-start-radius:var(--mtrl-sys-shape-corner-large, 16px);border-start-end-radius:var(--mtrl-sys-shape-corner-large, 16px)}.mtrl-menu--vertical:has(.mtrl-menu__group) .mtrl-menu__group:last-child{border-end-start-radius:var(--mtrl-sys-shape-corner-large, 16px);border-end-end-radius:var(--mtrl-sys-shape-corner-large, 16px)}.mtrl-menu--vertical:has(.mtrl-menu__group) .mtrl-menu__group+.mtrl-menu__group{margin-top:0}.mtrl-menu--vertical:has(.mtrl-menu__group) .mtrl-menu__group>ul{display:flex;flex-direction:column;gap:2px}.mtrl-menu--vertical{transition:transform 250ms cubic-bezier(0.3, 0, 0, 1),opacity 250ms cubic-bezier(0.3, 0, 0, 1),visibility 250ms,border-radius 425ms linear(0, 0.102, 0.323, 0.57, 0.784, 0.942, 1.039, 1.085, 1.094, 1.082, 1.06, 1.037, 1.018, 1.004, 0.995, 0.992, 0.991, 0.992, 0.995, 0.997, 0.999, 1, 1.001, 1.001, 1)}.mtrl-menu--vertical.mtrl-menu--active{border-radius:24px}.mtrl-menu--vertical.mtrl-menu--inactive{border-radius:var(--mtrl-sys-shape-corner-small, 8px)}[dir=rtl] .mtrl-menu{transform-origin:top right}[dir=rtl] .mtrl-menu--position-top,[dir=rtl] .mtrl-menu--position-top-start,[dir=rtl] .mtrl-menu--position-top-end{transform-origin:bottom right}[dir=rtl] .mtrl-menu .mtrl-menu__item--submenu{padding-right:16px;padding-left:48px}[dir=rtl] .mtrl-menu .mtrl-menu__item--submenu::after{right:auto;left:16px;transform:translateY(-50%) rotate(180deg)}
package/dist/elements/css/menu.js CHANGED
@@ -1,3 +1,3 @@
1
1
  import "./ripple.js";
2
2
  import { registerStyles } from "../styles.js";
3
- registerStyles({ "menu": ".mtrl-menu{font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.25px;font-weight:400;border-radius:var(--mtrl-sys-shape-corner-extra-small, 4px);position:fixed;z-index:700;min-width:112px;max-width:280px;padding:8px 0;background-color:var(--mtrl-sys-color-surface-container);color:var(--mtrl-sys-color-on-surface);box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 2px 6px 2px rgba(0,0,0,.15);overflow:hidden;display:flex;flex-direction:column;opacity:0;transform-origin:top center;transform:scaleY(0);pointer-events:none;visibility:hidden;transition:transform 250ms cubic-bezier(0.3, 0, 0, 1),opacity 250ms cubic-bezier(0.3, 0, 0, 1),visibility 250ms}.mtrl-menu[popover]{inset:auto;margin:0;border:0}.mtrl-menu--visible{opacity:1;transform:scaleY(1);pointer-events:auto;visibility:visible}.mtrl-menu--position-top,.mtrl-menu--position-top-start,.mtrl-menu--position-top-end{transform-origin:bottom center}.mtrl-menu--submenu{position:absolute;z-index:701}.mtrl-menu__group{display:block;list-style:none}.mtrl-menu__group>ul{margin:0;padding:0;list-style:none}.mtrl-menu__group+.mtrl-menu__group{margin-top:8px}.mtrl-menu__list{margin:0;padding:0;list-style:none;overflow-y:auto;flex:1 1 auto;min-height:0;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) rgba(0,0,0,.05);width:100%}.mtrl-menu__list::-webkit-scrollbar{width:8px}.mtrl-menu__list::-webkit-scrollbar-track{background:rgba(0,0,0,.05)}.mtrl-menu__list::-webkit-scrollbar-thumb{background:rgba(0,0,0,.2);border-radius:4px}.mtrl-menu__item{font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.1px;font-weight:500;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;position:relative;min-height:48px;padding:12px;padding-inline-end:40px;cursor:pointer;user-select:none;color:var(--mtrl-sys-color-on-surface);white-space:nowrap;text-overflow:ellipsis;overflow:hidden;width:100%;box-sizing:border-box}.mtrl-menu__item:hover{position:relative}.mtrl-menu__item:hover::before{content:\"\";position:absolute;inset:0;background-color:var(--mtrl-sys-color-on-surface);opacity:.08;pointer-events:none;border-radius:inherit}.mtrl-menu__item:focus{outline:none}.mtrl-menu__item:focus-visible,.mtrl-menu__item--active{position:relative}.mtrl-menu__item:focus-visible::before,.mtrl-menu__item--active::before{content:\"\";position:absolute;inset:0;background-color:var(--mtrl-sys-color-on-surface);opacity:.1;pointer-events:none;border-radius:inherit}.mtrl-menu__item:active{position:relative}.mtrl-menu__item:active:not(:has(>.mtrl-ripple))::before{content:\"\";position:absolute;inset:0;background-color:var(--mtrl-sys-color-on-surface);opacity:.1;pointer-events:none;border-radius:inherit}.mtrl-menu__item--submenu{padding-right:48px}.mtrl-menu__item--submenu::after{content:\"\";position:absolute;right:12px;top:50%;transform:translateY(-50%);width:24px;height:24px;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 17l5-5-5-5v10z'/%3E%3C/svg%3E\") center/contain no-repeat;-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 17l5-5-5-5v10z'/%3E%3C/svg%3E\") center/contain no-repeat;background-color:currentColor;opacity:.87}.mtrl-menu__item--submenu[aria-expanded=true]{position:relative}.mtrl-menu__item--submenu[aria-expanded=true]::before{content:\"\";position:absolute;inset:0;background-color:var(--mtrl-sys-color-on-surface);opacity:.08;pointer-events:none;border-radius:inherit}.mtrl-menu__item--submenu[aria-expanded=true]::after{opacity:1}.mtrl-menu__item--disabled{cursor:default;color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 38%, transparent)}.mtrl-menu__item--disabled:hover::before,.mtrl-menu__item--disabled:active::before{opacity:0}.mtrl-menu__item--selected{background-color:var(--mtrl-sys-color-secondary-container);color:var(--mtrl-sys-color-on-secondary-container)}.mtrl-menu__item--selected:hover{position:relative}.mtrl-menu__item--selected:hover::before{content:\"\";position:absolute;inset:0;background-color:var(--mtrl-sys-color-on-secondary-container);opacity:.08;pointer-events:none;border-radius:inherit}.mtrl-menu__item--selected:focus-visible,.mtrl-menu__item--selected.mtrl-menu__item--active{position:relative}.mtrl-menu__item--selected:focus-visible::before,.mtrl-menu__item--selected.mtrl-menu__item--active::before{content:\"\";position:absolute;inset:0;background-color:var(--mtrl-sys-color-on-secondary-container);opacity:.1;pointer-events:none;border-radius:inherit}.mtrl-menu__item--selected:active{position:relative}.mtrl-menu__item--selected:active:not(:has(>.mtrl-ripple))::before{content:\"\";position:absolute;inset:0;background-color:var(--mtrl-sys-color-on-secondary-container);opacity:.1;pointer-events:none;border-radius:inherit}.mtrl-menu__item--selected .mtrl-menu__item-icon,.mtrl-menu__item--selected .mtrl-menu__item-shortcut{color:inherit}.mtrl-menu__item--selected::after{content:\"\";position:absolute;right:12px;top:50%;transform:translateY(-50%);width:18px;height:18px;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolyline points='20 6 9 17 4 12' stroke='white' stroke-width='2' fill='none'/%3E%3C/svg%3E\") center/contain no-repeat;-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolyline points='20 6 9 17 4 12' stroke='white' stroke-width='2' fill='none'/%3E%3C/svg%3E\") center/contain no-repeat;background-color:currentColor}.mtrl-menu__item-content{display:flex;align-items:center;width:100%;overflow:hidden}.mtrl-menu__item-icon{margin-inline-end:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--mtrl-sys-color-on-surface-variant)}.mtrl-menu__item-icon svg{width:24px;height:24px}.mtrl-menu__item-text{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mtrl-menu__item-label{display:flex;flex-direction:column;justify-content:center;flex:1;min-width:0}.mtrl-menu__item-supporting{font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.25px;font-weight:400;color:var(--mtrl-sys-color-on-surface-variant);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mtrl-menu__item-shortcut{margin-left:12px;color:var(--mtrl-sys-color-on-surface-variant);flex-shrink:0}.mtrl-menu__divider{height:1px;flex-shrink:0;margin:8px 0;background-color:var(--mtrl-sys-color-outline-variant)}.mtrl-menu:focus-visible{outline:2px solid \".mtrl-menu__item:focus-visible\";outline-offset:2px;box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 1px 3px 1px rgba(0,0,0,.15)}@media(prefers-reduced-motion: reduce){.mtrl-menu{transition:opacity 100ms linear,visibility 100ms}.mtrl-menu,.mtrl-menu--visible{transform:none}}@media(forced-colors: active){.mtrl-menu{border:1px solid CurrentColor}.mtrl-menu .mtrl-menu__divider{background-color:CurrentColor}.mtrl-menu .mtrl-menu__item--disabled{opacity:1;color:GrayText}}.mtrl-menu--dense{padding:4px 0}.mtrl-menu--dense .mtrl-menu__item{font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.25px;font-weight:400;min-height:32px;padding:4px 12px;padding-right:32px}.mtrl-menu--dense .mtrl-menu__item--submenu{padding-right:36px}.mtrl-menu--dense .mtrl-menu__item-icon svg{width:16px;height:16px}.mtrl-menu--dense .mtrl-menu__divider{margin:4px 0}.mtrl-menu--vertical{--mtrl-menu-container: var(--mtrl-sys-color-surface-container-low);--mtrl-menu-label: var(--mtrl-sys-color-on-surface);--mtrl-menu-supporting: var(--mtrl-sys-color-on-surface-variant);--mtrl-menu-selected-container: var(--mtrl-sys-color-tertiary-container);--mtrl-menu-selected-label: var(--mtrl-sys-color-on-tertiary-container);border-radius:var(--mtrl-sys-shape-corner-large, 16px);background-color:var(--mtrl-menu-container);color:var(--mtrl-menu-label);padding:4px}.mtrl-menu--vertical.mtrl-menu--vibrant{--mtrl-menu-container: var(--mtrl-sys-color-tertiary-container);--mtrl-menu-label: var(--mtrl-sys-color-on-tertiary-container);--mtrl-menu-supporting: var(--mtrl-sys-color-on-tertiary-container);--mtrl-menu-selected-container: var(--mtrl-sys-color-tertiary);--mtrl-menu-selected-label: var(--mtrl-sys-color-on-tertiary)}.mtrl-menu--vertical .mtrl-menu__list{display:flex;flex-direction:column;gap:2px}.mtrl-menu--vertical .mtrl-menu__item{font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:16px;line-height:24px;letter-spacing:.5px;font-weight:400;min-height:44px;padding:8px 16px;padding-inline-end:16px;color:var(--mtrl-menu-label);border-radius:var(--mtrl-sys-shape-corner-extra-small, 4px);transition:border-radius 425ms linear(0, 0.102, 0.323, 0.57, 0.784, 0.942, 1.039, 1.085, 1.094, 1.082, 1.06, 1.037, 1.018, 1.004, 0.995, 0.992, 0.991, 0.992, 0.995, 0.997, 0.999, 1, 1.001, 1.001, 1),background-color 100ms cubic-bezier(0.2, 0, 0, 1)}.mtrl-menu--vertical .mtrl-menu__item:hover,.mtrl-menu--vertical .mtrl-menu__item:focus-visible,.mtrl-menu--vertical .mtrl-menu__item--active,.mtrl-menu--vertical .mtrl-menu__item:active{border-radius:var(--mtrl-sys-shape-corner-medium, 12px)}.mtrl-menu--vertical .mtrl-menu__item:first-child{border-start-start-radius:var(--mtrl-sys-shape-corner-medium, 12px);border-start-end-radius:var(--mtrl-sys-shape-corner-medium, 12px)}.mtrl-menu--vertical .mtrl-menu__item:last-child{border-end-start-radius:var(--mtrl-sys-shape-corner-medium, 12px);border-end-end-radius:var(--mtrl-sys-shape-corner-medium, 12px)}.mtrl-menu--vertical .mtrl-menu__item--selected{background-color:var(--mtrl-menu-selected-container);color:var(--mtrl-menu-selected-label);border-radius:var(--mtrl-sys-shape-corner-medium, 12px)}.mtrl-menu--vertical .mtrl-menu__item--selected:hover{position:relative}.mtrl-menu--vertical .mtrl-menu__item--selected:hover::before{content:\"\";position:absolute;inset:0;background-color:var(--mtrl-menu-selected-label);opacity:.08;pointer-events:none;border-radius:inherit}.mtrl-menu--vertical .mtrl-menu__item--selected:focus-visible,.mtrl-menu--vertical .mtrl-menu__item--selected.mtrl-menu__item--active{position:relative}.mtrl-menu--vertical .mtrl-menu__item--selected:focus-visible::before,.mtrl-menu--vertical .mtrl-menu__item--selected.mtrl-menu__item--active::before{content:\"\";position:absolute;inset:0;background-color:var(--mtrl-menu-selected-label);opacity:.1;pointer-events:none;border-radius:inherit}.mtrl-menu--vertical .mtrl-menu__item--selected:active{position:relative}.mtrl-menu--vertical .mtrl-menu__item--selected:active:not(:has(>.mtrl-ripple))::before{content:\"\";position:absolute;inset:0;background-color:var(--mtrl-menu-selected-label);opacity:.1;pointer-events:none;border-radius:inherit}.mtrl-menu--vertical .mtrl-menu__item--disabled{color:color-mix(in srgb, var(--mtrl-menu-label) 38%, transparent)}.mtrl-menu--vertical .mtrl-menu__item-icon{color:var(--mtrl-menu-supporting);margin-inline-end:12px}.mtrl-menu--vertical .mtrl-menu__item-icon svg{width:20px;height:20px}.mtrl-menu--vertical .mtrl-menu__item-shortcut{font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:11px;line-height:16px;letter-spacing:.5px;font-weight:500;color:var(--mtrl-menu-supporting)}.mtrl-menu--vertical .mtrl-menu__item-label{display:flex;flex-direction:column;justify-content:center;flex:1;min-width:0}.mtrl-menu--vertical .mtrl-menu__item-supporting{font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.25px;font-weight:400;color:var(--mtrl-menu-supporting);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mtrl-menu--vertical .mtrl-menu__item--selected .mtrl-menu__item-icon,.mtrl-menu--vertical .mtrl-menu__item--selected .mtrl-menu__item-shortcut,.mtrl-menu--vertical .mtrl-menu__item--selected .mtrl-menu__item-supporting{color:inherit}.mtrl-menu--vertical .mtrl-menu__divider{margin:6px 0}.mtrl-menu--vertical:has(.mtrl-menu__group){background-color:rgba(0,0,0,0);box-shadow:none;padding:0;overflow:visible}.mtrl-menu--vertical:has(.mtrl-menu__group) .mtrl-menu__list{overflow:visible;gap:2px}.mtrl-menu--vertical:has(.mtrl-menu__group) .mtrl-menu__group{background-color:var(--mtrl-menu-container);padding:4px;box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 2px 6px 2px rgba(0,0,0,.15);border-radius:var(--mtrl-sys-shape-corner-small, 8px)}.mtrl-menu--vertical:has(.mtrl-menu__group) .mtrl-menu__group:first-child{border-start-start-radius:var(--mtrl-sys-shape-corner-large, 16px);border-start-end-radius:var(--mtrl-sys-shape-corner-large, 16px)}.mtrl-menu--vertical:has(.mtrl-menu__group) .mtrl-menu__group:last-child{border-end-start-radius:var(--mtrl-sys-shape-corner-large, 16px);border-end-end-radius:var(--mtrl-sys-shape-corner-large, 16px)}.mtrl-menu--vertical:has(.mtrl-menu__group) .mtrl-menu__group+.mtrl-menu__group{margin-top:0}.mtrl-menu--vertical:has(.mtrl-menu__group) .mtrl-menu__group>ul{display:flex;flex-direction:column;gap:2px}.mtrl-menu--vertical{transition:transform 250ms cubic-bezier(0.3, 0, 0, 1),opacity 250ms cubic-bezier(0.3, 0, 0, 1),visibility 250ms,border-radius 425ms linear(0, 0.102, 0.323, 0.57, 0.784, 0.942, 1.039, 1.085, 1.094, 1.082, 1.06, 1.037, 1.018, 1.004, 0.995, 0.992, 0.991, 0.992, 0.995, 0.997, 0.999, 1, 1.001, 1.001, 1)}.mtrl-menu--vertical.mtrl-menu--active{border-radius:24px}.mtrl-menu--vertical.mtrl-menu--inactive{border-radius:var(--mtrl-sys-shape-corner-small, 8px)}[dir=rtl] .mtrl-menu{transform-origin:top right}[dir=rtl] .mtrl-menu--position-top,[dir=rtl] .mtrl-menu--position-top-start,[dir=rtl] .mtrl-menu--position-top-end{transform-origin:bottom right}[dir=rtl] .mtrl-menu .mtrl-menu__item--submenu{padding-right:16px;padding-left:48px}[dir=rtl] .mtrl-menu .mtrl-menu__item--submenu::after{right:auto;left:16px;transform:translateY(-50%) rotate(180deg)}" });
3
+ registerStyles({ "menu": ".mtrl-menu{font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.25px;font-weight:400;border-radius:var(--mtrl-sys-shape-corner-extra-small, 4px);position:fixed;z-index:700;min-width:112px;max-width:280px;padding:8px 0;background-color:var(--mtrl-sys-color-surface-container);color:var(--mtrl-sys-color-on-surface);box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 2px 6px 2px rgba(0,0,0,.15);overflow:hidden;display:flex;flex-direction:column;opacity:0;transform-origin:top center;transform:scaleY(0);pointer-events:none;visibility:hidden;transition:transform 250ms cubic-bezier(0.3, 0, 0, 1),opacity 250ms cubic-bezier(0.3, 0, 0, 1),visibility 250ms}.mtrl-menu[popover]{inset:auto;margin:0;border:0}.mtrl-menu--visible{opacity:1;transform:scaleY(1);pointer-events:auto;visibility:visible}.mtrl-menu--position-top,.mtrl-menu--position-top-start,.mtrl-menu--position-top-end{transform-origin:bottom center}.mtrl-menu--submenu{position:absolute;z-index:701}.mtrl-menu__group{display:block;list-style:none}.mtrl-menu__group>ul{margin:0;padding:0;list-style:none}.mtrl-menu__group+.mtrl-menu__group{margin-top:8px}.mtrl-menu__list{margin:0;padding:0;list-style:none;overflow-y:auto;flex:1 1 auto;min-height:0;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) rgba(0,0,0,.05);width:100%}.mtrl-menu__list::-webkit-scrollbar{width:8px}.mtrl-menu__list::-webkit-scrollbar-track{background:rgba(0,0,0,.05)}.mtrl-menu__list::-webkit-scrollbar-thumb{background:rgba(0,0,0,.2);border-radius:4px}.mtrl-menu__item{font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.1px;font-weight:500;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;position:relative;min-height:48px;padding:12px;padding-inline-end:40px;cursor:pointer;user-select:none;color:var(--mtrl-sys-color-on-surface);white-space:nowrap;text-overflow:ellipsis;overflow:hidden;width:100%;box-sizing:border-box}:where(.mtrl-menu__item:hover){position:relative}.mtrl-menu__item:hover::before{content:\"\";position:absolute;inset:0;background-color:var(--mtrl-sys-color-on-surface);opacity:.08;pointer-events:none;border-radius:inherit}.mtrl-menu__item:focus{outline:none}:where(.mtrl-menu__item:focus-visible,.mtrl-menu__item--active){position:relative}.mtrl-menu__item:focus-visible::before,.mtrl-menu__item--active::before{content:\"\";position:absolute;inset:0;background-color:var(--mtrl-sys-color-on-surface);opacity:.1;pointer-events:none;border-radius:inherit}:where(.mtrl-menu__item:active){position:relative}.mtrl-menu__item:active:not(:has(>.mtrl-ripple))::before{content:\"\";position:absolute;inset:0;background-color:var(--mtrl-sys-color-on-surface);opacity:.1;pointer-events:none;border-radius:inherit}.mtrl-menu__item--submenu{padding-right:48px}.mtrl-menu__item--submenu::after{content:\"\";position:absolute;right:12px;top:50%;transform:translateY(-50%);width:24px;height:24px;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 17l5-5-5-5v10z'/%3E%3C/svg%3E\") center/contain no-repeat;-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 17l5-5-5-5v10z'/%3E%3C/svg%3E\") center/contain no-repeat;background-color:currentColor;opacity:.87}:where(.mtrl-menu__item--submenu[aria-expanded=true]){position:relative}.mtrl-menu__item--submenu[aria-expanded=true]::before{content:\"\";position:absolute;inset:0;background-color:var(--mtrl-sys-color-on-surface);opacity:.08;pointer-events:none;border-radius:inherit}.mtrl-menu__item--submenu[aria-expanded=true]::after{opacity:1}.mtrl-menu__item--disabled{cursor:default;color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 38%, transparent)}.mtrl-menu__item--disabled:hover::before,.mtrl-menu__item--disabled:active::before{opacity:0}.mtrl-menu__item--selected{background-color:var(--mtrl-sys-color-secondary-container);color:var(--mtrl-sys-color-on-secondary-container)}:where(.mtrl-menu__item--selected:hover){position:relative}.mtrl-menu__item--selected:hover::before{content:\"\";position:absolute;inset:0;background-color:var(--mtrl-sys-color-on-secondary-container);opacity:.08;pointer-events:none;border-radius:inherit}:where(.mtrl-menu__item--selected:focus-visible,.mtrl-menu__item--selected.mtrl-menu__item--active){position:relative}.mtrl-menu__item--selected:focus-visible::before,.mtrl-menu__item--selected.mtrl-menu__item--active::before{content:\"\";position:absolute;inset:0;background-color:var(--mtrl-sys-color-on-secondary-container);opacity:.1;pointer-events:none;border-radius:inherit}:where(.mtrl-menu__item--selected:active){position:relative}.mtrl-menu__item--selected:active:not(:has(>.mtrl-ripple))::before{content:\"\";position:absolute;inset:0;background-color:var(--mtrl-sys-color-on-secondary-container);opacity:.1;pointer-events:none;border-radius:inherit}.mtrl-menu__item--selected .mtrl-menu__item-icon,.mtrl-menu__item--selected .mtrl-menu__item-shortcut{color:inherit}.mtrl-menu__item--selected::after{content:\"\";position:absolute;left:12px;right:12px;margin-inline-start:auto;top:50%;transform:translateY(-50%);width:18px;height:18px;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolyline points='20 6 9 17 4 12' stroke='white' stroke-width='2' fill='none'/%3E%3C/svg%3E\") center/contain no-repeat;-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolyline points='20 6 9 17 4 12' stroke='white' stroke-width='2' fill='none'/%3E%3C/svg%3E\") center/contain no-repeat;background-color:currentColor}.mtrl-menu__item-content{display:flex;align-items:center;width:100%;overflow:hidden}.mtrl-menu__item-icon{margin-inline-end:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--mtrl-sys-color-on-surface-variant)}.mtrl-menu__item-icon svg{width:24px;height:24px}.mtrl-menu__item-text{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mtrl-menu__item-label{display:flex;flex-direction:column;justify-content:center;flex:1;min-width:0}.mtrl-menu__item-supporting{font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.25px;font-weight:400;color:var(--mtrl-sys-color-on-surface-variant);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mtrl-menu__item-shortcut{margin-left:12px;color:var(--mtrl-sys-color-on-surface-variant);flex-shrink:0}.mtrl-menu__divider{height:1px;flex-shrink:0;margin:8px 0;background-color:var(--mtrl-sys-color-outline-variant)}.mtrl-menu:focus-visible{outline:2px solid \".mtrl-menu__item:focus-visible\";outline-offset:2px;box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 1px 3px 1px rgba(0,0,0,.15)}@media(prefers-reduced-motion: reduce){.mtrl-menu{transition:opacity 100ms linear,visibility 100ms}.mtrl-menu,.mtrl-menu--visible{transform:none}}@media(forced-colors: active){.mtrl-menu{border:1px solid CurrentColor}.mtrl-menu .mtrl-menu__divider{background-color:CurrentColor}.mtrl-menu .mtrl-menu__item--disabled{opacity:1;color:GrayText}}.mtrl-menu--dense{padding:4px 0}.mtrl-menu--dense .mtrl-menu__item{font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.25px;font-weight:400;min-height:32px;padding:4px 12px;padding-right:32px}.mtrl-menu--dense .mtrl-menu__item--submenu{padding-right:36px}.mtrl-menu--dense .mtrl-menu__item-icon svg{width:16px;height:16px}.mtrl-menu--dense .mtrl-menu__divider{margin:4px 0}.mtrl-menu--vertical{--mtrl-menu-container: var(--mtrl-sys-color-surface-container-low);--mtrl-menu-label: var(--mtrl-sys-color-on-surface);--mtrl-menu-supporting: var(--mtrl-sys-color-on-surface-variant);--mtrl-menu-selected-container: var(--mtrl-sys-color-tertiary-container);--mtrl-menu-selected-label: var(--mtrl-sys-color-on-tertiary-container);border-radius:var(--mtrl-sys-shape-corner-large, 16px);background-color:var(--mtrl-menu-container);color:var(--mtrl-menu-label);padding:4px}.mtrl-menu--vertical.mtrl-menu--vibrant{--mtrl-menu-container: var(--mtrl-sys-color-tertiary-container);--mtrl-menu-label: var(--mtrl-sys-color-on-tertiary-container);--mtrl-menu-supporting: var(--mtrl-sys-color-on-tertiary-container);--mtrl-menu-selected-container: var(--mtrl-sys-color-tertiary);--mtrl-menu-selected-label: var(--mtrl-sys-color-on-tertiary)}.mtrl-menu--vertical .mtrl-menu__list{display:flex;flex-direction:column;gap:2px}.mtrl-menu--vertical .mtrl-menu__item{font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:16px;line-height:24px;letter-spacing:.5px;font-weight:400;min-height:44px;padding:8px 16px;padding-inline-end:16px;color:var(--mtrl-menu-label);border-radius:var(--mtrl-sys-shape-corner-extra-small, 4px);transition:border-radius 425ms linear(0, 0.102, 0.323, 0.57, 0.784, 0.942, 1.039, 1.085, 1.094, 1.082, 1.06, 1.037, 1.018, 1.004, 0.995, 0.992, 0.991, 0.992, 0.995, 0.997, 0.999, 1, 1.001, 1.001, 1),background-color 100ms cubic-bezier(0.2, 0, 0, 1)}.mtrl-menu--vertical .mtrl-menu__item:hover,.mtrl-menu--vertical .mtrl-menu__item:focus-visible,.mtrl-menu--vertical .mtrl-menu__item--active,.mtrl-menu--vertical .mtrl-menu__item:active{border-radius:var(--mtrl-sys-shape-corner-medium, 12px)}.mtrl-menu--vertical .mtrl-menu__item:first-child{border-start-start-radius:var(--mtrl-sys-shape-corner-medium, 12px);border-start-end-radius:var(--mtrl-sys-shape-corner-medium, 12px)}.mtrl-menu--vertical .mtrl-menu__item:last-child{border-end-start-radius:var(--mtrl-sys-shape-corner-medium, 12px);border-end-end-radius:var(--mtrl-sys-shape-corner-medium, 12px)}.mtrl-menu--vertical .mtrl-menu__item--selected{background-color:var(--mtrl-menu-selected-container);color:var(--mtrl-menu-selected-label);border-radius:var(--mtrl-sys-shape-corner-medium, 12px)}:where(.mtrl-menu--vertical .mtrl-menu__item--selected:hover){position:relative}.mtrl-menu--vertical .mtrl-menu__item--selected:hover::before{content:\"\";position:absolute;inset:0;background-color:var(--mtrl-menu-selected-label);opacity:.08;pointer-events:none;border-radius:inherit}:where(.mtrl-menu--vertical .mtrl-menu__item--selected:focus-visible,.mtrl-menu--vertical .mtrl-menu__item--selected.mtrl-menu__item--active){position:relative}.mtrl-menu--vertical .mtrl-menu__item--selected:focus-visible::before,.mtrl-menu--vertical .mtrl-menu__item--selected.mtrl-menu__item--active::before{content:\"\";position:absolute;inset:0;background-color:var(--mtrl-menu-selected-label);opacity:.1;pointer-events:none;border-radius:inherit}:where(.mtrl-menu--vertical .mtrl-menu__item--selected:active){position:relative}.mtrl-menu--vertical .mtrl-menu__item--selected:active:not(:has(>.mtrl-ripple))::before{content:\"\";position:absolute;inset:0;background-color:var(--mtrl-menu-selected-label);opacity:.1;pointer-events:none;border-radius:inherit}.mtrl-menu--vertical .mtrl-menu__item--disabled{color:color-mix(in srgb, var(--mtrl-menu-label) 38%, transparent)}.mtrl-menu--vertical .mtrl-menu__item-icon{color:var(--mtrl-menu-supporting);margin-inline-end:12px}.mtrl-menu--vertical .mtrl-menu__item-icon svg{width:20px;height:20px}.mtrl-menu--vertical .mtrl-menu__item-shortcut{font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:11px;line-height:16px;letter-spacing:.5px;font-weight:500;color:var(--mtrl-menu-supporting)}.mtrl-menu--vertical .mtrl-menu__item-label{display:flex;flex-direction:column;justify-content:center;flex:1;min-width:0}.mtrl-menu--vertical .mtrl-menu__item-supporting{font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.25px;font-weight:400;color:var(--mtrl-menu-supporting);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mtrl-menu--vertical .mtrl-menu__item--selected .mtrl-menu__item-icon,.mtrl-menu--vertical .mtrl-menu__item--selected .mtrl-menu__item-shortcut,.mtrl-menu--vertical .mtrl-menu__item--selected .mtrl-menu__item-supporting{color:inherit}.mtrl-menu--vertical .mtrl-menu__divider{margin:6px 0}.mtrl-menu--vertical:has(.mtrl-menu__group){background-color:rgba(0,0,0,0);box-shadow:none;padding:0;overflow:visible}.mtrl-menu--vertical:has(.mtrl-menu__group) .mtrl-menu__list{overflow:visible;gap:2px}.mtrl-menu--vertical:has(.mtrl-menu__group) .mtrl-menu__group{background-color:var(--mtrl-menu-container);padding:4px;box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 2px 6px 2px rgba(0,0,0,.15);border-radius:var(--mtrl-sys-shape-corner-small, 8px)}.mtrl-menu--vertical:has(.mtrl-menu__group) .mtrl-menu__group:first-child{border-start-start-radius:var(--mtrl-sys-shape-corner-large, 16px);border-start-end-radius:var(--mtrl-sys-shape-corner-large, 16px)}.mtrl-menu--vertical:has(.mtrl-menu__group) .mtrl-menu__group:last-child{border-end-start-radius:var(--mtrl-sys-shape-corner-large, 16px);border-end-end-radius:var(--mtrl-sys-shape-corner-large, 16px)}.mtrl-menu--vertical:has(.mtrl-menu__group) .mtrl-menu__group+.mtrl-menu__group{margin-top:0}.mtrl-menu--vertical:has(.mtrl-menu__group) .mtrl-menu__group>ul{display:flex;flex-direction:column;gap:2px}.mtrl-menu--vertical{transition:transform 250ms cubic-bezier(0.3, 0, 0, 1),opacity 250ms cubic-bezier(0.3, 0, 0, 1),visibility 250ms,border-radius 425ms linear(0, 0.102, 0.323, 0.57, 0.784, 0.942, 1.039, 1.085, 1.094, 1.082, 1.06, 1.037, 1.018, 1.004, 0.995, 0.992, 0.991, 0.992, 0.995, 0.997, 0.999, 1, 1.001, 1.001, 1)}.mtrl-menu--vertical.mtrl-menu--active{border-radius:24px}.mtrl-menu--vertical.mtrl-menu--inactive{border-radius:var(--mtrl-sys-shape-corner-small, 8px)}[dir=rtl] .mtrl-menu{transform-origin:top right}[dir=rtl] .mtrl-menu--position-top,[dir=rtl] .mtrl-menu--position-top-start,[dir=rtl] .mtrl-menu--position-top-end{transform-origin:bottom right}[dir=rtl] .mtrl-menu .mtrl-menu__item--submenu{padding-right:16px;padding-left:48px}[dir=rtl] .mtrl-menu .mtrl-menu__item--submenu::after{right:auto;left:16px;transform:translateY(-50%) rotate(180deg)}" });
package/dist/elements/css/radios.css CHANGED
@@ -1 +1 @@
1
- .mtrl-radios{display:flex;margin:0;padding:0}.mtrl-radios--vertical{flex-direction:column}.mtrl-radios--horizontal{flex-direction:row;flex-wrap:wrap;align-items:flex-start}.mtrl-radios--horizontal .mtrl-radios__item{margin-inline-end:16px}.mtrl-radios--horizontal .mtrl-radios__item:last-child{margin-inline-end:0}.mtrl-radios--disabled{pointer-events:none}.mtrl-radios__item{position:relative;display:inline-flex;align-items:center}.mtrl-radios__item--disabled{cursor:not-allowed}.mtrl-radios__item--disabled .mtrl-radios__label{cursor:not-allowed}.mtrl-radios__input{position:absolute;opacity:0;height:0;width:0;margin:0;padding:0}.mtrl-radios__input:checked~.mtrl-radios__label .mtrl-radios__circle{border-color:var(--mtrl-sys-color-primary)}.mtrl-radios__input:checked~.mtrl-radios__label .mtrl-radios__circle::after{transform:translate(-50%, -50%) scale(1);opacity:1}.mtrl-radios__input:disabled~.mtrl-radios__label .mtrl-radios__circle{border-color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 38%, transparent)}.mtrl-radios__input:disabled~.mtrl-radios__label .mtrl-radios__circle::after{background-color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 38%, transparent)}.mtrl-radios__input:disabled~.mtrl-radios__label .mtrl-radios__text{color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 38%, transparent)}.mtrl-radios__label{position:relative;display:inline-flex;align-items:center;cursor:pointer;padding:8px 0;height:48px;color:var(--mtrl-sys-color-on-surface);font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:16px;line-height:24px;letter-spacing:.5px;font-weight:400}.mtrl-radios__label--before .mtrl-radios__text{margin-inline:0 8px}.mtrl-radios__control{position:relative;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;flex-shrink:0}.mtrl-radios__circle{position:relative;width:20px;height:20px;border:2px solid var(--mtrl-sys-color-on-surface-variant);border-radius:50%;box-sizing:border-box;transition:border-color 175ms linear(0, 0.075, 0.227, 0.39, 0.537, 0.657, 0.751, 0.822, 0.874, 0.912, 0.939, 0.958, 0.971, 0.98, 0.987, 0.991, 0.994, 0.996, 0.997, 0.998, 0.999, 0.999, 0.999, 1, 1)}.mtrl-radios__circle::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%) scale(0);width:10px;height:10px;border-radius:50%;background-color:var(--mtrl-sys-color-primary);opacity:0;transition:transform 425ms linear(0, 0.102, 0.323, 0.57, 0.784, 0.942, 1.039, 1.085, 1.094, 1.082, 1.06, 1.037, 1.018, 1.004, 0.995, 0.992, 0.991, 0.992, 0.995, 0.997, 0.999, 1, 1.001, 1.001, 1),opacity 175ms linear(0, 0.075, 0.227, 0.39, 0.537, 0.657, 0.751, 0.822, 0.874, 0.912, 0.939, 0.958, 0.971, 0.98, 0.987, 0.991, 0.994, 0.996, 0.997, 0.998, 0.999, 0.999, 0.999, 1, 1)}.mtrl-radios__ripple{position:absolute;inset:0;border-radius:50%;transition:background-color 175ms linear(0, 0.075, 0.227, 0.39, 0.537, 0.657, 0.751, 0.822, 0.874, 0.912, 0.939, 0.958, 0.971, 0.98, 0.987, 0.991, 0.994, 0.996, 0.997, 0.998, 0.999, 0.999, 0.999, 1, 1)}.mtrl-radios__item .mtrl-radios__input:not(:disabled):not(:checked)~.mtrl-radios__label:is(:hover,:active) .mtrl-radios__circle,.mtrl-radios__item .mtrl-radios__input:not(:disabled):not(:checked):focus-visible~.mtrl-radios__label .mtrl-radios__circle{border-color:var(--mtrl-sys-color-on-surface)}.mtrl-radios__item .mtrl-radios__input:not(:disabled)~.mtrl-radios__label:hover .mtrl-radios__ripple{background-color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 8%, transparent)}.mtrl-radios__item .mtrl-radios__input:not(:disabled):focus-visible~.mtrl-radios__label .mtrl-radios__ripple{background-color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 10%, transparent)}.mtrl-radios__item .mtrl-radios__input:not(:disabled)~.mtrl-radios__label:active .mtrl-radios__ripple{background-color:color-mix(in srgb, var(--mtrl-sys-color-primary) 10%, transparent)}.mtrl-radios__item .mtrl-radios__input:not(:disabled):checked~.mtrl-radios__label:hover .mtrl-radios__ripple{background-color:color-mix(in srgb, var(--mtrl-sys-color-primary) 8%, transparent)}.mtrl-radios__item .mtrl-radios__input:not(:disabled):checked:focus-visible~.mtrl-radios__label .mtrl-radios__ripple{background-color:color-mix(in srgb, var(--mtrl-sys-color-primary) 10%, transparent)}.mtrl-radios__item .mtrl-radios__input:not(:disabled):checked~.mtrl-radios__label:active .mtrl-radios__ripple{background-color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 10%, transparent)}.mtrl-radios__item .mtrl-radios__input:not(:disabled):focus-visible~.mtrl-radios__label .mtrl-radios__ripple{outline:3px solid var(--mtrl-sys-color-secondary);outline-offset:2px}.mtrl-radios__text{margin-inline-start:8px}
1
+ .mtrl-radios{display:flex;margin:0;padding:0}.mtrl-radios--vertical{flex-direction:column}.mtrl-radios--horizontal{flex-direction:row;flex-wrap:wrap;align-items:flex-start}.mtrl-radios--horizontal .mtrl-radios__item{margin-inline-end:16px}.mtrl-radios--horizontal .mtrl-radios__item:last-child{margin-inline-end:0}.mtrl-radios--disabled{pointer-events:none}.mtrl-radios__item{position:relative;display:inline-flex;align-items:center}.mtrl-radios__item--disabled{cursor:not-allowed}.mtrl-radios__item--disabled .mtrl-radios__label{cursor:not-allowed}.mtrl-radios__input{position:absolute;opacity:0;height:0;width:0;margin:0;padding:0}.mtrl-radios__input:checked~.mtrl-radios__label .mtrl-radios__circle{border-color:var(--mtrl-sys-color-primary)}.mtrl-radios__input:checked~.mtrl-radios__label .mtrl-radios__circle::after{transform:translate(-50%, -50%) scale(1);opacity:1}.mtrl-radios__input:disabled~.mtrl-radios__label .mtrl-radios__circle{border-color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 38%, transparent)}.mtrl-radios__input:disabled~.mtrl-radios__label .mtrl-radios__circle::after{background-color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 38%, transparent)}.mtrl-radios__input:disabled~.mtrl-radios__label .mtrl-radios__text{color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 38%, transparent)}.mtrl-radios__label{position:relative;display:inline-flex;align-items:center;cursor:pointer;padding:4px 0;min-height:48px;color:var(--mtrl-sys-color-on-surface);font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:16px;line-height:24px;letter-spacing:.5px;font-weight:400}.mtrl-radios__label--before .mtrl-radios__text{margin-inline:0 8px}.mtrl-radios__label:has(>.mtrl-radios__text:empty){min-width:48px;justify-content:center}.mtrl-radios__control{position:relative;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;flex-shrink:0}.mtrl-radios__circle{position:relative;width:20px;height:20px;border:2px solid var(--mtrl-sys-color-on-surface-variant);border-radius:50%;box-sizing:border-box;transition:border-color 175ms linear(0, 0.075, 0.227, 0.39, 0.537, 0.657, 0.751, 0.822, 0.874, 0.912, 0.939, 0.958, 0.971, 0.98, 0.987, 0.991, 0.994, 0.996, 0.997, 0.998, 0.999, 0.999, 0.999, 1, 1)}.mtrl-radios__circle::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%) scale(0);width:10px;height:10px;border-radius:50%;background-color:var(--mtrl-sys-color-primary);opacity:0;transition:transform 425ms linear(0, 0.102, 0.323, 0.57, 0.784, 0.942, 1.039, 1.085, 1.094, 1.082, 1.06, 1.037, 1.018, 1.004, 0.995, 0.992, 0.991, 0.992, 0.995, 0.997, 0.999, 1, 1.001, 1.001, 1),opacity 175ms linear(0, 0.075, 0.227, 0.39, 0.537, 0.657, 0.751, 0.822, 0.874, 0.912, 0.939, 0.958, 0.971, 0.98, 0.987, 0.991, 0.994, 0.996, 0.997, 0.998, 0.999, 0.999, 0.999, 1, 1)}.mtrl-radios__ripple{position:absolute;inset:0;border-radius:50%;transition:background-color 175ms linear(0, 0.075, 0.227, 0.39, 0.537, 0.657, 0.751, 0.822, 0.874, 0.912, 0.939, 0.958, 0.971, 0.98, 0.987, 0.991, 0.994, 0.996, 0.997, 0.998, 0.999, 0.999, 0.999, 1, 1)}.mtrl-radios__item .mtrl-radios__input:not(:disabled):not(:checked)~.mtrl-radios__label:is(:hover,:active) .mtrl-radios__circle,.mtrl-radios__item .mtrl-radios__input:not(:disabled):not(:checked):focus-visible~.mtrl-radios__label .mtrl-radios__circle{border-color:var(--mtrl-sys-color-on-surface)}.mtrl-radios__item .mtrl-radios__input:not(:disabled)~.mtrl-radios__label:hover .mtrl-radios__ripple{background-color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 8%, transparent)}.mtrl-radios__item .mtrl-radios__input:not(:disabled):focus-visible~.mtrl-radios__label .mtrl-radios__ripple{background-color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 10%, transparent)}.mtrl-radios__item .mtrl-radios__input:not(:disabled)~.mtrl-radios__label:active .mtrl-radios__ripple{background-color:color-mix(in srgb, var(--mtrl-sys-color-primary) 10%, transparent)}.mtrl-radios__item .mtrl-radios__input:not(:disabled):checked~.mtrl-radios__label:hover .mtrl-radios__ripple{background-color:color-mix(in srgb, var(--mtrl-sys-color-primary) 8%, transparent)}.mtrl-radios__item .mtrl-radios__input:not(:disabled):checked:focus-visible~.mtrl-radios__label .mtrl-radios__ripple{background-color:color-mix(in srgb, var(--mtrl-sys-color-primary) 10%, transparent)}.mtrl-radios__item .mtrl-radios__input:not(:disabled):checked~.mtrl-radios__label:active .mtrl-radios__ripple{background-color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 10%, transparent)}.mtrl-radios__item .mtrl-radios__input:not(:disabled):focus-visible~.mtrl-radios__label .mtrl-radios__ripple{outline:3px solid var(--mtrl-sys-color-secondary);outline-offset:2px}.mtrl-radios__text{margin-inline-start:8px}.mtrl-radios__text:empty{display:none}
package/dist/elements/css/radios.js CHANGED
@@ -1,3 +1,3 @@
1
1
  import "./ripple.js";
2
2
  import { registerStyles } from "../styles.js";
3
- registerStyles({ "radios": ".mtrl-radios{display:flex;margin:0;padding:0}.mtrl-radios--vertical{flex-direction:column}.mtrl-radios--horizontal{flex-direction:row;flex-wrap:wrap;align-items:flex-start}.mtrl-radios--horizontal .mtrl-radios__item{margin-inline-end:16px}.mtrl-radios--horizontal .mtrl-radios__item:last-child{margin-inline-end:0}.mtrl-radios--disabled{pointer-events:none}.mtrl-radios__item{position:relative;display:inline-flex;align-items:center}.mtrl-radios__item--disabled{cursor:not-allowed}.mtrl-radios__item--disabled .mtrl-radios__label{cursor:not-allowed}.mtrl-radios__input{position:absolute;opacity:0;height:0;width:0;margin:0;padding:0}.mtrl-radios__input:checked~.mtrl-radios__label .mtrl-radios__circle{border-color:var(--mtrl-sys-color-primary)}.mtrl-radios__input:checked~.mtrl-radios__label .mtrl-radios__circle::after{transform:translate(-50%, -50%) scale(1);opacity:1}.mtrl-radios__input:disabled~.mtrl-radios__label .mtrl-radios__circle{border-color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 38%, transparent)}.mtrl-radios__input:disabled~.mtrl-radios__label .mtrl-radios__circle::after{background-color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 38%, transparent)}.mtrl-radios__input:disabled~.mtrl-radios__label .mtrl-radios__text{color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 38%, transparent)}.mtrl-radios__label{position:relative;display:inline-flex;align-items:center;cursor:pointer;padding:8px 0;height:48px;color:var(--mtrl-sys-color-on-surface);font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:16px;line-height:24px;letter-spacing:.5px;font-weight:400}.mtrl-radios__label--before .mtrl-radios__text{margin-inline:0 8px}.mtrl-radios__control{position:relative;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;flex-shrink:0}.mtrl-radios__circle{position:relative;width:20px;height:20px;border:2px solid var(--mtrl-sys-color-on-surface-variant);border-radius:50%;box-sizing:border-box;transition:border-color 175ms linear(0, 0.075, 0.227, 0.39, 0.537, 0.657, 0.751, 0.822, 0.874, 0.912, 0.939, 0.958, 0.971, 0.98, 0.987, 0.991, 0.994, 0.996, 0.997, 0.998, 0.999, 0.999, 0.999, 1, 1)}.mtrl-radios__circle::after{content:\"\";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%) scale(0);width:10px;height:10px;border-radius:50%;background-color:var(--mtrl-sys-color-primary);opacity:0;transition:transform 425ms linear(0, 0.102, 0.323, 0.57, 0.784, 0.942, 1.039, 1.085, 1.094, 1.082, 1.06, 1.037, 1.018, 1.004, 0.995, 0.992, 0.991, 0.992, 0.995, 0.997, 0.999, 1, 1.001, 1.001, 1),opacity 175ms linear(0, 0.075, 0.227, 0.39, 0.537, 0.657, 0.751, 0.822, 0.874, 0.912, 0.939, 0.958, 0.971, 0.98, 0.987, 0.991, 0.994, 0.996, 0.997, 0.998, 0.999, 0.999, 0.999, 1, 1)}.mtrl-radios__ripple{position:absolute;inset:0;border-radius:50%;transition:background-color 175ms linear(0, 0.075, 0.227, 0.39, 0.537, 0.657, 0.751, 0.822, 0.874, 0.912, 0.939, 0.958, 0.971, 0.98, 0.987, 0.991, 0.994, 0.996, 0.997, 0.998, 0.999, 0.999, 0.999, 1, 1)}.mtrl-radios__item .mtrl-radios__input:not(:disabled):not(:checked)~.mtrl-radios__label:is(:hover,:active) .mtrl-radios__circle,.mtrl-radios__item .mtrl-radios__input:not(:disabled):not(:checked):focus-visible~.mtrl-radios__label .mtrl-radios__circle{border-color:var(--mtrl-sys-color-on-surface)}.mtrl-radios__item .mtrl-radios__input:not(:disabled)~.mtrl-radios__label:hover .mtrl-radios__ripple{background-color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 8%, transparent)}.mtrl-radios__item .mtrl-radios__input:not(:disabled):focus-visible~.mtrl-radios__label .mtrl-radios__ripple{background-color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 10%, transparent)}.mtrl-radios__item .mtrl-radios__input:not(:disabled)~.mtrl-radios__label:active .mtrl-radios__ripple{background-color:color-mix(in srgb, var(--mtrl-sys-color-primary) 10%, transparent)}.mtrl-radios__item .mtrl-radios__input:not(:disabled):checked~.mtrl-radios__label:hover .mtrl-radios__ripple{background-color:color-mix(in srgb, var(--mtrl-sys-color-primary) 8%, transparent)}.mtrl-radios__item .mtrl-radios__input:not(:disabled):checked:focus-visible~.mtrl-radios__label .mtrl-radios__ripple{background-color:color-mix(in srgb, var(--mtrl-sys-color-primary) 10%, transparent)}.mtrl-radios__item .mtrl-radios__input:not(:disabled):checked~.mtrl-radios__label:active .mtrl-radios__ripple{background-color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 10%, transparent)}.mtrl-radios__item .mtrl-radios__input:not(:disabled):focus-visible~.mtrl-radios__label .mtrl-radios__ripple{outline:3px solid var(--mtrl-sys-color-secondary);outline-offset:2px}.mtrl-radios__text{margin-inline-start:8px}" });
3
+ registerStyles({ "radios": ".mtrl-radios{display:flex;margin:0;padding:0}.mtrl-radios--vertical{flex-direction:column}.mtrl-radios--horizontal{flex-direction:row;flex-wrap:wrap;align-items:flex-start}.mtrl-radios--horizontal .mtrl-radios__item{margin-inline-end:16px}.mtrl-radios--horizontal .mtrl-radios__item:last-child{margin-inline-end:0}.mtrl-radios--disabled{pointer-events:none}.mtrl-radios__item{position:relative;display:inline-flex;align-items:center}.mtrl-radios__item--disabled{cursor:not-allowed}.mtrl-radios__item--disabled .mtrl-radios__label{cursor:not-allowed}.mtrl-radios__input{position:absolute;opacity:0;height:0;width:0;margin:0;padding:0}.mtrl-radios__input:checked~.mtrl-radios__label .mtrl-radios__circle{border-color:var(--mtrl-sys-color-primary)}.mtrl-radios__input:checked~.mtrl-radios__label .mtrl-radios__circle::after{transform:translate(-50%, -50%) scale(1);opacity:1}.mtrl-radios__input:disabled~.mtrl-radios__label .mtrl-radios__circle{border-color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 38%, transparent)}.mtrl-radios__input:disabled~.mtrl-radios__label .mtrl-radios__circle::after{background-color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 38%, transparent)}.mtrl-radios__input:disabled~.mtrl-radios__label .mtrl-radios__text{color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 38%, transparent)}.mtrl-radios__label{position:relative;display:inline-flex;align-items:center;cursor:pointer;padding:4px 0;min-height:48px;color:var(--mtrl-sys-color-on-surface);font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:16px;line-height:24px;letter-spacing:.5px;font-weight:400}.mtrl-radios__label--before .mtrl-radios__text{margin-inline:0 8px}.mtrl-radios__label:has(>.mtrl-radios__text:empty){min-width:48px;justify-content:center}.mtrl-radios__control{position:relative;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;flex-shrink:0}.mtrl-radios__circle{position:relative;width:20px;height:20px;border:2px solid var(--mtrl-sys-color-on-surface-variant);border-radius:50%;box-sizing:border-box;transition:border-color 175ms linear(0, 0.075, 0.227, 0.39, 0.537, 0.657, 0.751, 0.822, 0.874, 0.912, 0.939, 0.958, 0.971, 0.98, 0.987, 0.991, 0.994, 0.996, 0.997, 0.998, 0.999, 0.999, 0.999, 1, 1)}.mtrl-radios__circle::after{content:\"\";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%) scale(0);width:10px;height:10px;border-radius:50%;background-color:var(--mtrl-sys-color-primary);opacity:0;transition:transform 425ms linear(0, 0.102, 0.323, 0.57, 0.784, 0.942, 1.039, 1.085, 1.094, 1.082, 1.06, 1.037, 1.018, 1.004, 0.995, 0.992, 0.991, 0.992, 0.995, 0.997, 0.999, 1, 1.001, 1.001, 1),opacity 175ms linear(0, 0.075, 0.227, 0.39, 0.537, 0.657, 0.751, 0.822, 0.874, 0.912, 0.939, 0.958, 0.971, 0.98, 0.987, 0.991, 0.994, 0.996, 0.997, 0.998, 0.999, 0.999, 0.999, 1, 1)}.mtrl-radios__ripple{position:absolute;inset:0;border-radius:50%;transition:background-color 175ms linear(0, 0.075, 0.227, 0.39, 0.537, 0.657, 0.751, 0.822, 0.874, 0.912, 0.939, 0.958, 0.971, 0.98, 0.987, 0.991, 0.994, 0.996, 0.997, 0.998, 0.999, 0.999, 0.999, 1, 1)}.mtrl-radios__item .mtrl-radios__input:not(:disabled):not(:checked)~.mtrl-radios__label:is(:hover,:active) .mtrl-radios__circle,.mtrl-radios__item .mtrl-radios__input:not(:disabled):not(:checked):focus-visible~.mtrl-radios__label .mtrl-radios__circle{border-color:var(--mtrl-sys-color-on-surface)}.mtrl-radios__item .mtrl-radios__input:not(:disabled)~.mtrl-radios__label:hover .mtrl-radios__ripple{background-color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 8%, transparent)}.mtrl-radios__item .mtrl-radios__input:not(:disabled):focus-visible~.mtrl-radios__label .mtrl-radios__ripple{background-color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 10%, transparent)}.mtrl-radios__item .mtrl-radios__input:not(:disabled)~.mtrl-radios__label:active .mtrl-radios__ripple{background-color:color-mix(in srgb, var(--mtrl-sys-color-primary) 10%, transparent)}.mtrl-radios__item .mtrl-radios__input:not(:disabled):checked~.mtrl-radios__label:hover .mtrl-radios__ripple{background-color:color-mix(in srgb, var(--mtrl-sys-color-primary) 8%, transparent)}.mtrl-radios__item .mtrl-radios__input:not(:disabled):checked:focus-visible~.mtrl-radios__label .mtrl-radios__ripple{background-color:color-mix(in srgb, var(--mtrl-sys-color-primary) 10%, transparent)}.mtrl-radios__item .mtrl-radios__input:not(:disabled):checked~.mtrl-radios__label:active .mtrl-radios__ripple{background-color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 10%, transparent)}.mtrl-radios__item .mtrl-radios__input:not(:disabled):focus-visible~.mtrl-radios__label .mtrl-radios__ripple{outline:3px solid var(--mtrl-sys-color-secondary);outline-offset:2px}.mtrl-radios__text{margin-inline-start:8px}.mtrl-radios__text:empty{display:none}" });
package/dist/elements/css/select.css CHANGED
@@ -1 +1 @@
1
- .mtrl-select{position:relative;width:100%;cursor:pointer;transition:border-color 100ms cubic-bezier(0.2, 0, 0, 1),background-color 100ms cubic-bezier(0.2, 0, 0, 1),box-shadow 100ms cubic-bezier(0.2, 0, 0, 1)}.mtrl-select>.mtrl-menu{position:absolute;top:100%;left:0;right:0;z-index:1;margin-top:0}.mtrl-select .mtrl-text-field__input{cursor:pointer;pointer-events:none;caret-color:rgba(0,0,0,0)}.mtrl-select .mtrl-text-field__trailing-icon{pointer-events:auto;cursor:pointer;transform:translateY(-50%);transition:250ms cubic-bezier(0.3, 0, 0, 1)}.mtrl-select .mtrl-text-field__trailing-icon svg{width:24px;height:24px;vertical-align:middle;color:inherit;transition:250ms cubic-bezier(0.3, 0, 0, 1)}.mtrl-select--open{z-index:700}.mtrl-select--open .mtrl-text-field--filled .mtrl-text-field__field::before{opacity:1}.mtrl-select--open .mtrl-text-field--filled .mtrl-text-field__label{color:var(--mtrl-sys-color-primary)}.mtrl-select--open .mtrl-text-field--filled .mtrl-text-field__trailing-icon{top:28px}.mtrl-select--open .mtrl-text-field--outlined::before{opacity:1;border-color:var(--mtrl-sys-color-primary)}.mtrl-select--open .mtrl-text-field--outlined .mtrl-text-field__label{color:var(--mtrl-sys-color-primary)}.mtrl-select--open .mtrl-text-field__trailing-icon{color:var(--mtrl-sys-color-primary)}.mtrl-select--open .mtrl-text-field__trailing-icon svg{transform:rotate(180deg)}.mtrl-select--disabled{pointer-events:none;opacity:.38;cursor:default}.mtrl-select--disabled .mtrl-text-field__input,.mtrl-select--disabled .mtrl-text-field__trailing-icon{cursor:default}.mtrl-select--error .mtrl-text-field__trailing-icon{color:var(--mtrl-sys-color-error)}.mtrl-select+.mtrl-menu{max-height:20rem;overflow-y:auto;max-width:initial}.mtrl-select+.mtrl-menu .mtrl-menu__item{min-height:3rem}.mtrl-select+.mtrl-menu .mtrl-menu__item--selected{background-color:color-mix(in srgb, var(--mtrl-sys-color-primary) 12%, transparent);color:var(--mtrl-sys-color-primary);font-weight:500}.mtrl-select+.mtrl-menu .mtrl-menu__item--selected::after{content:"";display:block;position:absolute;right:12px;width:18px;height:18px;mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");mask-size:contain;-webkit-mask-size:contain;mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;mask-position:center;-webkit-mask-position:center;background-color:currentColor}.mtrl-select--small .mtrl-text-field{height:48px}.mtrl-select--small .mtrl-text-field__input{height:48px;padding-top:8px;padding-bottom:8px}.mtrl-select--large .mtrl-text-field{height:64px}.mtrl-select--large .mtrl-text-field__input{height:64px;padding-top:16px;padding-bottom:16px}.mtrl-select:focus-within .mtrl-text-field__trailing-icon{color:var(--mtrl-sys-color-primary)}
1
+ .mtrl-select{position:relative;cursor:pointer;transition:border-color 100ms cubic-bezier(0.2, 0, 0, 1),background-color 100ms cubic-bezier(0.2, 0, 0, 1),box-shadow 100ms cubic-bezier(0.2, 0, 0, 1)}.mtrl-select>.mtrl-menu{position:absolute;top:100%;left:0;right:0;z-index:1;margin-top:0;max-width:none}.mtrl-select .mtrl-text-field__input{cursor:pointer;pointer-events:none;caret-color:rgba(0,0,0,0)}.mtrl-select .mtrl-text-field__trailing-icon{pointer-events:auto;cursor:pointer;transform:translateY(-50%);transition:250ms cubic-bezier(0.3, 0, 0, 1)}.mtrl-select .mtrl-text-field__trailing-icon svg{width:24px;height:24px;vertical-align:middle;color:inherit;transition:250ms cubic-bezier(0.3, 0, 0, 1)}.mtrl-select--open{z-index:700}.mtrl-select--open .mtrl-text-field--filled .mtrl-text-field__field::before{opacity:1}.mtrl-select--open .mtrl-text-field--filled .mtrl-text-field__label{color:var(--mtrl-sys-color-primary)}.mtrl-select--open .mtrl-text-field--filled .mtrl-text-field__trailing-icon{top:28px}.mtrl-select--open .mtrl-text-field--outlined::before{opacity:1;border-color:var(--mtrl-sys-color-primary)}.mtrl-select--open .mtrl-text-field--outlined .mtrl-text-field__label{color:var(--mtrl-sys-color-primary)}.mtrl-select--open .mtrl-text-field__trailing-icon{color:var(--mtrl-sys-color-primary)}.mtrl-select--open .mtrl-text-field__trailing-icon svg{transform:rotate(180deg)}.mtrl-select--disabled{pointer-events:none;opacity:.38;cursor:default}.mtrl-select--disabled .mtrl-text-field__input,.mtrl-select--disabled .mtrl-text-field__trailing-icon{cursor:default}.mtrl-select--error .mtrl-text-field__trailing-icon{color:var(--mtrl-sys-color-error)}.mtrl-select+.mtrl-menu{max-height:20rem;overflow-y:auto;max-width:initial}.mtrl-select+.mtrl-menu .mtrl-menu__item{min-height:3rem}.mtrl-select--small .mtrl-text-field{height:48px}.mtrl-select--small .mtrl-text-field__input{height:48px;padding-top:8px;padding-bottom:8px}.mtrl-select--large .mtrl-text-field{height:64px}.mtrl-select--large .mtrl-text-field__input{height:64px;padding-top:16px;padding-bottom:16px}.mtrl-select:focus-within .mtrl-text-field__trailing-icon{color:var(--mtrl-sys-color-primary)}
package/dist/elements/css/select.js CHANGED
@@ -2,4 +2,4 @@ import "./ripple.js";
2
2
  import "./text-field.js";
3
3
  import "./menu.js";
4
4
  import { registerStyles } from "../styles.js";
5
- registerStyles({ "select": ".mtrl-select{position:relative;width:100%;cursor:pointer;transition:border-color 100ms cubic-bezier(0.2, 0, 0, 1),background-color 100ms cubic-bezier(0.2, 0, 0, 1),box-shadow 100ms cubic-bezier(0.2, 0, 0, 1)}.mtrl-select>.mtrl-menu{position:absolute;top:100%;left:0;right:0;z-index:1;margin-top:0}.mtrl-select .mtrl-text-field__input{cursor:pointer;pointer-events:none;caret-color:rgba(0,0,0,0)}.mtrl-select .mtrl-text-field__trailing-icon{pointer-events:auto;cursor:pointer;transform:translateY(-50%);transition:250ms cubic-bezier(0.3, 0, 0, 1)}.mtrl-select .mtrl-text-field__trailing-icon svg{width:24px;height:24px;vertical-align:middle;color:inherit;transition:250ms cubic-bezier(0.3, 0, 0, 1)}.mtrl-select--open{z-index:700}.mtrl-select--open .mtrl-text-field--filled .mtrl-text-field__field::before{opacity:1}.mtrl-select--open .mtrl-text-field--filled .mtrl-text-field__label{color:var(--mtrl-sys-color-primary)}.mtrl-select--open .mtrl-text-field--filled .mtrl-text-field__trailing-icon{top:28px}.mtrl-select--open .mtrl-text-field--outlined::before{opacity:1;border-color:var(--mtrl-sys-color-primary)}.mtrl-select--open .mtrl-text-field--outlined .mtrl-text-field__label{color:var(--mtrl-sys-color-primary)}.mtrl-select--open .mtrl-text-field__trailing-icon{color:var(--mtrl-sys-color-primary)}.mtrl-select--open .mtrl-text-field__trailing-icon svg{transform:rotate(180deg)}.mtrl-select--disabled{pointer-events:none;opacity:.38;cursor:default}.mtrl-select--disabled .mtrl-text-field__input,.mtrl-select--disabled .mtrl-text-field__trailing-icon{cursor:default}.mtrl-select--error .mtrl-text-field__trailing-icon{color:var(--mtrl-sys-color-error)}.mtrl-select+.mtrl-menu{max-height:20rem;overflow-y:auto;max-width:initial}.mtrl-select+.mtrl-menu .mtrl-menu__item{min-height:3rem}.mtrl-select+.mtrl-menu .mtrl-menu__item--selected{background-color:color-mix(in srgb, var(--mtrl-sys-color-primary) 12%, transparent);color:var(--mtrl-sys-color-primary);font-weight:500}.mtrl-select+.mtrl-menu .mtrl-menu__item--selected::after{content:\"\";display:block;position:absolute;right:12px;width:18px;height:18px;mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E\");-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E\");mask-size:contain;-webkit-mask-size:contain;mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;mask-position:center;-webkit-mask-position:center;background-color:currentColor}.mtrl-select--small .mtrl-text-field{height:48px}.mtrl-select--small .mtrl-text-field__input{height:48px;padding-top:8px;padding-bottom:8px}.mtrl-select--large .mtrl-text-field{height:64px}.mtrl-select--large .mtrl-text-field__input{height:64px;padding-top:16px;padding-bottom:16px}.mtrl-select:focus-within .mtrl-text-field__trailing-icon{color:var(--mtrl-sys-color-primary)}" });
5
+ registerStyles({ "select": ".mtrl-select{position:relative;cursor:pointer;transition:border-color 100ms cubic-bezier(0.2, 0, 0, 1),background-color 100ms cubic-bezier(0.2, 0, 0, 1),box-shadow 100ms cubic-bezier(0.2, 0, 0, 1)}.mtrl-select>.mtrl-menu{position:absolute;top:100%;left:0;right:0;z-index:1;margin-top:0;max-width:none}.mtrl-select .mtrl-text-field__input{cursor:pointer;pointer-events:none;caret-color:rgba(0,0,0,0)}.mtrl-select .mtrl-text-field__trailing-icon{pointer-events:auto;cursor:pointer;transform:translateY(-50%);transition:250ms cubic-bezier(0.3, 0, 0, 1)}.mtrl-select .mtrl-text-field__trailing-icon svg{width:24px;height:24px;vertical-align:middle;color:inherit;transition:250ms cubic-bezier(0.3, 0, 0, 1)}.mtrl-select--open{z-index:700}.mtrl-select--open .mtrl-text-field--filled .mtrl-text-field__field::before{opacity:1}.mtrl-select--open .mtrl-text-field--filled .mtrl-text-field__label{color:var(--mtrl-sys-color-primary)}.mtrl-select--open .mtrl-text-field--filled .mtrl-text-field__trailing-icon{top:28px}.mtrl-select--open .mtrl-text-field--outlined::before{opacity:1;border-color:var(--mtrl-sys-color-primary)}.mtrl-select--open .mtrl-text-field--outlined .mtrl-text-field__label{color:var(--mtrl-sys-color-primary)}.mtrl-select--open .mtrl-text-field__trailing-icon{color:var(--mtrl-sys-color-primary)}.mtrl-select--open .mtrl-text-field__trailing-icon svg{transform:rotate(180deg)}.mtrl-select--disabled{pointer-events:none;opacity:.38;cursor:default}.mtrl-select--disabled .mtrl-text-field__input,.mtrl-select--disabled .mtrl-text-field__trailing-icon{cursor:default}.mtrl-select--error .mtrl-text-field__trailing-icon{color:var(--mtrl-sys-color-error)}.mtrl-select+.mtrl-menu{max-height:20rem;overflow-y:auto;max-width:initial}.mtrl-select+.mtrl-menu .mtrl-menu__item{min-height:3rem}.mtrl-select--small .mtrl-text-field{height:48px}.mtrl-select--small .mtrl-text-field__input{height:48px;padding-top:8px;padding-bottom:8px}.mtrl-select--large .mtrl-text-field{height:64px}.mtrl-select--large .mtrl-text-field__input{height:64px;padding-top:16px;padding-bottom:16px}.mtrl-select:focus-within .mtrl-text-field__trailing-icon{color:var(--mtrl-sys-color-primary)}" });
package/dist/elements/css/side-sheet.css CHANGED
@@ -1 +1 @@
1
- .mtrl-side-sheet{position:fixed;inset:0;z-index:1000;display:flex;pointer-events:none}.mtrl-side-sheet--open{pointer-events:auto}.mtrl-side-sheet__scrim{position:absolute;inset:0;background-color:color-mix(in srgb, var(--mtrl-sys-color-scrim) 32%, transparent);opacity:0;visibility:hidden;transition:opacity 175ms linear(0, 0.075, 0.227, 0.39, 0.537, 0.657, 0.751, 0.822, 0.874, 0.912, 0.939, 0.958, 0.971, 0.98, 0.987, 0.991, 0.994, 0.996, 0.997, 0.998, 0.999, 0.999, 0.999, 1, 1),visibility 0s linear 175ms}.mtrl-side-sheet__container{position:relative;height:100%;max-width:400px;display:flex;flex-direction:column;box-sizing:border-box;pointer-events:auto;color:var(--mtrl-sys-color-on-surface);transition:transform 175ms linear(0, 0.075, 0.227, 0.39, 0.537, 0.657, 0.751, 0.822, 0.874, 0.912, 0.939, 0.958, 0.971, 0.98, 0.987, 0.991, 0.994, 0.996, 0.997, 0.998, 0.999, 0.999, 0.999, 1, 1)}.mtrl-side-sheet__container:focus{outline:none}.mtrl-side-sheet__container:focus-visible{outline:3px solid var(--mtrl-sys-color-secondary);outline-offset:-3px}.mtrl-side-sheet__header{flex:0 0 auto;display:flex;align-items:center;gap:12px;padding:16px 24px;min-height:72px;box-sizing:border-box}.mtrl-side-sheet__title{margin:0;flex:1 1 auto;min-width:0;color:var(--mtrl-sys-color-on-surface);font-family:var(--mtrl-ref-typeface-brand, Roboto, sans-serif);font-size:22px;line-height:28px;letter-spacing:0;font-weight:400}.mtrl-side-sheet__close{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;margin-inline-end:-8px;padding:0;border:none;border-radius:50%;background:rgba(0,0,0,0);color:var(--mtrl-sys-color-on-surface-variant);cursor:pointer;position:relative}.mtrl-side-sheet__close::before{content:"";position:absolute;inset:0;background-color:var(--mtrl-sys-color-on-surface-variant);opacity:.08;pointer-events:none;border-radius:inherit}.mtrl-side-sheet__close:focus-visible{outline:3px solid var(--mtrl-sys-color-secondary);outline-offset:2px}.mtrl-side-sheet__content{flex:1 1 auto;min-height:0;overflow-y:auto;padding:0 24px 24px;font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.25px;font-weight:400;color:var(--mtrl-sys-color-on-surface-variant)}.mtrl-side-sheet--standard{pointer-events:none}.mtrl-side-sheet--standard .mtrl-side-sheet__container{background-color:var(--mtrl-sys-color-surface);pointer-events:auto}.mtrl-side-sheet--standard.mtrl-side-sheet--end .mtrl-side-sheet__container{box-shadow:32px 0 0 0 var(--mtrl-sys-color-surface)}.mtrl-side-sheet--standard.mtrl-side-sheet--start .mtrl-side-sheet__container{box-shadow:-32px 0 0 0 var(--mtrl-sys-color-surface)}.mtrl-side-sheet--modal .mtrl-side-sheet__container{background-color:var(--mtrl-sys-color-surface-container-low);box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 1px 3px 1px rgba(0,0,0,.15)}.mtrl-side-sheet--modal.mtrl-side-sheet--end .mtrl-side-sheet__container{box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 1px 3px 1px rgba(0,0,0,.15),32px 0 0 0 var(--mtrl-sys-color-surface-container-low);border-start-start-radius:var(--mtrl-sys-shape-corner-large, 16px);border-end-start-radius:var(--mtrl-sys-shape-corner-large, 16px)}.mtrl-side-sheet--modal.mtrl-side-sheet--start .mtrl-side-sheet__container{box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 1px 3px 1px rgba(0,0,0,.15),-32px 0 0 0 var(--mtrl-sys-color-surface-container-low);border-start-end-radius:var(--mtrl-sys-shape-corner-large, 16px);border-end-end-radius:var(--mtrl-sys-shape-corner-large, 16px)}.mtrl-side-sheet--end{justify-content:flex-end}.mtrl-side-sheet--end .mtrl-side-sheet__container{transform:translateX(100%)}.mtrl-side-sheet--start{justify-content:flex-start}.mtrl-side-sheet--start .mtrl-side-sheet__container{transform:translateX(-100%)}.mtrl-side-sheet--open .mtrl-side-sheet__container{transform:translateX(0);transition:transform 450ms linear(0, 0.055, 0.18, 0.332, 0.483, 0.619, 0.733, 0.823, 0.891, 0.94, 0.973, 0.994, 1.007, 1.013, 1.015, 1.015, 1.013, 1.011, 1.009, 1.006, 1.005, 1.003, 1.002, 1.001, 1)}.mtrl-side-sheet--open .mtrl-side-sheet__scrim{opacity:1;visibility:visible;transition:opacity 450ms linear(0, 0.055, 0.18, 0.332, 0.483, 0.619, 0.733, 0.823, 0.891, 0.94, 0.973, 0.994, 1.007, 1.013, 1.015, 1.015, 1.013, 1.011, 1.009, 1.006, 1.005, 1.003, 1.002, 1.001, 1),visibility 0s}@media(prefers-reduced-motion: reduce){.mtrl-side-sheet .mtrl-side-sheet__container,.mtrl-side-sheet .mtrl-side-sheet__scrim,.mtrl-side-sheet--open .mtrl-side-sheet__container,.mtrl-side-sheet--open .mtrl-side-sheet__scrim{transition:none}}dialog.mtrl-side-sheet{width:auto;height:auto;max-width:none;max-height:none;margin:0;padding:0;border:0;overflow:visible;background:rgba(0,0,0,0);color:inherit;transition:overlay 175ms allow-discrete}dialog.mtrl-side-sheet::backdrop{background-color:color-mix(in srgb, var(--mtrl-sys-color-scrim) 32%, transparent);opacity:0;transition:opacity 175ms linear(0, 0.075, 0.227, 0.39, 0.537, 0.657, 0.751, 0.822, 0.874, 0.912, 0.939, 0.958, 0.971, 0.98, 0.987, 0.991, 0.994, 0.996, 0.997, 0.998, 0.999, 0.999, 0.999, 1, 1)}dialog.mtrl-side-sheet.mtrl-side-sheet--open::backdrop{opacity:1;transition:opacity 450ms linear(0, 0.055, 0.18, 0.332, 0.483, 0.619, 0.733, 0.823, 0.891, 0.94, 0.973, 0.994, 1.007, 1.013, 1.015, 1.015, 1.013, 1.011, 1.009, 1.006, 1.005, 1.003, 1.002, 1.001, 1)}@media(prefers-reduced-motion: reduce){dialog.mtrl-side-sheet,dialog.mtrl-side-sheet::backdrop{transition:none}}
1
+ .mtrl-side-sheet{position:fixed;inset:0;z-index:1000;display:flex;pointer-events:none}.mtrl-side-sheet--open{pointer-events:auto}.mtrl-side-sheet__scrim{position:absolute;inset:0;background-color:color-mix(in srgb, var(--mtrl-sys-color-scrim) 32%, transparent);opacity:0;visibility:hidden;transition:opacity 175ms linear(0, 0.075, 0.227, 0.39, 0.537, 0.657, 0.751, 0.822, 0.874, 0.912, 0.939, 0.958, 0.971, 0.98, 0.987, 0.991, 0.994, 0.996, 0.997, 0.998, 0.999, 0.999, 0.999, 1, 1),visibility 0s linear 175ms}.mtrl-side-sheet__container{position:relative;height:100%;max-width:400px;display:flex;flex-direction:column;box-sizing:border-box;pointer-events:auto;color:var(--mtrl-sys-color-on-surface);transition:transform 175ms linear(0, 0.075, 0.227, 0.39, 0.537, 0.657, 0.751, 0.822, 0.874, 0.912, 0.939, 0.958, 0.971, 0.98, 0.987, 0.991, 0.994, 0.996, 0.997, 0.998, 0.999, 0.999, 0.999, 1, 1)}.mtrl-side-sheet__container:focus{outline:none}.mtrl-side-sheet__container:focus-visible{outline:3px solid var(--mtrl-sys-color-secondary);outline-offset:-3px}.mtrl-side-sheet__header{flex:0 0 auto;display:flex;align-items:center;gap:12px;padding:16px 24px;min-height:72px;box-sizing:border-box}.mtrl-side-sheet__title{margin:0;flex:1 1 auto;min-width:0;color:var(--mtrl-sys-color-on-surface);font-family:var(--mtrl-ref-typeface-brand, Roboto, sans-serif);font-size:22px;line-height:28px;letter-spacing:0;font-weight:400}.mtrl-side-sheet__close{position:relative;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;margin-inline-end:-8px;padding:0;border:none;border-radius:50%;background:rgba(0,0,0,0);color:var(--mtrl-sys-color-on-surface-variant);cursor:pointer}:where(.mtrl-side-sheet__close){position:relative}.mtrl-side-sheet__close::before{content:"";position:absolute;inset:0;background-color:var(--mtrl-sys-color-on-surface-variant);opacity:.08;pointer-events:none;border-radius:inherit}.mtrl-side-sheet__close:focus-visible{outline:3px solid var(--mtrl-sys-color-secondary);outline-offset:2px}.mtrl-side-sheet__close::after{content:"";position:absolute;width:48px;height:48px;top:50%;left:50%;transform:translate(-50%, -50%)}.mtrl-side-sheet__content{flex:1 1 auto;min-height:0;overflow-y:auto;padding:0 24px 24px;font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.25px;font-weight:400;color:var(--mtrl-sys-color-on-surface-variant)}.mtrl-side-sheet--standard{pointer-events:none}.mtrl-side-sheet--standard .mtrl-side-sheet__container{background-color:var(--mtrl-sys-color-surface);pointer-events:auto}.mtrl-side-sheet--standard.mtrl-side-sheet--end .mtrl-side-sheet__container{box-shadow:32px 0 0 0 var(--mtrl-sys-color-surface)}.mtrl-side-sheet--standard.mtrl-side-sheet--start .mtrl-side-sheet__container{box-shadow:-32px 0 0 0 var(--mtrl-sys-color-surface)}.mtrl-side-sheet--modal .mtrl-side-sheet__container{background-color:var(--mtrl-sys-color-surface-container-low);box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 1px 3px 1px rgba(0,0,0,.15)}.mtrl-side-sheet--modal.mtrl-side-sheet--end .mtrl-side-sheet__container{box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 1px 3px 1px rgba(0,0,0,.15),32px 0 0 0 var(--mtrl-sys-color-surface-container-low);border-start-start-radius:var(--mtrl-sys-shape-corner-large, 16px);border-end-start-radius:var(--mtrl-sys-shape-corner-large, 16px)}.mtrl-side-sheet--modal.mtrl-side-sheet--start .mtrl-side-sheet__container{box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 1px 3px 1px rgba(0,0,0,.15),-32px 0 0 0 var(--mtrl-sys-color-surface-container-low);border-start-end-radius:var(--mtrl-sys-shape-corner-large, 16px);border-end-end-radius:var(--mtrl-sys-shape-corner-large, 16px)}.mtrl-side-sheet--end{justify-content:flex-end}.mtrl-side-sheet--end .mtrl-side-sheet__container{transform:translateX(100%)}.mtrl-side-sheet--start{justify-content:flex-start}.mtrl-side-sheet--start .mtrl-side-sheet__container{transform:translateX(-100%)}.mtrl-side-sheet--open .mtrl-side-sheet__container{transform:translateX(0);transition:transform 450ms linear(0, 0.055, 0.18, 0.332, 0.483, 0.619, 0.733, 0.823, 0.891, 0.94, 0.973, 0.994, 1.007, 1.013, 1.015, 1.015, 1.013, 1.011, 1.009, 1.006, 1.005, 1.003, 1.002, 1.001, 1)}.mtrl-side-sheet--open .mtrl-side-sheet__scrim{opacity:1;visibility:visible;transition:opacity 450ms linear(0, 0.055, 0.18, 0.332, 0.483, 0.619, 0.733, 0.823, 0.891, 0.94, 0.973, 0.994, 1.007, 1.013, 1.015, 1.015, 1.013, 1.011, 1.009, 1.006, 1.005, 1.003, 1.002, 1.001, 1),visibility 0s}@media(prefers-reduced-motion: reduce){.mtrl-side-sheet .mtrl-side-sheet__container,.mtrl-side-sheet .mtrl-side-sheet__scrim,.mtrl-side-sheet--open .mtrl-side-sheet__container,.mtrl-side-sheet--open .mtrl-side-sheet__scrim{transition:none}}dialog.mtrl-side-sheet{width:auto;height:auto;max-width:none;max-height:none;margin:0;padding:0;border:0;overflow:visible;background:rgba(0,0,0,0);color:inherit;transition:overlay 175ms allow-discrete}dialog.mtrl-side-sheet::backdrop{background-color:color-mix(in srgb, var(--mtrl-sys-color-scrim) 32%, transparent);opacity:0;transition:opacity 175ms linear(0, 0.075, 0.227, 0.39, 0.537, 0.657, 0.751, 0.822, 0.874, 0.912, 0.939, 0.958, 0.971, 0.98, 0.987, 0.991, 0.994, 0.996, 0.997, 0.998, 0.999, 0.999, 0.999, 1, 1)}dialog.mtrl-side-sheet.mtrl-side-sheet--open::backdrop{opacity:1;transition:opacity 450ms linear(0, 0.055, 0.18, 0.332, 0.483, 0.619, 0.733, 0.823, 0.891, 0.94, 0.973, 0.994, 1.007, 1.013, 1.015, 1.015, 1.013, 1.011, 1.009, 1.006, 1.005, 1.003, 1.002, 1.001, 1)}@media(prefers-reduced-motion: reduce){dialog.mtrl-side-sheet,dialog.mtrl-side-sheet::backdrop{transition:none}}
package/dist/elements/css/side-sheet.js CHANGED
@@ -1,3 +1,3 @@
1
1
  import "./ripple.js";
2
2
  import { registerStyles } from "../styles.js";
3
- registerStyles({ "side-sheet": ".mtrl-side-sheet{position:fixed;inset:0;z-index:1000;display:flex;pointer-events:none}.mtrl-side-sheet--open{pointer-events:auto}.mtrl-side-sheet__scrim{position:absolute;inset:0;background-color:color-mix(in srgb, var(--mtrl-sys-color-scrim) 32%, transparent);opacity:0;visibility:hidden;transition:opacity 175ms linear(0, 0.075, 0.227, 0.39, 0.537, 0.657, 0.751, 0.822, 0.874, 0.912, 0.939, 0.958, 0.971, 0.98, 0.987, 0.991, 0.994, 0.996, 0.997, 0.998, 0.999, 0.999, 0.999, 1, 1),visibility 0s linear 175ms}.mtrl-side-sheet__container{position:relative;height:100%;max-width:400px;display:flex;flex-direction:column;box-sizing:border-box;pointer-events:auto;color:var(--mtrl-sys-color-on-surface);transition:transform 175ms linear(0, 0.075, 0.227, 0.39, 0.537, 0.657, 0.751, 0.822, 0.874, 0.912, 0.939, 0.958, 0.971, 0.98, 0.987, 0.991, 0.994, 0.996, 0.997, 0.998, 0.999, 0.999, 0.999, 1, 1)}.mtrl-side-sheet__container:focus{outline:none}.mtrl-side-sheet__container:focus-visible{outline:3px solid var(--mtrl-sys-color-secondary);outline-offset:-3px}.mtrl-side-sheet__header{flex:0 0 auto;display:flex;align-items:center;gap:12px;padding:16px 24px;min-height:72px;box-sizing:border-box}.mtrl-side-sheet__title{margin:0;flex:1 1 auto;min-width:0;color:var(--mtrl-sys-color-on-surface);font-family:var(--mtrl-ref-typeface-brand, Roboto, sans-serif);font-size:22px;line-height:28px;letter-spacing:0;font-weight:400}.mtrl-side-sheet__close{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;margin-inline-end:-8px;padding:0;border:none;border-radius:50%;background:rgba(0,0,0,0);color:var(--mtrl-sys-color-on-surface-variant);cursor:pointer;position:relative}.mtrl-side-sheet__close::before{content:\"\";position:absolute;inset:0;background-color:var(--mtrl-sys-color-on-surface-variant);opacity:.08;pointer-events:none;border-radius:inherit}.mtrl-side-sheet__close:focus-visible{outline:3px solid var(--mtrl-sys-color-secondary);outline-offset:2px}.mtrl-side-sheet__content{flex:1 1 auto;min-height:0;overflow-y:auto;padding:0 24px 24px;font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.25px;font-weight:400;color:var(--mtrl-sys-color-on-surface-variant)}.mtrl-side-sheet--standard{pointer-events:none}.mtrl-side-sheet--standard .mtrl-side-sheet__container{background-color:var(--mtrl-sys-color-surface);pointer-events:auto}.mtrl-side-sheet--standard.mtrl-side-sheet--end .mtrl-side-sheet__container{box-shadow:32px 0 0 0 var(--mtrl-sys-color-surface)}.mtrl-side-sheet--standard.mtrl-side-sheet--start .mtrl-side-sheet__container{box-shadow:-32px 0 0 0 var(--mtrl-sys-color-surface)}.mtrl-side-sheet--modal .mtrl-side-sheet__container{background-color:var(--mtrl-sys-color-surface-container-low);box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 1px 3px 1px rgba(0,0,0,.15)}.mtrl-side-sheet--modal.mtrl-side-sheet--end .mtrl-side-sheet__container{box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 1px 3px 1px rgba(0,0,0,.15),32px 0 0 0 var(--mtrl-sys-color-surface-container-low);border-start-start-radius:var(--mtrl-sys-shape-corner-large, 16px);border-end-start-radius:var(--mtrl-sys-shape-corner-large, 16px)}.mtrl-side-sheet--modal.mtrl-side-sheet--start .mtrl-side-sheet__container{box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 1px 3px 1px rgba(0,0,0,.15),-32px 0 0 0 var(--mtrl-sys-color-surface-container-low);border-start-end-radius:var(--mtrl-sys-shape-corner-large, 16px);border-end-end-radius:var(--mtrl-sys-shape-corner-large, 16px)}.mtrl-side-sheet--end{justify-content:flex-end}.mtrl-side-sheet--end .mtrl-side-sheet__container{transform:translateX(100%)}.mtrl-side-sheet--start{justify-content:flex-start}.mtrl-side-sheet--start .mtrl-side-sheet__container{transform:translateX(-100%)}.mtrl-side-sheet--open .mtrl-side-sheet__container{transform:translateX(0);transition:transform 450ms linear(0, 0.055, 0.18, 0.332, 0.483, 0.619, 0.733, 0.823, 0.891, 0.94, 0.973, 0.994, 1.007, 1.013, 1.015, 1.015, 1.013, 1.011, 1.009, 1.006, 1.005, 1.003, 1.002, 1.001, 1)}.mtrl-side-sheet--open .mtrl-side-sheet__scrim{opacity:1;visibility:visible;transition:opacity 450ms linear(0, 0.055, 0.18, 0.332, 0.483, 0.619, 0.733, 0.823, 0.891, 0.94, 0.973, 0.994, 1.007, 1.013, 1.015, 1.015, 1.013, 1.011, 1.009, 1.006, 1.005, 1.003, 1.002, 1.001, 1),visibility 0s}@media(prefers-reduced-motion: reduce){.mtrl-side-sheet .mtrl-side-sheet__container,.mtrl-side-sheet .mtrl-side-sheet__scrim,.mtrl-side-sheet--open .mtrl-side-sheet__container,.mtrl-side-sheet--open .mtrl-side-sheet__scrim{transition:none}}dialog.mtrl-side-sheet{width:auto;height:auto;max-width:none;max-height:none;margin:0;padding:0;border:0;overflow:visible;background:rgba(0,0,0,0);color:inherit;transition:overlay 175ms allow-discrete}dialog.mtrl-side-sheet::backdrop{background-color:color-mix(in srgb, var(--mtrl-sys-color-scrim) 32%, transparent);opacity:0;transition:opacity 175ms linear(0, 0.075, 0.227, 0.39, 0.537, 0.657, 0.751, 0.822, 0.874, 0.912, 0.939, 0.958, 0.971, 0.98, 0.987, 0.991, 0.994, 0.996, 0.997, 0.998, 0.999, 0.999, 0.999, 1, 1)}dialog.mtrl-side-sheet.mtrl-side-sheet--open::backdrop{opacity:1;transition:opacity 450ms linear(0, 0.055, 0.18, 0.332, 0.483, 0.619, 0.733, 0.823, 0.891, 0.94, 0.973, 0.994, 1.007, 1.013, 1.015, 1.015, 1.013, 1.011, 1.009, 1.006, 1.005, 1.003, 1.002, 1.001, 1)}@media(prefers-reduced-motion: reduce){dialog.mtrl-side-sheet,dialog.mtrl-side-sheet::backdrop{transition:none}}" });
3
+ registerStyles({ "side-sheet": ".mtrl-side-sheet{position:fixed;inset:0;z-index:1000;display:flex;pointer-events:none}.mtrl-side-sheet--open{pointer-events:auto}.mtrl-side-sheet__scrim{position:absolute;inset:0;background-color:color-mix(in srgb, var(--mtrl-sys-color-scrim) 32%, transparent);opacity:0;visibility:hidden;transition:opacity 175ms linear(0, 0.075, 0.227, 0.39, 0.537, 0.657, 0.751, 0.822, 0.874, 0.912, 0.939, 0.958, 0.971, 0.98, 0.987, 0.991, 0.994, 0.996, 0.997, 0.998, 0.999, 0.999, 0.999, 1, 1),visibility 0s linear 175ms}.mtrl-side-sheet__container{position:relative;height:100%;max-width:400px;display:flex;flex-direction:column;box-sizing:border-box;pointer-events:auto;color:var(--mtrl-sys-color-on-surface);transition:transform 175ms linear(0, 0.075, 0.227, 0.39, 0.537, 0.657, 0.751, 0.822, 0.874, 0.912, 0.939, 0.958, 0.971, 0.98, 0.987, 0.991, 0.994, 0.996, 0.997, 0.998, 0.999, 0.999, 0.999, 1, 1)}.mtrl-side-sheet__container:focus{outline:none}.mtrl-side-sheet__container:focus-visible{outline:3px solid var(--mtrl-sys-color-secondary);outline-offset:-3px}.mtrl-side-sheet__header{flex:0 0 auto;display:flex;align-items:center;gap:12px;padding:16px 24px;min-height:72px;box-sizing:border-box}.mtrl-side-sheet__title{margin:0;flex:1 1 auto;min-width:0;color:var(--mtrl-sys-color-on-surface);font-family:var(--mtrl-ref-typeface-brand, Roboto, sans-serif);font-size:22px;line-height:28px;letter-spacing:0;font-weight:400}.mtrl-side-sheet__close{position:relative;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;margin-inline-end:-8px;padding:0;border:none;border-radius:50%;background:rgba(0,0,0,0);color:var(--mtrl-sys-color-on-surface-variant);cursor:pointer}:where(.mtrl-side-sheet__close){position:relative}.mtrl-side-sheet__close::before{content:\"\";position:absolute;inset:0;background-color:var(--mtrl-sys-color-on-surface-variant);opacity:.08;pointer-events:none;border-radius:inherit}.mtrl-side-sheet__close:focus-visible{outline:3px solid var(--mtrl-sys-color-secondary);outline-offset:2px}.mtrl-side-sheet__close::after{content:\"\";position:absolute;width:48px;height:48px;top:50%;left:50%;transform:translate(-50%, -50%)}.mtrl-side-sheet__content{flex:1 1 auto;min-height:0;overflow-y:auto;padding:0 24px 24px;font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.25px;font-weight:400;color:var(--mtrl-sys-color-on-surface-variant)}.mtrl-side-sheet--standard{pointer-events:none}.mtrl-side-sheet--standard .mtrl-side-sheet__container{background-color:var(--mtrl-sys-color-surface);pointer-events:auto}.mtrl-side-sheet--standard.mtrl-side-sheet--end .mtrl-side-sheet__container{box-shadow:32px 0 0 0 var(--mtrl-sys-color-surface)}.mtrl-side-sheet--standard.mtrl-side-sheet--start .mtrl-side-sheet__container{box-shadow:-32px 0 0 0 var(--mtrl-sys-color-surface)}.mtrl-side-sheet--modal .mtrl-side-sheet__container{background-color:var(--mtrl-sys-color-surface-container-low);box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 1px 3px 1px rgba(0,0,0,.15)}.mtrl-side-sheet--modal.mtrl-side-sheet--end .mtrl-side-sheet__container{box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 1px 3px 1px rgba(0,0,0,.15),32px 0 0 0 var(--mtrl-sys-color-surface-container-low);border-start-start-radius:var(--mtrl-sys-shape-corner-large, 16px);border-end-start-radius:var(--mtrl-sys-shape-corner-large, 16px)}.mtrl-side-sheet--modal.mtrl-side-sheet--start .mtrl-side-sheet__container{box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 1px 3px 1px rgba(0,0,0,.15),-32px 0 0 0 var(--mtrl-sys-color-surface-container-low);border-start-end-radius:var(--mtrl-sys-shape-corner-large, 16px);border-end-end-radius:var(--mtrl-sys-shape-corner-large, 16px)}.mtrl-side-sheet--end{justify-content:flex-end}.mtrl-side-sheet--end .mtrl-side-sheet__container{transform:translateX(100%)}.mtrl-side-sheet--start{justify-content:flex-start}.mtrl-side-sheet--start .mtrl-side-sheet__container{transform:translateX(-100%)}.mtrl-side-sheet--open .mtrl-side-sheet__container{transform:translateX(0);transition:transform 450ms linear(0, 0.055, 0.18, 0.332, 0.483, 0.619, 0.733, 0.823, 0.891, 0.94, 0.973, 0.994, 1.007, 1.013, 1.015, 1.015, 1.013, 1.011, 1.009, 1.006, 1.005, 1.003, 1.002, 1.001, 1)}.mtrl-side-sheet--open .mtrl-side-sheet__scrim{opacity:1;visibility:visible;transition:opacity 450ms linear(0, 0.055, 0.18, 0.332, 0.483, 0.619, 0.733, 0.823, 0.891, 0.94, 0.973, 0.994, 1.007, 1.013, 1.015, 1.015, 1.013, 1.011, 1.009, 1.006, 1.005, 1.003, 1.002, 1.001, 1),visibility 0s}@media(prefers-reduced-motion: reduce){.mtrl-side-sheet .mtrl-side-sheet__container,.mtrl-side-sheet .mtrl-side-sheet__scrim,.mtrl-side-sheet--open .mtrl-side-sheet__container,.mtrl-side-sheet--open .mtrl-side-sheet__scrim{transition:none}}dialog.mtrl-side-sheet{width:auto;height:auto;max-width:none;max-height:none;margin:0;padding:0;border:0;overflow:visible;background:rgba(0,0,0,0);color:inherit;transition:overlay 175ms allow-discrete}dialog.mtrl-side-sheet::backdrop{background-color:color-mix(in srgb, var(--mtrl-sys-color-scrim) 32%, transparent);opacity:0;transition:opacity 175ms linear(0, 0.075, 0.227, 0.39, 0.537, 0.657, 0.751, 0.822, 0.874, 0.912, 0.939, 0.958, 0.971, 0.98, 0.987, 0.991, 0.994, 0.996, 0.997, 0.998, 0.999, 0.999, 0.999, 1, 1)}dialog.mtrl-side-sheet.mtrl-side-sheet--open::backdrop{opacity:1;transition:opacity 450ms linear(0, 0.055, 0.18, 0.332, 0.483, 0.619, 0.733, 0.823, 0.891, 0.94, 0.973, 0.994, 1.007, 1.013, 1.015, 1.015, 1.013, 1.011, 1.009, 1.006, 1.005, 1.003, 1.002, 1.001, 1)}@media(prefers-reduced-motion: reduce){dialog.mtrl-side-sheet,dialog.mtrl-side-sheet::backdrop{transition:none}}" });